/* ============================================================
   Edition8 — Works (archive.css)
   THE REEL — works stack vertically as large editorial blocks.
   GSAP clip-reveal + parallax; the lead work pins full-bleed.
   Sharp corners, hairline frames, TRUE-colour media (no filters,
   no overlays). Reel ⇄ Grid via body[data-mode].
   ============================================================ */

:root {
  --works-gutter: clamp(20px, 4vw, 64px);
  --works-rule:   var(--rule, rgba(12,12,14,.16));
  --works-mono:   var(--font-mono, 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  --works-serif:  var(--font-sans, 'Geist', system-ui, sans-serif);
  --works-sans:   var(--font-sans, 'Geist', system-ui, sans-serif);
  --works-ease:   var(--ease-cinema, cubic-bezier(.2,.7,.2,1));
  --works-grey:   var(--mute-60, rgba(12,12,14,.6));
  --works-faint:  var(--mute-40, rgba(12,12,14,.4));
  --works-accent: var(--rule-red, #0A0A0A);
  --works-hair:   var(--mute-24, rgba(12,12,14,.24));
  --works-frame:  color-mix(in srgb, var(--ink) 5%, var(--paper));
  /* vertical room the fixed mono chrome (header + nav rail) occupies */
  --works-chrome: 64px;
}

html, body { background: var(--paper); color: var(--ink); }
body { overflow-x: hidden; }
body[data-page="works-v2"] main { padding-top: var(--works-chrome); }

/* skip link */
.srv2-skip {
  position: absolute; left: -9999px; top: 1rem; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px;
  font-family: var(--works-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}
.srv2-skip:focus { left: 1rem; outline: none; }

/* ============================================================
   01 — INDEX BAR  (sticky filters / count / mode — sharp)
============================================================ */
.bar {
  position: sticky; top: var(--works-chrome); z-index: 41;
  background: var(--paper);
}
.bar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 7px var(--works-gutter);
}
/* filters + count removed — only the Reel/Grid toggle remains, right-aligned */
.bar__inner--toggle-only { grid-template-columns: 1fr; justify-items: end; }

.bar__pills { display: flex; gap: 2px; flex-wrap: wrap; }
.pill {
  appearance: none; background: transparent; color: var(--works-grey);
  border: 1px solid transparent;
  padding: 8px 14px;
  font-family: var(--works-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pill:hover { border-color: var(--works-rule); color: var(--ink); }
.pill.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.bar__count {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--works-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--works-grey); white-space: nowrap;
}
.bar__count strong { font-weight: 500; color: var(--ink); }

.bar__right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }

.toggle {
  display: inline-flex;
  border: 1px solid var(--works-rule);
  padding: 0;
}
.toggle button {
  appearance: none; background: transparent; color: var(--ink);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 11px; line-height: 0;
  transition: background .25s ease, color .25s ease;
}
.toggle button + button { border-left: 1px solid var(--works-rule); }
.toggle button:hover { background: color-mix(in oklab, var(--ink) 10%, transparent); }
/* segmented icon toggle: both symbols show; the active mode is filled */
.toggle button.is-active { background: var(--ink); color: var(--paper); }
/* the first work sits tight under the toggle — no rule, no big top gap */
body:not([data-mode="grid"]) .reel .work:first-child { padding-top: clamp(6px, 1.2vh, 14px); }

/* ============================================================
   02 — REEL  (vertical container)
============================================================ */
.reel {
  position: relative; z-index: 1;
  background: var(--paper);
}

/* editorial intro — text chapter, no media */
.reel__intro {
  padding: clamp(56px, 12vh, 150px) var(--works-gutter) clamp(40px, 7vh, 84px);
  border-bottom: 1px solid var(--works-rule);
  display: grid; gap: clamp(16px, 2vh, 28px);
}
.reel__eyebrow {
  font-family: var(--works-mono); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--works-grey);
}
.reel__lede {
  font-family: var(--works-sans); font-weight: 680;
  font-size: clamp(48px, 9vw, 150px); line-height: .92; letter-spacing: -.022em;
  margin: 0; color: var(--ink); text-wrap: balance;
}
.reel__lede em { font-style: normal; font-weight: 800; }
.reel__sub {
  max-width: 44ch; font-family: var(--works-sans); font-weight: 300;
  font-size: clamp(15px, 1.1vw, 19px); line-height: 1.5; color: var(--works-grey);
  text-wrap: pretty;
}
.reel__index {
  display: flex; gap: clamp(18px, 3vw, 46px); flex-wrap: wrap;
  padding-top: clamp(8px, 2vh, 18px);
  font-family: var(--works-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--works-grey);
}
.reel__index b { color: var(--ink); font-weight: 500; }

/* ============================================================
   03 — WORK BLOCK  (head · wide film on top · photographs below)
============================================================ */
.work {
  padding: clamp(40px, 7vh, 100px) var(--works-gutter);
  border-bottom: 1px solid var(--works-rule);
}
.work.is-hidden { display: none; }
/* desktop: the work occupies ~75% of the page, centred — not full-bleed */
@media (min-width: 1025px) {
  .work { padding-inline: clamp(80px, 12.5vw, 320px); }
}

.work__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: clamp(16px, 2.5vw, 40px);
  margin-bottom: clamp(18px, 2.4vh, 30px);
}
.work__idx {
  font-family: var(--works-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--works-grey);
}
.work__title {
  grid-column: 2; grid-row: 1;
  font-family: var(--works-sans); font-weight: 680;
  font-size: clamp(22px, 2.6vw, 42px); line-height: 1.02; letter-spacing: -.016em;
  margin: 0; color: var(--ink); text-wrap: balance;
}
.work__title em { font-style: normal; font-weight: 700; color: var(--works-faint); }
.work__line {
  grid-column: 2; grid-row: 2;
  display: flex; gap: 7px; flex-wrap: wrap; margin-top: clamp(8px, 1.2vh, 14px);
}
.work__tag {
  font-family: var(--works-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--works-grey);
  border: 1px solid var(--works-rule); padding: 4px 9px;
}
.work__tag--cat { color: var(--ink); border-color: var(--works-hair); }
/* "Open project" CTA now sits in its own footer BELOW the film (was pinned
   top-right of the header) */
.work__foot { margin-top: clamp(16px, 2.2vh, 26px); }
.work__open {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--works-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding: 6px 0;
  transition: gap .25s var(--works-ease);
}
.work__open:hover { gap: 16px; }
.work__open:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.work__open-arr { transition: transform .25s var(--works-ease); }
.work__open:hover .work__open-arr { transform: translateX(4px); }

/* the wide horizontal film (16:9) on top — TRUE colour, hairline frame */
.work__film {
  position: relative; margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--works-hair);
  background: var(--works-frame);
  cursor: pointer;
}
.work__vid, .work__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the photographs, in a row below the film */
.work__stills {
  display: grid; gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(8px, 1vw, 16px);
}
.work__stills--1 { grid-template-columns: 1fr; }
.work__stills--2 { grid-template-columns: 1fr 1fr; }
.work__stills--3 { grid-template-columns: repeat(3, 1fr); }
.work__still {
  margin: 0; overflow: hidden; border: 1px solid var(--works-hair);
  aspect-ratio: 4 / 5; cursor: pointer;
}
.work__still img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- SWIPEABLE gallery for film-less works (data-shape set by JS) ----
   2 portrait photos visible (4:5), swipe right for more; landscape ~1.4-up at
   3:2. A film-less work no longer forces a 16:9 crop; a vertical FILM flips its
   frame to a centred portrait. */
.work__grid {
  display: flex;
  gap: clamp(8px, 1vw, 16px);
  overflow-x: auto;
  overflow-y: hidden;   /* prevent the spec-forced overflow-y:auto trapping vertical touch-scroll */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  overscroll-behavior-x: contain;
}
.work__grid::-webkit-scrollbar { display: none; }
.work__cell {
  margin: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--works-hair); background: var(--works-frame);
  aspect-ratio: 4 / 5;
  flex: 0 0 calc(50% - clamp(4px, 0.5vw, 8px));   /* 2 portrait cells in view */
  scroll-snap-align: start;
}
.work__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work[data-shape="landscape"] .work__cell { aspect-ratio: 3 / 2; flex-basis: calc(72% - clamp(4px,0.5vw,8px)); }
.work[data-shape="square"]    .work__cell { aspect-ratio: 1 / 1; flex-basis: calc(60% - clamp(4px,0.5vw,8px)); }
/* a lone photo (single-image work, now inline in the reel) sits centred so it
   reads as an intentional plate — not a half-empty swipe row */
body:not([data-mode="grid"]) .work__grid:has(.work__cell:only-child) { justify-content: center; }
/* Every film frame is the SAME 16:9 size so all works stay aligned and equal.
   A genuinely vertical film (e.g. Kağan's 3:4 phone-shot campaign) is shown
   WHOLE inside that frame via object-fit:contain — never cropped to a wide
   strip, never shrunk smaller than its neighbours (brand rule: media renders
   true). The unused frame sits as the work's own frame colour, not an overlay. */
body:not([data-mode="grid"]) .work[data-shape="portrait"] .work__vid { object-fit: contain; }
.work.is-armed.is-in .work__grid { transition-delay: .1s; }
@media (max-width: 700px) {
  .work__cell { flex-basis: calc(50% - 4px); }
  .work[data-shape="landscape"] .work__cell { flex-basis: 82%; }
}

/* ---- INDEX GRID: single-photo (older) works as 4-up covers at the reel foot ---- */
.work-index {
  padding: clamp(40px, 7vh, 100px) var(--works-gutter);
  border-bottom: 1px solid var(--works-rule);
}
@media (min-width: 1025px) { .work-index { padding-inline: clamp(80px, 12.5vw, 320px); } }
.work-index.is-hidden { display: none; }
.work-index__head {
  display: flex; align-items: baseline; gap: clamp(12px, 2vw, 28px);
  margin-bottom: clamp(18px, 2.4vh, 30px);
}
.work-index__title {
  margin: 0; font-family: var(--works-sans); font-weight: 680;
  font-size: clamp(20px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -.016em; color: var(--ink);
}
.work-index__title em { font-style: normal; font-weight: 700; color: var(--works-faint); }
/* single-photo works: a clean, perfectly symmetric 2-up grid (uniform 4:5 cells)
   so they read in the same 2-photo rhythm as the rest of the archive */
.work-index__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1vw, 16px); }
.work-index__cell { margin: 0; cursor: pointer; }
.work-index__cell.is-hidden { display: none; }
.work-index__cell img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border: 1px solid var(--works-hair); background: var(--works-frame);
}
.work-index__cap {
  margin-top: 9px; font-family: var(--works-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--works-grey); line-height: 1.3;
}
.work-index__cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.work-index.is-armed { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--works-ease), transform .8s var(--works-ease); }
.work-index.is-armed.is-in { opacity: 1; transform: none; }
@media (max-width: 760px) { .work-index__grid { grid-template-columns: repeat(2, 1fr); } }
/* quick-scan (grid) mode: span the reel grid, keep the 4-up inside */
body[data-mode="grid"] .work-index { grid-column: 1 / -1; padding: clamp(28px,4vh,48px) var(--works-gutter) 0; border-bottom: 0; }

.reel__sentinel { width: 100%; height: 1px; pointer-events: none; }

/* ---- REVEAL (CSS-driven, armed by JS only when motion is allowed) ----
   DEFAULT IS VISIBLE. `.is-armed` sets the hidden state; IO adds `.is-in`.
   If JS never runs / fails, no `.is-armed` → everything shows. */
.work.is-armed > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--works-ease), transform .8s var(--works-ease);
}
.work.is-armed.is-in > * { opacity: 1; transform: none; }
.work.is-armed.is-in .work__film   { transition-delay: .06s; }
.work.is-armed.is-in .work__stills { transition-delay: .14s; }
.work.is-armed.is-in .work__kunye  { transition-delay: .2s; }

/* ---- KÜNYE (per-work colophon) — principal credits under the photos.
   Small mono labels, names in the sans; full list opens in the modal. ---- */
/* full-width colophon: matches the work's media width, flows the
   complete crew list into balanced columns; pairs never split. */
.work__kunye {
  margin-top: clamp(20px, 2.6vh, 34px);
  padding-top: clamp(16px, 2vh, 24px);
  border-top: 1px solid var(--works-rule);
  column-width: 300px;
  column-gap: clamp(28px, 3.4vw, 56px);
}
.work__cr {
  break-inside: avoid;
  display: grid; grid-template-columns: clamp(96px, 7.5vw, 120px) 1fr;
  column-gap: 16px; align-items: baseline;
  padding: clamp(4px, .7vh, 7px) 0;
}
/* label + name share the same thin uppercase mono treatment (the "cool"
   look); only the COLOUR sets them apart — grey label, black name. */
.work__cr dt {
  font-family: var(--works-mono); font-weight: 400;
  font-size: clamp(9.5px, .8vw, 10.5px); letter-spacing: .12em;
  text-transform: uppercase; color: var(--works-grey); line-height: 1.5;
}
.work__cr dd {
  margin: 0; font-family: var(--works-mono); font-weight: 400;
  font-size: clamp(10.5px, .85vw, 11.5px); letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.5; color: var(--ink);
}
/* crew lists (several names) drop a notch so single-name credits stay even */
.work__cr--multi dd { font-size: clamp(9.5px, .72vw, 10.5px); letter-spacing: .03em; }
/* lead / un-roled lines (e.g. "for lc waikiki") span the column, muted */
.work__cr--note { grid-template-columns: 1fr; }
.work__cr--note dd { color: var(--works-grey); font-size: clamp(10.5px, .82vw, 12px); }
@media (max-width: 560px) {
  .work__kunye { column-count: 1; column-width: auto; }
  .work__cr { grid-template-columns: clamp(88px, 26vw, 116px) 1fr; column-gap: 12px; }
  .work__cr dd { overflow-wrap: anywhere; }   /* long names/@handles never overflow the edge */
}

/* ============================================================
   04 — PROJECT MODAL  (full paper sheet)
============================================================ */
.wmodal {
  position: fixed; inset: 0; z-index: 210;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--works-ease), visibility .4s;
}
.wmodal.is-open { opacity: 1; visibility: visible; }
.wmodal__scrim { position: absolute; inset: 0; background: var(--paper); }
.wmodal__panel {
  position: absolute; inset: 0;
  background: var(--paper);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* momentum + reliable touch scroll inside the dialog */
  overscroll-behavior: contain;
  touch-action: pan-y;                 /* explicitly allow vertical touch-scroll while the page is locked */
  padding: clamp(56px, 9vh, 104px) var(--works-gutter) clamp(48px, 8vh, 90px);
  transform: translateY(18px);
  transition: transform .55s var(--works-ease);
}
.wmodal.is-open .wmodal__panel { transform: none; }
.wmodal__x {
  position: sticky; top: 0; float: right; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--paper); border: 0; cursor: pointer; padding: 6px 0 6px 14px;
  font-family: var(--works-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
}
.wmodal__x-mark { font-size: 13px; }
.wmodal__x:hover { color: var(--works-grey); }
/* prev / next — step between projects without leaving the dialog. Fixed to the
   viewport edges (the panel has no transform once open, so fixed = viewport),
   so they ride along while the body scrolls. Arrow keys + horizontal swipe also
   drive these (archive.js). */
.wmodal__nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 4;
  width: clamp(40px, 3vw, 48px); height: clamp(40px, 3vw, 48px);
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--works-rule); border-radius: 50%;
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background-color .25s var(--works-ease), color .25s var(--works-ease), border-color .25s var(--works-ease);
}
.wmodal__nav:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.wmodal__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wmodal__nav--prev { left: clamp(10px, 1.4vw, 20px); }
.wmodal__nav--next { right: clamp(10px, 1.4vw, 20px); }
/* desktop: widen the panel's side gutters so the centred arrows never sit over
   the credits/film (the default gutter is only ~50px — narrower than an arrow) */
@media (min-width: 701px) {
  .wmodal__panel { padding-inline: clamp(72px, 6vw, 112px); }
}
@media (max-width: 700px) {
  /* sit at the bottom corners on phones — clear of the sticky Close (top) and
     swipe still works anywhere on the sheet */
  .wmodal__nav { top: auto; bottom: 16px; transform: none; width: 44px; height: 44px; }
  .wmodal__nav--prev { left: 16px; }
  .wmodal__nav--next { right: 16px; }
}
.wmodal__head { max-width: 64ch; margin-bottom: clamp(28px, 4vh, 48px); }
.wmodal__kicker {
  display: block; font-family: var(--works-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--works-grey);
  margin-bottom: clamp(14px, 2vh, 24px);
}
.wmodal__title {
  font-family: var(--works-sans); font-weight: 680;
  font-size: clamp(30px, 4.6vw, 68px); line-height: .98; letter-spacing: -.018em;
  margin: 0; color: var(--ink); text-wrap: balance;
}
.wmodal__title em { font-style: normal; font-weight: 700; color: var(--works-faint); }
.wmodal__sub {
  margin-top: clamp(12px, 1.6vh, 18px);
  font-family: var(--works-sans); font-weight: 300;
  font-size: clamp(15px, 1.1vw, 18px); line-height: 1.5; color: var(--works-grey);
}
.wmodal__credits {
  /* now sits at the BOTTOM of the modal (work first, credits last) — give it a
     rule + breathing room to read as the closing colophon */
  margin-top: clamp(28px, 4vh, 52px);
  padding-top: clamp(20px, 2.6vh, 32px);
  border-top: 1px solid var(--works-rule);
  columns: 2; column-gap: clamp(24px, 4vw, 56px);
  font-family: var(--works-mono); font-size: 11px; line-height: 1.7;
  letter-spacing: .04em; color: var(--works-grey);
}
.wmodal__credits div { break-inside: avoid; }
.wmodal__credits div:empty { height: 9px; }
.wmodal__film {
  margin: 0 0 clamp(14px, 2vh, 22px);
  aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--works-hair);
}
.wmodal__film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wmodal__stills { display: grid; gap: clamp(10px, 1.4vw, 18px); }
.wmodal__stills--1 { grid-template-columns: 1fr; }
.wmodal__stills--2 { grid-template-columns: 1fr 1fr; }
.wmodal__stills--3 { grid-template-columns: repeat(3, 1fr); }
.wmodal__stills--4 { grid-template-columns: repeat(2, 1fr); }
.wmodal__stills figure { margin: 0; overflow: hidden; border: 1px solid var(--works-hair); aspect-ratio: 4 / 5; }
.wmodal__stills img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.wmodal-open { overflow: hidden; }
@media (max-width: 700px) {
  .wmodal__credits { columns: 1; }
  .wmodal__stills--3, .wmodal__stills--4 { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   07 — CLOSING SPREAD
============================================================ */
.closing {
  position: relative; z-index: 2;
  padding: clamp(80px, 16vh, 200px) var(--works-gutter) clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--works-rule);
  display: flex; flex-direction: column; gap: clamp(28px, 4vh, 56px);
  background: var(--paper);
}
.closing__num {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--works-mono);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--works-grey);
}
.closing__num .ed-plus {
  color: var(--works-grey); font-family: var(--works-mono);
  font-weight: 400; line-height: 1;
}
.closing__line {
  font-family: var(--works-sans);
  font-weight: 680;
  font-size: clamp(40px, 7vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  margin: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink);
  max-width: 18ch;
}
.closing__line em {
  font-family: var(--works-sans);
  font-style: normal;
  font-weight: 750;
  letter-spacing: -0.018em;
}
.closing__sub {
  max-width: 56ch;
  font-family: var(--works-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  color: var(--works-grey);
  text-wrap: pretty;
}
.closing__cta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-top: 12px;
}
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  font-family: var(--works-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--works-ease), background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--works-rule); }
.btn--ghost:hover { border-color: var(--ink); }
.btn__arrow { font-family: var(--works-sans); font-size: 14px; }

.closing__foot {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--works-rule);
  padding-top: 24px; margin-top: clamp(32px, 6vh, 80px);
  font-family: var(--works-mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--works-grey);
}

/* ============================================================
   08 — RESPONSIVE
============================================================ */
@media (max-width: 768px) {
  /* header: clean vertical stack — idx, title, tags, open (fixes the
     mis-placed index on phones) */
  .work__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; column-gap: 0; }
  .work__title, .work__line, .work__open { grid-column: auto; grid-row: auto; }
  .work__open { margin-top: 4px; }

  /* EQUAL layout on every work: the film sits 16:9 on top (even portrait
     sources), and the stills + photo grids become identical 2-up swipe rows
     — exactly two visible, scroll right for the rest. */
  .work__film { aspect-ratio: 16 / 9; }

  body:not([data-mode="grid"]) .work__stills,
  body:not([data-mode="grid"]) .work__grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;   /* stop the spec-forced overflow-y:auto from trapping vertical touch-scroll */
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .work__stills::-webkit-scrollbar,
  .work__grid::-webkit-scrollbar { display: none; }
  body:not([data-mode="grid"]) .work__still,
  body:not([data-mode="grid"]) .work__grid .work__cell {
    flex: 0 0 calc(50% - 4px) !important;   /* exactly 2 in view */
    scroll-snap-align: start;
    aspect-ratio: 4 / 5 !important;
    margin: 0;
  }
  /* a lone photo fills the row instead of sitting in a half-empty cell */
  body:not([data-mode="grid"]) .work__still:only-child,
  body:not([data-mode="grid"]) .work__grid .work__cell:only-child { flex-basis: 100% !important; }

  /* per-work credits (colophon) are hidden on mobile IN THE REEL — redundant
     under each work, they open in full inside the project modal via "Open
     project". Scoped to .reel so the modal's own colophon still shows. Desktop
     keeps the inline reel colophon untouched. */
  .reel .work__kunye { display: none; }
}
@media (max-width: 900px) {
  .bar__inner { grid-template-columns: 1fr auto; }
  .bar__count { display: none; }
}
@media (max-width: 540px) {
  .bar__pills { gap: 0; overflow-x: auto; flex-wrap: nowrap; padding-right: 12px; -webkit-overflow-scrolling: touch; }
  .pill { flex: 0 0 auto; }
  .toggle button { padding: 8px 12px; }
  .reel__lede { font-size: clamp(40px, 15vw, 72px); }
}

/* ============================================================
   09 — REDUCED MOTION  (reveal never arms; everything visible)
============================================================ */
.motion-quiet .work__vid { display: none; }

/* ============================================================
   10 — GRID MODE  (body[data-mode="grid"])  — quick scan
   Each cell shows just the film/cover thumbnail + a small title.
============================================================ */
body[data-mode="grid"] .reel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* exactly four across */
  gap: 1px;
  background: var(--works-rule);
  border-bottom: 1px solid var(--works-rule);
}
body[data-mode="grid"] .reel__intro { grid-column: 1 / -1; background: var(--paper); border-bottom: 0; padding-bottom: clamp(28px, 4vh, 48px); }
body[data-mode="grid"] .reel__sentinel { grid-column: 1 / -1; }
body[data-mode="grid"] .work { padding: 0; border: 0; background: var(--works-frame); cursor: pointer; display: flex; flex-direction: column; }
body[data-mode="grid"] .work__stills,
body[data-mode="grid"] .work__foot,
body[data-mode="grid"] .work__open,
body[data-mode="grid"] .work__kunye,
body[data-mode="grid"] .work__idx { display: none; }
body[data-mode="grid"] .work__film { aspect-ratio: 4 / 5; border: 0; margin: 0; }
body[data-mode="grid"] .work[data-shape="portrait"] .work__film { max-width: none; margin: 0; }
/* film-less works: the quick-scan grid shows just the first photo at 4:5 */
body[data-mode="grid"] .work__grid { display: block; }
body[data-mode="grid"] .work__grid .work__cell { display: none; }
body[data-mode="grid"] .work__grid .work__cell:first-child { display: block; aspect-ratio: 4 / 5; border: 0; }
body[data-mode="grid"] .work__img,
body[data-mode="grid"] .work__vid,
body[data-mode="grid"] .work__cell img { transition: transform .6s var(--works-ease); }
body[data-mode="grid"] .work:hover .work__img,
body[data-mode="grid"] .work:hover .work__vid { transform: scale(1.04); }
body[data-mode="grid"] .work__head { display: block; padding: 9px 13px 17px; margin: 0; order: 2; } /* title sits BELOW the thumbnail; less top than bottom so the caps optically centre */
body[data-mode="grid"] .work__title { font-size: 13px; font-weight: 500; line-height: 1.22; letter-spacing: 0; }
body[data-mode="grid"] .work__title em { font-weight: 500; color: var(--works-grey); }
/* GRID FIX — never let the reveal hide a cell (was the "empty until you scroll"
   bug: armed cells stayed clipped/transparent below the first row). */
body[data-mode="grid"] .work.is-armed > * { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 768px) {
  /* mobile grid view: always a 2-up grid of vertical (4:5) thumbnails */
  body[data-mode="grid"] .reel { grid-template-columns: 1fr 1fr; }

  /* ---- MOBILE: the Reel/Grid toggle is pinned to the BOTTOM-RIGHT and stays
     visible in BOTH modes so you can switch any time. It floats on a solid
     paper chip (shadow) so it reads over photos. Desktop is untouched. ---- */
  body[data-page="works-v2"] .bar {
    position: fixed; left: auto; right: 16px; bottom: 16px; top: auto;
    width: auto; z-index: 70; background: transparent; border: 0;
    pointer-events: none;
  }
  body[data-page="works-v2"] .bar__inner { display: block; padding: 0; pointer-events: none; }
  body[data-page="works-v2"] .bar__count { display: none; }
  body[data-page="works-v2"] .toggle {
    pointer-events: auto;
    background: var(--paper);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  }
  /* first work opens just under the header band (the toggle no longer shares
     its line, and --works-chrome gives the title room to breathe below the logo) */
  body[data-page="works-v2"]:not([data-mode="grid"]) .reel .work:first-child { padding-top: 4px; }
}


/* ============================================================
   PAGE SIGNATURE — big bold page name above the footer rule
============================================================ */
.closing__sig {
  font-family: var(--works-sans);
  font-weight: 700;
  font-size: clamp(3.2rem, 16vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-top: clamp(2.5rem, 7vh, 5rem);
}