/* ============================================================
   VINH TRAN : Marketing & Experiential Strategist, Las Vegas
   Tokens measured from burocratik.com + madeinmay.studio
   (references/tokens.md) : bone canvas, one family, brutal scale.
   ============================================================ */

/* ---------- font ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/archivo-vf-latin.woff2') format('woff2');
}
/* v1.4: mono for the meta layer ONLY (labels, tags, chrome). Never in
   headings or body copy, never larger than label size. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-400.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  /* color : warm desert-tinted neutrals, never pure black/white */
  --bone: #f1efea;
  --bone-2: #e9e6df;
  --ink: #141311;
  --muted: #605d57;
  --hairline: #d7d3ca;
  --night: #0d0c0a;
  --night-2: #16140f;
  --night-ink: #efece5;
  --night-muted: rgba(239, 236, 229, 0.55);
  /* v1.6 P2-2: dark-section META LABELS sit one step brighter than the
     general night-muted voice, matching the light sections' label weight */
  --night-label: rgba(239, 236, 229, 0.72);
  --night-hairline: rgba(239, 236, 229, 0.16);

  /* type : one display family; mono carries the meta/terminal layer */
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;
  --t-giant: clamp(4.5rem, 16.5vw, 15rem);      /* display numerals / names */
  --t-display: clamp(2.75rem, 7.2vw, 6.5rem);   /* section statements */
  --t-title: clamp(1.75rem, 3.4vw, 3rem);       /* case titles */
  --t-intro: clamp(1.375rem, 2.4vw, 1.875rem);  /* ultralight intro paragraphs */
  --t-body: 1rem;
  --t-meta: 0.75rem;
  --track-display: -0.035em;
  --track-tight: -0.02em;
  --track-label: 0.14em;

  /* space : 8pt ladder, fluid section rhythm (v1.2: tightened; the stacked
     near-full-viewport rhythm read as length, so sections breathe at
     content height + this pad instead) */
  --m: clamp(0.75rem, 1.4vw, 1.25rem);          /* page margin (grid) */
  --gap: clamp(0.5rem, 1.4vw, 1.25rem);
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-6: 4rem;
  --section: clamp(3.5rem, 8vw, 6.5rem);

  /* shape + motion */
  --r-page: 13px;
  --r-pill: 999px;
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur-micro: 0.22s;
}

/* ---------- reset-ish ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { background: var(--night); }
body {
  background: transparent; /* main carries the bone sheet; night peeks at the rounded page corners */
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; background: var(--bone-2); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--bone); }

/* page hairline rails (madeinmay frame) */
.rails::before, .rails::after {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--hairline);
  z-index: 3;
  pointer-events: none;
}
.rails::before { left: calc(var(--m) * 2); }
.rails::after { right: calc(var(--m) * 2); }
@media (max-width: 900px) { .rails::before, .rails::after { display: none; } }

/* ---------- shared atoms ---------- */
.label {
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.dark .label { color: var(--night-label); }

/* v1.4 mono meta voice: the complete meta-layer selector set. Everything
   here is label-size or smaller; mono never touches headings or body copy. */
.label,
.menu-idx,
.gate-error,
.ov-press span,
.ov-ticks .tick-idx,
.wall-float .wall-tag,
.wall-inline-tag,
.work-link {
  font-family: var(--font-mono);
  font-weight: 400; /* single vendored weight; no synthetic bold */
}

/* v1.8: "View the work" meta-layer link. Mono, label voice, muted until
   hovered; underline appears on hover only. min-height + side padding give
   a >=44px tap target; the negative left margin keeps the text edge on the
   card's left rail. */
.work-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 0.75rem;
  margin: 0.4rem 0 -0.6rem -0.75rem;
  font-size: var(--t-meta);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.work-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; }
.work-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; color: var(--ink); }
.dark .work-link, .wall-detail .work-link { color: var(--night-label); }
.dark .work-link:hover, .wall-detail .work-link:hover { color: var(--bone); }
.dark .work-link:focus-visible, .wall-detail .work-link:focus-visible { outline-color: var(--bone); color: var(--bone); }

.wrap { padding-left: calc(var(--m) * 2); padding-right: calc(var(--m) * 2); }
@media (min-width: 901px) { .wrap { padding-left: calc(var(--m) * 3); padding-right: calc(var(--m) * 3); } }

/* page frame: burocratik's measured 13px page corner radius */
main {
  border-radius: var(--r-page);
  overflow: clip;
  background: var(--bone);
}

/* section spacing */
section { padding-top: var(--section); padding-bottom: var(--section); }

/* section head: "No. 01 : TITLE" */
.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-2);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}
.dark .sec-head { border-top-color: var(--night-hairline); }
.sec-head .num { font-weight: 550; white-space: nowrap; } /* v1.6 P2-6: "No. 0X" never breaks */
.sec-head .of { margin-left: auto; text-align: right; }
@media (max-width: 700px) {
  /* v1.6 P2-6: one wrap rule for every section's right tag: it keeps its
     right edge and folds to a second line when long, instead of shoving
     the row or wrapping mid-eyebrow differently per section */
  .sec-head .of { flex: 0 1 auto; min-width: 0; max-width: 44%; }
}

/* display statements */
.display {
  font-size: var(--t-display);
  line-height: 0.96;
  font-weight: 500;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.intro {
  font-size: var(--t-intro);
  line-height: 1.35;
  font-weight: 200;
  letter-spacing: var(--track-tight);
  max-width: 62ch;
  color: var(--ink);
}
.dark .intro { color: var(--night-ink); }
.body-copy { max-width: 65ch; color: var(--ink); }
.body-copy + .body-copy { margin-top: var(--s-2); }

/* v1.6 P0-8: the statement band is a beat, not a full section: generous top
   so the hero exit lands on air, tighter bottom into the work. */
.statement {
  padding-top: clamp(4rem, 9vw, 7rem);
  padding-bottom: clamp(2.5rem, 5.5vw, 4.25rem);
}
/* v1.9.3 taste dial: ultralight/bold pairing inside the one light statement
   beat. The intro is already wght 200; two pivotal phrases carry the whole
   contrast (same words, same size, weight is the only voice change). */
.statement .intro strong { font-weight: 780; }

/* reveal defaults: visible without JS; JS opts in */
.js .reveal { opacity: 0; transform: translateY(36px); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .gate.denied .gate-form { animation: none; }
}

/* v1.1 line-mask choreography: JS splits BR-separated display heads into
   mask/line pairs. Flex column prevents the negative-margin clip cushions
   from margin-collapsing, so at-rest geometry is identical to plain blocks. */
.split-lines { display: flex; flex-direction: column; }
.split-lines .line-mask { display: block; overflow: clip; padding-block: 0.2em; margin-block: -0.2em; }
.split-lines .line { display: block; }

/* Lenis owns the scroll animation; CSS smooth-behavior would double-animate.
   NB: the class must NOT start with "lenis" - Lenis strips lenis-* classes
   from the root element when it updates its own state classes. */
html.vt-smooth { scroll-behavior: auto; }

/* ============================================================
   GATE : the dark hold beat (madeinmay preloader x burocratik onload)
   ============================================================ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--night);
  color: var(--night-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(var(--m) * 2);
}
.gate[hidden] { display: none; }
html.vt-open .gate { display: none; }
.gate .label { color: var(--night-muted); }
.gate-mark {
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--night-ink);
}
.gate-inner {
  width: min(24rem, 100%);
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  text-align: center;
}
.gate-rule {
  width: 100%;
  height: 1px;
  background: var(--night-hairline);
  transform-origin: center;
}
.gate-form { display: flex; align-items: center; width: 100%; border-bottom: 1px solid rgba(239, 236, 229, 0.35); }
/* v1.6 P1-6: username field exists for password managers only */
.vh-user {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0; padding: 0;
}
.gate-form input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.8rem 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  outline: none;
  color: var(--night-ink);
  text-align: center;
}
.gate-form input::placeholder { color: var(--night-muted); text-transform: uppercase; font-size: var(--t-meta); letter-spacing: var(--track-label); }
.gate-form button {
  border: 0;
  background: var(--night-ink);
  color: var(--night);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem;
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-quart);
}
.gate-form button:hover { transform: scale(1.04); }
.gate-error { min-height: 1.5em; font-size: var(--t-meta); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--night-muted); }
.gate-error.granted { color: var(--night-ink); } /* ACCESS GRANTED beat: brightness flip, no hue */
.gate.denied .gate-form { animation: shake 0.4s var(--ease-quart); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}
.gate-foot {
  position: absolute;
  left: calc(var(--m) * 2);
  right: calc(var(--m) * 2);
  bottom: calc(var(--m) * 2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}
.gate-head {
  position: absolute;
  left: calc(var(--m) * 2);
  right: calc(var(--m) * 2);
  top: calc(var(--m) * 2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}

/* ============================================================
   HEADER + NAV PILL
   ============================================================ */
.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding: calc(var(--m) * 1.25) calc(var(--m) * 2);
  background: color-mix(in oklab, var(--bone) 82%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.top .label { color: var(--ink); }
.top .label.dim { color: var(--muted); }
@media (max-width: 700px) { .top .hide-sm { display: none; } }

.pill {
  position: fixed;
  bottom: calc(var(--m) * 1.5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: min(300px, calc(100vw - var(--m) * 4));
  gap: 1rem;
  background: rgba(17, 16, 14, 0.92);
  color: var(--night-ink);
  border-radius: var(--r-pill);
  padding: 0.72rem 0.8rem 0.72rem 1.1rem;
  min-height: 46px;
  backdrop-filter: blur(6px);
  max-width: calc(100vw - var(--m) * 4);
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--night-ink); flex: none; }
.pill-label {
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
  color: var(--night-ink);
}
.pill-menu {
  border: 0;
  background: rgba(239, 236, 229, 0.12);
  border-radius: var(--r-pill);
  width: 44px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}
.pill-menu:hover { background: rgba(239, 236, 229, 0.22); }
.pill-menu .ico { position: relative; width: 18px; height: 18px; }
/* hamburger-to-X morph: 350ms cubic-bezier(0.645,0.045,0.355,1) rotation,
   250ms opacity, ~50ms stagger (measured burocratik fingerprint) */
.pill-menu .ico span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--night-ink);
  transition:
    transform 350ms cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.pill-menu .ico span:nth-child(1) { top: 5px; }
.pill-menu .ico span:nth-child(2) { top: 11px; transition-delay: 50ms; }
.pill-menu[aria-expanded="true"] .ico span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.pill-menu[aria-expanded="true"] .ico span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); transition-delay: 0ms; }
@media (max-width: 480px) {
  .pill { gap: 0.6rem; padding-left: 0.9rem; }
  .pill-label { max-width: 9rem; font-size: 0.75rem; }
}

/* v1.7 Item 4 (Fitts's law): on fine-pointer desktops the menu toggle grows
   an invisible hit extension from the pill down to the bottom viewport edge,
   across the pill's full width, so an overshooting cursor is caught by the
   screen-edge backstop. The pseudo-element belongs to the button, so clicks
   and hover in the strip ARE button clicks (keyboard order untouched). The
   pill's floating visual is unchanged; coarse pointers keep the inset
   (edge targets reverse to slower on touch). .pill is the button's
   containing block, so left/right:0 spans the whole pill. */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .pill-menu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(var(--m) * 1.5 + 1px); /* the pill's bottom offset, +1 so no dead row survives rounding */
  }
}

/* fullscreen menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: var(--night);
  color: var(--night-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto; /* v1.6: 8 links must stay reachable on short viewports */
  padding: calc(var(--m) * 3) calc(var(--m) * 3) calc(var(--m) * 8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 250ms;
}
.menu.open { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-height: 600px) {
  /* centered flex + overflow clips the top; start-align when short */
  .menu { justify-content: flex-start; }
}
.menu a {
  display: block;
  font-size: clamp(1.75rem, 5.2vw, 3.5rem);
  font-weight: 200;
  letter-spacing: var(--track-tight);
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--night-ink);
  overflow: clip; /* each link is its own clip mask */
  transition: color 150ms;
}
.menu a:hover { color: var(--night-muted); }
.menu .menu-inner { display: block; }
.menu .menu-idx {
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  color: var(--night-muted);
  margin-right: 1rem;
  vertical-align: super;
}
/* open: links rise staggered through their clip masks, 0.5s expo-out, 50ms steps.
   close: overlay fades 250ms (above); inners reset silently after it is hidden. */
.js .menu .menu-inner {
  transform: translateY(112%);
  transition: transform 0s linear 250ms;
}
.js .menu.open .menu-inner {
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.js .menu.open a:nth-child(1) .menu-inner { transition-delay: 0ms; }
.js .menu.open a:nth-child(2) .menu-inner { transition-delay: 50ms; }
.js .menu.open a:nth-child(3) .menu-inner { transition-delay: 100ms; }
.js .menu.open a:nth-child(4) .menu-inner { transition-delay: 150ms; }
.js .menu.open a:nth-child(5) .menu-inner { transition-delay: 200ms; }
.js .menu.open a:nth-child(6) .menu-inner { transition-delay: 250ms; }
.js .menu.open a:nth-child(7) .menu-inner { transition-delay: 300ms; }
.js .menu.open a:nth-child(8) .menu-inner { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu a, .pill-menu .ico span { transition: none !important; }
  .js .menu .menu-inner { transform: none !important; transition: none !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 5.5rem;
  padding-bottom: 5rem; /* clearance for the nav pill */
  position: relative;
}
.hero-kicker {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  /* rule drawn by the span below so it can scaleX in; +1px keeps the box
     the exact height it had with the old 1px border-bottom */
  padding-bottom: calc(var(--s-2) + 1px);
}
.hero-kicker-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline);
  transform-origin: 0% 50%;
}
.hero-grid { margin-top: auto; }
.hero-name {
  font-size: var(--t-giant);
  line-height: 0.82;
  /* v1.9.3 brutality dial-up: rest weight 500 -> 560 (matches the ripple's
     REST), tracking tightened past the display token. */
  font-weight: 560;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-left: -0.05em; /* optical left bleed */
}
.hero-name:focus { outline: none; } /* programmatic focus target after unlock */
.hero-name .row { display: block; }
.hero-name .row.indent { padding-left: clamp(2rem, 12vw, 14rem); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-4);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-2);
}
.hero-meta div { display: grid; gap: 0.35rem; }
.hero-meta .value { font-size: 0.9375rem; font-weight: 450; }
.portrait-mask { display: block; line-height: 0; }
@media (min-width: 701px) {
  /* v1.6 P2-7: the portrait's bottom edge locks to the meta divider rule
     below the grid: its margin box ends at the grid edge, its photo runs
     the s-4 gap and lands exactly on the hero-meta border-top */
  .portrait-mask { margin-bottom: calc(var(--s-4) * -1); }
}
.hero-portrait {
  width: clamp(9rem, 22vw, 19rem);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
@media (max-width: 700px) {
  .hero { padding-top: 3.5rem; padding-bottom: 7rem; }
  .hero-kicker { display: none; } /* mobile hero is already balanced */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { width: min(50vw, 14rem); margin-top: var(--s-3); }
}

/* ============================================================
   WHO AM I : manifesto rows
   ============================================================ */
.manifesto { margin-top: 0; }
.man-row {
  display: grid;
  grid-template-columns: minmax(3rem, 6rem) 1fr;
  gap: var(--gap);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--hairline);
}

/* v1.2: who-grid pairs the manifesto with the compact 2023-2025 timeline */
.who-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.who-grid > * { min-width: 0; }
.tl-col {
  border-top: 1px solid var(--hairline);
}
.tl-item {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6rem) 1fr;
  gap: var(--s-1) var(--gap);
  padding: clamp(1rem, 2.4vw, 1.5rem) 0;
  border-bottom: 1px solid var(--hairline);
}
.tl-year {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 240;
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.tl-item h3 {
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: var(--track-tight);
  align-self: center;
}
.tl-item ul { grid-column: 2; }
.tl-item li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
  max-width: 42ch;
}
.tl-item li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.66em;
  width: 0.45rem; height: 1px;
  background: var(--ink);
}
@media (max-width: 900px) {
  .who-grid { grid-template-columns: 1fr; }
  .tl-item li { max-width: 58ch; }
}
.man-row:last-child { border-bottom: 1px solid var(--hairline); }
.man-num {
  font-size: var(--t-title);
  font-weight: 240;
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.man-body h2 {
  font-size: var(--t-title);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.man-body p { max-width: 58ch; color: var(--muted); }
@media (max-width: 700px) {
  .man-row { grid-template-columns: 3rem 1fr; }
}

/* ============================================================
   TIMELINE : giant years
   ============================================================ */
.year-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 1.4fr;
  gap: var(--gap);
  align-items: start;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--hairline);
}
.year-row:last-child { border-bottom: 1px solid var(--hairline); }
.year-num {
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 240;
  letter-spacing: var(--track-display);
  line-height: 0.85;
  margin-left: -0.04em;
}
.year-body h3 { font-size: 1.25rem; font-weight: 550; letter-spacing: var(--track-tight); margin-bottom: var(--s-2); }
.year-body li {
  position: relative;
  padding-left: 1.4rem;
  max-width: 58ch;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.year-body li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.66em;
  width: 0.55rem; height: 1px;
  background: var(--ink);
}
@media (max-width: 700px) {
  .year-row { grid-template-columns: 1fr; }
  .year-num { margin-bottom: var(--s-1); }
}

/* ============================================================
   WORK CARDS (staggered pairs, burocratik meta rows)
   ============================================================ */
.card-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.card-pair .card:nth-child(even) { transform: translateY(clamp(1.5rem, 6vw, 5rem)); }
.card figure { overflow: hidden; }
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.7s var(--ease-expo);
}
.card.tall img { aspect-ratio: 3 / 4; }
.card a:hover img, .card:hover img { transform: scale(1.03); }
.card-meta {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  padding-top: 0.75rem;
}
.card-meta .name { font-size: 1.0625rem; font-weight: 550; letter-spacing: var(--track-tight); }
.card-meta .tag { margin-left: auto; }
.card-desc { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; max-width: 52ch; }
@media (max-width: 700px) {
  .card-pair { grid-template-columns: 1fr; }
  .card-pair .card:nth-child(even) { transform: none; }
}

/* ============================================================
   DARK CASE SECTIONS
   ============================================================ */
.dark {
  background: var(--night);
  color: var(--night-ink);
}
.dark .body-copy { color: var(--night-ink); }
.dark ::selection { background: var(--night-ink); color: var(--night); }

.case-meta-row {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: var(--s-2) clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2rem, 6vw, 4rem);
}
.case-meta-row div { display: grid; gap: 0.3rem; align-content: start; }
.case-meta-row .value { font-size: 0.9375rem; font-weight: 450; }
@media (max-width: 700px) { .case-meta-row { grid-template-columns: repeat(2, 1fr); } }

.full-bleed { width: 100%; overflow: clip; } /* crops the parallax overscan */
.full-bleed img { width: 100%; }

/* v1.7 Item 2 (peak-end rule): the pool-party photograph is the designated
   visual peak: the last, largest, most vibrant image before the wall. At
   desktop widths its natural render already exceeds the viewport, so the
   amplification is air (a longer pause above) plus mobile presence, where
   the natural 2:3 render was under-scaled at ~260px tall. */
.full-bleed.peak { margin-top: clamp(3rem, 8vw, 6rem); }
@media (max-width: 700px) {
  .full-bleed.peak { height: 68svh; }
  .full-bleed.peak img { height: 100%; object-fit: cover; }
}

.pull {
  font-size: var(--t-display);
  font-weight: 240;
  letter-spacing: var(--track-tight);
  line-height: 1.02;
  max-width: 18ch;
  text-wrap: balance;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.split > * { min-width: 0; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* three-phase columns (Zouk LA) */
.phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.phase {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-2);
}
.phase h3 { font-size: 1rem; font-weight: 550; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 0.6rem; }
.phase p { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 700px) { .phases { grid-template-columns: 1fr; } }

/* checklist (ZAMNA / Partners) */
.ticks li {
  border-top: 1px solid var(--night-hairline);
  padding: 0.9rem 0;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-1);
  color: var(--night-ink);
  max-width: 60ch;
}
.ticks li:last-child { border-bottom: 1px solid var(--night-hairline); }
.ticks .idx { font-size: var(--t-meta); font-weight: 550; letter-spacing: var(--track-label); color: var(--night-muted); padding-top: 0.2em; }
.light-ticks li { border-color: var(--hairline); color: var(--ink); }
.light-ticks .idx { color: var(--muted); }

/* ============================================================
   ACTIVATION ROWS (archive-table)
   ============================================================ */
.act-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(9rem, 16rem) 1fr;
  gap: var(--gap);
  padding: clamp(1.25rem, 3.5vw, 2rem) 0;
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.act-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.act-row .idx { font-size: var(--t-meta); font-weight: 550; letter-spacing: var(--track-label); color: var(--muted); padding-top: 0.4em; }
.act-row h3 { font-size: clamp(1.25rem, 2.4vw, 1.875rem); font-weight: 500; letter-spacing: var(--track-tight); line-height: 1.05; text-transform: uppercase; }
.act-row p { color: var(--muted); font-size: 0.9375rem; max-width: 58ch; }
@media (max-width: 700px) {
  .act-row { grid-template-columns: 2.5rem 1fr; }
  .act-row p { grid-column: 2; }
}
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 700px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   PROJECT CASES (Client / Year / Services)
   ============================================================ */
.case {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(2.5rem, 7vw, 5rem) 0;
  border-top: 1px solid var(--hairline);
  align-items: start;
}
.case:nth-child(even) .case-media { order: 2; }
.case-title {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: var(--track-display);
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.case-facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: var(--s-2) clamp(1.5rem, 4vw, 3.5rem);
  margin-bottom: var(--s-3);
}
.case-facts div { display: grid; gap: 0.3rem; }
.case-facts .value { font-size: 0.9375rem; font-weight: 450; }
.case-story { color: var(--muted); max-width: 58ch; }
.case-story + .case-story { margin-top: var(--s-2); }
.case-media img { width: 100%; object-fit: cover; }
@media (max-width: 820px) {
  .case { grid-template-columns: 1fr; }
  .case:nth-child(even) .case-media { order: 0; }
  .case-media { max-width: 32rem; }
}

/* ============================================================
   REFERENCES rows
   ============================================================ */
.ref-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: baseline;
  padding: clamp(1.25rem, 3.5vw, 2rem) 0;
  border-top: 1px solid var(--hairline);
}
.ref-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.ref-row .name {
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  font-weight: 240;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1;
}
.ref-row .role { text-align: right; }
@media (max-width: 700px) {
  .ref-row { grid-template-columns: 1fr; }
  .ref-row .role { text-align: left; }
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact { padding-bottom: clamp(5rem, 10vw, 7rem); }
.contact-title {
  font-size: var(--t-giant);
  font-weight: 500;
  letter-spacing: var(--track-display);
  line-height: 0.82;
  text-transform: uppercase;
  margin-left: -0.05em;
  margin-bottom: clamp(2.5rem, 7vw, 5rem);
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4) var(--gap);
  border-top: 1px solid var(--night-hairline);
  padding-top: var(--s-4);
}
.contact-grid div { display: grid; gap: 0.4rem; align-content: start; }
.contact-grid .value {
  font-size: clamp(1rem, 1.8vw, 1.375rem);
  font-weight: 450;
  letter-spacing: var(--track-tight);
  overflow-wrap: anywhere;
}
.contact-grid a { border-bottom: 1px solid var(--night-hairline); transition: border-color var(--dur-micro) var(--ease-quart); }
.contact-grid a:hover { border-color: var(--night-ink); }
.contact-foot {
  /* v1.6 P2-5: 1fr auto 1fr centers the GPS mark on the true page
     centerline instead of space-between's width-dependent midpoint */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: clamp(3rem, 8vw, 6rem);
}
.contact-foot .label:nth-child(2) { text-align: center; }
.contact-foot .label:nth-child(3) { text-align: right; }
@media (max-width: 700px) {
  .contact-foot { grid-template-columns: 1fr; }
  .contact-foot .label:nth-child(2), .contact-foot .label:nth-child(3) { text-align: left; }
}
.contact-foot .label { color: var(--night-label); }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }

/* press names row (media section) */
.press {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4);
}
.press span {
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--night-muted);
}

/* scroll cue */
.cue { display: inline-flex; align-items: center; gap: 0.6rem; }
.cue::after {
  content: '';
  width: 1px;
  height: 2.2rem;
  background: var(--ink);
  display: inline-block;
  animation: cue 1.6s var(--ease-quart) infinite;
  transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .cue::after { animation: none; } }

/* ============================================================
   v1.3 : THE UNIVERSE WALL (anchored constellation in a specimen case)
   Scale ladder by role depth: anchor ~220px/w750, t2 ~64px/w400,
   t3 ~27px/w200. Hierarchy carried by size + weight, never opacity.
   ============================================================ */
.wall-sec {
  /* specimen case: bone gutter 8px -> 20px on all sides of the panel */
  padding-left: clamp(0.5rem, 1.4vw, 1.25rem);
  padding-right: clamp(0.5rem, 1.4vw, 1.25rem);
}
.wall-case {
  background: var(--night);
  color: var(--night-ink);
  border-radius: var(--r-page);
  overflow: clip;
  /* v1.6 P2-1: bottom pad reserves the floating pill's zone (46px pill +
     offset + gutter) so no wordmark or legend rests under it when the
     panel bottom sits at the viewport bottom */
  padding: clamp(1.25rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem) calc(clamp(1rem, 2.2vw, 1.75rem) + 4.75rem);
}
.wall {
  /* display layer hangs one column in from the eyebrow/hint layer */
  padding-left: calc(100% / 24);
  display: flex;
  flex-direction: column;
  row-gap: clamp(0.6rem, 1.6vw, 1.4rem);
  margin-top: clamp(1.5rem, 3.5vw, 3rem);
}
.wall-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(1.25rem, 3.4vw, 3.25rem);
  row-gap: clamp(0.4rem, 1vw, 0.8rem);
  padding-left: calc(var(--rag, 0) * 100% / 24); /* composed left rag */
  /* NB: no contain:layout here; it forms a stacking context that would trap
     the hovered entry's z-lift beneath the ghost veil */
}
.wall-line-anchor {
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-left: 0;
}
.wall-minor {
  /* tier-3 minor constellation, right-hand cluster beside the anchor */
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.45rem, 1.1vw, 0.9rem);
  padding-top: clamp(0.75rem, 2.4vw, 2.25rem);
  max-width: 34%;
}
.wall-entry {
  border: 0;
  background: none;
  cursor: pointer;
  text-transform: uppercase;
  text-align: left;
  color: var(--night-ink);
  transition: color var(--dur-micro) var(--ease-quart);
}
.wall-entry:hover { color: #ffffff; }
.wall-entry:focus-visible { outline: 1px solid var(--night-ink); outline-offset: 6px; }
.wall-entry.t1 {
  font-size: clamp(4rem, 15.2vw, 13.75rem);
  font-weight: 750;
  letter-spacing: -0.06em;
  line-height: 0.85;
  margin-left: -0.04em; /* optical left alignment at display size */
}
.wall-entry.t2 {
  font-size: clamp(1.5rem, 4.45vw, 4rem);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  line-height: 1.05;
}
.wall-entry.t3 {
  font-size: clamp(0.875rem, 1.9vw, 1.75rem);
  font-weight: 200;
  letter-spacing: var(--track-tight);
  line-height: 1.3;
}
/* proximity ghost: single class toggle, hovered entry exempt.
   Implemented as ONE translucent night veil over the wall with the hovered
   name lifted above it: composites to the same 0.55 dim, but costs a single
   element fade instead of 17 display-glyph repaints per frame. */
.wall { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .wall .wall-entry { position: relative; }
  .wall .wall-entry:hover { z-index: 2; }
  .wall-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(13, 12, 10, 0.45); /* night at 0.45 = 0.55 composite dim */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-quart);
  }
  .wall.is-hovering .wall-veil { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .wall-veil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-veil { transition: none !important; }
}
.wall-entry.is-open { opacity: 0.55; } /* source entry dims while its overlay is up */
.wall-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-2);
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
}
.wall-hint { color: var(--night-label); }
.wall-hint .hint-coarse { display: none; }
@media (hover: none), (pointer: coarse) {
  .wall-hint .hint-fine { display: none; }
  .wall-hint .hint-coarse { display: inline; }
}
.wall-legend {
  display: grid;
  gap: 0.35rem;
  justify-items: end;
  text-align: right;
}
.wall-legend .label { color: var(--night-ink); }
.wall-legend .legend-rule { color: var(--night-label); }
@media (max-width: 700px) {
  /* linearized wall must read as the hierarchy it claims: anchor, led, then
     supported. The anchor line dissolves so ZOUK and the minor cluster become
     direct column items, and the supported tier orders to the end. */
  .wall-line-anchor { display: contents; }
  .wall-minor { margin-left: 0; max-width: 100%; padding-top: 0.5rem; order: 1; }
  .wall-entry.t3 { padding-block: 0.3rem; } /* tap target */
  .wall-foot { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .wall-legend { justify-items: start; text-align: left; }
}

/* inline reveal row (tap / keyboard, entries without an overlay) */
.wall-inline {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: 1px solid var(--night-hairline);
  border-bottom: 1px solid var(--night-hairline);
  margin: 0.9rem 0; /* v1.6 P2-3: air between the box and the wordmarks */
}
.wall-inline img {
  width: clamp(5.5rem, 16vw, 9rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--night-2);
}
.wall-inline img[hidden] { display: none; }
.wall-inline .wall-inline-tag {
  font-size: 0.9375rem;
  font-weight: 450;
  letter-spacing: var(--track-tight);
  color: var(--night-ink);
  text-transform: none;
}

/* floating cursor preview (desktop; shared by wall + project index) */
.wall-float {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  width: clamp(13rem, 18vw, 17rem);
}
.wall-float img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--night-2);
}
.wall-float img[hidden] { display: none; }
.wall-float .wall-tag {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 0.7rem;
  background: rgba(17, 16, 14, 0.92);
  color: var(--night-ink);
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
/* the display rules above outrank the UA [hidden] rule; restate it */
.wall-float .wall-tag[hidden] { display: none; }

/* ============================================================
   v1.2 : OVERLAY (progressive disclosure for absorbed sections)
   ============================================================ */
.wall-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--m) * 2);
}
.wall-overlay[hidden] { display: none; }
.overlay-scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 10, 0.72);
}
.overlay-panel {
  position: relative;
  width: min(58rem, 100%);
  max-height: min(85vh, 52rem);
  overflow-y: auto;
  background: var(--night);
  color: var(--night-ink);
  border: 1px solid var(--night-hairline);
  border-radius: var(--r-page);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  border-bottom: 1px solid var(--night-hairline);
  padding-bottom: var(--s-2);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.overlay-head .label { color: var(--night-muted); }
.overlay-close {
  border: 1px solid var(--night-hairline);
  background: transparent;
  color: var(--night-ink);
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem;
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-quart);
}
.overlay-close:hover { border-color: var(--night-ink); }
.overlay-close:focus-visible { outline: 1px solid var(--night-ink); outline-offset: 4px; }

/* overlay content (deck copy verbatim, night-styled) */
.wall-detail[hidden] { display: none; }
.ov-block { padding: clamp(1rem, 2.5vw, 1.75rem) 0; }
.ov-block:first-child { padding-top: 0; }
.ov-block + .ov-block { border-top: 1px solid var(--night-hairline); }
.ov-block > .label { color: var(--night-muted); }
.ov-title {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 500;
  letter-spacing: var(--track-display);
  line-height: 0.96;
  text-transform: uppercase;
  margin: 0.5rem 0 var(--s-3);
}
.ov-copy { max-width: 62ch; color: var(--night-ink); }
.ov-copy + .ov-copy { margin-top: var(--s-2); }
.ov-fig { margin-top: var(--s-3); }
.ov-fig img { width: 100%; background: var(--night-2); }
.ov-fig-tall { max-width: 24rem; }
.ov-phases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: var(--s-3);
}
.ov-phases h4 {
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-top: 1px solid var(--night-hairline);
  padding-top: var(--s-1);
  margin-bottom: 0.5rem;
}
.ov-phases p { color: var(--night-muted); font-size: 0.875rem; }
@media (max-width: 700px) { .ov-phases { grid-template-columns: 1fr; } }
.ov-press { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); }
.ov-press span {
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--night-muted);
}
.ov-ticks { margin-top: var(--s-3); }
.ov-ticks li {
  border-top: 1px solid var(--night-hairline);
  padding: 0.8rem 0;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-1);
  color: var(--night-ink);
  max-width: 60ch;
}
.ov-ticks li:last-child { border-bottom: 1px solid var(--night-hairline); }
.ov-ticks .tick-idx {
  font-size: var(--t-meta);
  font-weight: 550;
  letter-spacing: var(--track-label);
  color: var(--night-muted);
  padding-top: 0.2em;
}

/* ============================================================
   v1.2 : ADDITIONAL PROJECTS INDEX (accordion work-list)
   ============================================================ */
.index { border-top: 1px solid var(--hairline); }
.idx-row { border-bottom: 1px solid var(--hairline); }
.idx-title { font-size: inherit; font-weight: inherit; }
.idx-head {
  display: grid;
  grid-template-columns: 3rem 1.2fr 0.7fr 6.5rem 0.9fr 2.5rem;
  align-items: baseline;
  gap: var(--gap);
  /* wash breathes 12px past the text without moving it at rest */
  width: calc(100% + 1.5rem);
  margin-inline: -0.75rem;
  padding: clamp(1rem, 2.6vw, 1.6rem) 0.75rem;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 180ms var(--ease-quart);
}
/* v1.4 night-wash inversion (Phantom card-hover, de-hued): instant-feel
   color wash + metadata opacity flip. Night/bone only, no hue. */
.idx-head:hover, .idx-head:focus-visible { background: var(--night); }
.idx-head:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
.idx-no { color: var(--muted); transition: color 180ms var(--ease-quart); }
.idx-name {
  font-size: clamp(1.375rem, 2.8vw, 2.25rem);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  line-height: 1;
  text-transform: uppercase;
  transition: color 180ms var(--ease-quart);
}
.idx-meta { color: var(--muted); transition: color 180ms var(--ease-quart); }
.idx-head:hover .idx-name, .idx-head:focus-visible .idx-name { color: var(--night-ink); }
.idx-head:hover .idx-no, .idx-head:focus-visible .idx-no,
.idx-head:hover .idx-meta, .idx-head:focus-visible .idx-meta { color: var(--night-ink); }
.idx-head:hover .idx-plus::before, .idx-head:hover .idx-plus::after,
.idx-head:focus-visible .idx-plus::before, .idx-head:focus-visible .idx-plus::after { background: var(--night-ink); }
/* v1.7 Item 3 (information scent): one deck-true outcome line per row,
   visible collapsed, so the row's value is predictable before expanding.
   Mono meta voice, but sentence case + near-flat tracking so it reads as
   an outcome line, distinct from the uppercase wide-tracked labels. */
.idx-scent {
  grid-column: 2 / 6;
  grid-row: 2;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-meta);
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-top: 0.5rem;
  transition: color 180ms var(--ease-quart);
}
.idx-head:hover .idx-scent, .idx-head:focus-visible .idx-scent { color: var(--night-label); }
.idx-plus {
  position: relative;
  width: 14px; height: 14px;
  justify-self: end;
  align-self: center;
  /* NB: no explicit grid-row here. The scent line (definite 2 / 2-6) is
     placed in the definite pass; the plus then auto-flows to row 1, col 6.
     An explicit grid-row would promote it to the locked-row pass and shove
     every auto-placed cell one column right. */
}
.idx-plus::before, .idx-plus::after {
  content: '';
  position: absolute;
  background: var(--ink);
  transition: transform 350ms var(--ease-quart);
}
.idx-plus::before { left: 0; top: 6px; width: 14px; height: 2px; }
.idx-plus::after { left: 6px; top: 0; width: 2px; height: 14px; }
.idx-head[aria-expanded="true"] .idx-plus::before { transform: rotate(90deg); }
.idx-head[aria-expanded="true"] .idx-plus::after { transform: rotate(90deg); }
.idx-body { overflow: clip; }
.idx-body[hidden] { display: none; }
.idx-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0.5rem 0 clamp(1.5rem, 4vw, 2.5rem) 3rem;
  align-items: start;
}
.idx-inner > * { min-width: 0; }
.idx-fig img { width: 100%; object-fit: cover; background: var(--bone-2); }
@media (max-width: 820px) {
  .idx-head { grid-template-columns: 2.25rem 1fr 2rem; }
  .idx-meta { display: none; }
  .idx-scent { grid-column: 2 / 3; margin-top: 0.4rem; } /* v1.7: the scent survives where the meta columns don't */
  .idx-inner { grid-template-columns: 1fr; padding-left: 2.25rem; }
  .idx-fig { max-width: 26rem; }
}

/* ============================================================
   v1.2 : REFERENCES, one hairline line
   ============================================================ */
.ref-line {
  display: grid;
  /* v1.6 P2-4: minmax(0,1fr) pins the four names to truly even tracks
     (min-content can't widen a column) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3) var(--gap);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}
.ref-line div { display: grid; gap: 0.4rem; align-content: start; }
/* v1.6 P2-4: every role reserves two lines so the row keeps one height
   whether a role wraps (National Rugby League) or not */
.ref-line .label { min-height: calc(2em * 1.55); }
.ref-name {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 450;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1.05;
}
@media (max-width: 820px) { .ref-line { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .idx-plus::before, .idx-plus::after, .wall-entry, .overlay-close { transition: none !important; }
  .idx-head, .idx-name, .idx-no, .idx-meta { transition: none !important; }
}

/* ============================================================
   v1.4 : PHANTOM ABSORPTION (decode primitive, mono chrome, dissolve)
   ============================================================ */
/* decode line spans (Who intro): block lines during the burst, then the
   original text node is restored so natural wrapping returns. nowrap stops
   wider scramble glyphs from re-wrapping the line mid-burst (no layout jump);
   the transient tail overhang is invisible against the page margin. */
.dline { display: block; white-space: nowrap; }

/* wall role tag (inline reveal) joins the mono meta layer at label size */
.wall-inline .wall-inline-tag {
  font-size: var(--t-meta);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--night-ink);
}

/* mono is vendored at a single 400: neutralize heavier label weights that
   would otherwise synthesize a faux bold */
.sec-head .num,
.menu .menu-idx,
.ov-press span,
.ov-ticks .tick-idx,
.wall-float .wall-tag {
  font-weight: 400;
}

/* portrait particle dissolve (desktop-only overlay; zero layout impact).
   The canvas carries the img's exact filter so the photo pass is
   pixel-identical to the <img> at handoff. */
.portrait-mask { position: relative; }
.portrait-canvas {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  filter: grayscale(1) contrast(1.02);
}

/* ============================================================
   v1.9 : THE FILMS, in-view ambient loops over their stills
   ============================================================ */
/* The img stays in flow and defines the box; the video overlays it
   (zero layout impact) and fades in on its first playing frame. */
.has-film { position: relative; }
.has-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-expo), transform 0.7s var(--ease-expo);
}
.has-film video.is-playing { opacity: 1; }
/* Cards keep their hover response while a film plays: mirror the img
   zoom onto the overlaying video (same scale, duration, easing). */
.card a:hover .has-film video, .card:hover .has-film video { transform: scale(1.03); }
/* The films toggle: the one WCAG 2.2.2 pause mechanism for every film.
   A .label in the top bar that happens to be a button; mono meta voice,
   no new chrome language. */
.films-toggle {
  appearance: none;
  background: none;
  border: 0;
  /* padding + negative margin: 44px-class hit area (the Fitts/FFitts floor,
     [[hci-evidence-foundations]]) with zero visual footprint change. */
  padding: 0.75rem 0.5rem;
  margin: -0.75rem -0.5rem;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}
.films-toggle:hover { color: var(--ink); }