/* ==========================================================================
   b.lo.c studio
   Two paths, one entry. DIVE DEEPER is the gallery scroll; SHOP is a
   conventional storefront. Same data, same product page, same inquiry.
   SHOP is faster, not louder — type, color and restraint carry across.

   The page takes its color from the photograph in front of you: --tone and
   --ink are interpolated from the selects against scroll position (js/site.js).
   Type: Labor Union carries the labels, Gambetta the reading voice.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- faces ---------------------------------------------------------------- */
/* Single-weight files are declared across a range so the browser serves the
   real file at every weight the site asks for, rather than faking a bold. */
@font-face {
  font-family: "Labor Union";
  src: url("../fonts/woff2/LaborUnion-Small.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Gambetta carries the reading voice: Light for running text, Regular for the
   display lines, Medium for the interview questions. */
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/woff2/Gambetta-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/woff2/Gambetta-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/woff2/Gambetta-LightItalic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("../fonts/woff2/Gambetta-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- tokens --------------------------------------------------------------- */
:root {
  --tone: #E5EFDD;
  --ink: #383F33;
  --ink-soft: #585F52;
  --ink-rgb: 56, 63, 51;

  --ui: "Labor Union", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Gambetta", "Iowan Old Style", Palatino, Georgia, serif;
  --serif: "Gambetta", "Iowan Old Style", Palatino, Georgia, serif;

  --masthead-h: 5.5rem;   /* until the script measures the real one */
  --vh-frame: calc(100svh - var(--masthead-h));

  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --measure: 33rem;
  --rule: rgba(var(--ink-rgb), .16);
  --rule-faint: rgba(var(--ink-rgb), .09);

  --fs-collection: clamp(2.4rem, 7vw, 6rem);
  --fs-display: clamp(1.6rem, 3.2vw, 2.7rem);
  --fs-lede: clamp(1.1rem, 1.7vw, 1.45rem);
  --fs-body: clamp(.95rem, 1vw, 1.05rem);
  --fs-micro: clamp(.62rem, .72vw, .72rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: cubic-bezier(.16, .84, .28, 1);
}

/* --- base ----------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--tone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: var(--masthead-h);
  transition: background-color .5s linear, color .5s linear;
}
body.is-locked { overflow: hidden; }

::selection { background: rgba(var(--ink-rgb), .16); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* --- type roles ----------------------------------------------------------- */
.collection-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-collection);
  line-height: .98;
  letter-spacing: -.025em;
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.16;
  letter-spacing: -.012em;
}
.label {
  font-family: var(--ui);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .5s linear;
}
.lede { font-size: var(--fs-lede); font-weight: 300; line-height: 1.5; max-width: 30ch; }
.prose { max-width: var(--measure); font-weight: 300; }
.prose p + p { margin-top: 1.3em; }
.serial {
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color .5s linear;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 300;
  padding: .6rem 1rem; background: var(--ink); color: var(--tone);
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase;
  transform: translateY(-250%);
}
.skip-link:focus { transform: none; }

/* --- masthead ------------------------------------------------------------- */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(.9rem, 2vw, 1.5rem) var(--gutter);
  background: var(--tone);
  border-bottom: 1px solid var(--rule);
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.masthead--clear { background: transparent; border-bottom-color: transparent; }

/* The mark carries two colours rather than one, so it is drawn rather than
   stencilled: the letterforms take the page's ink and stay legible from the
   palest surface tone to the deepest, while the circle takes the average
   colour of the photograph the page is standing in. Custom properties reach
   through <use> into the symbol, which a class selector could not. */
.mark-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Both fills are set on the root by the scroll painter; these are what the
   mark wears before the script has had its first frame. */
:root { --mark-ink: var(--ink-soft); --mark-fill: var(--mean, var(--ink-soft)); }
/* The bar takes its height from the mark plus its padding, so sizing the mark
   up carries the bar with it and the space around it is untouched. */
.brand { display: block; width: clamp(46px, 5vw, 60px); }
.brand[data-brand="foot"] { width: clamp(56px, 7vw, 72px); }
.brand__mark {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  /* The ground moves under the mark as the page turns over; the fills follow
     it at the same pace rather than snapping. */
  transition: color .5s linear;
}
.brand__mark path, .brand__mark circle { transition: fill .5s linear; }

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2.1rem); }
.nav a {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: .25em;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--ink); }
.nav a[aria-current="true"], .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: currentColor; }

/* The crossing between the two paths sits apart from the section links. */
.nav__cross {
  margin-left: clamp(.4rem, 1.4vw, 1rem);
  padding: .7em 1.2em;
  border: 1px solid var(--rule);
  color: var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav__cross:hover, .nav__cross:focus-visible { background: var(--ink); color: var(--tone); border-color: var(--ink); }

.nav__toggle { display: none; }

.masthead--invert .brand { background-color: #fff; }
.masthead--invert .nav a { color: rgba(255, 255, 255, .78); }
.masthead--invert .nav a:hover,
.masthead--invert .nav a:focus-visible,
.masthead--invert .nav a[aria-current="true"] { color: #fff; }
.masthead--invert .nav__cross { color: #fff; border-color: rgba(255, 255, 255, .4); }
.masthead--invert .nav__toggle { color: #fff; }

/* --- layout --------------------------------------------------------------- */
.shell { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 68rem; }
.section { padding-block: clamp(5rem, 15vh, 11rem); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding-bottom: 1.2rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
}

/* ==========================================================================
   Dive in — the shared entry
   ========================================================================== */
.dive { position: relative; }
.dive__stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  /* Work dissolves as it leaves the top rather than sliding under the nav,
     which keeps the masthead readable against whatever is passing. */
  --edge: clamp(64px, 9vh, 104px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge));
}

.drift {
  position: absolute;
  width: var(--w, 20vw);
  will-change: transform, opacity;
  cursor: pointer;
  background: rgba(var(--ink-rgb), .04);
}
.drift img {
  width: 100%; height: auto; display: block;
  box-shadow: 0 clamp(6px, 1.2vw, 20px) clamp(18px, 3.4vw, 52px) rgba(0, 0, 0, .17);
}
.drift::after {
  content: ""; position: absolute; inset: 0;
  outline: 1px solid transparent; outline-offset: 6px;
  transition: outline-color .3s var(--ease);
}
.drift:hover::after, .drift:focus-visible::after { outline-color: rgba(var(--ink-rgb), .35); }

/* The opening lines, held on landing. */
.intro-lede {
  position: absolute; z-index: 6;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 42rem);
  text-align: center;
  pointer-events: none;
  will-change: opacity, transform;
}
.intro-lede p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.9vw, 3rem);
  line-height: 1.3;
  letter-spacing: -.018em;
  text-shadow: var(--copy-halo);
}

/* A halo in the page's own tone: invisible against the background, but it
   holds the copy off whatever image happens to drift beneath it. */
:root { --copy-halo: 0 0 22px var(--tone), 0 0 8px var(--tone); }

/* The rest of the sentence, revealed a fragment at a time within the
   assortment. Positioned by JS from each fragment's data attributes. */
.intro-frags { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.frag {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: min(78vw, 24rem);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.7vw, 2.15rem);
  line-height: 1.28;
  letter-spacing: -.014em;
  text-wrap: balance;
  opacity: 0;
  will-change: opacity, transform;
  text-shadow: var(--copy-halo);
}

.dive__cue {
  position: fixed; left: 50%; bottom: clamp(1.5rem, 4vh, 2.6rem);
  transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: .7em;
  transition: opacity .6s var(--ease);
}
.dive__cue::after {
  content: ""; width: 1px; height: 2.4em;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: cue 2.8s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  35%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  70%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ==========================================================================
   The fork — a hard stop. The page holds until a choice is made (v3 §3).
   ========================================================================== */
.fork { min-height: 100svh; display: grid; place-items: center; text-align: center; }
.fork__inner { width: 100%; }
.fork__question {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.1; letter-spacing: -.02em;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.fork__options {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 48rem) { .fork__options { grid-template-columns: 1fr 1fr; } }

.fork__option {
  display: block;
  background: var(--tone);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  transition: background-color .5s linear, color .45s var(--ease);
}
.fork__option:hover, .fork__option:focus-visible { background: var(--ink); color: var(--tone); }
.fork__option:hover .fork__note, .fork__option:focus-visible .fork__note { color: var(--tone); opacity: .75; }
.fork__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1; letter-spacing: -.02em;
}
.fork__note {
  margin-top: 1rem; font-weight: 300; color: var(--ink-soft);
  max-width: 26ch; margin-inline: auto;
  transition: color .45s var(--ease), opacity .45s var(--ease);
}

/* ==========================================================================
   Collections — the DIVE DEEPER scroll
   ========================================================================== */
.opener {
  position: relative; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
}
.opener__bg { position: absolute; inset: 0; }
.opener__bg img { width: 100%; height: 100%; object-fit: cover; }
.opener__bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.14) 0%, rgba(0,0,0,.32) 100%);
}
.opener__inner { position: relative; z-index: 2; text-align: center; padding-inline: var(--gutter); }
.opener__title { color: #fff; }

/* The editorial layer: water and light, then the process. */
.depths { padding-block: clamp(5rem, 14vh, 10rem); }
.depths__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .depths__grid { grid-template-columns: 1fr 1fr; } }
.depths__block h3 { margin-bottom: .9rem; }
.depths__block p {
  font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.62; max-width: 38ch;
}

.piece {
  min-height: 100svh;
  display: grid; place-items: center;
  padding-block: clamp(3.5rem, 10vh, 8rem);
}
.piece__inner { width: 100%; display: grid; justify-items: center; gap: clamp(1.4rem, 3vw, 2.2rem); }
.piece__plate {
  width: min(62vw, 64vh * 1.509, 940px);
  aspect-ratio: 1565 / 1037;
  cursor: pointer; position: relative;
  box-shadow: 0 clamp(8px, 1.6vw, 26px) clamp(22px, 4vw, 64px) rgba(0, 0, 0, .18);
}
.piece__plate img { width: 100%; height: 100%; object-fit: cover; }
/* Two elements only in the scroll: the collection, and acquire (v2 §4.1). */
.piece__meta {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.2rem, 3vw, 2.4rem); flex-wrap: wrap;
}
.piece__collection { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; }

/* ==========================================================================
   SHOP
   ========================================================================== */
.shop-head { padding-top: clamp(6rem, 16vh, 9rem); }

.shop-collections { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .shop-collections { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .shop-collections { grid-template-columns: repeat(3, 1fr); } }

.shop-card { display: block; position: relative; overflow: hidden; }
.shop-card__plate { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rule-faint); }
.shop-card__plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--slow); }
.shop-card:hover .shop-card__plate img, .shop-card:focus-visible .shop-card__plate img { transform: scale(1.04); }
.shop-card__plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 52%);
}
.shop-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(1.1rem, 2.4vw, 1.8rem); color: #fff; }
.shop-card__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; }
.shop-card__short { margin-top: .45rem; font-weight: 300; color: rgba(255,255,255,.84); font-size: .95rem; }

/* Product grid — the storefront convention, in the studio's palette. */
.product-grid {
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 60rem) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 86rem) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card { display: block; text-align: center; }
.product-card__plate {
  aspect-ratio: 1565 / 1037; overflow: hidden;
  background: var(--rule-faint);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
}
.product-card__plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--slow); }
.product-card:hover .product-card__plate img, .product-card:focus-visible .product-card__plate img { transform: scale(1.035); }
.product-card__meta { margin-top: .9rem; display: grid; gap: .25rem; }
.product-card__collection { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.product-card__price { font-weight: 400; font-size: .88rem; color: var(--ink-soft); transition: color .5s linear; }

/* ==========================================================================
   Product detail page — shared by both paths
   ========================================================================== */
.pdp { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64rem) {
  .pdp { grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .85fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .pdp__buy { position: sticky; top: clamp(6rem, 14vh, 8.5rem); }
}

/* Horizontal scroll: artwork first, then in-room and framed examples as they
   arrive. Built for more frames than it currently has. */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: clamp(.6rem, 1.4vw, 1rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__frame { scroll-snap-align: center; }
.carousel__frame img {
  width: 100%; height: auto;
  box-shadow: 0 clamp(10px, 2vw, 30px) clamp(26px, 5vw, 72px) rgba(0, 0, 0, .20);
}
.carousel__bar { display: flex; gap: .4rem; margin-top: 1rem; }
.carousel__seg {
  flex: 1; height: 2px; background: var(--rule);
  transition: background-color .35s var(--ease);
}
.carousel__seg[aria-current="true"] { background: var(--ink); }
.carousel__count { margin-top: .6rem; }
.carousel--single .carousel__bar { display: none; }

.pdp__collection { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; letter-spacing: -.02em; }
.pdp__price { margin-top: 1.1rem; font-size: 1.05rem; font-weight: 400; }
.pdp__facts { margin-top: 1.6rem; display: grid; gap: .55rem; }
.pdp__fact { display: flex; gap: .7rem; align-items: baseline; font-weight: 300; color: var(--ink-soft); transition: color .5s linear; }
.pdp__fact::before { content: "—"; opacity: .5; }
.pdp__cta { margin-top: 1.9rem; width: 100%; justify-content: center; }

.spec { border-top: 1px solid var(--rule-faint); margin-top: 1.8rem; }
.spec div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--rule-faint); }
.spec dt { color: var(--ink-soft); font-weight: 300; transition: color .5s linear; }
.spec dd { text-align: right; font-weight: 400; }

.accordion { margin-top: 1.8rem; border-top: 1px solid var(--rule-faint); }
.accordion details { border-bottom: 1px solid var(--rule-faint); }
.accordion summary {
  list-style: none; cursor: pointer;
  padding: .95rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1rem; letter-spacing: 0; }
.accordion details[open] summary::after { content: "–"; }
.accordion p { padding-bottom: 1.1rem; font-weight: 300; color: var(--ink-soft); max-width: 42ch; transition: color .5s linear; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 7vw, 5rem); padding-top: 1.2rem; border-top: 1px solid var(--rule); }

/* ==========================================================================
   About / trade / contact
   ========================================================================== */
.about__lead { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 62rem) { .about__lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }

.studio-run { display: grid; gap: clamp(2.5rem, 6vw, 5rem); margin-top: clamp(3rem, 8vw, 6rem); }
.studio-row { display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; }
.studio-row--2, .studio-row--offset { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.studio-row--wide { grid-template-columns: 1fr; }
.studio-row--offset > *:nth-child(2) { margin-top: clamp(2rem, 6vw, 5rem); }
.studio-fig img { width: 100%; }

/* The quarter-turn from v2 §4.3 is baked into the asset by
   tools/process-extra.swift, so this only has to keep a portrait frame from
   towering over a full-width row. */
.studio-fig--portrait {
  width: 100%;
  max-width: min(28rem, 62vw);
  margin-inline: auto;
}

.trade__blocks { display: grid; gap: clamp(1.8rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: clamp(2.5rem, 6vw, 4rem); }
.trade__block { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.trade__block h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.1; margin-top: .4rem; }
.trade__block p { margin-top: .7rem; color: var(--ink-soft); font-weight: 300; transition: color .5s linear; }

/* --- buttons / forms ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .8em;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 1.05em 2em;
  border: 1px solid var(--ink); color: var(--ink);
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--tone); }
.btn--solid { background: var(--ink); color: var(--tone); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--ink); }
.btn--quiet { border-color: var(--rule); }

.link-underline { border-bottom: 1px solid var(--rule); padding-bottom: .12em; transition: border-color .3s var(--ease); }
.link-underline:hover, .link-underline:focus-visible { border-bottom-color: var(--ink); }

.form { display: grid; gap: 1.5rem; max-width: 34rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  padding: .55rem 0; transition: border-color .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field option { color: #1a1a1a; }
.form__status { font-size: var(--fs-micro); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; min-height: 1.2em; }

/* --- footer --------------------------------------------------------------- */
.foot { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 7vh, 4.5rem) clamp(1.5rem, 4vh, 2.5rem); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2.5rem; align-items: start; }
.foot__grid ul { display: grid; gap: .55rem; }
.foot__grid a { color: var(--ink-soft); font-weight: 300; transition: color .3s var(--ease); }
.foot__grid a:hover, .foot__grid a:focus-visible { color: var(--ink); }
.foot__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.1rem;
  border-top: 1px solid var(--rule-faint);
  color: var(--ink-soft); font-size: .82rem; font-weight: 300;
}

/* --- reveal / anchors ----------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
.tone-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; opacity: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 62rem) {
  .piece__plate { width: min(88vw, 52vh * 1.509); }
}

@media (max-width: 46rem) {
  .nav {
    position: fixed; inset: 0;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.5rem; padding: var(--gutter);
    background: var(--tone);
    transform: translateY(-100%);
    transition: transform .55s var(--slow);
  }
  .nav[data-open="true"] { transform: none; }
  .nav a { font-size: .8rem; letter-spacing: .18em; }
  .nav__cross { margin-left: 0; }
  .nav__toggle {
    display: block; position: relative; z-index: 2;
    font-size: var(--fs-micro); font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .studio-row--offset > *:nth-child(2) { margin-top: 0; }
  .intro-lede { width: 88vw; }
  .intro-lede p { font-size: clamp(1.25rem, 6.4vw, 1.9rem); }
  .frag { font-size: clamp(1.05rem, 5vw, 1.5rem); max-width: 80vw; }
}

/* ==========================================================================
   Reduced motion — the field becomes an ordinary run of images
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }

  .dive { height: auto !important; }
  .dive__stage { position: static; height: auto; overflow: visible; padding-block: 3rem; }
  .drift {
    position: relative; inset: auto;
    width: min(78vw, 44rem) !important;
    transform: none !important; opacity: 1 !important;
    margin: 0 auto clamp(2rem, 6vw, 4rem);
  }
  .intro-lede, .frag {
    position: static; transform: none; opacity: 1 !important;
    margin: clamp(1.5rem, 5vw, 3rem) auto;
    text-align: center;
    max-width: min(90vw, 36rem);
  }
  .intro-frags { position: static; }
  .dive__cue { display: none; }
  .piece { min-height: 0; }
  .opener { height: auto; padding-block: clamp(4rem, 12vh, 8rem); }
  .fork { min-height: 0; padding-block: clamp(3rem, 8vh, 5rem); }
}

/* ==========================================================================
   v3 — DIVE DEEPER: depth rows, expanded depth, horizontal journey
   ========================================================================== */

/* A short reintroduction of the work itself before the depths are indexed. */
.deepdive { position: relative; }
.deepdive__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* The table of contents. Each row is one depth, light to dark. */
.depths-index { position: relative; }

.depth { position: relative; }
.depth + .depth { border-top: 1px solid rgba(255, 255, 255, .18); }

.depth__row {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(160px, 24vh, 280px);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: height .55s var(--slow);
}
.depth__row img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--slow);
}
.depth__row:hover img { transform: scale(1.05); }
.depth__row::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.46) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.3) 100%);
}
.depth__rowinner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--gutter);
  color: #fff;
}
.depth__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 4rem); line-height: 1;
  letter-spacing: -.025em;
}
.depth__cue {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  display: flex; align-items: center; gap: .6em;
}
.depth__cue::after { content: "+"; font-size: 1.1rem; letter-spacing: 0; }

/* Open: the row shrinks and pins as the header for the depth below it,
   sitting under the masthead rather than behind it. */
.depth.is-open .depth__row {
  position: sticky; top: var(--masthead-h, 76px); z-index: 30;
  height: clamp(72px, 11vh, 104px);
}
.depth.is-open .depth__cue::after { content: "–"; }

.depth__panel { display: none; }
.depth.is-open .depth__panel {
  display: block;
  min-height: 100svh;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.depth__blurb { max-width: 42ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.depth__blurb p { font-weight: 300; font-size: var(--fs-lede); line-height: 1.5; }
.depth__blurb p + p { margin-top: 1em; }

.depth__grid {
  display: grid; gap: clamp(.8rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) { .depth__grid { grid-template-columns: repeat(3, 1fr); } }

.depth__tile { display: block; cursor: pointer; }
.depth__tile-plate { aspect-ratio: 1565 / 1037; overflow: hidden; background: var(--rule-faint); }
.depth__tile-plate img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--slow); }
.depth__tile:hover .depth__tile-plate img { transform: scale(1.04); }
.depth__tile .serial { margin-top: .5rem; display: block; }

/* The horizontal journey, scoped to one depth. */
.journey { display: none; }
.depth.is-journey .journey { display: block; }
.depth.is-journey .depth__grid,
.depth.is-journey .depth__blurb { display: none; }

.journey__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.journey__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(82vw, 62rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.journey__track::-webkit-scrollbar { display: none; }
.journey__frame { scroll-snap-align: center; }
.journey__frame img {
  width: 100%; height: auto;
  box-shadow: 0 clamp(10px, 2vw, 30px) clamp(26px, 5vw, 70px) rgba(0, 0, 0, .2);
}
.journey__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; }

/* ==========================================================================
   v3 — Editorial. The one place the layout behaves like a printed page.
   ========================================================================== */
.editorial { max-width: 58rem; margin-inline: auto; }
.editorial__kicker { text-align: center; }
.editorial__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1.04;
  letter-spacing: -.025em; text-align: center;
  margin-top: 1rem; text-wrap: balance;
}
.editorial__standfirst {
  font-size: var(--fs-lede); font-weight: 300; line-height: 1.5;
  text-align: center; max-width: 46ch; margin: clamp(1.5rem, 3vw, 2.2rem) auto 0;
  text-wrap: balance;
}
.editorial__body { max-width: 36rem; margin-inline: auto; margin-top: clamp(3rem, 7vw, 5rem); }
.editorial__body p { font-weight: 300; font-size: 1.06rem; line-height: 1.78; }
.editorial__body p + p { margin-top: 1.4em; }
.editorial__pull {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.3;
  letter-spacing: -.015em; text-align: center;
  max-width: 26ch; margin: clamp(2.5rem, 6vw, 4rem) auto;
  text-wrap: balance;
}
.editorial__figure { margin: clamp(2.5rem, 6vw, 4.5rem) 0; }
.editorial__figure--wide { max-width: 58rem; margin-inline: auto; }
.editorial__figure--bleed { max-width: none; width: 100%; }
.editorial__figure img { width: 100%; }
.editorial__figure figcaption { margin-top: .7rem; text-align: center; }
.editorial__pair { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ==========================================================================
   v3 — Instagram row
   ========================================================================== */
.ig__row {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(min(46vw, 15rem), 1fr);
  gap: clamp(.4rem, 1vw, .8rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.ig__row::-webkit-scrollbar { display: none; }
.ig__tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--rule-faint); }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--slow); }
.ig__tile:hover img { transform: scale(1.05); }

/* ==========================================================================
   v3 — Product detail page: two purchase modes
   ========================================================================== */
.modes {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  margin-bottom: 1.6rem;
}
.mode {
  padding: .95em 1em;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.mode + .mode { border-left: 1px solid var(--rule); }
.mode[aria-selected="true"] { background: var(--ink); color: var(--tone); }

.mode-panel[hidden] { display: none; }
.mode-panel__line { margin-bottom: 1.2rem; }
.mode-panel__material { font-weight: 300; color: var(--ink-soft); max-width: 34ch; transition: color .5s linear; }

.sizes { display: grid; gap: .45rem; margin-top: 1.4rem; }
.size {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85em 1.1em;
  border: 1px solid var(--rule);
  font-weight: 300;
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.size:hover { border-color: rgba(var(--ink-rgb), .42); }
.size[aria-checked="true"] { border-color: var(--ink); background: rgba(var(--ink-rgb), .05); }
.size__price { font-weight: 400; }
.size__note { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

.buy__note { margin-top: .9rem; font-size: .86rem; font-weight: 300; color: var(--ink-soft); transition: color .5s linear; }

@media (prefers-reduced-motion: reduce) {
  .deepdive { height: auto !important; }
  .deepdive__stage { position: static; height: auto; overflow: visible; padding-block: 3rem; }
  .depth.is-open .depth__row { position: static; }
  .depth__row { height: auto; min-height: 120px; }
}

/* ==========================================================================
   v4 — scroll-driven journey (GSAP ScrollTrigger + Lenis)
   Sections pin and their timelines are scrubbed against scroll, in the manner
   of the reference: the page is one ruler and each act claims a range of it.
   ========================================================================== */

/* Every act is a tall rail with a pinned stage inside it. */
.act { position: relative; }
.act__stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* --- the featured image, centre stage ------------------------------------- */
.featured {
  position: relative; z-index: 3;
  width: min(46vw, 52vh * 1.5, 720px);
  aspect-ratio: 3 / 2;
  will-change: transform, opacity;
}
.featured__frame {
  position: absolute; inset: 0;
  opacity: 0;
  overflow: hidden;
}
.featured__frame img { width: 100%; height: 100%; object-fit: cover; }
.featured__frame.is-live { opacity: 1; }

/* --- copy that reads in place -------------------------------------------- */
.script {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  pointer-events: none;
  padding-inline: var(--gutter);
}
.script__line {
  grid-area: 1 / 1;
  max-width: min(90vw, 40rem);
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2.8rem);
  line-height: 1.24;
  letter-spacing: -.018em;
  text-wrap: balance;
  opacity: 0;
  text-shadow: var(--copy-halo);
  will-change: opacity, transform;
}
.script--lower { align-items: end; padding-bottom: 12vh; }

/* Landing mark, set as type (v4 §2 beat 1). */
.landing__mark {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 5.4vw, 4.2rem);
  line-height: 1.1; letter-spacing: -.02em;
  text-align: center;
}
.landing__bleed {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0;
  will-change: transform, opacity;
}
.landing__bleed img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   v4 — depths
   ========================================================================== */
.depth-act { position: relative; }
.depth-act .act__stage { display: grid; place-items: center; }

.depth-head {
  position: absolute; z-index: 7;
  top: calc(var(--masthead-h, 84px) + 1.4rem);
  left: var(--gutter);
  pointer-events: none;
}
.depth-head__numeral {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1;
  color: var(--ink-soft); transition: color .5s linear;
}
.depth-head__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1;
  letter-spacing: -.025em; margin-top: .3rem;
}
.depth-head__palette { margin-top: .7rem; max-width: 22ch; }

/* Images surround the copy rather than sitting behind it. */
.depth-field { position: absolute; inset: 0; }
.depth-field__item {
  position: absolute;
  width: var(--w, 15vw);
  aspect-ratio: 1565 / 1037;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
}
.depth-field__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--slow); }
.depth-field__item:hover img { transform: scale(1.05); }

/* --- sub nav (v4 §5.2) ---------------------------------------------------- */
.subnav {
  position: fixed; z-index: 80;
  right: var(--gutter); top: 50%;
  transform: translateY(-50%);
  display: grid; gap: .85rem;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.subnav.is-live { opacity: 1; pointer-events: auto; }
.subnav__item {
  display: flex; align-items: center; justify-content: flex-end; gap: .7rem;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
}
.subnav__item::after {
  content: ""; width: 26px; height: 1px;
  background: currentColor; opacity: .45;
  transition: width .35s var(--ease), opacity .35s var(--ease);
}
.subnav__item:hover { color: var(--ink); }
.subnav__item[aria-current="true"] { color: var(--ink); }
.subnav__item[aria-current="true"]::after { width: 46px; opacity: 1; }

/* ==========================================================================
   v4 — image viewer
   ========================================================================== */
.viewer { position: fixed; inset: 0; z-index: 200; display: grid; }
.viewer[hidden] { display: none; }
.viewer__scrim { position: absolute; inset: 0; background: var(--tone); opacity: 0; transition: opacity .4s var(--ease); }
.viewer.is-open .viewer__scrim { opacity: .985; }
.viewer__panel {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1rem, 2.4vw, 1.8rem) var(--gutter) clamp(1.5rem, 3vw, 2.4rem);
  opacity: 0; transform: translateY(1rem);
  transition: opacity .4s var(--ease), transform .5s var(--slow);
}
.viewer.is-open .viewer__panel { opacity: 1; transform: none; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.viewer__stage { display: grid; place-items: center; min-height: 0; padding-block: clamp(1rem, 3vh, 2rem); }
.viewer__stage img {
  max-width: min(100%, 76vw); max-height: 64vh;
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 clamp(10px, 2vw, 30px) clamp(26px, 5vw, 72px) rgba(0, 0, 0, .22);
}
.viewer__foot { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.viewer__steps { display: flex; gap: .5rem; align-items: center; }
.viewer__step {
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--rule);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.viewer__step:hover:not(:disabled) { background: var(--ink); color: var(--tone); border-color: var(--ink); }
.viewer__step:disabled { opacity: .3; cursor: default; }

/* ==========================================================================
   v4 — trade web + contact
   ========================================================================== */
.web { position: absolute; inset: 0; }
.web__tile {
  position: absolute;
  width: var(--w, 9vw);
  aspect-ratio: 1565 / 1037;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
}
.web__tile img { width: 100%; height: 100%; object-fit: cover; }

.trade-card { grid-area: 1 / 1; max-width: min(90vw, 34rem); text-align: center; opacity: 0; will-change: opacity, transform; }
.trade-card h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08; letter-spacing: -.02em;
}
.trade-card p { margin-top: 1rem; font-weight: 300; font-size: var(--fs-lede); line-height: 1.5; text-shadow: var(--copy-halo); }

.rotator { display: inline-grid; vertical-align: baseline; }
.rotator__word { grid-area: 1 / 1; opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); transform: translateY(.25em); white-space: nowrap; }
.rotator__word.is-live { opacity: 1; transform: none; }

@media (max-width: 46rem) {
  .featured { width: min(84vw, 42vh * 1.5); }
  .script__line { font-size: clamp(1.15rem, 5.4vw, 1.7rem); }
  .landing__mark { font-size: clamp(1.5rem, 7.4vw, 2.2rem); }
  .depth-head { left: var(--gutter); right: var(--gutter); }
  .depth-head__name { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  /* Sub nav collapses to a compact strip on narrow screens (v4 §10.7). */
  .subnav { right: auto; left: 50%; top: auto; bottom: 1rem; transform: translateX(-50%);
            grid-auto-flow: column; gap: .5rem; }
  .subnav__item { font-size: .55rem; letter-spacing: .1em; }
  .subnav__item::after { width: 12px; }
  .subnav__item[aria-current="true"]::after { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .act { height: auto !important; }
  .act__stage { position: static; height: auto; overflow: visible; display: block; padding-block: 3rem; }
  .field, .web { position: static; }
  .field__item, .web__tile, .depth-field__item {
    position: relative; width: min(70vw, 30rem) !important;
    opacity: 1 !important; transform: none !important; margin: 0 auto 1.5rem;
  }
  .featured { width: min(84vw, 44rem); margin-inline: auto; }
  .featured__frame { position: relative; opacity: 1; }
  .script { position: static; display: block; }
  .script__line { opacity: 1 !important; transform: none !important; margin: 1.5rem auto; }
  .landing__bleed { position: relative; opacity: 1; height: 60svh; }
  .subnav { display: none; }
  .trade-card { opacity: 1 !important; margin: 2rem auto; }
  .rotator__word:not(:first-child) { display: none; }
  .rotator__word:first-child { opacity: 1; transform: none; }
}

/* Interview questions read as the editorial's structural device. */
.editorial__q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  margin-bottom: 1.2em;
}
.editorial__body + .editorial__body { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ==========================================================================
   v5 — condensed journey
   ========================================================================== */

/* Fragments placed among the scatter rather than held dead centre. */
.script__line--placed {
  position: absolute;
  grid-area: auto;
  transform: translate(-50%, -50%);
  max-width: min(78vw, 26rem);
  text-align: left;
}

/* In a depth the images lead: copy drops to a supporting size and sits low,
   out of the way of the work. */
.script--depth { align-items: end; padding-bottom: 9vh; }
.script__line--depth {
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  font-weight: 300;
  font-family: var(--ui);
  letter-spacing: 0;
  line-height: 1.4;
  max-width: min(88vw, 34rem);
}

/* Depth plates carry the section now. */
.depth-field__item { box-shadow: 0 12px 44px rgba(0, 0, 0, .2); }

/* Trade establishing frame. */
.trade-lead { max-width: min(90vw, 34rem); text-align: center; }
.trade-lead__line {
  margin-top: 1rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.22; letter-spacing: -.018em;
  text-wrap: balance;
  text-shadow: var(--copy-halo);
}

/* The sub nav is vertical on the right at every width. */
@media (max-width: 46rem) {
  .subnav {
    right: var(--gutter); left: auto;
    top: 50%; bottom: auto;
    transform: translateY(-50%);
    grid-auto-flow: row; gap: .6rem;
  }
  .subnav__item { font-size: .5rem; letter-spacing: .12em; }
  .subnav__item::after { width: 14px; }
  .subnav__item[aria-current="true"]::after { width: 24px; }
  .script__line--placed { max-width: 72vw; }
}

@media (prefers-reduced-motion: reduce) {
  .script__line--placed { position: static; transform: none; text-align: center; }
  .trade-lead { margin: 2rem auto; }
}

/* Shop lands on the work itself — collections stacked with their pieces. */
.shop-group + .shop-group { margin-top: clamp(3rem, 7vw, 5rem); }

/* The landing carries two lines as one block, not two layers in one cell. */
.script--stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.script--stack .script__line { grid-area: auto; }

/* ==========================================================================
   v6 — the minimal landing
   Five moves: a full frame, a line, the work, a paragraph, the conversation.
   ========================================================================== */
.hero { height: var(--vh-frame); overflow: hidden; }
/* On the landing the image is full bleed, so it starts above the bar. */
[data-page="home"] .hero { margin-top: calc(var(--masthead-h) * -1); height: 100svh; }
.hero img { width: 100%; height: 100%; object-fit: cover; }

/* Copy sits on clean ground, nothing else in the frame. */
.statement {
  min-height: 78svh;
  display: grid;
  place-items: center;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  text-align: center;
}
.statement__line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  line-height: 1.24;
  letter-spacing: -.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.statement__para {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  line-height: 1.38;
  letter-spacing: -.014em;
  max-width: 40ch;
  text-wrap: balance;
}

/* The work, light to dark. No captions, no collection names. */
.work { padding: clamp(2rem, 6vh, 4rem) var(--gutter) clamp(5rem, 12vh, 8rem); }
.work__grid {
  max-width: 96rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(.5rem, 1.2vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 46rem) { .work__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70rem) { .work__grid { grid-template-columns: repeat(4, 1fr); } }

.work__item {
  display: block;
  aspect-ratio: 1565 / 1037;
  overflow: hidden;
  background: var(--rule-faint);
}
.work__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--slow); }
.work__item:hover img, .work__item:focus-visible img { transform: scale(1.035); }

.editorial__head { text-align: center; margin-bottom: clamp(3rem, 8vw, 5rem); }
.editorial__head .editorial__title { margin-top: .8rem; }

/* ==========================================================================
   v7 — five pages
   The landing holds its own line; the paragraph gets a clean ground; the work
   is entered in home, then indexed as a field; the interview folds away.
   ========================================================================== */

/* --- 1 · the landing ------------------------------------------------------ */
.hero { position: relative; }

.hero__action {
  position: absolute; left: 0; right: 0; bottom: clamp(2rem, 7vh, 4.5rem); z-index: 3;
  display: flex; justify-content: center;
}
.hero__pill {
  display: inline-flex; align-items: center; gap: .9em;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink);
  padding: .95rem 1.8rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--tone);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.hero__pill svg {
  width: 1.05em; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.hero__pill:hover, .hero__pill:focus-visible {
  background: var(--ink); color: var(--tone); border-color: var(--ink);
}

.hero__copy {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: var(--gutter); text-align: center;
}
/* The mark is set the way a pronunciation is set: bracketed and sloped. */
.hero__line em { font-style: italic; }

.hero__line {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.53rem, 3.96vw, 3.06rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  max-width: 20ch;
  color: var(--ink);
  text-wrap: balance;
  transition: color .5s linear;
}

/* --- 3 · in home ---------------------------------------------------------- */
.inhome { position: relative; height: var(--vh-frame); overflow: hidden; background: #14171a; }
.inhome__stage { position: absolute; inset: 0; }
.inhome__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--slow);
}
.inhome__slide[data-live="true"] { opacity: 1; }
.inhome__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Just enough ground at the foot for the two white labels. */
.inhome::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 12, 10, .46), rgba(8, 12, 10, 0) 28%);
}

.inhome__arrow {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: clamp(3.4rem, 6vw, 5.6rem); aspect-ratio: 1;
  display: grid; place-items: center;
  color: #fff;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  opacity: .8;
}
.inhome__arrow svg {
  width: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 12px rgba(6, 14, 16, .45));
}
.inhome__arrow--prev { left: clamp(.8rem, 2.6vw, 2.4rem); }
.inhome__arrow--next { right: clamp(.8rem, 2.6vw, 2.4rem); }
.inhome__arrow:hover, .inhome__arrow:focus-visible { opacity: 1; }
.inhome__arrow--prev:hover { transform: translateY(-50%) translateX(-3px); }
.inhome__arrow--next:hover { transform: translateY(-50%) translateX(3px); }
.inhome__arrow:focus-visible { outline-color: #fff; }

.inhome__caption, .inhome__count {
  position: absolute; z-index: 3;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  color: rgba(255, 255, 255, .88);
}
.inhome__caption { left: clamp(1.25rem, 4.5vw, 3.4rem); }
.inhome__count { right: clamp(1.25rem, 4.5vw, 3.4rem); font-variant-numeric: tabular-nums; }

/* --- 4 · the portfolio ---------------------------------------------------- */
/* A rail long enough to travel, with the field pinned inside it. */
.gallery { position: relative; }
.gallery__rail { position: relative; height: calc(var(--vh-frame) * 5.1); }

.gallery__stage {
  --cell: clamp(210px, 30.4vw, 478px);
  --cols: 7; --rows: 5;
  position: sticky; top: var(--masthead-h);
  height: var(--vh-frame);
  overflow: clip;
  cursor: grab;
  /* The vertical axis stays the page's, so a touch can always scroll past. */
  touch-action: pan-y;
}
.gallery__stage.is-dragging { cursor: grabbing; }
@media (max-width: 46rem) { .gallery__stage { --cols: 4; --rows: 7; } }
@media (min-width: 100rem) { .gallery__stage { --cols: 9; --rows: 6; } }

.gallery__plane { position: absolute; top: 0; left: 0; will-change: transform; }
.gallery__tile {
  position: absolute; top: 0; left: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  /* The vertical air is unchanged, so the row is now shorter than the cell is
     wide: a wide gutter across, a generous one down. */
  grid-auto-rows: calc(var(--cell) * .924);
}

/* Square cells holding landscape frames: the air around each piece is the
   cell, not a gap. */
.gallery__item {
  display: grid; align-content: center;
  padding-inline: calc(var(--cell) * .145);
  -webkit-user-select: none; user-select: none;
}
.gallery__frame {
  display: block;
  width: 100%; aspect-ratio: 1565 / 1037;
  overflow: hidden;
  background: rgba(var(--ink-rgb), .07);
}
.gallery__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--slow);
  -webkit-user-drag: none;
}
.gallery__item:hover .gallery__frame img,
.gallery__item:focus-visible .gallery__frame img { transform: scale(1.045); }

/* Over the field the pointer is replaced by the word for what a click does. */
@media (hover: hover) and (pointer: fine) {
  .gallery__stage, .gallery__item { cursor: none; }
  .gallery__stage.is-dragging { cursor: grabbing; }
  .deeper, .deeper__link, .gallery__hint { cursor: pointer; }
}
.cursor {
  position: fixed; top: 0; left: 0; z-index: 80;
  pointer-events: none;
  display: grid; place-items: center;
  width: 5.2rem; height: 2.1rem;
  background: var(--tone); color: var(--ink);
  border: 1px solid var(--ink);
  opacity: 0; scale: .7;
  transition: opacity .3s var(--ease), scale .4s var(--slow),
              background-color .5s linear, color .5s linear, border-color .5s linear;
  will-change: transform;
}
.cursor.is-live { opacity: 1; scale: 1; }
.cursor span {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
}

/* The affordance, until it is used once. */
.gallery__hint {
  position: absolute; z-index: 4;
  left: clamp(1.25rem, 4.5vw, 3.4rem); bottom: clamp(1.25rem, 4vh, 2.5rem);
  padding: .55rem .95rem;
  background: var(--tone); color: var(--ink-soft);
  transition: opacity .6s var(--ease), background-color .5s linear, color .5s linear;
}
.gallery__hint.is-gone { opacity: 0; }

/* Narrow, the way out is centred across the whole width and the hint was
   sitting under it. It stacks above the pill instead, both centred, so the
   two read as one column in the lower third. */
@media (max-width: 46rem) {
  .gallery__hint {
    left: 50%; transform: translateX(-50%);
    bottom: calc(clamp(1.25rem, 4vh, 2.5rem) + 3.9rem);
  }
}

/* The way on, held at the foot of the field. */
.deeper {
  position: absolute; z-index: 4;
  left: 0; right: 0; bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: flex; justify-content: center;
}
.deeper__link {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  padding: .85rem 1.7rem;
  background: var(--tone);
  border: 1px solid var(--rule); border-radius: 999px;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.deeper__link::after { content: "\2193"; margin-left: .8em; letter-spacing: 0; }
.deeper__link:hover, .deeper__link:focus-visible {
  background: var(--ink); color: var(--tone); border-color: var(--ink);
}

/* --- 5 · in conversation --------------------------------------------------
   Set as an editorial: an opening frame that holds while the article wipes up
   over it, a bar that fills as you read, and a ground the reader chooses.
   -------------------------------------------------------------------------- */
.convo { position: relative; }

/* The bar along the top, while the piece is being read. */
.convo__progress {
  position: fixed; top: var(--masthead-h); left: 0; right: 0; z-index: 70;
  height: 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.convo__progress.is-live { opacity: 1; }
.convo__progress-bar {
  display: block; height: 100%; width: 100%;
  background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: background-color .5s linear;
}

/* --- the opening frame ---------------------------------------------------- */
/* Twice the frame tall, so the sticky image holds for one screen while the
   article, pulled back up by the same amount, wipes over it. */
.convo__hero { position: relative; height: calc(var(--vh-frame) * 2); }
.convo__hero-frame {
  position: sticky; top: var(--masthead-h);
  height: var(--vh-frame); overflow: clip;
}
.convo__hero-frame > img { width: 100%; height: 100%; object-fit: cover; }
.convo__hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 10, .52), rgba(6, 12, 10, .18) 46%, rgba(6, 12, 10, .5));
}
/* The title sits low, clear of the subject, the way a cover carries it. */
.convo__hero-copy {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: start; justify-items: center;
  padding: var(--gutter);
  padding-top: clamp(3.5rem, 15svh, 11rem);
  text-align: center;
}
.convo__kicker {
  font-family: var(--ui); font-weight: 500;
  font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin-bottom: clamp(.5rem, 1.25vw, .9rem);
}
.convo__title {
  font-family: var(--serif);
  font-weight: 300;
  /* Sized off the viewport so the name holds a single line at every width. */
  font-size: clamp(1.5rem, 6.1vw, 6rem);
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* --- the article panel ---------------------------------------------------- */
/* Its own ground, chosen by the reader, so it overrides the page's tone for
   everything inside it. */
.convo__panel {
  --tone: #E7E8DD;
  --ink: #3A3B32;
  --ink-soft: #63645A;
  --ink-rgb: 58, 59, 50;

  position: relative; z-index: 2;
  margin-top: calc(var(--vh-frame) * -1);
  background: var(--tone); color: var(--ink);
  padding-block: clamp(3rem, 9vh, 6rem) clamp(5rem, 15vh, 11rem);
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
.convo__panel[data-mode="dark"] {
  --tone: #2A3125;
  --ink: #CDD6C8;
  --ink-soft: #969F91;
  --ink-rgb: 205, 214, 200;
}
.convo .shell { max-width: 68rem; }

.convo__meta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  max-width: 60rem; margin: 0 auto clamp(2.5rem, 7vw, 4.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.convo__theme { display: flex; }
.convo__theme button, .convo__share {
  font-family: var(--ui); font-weight: 500;
  font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: .5rem .9rem;
  border: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.convo__theme button[aria-pressed="true"] { color: var(--ink); border-color: var(--rule); }
.convo__theme button:hover, .convo__share:hover { color: var(--ink); }
.convo__share { padding-inline: 0; }
.convo__share-note { margin-left: .8em; opacity: 0; transition: opacity .3s var(--ease); }
.convo__share-note.is-live { opacity: 1; }

.convo__lead, .convo__block { max-width: 60rem; margin-inline: auto; }
.convo__lead::after, .convo__block::after { content: ""; display: block; clear: both; }

/* The answers are set in the same voice as the questions; the questions carry
   the weight. */
.convo__lead p, .convo__block p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  letter-spacing: -.012em;
}
.convo .editorial__q { font-weight: 500; }
/* A figure sits between paragraphs, so the rhythm is set on the flow, not on
   adjacent paragraphs. */
.convo__lead > * + p, .convo__block > * + p { margin-top: 1.1em; }

/* --- the frames, in assorted breaks --------------------------------------- */
.convo__fig { margin: clamp(1.6rem, 4vw, 2.4rem) 0; }
.convo__fig img { width: 100%; }
.convo__fig--feature { clear: both; width: 100%; margin: clamp(2.6rem, 7vw, 4.5rem) 0; }

/* A short run of frames across the measure, top-aligned so the differing
   heights read as the break they are. */
.convo__row {
  clear: both;
  display: grid; align-items: start;
  gap: clamp(.8rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  margin: clamp(2.6rem, 7vw, 4.5rem) 0;
}
.convo__row .convo__fig { margin: 0; }

@media (min-width: 52rem) {
  .convo__fig--right, .convo__fig--left { width: 38%; shape-outside: margin-box; }
  /* Each frame clears the last, so the column is never squeezed between two. */
  .convo__fig--right { float: right; clear: both; margin: .45rem 0 1.7rem clamp(1.7rem, 3.6vw, 3rem); }
  .convo__fig--left  { float: left;  clear: both; margin: .45rem clamp(1.7rem, 3.6vw, 3rem) 1.7rem 0; }
}

/* Folded, the next question is still showing — enough of it to be worth
   opening — and the way in sits over the point where it fades out. */
.convo__rest {
  --peek: clamp(9rem, 24vh, 15rem);
  display: grid; grid-template-rows: var(--peek);
  margin-top: clamp(2.8rem, 7vw, 4.5rem);
  transition: grid-template-rows .9s var(--slow);
}
.convo__rest[data-open="true"] { grid-template-rows: 1fr; }
.convo__rest-inner { overflow: hidden; min-height: 0; }
.convo__rest[data-open="false"] .convo__rest-inner {
  -webkit-mask-image: linear-gradient(180deg, #000 22%, rgba(0, 0, 0, 0) 96%);
  mask-image: linear-gradient(180deg, #000 22%, rgba(0, 0, 0, 0) 96%);
}
.convo__block { margin-top: clamp(2.8rem, 7vw, 4.5rem); }
.convo__rest-inner > .convo__block:first-child { margin-top: 0; }
.convo__rest .editorial__pull { max-width: 60rem; margin-inline: auto; }

.convo__action { position: relative; z-index: 2; margin-top: clamp(2.4rem, 6vw, 3.6rem); text-align: center; }
/* Closed, the button rides up over the fade. */
.convo__rest[data-open="false"] + .convo__action { margin-top: calc(var(--peek) * -.34); }
.convo__action .btn { background: var(--tone); }

@media (prefers-reduced-motion: reduce) {
  .inhome__slide, .convo__rest, .cursor, .convo__panel { transition: none; }
}

/* ==========================================================================
   The library — the collections
   A way in, then one collection per frame. Each frame is pinned and the next
   slides up over it, so the ground changes as you travel down through the work.
   ========================================================================== */

/* The way in. */
.gate { position: relative; height: var(--vh-frame); overflow: clip; }
/* Mirrored, so the room turns the same way as the one in the drawer. */
.gate__img { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.gate__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 10, .18), rgba(8, 12, 10, 0) 38%, rgba(8, 12, 10, .42));
}
.gate__action {
  position: absolute; left: 0; right: 0; bottom: 17%; z-index: 2;
  display: flex; justify-content: center;
}
.gate__pill {
  display: inline-flex; align-items: center; gap: .9em;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: #fff;
  padding: .95rem 1.8rem;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background: rgba(10, 16, 14, .2);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.gate__pill svg {
  width: 1.05em; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.gate__pill:hover, .gate__pill:focus-visible { background: #fff; color: #14171a; border-color: #fff; }

/* --- the collections ------------------------------------------------------ */
.library { position: relative; }

/* Half a frame taller than it shows, so each collection holds longer before
   the next covers it. The stack still works: the panels are siblings, so each
   one paints over the one before. */
.library__panel {
  position: sticky; top: var(--masthead-h);
  height: calc(var(--vh-frame) * 1.5);
  background: var(--tone); color: var(--ink);
  display: grid; grid-template-rows: 1fr auto;
  gap: clamp(2.2rem, 6vh, 4.5rem);
  padding: clamp(1.6rem, 4.5vh, 3rem)
           clamp(1rem, 3vw, 3.2rem)
           calc(var(--vh-frame) * .5 + clamp(2rem, 6vh, 4rem));
}

.library__grid {
  min-height: 0;
  display: grid;
  gap: clamp(2rem, 4.6vw, 4.2rem);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}
@media (max-width: 60rem) { .library__grid { grid-template-columns: repeat(2, 1fr); } }

/* The work keeps its own proportions — the row gives it a box, the art sits
   in the middle of it, and what is left over is air. */
.library__card { display: block; min-height: 0; }
/* The plate is the box the row gives; the art is absolutely centred inside it
   so its cap always resolves against a definite height and it can never grow
   past its cell, however the columns rewrap. */
.library__plate { position: relative; display: block; width: 100%; height: 100%; min-height: 0; }
.library__plate img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  /* The margin a print carries. */
  border: clamp(5px, .75vw, 12px) solid #fff;
  box-shadow: 0 1.2rem 3rem rgba(8, 12, 10, .16);
  transition: transform 1.2s var(--slow);
}
.library__card:hover .library__plate img,
.library__card:focus-visible .library__plate img { transform: translateY(-.35rem); }

/* Name and note on one line, the note held to the right. */
.library__foot {
  display: grid; gap: .6rem 2rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
}
.library__name { grid-column: 1; }
.library__scroll { grid-column: 2; justify-self: center; }
.library__short { grid-column: 3; justify-self: end; }
.library__name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 4.4vw, 3.4rem); line-height: 1;
  letter-spacing: -.02em;
}
.library__short {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft); text-align: right;
}

/* Over the work the pointer says what a click does. */
@media (hover: hover) and (pointer: fine) {
  .library__card { cursor: none; }
}

/* One way down, on the first collection only. */
.library__scroll {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-soft);
}
.library__scroll svg {
  width: 1em; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  animation: nudge 2.4s var(--ease) infinite;
}
@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(.22em); }
}
@media (prefers-reduced-motion: reduce) { .library__scroll svg { animation: none; } }

/* Stacked, they read in turn: the collection, its note, then the way down.
   The cue is last in the column though it sits between them in the source. */
@media (max-width: 46rem) {
  .library__foot { grid-template-columns: 1fr; }
  .library__name, .library__short { grid-column: 1; justify-self: start; text-align: left; }
  .library__scroll { grid-column: 1; }
  .library__name { order: 1; }
  .library__short { order: 2; }
  .library__scroll { order: 3; }
}

/* --- the cart -------------------------------------------------------------
   Open editions only. It keeps the drawer's shape, so what is in the cart is
   read the same way as what is being chosen.
   -------------------------------------------------------------------------- */
.nav__cart[hidden] { display: none; }
.nav__cart [data-cart-count] { font-variant-numeric: tabular-nums; }
.nav__cart [data-cart-count]::before { content: "("; }
.nav__cart [data-cart-count]::after { content: ")"; }

.cart__empty { font-weight: 300; color: var(--ink-soft); margin-top: clamp(1.4rem, 4vh, 2.2rem); }

.cart__list { margin-top: clamp(1.4rem, 4vh, 2.2rem); text-align: left; }
.cart__line {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(.8rem, 3vw, 1.2rem); align-items: start;
  padding: clamp(.9rem, 2.6vh, 1.2rem) 0;
  border-top: 1px solid var(--rule);
}
.cart__line:last-child { border-bottom: 1px solid var(--rule); }
.cart__thumb { display: block; width: clamp(3.4rem, 14vw, 4.4rem); }
.cart__thumb img { display: block; width: 100%; height: auto; }
.cart__piece { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; line-height: 1.25; }
.cart__spec {
  margin-top: .2rem;
  font-family: var(--ui); font-weight: 500; font-size: var(--fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.cart__cost { font-weight: 400; white-space: nowrap; }

.cart__qty { display: flex; align-items: center; gap: .55rem; margin-top: .6rem; }
.cart__qty button {
  display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--rule); color: var(--ink-soft);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.cart__qty button:hover, .cart__qty button:focus-visible { border-color: var(--ink); color: var(--ink); }
.cart__qty > span { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
/* Scoped past .cart__qty button, which would otherwise hold it to the width
   of a stepper and clip the word. */
.cart__qty .cart__drop {
  margin-left: auto; border: 0; width: auto; height: auto;
  font-size: .82rem; color: var(--ink-soft);
}
.cart__qty .cart__drop:hover, .cart__qty .cart__drop:focus-visible { color: var(--ink); }

.cart__sum {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: clamp(1.2rem, 3.4vh, 1.8rem);
  font-family: var(--serif); font-size: 1.1rem;
}
.cart__note { margin-top: .5rem; font-size: .86rem; font-weight: 300; color: var(--ink-soft); }
.cart [data-cart-status]:empty { display: none; }
.cart [data-cart-status] { margin-top: 1rem; }

/* --- after the payment ----------------------------------------------------- */
.order__inner { max-width: 34rem; margin-inline: auto; text-align: center; }
.order__title {
  margin-top: .8rem;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.1;
}
.order__wait { margin-top: clamp(1.4rem, 4vh, 2.2rem); font-weight: 300; color: var(--ink-soft); }
.order__list { margin-top: clamp(1.8rem, 5vh, 2.8rem); text-align: left; }
.order__line {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(.8rem, 3vw, 1.2rem); align-items: center;
  padding: clamp(.9rem, 2.6vh, 1.2rem) 0;
  border-top: 1px solid var(--rule);
}
.order__line:last-child { border-bottom: 1px solid var(--rule); }
.order__note {
  margin-top: clamp(1rem, 3vh, 1.6rem);
  font-weight: 300; color: var(--ink-soft); text-align: left;
}
.order .cart__sum { text-align: left; }

/* --- quick shop ----------------------------------------------------------- */
/* A narrow drawer that scrolls: the piece, centred, with the choices and the
   cart beneath it. */
.sheet--wide .sheet__panel {
  width: min(100%, 32rem);
  overflow-y: auto;
  padding: clamp(3rem, 8vh, 4.9rem) clamp(1.25rem, 4vw, 2rem) clamp(2.5rem, 8vh, 4rem);
  text-align: center;
}
.quickshop { display: block; }

.quickshop__name {
  font-family: var(--ui); font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.35;
  letter-spacing: .3em; text-transform: uppercase;
}
.quickshop__serial {
  margin-top: .55rem;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
}

/* The work, at the width of the column. In flow, so nothing can lie over the
   controls beneath it. */
.quickshop__frame { margin: clamp(1rem, 3vh, 1.5rem) 0 0; }
.quickshop__frame img {
  display: block; width: 100%; height: auto;
  border: clamp(5px, .9vw, 10px) solid #fff;
  box-shadow: 0 1rem 2.6rem rgba(8, 12, 10, .16);
}

.quickshop .modes { margin-top: clamp(2rem, 5vh, 3.2rem); }
.quickshop .sizes { margin-top: clamp(.9rem, 2.4vh, 1.3rem); }
.quickshop__cta {
  width: 100%; justify-content: center;
  display: inline-flex; align-items: center; gap: .9em;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
}
.quickshop .buy__note { margin-top: .9rem; }
.quickshop__more { margin-top: clamp(1rem, 2.6vh, 1.4rem); }
.quickshop__more a { font-size: .86rem; }

.quickshop__ask { text-align: left; }
.quickshop__ask .form { margin-top: clamp(1.2rem, 3vh, 2rem); }
.quickshop__ask .quickshop__name,
.quickshop__ask .quickshop__serial { text-align: center; }


/* ==========================================================================
   A piece
   The details are held at the left while every image of the work runs past
   them in one column. The enquiry opens over the page rather than under it.
   ========================================================================== */
.work { padding-top: clamp(.75rem, 2.5vh, 1.75rem); }

.work__layout {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 7vw, 5rem);
  max-width: 96rem; margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 60rem) {
  .work__layout {
    grid-template-columns: minmax(15rem, 20rem) 1fr;
    gap: clamp(3rem, 9vw, 9rem);
  }
  .work__info {
    position: sticky; align-self: start;
    top: calc(var(--masthead-h) + clamp(1.5rem, 6vh, 4rem));
  }
}

.work__eyebrow {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft);
}
.work__name {
  margin-top: clamp(1.6rem, 5vh, 3rem);
  font-family: var(--ui); font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: .3em; text-transform: uppercase;
}
.work__serial {
  margin-top: .9rem;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-soft);
}
.work__spec {
  margin-top: 1.5rem;
  font-family: var(--serif); font-weight: 300; line-height: 1.6;
  color: var(--ink-soft);
}

.work .modes { margin-top: clamp(2rem, 6vh, 3.2rem); }
.work .mode-panel { margin-top: 1.4rem; }
.work .pdp__price { margin-top: 1.1rem; }

.work__inquire { margin-top: clamp(1.8rem, 5vh, 2.8rem); }
.work__inquire .btn { width: 100%; justify-content: center; }

/* One column, the work first and everything else under it. */
.work__images { display: grid; gap: clamp(1.5rem, 5vh, 4rem); align-content: start; }
.work__images figure { margin: 0; }
.work__images img { width: 100%; background: var(--rule-faint); }
.scale figcaption,
.work__images figcaption {
  margin-top: .7rem;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- the enquiry, in the window ------------------------------------------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: grid; }
.sheet[hidden] { display: none; }
.sheet__scrim {
  position: absolute; inset: 0;
  background: rgba(8, 12, 10, .5);
  opacity: 0; transition: opacity .45s var(--ease);
}
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__panel {
  position: relative; z-index: 2;
  justify-self: end; width: min(100%, 32rem);
  height: 100%; overflow-y: auto;
  background: var(--tone); color: var(--ink);
  padding: clamp(2rem, 6vh, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  transform: translateX(100%);
  transition: transform .55s var(--slow);
}
.sheet.is-open .sheet__panel { transform: none; }
.sheet__close {
  position: absolute; top: clamp(1rem, 3vh, 1.6rem); right: clamp(1rem, 3vw, 1.6rem);
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
}
.sheet__close svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
/* The piece comes with you into the enquiry: what you chose, at a glance. */
.sheet__card {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(.8rem, 3vw, 1.2rem);
  align-items: center;
  margin: .9rem 0 clamp(1.6rem, 4vh, 2.4rem);
  padding: clamp(.7rem, 2.6vw, 1rem);
  background: rgba(var(--ink-rgb), .06);
}
.sheet__thumb { display: block; width: clamp(3.4rem, 14vw, 4.4rem); }
.sheet__thumb img { display: block; width: 100%; height: auto; }
.sheet__detail p {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.7; color: var(--ink-soft);
}
/* The price closes the summary, so it carries the ink rather than the soft. */
.sheet__detail .sheet__price { margin-top: .35rem; color: var(--ink); }
.sheet__detail .sheet__price[hidden] { display: none; }
.sheet__detail .sheet__piece {
  margin: 0 0 .2rem;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.1rem; line-height: 1.25;
  letter-spacing: normal; text-transform: none;
  color: var(--ink);
}
.sheet .form { max-width: none; }

@media (max-width: 46rem) {
  .sheet__panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet__panel, .sheet__scrim { transition: none; }
}

/* --- the work, to scale ----------------------------------------------------
   The room is a photograph; the piece on the wall is not. It is sized from the
   real print dimensions against a measured px-per-inch, so every size is exact
   and a new size needs no new photography.
   -------------------------------------------------------------------------- */
.scale__room { position: relative; }
/* The room reads left to right: the window, and so the light, sits on the
   left. Mirroring the plate keeps one photograph doing both jobs. */
.scale__plate { display: block; width: 100%; height: auto; transform: scaleX(-1); }

.scale__hang {
  position: absolute;
  /* 48% on the unmirrored plate, so 52% once it is flipped. */
  left: 52%; top: 51.6%;
  /* The whole object turns together, about its own centre. */
  transform: translate(-50%, -50%) rotate(var(--rot-deg, 0deg));
  width: var(--art-w, 24.36%);
  aspect-ratio: var(--art-ratio, 3 / 2);
  /* A print's white paper margin; under a canvas this is the floater. */
  background: #fff;
  /* Counter-rotated as the piece turns, so the light stays where the room put it. */
  box-shadow: var(--sh-x, .45rem) var(--sh-y, .4rem) 1.6rem rgba(8, 12, 10, .26);
  transition: width .7s var(--slow), aspect-ratio .7s var(--slow),
              transform .6s var(--slow), background-color .5s var(--ease);
}
/* The insets sit on a wrapper: an absolutely positioned <img> is a replaced
   element, so it would take its intrinsic width and ignore the right inset. */
.scale__mat {
  position: absolute;
  inset: var(--art-y, 0) var(--art-x, 0);
  overflow: hidden;
}
.scale__art { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The shadow gap a floater leaves between the frame and the canvas edge. */
.scale__gap {
  display: none; position: absolute;
  inset: var(--gap-y, 0) var(--gap-x, 0);
  background: #14120f;
}
.scale__hang[data-framed="true"] { background: #c8ab82; }
.scale__hang[data-framed="true"] .scale__gap { display: block; }

@media (prefers-reduced-motion: reduce) {
  .scale__hang { transition: none; }
}


/* --- the edition mark ------------------------------------------------------ */
.size__name { display: inline-flex; align-items: center; gap: .65em; }
.edition {
  display: inline-grid; place-items: center;
  width: 1.85em; height: 1.85em;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: .68em; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

/* --- a piece, on the small screens ----------------------------------------
   The two columns become one, and the first frame is set between the serial
   and the format, so what you are choosing sits right above the choice.
   -------------------------------------------------------------------------- */
@media (max-width: 59.999rem) {
  .work__info, .work__images { display: contents; }
  .work__images > :first-child { order: 1; }
  /* Half the gap, so the format sits close under what it is sizing. */
  .work__info-body { order: 2; margin-top: calc(clamp(2.5rem, 7vw, 5rem) * -.5); }
  .work__images > :not(:first-child) { order: 3; }
}

/* --- view larger ------------------------------------------------------------
   The room carries a way through to the work on its own.
   -------------------------------------------------------------------------- */
.scale__zoom {
  position: absolute; inset: 0; z-index: 3;
  display: block; width: 100%; height: 100%;
  cursor: zoom-in;
}
.scale__zoom-tag {
  position: absolute; right: .55rem; bottom: .55rem;
  padding: .5rem .85rem;
  background: rgba(8, 12, 10, .62); color: #fff;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s var(--ease);
}
.scale__zoom:hover .scale__zoom-tag,
.scale__zoom:focus-visible .scale__zoom-tag { opacity: 1; }

.zoom {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  background: rgba(8, 12, 10, .9);
  opacity: 0; transition: opacity .4s var(--ease);
}
.zoom[hidden] { display: none; }
.zoom.is-open { opacity: 1; }
.zoom__scrim { position: absolute; inset: 0; cursor: zoom-out; }
.zoom__close {
  position: absolute; z-index: 3;
  top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem);
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center; color: #fff;
}
.zoom__close svg {
  width: 1.1rem; fill: none; stroke: currentColor;
  stroke-width: 1.2; stroke-linecap: round;
}
@media (prefers-reduced-motion: reduce) { .zoom { transition: none; } }

/* --- turning the work ------------------------------------------------------ */
.scale__controls {
  position: absolute; z-index: 4;
  left: .55rem; bottom: .55rem;
  display: flex; gap: .4rem;
}
.scale__btn {
  height: 2.1rem; min-width: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: .5rem;
  color: #fff; background: rgba(8, 12, 10, .5);
  border-radius: 999px;
  transition: background-color .3s var(--ease);
}
.scale__btn:hover, .scale__btn:focus-visible { background: rgba(8, 12, 10, .8); }
.scale__btn svg {
  width: 1.05rem; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* The control names itself on arrival, then folds back to the icon. */
.scale__btn-label {
  max-width: 0; opacity: 0;
  overflow: hidden; white-space: nowrap;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  transition: max-width .55s var(--ease), opacity .35s var(--ease),
              margin-left .55s var(--ease);
}
.scale__btn.is-open .scale__btn-label { max-width: 6rem; opacity: 1; margin-left: .55em; }
@media (prefers-reduced-motion: reduce) {
  .scale__btn-label { transition: none; }
}

/* Turned upright, the work is laid out across and then rotated into the
   opening, so it still fills it exactly. */
/* --- the viewer ------------------------------------------------------------ */
.zoom { background: var(--tone); transition: opacity .4s var(--ease), background-color .5s linear; }
.zoom__stage { position: relative; z-index: 2; display: grid; width: 100%; height: 100%; }
.zoom__frame {
  grid-area: 1 / 1;
  display: grid; place-items: center;
  min-width: 0; min-height: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.zoom__frame[data-live="true"] { opacity: 1; pointer-events: auto; }

.zoom__frame--art img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  /* The margin a print carries, so the work reads as a work. */
  border: clamp(6px, .9vw, 14px) solid #fff;
  box-shadow: 0 1.4rem 3.4rem rgba(8, 12, 10, .22);
}
.zoom__frame--room .scale__room { width: min(100%, 76rem); }
.zoom__frame--room .scale__plate { box-shadow: 0 1.4rem 3.4rem rgba(8, 12, 10, .22); }

.zoom__arrow {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: clamp(2.4rem, 4vw, 3.4rem); aspect-ratio: 1;
  display: grid; place-items: center;
  color: var(--ink); opacity: .6;
  transition: opacity .3s var(--ease);
}
.zoom__arrow:hover, .zoom__arrow:focus-visible { opacity: 1; }
.zoom__arrow svg {
  width: 90%; fill: none; stroke: currentColor;
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.zoom__arrow--prev { left: clamp(.4rem, 2vw, 1.4rem); }
.zoom__arrow--next { right: clamp(.4rem, 2vw, 1.4rem); }
.zoom__close { color: var(--ink); }

/* --- the way back to everything -------------------------------------------- */
.product-card__all {
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--rule);
  text-align: center; padding: 1rem;
  transition: border-color .35s var(--ease);
}
.product-card__all span {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
}
.product-card--all:hover .product-card__all { border-color: var(--ink); }
.product-card--all:hover .product-card__all span { color: var(--ink); }

/* The same quarter turn, from inside the viewer. */
/* In the viewer the control keeps its name — there is room for it here. */
.zoom__rotate {
  position: absolute; z-index: 3;
  top: clamp(1rem, 3vw, 1.8rem); right: calc(clamp(1rem, 3vw, 1.8rem) + 3.1rem);
  height: 2.6rem;
  display: inline-flex; align-items: center; gap: .6em;
  padding-inline: .9rem;
  border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink); opacity: .75;
  font-family: var(--ui);
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.zoom__rotate:hover, .zoom__rotate:focus-visible { opacity: 1; border-color: var(--ink); }
.zoom__rotate svg {
  width: 1rem; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* Placed by transform rather than by the grid, so an oversized turn still
   sits dead centre. */
.zoom__frame--art { position: relative; }
.zoom__frame--art img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(var(--zoom-deg, 0deg));
  transition: transform .6s var(--slow);
}

/* A second way through sits directly under the first. */
.pdp__cta + .pdp__cta,
.quickshop__cta + .quickshop__cta { margin-top: .55rem; }
.work__inquire .pdp__cta:first-child { margin-top: 0; }

/* The description runs the width of the column before it wraps. */
.mode-panel__material { max-width: none; }

/* ==========================================================================
   A · the label voice
   Labor Union is a display face: set upright in capitals, and given room to
   breathe between lines.
   ========================================================================== */
.label, .nav a, .btn, .serial, .mode,
.field label,
.convo__kicker, .convo__theme button, .convo__share,
.quickshop__name, .quickshop__serial,
.work__name, .work__serial,
.gate__pill, .hero__pill, .deeper__link,
.library__short, .library__scroll, .library__index,
.scale__btn-label, .scale__zoom-tag, .quickshop__count,
.cursor span, .foot__base, .filter a,
.form__status, .skip-link, .accordion summary,
.product-card__all span, .sheet__detail p,
.scale figcaption, .work__images figcaption {
  font-family: var(--ui);
  text-transform: uppercase;
  line-height: 1.7;
}

/* ==========================================================================
   The choices speak in the body face
   What is being chosen between is read rather than labelled, so the rows
   stay in Gambetta while the line above them and the caption under the work
   keep the label voice.
   ========================================================================== */
.size, .size__price, .size__note {
  font-family: var(--sans);
  text-transform: none;
}
.size__note { letter-spacing: .01em; }