/* =========================================================
   Jordan Groskamp · portfolio
   Rams restraint, streetwear annotation, dark ground.
   ========================================================= */
:root {
  --ground: #0b0c0e;
  --raised: #131417;
  --raised-2: #1b1d21;
  --text: #ecebe6;
  --muted: #8d8f93;
  --faint: #55585e;
  --line: rgba(236, 235, 230, 0.12);
  --line-strong: rgba(236, 235, 230, 0.28);
  --signal: #ff6a13;
  --gut: clamp(18px, 3.2vw, 56px);
  --max: 1480px;
  --sans: "Archivo Variable", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
  --fs-label: clamp(11px, 7.4px + 0.4vw, 14px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--signal); color: var(--ground); }
:focus-visible { outline: 1px solid var(--signal); outline-offset: 4px; }
button { font: inherit; color: inherit; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type system ---------- */
.label { font-family: var(--mono); font-size: var(--fs-label); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.label--q::before { content: "["; } .label--q::after { content: "]"; }
.q { color: var(--signal); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); vertical-align: middle; margin-right: 10px; }
.h2 { font-size: clamp(36px, 4.6vw, 76px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.96; margin: 14px 0 0; text-wrap: balance; }
.lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; letter-spacing: -0.01em; max-width: 44ch; margin: 0; }
.body { color: var(--muted); max-width: 52ch; margin: 0; }
.stack > * + * { margin-top: 18px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gut) 20px;
  mix-blend-mode: difference; color: #fff;
}
.nav a { text-decoration: none; }
.nav__logo { font-weight: 600; letter-spacing: -0.01em; font-size: 15px; }
.nav__mid { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.nav__links { justify-self: end; display: flex; gap: clamp(18px, 2.6vw, 36px); font-size: 14px; }
.nav__links a { opacity: 0.7; transition: opacity 0.2s; }
.nav__links a:hover { opacity: 1; }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
[data-words] .w, .manifesto .w { opacity: 0.16; transition: opacity 0.25s linear; }
[data-words] .w.on, .manifesto .w.on { opacity: 1; }

/* =========================================================
   HOME
   ========================================================= */
.twill-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: #0b0c0e url("/media/home/twill-end.webp") center / cover no-repeat;
  opacity: 0;
}
.twill-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 25% 10%, rgba(11,12,14,0.88), rgba(11,12,14,0.965)); opacity: var(--dim, 0); }
.is-woven .twill-bg { opacity: 1; --dim: 1; }
.page-home { background: var(--ground); }
.page-home main, .page-home .footer { position: relative; z-index: 1; }
.page-home .footer { background: rgba(11,12,14,0.9); }

.hero { position: relative; }
.hero__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.7) 100%); }
.hero__type { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(96px, 13vh, 150px); z-index: 2; }
.hero__line { font-size: clamp(54px, 10.4vw, 196px); font-weight: 500; letter-spacing: -0.058em; line-height: 0.86; margin: 0; white-space: nowrap; }
.hero__line--r { text-align: right; }
.ln-i { display: inline-block; }
.brk { color: var(--text); font-weight: 300; }
.rot { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; padding: 0.1em 0.04em 0.1em; margin: -0.1em 0; }
.rot__w { display: block; color: var(--signal); white-space: nowrap; }
.rot__w.is-next { position: absolute; left: 0.04em; top: 0.1em; }
.hero__foot {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(22px, 3.5vh, 36px); z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end;
  border-top: 1px solid var(--line-strong); padding-top: 14px;
}
.hero__foot div { font-size: 14px; }
.hero__foot .label { display: block; margin-bottom: 4px; }
.hero__hint { justify-self: end; color: var(--text); }
.hero__end { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 2; margin: 0; font-size: clamp(40px, 6.4vw, 120px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; opacity: 0; }
.js .page-home .ln-i, .js .page-home .hero__foot, .js .page-home .hero__tag { opacity: 0; }

.tag {
  display: inline-flex; align-items: center; gap: 8px; background: var(--signal); color: #0b0c0e;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px 6px 8px; border-radius: 2px;
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #0b0c0e; opacity: 0.85; }
.hero__tag { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 72px); right: var(--gut); z-index: 3; }

/* manifesto: pinned, lines scrubbed in */
.manifesto__pin { height: 100vh; height: 100svh; display: grid; align-content: center; }
.manifesto__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.manifesto__label { grid-column: 1 / 4; padding-top: 0.9em; }
.manifesto__text { grid-column: 4 / 13; font-size: clamp(34px, 4.8vw, 84px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; margin: 0; }
.manifesto__text .ln { display: block; }
.manifesto__sub { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 6vh, 72px); border-top: 1px solid var(--line); padding-top: 16px; }
.manifesto__sub div { font-size: 15px; color: var(--muted); }
.manifesto__note { grid-column: 4 / 11; margin: clamp(28px, 4vh, 44px) 0 0; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; color: var(--text); max-width: 46ch; }
.now__lead { max-width: 52ch; }
.now .body { max-width: 60ch; }
.manifesto__sub b { display: block; font-weight: 500; color: var(--text); margin-bottom: 4px; font-size: 16px; }

/* marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 20px; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item { font-size: clamp(28px, 3.4vw, 56px); font-weight: 500; letter-spacing: -0.045em; white-space: nowrap; padding-right: 0.6em; }
.marquee__item span { color: var(--signal); padding-left: 0.6em; font-weight: 400; }

/* index */
.index { padding-block: clamp(96px, 12vw, 180px); }
.index__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--line-strong); }
.index__head .label { grid-column: 1 / 4; }
.index__title { grid-column: 4 / 11; font-size: clamp(56px, 9vw, 160px); letter-spacing: -0.06em; line-height: 0.84; font-weight: 500; margin: 0; }
.index__count { grid-column: 11 / 13; justify-self: end; }
.index__list { list-style: none; margin: 0; padding: 0; }
.index__row { border-bottom: 1px solid var(--line); }
.index__row a { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: center; padding-block: clamp(20px, 2.4vw, 30px); text-decoration: none; }
.index__n { grid-column: 1 / 4; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.index__name { grid-column: 4 / 10; font-size: clamp(26px, 3.6vw, 58px); letter-spacing: -0.045em; line-height: 1; font-weight: 500; transition: transform 0.6s var(--ease); }
.index__tags { grid-column: 10 / 12; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.index__arrow { grid-column: 12 / 13; justify-self: end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.5s var(--ease); }
.index__row a:hover .index__name { transform: translateX(14px); }
.index__row a:hover .index__arrow { background: var(--signal); border-color: var(--signal); color: var(--ground); transform: rotate(-45deg); }
.index__row.is-soon a { pointer-events: none; }
.index__row.is-soon .index__name { color: var(--faint); }
.index__row.is-soon .index__arrow { opacity: 0.3; }
.index__soon { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-left: 14px; vertical-align: middle; font-weight: 400; letter-spacing: 0.1em; }

.cursor-preview { position: fixed; left: 0; top: 0; z-index: 60; width: 280px; aspect-ratio: 4/5; pointer-events: none; overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.3s, transform 0.5s var(--ease); background: var(--raised); }
.cursor-preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-preview img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }

/* about */
.about { padding-bottom: clamp(96px, 12vw, 180px); }
.about__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.about__grid > .label { grid-column: 1 / -1; margin-bottom: clamp(8px, 1.5vw, 24px); }
.about__portrait { grid-column: 1 / 6; margin: 0; }
.about__mask { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--raised); }
.about__mask img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(0.9); will-change: transform; }
.about__cap { display: flex; justify-content: space-between; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.about__copy { grid-column: 7 / 13; align-self: end; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.spec { display: grid; grid-template-columns: 120px 1fr; margin: 0; border-top: 1px solid var(--line); }
.spec dt, .spec dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 15px; }

/* footer */
.footer { padding-block: clamp(96px, 12vw, 180px) 28px; border-top: 1px solid var(--line); background: var(--ground); }
.footer__title { font-size: clamp(56px, 10vw, 180px); line-height: 0.86; letter-spacing: -0.06em; font-weight: 500; margin: 18px 0 clamp(56px, 7vw, 110px); }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid var(--line-strong); padding-top: 18px; font-size: 15px; }
.footer__grid .label { display: block; margin-bottom: 6px; }
.footer__grid a { text-decoration: none; background: linear-gradient(var(--text), var(--text)) 0 100% / 0 1px no-repeat; transition: background-size 0.4s var(--ease); }
.footer__grid a:hover { background-size: 100% 1px; }
.footer__small { margin-top: 80px; display: flex; justify-content: space-between; gap: 16px; }

/* =========================================================
   CASE STUDY
   ========================================================= */
.section { padding-block: clamp(88px, 11vw, 170px); }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.fig { margin: 0; overflow: hidden; background: var(--raised); }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-top: 12px; }

.case-hero { position: relative; }
.case-hero__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: end; }
.case-hero__img { position: absolute; inset: 0; overflow: hidden; }
.case-hero__img img { position: absolute; left: 0; top: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.05) brightness(0.86); will-change: transform; }
.case-hero__worn { position: absolute; right: var(--gut); bottom: clamp(28px, 4vw, 56px); z-index: 2; max-width: 30ch; margin: 0; font-size: 15px; opacity: 0; }
.case-hero__worn .label { display: block; color: var(--text); margin-bottom: 8px; }
.case-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.35) 0%, rgba(11,12,14,0) 30%, rgba(11,12,14,0.94) 100%); }
.case-hero__content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(28px, 4vw, 56px); }
.case-hero__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.case-hero__top .tag { white-space: nowrap; flex-shrink: 0; }
.case-hero__top .label { color: rgba(236,234,228,0.78); text-shadow: 0 1px 10px rgba(11,12,14,0.7); }
@media (max-width: 600px) { .case-hero__top { flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; } .case-hero__top .label { white-space: nowrap; } }
.case-hero h1 { font-size: clamp(64px, 12.5vw, 232px); line-height: 0.84; letter-spacing: -0.062em; font-weight: 500; margin: 18px 0 30px; }
.case-hero__sub { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; border-top: 1px solid var(--line-strong); padding-top: 18px; }
.case-hero__sub > p { grid-column: 1 / 5; margin: 0; font-size: clamp(16px, 1.3vw, 19px); max-width: 40ch; }
.case-hero__sub > div { grid-column: span 2; font-size: 14px; }
.case-hero__sub .label { display: block; margin-bottom: 6px; }

.stats { padding-block: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.stat { border-left: 1px solid var(--line); padding-left: 16px; }
.stat__n { font-size: clamp(42px, 5.2vw, 88px); letter-spacing: -0.055em; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat__n small { font-size: 0.45em; letter-spacing: -0.02em; margin-left: 3px; color: var(--muted); }
.stat .label { margin-top: 12px; }
.stats__note { margin-top: 28px; }

.idea__copy { grid-column: 1 / 6; align-self: center; }
.idea__fig { grid-column: 7 / 13; aspect-ratio: 4/5; }
.idea__fig img { height: 118%; }

/* annotated product plate */
.plate { position: relative; background: radial-gradient(55% 50% at 50% 55%, #1c1e22 0%, var(--ground) 72%); border-top: 1px solid var(--line); }
.plate__head { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: end; }
.plate__head > div:first-child { grid-column: 1 / 8; }
.plate__switch { grid-column: 9 / 13; justify-self: end; display: flex; gap: 6px; }
.plate__switch button { background: none; border: 1px solid var(--line-strong); color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 14px; border-radius: 99px; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.plate__switch button[aria-pressed="true"] { background: var(--text); color: var(--ground); border-color: var(--text); }
.plate__stage { position: relative; height: min(86vh, 900px); margin-top: clamp(24px, 3vw, 48px); }
.plate__view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s var(--ease), visibility 0.7s; }
.plate__view.is-on { opacity: 1; visibility: visible; }
.plate__art { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); }
.plate__art img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 40px 50px rgba(0,0,0,0.7)); }
.plate__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plate__svg line { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.5; }
.plate__svg circle { fill: var(--signal); }
.callout { position: absolute; width: min(250px, 21vw); transform: translateY(-50%); }
.callout .label { display: block; color: var(--text); margin-bottom: 6px; }
.callout p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.callout--l { text-align: right; }

/* horizontal: roll to jeans */
.hz { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.hz__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.hz__head { width: 100%; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.hz__track { display: flex; gap: 16px; padding-inline: var(--gut); will-change: transform; }
.hz__item { flex: 0 0 auto; width: clamp(260px, 28vw, 440px); }
.hz__item .fig { aspect-ratio: 4/5; }
.hz__item.wide { width: clamp(320px, 46vw, 740px); }
.hz__item.wide .fig { aspect-ratio: 16/10; }
.hz__step { display: flex; gap: 14px; margin-top: 14px; font-size: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
.hz__step b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--signal); padding-top: 3px; }

/* exploded weave variables */
.explode { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.explode__inner { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-block: clamp(80px, 9vw, 120px) 24px; }
.explode__head { display: flex; justify-content: space-between; align-items: end; gap: 24px 64px; flex-wrap: wrap; }
.explode__head .lead { color: var(--muted); max-width: 36ch; }
.explode__stage { position: relative; min-height: 360px; }
.explode__disc { position: absolute; top: 54%; left: 50%; width: clamp(150px, min(18vw, 34vh), 280px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.explode__disc img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 30px 80px rgba(0,0,0,0.7); filter: grayscale(1) contrast(1.05); }
.explode__tag { position: absolute; left: 50%; bottom: calc(100% + clamp(20px, 3vh, 34px)); transform: translateX(-50%); white-space: nowrap; text-align: center; }
.explode__tag .label { color: var(--text); display: block; transition: color 0.5s var(--ease); }

/* process chapters */
.chapters { border-top: 1px solid var(--line); }
.chapters__pin { height: 100vh; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: clamp(16px, 2.4vw, 32px); padding-block: clamp(80px, 8vw, 110px) clamp(24px, 3vw, 40px); }
.chapters__head { display: flex; justify-content: space-between; align-items: end; gap: 16px 48px; flex-wrap: wrap; }
.chapters__row { display: flex; gap: 8px; min-height: 0; }
.chap { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; background: var(--raised); transition: flex-grow 1s var(--ease); border: 0; padding: 0; text-align: left; }
.chap.is-active { flex-grow: 7; cursor: default; }
.chap__img { position: absolute; inset: 0; transition: right 1s var(--ease); }
.chap__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.35); transform: scale(1.12); opacity: 0; transition: filter 0.9s, transform 1.4s var(--ease), opacity 0.9s var(--ease); }
.chap__img img.is-shown { opacity: 1; }
.chap__img img.fit-white { object-fit: contain; background: #fff; padding: 3%; }
.chap__img img.fit-contain { object-fit: contain; background: var(--raised-2); padding: 4%; }
.chap__cap { display: block; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); min-height: 3.2em; }
.chap.is-active .chap__img { cursor: pointer; }
.chap:not(.is-active) .chap__img { opacity: 0; }
.chap__img { transition: right 1s var(--ease), opacity 0.6s; }
.chap:not(.is-active):hover { background: var(--raised-2); }
.chap.is-active .chap__img { right: 40%; }
.chap.is-active .chap__img img { filter: none; transform: none; }
.chap__label { color: var(--muted); } .chap:hover .chap__label { color: var(--text); }
.chap__label { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font-size: 14px; display: flex; gap: 12px; align-items: center; transition: opacity 0.4s; }
.chap__label b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--signal); }
.chap.is-active .chap__label { opacity: 0; }
.chap__txt { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; padding: clamp(18px, 2.2vw, 36px); display: flex; flex-direction: column; opacity: 0; transform: translateX(24px); transition: opacity 0.5s, transform 0.8s var(--ease); pointer-events: none; }
.chap.is-active .chap__txt { opacity: 1; transform: none; transition-delay: 0.35s; }
.chap__n { display: block; margin-bottom: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--signal); }
.chap__h { display: block; font-size: clamp(24px, 2.5vw, 40px); letter-spacing: -0.04em; line-height: 1; font-weight: 500; margin: 0 0 14px; }
.chap__p { display: block; color: var(--muted); font-size: 15px; max-width: 36ch; }
/* one progress bar for every horizontal sequence */
.hbar { display: flex; align-items: center; gap: 16px; }
.hbar__count { min-width: 5.5em; color: var(--muted); }
.hbar__track { flex: 1; height: 1px; background: var(--line); position: relative; }
.hbar__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--signal); transition: width 0.7s var(--ease); }
.hbar__fill--live { transition: none; }

/* expanding gallery */
.xgal { margin-top: clamp(32px, 4vw, 56px); }
.xgal__strip { display: flex; gap: 8px; height: clamp(360px, 70vh, 780px); }
.xgal__item { position: relative; flex: 1 1 0; min-width: 0; border: 0; padding: 0; margin: 0; cursor: pointer; overflow: hidden; background: var(--raised); transition: flex-grow 0.9s var(--ease); }
.xgal__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: grayscale(0.6) brightness(0.6); transition: transform 1.2s var(--ease), filter 0.6s; }
.xgal__item.is-active { flex-grow: 5.5; cursor: default; }
.xgal__item.is-active img { transform: none; filter: none; }
.xgal__item:not(.is-active):hover img { filter: grayscale(0) brightness(0.85); }
.xgal__strip { position: relative; }
.xgal__bar { margin-top: 18px; }
.xgal__cap { font-size: 15px; margin: 10px 0 0; color: var(--muted); }
.xgal__cap b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--signal); margin-right: 12px; }
.xgal__nav { display: flex; gap: 8px; }
.xgal__nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; font-size: 16px; transition: background 0.3s, color 0.3s; }
.xgal__nav button:hover { background: var(--text); color: var(--ground); }

.quote { font-size: clamp(30px, 3.6vw, 58px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; max-width: 22ch; margin: 0; }
.credits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid var(--line-strong); padding-top: 18px; font-size: 15px; }
.credits p { margin: 0; }
.credits .label { display: block; margin-bottom: 6px; }

.teaser__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: center; }
.teaser__copy { grid-column: 1 / 5; }
.teaser__imgs { grid-column: 6 / 13; display: flex; align-items: center; gap: 10px; aspect-ratio: 1.5; }
.viewport { flex: 1 1 0; min-width: 0; background: #c9cacb; aspect-ratio: 3/4; position: relative; overflow: hidden; margin: 0; transition: flex-grow 0.9s var(--ease), opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.viewport__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.viewport img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1s var(--ease); }
.viewport__btn:hover img { transform: scale(1.03); }
.viewport .label { position: absolute; left: 10px; top: 10px; color: #3a3b3d; pointer-events: none; }
.teaser__imgs.has-big .viewport { filter: grayscale(0.4) brightness(0.8); }
.teaser__imgs.has-big .viewport.is-big { flex-grow: 2; filter: none; }
.teaser__hint { color: var(--faint); margin-top: 8px; }

.next { display: block; text-decoration: none; border-top: 1px solid var(--line); padding-block: clamp(64px, 9vw, 140px); transition: background 0.5s; }
.next:hover { background: var(--raised); }
.next__t { font-size: clamp(48px, 9vw, 160px); letter-spacing: -0.06em; line-height: 0.9; font-weight: 500; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.next__t span:last-child { font-size: 0.5em; color: var(--signal); transition: transform 0.5s var(--ease); }
.next:hover .next__t span:last-child { transform: translateX(12px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; } .nav__mid { display: none; }
  .hero__foot { grid-template-columns: 1fr 1fr; } .hero__hint { grid-column: 2; }
  .hero__type { bottom: 210px; } .hero__line { font-size: 15vw; line-height: 0.9; }
  .manifesto__label, .manifesto__text, .manifesto__sub, .manifesto__note { grid-column: 1 / -1; }
  .manifesto__sub { grid-template-columns: 1fr; }
  .index__head .label, .index__count { display: none; } .index__title { grid-column: 1 / -1; }
  .index__n { grid-column: 1 / 3; } .index__name { grid-column: 3 / 11; } .index__tags { display: none; } .index__arrow { grid-column: 11 / 13; }
  .about__grid > .label { grid-column: 1 / -1; } .about__portrait { grid-column: 1 / -1; } .about__copy { grid-column: 1 / -1; margin-top: 32px; }
  .footer__grid, .credits { grid-template-columns: 1fr 1fr; }
  .case-hero__sub > p { grid-column: 1 / -1; } .case-hero__sub > div { grid-column: span 6; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .idea__copy, .idea__fig { grid-column: 1 / -1; }
  .plate__head > div:first-child, .plate__switch { grid-column: 1 / -1; justify-self: start; }
  .plate__stage { height: 72vh; } .callout, .plate__svg { display: none; }
  .hz__pin { height: auto; padding-block: 80px; } .hz__track { overflow-x: auto; scroll-snap-type: x mandatory; } .hz__item { scroll-snap-align: start; }
  .explode__disc { width: 30vw; } .explode__tag { display: none; }
  .chapters__pin { height: auto; } .chapters__row { flex-direction: column; } .chap, .chap.is-active { flex: none; }
  .chap__img, .chap.is-active .chap__img { position: relative; right: 0; aspect-ratio: 4/3; } .chap__img img { filter: none; transform: none; }
  .chap__label, .chapters__bar { display: none; } .chap__txt { position: relative; width: auto; opacity: 1; transform: none; }
  .xgal__strip { overflow-x: auto; scroll-snap-type: x mandatory; height: 64vh; } .xgal__item { flex: 0 0 80%; scroll-snap-align: center; } .xgal__item.is-active { flex-grow: 0; } .xgal__item img { transform: none; filter: none; }
  .teaser__copy, .teaser__imgs { grid-column: 1 / -1; }
  .cursor-preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  [data-words] .w, .manifesto .w { opacity: 1; }
  .js .page-home .ln-i, .js .page-home .hero__foot, .js .page-home .hero__tag { opacity: 1; }
}

/* =========================================================
   Buttons, CV page
   ========================================================= */
.btn { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; text-decoration: none; border: 1px solid var(--line-strong); border-radius: 99px; padding: 12px 20px; font-size: 14px; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.btn:hover { background: var(--text); color: var(--ground); border-color: var(--text); }
.btn--solid { background: var(--signal); border-color: var(--signal); color: var(--ground); }
.btn--solid:hover { background: var(--text); border-color: var(--text); }
.cvpage { padding-block: clamp(120px, 14vw, 200px) clamp(80px, 10vw, 140px); }
.cvpage__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
.cvpage__copy { grid-column: 1 / 6; position: sticky; top: 120px; }
.cvpage__actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
.cvpage__sheet { grid-column: 7 / 13; margin: 0; background: #fff; box-shadow: 0 40px 80px rgba(0,0,0,0.55); }
.cvpage__sheet img { width: 100%; height: auto; }

/* =========================================================
   The finished pair: pinned scroll-through
   ========================================================= */
.pair { border-top: 1px solid var(--line); background: radial-gradient(55% 60% at 62% 55%, #1a1c20 0%, var(--ground) 70%); }
.pair__pin { height: 100vh; height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding-block: clamp(84px, 9vh, 110px) clamp(24px, 4vh, 40px); }
.pair__left { grid-column: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 0; }
.pair__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pair__step { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.pair__step p { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.pair__step .label--q { color: var(--text); }
.pair__n { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 1px; }
.pair__step.is-active .pair__n { color: var(--signal); }
.pair__step.is-active .label--q { color: var(--signal); }
.pair__mzoom { display: none; }
.js .pair--live .pair__step { opacity: 0; transform: translateY(10px); }
.js .pair--live .pair__step.is-seen { opacity: 0.38; transform: none; }
.js .pair--live .pair__step.is-active { opacity: 1; transform: none; }
.pair__stage { grid-column: 5 / 13; position: relative; overflow: hidden; }
.pair__view { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.pair__view.is-on { opacity: 1; }
.pair__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
.pair__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pair__line { stroke: var(--text); stroke-width: 1; opacity: 0.7; }
.pair__dot { fill: var(--signal); }
.pair__zoom { position: absolute; margin: 0; border-radius: 50%; overflow: hidden; background: var(--raised); box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--line-strong); opacity: 0; transform: scale(0.85); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.pair__zoom.is-on { opacity: 1; transform: none; }
.pair__zoom img { width: 100%; height: 100%; object-fit: cover; }
.pair__zlabel { position: absolute; text-align: center; color: var(--text); opacity: 0; transition: opacity 0.5s; }
.pair__zlabel.is-on { opacity: 1; }
.pair__zlabel::before { content: "["; } .pair__zlabel::after { content: "]"; }
.pair__views { position: absolute; left: 0; top: 0; }
.pair__views span { transition: color 0.4s; }
.pair__views span.is-on { color: var(--text); }

/* =========================================================
   Roll to jeans: skippable reel + lightbox
   ========================================================= */
.reel { border-top: 1px solid var(--line); padding-block: clamp(88px, 11vw, 160px); }
.reel__head { display: flex; justify-content: space-between; align-items: end; gap: 24px 48px; flex-wrap: wrap; }
.reel__ctrl { display: flex; align-items: center; gap: 20px; }
.reel__track { --h: min(62vh, 640px); display: flex; align-items: flex-end; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: clamp(32px, 4vw, 56px) var(--gut) 4px; scrollbar-width: none; cursor: grab; }
.reel__track::-webkit-scrollbar { display: none; }
.reel__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.reel__track:focus-visible { outline: none; }
.reel__item { flex: 0 0 auto; width: calc(var(--h) * var(--ar)); max-width: 86vw; margin: 0; scroll-snap-align: start; transform-origin: 0 100%; will-change: transform, opacity; }
.reel__item img { transition: filter 0.7s var(--ease), transform 1s var(--ease); }
.reel__item:not(.is-active) img { filter: grayscale(1); }
.reel__btn { display: block; width: 100%; height: var(--h); padding: 0; border: 0; background: var(--raised); cursor: pointer; overflow: hidden; }
.reel__btn img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 1s var(--ease); }
.reel__item.is-active .reel__btn { cursor: zoom-in; }
.reel__item.is-active .reel__btn:hover img { transform: scale(1.03); }
.reel__item figcaption { display: flex; gap: 14px; margin-top: 14px; font-size: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
.reel__item figcaption b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--signal); padding-top: 3px; }
.reel__end { flex: 0 0 40vw; }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(8,9,11,0.94); display: grid; place-items: center; padding: 64px 80px; }
.lightbox__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__fig img { max-width: min(1400px, 86vw); max-height: 80vh; object-fit: contain; }
.lightbox__close, .lightbox__nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav--p { left: 20px; top: 50%; } .lightbox__nav--n { right: 20px; top: 50%; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--text); color: var(--ground); }

/* =========================================================
   Three variables: highlight in turn
   ========================================================= */
.explode__inner { grid-template-rows: auto 1fr auto; }
.explode__disc { transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.explode__disc img { transition: transform 0.8s var(--ease), box-shadow 0.8s; }
.explode.has-focus .explode__disc { opacity: 0.28; filter: grayscale(1); }
.explode.has-focus .explode__disc.is-focus { opacity: 1; filter: none; }
.explode.has-focus .explode__disc.is-focus img { transform: scale(1.12); box-shadow: 0 0 0 1px var(--signal), 0 40px 90px rgba(0,0,0,0.8); }
.explode__disc.is-focus .label--q { color: var(--signal); }
.explode__panel { position: relative; width: 100%; max-width: 640px; min-height: 96px; justify-self: center; text-align: center; }
.explode__txt { position: absolute; inset: 0 0 auto 0; margin: 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); }
.explode__txt .label { display: block; margin-bottom: 8px; }
.explode__txt.is-on { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .cvpage__copy, .cvpage__sheet { grid-column: 1 / -1; position: static; }
  .pair__pin { height: auto; display: block; }
  .pair__stage { display: none; }
  .pair__step { grid-template-columns: 30px 1fr; padding: 18px 0; }
  .pair__mzoom { display: block; width: 58%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-top: 14px; }
  .reel__track { --h: 52vh; }
  .explode__panel { min-height: 0; }
  .explode__txt { position: relative; opacity: 1; transform: none; margin-top: 18px; }
  .case-hero__worn { display: none; }
  .case-hero__img img { height: 100%; object-position: 50% 55%; }
}


/* =========================================================
   Draft 5 additions
   ========================================================= */
/* the finished pair: front and back lists */
.pair__groups { display: grid; }
.pair--live .pair__group { grid-area: 1 / 1; }
.pair__gt { display: flex; justify-content: space-between; margin: 0 0 10px; }
.pair__gt span:first-child { color: var(--text); }
.pair__gt span:first-child::before { content: "["; } .pair__gt span:first-child::after { content: "]"; }
.js .pair--live .pair__group { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), visibility 0s 0.6s; }
.js .pair--live .pair__group.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0.15s, 0.15s, 0s; }

/* roll to jeans */
.reel__track { position: relative; }
.reel__hint { color: var(--muted); }
.reel__bar { margin-top: 22px; }

/* three variables: titles above, highlight in orange */
.explode.has-focus .explode__disc { opacity: 1; filter: none; }
.explode.has-focus .explode__disc img { opacity: 0.28; transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), box-shadow 0.8s; }
.explode.has-focus .explode__disc.is-focus img { opacity: 1; }
.explode.has-focus .explode__tag .label { color: var(--muted); }
.explode.has-focus .explode__disc.is-focus .explode__tag .label { color: var(--signal); }
.explode__disc.is-focus .label--q { color: var(--signal); }

/* exhibitions */
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 72px); }
.venue { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 6px 14px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-strong); padding: 16px 0 4px; cursor: pointer; color: var(--muted); transition: color 0.4s, border-color 0.4s; }
.venue:hover { color: var(--text); }
.venue.is-on { color: var(--text); border-top-color: var(--signal); }
.venue__y { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 7px; }
.venue.is-on .venue__y { color: var(--signal); }
.venue__n { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.venue__w { grid-column: 2; }
.venue__p { grid-column: 2; font-size: 14px; line-height: 1.45; max-width: 40ch; color: var(--muted); }
.venue-gal .xgal { margin-top: clamp(24px, 3vw, 40px); }
.xgal__strip--one .xgal__item { cursor: default; }
.xgal__strip--one .xgal__item img { transform: none; filter: none; }

@media (max-width: 900px) {
  .venues { grid-template-columns: 1fr; gap: 0; }
  .venue { padding: 14px 0; }
  .teaser__imgs { aspect-ratio: auto; margin-top: 24px; }
}

.explode.is-all .explode__tag .label { color: var(--signal); }
@media (max-width: 900px) {
  .grid12 > * { grid-column: 1 / -1 !important; }
  .pair__groups { display: block; }
  .pair__group + .pair__group { margin-top: 40px; }
}

/* =========================================================
   Draft 6 additions
   ========================================================= */
.pair__bar { margin-top: 18px; }
.chapters__nav { display: none; }
.xgal__item--contain img { object-fit: contain; background: #fff; }
.xgal__item--contain:not(.is-active) img { filter: grayscale(0.6) brightness(0.7); }
/* dark studio renders: letterbox in the same near-black as the image edges */
.xgal__item--dark img { object-fit: contain; background: #0e1011; }
.xgal__item--dark:not(.is-active) img { filter: grayscale(0.6) brightness(0.7); }

/* editions */
.editions { border-top: 1px solid var(--line); padding-block: clamp(88px, 10vw, 150px); background: radial-gradient(60% 70% at 70% 80%, #17191c 0%, var(--ground) 70%); }
.editions__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: end; }
.editions__copy { grid-column: 1 / 5; align-self: start; }
.editions__hint { color: var(--faint); }
.editions__row { grid-column: 5 / 13; display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(8px, 2vw, 32px); }
.edition { margin: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; transition: opacity 0.5s var(--ease), transform 0.7s var(--ease); }
.edition__btn { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; height: min(66vh, 640px); }
.edition__btn img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 30px 34px rgba(0,0,0,0.55)); transition: transform 0.8s var(--ease); }
.edition figcaption { display: flex; gap: 10px; margin-top: 18px; }
.edition figcaption .label--q { color: var(--text); }
.editions__row.has-hover .edition { opacity: 0.4; }
.editions__row.has-hover .edition:hover { opacity: 1; }
.edition:hover .edition__btn img { transform: translateY(-14px); }
.edition:hover .label--q { color: var(--signal); }
.editions__bar { display: none; }

/* tech pack */
.techpack { border-top: 1px solid var(--line); padding-block: clamp(88px, 10vw, 150px) clamp(64px, 8vw, 110px); overflow: hidden; }
.sheets { --sh: min(60vh, 580px); position: relative; height: calc(var(--sh) + 120px); margin: clamp(48px, 6vw, 80px) auto 0; max-width: var(--max); padding-inline: var(--gut); }
.sheet { position: absolute; left: 50%; top: 20px; margin: 0 0 0 calc(var(--sh) * -0.3535); width: calc(var(--sh) * 0.707); transform-origin: 50% 100%; pointer-events: none; }
.sheet__face { width: 100%; aspect-ratio: 0.707; background: #fff center / cover no-repeat; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.2); }
.sheets { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sheets__bar { display: none; }

/* separator */
.spark { position: relative; height: clamp(300px, 56vh, 640px); overflow: hidden; background: linear-gradient(180deg, var(--ground) 0%, #070708 14%, #020203 30%, #000 42%, #000 58%, #020203 70%, #070708 86%, var(--ground) 100%); }
.spark__in { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -57%); width: min(1300px, 104vw); }
.spark__z { display: flex; align-items: center; width: 100%; }
.spark__in img { width: 50%; height: auto; mix-blend-mode: screen; }
.spark__l { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.spark__r { -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 32%); mask-image: linear-gradient(270deg, transparent 0%, #000 32%); }
.venue-gal__p { display: none; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  /* shared swipe track */
  .explode__stage, .chapters__row, .editions__row, .sheets { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; position: relative; }
  .explode__stage::-webkit-scrollbar, .chapters__row::-webkit-scrollbar, .editions__row::-webkit-scrollbar, .sheets::-webkit-scrollbar { display: none; }

  /* finished pair, pinned on phones too */
  .pair--live .pair__pin { height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; gap: 10px; padding-block: 72px 16px; }
  .pair--live .pair__left { display: contents; }
  .pair--live .pair__left > .stack { order: 1; } .pair--live .pair__left > .stack .body { display: none; }
  .pair--live .pair__left > .stack .h2 { font-size: 34px; margin-top: 6px; }
  .pair--live .pair__stage { display: block; order: 2; grid-column: 1; min-height: 0; }
  .pair--live .pair__groups { order: 3; }
  .pair--live .pair__bar { order: 4; margin-top: 0; }
  .pair--live .pair__step:not(.is-active) { display: none; }
  .pair--live .pair__steps { border-top: 0; min-height: 76px; }
  .pair--live .pair__step { border-bottom: 0; padding: 4px 0 0; }
  .pair--live .pair__mzoom { display: none; }
  .pair--live .pair__views { display: none; }
  .pair:not(.pair--live) .pair__pin { height: auto; display: block; }
  .pair:not(.pair--live) .pair__stage { display: none; }

  /* three variables */
  .explode__inner { min-height: 0; padding-block: 88px 64px; grid-template-rows: auto auto auto auto; }
  .explode__stage { min-height: 0; gap: 16px; padding: 44px 17vw 8px; scroll-padding-inline: 17vw; margin-inline: calc(var(--gut) * -1); }
  .explode__disc { position: relative; top: auto; left: auto; transform: none !important; flex: 0 0 66vw; width: 66vw; aspect-ratio: auto; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; }
  .explode__disc img { width: 66vw; height: 66vw; }
  .explode__tag { display: block; position: static; transform: none; order: -1; margin-bottom: 14px; }
  .explode__mtxt { display: block; margin: 16px 0 0; text-align: center; font-size: 16px; line-height: 1.45; color: var(--muted); }
  .explode__disc.is-focus .explode__tag .label { color: var(--signal); }
  .explode__txt:not(.explode__txt--all) { display: none; }
  .explode__panel { margin-top: 20px; }
  .explode__bar { margin-top: 20px; }

  /* editions */
  .editions__copy, .editions__row { grid-column: 1 / -1; }
  .editions__row { justify-content: flex-start; gap: 12px; padding: 32px 25vw 0; scroll-padding-inline: 25vw; margin-inline: calc(var(--gut) * -1); }
  .edition { flex: 0 0 50vw; scroll-snap-align: center; }
  .edition__btn { height: 58vh; }
  .editions__bar { display: flex; grid-column: 1 / -1; margin-top: 18px; }
  .editions__hint { display: none; }

  /* process as swipe cards */
  .chapters__pin { height: auto; padding-block: 88px 56px; }
  .chapters__row { flex-direction: row; gap: 12px; padding: 0 8vw; scroll-padding-inline: 8vw; margin-inline: calc(var(--gut) * -1); }
  .chap, .chap.is-active { flex: 0 0 84vw; scroll-snap-align: center; background: var(--raised); cursor: default; }
  .chap .chap__img, .chap.is-active .chap__img { position: relative; right: 0; aspect-ratio: 4/5; opacity: 1; }
  .chap .chap__img img { filter: none; transform: none; }
  .chap__txt, .chap.is-active .chap__txt { position: relative; width: auto; opacity: 1; transform: none; padding: 18px; }
  .chap__n { margin-bottom: 10px; }
  .chapters__bar { display: flex; margin-top: 18px; }
  .chapters__nav { display: flex; }

  /* tech pack: same fan, smaller */
  .sheets { --sh: min(44vh, 300px); height: calc(var(--sh) + 70px); margin-top: 36px; }

  /* exhibited: compact tabs */
  .venues { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .venue { grid-template-columns: 1fr; gap: 2px; padding: 10px 0 0; }
  .venue__y { padding-top: 0; }
  .venue__n { font-size: 15px; letter-spacing: -0.01em; }
  .venue__w, .venue__p { display: none; }
  .venue-gal__p { display: block; margin: 18px 0 0; font-size: 15px; color: var(--muted); }
  .venue-gal__p .label { display: block; margin-bottom: 6px; }

  /* separator */
  .spark { height: 46vh; }
  .spark__in { width: 190vw; }

  /* lightbox: large and pannable */
  .lightbox { padding: 64px 0 96px; }
  .lightbox__fig { width: 100vw; max-height: none; overflow-x: auto; align-items: safe center; scrollbar-width: none; }
  .lightbox__fig::-webkit-scrollbar { display: none; }
  .lightbox__fig img { max-width: none; max-height: none; height: min(66vh, 620px); width: auto; margin-inline: 16px; }
  .lightbox__fig figcaption { position: fixed; left: 16px; right: 130px; bottom: 34px; }
  .lightbox__nav { top: auto; bottom: 22px; }
  .lightbox__nav--p { left: auto; right: 78px; } .lightbox__nav--n { right: 20px; }
}
@media (max-width: 900px) {
  .pair--live .pair__groups { display: grid; }
  .pair--live .pair__group + .pair__group { margin-top: 0; }
}
@media (max-width: 900px) {
  .chap .chap__img, .chap__txt { display: block; }
}

/* stage image dots */
.chap__dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: flex; gap: 7px; padding: 7px 10px; border-radius: 99px; background: rgba(11,12,14,0.6); pointer-events: none; }
.chap__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(236,235,230,0.4); transition: background 0.4s; }
.chap__dots i.is-on { background: var(--signal); }
.chap:not(.is-active) .chap__dots { opacity: 0; }
@media (max-width: 900px) {
  .chap .chap__dots { opacity: 1; }
  .explode.has-focus .explode__disc.is-focus img { transform: none; box-shadow: 0 0 0 1px var(--signal), 0 24px 50px rgba(0,0,0,0.7); }
  .explode__disc img { width: 62vw; height: 62vw; }
  .explode__disc { flex-basis: 66vw; width: 66vw; }
  .explode__tag { margin-bottom: 18px; }
  .explode__mtxt { margin-top: 20px; max-width: 30ch; }
  .explode__stage { padding-top: 24px; padding-bottom: 12px; }
}

/* variables: the per-disc text and the swipe bar are phone-only */
.explode__mtxt, .explode__bar { display: none; }
@media (max-width: 900px) {
  .explode__mtxt { display: block; }
  .explode__bar { display: flex; }
}

/* hero: frames loading */
.hero__load { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: rgba(236,235,230,0.08); transition: opacity 0.8s var(--ease) 0.4s; }
.hero__load span { display: block; height: 100%; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.3s linear; }
.hero__load.is-done { opacity: 0; }

/* page transition veil */
.veil { position: fixed; inset: 0; z-index: 200; background: #050506; display: grid; place-items: center; visibility: hidden; pointer-events: none; }
.veil__t { color: var(--text); font-size: 13px; }
.veil__t:not(:empty)::before { content: "["; } .veil__t:not(:empty)::after { content: "]"; }
.veil__line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signal); }
html.veil-in::after { content: ""; position: fixed; inset: 0; z-index: 199; background: #050506; animation: veil-fallback 0s linear 2.5s forwards; }
@keyframes veil-fallback { to { visibility: hidden; } }

/* case study index */
.secidx { position: fixed; right: clamp(12px, 1.6vw, 28px); top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; mix-blend-mode: difference; color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
.secidx.is-on { opacity: 1; pointer-events: auto; }
.secidx button { display: flex; align-items: center; gap: 10px; padding: 4px 0; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; }
.secidx__n { opacity: 0.35; transition: opacity 0.3s; display: flex; align-items: center; gap: 8px; }
.secidx__n::before { content: ""; width: 0; height: 1px; background: currentColor; transition: width 0.4s var(--ease); }
.secidx__t { opacity: 0; transform: translateX(6px); transition: opacity 0.3s, transform 0.4s var(--ease); white-space: nowrap; }
.secidx button.is-active .secidx__n { opacity: 1; }
.secidx button.is-active .secidx__n::before { width: 18px; }
.secidx.is-flash button.is-active .secidx__t, .secidx:hover .secidx__t { opacity: 1; transform: none; }
.secidx:hover .secidx__t { opacity: 0.55; } .secidx:hover button:hover .secidx__t, .secidx:hover button.is-active .secidx__t { opacity: 1; }
@media (max-width: 900px) { .secidx { display: none; } }

/* =========================================================
   Draft 8: optional interactions, method, iterations, voices
   ========================================================= */
/* pull quotes */
.pull { margin: 8px 0 0; padding-left: 18px; border-left: 2px solid var(--signal); }
.pull p { margin: 0; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.35; letter-spacing: -0.015em; color: var(--text); max-width: 34ch; }
.pull cite { display: block; margin-top: 10px; font-style: normal; }
.idea__copy .pull { margin-top: 28px; }

/* finished pair: a normal section, the list drives it */
.pair__pin { height: auto; min-height: 100vh; min-height: 100svh; }
.pair--live .pair__group, .js .pair--live .pair__group { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.pair__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.pair__gt { margin: 0 0 6px; }
.pair__steps { border-top: 1px solid var(--line); }
.pair__step, .js .pair--live .pair__step { display: block; padding: 0; opacity: 1; transform: none; border-bottom: 1px solid var(--line); }
.pair__sbtn { display: grid; grid-template-columns: 22px 1fr; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 9px 0; cursor: pointer; color: inherit; opacity: 0.5; transition: opacity 0.4s var(--ease); }
.pair__sbtn:hover { opacity: 0.85; }
.pair__step.is-active .pair__sbtn { opacity: 1; }
.pair__st { display: block; }
.pair__st .label { display: block; }
.pair__sp { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.pair__n { padding-top: 2px; }
.pair__step.is-seen { opacity: 1; }

/* process: arrows on desktop too, decisions under each stage */
.chapters__nav { display: flex; }
.chapters__pin { height: auto; min-height: 100vh; min-height: 100svh; }
.chapters__row { min-height: 62vh; }
.chap__d { display: block; margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--text); max-width: 36ch; }
.chap__d .label { display: block; color: var(--signal); margin-bottom: 4px; }
.chap__p { font-size: 14px; }
.chap__cap { margin-top: 14px; }
.chap__h { font-size: clamp(22px, 2.1vw, 34px); }

/* method comparison */
.compare { border-top: 1px solid var(--line); padding-block: clamp(88px, 10vw, 150px); }
.flow { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line-strong); }
.flow__row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.flow__k { grid-column: 1 / 3; padding-top: 3px; }
.flow__steps { grid-column: 3 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flow__steps li { position: relative; font-size: 15px; line-height: 1.4; color: var(--muted); padding-right: 22px; }
.flow__steps li:not(:last-child)::after { content: "→"; position: absolute; right: 0; top: 0; color: var(--faint); }
.flow__n { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); margin-bottom: 6px; }
.flow__row--b .flow__k { color: var(--signal); }
.flow__row--b li { color: var(--text); }
.flow__row--b .flow__n { color: var(--signal); }
.bars { margin-top: clamp(48px, 6vw, 88px); }
.bars__legend { display: flex; gap: 24px; justify-content: flex-end; margin-bottom: 14px; }
.bars__key::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; background: var(--faint); }
.bars__key--b::before { background: var(--signal); }
.bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.bar__k { grid-column: 1 / 4; margin: 0; font-size: 17px; }
.bar__tracks { grid-column: 4 / 11; }
.bar__t { position: relative; height: 22px; margin-bottom: 8px; }
.bar__f { position: absolute; left: 0; top: 9px; height: 4px; width: 0; background: var(--faint); transition: width 1.4s var(--ease); }
.bar__t--b .bar__f { background: var(--signal); transition-delay: 0.25s; }
.bars.is-in .bar__t--a .bar__f { width: calc(var(--a) * 0.82%); }
.bars.is-in .bar__t--b .bar__f { width: calc(var(--b) * 0.82%); }
.bar__v { position: absolute; top: 3px; left: calc(var(--a) * 0.82% + 12px); color: var(--muted); opacity: 0; transition: opacity 0.5s 1s; white-space: nowrap; }
.bar__t--b .bar__v { left: calc(var(--b) * 0.82% + 12px); color: var(--text); }
.bars.is-in .bar__v { opacity: 1; }
.bar__n { margin: 6px 0 0; font-size: 13px; color: var(--faint); max-width: 60ch; }
.bar__d { grid-column: 11 / 13; margin: 0; text-align: right; font-size: clamp(28px, 3vw, 48px); font-weight: 500; letter-spacing: -0.05em; line-height: 1; color: var(--signal); }
.bar--text .bar__tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bar__txt { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.bar__txt .label { display: block; margin-bottom: 4px; }
.bar__txt--b { color: var(--text); }
.bar__txt--b .label { color: var(--signal); }
.compare__src { margin-top: 28px; max-width: 90ch; }
.compare__src a { color: var(--text); }

/* iterations */
.iters { border-top: 1px solid var(--line); padding-block: clamp(88px, 10vw, 150px); }
.pull--side { align-self: end; }
.iters__fig { margin: clamp(40px, 5vw, 72px) 0 0; }
.iters__fig img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.5)); }
.iters__list { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; border-top: 1px solid var(--line-strong); }
.iters__list li { padding-top: 14px; }
.iters__v { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--signal); margin-bottom: 6px; }
.iters__list b { display: block; font-weight: 500; font-size: 17px; margin-bottom: 6px; }
.iters__list p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* voices */
.voices { border-top: 1px solid var(--line); padding-block: clamp(88px, 10vw, 150px) clamp(40px, 5vw, 72px); }
.voices__q { display: grid; gap: 28px; }
.voices__q .lead { margin-top: 8px; }

/* response */
.resp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line-strong); align-items: start; }
.resp .stat .label { max-width: 22ch; }
.resp__q { margin: 0; }

/* editions: a fan, like the tech pack */
.editions__row { position: relative; display: block; height: calc(min(64vh, 620px) + 90px); margin: clamp(36px, 5vw, 64px) auto 0; max-width: var(--max); padding-inline: var(--gut); overflow: visible; }
.edition { position: absolute; left: 50%; top: 10px; width: calc(min(64vh, 620px) * 0.31); margin-left: calc(min(64vh, 620px) * -0.155); transform-origin: 50% 100%; }
.edition__btn { height: min(64vh, 620px); width: 100%; display: flex; justify-content: center; }
.edition__btn img { height: 100%; width: auto; }
.edition figcaption { justify-content: center; }
.editions__row.has-hover .edition { opacity: 0.45; }
.editions__row.has-hover .edition:hover { opacity: 1; z-index: 40 !important; }

/* separator: black band that fades in and out */
.spark { height: clamp(460px, 86vh, 900px); background: linear-gradient(180deg, var(--ground) 0%, #09090b 8%, #060607 15%, #030304 22%, #000 30%, #000 70%, #030304 78%, #060607 85%, #09090b 92%, var(--ground) 100%); }
.spark__in { width: min(1240px, 100vw); transform: translate(-50%, -56%); mix-blend-mode: screen; }
.spark__in img { mix-blend-mode: normal; }

@media (max-width: 900px) {
  .pull p { font-size: 18px; }
  /* pair on phones: stage on top, the whole list below */
  .pair--live .pair__pin { height: auto; min-height: 0; grid-template-rows: auto 56vh auto auto; }
  .pair--live .pair__step:not(.is-active) { display: block; }
  .pair--live .pair__steps { min-height: 0; border-top: 1px solid var(--line); }
  .pair--live .pair__step { border-bottom: 1px solid var(--line); padding: 0; }
  .pair--live .pair__step:not(.is-active) .pair__sp { display: none; }
  .pair--live .pair__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pair--live .pair__left > .stack .body { display: block; }
  .flow__row, .bar { grid-template-columns: 1fr; gap: 10px; }
  .flow__k, .flow__steps, .bar__k, .bar__tracks, .bar__d { grid-column: 1 / -1; }
  .flow__steps { grid-template-columns: 1fr 1fr; }
  .bar__d { text-align: left; font-size: 30px; }
  .bars__legend { justify-content: flex-start; }
  .bar--text .bar__tracks { grid-template-columns: 1fr; }
  .iters__list { grid-template-columns: 1fr 1fr; }
  .resp { grid-template-columns: 1fr 1fr; }
  .resp__q { grid-column: 1 / -1; }
  .editions__row { display: block; overflow: visible; height: calc(min(52vh, 440px) + 80px); padding: 0; margin: 28px 0 0; scroll-snap-type: none; }
  .edition { flex: none; width: calc(min(52vh, 440px) * 0.31); margin-left: calc(min(52vh, 440px) * -0.155); }
  .edition__btn { height: min(52vh, 440px); }
  .edition figcaption { flex-direction: column; align-items: center; gap: 2px; }
  .sheets { display: block; overflow: visible; }
  .spark { height: 62vh; }
  .spark__in { width: 190vw; }
}
.editions__legend { display: none; }
@media (max-width: 900px) {
  .edition figcaption { display: none; }
  .editions__legend { display: block; text-align: center; margin-top: 8px; }
}
.editions { overflow: hidden; }
@media (min-width: 901px) { .pair__stage { -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%); } }

/* manifesto no longer pins: let it follow the hero closely instead of a full empty screen */
.manifesto__pin { height: auto; min-height: 0; padding-block: clamp(120px, 20vh, 220px) clamp(96px, 16vh, 180px); }
.hero__end-i { display: inline-block; }

/* Draft 9: response footnote, press link, about reflection */
.resp__foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: clamp(28px, 3vw, 44px); align-items: start; }
.resp__foot .body { grid-column: 1 / 7; margin: 0; }
.resp__press { grid-column: 8 / 13; margin: 0; font-size: 15px; line-height: 1.45; }
.resp__press .label { display: block; margin-bottom: 6px; }
.resp__press a, .credits a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color 0.3s, text-decoration-color 0.3s; }
.resp__press a:hover, .credits a:hover { color: var(--signal); text-decoration-color: currentColor; }
.about__now { margin-top: -16px; max-width: 58ch; }
@media (max-width: 900px) {
  .resp__foot .body, .resp__press { grid-column: 1 / -1; }
}

/* =========================================================
   02 Blinded additions
   ========================================================= */
/* hero: the film fills the frame instead of a tall photo */
.case-hero--film .case-hero__img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.03) brightness(0.82); will-change: transform; }
/* idea: landscape render instead of a portrait photo */
.idea__fig--wide { aspect-ratio: 4 / 3; align-self: center; }
/* a 16:9 scene shown nearly whole, with the subject kept in the middle */
.idea__fig--pano { aspect-ratio: 2000 / 1116; }
.idea__fig--pano img { height: 108%; object-position: 50% 50%; }
.pull .pull__tr { margin-top: 8px; font-size: 15px; color: var(--muted); }
/* details: six items, three per row */
.iters__list.details__list { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
#details > .cap { margin-top: 28px; }
/* process: an empty slot that says what is coming (preview only) */
.chap__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 15px; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(236,235,230,0.025) 14px 28px); }
.chap__ph .label { color: var(--signal); }
.chapters__lead { max-width: 46ch; }
/* colourways: two squares side by side */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.duo__fig { margin: 0; }
.duo__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--raised); cursor: zoom-in; overflow: hidden; }
.duo__btn img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform 1.2s var(--ease); }
.duo__btn:hover img { transform: scale(1.03); }
/* on foot: image left, text right */
.foot { align-items: center; }
.foot__fig { grid-column: 1 / 7; position: relative; aspect-ratio: 1; }
.foot__fig .duo__btn, .foot__fig .duo__btn img { height: 100%; }
.foot__copy { grid-column: 8 / 12; }
.ph-tag { position: absolute; left: 14px; top: 14px; z-index: 2; pointer-events: none; }
@media (max-width: 900px) {
  .iters__list.details__list { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
  .foot__fig, .foot__copy { grid-column: 1 / -1; }
  .foot__copy { margin-top: 28px; }
  .idea__fig--wide { grid-column: 1 / -1; }
}

/* =========================================================
   03 Technomule additions
   ========================================================= */
.iters__list.details__list--4 { grid-template-columns: repeat(4, 1fr); }
/* a vertical film in a tall frame */
.film { grid-column: 1 / 7; margin: 0; display: flex; justify-content: center; background: var(--raised); padding: clamp(16px, 2vw, 32px) 0; }
.film video { display: block; height: min(78vh, 760px); width: auto; max-width: 100%; aspect-ratio: 720 / 1160; object-fit: cover; background: #000; }
@media (max-width: 900px) {
  .iters__list.details__list--4 { grid-template-columns: 1fr 1fr; }
  .film { grid-column: 1 / -1; }
  .film video { height: auto; width: 100%; }
}

/* =========================================================
   04 Cou7ure and 05 ErgoRithm additions
   ========================================================= */
/* hero: three vertical films side by side */
.case-hero--trio .case-hero__img { display: flex; gap: 6px; background: #000; }
.case-hero--trio .case-hero__img video, .case-hero--trio .case-hero__img > img { position: relative; flex: 1 1 0; min-width: 0; width: auto; height: 100%; min-height: 0; object-fit: cover; filter: brightness(0.86); }
/* hero on a light studio render: darker films and a stronger top shade so the nav and labels stay readable */
.case-hero--light .case-hero__img video, .case-hero--light .case-hero__img > img { filter: brightness(0.7) contrast(1.06); }
.case-hero--light .case-hero__img::after { background: linear-gradient(180deg, rgba(11,12,14,0.6) 0%, rgba(11,12,14,0.1) 22%, rgba(11,12,14,0.25) 45%, rgba(11,12,14,0.95) 100%); }
/* hero: a small render on a light panel, held still */
.case-hero--card .case-hero__img { background: #fff; }
.case-hero--card .case-hero__img img { left: 0; right: 0; top: 4%; margin: 0 auto; width: auto; height: 44%; min-height: 0; max-width: 92%; object-fit: contain; filter: none; }
.case-hero--card .case-hero__img::after { background: linear-gradient(180deg, rgba(11,12,14,0) 0%, rgba(11,12,14,0) 44%, rgba(11,12,14,0.97) 53%); }
/* a figure on white, shown whole */
.fig--white { background: #fff; }
.fig--white img { object-fit: contain; padding: 4%; }
/* numbered steps in two rows of three */
.steps6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .case-hero--trio .case-hero__img > :not(:first-child) { display: none; }
  .case-hero--card .case-hero__img img { height: 30%; top: 9%; }
  .case-hero--card .case-hero__img::after { background: linear-gradient(180deg, rgba(11,12,14,0) 0%, rgba(11,12,14,0) 30%, rgba(11,12,14,0.97) 44%); }
}

/* ---------- 4 Oct 2026 review fixes ---------- */
/* nav: drops the blend and sits on a dark band once past the hero, so it never runs over text */
.nav { transition: background-color 0.4s var(--ease); }
.nav.is-solid { mix-blend-mode: normal; color: var(--text); background: rgba(11, 12, 14, 0.84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid var(--line); }

/* sign-off at the end of every page: the hands, with the credit to Michelangelo */
.spark { height: clamp(420px, 74vh, 820px); }
.spark__cap { position: absolute; left: 0; right: 0; bottom: clamp(32px, 8vh, 88px); z-index: 2; margin: 0; padding-inline: var(--gut); text-align: center; color: var(--muted); }
.spark__cap span { display: block; margin-top: 8px; color: var(--faint); letter-spacing: 0.06em; }

/* colour and finish list on the denim page, and the small source lines */
.cmf { margin-top: clamp(40px, 5vw, 72px); }
.src-note { margin-top: 18px; }
.src-note a { color: inherit; }