/* ============================================================
   RAHMAAN PHILLIP — REFERENCE DESIGN SYSTEM
   Shared CSS across all reference pages. Single source of truth.
   ============================================================ */

/* ---------- HERO DISPLAY FACE — Beautiful Freak (Simon Stratford) ---------- */
@font-face {
  font-family: 'Beautiful Freak';
  src: url('/assets/fonts/beautiful-freak.woff2') format('woff2'),
       url('/assets/fonts/beautiful-freak.woff') format('woff'),
       url('/assets/fonts/beautiful-freak.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS — BUILD-PROMPT-NEW-ERA §4.1 (canonical) ---------- */
:root {
  /* surfaces — warm BONE, three depths (flipped from near-black → crimson+bone) */
  --ink:           #F3ECDF;       /* base page surface (bone) */
  --ink-2:         #EAE0CF;       /* raised */
  --ink-3:         #DFD3BD;       /* raised + (cards, inputs) */

  /* dark anchor — charcoal/ink for dark marks, dark sections, on-crimson pops */
  --char:          #1B130E;
  --char-2:        #2A1F17;

  /* type / accent — bone is the LIGHT colour (text on dark/crimson/photo) */
  --bone:          #F6F1E7;
  --bone-mid:      #6B6253;       /* secondary text on bone */
  --bone-dim:      #8E8576;       /* tertiary text on bone */

  /* hairlines — dark on bone, 9–20% */
  --hair:          rgba(27,19,14,0.14);
  --hair-soft:     rgba(27,19,14,0.09);
  --hair-strong:   rgba(27,19,14,0.20);

  /* the one red — CRIMSON, used as fill and outline */
  --ox:            #BE1A1A;
  --ox-deep:       #7E0E0E;
  --ox-bright:     #D62222;       /* hover */

  /* THE ONE BLUE — hero word "water" ONLY. Used nowhere else. */
  --water:         #6FA8FF;   /* light blue (teal #3EC5AE tried + reverted; original royal #3E7BFA) */

  /* type families — monospace retired; labels are Inter Tight */
  --ff-display:    'Fraunces', 'Times New Roman', serif;
  --ff-hero:       'Beautiful Freak', 'Fraunces', 'Times New Roman', serif;  /* hero headlines */
  --ff-body:       'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-label:      'Inter Tight', sans-serif;   /* eyebrows/labels — replaces the old mono */

  /* type scale */
  --fs-hero:       clamp(56px, 10vw, 168px);
  --fs-display:    clamp(44px, 7vw, 120px);
  --fs-h2:         clamp(32px, 4.5vw, 72px);
  --fs-h3:         clamp(24px, 2.6vw, 40px);
  --fs-lede:       clamp(19px, 1.5vw, 24px);
  --fs-body:       18px;
  --fs-label:      13px;

  /* rhythm */
  --measure:       66ch;
  --content-max:   1180px;
  --gutter:        clamp(20px, 4vw, 56px);
  --section:       clamp(96px, 14vh, 180px);

  /* motion */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine:     cubic-bezier(0.2, 0.7, 0.05, 1);

  /* ---------- LEGACY ALIASES — keep the 3k-line sheet working,
       remapped onto the new palette so colour/type changes flow through ---------- */
  --bone-2:        #2A2018;       /* now a dark shade (was light) */
  --on-ink:        #221C15;       /* dark body text on bone */
  --on-ink-mid:    #6B6253;       /* secondary text + subtle dividers */
  --on-ink-dim:    #948B7C;       /* tertiary text */
  --on-bone:       #1A1815;
  --on-bone-mid:   #5C5550;
  --on-bone-dim:   #8E867D;
  --rust:          #B8421C;
  --gold:          #B8945C;
  --moss:          #5B6B3A;
  --ff-sans:       var(--ff-body);
  --fs-mega:       clamp(96px, 18vw, 280px);
  --fs-h1:         clamp(40px, 6vw, 96px);
  --fs-body-lg:    var(--fs-lede);
  --fs-small:      14px;
  --fs-mono:       var(--fs-label);   /* legacy label size → 13px */
  --fs-mono-sm:    11px;
  --lh-display:    0.86;
  --lh-headline:   0.98;
  --lh-body:       1.55;
  --lh-prose:      1.7;
  --grid-cols:     12;
  --grid-gap:      24px;
  --section-spacing: var(--section);
  --ease-cinema:   var(--ease-cine);
  --ease-expo:     cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
ul, ol, li { list-style: none; }

/* ---------- IMAGE TREATMENT (DARK-REFRESH §2) — one shared graded look ----------
   Unifies mixed phone/AI photography: slight desaturation (~85%), lifted
   contrast, crushed blacks. Wrap an <img> in .img-treat--frame for the canonical
   grade plus a crushed-black gradient resolving into the section background. */
.img-treat { filter: saturate(0.85) contrast(1.08) brightness(0.9); }
.img-treat--frame { position: relative; overflow: hidden; }
.img-treat--frame > img,
.img-treat--frame > picture > img { filter: saturate(0.85) contrast(1.08) brightness(0.9); width: 100%; height: 100%; object-fit: cover; display: block; }
.img-treat--frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, rgba(14,13,11,0.62) 100%);
}

/* ---------- TEXTURE ---------- */
body::before {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 199;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0,0,0,0.35) 100%);
}

/* ---------- GRID OVERLAY ---------- */
.grid-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 198; display: none;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent calc((100% - 11 * var(--grid-gap)) / 12),
    rgba(184,14,14,0.06) calc((100% - 11 * var(--grid-gap)) / 12),
    rgba(184,14,14,0.06) calc((100% - 11 * var(--grid-gap)) / 12 + 1px),
    transparent calc((100% - 11 * var(--grid-gap)) / 12 + 1px),
    transparent calc((100% - 11 * var(--grid-gap)) / 12 + var(--grid-gap)));
}
.grid-overlay.on { display: block; }

/* ---------- CURSOR — native restored (custom dot retired, NEW-ERA §4.5) ---------- */
.cursor-dot { display: none !important; }

/* ---------- FADE-UP (IntersectionObserver hook — REBUILD §1.2) ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-cine), transform 0.85s var(--ease-cine);
}
.fade-up.is-in { opacity: 1; transform: none; }

/* level 1 — direct children cascade in after the container */
.fade-up > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--ease-cine), transform 0.8s var(--ease-cine);
}
.fade-up > figure { transform: translateY(34px); }   /* images travel a touch further */
.fade-up.is-in > * { opacity: 1; transform: none; }
.fade-up.is-in > *:nth-child(2)    { transition-delay: 0.12s; }
.fade-up.is-in > *:nth-child(3)    { transition-delay: 0.24s; }
.fade-up.is-in > *:nth-child(4)    { transition-delay: 0.36s; }
.fade-up.is-in > *:nth-child(n+5)  { transition-delay: 0.48s; }

/* level 2 — inside the text column: eyebrow, heading, body, cta in sequence
   ([data-magnet] CTAs excluded: GSAP owns their transform) */
.fade-up .who-text   > *:not([data-magnet]),
.fade-up .gaga-head  > *:not([data-magnet]),
.fade-up .sync-text  > *:not([data-magnet]),
.fade-up .shopt-text > *:not([data-magnet]) {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.75s var(--ease-cine), transform 0.75s var(--ease-cine);
}
.fade-up.is-in .who-text   > *:not([data-magnet]),
.fade-up.is-in .gaga-head  > *:not([data-magnet]),
.fade-up.is-in .sync-text  > *:not([data-magnet]),
.fade-up.is-in .shopt-text > *:not([data-magnet]) { opacity: 1; transform: none; }
.fade-up.is-in .who-text   > *:nth-child(1):not([data-magnet]),
.fade-up.is-in .gaga-head  > *:nth-child(1):not([data-magnet]),
.fade-up.is-in .sync-text  > *:nth-child(1):not([data-magnet]),
.fade-up.is-in .shopt-text > *:nth-child(1):not([data-magnet]) { transition-delay: 0.20s; }
.fade-up.is-in .who-text   > *:nth-child(2):not([data-magnet]),
.fade-up.is-in .gaga-head  > *:nth-child(2):not([data-magnet]),
.fade-up.is-in .sync-text  > *:nth-child(2):not([data-magnet]),
.fade-up.is-in .shopt-text > *:nth-child(2):not([data-magnet]) { transition-delay: 0.32s; }
.fade-up.is-in .who-text   > *:nth-child(3):not([data-magnet]),
.fade-up.is-in .gaga-head  > *:nth-child(3):not([data-magnet]),
.fade-up.is-in .sync-text  > *:nth-child(3):not([data-magnet]),
.fade-up.is-in .shopt-text > *:nth-child(3):not([data-magnet]) { transition-delay: 0.44s; }
.fade-up.is-in .who-text   > *:nth-child(n+4):not([data-magnet]),
.fade-up.is-in .gaga-head  > *:nth-child(n+4):not([data-magnet]),
.fade-up.is-in .sync-text  > *:nth-child(n+4):not([data-magnet]),
.fade-up.is-in .shopt-text > *:nth-child(n+4):not([data-magnet]) { transition-delay: 0.56s; }

/* auto-instrumented chapter reveals (subpages — applied by site.js) */
.rv-auto {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.85s var(--ease-cine), transform 0.85s var(--ease-cine);
}
.rv-auto.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up > *,
  .fade-up .who-text > *, .fade-up .gaga-head > *,
  .fade-up .sync-text > *, .fade-up .shopt-text > *,
  .rv-auto { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   SITE NAV — persistent across every page (NEW-ERA §6)
   Wordmark left · links right · oxblood Book Now.
   Transparent over the hero, solid ink + hairline once scrolled.
   ============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(10px, 1.5vh, 14px) var(--gutter);
  /* --navp: scroll intro progress (0 = top of homepage, 1 = scrolled / subpages).
     Banner is invisible at the top and fades to cream as you scroll. */
  background: rgba(243, 236, 223, var(--navp, 1));
  border-bottom: 1px solid rgba(27, 19, 14, calc(0.14 * var(--navp, 1)));
  transition: padding 0.4s var(--ease-out);
}
/* links + CTA hidden at the top of the homepage — only the lockup remains */
.nav-links, .nav-right { opacity: var(--navp, 1); }
.site-nav.nav-at-top .nav-links,
.site-nav.nav-at-top .nav-right { pointer-events: none; }
/* banner is always cream — scrolled state just tightens slightly */
.site-nav.is-solid {
  padding-top: clamp(8px, 1.2vh, 11px);
  padding-bottom: clamp(8px, 1.2vh, 11px);
  border-bottom-color: var(--hair-strong);
}
.nav-mark {
  /* stacked Beautiful Freak lockup — RAHMAAN (ink) over PHILLIP. (crimson).
     Authored at the FULL intro size so the glyphs rasterise crisp, then
     SHRUNK into the banner as --navp → 1 (downscaling never blurs).
     The layout box is fixed at the shrunk (banner) size; the large text
     simply overflows it visually at the top of the page. */
  --mark-fs: clamp(72px, 6.6vw, 93px);    /* 3× the banner size */
  display: flex; flex-direction: column;
  font-family: var(--ff-hero); font-weight: 400; font-style: normal;
  font-size: var(--mark-fs); letter-spacing: 0.02em;
  line-height: 0.9;
  color: var(--char); white-space: nowrap;
  width: calc(var(--mark-fs) * 1.33);     /* layout = banner-size lockup */
  height: calc(var(--mark-fs) * 0.6);
  transform-origin: left top;
  transform: translateY(calc((1 - var(--navp, 1)) * 7vh))
             scale(calc(1 - (2 / 3) * var(--navp, 1)));
  will-change: transform;
}
.nav-mark .nm-last { color: var(--ox); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); margin-left: auto; }
.nav-links a {
  font-family: var(--ff-label); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--char);
  opacity: 0.82; position: relative;
  transition: opacity 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.nav-links a:hover { opacity: 1; }
.nav-links a[aria-current="page"] { opacity: 1; color: var(--ox); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-book {
  font-family: var(--ff-label); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 11px 20px; background: var(--ox); color: var(--bone);
  white-space: nowrap;
  transition: background 0.3s var(--ease-out);
}
.nav-book:hover { background: var(--ox-bright); }
.nav-burger {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; background: transparent; cursor: pointer;
}
.nav-burger span { width: 24px; height: 1.5px; background: var(--char); display: block;
  transition: transform 0.3s var(--ease-out); }
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}

/* ---------- CHAPTER FRAME ---------- */
.chap { position: relative; padding: clamp(80px, 12vh, 160px) 0; }
.chap-meta {
  display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--gutter);
  margin-bottom: clamp(40px, 6vh, 72px);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox); flex-wrap: wrap;
}
.chap-meta--bone { color: var(--ox); }
.chap-meta span:first-child::after {
  content: '↘'; margin-left: 8px; font-family: var(--ff-label); opacity: 0.5;
}

/* ---------- HERO ---------- */
.chap-hero {
  min-height: 100vh;
  min-height: 100svh;
  /* top pad clears the 3× nav lockup at scroll-top: 7vh drop + two lines of
     .nav-mark --mark-fs (line-height 0.9 ⇒ ×1.8) + nav padding/breathing room.
     Keep in sync with .nav-mark if its size or intro transform changes. */
  padding: calc(7vh + clamp(72px, 6.6vw, 93px) * 1.8 + 40px) 0 clamp(40px, 7vh, 88px);
  display: flex; flex-direction: column;
}
.hero-wrap {
  flex: 1; display: grid; grid-template-columns: 1fr minmax(260px, 360px);
  gap: var(--grid-gap); padding: 0 var(--gutter); align-items: end;
  position: relative; margin-top: clamp(40px, 8vh, 100px);
}
.hero-display {
  font-family: var(--ff-display); font-size: var(--fs-hero); font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  line-height: var(--lh-display); letter-spacing: -0.045em; color: var(--on-ink);
  grid-column: 1 / -1;
}
.hero-display .line { display: block; will-change: transform; }
.hero-display em {
  font-style: italic; color: var(--ox);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.hero-display sup {
  font-size: 0.35em; vertical-align: top; font-style: normal;
  color: var(--ox-bright); font-family: var(--ff-label); font-weight: 500; margin-left: 4px;
}
.hero-aside {
  grid-column: 1 / -1; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--grid-gap);
  margin-top: clamp(40px, 6vh, 80px); padding-top: 24px;
  border-top: 1px solid var(--hair); align-items: end;
}
.hero-aside p {
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-ink-mid); line-height: 1.85; max-width: 56ch;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-self: end; }

/* ---------- BUTTONS ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px; background: var(--ox); color: var(--bone);
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
  position: relative; overflow: hidden; isolation: isolate;
  will-change: transform; transition: background 0.32s var(--ease-out);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0; background: var(--ink);
  transform: translateY(100%); transition: transform 0.5s var(--ease-cinema); z-index: -1;
}
.btn-primary:hover { color: var(--bone); }
.btn-primary:hover::before { transform: translateY(0); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 24px; border: 1px solid var(--on-ink-mid); color: var(--on-ink);
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
  transition: all 0.32s var(--ease-out);
}
.btn-ghost:hover { background: var(--on-ink); color: var(--ink); }

/* ---------- HERO CREDITS ---------- */
.hero-foot {
  margin-top: clamp(40px, 6vh, 72px); padding: 24px var(--gutter) 0;
  border-top: 1px solid var(--hair);
}
.hero-credits {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mid);
}
.hero-credits li { position: relative; padding-right: 32px; }
.hero-credits li:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 4px; height: 4px; background: var(--ox); transform: translateY(-50%);
}
@media (max-width: 900px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .hero-aside { grid-template-columns: 1fr; gap: 24px; }
  .hero-cta { justify-self: start; }
  .hero-credits { gap: 16px; }
  .hero-credits li { padding-right: 16px; }
}

/* ---------- MANIFESTO BLOCK ---------- */
.chap-manifesto {
  background: var(--ox); color: var(--bone);
  padding: clamp(100px, 16vh, 220px) 0; position: relative; overflow: hidden;
}
.chap-manifesto .chap-meta { color: var(--bone); opacity: 0.7; }
.chap-manifesto::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--ink); opacity: 0.3;
}
.mani-wrap { padding: 0 var(--gutter); position: relative; }
.mani-display {
  font-family: var(--ff-display); font-size: var(--fs-mega); font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  line-height: var(--lh-display); letter-spacing: -0.05em; color: var(--bone);
}
.mani-display span { display: block; will-change: transform; }
.mani-display em {
  color: var(--ink); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.mani-attrib {
  margin-top: clamp(40px, 6vh, 80px); padding-top: 24px;
  border-top: 1px solid rgba(242,237,227,0.3);
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone); opacity: 0.7;
}

/* ---------- SIGIL ---------- */
.chap-sigil { padding: clamp(120px, 18vh, 240px) 0; text-align: center; position: relative; }
.sigil {
  font-family: var(--ff-display); font-size: clamp(48px, 12vw, 220px);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  line-height: 1; letter-spacing: -0.05em; color: var(--bone);
  padding: 0 var(--gutter); display: flex; justify-content: center;
  gap: 0.25em; flex-wrap: wrap;
}
.sigil span { display: inline-block; will-change: transform, opacity; }
.sigil span:nth-child(2) { color: var(--ox); }
.sigil span:nth-child(4) { color: var(--ox); }
.chap-sigil cite {
  display: block; margin-top: clamp(40px, 6vh, 64px);
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-ink-mid); font-style: normal;
}

/* ---------- SAMPLER ---------- */
.chap-sampler { padding: clamp(80px, 12vh, 160px) 0; }
.sampler-wrap {
  padding: 0 var(--gutter); display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.sampler-artefact {
  position: relative; aspect-ratio: 1; background: var(--ink-2);
  overflow: hidden; border: 1px solid var(--hair);
}
.sampler-artefact::before, .sampler-artefact::after {
  content: ''; position: absolute; background: var(--ox); z-index: 2;
}
.sampler-artefact::before { top: -2px; left: -2px; width: 24px; height: 24px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.sampler-artefact::after { bottom: -2px; right: -2px; width: 24px; height: 24px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.sampler-artefact img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.1) saturate(0.85); transition: transform 1.6s var(--ease-cinema);
}
.sampler-artefact:hover img { transform: scale(1.04); }
.sampler-info { display: flex; flex-direction: column; gap: 16px; }
.eyebrow {
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ox);
}
.sampler-title {
  font-family: var(--ff-display); font-size: clamp(40px, 5vw, 88px);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  line-height: 0.95; letter-spacing: -0.04em; color: var(--on-ink);
}
.sampler-meta {
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-ink-mid);
}
.sampler-controls { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.play-btn {
  width: 56px; height: 56px; border-radius: 50%; background: var(--ox);
  display: grid; place-items: center; transition: all 0.32s var(--ease-out);
}
.play-btn:hover { background: var(--ox-bright); transform: scale(1.04); }
.play-btn svg { width: 22px; height: 22px; fill: var(--bone); margin-left: 3px; }
.progress-bar { flex: 1; height: 2px; background: var(--on-ink-dim); position: relative; overflow: hidden; }
.progress-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 18%; background: var(--ox); }
.link-arrow {
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-ink);
  display: inline-flex; align-items: center;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  width: fit-content; transition: color 0.32s, gap 0.32s; gap: 6px;
}
.link-arrow:hover { color: var(--ox); gap: 12px; }
@media (max-width: 700px) {
  .sampler-wrap { grid-template-columns: 1fr; }
  .sampler-artefact { max-width: 260px; }
}

/* ---------- CHAPTERS (per-section custom layouts) ---------- */
.chap-chapters { padding: clamp(120px, 16vh, 220px) 0; }
.chap-h {
  padding: 0 var(--gutter);
  font-family: var(--ff-display); font-size: var(--fs-display);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: var(--lh-display); letter-spacing: -0.045em; color: var(--on-ink);
  margin-bottom: clamp(60px, 10vh, 120px); max-width: 1400px;
}
.chap-h .line { display: block; will-change: transform; }
.chap-h em { font-style: italic; color: var(--ox); }
.chapters-list { display: flex; flex-direction: column; gap: clamp(120px, 20vh, 220px); }
.chapter-item { position: relative; padding: 0 var(--gutter); }
.ci-meta {
  display: flex; gap: clamp(16px, 3vw, 48px);
  margin-bottom: clamp(32px, 5vh, 56px);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid); flex-wrap: wrap;
}
.ci-num { color: var(--ox); font-weight: 700; }
.ci-body { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.ci-title {
  font-family: var(--ff-display); font-size: clamp(40px, 5.5vw, 96px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.95; letter-spacing: -0.04em; color: var(--on-ink);
}
.ci-title em {
  font-style: italic; color: var(--ox);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.ci-body p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink); max-width: 52ch;
}
.ci-body p em {
  color: var(--ox); font-style: italic;
  font-family: var(--ff-display); font-variation-settings: "opsz" 72;
}
.ci-image { margin-top: clamp(40px, 6vh, 72px); position: relative; }
.ci-image img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  filter: grayscale(0.65) contrast(1.1) brightness(0.85);
  transition: filter 1.6s var(--ease-cinema), transform 1.6s var(--ease-cinema);
}
.ci-image:hover img { filter: grayscale(0) contrast(1.05); transform: scale(1.02); }
.ci-image figcaption {
  margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--hair);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mid);
}
.chapter-item--2 .ci-body { grid-template-columns: 7fr 5fr; }
.chapter-item--2 .ci-image { margin-top: 0; }
.chapter-item--3 .ci-body { grid-template-columns: 1fr; max-width: 1100px; }
.chapter-item--3 .ci-image { aspect-ratio: 21/9; margin-top: 48px; }
.chapter-item--4 .ci-body { grid-template-columns: 5fr 7fr; }
.chapter-item--4 {
  background: var(--ink-2); color: var(--on-ink);
  padding-top: clamp(100px, 14vh, 180px); padding-bottom: clamp(100px, 14vh, 180px);
}
.chapter-item--4 .ci-meta { color: var(--on-ink-mid); }
.chapter-item--4 .ci-meta .ci-num { color: var(--ox); }
.chapter-item--4 .ci-title { color: var(--on-ink); }
.chapter-item--4 .ci-body p { color: var(--on-ink); }
.chapter-item--4 .ci-image figcaption { color: var(--on-ink-mid); border-top-color: var(--hair); }
@media (max-width: 900px) {
  .ci-body, .chapter-item--2 .ci-body, .chapter-item--4 .ci-body { grid-template-columns: 1fr; }
}

/* ---------- MARQUEE ---------- */
.chap-marquee {
  padding: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  overflow: hidden; position: relative;
}
.chap-marquee::before, .chap-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.chap-marquee::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.chap-marquee::after { right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.marquee { padding: 28px 0; overflow: hidden; }
.marquee-track { display: flex; gap: 56px; white-space: nowrap; align-items: center; will-change: transform; }
.marquee-track > span {
  font-family: var(--ff-display); font-size: clamp(28px, 3.4vw, 56px);
  font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 80;
  line-height: 1; color: var(--on-ink); letter-spacing: -0.02em;
}
.marquee-track .dot { display: inline-block; width: 8px; height: 8px; background: var(--ox); border-radius: 50%; vertical-align: middle; }

/* ---------- POLAROIDS ---------- */
.chap-fieldnotes { padding: clamp(120px, 16vh, 220px) 0; background: var(--ink-2); }
.polaroids {
  padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 24px 24px; max-width: 1400px; margin: 0 auto;
}
.polaroid {
  background: var(--ink-3); border: 1px solid var(--hair); padding: 12px 12px 18px; position: relative;
  transition: transform 0.5s var(--ease-cinema); will-change: transform;
}
.polaroid img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: grayscale(0.5) contrast(1.05); transition: filter 0.8s var(--ease-cinema);
}
.polaroid:hover { transform: rotate(0) translateY(-12px) !important; z-index: 5; }
.polaroid:hover img { filter: grayscale(0) contrast(1.05); }
.polaroid-caption {
  margin-top: 8px; font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 14; font-size: 13px;
  color: var(--on-ink-mid); line-height: 1.3;
}
.polaroid:nth-child(1) { grid-column: 1 / 4; transform: rotate(-2deg); margin-top: 40px; }
.polaroid:nth-child(2) { grid-column: 4 / 7; transform: rotate(1.5deg); margin-top: 0; }
.polaroid:nth-child(3) { grid-column: 7 / 10; transform: rotate(-1deg); margin-top: 60px; }
.polaroid:nth-child(4) { grid-column: 10 / 13; transform: rotate(2deg); margin-top: 20px; }
.polaroid:nth-child(5) { grid-column: 2 / 5; transform: rotate(1deg); margin-top: 24px; }
.polaroid:nth-child(6) { grid-column: 5 / 8; transform: rotate(-2.5deg); margin-top: -20px; }
.polaroid:nth-child(7) { grid-column: 8 / 11; transform: rotate(1.5deg); margin-top: 40px; }
.polaroid:nth-child(8) { grid-column: 9 / 13; transform: rotate(-1.2deg); margin-top: -20px; }
@media (max-width: 900px) {
  .polaroids { grid-template-columns: repeat(2, 1fr); }
  .polaroid { grid-column: auto !important; margin-top: 0 !important; transform: rotate(0) !important; }
  .polaroid:nth-child(odd) { transform: rotate(-1.5deg) !important; }
  .polaroid:nth-child(even) { transform: rotate(1.5deg) !important; }
}

/* ---------- WORK NUMERALS ---------- */
.chap-work { padding: clamp(120px, 16vh, 220px) 0; }
.work-list { padding: 0 var(--gutter); display: flex; flex-direction: column; }
.work-item {
  display: grid; grid-template-columns: minmax(140px, 0.32fr) 1fr;
  gap: clamp(24px, 5vw, 100px); padding: clamp(48px, 8vh, 80px) 0;
  border-bottom: 1px solid var(--hair); position: relative; align-items: start;
  transition: background 0.5s var(--ease-cinema);
}
.work-item:first-child { border-top: 1px solid var(--hair); }
.work-item:hover { background: var(--ink-2); }
.work-num {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(80px, 12vw, 220px); line-height: 0.85;
  color: var(--ox); letter-spacing: -0.05em; display: block;
}
.work-body { padding-top: clamp(8px, 1vw, 16px); }
.work-title {
  font-family: var(--ff-display); font-size: clamp(32px, 4.5vw, 72px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  line-height: 1; letter-spacing: -0.035em; color: var(--on-ink); margin-bottom: 12px;
}
.work-meta {
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--on-ink-mid); margin-bottom: 16px;
}
.work-body p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink); margin-bottom: 24px; max-width: 52ch;
}
.work-cta {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0; border-bottom: 1px solid var(--ox);
  transition: gap 0.32s, color 0.32s;
}
.work-cta:hover { gap: 16px; }
@media (max-width: 700px) {
  .work-item { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- DA NANG SPLIT ---------- */
.chap-danang { padding: 0; background: var(--ink); position: relative; overflow: hidden; }
.danang-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 86vh; align-items: stretch; }
.danang-image { position: relative; overflow: hidden; }
.danang-image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.3) contrast(1.1) brightness(0.85);
  transform: scale(1.05);
  transition: transform 1.6s var(--ease-cinema), filter 1.6s var(--ease-cinema);
}
.danang-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(14,13,11,0.3), rgba(14,13,11,0.5));
}
.danang-image:hover img { transform: scale(1); filter: grayscale(0) contrast(1.05) brightness(0.95); }
.danang-text {
  padding: clamp(60px, 10vh, 120px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  background: var(--ink); color: var(--on-ink);
}
.danang-text .chap-meta { padding: 0; margin-bottom: 32px; color: var(--ox); }
.danang-h {
  font-family: var(--ff-display); font-size: var(--fs-display);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: var(--lh-display); letter-spacing: -0.045em; color: var(--on-ink);
}
.danang-h .line { display: block; will-change: transform; }
.danang-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.danang-text p { font-size: var(--fs-body-lg); line-height: var(--lh-prose); color: var(--on-ink); max-width: 46ch; }
.danang-text .btn-primary { width: fit-content; margin-top: 16px; }
@media (max-width: 900px) {
  .danang-wrap { grid-template-columns: 1fr; }
  .danang-image { aspect-ratio: 16/9; min-height: 50vh; position: relative; }
}

/* ---------- FOOTER ---------- */
.site-foot {
  background: var(--ink); padding: clamp(80px, 12vh, 140px) var(--gutter) 32px;
  border-top: 1px solid var(--hair);
}
.foot-grid {
  display: grid; grid-template-columns: 5fr 3fr 3fr 3fr;
  gap: clamp(32px, 5vw, 80px); max-width: 1400px; margin: 0 auto;
}
.foot-h {
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ox); margin-bottom: 20px;
}
.foot-display {
  font-family: var(--ff-display); font-size: clamp(40px, 4.5vw, 72px);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  line-height: 0.95; letter-spacing: -0.04em; color: var(--on-ink); margin-bottom: 28px;
}
.foot-sub { font-size: var(--fs-body-lg); line-height: var(--lh-prose); color: var(--on-ink-mid); margin-bottom: 32px; max-width: 32ch; }
.foot-form { display: flex; gap: 0; }
.foot-form input {
  flex: 1; background: transparent; border: 1px solid var(--hair); border-right: 0;
  padding: 14px 18px; font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink);
}
.foot-form input::placeholder { color: var(--on-ink-mid); }
.foot-form button {
  padding: 14px 24px; background: var(--ox); color: var(--bone);
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; transition: background 0.32s;
}
.foot-form button:hover { background: var(--ox-bright); }
.foot-list { display: flex; flex-direction: column; gap: 8px; }
.foot-list a, .foot-list span { font-family: var(--ff-sans); font-size: 15px; color: var(--on-ink); transition: color 0.32s; }
.foot-list a:hover { color: var(--ox); }
.foot-bottom {
  margin-top: clamp(60px, 10vh, 100px); padding-top: 24px;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mid);
}
.foot-bottom a { color: var(--on-ink-mid); transition: color 0.32s; }
.foot-bottom a:hover { color: var(--ox); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; gap: 12px; }
}

/* ---------- ANIMATION HELPERS ---------- */
.split-line { display: inline-block; overflow: hidden; vertical-align: top; }
.split-line > span { display: inline-block; transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .marquee-track { animation: none; transform: none; }
  .cursor-dot { display: none; }
  body { cursor: auto; }
}

/* ============================================================
   ABOUT PAGE — page-specific
   ============================================================ */

/* portrait hero: full-bleed photo + name oversized over it */
.chap-portrait-hero {
  min-height: 100vh; padding: 0; position: relative; overflow: hidden;
}
.portrait-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(0.55) contrast(1.05) brightness(0.6) saturate(0.85);
  z-index: 0;
}
.portrait-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,13,11,0.55) 0%, rgba(14,13,11,0.2) 40%, rgba(14,13,11,0.85) 100%);
}
.portrait-hero-content {
  position: relative; z-index: 2;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between;
  padding: 100px var(--gutter) 60px;
}
.portrait-hero-top {
  display: flex; gap: clamp(16px, 2vw, 32px); flex-wrap: wrap;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox-bright);
}
.portrait-hero-name {
  font-family: var(--ff-display); font-weight: 800; font-style: italic;  /* manifesto cut */
  font-size: clamp(60px, 17vw, 320px);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  line-height: 0.9; letter-spacing: -0.03em; color: var(--bone);
}
.portrait-hero-name em {
  font-style: italic; color: var(--ox-bright);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.portrait-hero-foot {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: end; padding-top: 24px;
  border-top: 1px solid rgba(242,237,227,0.25);
}
.portrait-hero-roles {
  display: flex; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink);
}
.portrait-hero-roles span { position: relative; }
.portrait-hero-roles span:not(:last-child)::after {
  content: '·'; margin-left: clamp(20px, 3vw, 56px); color: var(--ox-bright);
}
@media (max-width: 900px) {
  .portrait-hero-foot { grid-template-columns: 1fr; }
}

/* bio section — short editorial intro */
.chap-bio {
  padding: clamp(100px, 14vh, 180px) 0;
}
.bio-wrap {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 100px);
  max-width: 1400px;
}
.bio-meta {
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ox);
  line-height: 1.8;
}
.bio-prose {
  font-family: var(--ff-display); font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400; line-height: 1.35;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  color: var(--on-ink); letter-spacing: -0.015em;
  max-width: 28ch;
}
.bio-prose em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1; }
.bio-prose p + p { margin-top: 1.4em; }
@media (max-width: 900px) {
  .bio-wrap { grid-template-columns: 1fr; }
}

/* loner story — full-bleed cream with oversized verbatim quote */
.chap-loner {
  background: var(--ink-2); color: var(--on-ink);
  padding: clamp(120px, 18vh, 240px) 0;
  position: relative;
}
.chap-loner .chap-meta { color: var(--ox); }
.loner-wrap {
  padding: 0 var(--gutter);
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.loner-quote {
  font-family: var(--ff-display);
  font-size: clamp(26px, 3vw, 46px);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 70, "WONK" 1;
  line-height: 1.32; letter-spacing: -0.015em;
  color: var(--on-ink); max-width: 60ch;
}
.loner-quote em {
  font-style: italic; color: var(--ox);
  font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}
.loner-attrib {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mid);
  padding-top: 24px; border-top: 1px solid var(--hair);
  max-width: 60ch;
}

/* under-told story — ink, narrower, declarative */
.chap-undertold {
  padding: clamp(120px, 18vh, 240px) 0;
  background: var(--ink-2);
}
.undertold-wrap {
  padding: 0 var(--gutter); max-width: 1100px; margin: 0 auto;
}
.undertold-h {
  font-family: var(--ff-display); font-size: clamp(40px, 6vw, 88px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 1.02; letter-spacing: -0.04em; color: var(--on-ink);
  margin-bottom: 48px; max-width: 18ch;
}
.undertold-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.undertold-quote {
  font-family: var(--ff-display); font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 32, "SOFT" 60;
  line-height: 1.4; letter-spacing: -0.01em;
  color: var(--on-ink); max-width: 50ch;
}
.undertold-attrib {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mid);
}

/* daft punk story — sigil-style interlude */
.chap-daft {
  padding: clamp(120px, 16vh, 200px) 0;
  text-align: center;
  background: var(--ink);
}
.daft-quote {
  font-family: var(--ff-display); font-size: clamp(28px, 3.4vw, 56px);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  line-height: 1.32; letter-spacing: -0.015em;
  color: var(--on-ink);
  padding: 0 var(--gutter); max-width: 56ch; margin: 0 auto;
}
.daft-quote em {
  font-style: italic; color: var(--ox);
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.chap-daft .chap-meta { justify-content: center; }
.chap-daft cite {
  display: block; margin-top: clamp(32px, 5vh, 56px);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mid);
  font-style: normal;
}

/* press wall — placeholder grid */
.chap-press { padding: clamp(120px, 16vh, 200px) 0; }
.press-grid {
  padding: 0 var(--gutter); display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 0;
  max-width: 1400px; margin: 0 auto;
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}
.press-cell {
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 200px; transition: background 0.5s var(--ease-cinema);
}
.press-cell:hover { background: var(--ink-2); }
.press-outlet {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox);
}
.press-quote {
  font-family: var(--ff-display); font-size: clamp(18px, 1.8vw, 26px);
  font-weight: 400; font-style: italic; line-height: 1.35;
  font-variation-settings: "opsz" 36, "SOFT" 60;
  color: var(--on-ink); flex: 1;
}
.press-meta {
  font-family: var(--ff-label); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mid);
  margin-top: auto;
}
@media (max-width: 900px) {
  .press-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .press-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WORK PAGE — booking form + service sub-sections
   ============================================================ */

/* ---------- BOOKING HERO ---------- */
.chap-work-hero {
  padding: clamp(120px, 18vh, 200px) 0 clamp(80px, 10vh, 120px);
  border-bottom: 1px solid var(--hair);
}
.work-hero-display {
  font-family: var(--ff-display);
  font-size: clamp(56px, 9vw, 160px);
  font-weight: 800; font-style: italic;            /* manifesto cut */
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--on-ink);
  padding: 0 var(--gutter);
  margin-bottom: 32px;
  max-width: 1400px;
}
.work-hero-display em {
  font-style: italic; color: var(--ox);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.work-hero-sub {
  padding: 0 var(--gutter);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
  margin-bottom: clamp(60px, 8vh, 100px);
  max-width: 60ch;
}
.work-hero-sub strong { color: var(--ox); font-weight: 500; }

/* ---------- BOOKING FORM ---------- */
.booking-wrap {
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 260px);
  gap: clamp(40px, 5vw, 80px);
  max-width: 1400px;
  align-items: start;
}
.booking-form {
  display: flex; flex-direction: column;
  gap: clamp(28px, 4vh, 40px);
}
.bf-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
}
.bf-field { display: flex; flex-direction: column; gap: 10px; }
.bf-label {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}
.bf-label .req { color: var(--ox); margin-left: 4px; }
.booking-form input[type=text],
.booking-form input[type=email],
.booking-form textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  padding: 16px 18px;
  font-family: var(--ff-sans); font-size: 17px;
  color: var(--on-ink);
  transition: border-color 0.32s var(--ease-out), background 0.32s var(--ease-out);
}
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: var(--on-ink-mid); }
.booking-form input:focus,
.booking-form textarea:focus {
  outline: none; border-color: var(--ox);
  background: var(--ink-3);
}
.booking-form textarea { resize: vertical; min-height: 140px; }

/* segmented control */
.segmented {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--hair);
}
.segmented label {
  flex: 1 0 auto;
  min-width: max-content;
  padding: 14px 18px;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
  border-right: 1px solid var(--hair);
  text-align: center;
  transition: background 0.32s var(--ease-out), color 0.32s var(--ease-out);
  cursor: pointer;
}
.segmented label:last-of-type { border-right: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + label,
.segmented label:hover {
  background: var(--ox); color: var(--bone);
}
.segmented input:focus-visible + label { outline: 2px solid var(--ox-bright); outline-offset: 2px; }
@media (max-width: 1024px) {
  .booking-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bf-row { grid-template-columns: 1fr; }
}

/* booking aside (right column — contact lines) */
.booking-aside {
  display: flex; flex-direction: column; gap: 18px;
  padding-left: clamp(0px, 2vw, 32px);
  border-left: 1px solid var(--hair);
}
.booking-aside h4 {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox);
}
.booking-aside p,
.booking-aside a {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink); line-height: 1.85;
  display: block;
}
.booking-aside a:hover { color: var(--ox); }
@media (max-width: 1024px) {
  .booking-aside { padding-left: 0; border-left: 0; padding-top: 32px; border-top: 1px solid var(--hair); }
}

/* submit row */
.bf-submit-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--hair);
}
.bf-fineprint {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}

/* form success */
.form-success {
  display: none;
  padding: clamp(32px, 5vh, 56px);
  border: 1px solid var(--ox);
  background: var(--ink-2);
  margin-top: 24px;
}
.form-success.is-active { display: block; animation: fadeUp 0.4s var(--ease-out); }
.form-success h3 {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  font-size: clamp(32px, 3.5vw, 52px); line-height: 1.05;
  color: var(--ox); margin-bottom: 16px;
}
.form-success p {
  font-family: var(--ff-display); font-size: clamp(18px, 1.4vw, 22px);
  font-style: italic; font-variation-settings: "opsz" 32, "SOFT" 60;
  color: var(--on-ink); max-width: 56ch;
}

/* form error — same shape as success, signal-red border, ox-bright glyph */
.form-error {
  display: none;
  padding: clamp(32px, 5vh, 56px);
  border: 1px solid var(--ox-bright);
  background: var(--ink-2);
  margin-top: 24px;
}
.form-error.is-active { display: block; animation: fadeUp 0.4s var(--ease-out); }
.form-error h3 {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  font-size: clamp(32px, 3.5vw, 52px); line-height: 1.05;
  color: var(--ox-bright); margin-bottom: 16px;
}
.form-error p {
  font-family: var(--ff-display); font-size: clamp(18px, 1.4vw, 22px);
  font-style: italic; font-variation-settings: "opsz" 32, "SOFT" 60;
  color: var(--on-ink); max-width: 56ch;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- WORK SUB-SECTIONS (#performances, #sync, #lessons, #partnerships, #press) ---------- */
.work-sub { padding: clamp(120px, 16vh, 200px) 0; border-top: 1px solid var(--hair); }
.work-sub .chap-meta { padding-left: var(--gutter); padding-right: var(--gutter); }
.work-sub-h {
  padding: 0 var(--gutter);
  font-family: var(--ff-display); font-size: clamp(40px, 6vw, 96px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.96; letter-spacing: -0.04em;
  color: var(--on-ink);
  margin-bottom: clamp(40px, 6vh, 72px); max-width: 1400px;
}
.work-sub-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.work-buyer-copy {
  padding: 0 var(--gutter); max-width: 64ch;
  font-family: var(--ff-display); font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400; line-height: 1.4;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  color: var(--on-ink-mid);
  margin-bottom: clamp(40px, 6vh, 64px);
}
.work-buyer-copy em { color: var(--ox); font-style: italic; font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1; }

/* ---------- PRICING TABLE ---------- */
.pricing-table {
  padding: 0 var(--gutter);
  border-top: 1px solid var(--hair);
  max-width: 1400px;
}
.pricing-row {
  display: grid; grid-template-columns: 4fr 2fr 5fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
  transition: background 0.5s var(--ease-cinema);
}
.pricing-row:hover { background: var(--ink-2); }
.pricing-tier {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--on-ink);
}
.pricing-tier em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
.pricing-price {
  font-family: var(--ff-label);
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox); font-weight: 500;
}
.pricing-includes {
  font-size: 16px; line-height: 1.55;
  color: var(--on-ink-mid);
}
@media (max-width: 700px) {
  .pricing-row { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .pricing-price { letter-spacing: 0.14em; }
}

/* ---------- WORK SECTION IMAGE ---------- */
.work-section-image {
  margin: clamp(60px, 8vh, 100px) calc(-1 * var(--gutter)) 0;
  position: relative; overflow: hidden;
}
.work-section-image img {
  width: 100%; aspect-ratio: 21/9; object-fit: cover;
  filter: grayscale(0.45) contrast(1.12) brightness(0.85);
  transition: filter 1.6s var(--ease-cinema), transform 1.6s var(--ease-cinema);
}
.work-section-image:hover img {
  filter: grayscale(0) contrast(1.05) brightness(1);
  transform: scale(1.02);
}
.work-section-image figcaption {
  position: absolute; left: var(--gutter); bottom: clamp(20px, 3vh, 32px);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone); background: rgba(14,13,11,0.6);
  padding: 8px 14px; backdrop-filter: blur(8px);
}

/* ---------- WORK CTA ROW ---------- */
.work-cta-row {
  padding: 0 var(--gutter);
  margin-top: clamp(48px, 6vh, 72px);
  display: flex; gap: 16px; flex-wrap: wrap;
}

/* ---------- SYNC REEL PLATE ---------- */
.sync-reel-plate {
  padding: 0 var(--gutter);
  margin-bottom: clamp(48px, 6vh, 72px);
  max-width: 1400px;
}
.sync-reel-inner {
  position: relative; aspect-ratio: 16/9; max-width: 880px;
  background: var(--ink-2); border: 1px solid var(--hair);
  display: grid; place-items: center;
  overflow: hidden;
}
.sync-reel-inner::before, .sync-reel-inner::after {
  content: ''; position: absolute; background: var(--ox); z-index: 2;
  width: 28px; height: 28px;
}
.sync-reel-inner::before { top: -2px; left: -2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.sync-reel-inner::after { bottom: -2px; right: -2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.sync-reel-placeholder {
  text-align: center; padding: 0 32px;
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.sync-reel-placeholder .eyebrow { color: var(--ox); }
.sync-reel-placeholder p {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  font-size: clamp(22px, 2.4vw, 36px); line-height: 1.25;
  color: var(--on-ink); max-width: 36ch;
}

/* ---------- LESSONS WATER ACCENT (only place water appears) ---------- */
.chap-lessons {
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.chap-lessons::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 70vw; height: 80vh;
  background: radial-gradient(ellipse at top right, rgba(30,58,138,0.22), transparent 60%);
  pointer-events: none; z-index: 0;
}
.chap-lessons > * { position: relative; z-index: 1; }
.chap-lessons .chap-meta,
.chap-lessons .work-cta,
.chap-lessons .pricing-price,
.chap-lessons .work-buyer-copy em,
.chap-lessons .work-sub-h em { color: var(--water); }
.chap-lessons .pricing-tier em { color: var(--water); }
.chap-lessons .pricing-row { border-color: rgba(30,58,138,0.32); }
.chap-lessons .pricing-table { border-top-color: rgba(30,58,138,0.32); }
.chap-lessons .btn-primary { background: var(--water); }
.chap-lessons .btn-primary::before { background: var(--ink); }

/* ---------- PRESS MINI SECTION ---------- */
.work-press-mini {
  padding: clamp(100px, 14vh, 160px) var(--gutter);
  border-top: 1px solid var(--hair);
}
.work-press-mini .chap-meta { padding: 0; }
.work-press-mini-inner {
  max-width: 1100px;
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: end;
}
.work-press-mini h3 {
  font-family: var(--ff-display); font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 400; font-variation-settings: "opsz" 96, "SOFT" 60, "WONK" 1;
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--on-ink);
}
.work-press-mini h3 em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
.work-press-mini p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink-mid); max-width: 48ch; margin-bottom: 24px;
}
.work-press-mini-cta { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 800px) {
  .work-press-mini-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   ╔══════════════════════════════════════════════════════════╗
   ║  A+ UPGRADE LAYER — v2 (motion + chrome + signature)     ║
   ║  Hand-coded to lift the bar from B+ to A*.               ║
   ╚══════════════════════════════════════════════════════════╝
   ============================================================ */

/* ---------- ANIMATED GRAIN (subtle, breathing) ---------- */
@keyframes grain-breathe {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.05; }
  20%      { transform: translate(-2%, 1%) scale(1.01); opacity: 0.07; }
  40%      { transform: translate(1%, -2%) scale(1); opacity: 0.045; }
  60%      { transform: translate(-1%, -1%) scale(1.02); opacity: 0.06; }
  80%      { transform: translate(2%, 2%) scale(1); opacity: 0.05; }
}
body::before { animation: grain-breathe 12s ease-in-out infinite; }

/* ---------- SCROLL PROGRESS (fixed bottom-edge oxblood line) ---------- */
.scroll-progress {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 1px; z-index: 95; pointer-events: none;
  background: rgba(242, 237, 227, 0.06);
}
.scroll-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--ox-bright);
  box-shadow: 0 0 10px var(--ox-bright);
  will-change: width;
}

/* ---------- SECTION INDEX (right-edge minimap) ---------- */
.section-index {
  position: fixed; right: clamp(12px, 1.4vw, 24px); top: 50%;
  transform: translateY(-50%);
  z-index: 96; pointer-events: none;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transition: opacity 0.6s var(--ease-cinema);
}
.section-index.is-visible { opacity: 1; pointer-events: auto; }
.section-index button {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-label); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-dim);
  background: transparent; border: 0; padding: 4px 0;
  transition: color 0.32s, gap 0.4s var(--ease-cinema);
  cursor: pointer;
}
.section-index button::before {
  content: ''; display: inline-block;
  width: 18px; height: 1px;
  background: currentColor; opacity: 0.6;
  transition: width 0.4s var(--ease-cinema), opacity 0.32s;
}
.section-index button .sx-label {
  opacity: 0; max-width: 0;
  overflow: hidden; white-space: nowrap;
  transition: opacity 0.32s, max-width 0.5s var(--ease-cinema);
}
.section-index button:hover { gap: 14px; color: var(--on-ink); }
.section-index button:hover::before { width: 28px; opacity: 1; }
.section-index button:hover .sx-label { opacity: 1; max-width: 160px; }
.section-index button.is-current { color: var(--ox-bright); }
.section-index button.is-current::before { width: 28px; background: var(--ox-bright); opacity: 1; }
.section-index button.is-current .sx-label { opacity: 1; max-width: 160px; color: var(--on-ink); }
@media (max-width: 1024px) { .section-index { display: none; } }

/* AUDIO TOGGLE + drone EQ removed in REBUILD §1.3 — no ambient sound */

/* ---------- HERO WATER RIPPLE (signature on the word "water") ---------- */
.hero-display em {
  position: relative;
  isolation: isolate;
}
.hero-display em::after {
  content: ''; position: absolute; left: -2%; right: -2%; top: 0; bottom: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 30% 50%, var(--crimson-glow, rgba(184,14,14,0.18)) 0%, transparent 60%);
  filter: blur(20px);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s var(--ease-cinema), transform 0.8s var(--ease-cinema);
  pointer-events: none;
}
.hero-display:hover em::after { opacity: 0.7; transform: scale(1.1); }

/* PAGE TRANSITION CURTAIN removed in REBUILD §7 — replaced by native View Transitions API in Day 4 */

/* ---------- POLAROID LIGHTBOX (click to zoom) ---------- */
.polaroid { cursor: pointer; }
.polaroid-lightbox {
  position: fixed; inset: 0; z-index: 9997;
  background: rgba(14, 13, 11, 0.94);
  backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
  padding: clamp(40px, 6vh, 80px) clamp(40px, 6vw, 80px);
  opacity: 0; transition: opacity 0.32s;
  cursor: pointer;
}
.polaroid-lightbox.is-open { display: flex; opacity: 1; }
.polaroid-lightbox-inner {
  background: var(--ink-3); border: 1px solid var(--hair); padding: 24px 24px 36px;
  max-width: min(720px, 90vw); max-height: 88vh;
  display: flex; flex-direction: column; gap: 16px;
  transform: scale(0.96); opacity: 0;
  transition: transform 0.5s var(--ease-cinema), opacity 0.4s var(--ease-cinema);
}
.polaroid-lightbox.is-open .polaroid-lightbox-inner {
  transform: scale(1); opacity: 1; transition-delay: 0.05s;
}
.polaroid-lightbox-img {
  max-height: 70vh;
  width: 100%; height: 100%; object-fit: contain;
  filter: contrast(1.04) saturate(0.92);
}
.polaroid-lightbox-caption {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--on-ink-mid); line-height: 1.35;
}
.polaroid-lightbox-meta {
  font-family: var(--ff-label); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox); padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.polaroid-lightbox-close {
  position: fixed; top: clamp(20px, 3vh, 40px); right: clamp(20px, 3vw, 40px);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone); padding: 10px 18px;
  border: 1px solid var(--bone);
  background: transparent; cursor: pointer;
  transition: all 0.32s;
}
.polaroid-lightbox-close:hover { background: var(--ox-bright); border-color: var(--ox-bright); }

/* ---------- DOUBLE MARQUEE (two stacked tracks, opposite directions) ---------- */
.chap-marquee .marquee + .marquee {
  border-top: 1px solid var(--hair);
  padding: 22px 0;
}
.chap-marquee .marquee + .marquee .marquee-track > span {
  font-size: clamp(22px, 2.6vw, 40px);
  color: var(--on-ink-mid);
  font-variation-settings: "opsz" 60, "SOFT" 60;
}
.chap-marquee .marquee + .marquee .marquee-track .dot { background: var(--rust); }

/* ---------- CHAPTER ITEM SCRUB NUMERAL (ENORMOUS hangs in margin) ---------- */
.chapter-item { overflow: visible; }
.ci-scrub-num {
  position: absolute; left: var(--gutter); top: 0;
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(120px, 22vw, 380px);
  line-height: 0.78; letter-spacing: -0.06em;
  color: var(--ox);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  user-select: none;
}
.chapter-item--4 .ci-scrub-num { color: var(--ox); opacity: 0.12; }
.chapter-item .ci-meta,
.chapter-item .ci-body,
.chapter-item .ci-image { position: relative; z-index: 1; }
@media (max-width: 800px) { .ci-scrub-num { font-size: 140px; opacity: 0.1; } }

/* ---------- WORK NUMERALS — SCRUB-SCALE on entrance ---------- */
.work-num { will-change: transform; }

/* ---------- HOVER UNDERLINE DRAW on chapter items ---------- */
.chapter-item .ci-title { display: inline-block; }
.ci-body > div { position: relative; }
.ci-body > div::after {
  content: ''; position: absolute; left: 0; bottom: -16px;
  height: 1px; width: 0;
  background: var(--ox);
  transition: width 0.6s var(--ease-cinema);
}
.chapter-item:hover .ci-body > div::after { width: 120px; }

/* CURSOR TRAIL removed in REBUILD §1.3 — the minimum is the maximum */

/* ---------- IMAGE DEVELOP REVEAL (photo appears like darkroom develop) ---------- */
.ci-image img,
.danang-image img,
.portrait-hero-img,
.shop-card img {
  will-change: filter, transform, clip-path;
}
.develop-init {
  clip-path: inset(0 0 100% 0);
  filter: grayscale(1) contrast(1.4) brightness(0.5);
}

/* ---------- SCROLL HINT (initial bottom-edge "scroll") ---------- */
.scroll-hint {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--on-ink-mid);
  display: inline-flex; align-items: center; gap: 12px;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-cinema);
}
.scroll-hint.is-hidden { opacity: 0; }
.scroll-hint::before {
  content: ''; display: inline-block;
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, transparent, var(--ox-bright));
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0%   { transform: translateY(-12px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ---------- ENHANCED HERO PARALLAX HOOK ---------- */
.hero-display .line { will-change: transform; }

/* ---------- MARQUEE VELOCITY HINT ---------- */
.marquee-track { transition: filter 0.3s; }
.chap-marquee:hover .marquee-track { filter: brightness(1.2); }

/* ---------- SIGIL HOVER BREATHE ---------- */
.sigil span {
  transition: transform 0.4s var(--ease-cinema), color 0.32s;
  cursor: pointer;
}
.sigil span:hover {
  transform: translateY(-6px) scale(1.04);
  color: var(--ox-bright) !important;
}

/* ---------- WORK ROW SCRUB INTERACTIONS ---------- */
.work-item { position: relative; overflow: hidden; }
.work-item::before {
  content: ''; position: absolute;
  left: 0; top: 0; height: 100%; width: 0;
  background: linear-gradient(to right, rgba(184,14,14,0.06), transparent);
  transition: width 0.6s var(--ease-cinema);
  pointer-events: none;
}
.work-item:hover::before { width: 100%; }

/* ---------- POLAROID SUBTLE SWAY (always-on ambient) ---------- */
@keyframes sway-a { 0%,100% { transform: rotate(var(--r,0deg)) translateY(0); } 50% { transform: rotate(calc(var(--r,0deg) + 0.4deg)) translateY(-2px); } }
@keyframes sway-b { 0%,100% { transform: rotate(var(--r,0deg)) translateY(0); } 50% { transform: rotate(calc(var(--r,0deg) - 0.4deg)) translateY(2px); } }
.polaroid:nth-child(odd)  { animation: sway-a 6.4s ease-in-out infinite; }
.polaroid:nth-child(even) { animation: sway-b 7.2s ease-in-out infinite; }
.polaroid:hover { animation-play-state: paused; }

/* ---------- STATUS BAR — promote audio toggle visually ---------- */
/* .status-right .audio-toggle removed in REBUILD §1.3 */

/* ============================================================
   DA NANG PAGE — Phillip Violins shop, school, workshop
   ============================================================ */

/* ---------- DA NANG HERO (reuses .chap-portrait-hero, swaps photo) ---------- */
.danang-hero-strip {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(242,237,227,0.25);
}
.danang-hero-strip-roles {
  display: flex; gap: clamp(20px, 3vw, 48px); flex-wrap: wrap;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink);
}
.danang-hero-strip-roles span { position: relative; }
.danang-hero-strip-roles span:not(:last-child)::after {
  content: '·'; margin-left: clamp(16px, 2.5vw, 44px); color: var(--ox-bright);
}
@media (max-width: 900px) {
  .danang-hero-strip { grid-template-columns: 1fr; }
}

/* ---------- DA NANG "WHY THIS EXISTS" placeholder flag ---------- */
.danang-why-flag {
  display: inline-block; margin-top: 24px;
  padding: 6px 12px; background: var(--ink-3);
  font-family: var(--ff-label); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox-bright); border: 1px solid var(--ox);
}

/* ---------- THREE-UP SHOP GRID ---------- */
.chap-shopgrid { padding: clamp(120px, 16vh, 200px) 0; }
.chap-shopgrid .chap-h { margin-bottom: clamp(56px, 8vh, 96px); }
.shop-grid {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  max-width: 1400px; margin: 0 auto;
}
.shop-card { display: flex; flex-direction: column; gap: 18px; }
.shop-card-imgwrap { overflow: hidden; }
.shop-card-imgwrap img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  filter: grayscale(0.4) contrast(1.08) brightness(0.92);
  transition: filter 1.2s var(--ease-cinema), transform 1.6s var(--ease-cinema);
}
.shop-card:hover .shop-card-imgwrap img {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.03);
}
.shop-card-meta {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox);
}
.shop-card-caption {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 1;
  line-height: 1.3; color: var(--on-ink);
}
.shop-card-caption em { color: var(--ox); }
@media (max-width: 800px) {
  .shop-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* ---------- FACTS STRIP ---------- */
.chap-facts {
  padding: clamp(120px, 16vh, 200px) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.facts-grid {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1400px; margin: 0 auto;
}
.fact {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.fact-num {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(72px, 11vw, 200px);
  line-height: 0.82; letter-spacing: -0.055em;
  color: var(--ox);
}
.fact-num sup {
  font-size: 0.42em; vertical-align: top;
  color: var(--ox-bright); font-family: var(--ff-label);
  font-style: normal; font-weight: 500; margin-left: 4px;
}
.fact-label {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}
.fact-flag {
  display: inline-block;
  padding: 4px 8px; background: var(--ink-3);
  font-family: var(--ff-label); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox); width: fit-content;
  margin-top: 4px;
}
@media (max-width: 900px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}

/* ---------- TEDX VIDEO PLATE (reuses sync-reel artefact pattern) ---------- */
.chap-tedx { padding: clamp(120px, 16vh, 200px) 0; }
.tedx-plate {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
}
.tedx-frame {
  position: relative; aspect-ratio: 16/9;
  background: var(--ink-2); border: 1px solid var(--hair);
  overflow: hidden; display: grid; place-items: center;
  cursor: pointer;
}
.tedx-frame::before, .tedx-frame::after {
  content: ''; position: absolute; background: var(--ox); z-index: 2;
  width: 32px; height: 32px;
}
.tedx-frame::before { top: -2px; left: -2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tedx-frame::after { bottom: -2px; right: -2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tedx-poster {
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, rgba(14,13,11,0.55), rgba(14,13,11,0.85)),
                    radial-gradient(ellipse at 40% 30%, rgba(184,14,14,0.32), transparent 60%);
  background-size: cover;
}
.tedx-play {
  position: relative; z-index: 3;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--ox); display: grid; place-items: center;
  transition: transform 0.32s var(--ease-out), background 0.32s var(--ease-out);
}
.tedx-frame:hover .tedx-play { background: var(--ox-bright); transform: scale(1.06); }
.tedx-play::after {
  content: ''; width: 0; height: 0;
  border-left: 26px solid var(--bone);
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  margin-left: 6px;
}
.tedx-caption {
  margin-top: 16px;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}

/* ---------- GET INVOLVED CTA BLOCK ---------- */
.chap-getinvolved {
  padding: clamp(120px, 16vh, 200px) 0;
  background: var(--ink-2); color: var(--on-ink);
}
.chap-getinvolved .chap-meta { color: var(--ox); }
.gi-wrap {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 100px);
  max-width: 1400px; margin: 0 auto;
  align-items: end;
}
.gi-h {
  font-family: var(--ff-display); font-size: clamp(40px, 5.5vw, 88px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.98; letter-spacing: -0.04em;
  color: var(--on-ink);
}
.gi-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.gi-body p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink); max-width: 48ch; margin-bottom: 32px;
}
.gi-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
.chap-getinvolved .btn-ghost { border-color: var(--on-ink-mid); color: var(--on-ink); }
.chap-getinvolved .btn-ghost:hover { background: var(--on-ink); color: var(--ink); }
@media (max-width: 900px) {
  .gi-wrap { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   MUSIC PAGE — album, tracklist, sync interstitial, video strip
   ============================================================ */

/* ---------- ALBUM FRONTISPIECE (incorporates the sampler) ----------
   Three columns share the cover's edges: meta bottom-aligns to the
   cover's bottom, the title cap-height meets the cover's top, and the
   player + CTA row anchors to the bottom of the type column. */
.chap-album-front { padding: clamp(120px, 16vh, 220px) 0 clamp(80px, 12vh, 140px); }
.album-front {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(150px, 190px) min(480px, 38vw) minmax(0, 1fr);
  gap: clamp(32px, 3.5vw, 56px);
  align-items: stretch;
  max-width: 1400px; margin: 0 auto;
}
.album-meta {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid); line-height: 1.7;
  align-self: end;
}
.album-meta span { display: block; }
.album-cover {
  position: relative; aspect-ratio: 1; margin: 0;
  background: var(--ink-2); overflow: hidden;
  border: 1px solid var(--hair);
  box-shadow: 0 24px 64px -24px rgba(27, 19, 14, 0.35);
  transform: rotate(-0.5deg);
  transition: transform 0.4s var(--ease-out);
}
.album-cover:hover { transform: rotate(0deg); }
.album-cover img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(0.9);
}
.album-type { display: flex; flex-direction: column; min-width: 0; }
.album-title {
  font-family: var(--ff-display); font-weight: 400; font-style: normal;
  font-size: clamp(54px, 6vw, 88px);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.92; letter-spacing: -0.04em;
  color: var(--on-ink);
  margin-top: -0.145em;   /* pulls the cap-height up to the cover's top edge */
  margin-bottom: 20px;
}
/* keep "Brotha's Winter." on one line while the type column is narrow —
   linear ramp fitted to the column width, which shrinks faster than vw */
@media (min-width: 901px) and (max-width: 1366px) {
  .album-title { font-size: clamp(38px, calc(8.5vw - 37px), 84px); }
}
.album-title em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.album-sub {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}
.album-player { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 32px; }
/* ink, not red — red's only jobs in this viewport are the strip,
   "Winter." and the primary button. !important beats the inline
   background site.js writes on play/pause (state shows via the icon). */
.album-player .play-btn { width: 48px; height: 48px; flex: none; background: var(--char) !important; }
.album-player .play-btn:hover { transform: scale(1.06); }
.album-player .play-btn svg { width: 18px; height: 18px; fill: var(--bone); }
/* aria-pressed — set by site.js on both the button and tracklist-row
   paths — is the single source of truth for which icon shows */
.album-player .play-btn .play-icon { display: grid; place-items: center; }
.album-player .play-btn .pause-icon { display: none; place-items: center; }
.album-player .play-btn[aria-pressed="true"] .play-icon { display: none; }
.album-player .play-btn[aria-pressed="true"] .pause-icon { display: grid; }
.album-player .play-btn .pause-icon svg { margin-left: 0; }
.album-player .play-btn .pause-icon { margin-left: 0; }
.album-player-track { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.album-player-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  font-family: var(--ff-label); font-size: var(--fs-mono); letter-spacing: 0.06em;
}
.album-player-label {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--on-ink); font-weight: 500;
}
.album-player-label .sampler-title {
  font-family: inherit; font-size: inherit; font-style: normal;
  font-variation-settings: normal; letter-spacing: inherit;
  line-height: inherit; color: var(--on-ink);
}
.album-player-label .sampler-meta { color: var(--on-ink-mid); font-weight: 400; letter-spacing: 0.06em; text-transform: none; }
.album-player-label .sampler-meta::before { content: ' — '; }
.album-player-time { flex: none; color: var(--on-ink-mid); font-variant-numeric: tabular-nums; }
.album-player .progress-bar { cursor: pointer; }
.album-player .progress-fill { width: 0; }
.album-cta { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 900px) {
  .album-front { grid-template-columns: 1fr; gap: 18px; }
  .album-cover { order: 1; width: min(480px, 86vw); transform: none; }
  .album-meta { order: 2; align-self: start; }
  .album-meta span { display: inline; }
  .album-meta span + span::before { content: ' · '; }
  .album-type { order: 3; margin-top: 24px; }
  .album-title { margin-top: 0; }
  .album-player { margin-top: 28px; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .album-cover { transform: none; transition: none; }
}

/* ---------- TRACKLIST ---------- */
.chap-tracklist {
  padding: clamp(100px, 14vh, 180px) 0;
  border-top: 1px solid var(--hair);
}
.tracklist-wrap {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  max-width: 1400px; margin: 0 auto;
}
/* the printed back-cover tracklist rides beside the two track columns */
@media (min-width: 1024px) {
  .tracklist-wrap { grid-template-columns: 5fr 5fr minmax(200px, 250px); gap: clamp(40px, 4vw, 72px); align-items: start; }
  .tracklist-artefact { position: sticky; top: clamp(96px, 14vh, 140px); }
}
.tracklist-artefact { margin: 0; }
@media (max-width: 1023px) {
  .tracklist-artefact { grid-column: 1 / -1; max-width: 320px; }
}
.tracklist-side h3 {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox); margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hair);
}
.track-row {
  display: grid; grid-template-columns: 28px 1fr 56px 32px;
  gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--hair);
  align-items: center;
  transition: background 0.32s, padding 0.32s;
  cursor: pointer;
}
.track-row:hover { background: var(--ink-2); padding-left: 12px; padding-right: 12px; }
.track-num {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  color: var(--on-ink-mid); letter-spacing: 0.08em;
}
.track-title {
  font-family: var(--ff-display); font-size: clamp(20px, 2vw, 28px);
  font-weight: 400; font-variation-settings: "opsz" 72, "SOFT" 50;
  color: var(--on-ink); letter-spacing: -0.015em;
}
.track-title em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
.track-time {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  color: var(--on-ink-mid); letter-spacing: 0.08em;
}
.track-play {
  color: var(--ox); font-family: var(--ff-label);
  font-size: 16px; line-height: 1; text-align: right;
  transition: transform 0.32s var(--ease-out);
}
.track-row:hover .track-play { transform: translateX(4px) scale(1.1); }
@media (max-width: 700px) { .tracklist-wrap { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- ALBUM NOTES ---------- */
.chap-album-notes {
  padding: clamp(100px, 14vh, 180px) 0;
}
.album-notes {
  padding: 0 var(--gutter); max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 4fr 8fr;
  gap: clamp(40px, 6vw, 100px);
}
.album-notes-prose {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  font-variation-settings: "opsz" 36, "SOFT" 60;
  line-height: 1.45; letter-spacing: -0.005em;
  color: var(--on-ink); max-width: 60ch;
}
.album-notes-prose em { color: var(--ox); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1; }
.album-notes-prose p + p { margin-top: 1.2em; }
@media (max-width: 900px) { .album-notes { grid-template-columns: 1fr; } }

/* ---------- SYNC INTERSTITIAL (reuses .chap-manifesto colour) ---------- */
.chap-sync-int {
  background: var(--ox); color: var(--bone);
  padding: clamp(100px, 16vh, 200px) 0;
  position: relative; overflow: hidden;
}
.chap-sync-int .chap-meta { color: var(--bone); opacity: 0.75; }
.sync-int-wrap { padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto; }
.sync-int-h {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(48px, 8vw, 144px);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  line-height: 0.94; letter-spacing: -0.05em;
  color: var(--bone); margin-bottom: clamp(40px, 6vh, 80px);
}
.sync-int-h em { color: var(--ink); }
.sync-int-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.chap-sync-int .btn-primary { background: var(--ink); color: var(--bone); }
.chap-sync-int .btn-primary::before { background: var(--on-ink); }
.chap-sync-int .btn-primary:hover { color: var(--ink); }
.chap-sync-int .btn-ghost { border-color: rgba(242,237,227,0.4); color: var(--bone); }
.chap-sync-int .btn-ghost:hover { background: var(--on-ink); color: var(--ox); }

/* ---------- VIDEO STRIP (used on music + watch) ---------- */
.chap-video-strip { padding: clamp(120px, 16vh, 200px) 0; }
.video-strip {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1400px; margin: 0 auto;
}
.video-card {
  aspect-ratio: 16/9; background: var(--ink-2);
  position: relative; overflow: hidden;
  cursor: pointer;
}
.video-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.5) brightness(0.72) contrast(1.08);
  transition: filter 0.6s var(--ease-cinema), transform 0.6s var(--ease-cinema);
}
.video-card:hover img {
  filter: grayscale(0) brightness(0.95) contrast(1.05);
  transform: scale(1.04);
}
.video-card-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: end; padding: 16px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(14,13,11,0.78), transparent 60%);
  z-index: 2;
}
.video-card-title {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 60, "WONK" 1;
  font-size: 18px; line-height: 1.25;
  color: var(--bone);
}
.video-card-meta {
  font-family: var(--ff-label); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(246,241,231,0.78); margin-top: 4px;
}
.video-play-mark {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ox); display: grid; place-items: center;
  transition: transform 0.32s var(--ease-out), background 0.32s;
}
.video-card:hover .video-play-mark { background: var(--ox-bright); transform: scale(1.1); }
.video-play-mark::after {
  content: ''; width: 0; height: 0;
  border-left: 10px solid var(--bone);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.video-card.is-playing img,
.video-card.is-playing .video-card-overlay,
.video-card.is-playing .video-play-mark { display: none; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
@media (max-width: 900px) { .video-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .video-strip { grid-template-columns: 1fr; } }

/* ---------- VIDEO HERO PLATE (single feature, full-bleed) ---------- */
.chap-video-feature { padding: clamp(100px, 14vh, 180px) 0; }
.video-feature {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
}
.video-feature .video-card {
  aspect-ratio: 21/9;
}
.video-feature-caption {
  margin-top: 16px;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}

/* ---------- SOLO VIOLA HORIZONTAL SCROLL STRIP ---------- */
.chap-solo-strip { padding: clamp(100px, 14vh, 180px) 0; overflow: hidden; }
.solo-strip-scroller {
  padding: 0 var(--gutter);
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--ox) var(--ink-2);
}
.solo-strip-scroller::-webkit-scrollbar { height: 6px; }
.solo-strip-scroller::-webkit-scrollbar-thumb { background: var(--ox); border-radius: 3px; }
.solo-strip-scroller .video-card {
  flex: 0 0 clamp(280px, 30vw, 420px);
  scroll-snap-align: start;
}

/* ============================================================
   SHOP PAGE — Stripe-Press product grid
   ============================================================ */
.chap-shop-hero { padding: clamp(120px, 16vh, 200px) 0 clamp(60px, 8vh, 100px); }
.shop-hero-wrap {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 4fr 6fr;
  gap: clamp(40px, 6vw, 100px); align-items: end;
}
.shop-hero-cover {
  position: relative; aspect-ratio: 1;
  background: var(--ink-2); overflow: hidden;
  border: 1px solid var(--hair);
}
.shop-hero-cover::before, .shop-hero-cover::after {
  content: ''; position: absolute; background: var(--ox); z-index: 2;
  width: 28px; height: 28px;
}
.shop-hero-cover::before { top: -2px; left: -2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.shop-hero-cover::after { bottom: -2px; right: -2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.shop-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.shop-hero-h {
  font-family: var(--ff-display); font-size: clamp(48px, 8vw, 144px);
  font-weight: 800; font-style: italic;            /* manifesto cut */
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--on-ink); margin-bottom: 24px;
}
.shop-hero-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.shop-hero-sub {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid); margin-bottom: 32px;
}
@media (max-width: 900px) { .shop-hero-wrap { grid-template-columns: 1fr; gap: 32px; } }

.chap-shop {
  padding: clamp(80px, 12vh, 140px) 0 clamp(120px, 16vh, 200px);
  border-top: 1px solid var(--hair);
}
.product-grid {
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 32px);
  max-width: 1400px; margin: 0 auto;
}
.product-card {
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
}
.product-card-img {
  aspect-ratio: 4/5;
  background: var(--ink-2); overflow: hidden;
}
.product-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.25) contrast(1.05);
  transition: filter 0.8s var(--ease-cinema), transform 0.8s var(--ease-cinema);
}
.product-card:hover .product-card-img img {
  filter: grayscale(0) contrast(1.05);
  transform: scale(1.04);
}
.product-card-name {
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 60;
  line-height: 1.2;
  color: var(--on-ink);
  letter-spacing: -0.01em;
}
.product-card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.product-card-type { color: var(--on-ink-mid); }
.product-card-price { color: var(--ox); font-weight: 500; }
.product-card-flag {
  display: inline-block; padding: 3px 8px; background: var(--ink-3);
  font-family: var(--ff-label); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox-bright); width: fit-content;
}
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .product-grid { grid-template-columns: 1fr; max-width: 380px; } }

/* ---------- LISTEN-FIRST INTERSTITIAL (cream, reuses get-involved frame) ---------- */
.chap-listen-first {
  padding: clamp(100px, 14vh, 180px) 0;
  background: var(--ink-2); color: var(--on-ink);
  border-top: 1px solid var(--hair);
}
.chap-listen-first .chap-meta { color: var(--ox); }
.lf-wrap {
  padding: 0 var(--gutter); max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 100px); align-items: end;
}
.lf-h {
  font-family: var(--ff-display); font-size: clamp(36px, 5vw, 80px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 1.02; letter-spacing: -0.04em;
  color: var(--on-ink);
}
.lf-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.lf-body p { font-size: var(--fs-body-lg); line-height: var(--lh-prose); color: var(--on-ink); margin-bottom: 24px; max-width: 48ch; }
.chap-listen-first .btn-ghost { border-color: var(--on-ink-mid); color: var(--on-ink); }
.chap-listen-first .btn-ghost:hover { background: var(--on-ink); color: var(--ink); }
@media (max-width: 800px) { .lf-wrap { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   SETUP PAGE — magazine spread + gear table
   ============================================================ */
.chap-setup-hero { padding: clamp(120px, 16vh, 200px) 0; }
.setup-hero-wrap {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 80px); align-items: end;
}
.setup-hero-text { display: flex; flex-direction: column; gap: 24px; }
.setup-hero-h {
  font-family: var(--ff-display); font-size: clamp(48px, 7vw, 128px);
  font-weight: 800; font-style: italic;            /* manifesto cut */
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--on-ink);
}
.setup-hero-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.setup-hero-sub {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  font-variation-settings: "opsz" 36, "SOFT" 60;
  line-height: 1.4;
  color: var(--on-ink-mid); max-width: 46ch;
}
.setup-hero-img {
  position: relative; aspect-ratio: 4/5;
  background: var(--ink-2); overflow: hidden;
  border: 1px solid var(--hair);
  display: grid; place-items: center;
}
.setup-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.3) contrast(1.08) brightness(0.92);
}
.setup-hero-flag {
  position: absolute; left: 16px; bottom: 16px;
  padding: 8px 12px; background: rgba(14,13,11,0.85); backdrop-filter: blur(8px);
  font-family: var(--ff-label); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox-bright); border: 1px solid var(--ox);
}
@media (max-width: 900px) { .setup-hero-wrap { grid-template-columns: 1fr; } }

/* ---------- GEAR TABLE (3 columns: instrument / brand+model / why) ---------- */
.chap-gear { padding: clamp(120px, 16vh, 200px) 0; border-top: 1px solid var(--hair); }
.gear-table {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
  border-top: 1px solid var(--hair);
}
.gear-row {
  display: grid; grid-template-columns: 3fr 4fr 5fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
  transition: background 0.5s var(--ease-cinema);
}
.gear-row:hover { background: var(--ink-2); }
.gear-cat {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 400; font-variation-settings: "opsz" 72, "SOFT" 60, "WONK" 1;
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--on-ink);
}
.gear-make {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox); line-height: 1.65;
}
.gear-make .flag {
  display: inline-block; margin-top: 4px;
  padding: 3px 6px; background: var(--ink-3);
  font-size: 9px; color: var(--ox-bright);
  border: 1px solid var(--ox);
}
.gear-why {
  font-size: 15px; line-height: 1.65;
  color: var(--on-ink-mid);
}
@media (max-width: 700px) { .gear-row { grid-template-columns: 1fr; gap: 8px; } }

/* 100K — 2-col variant (no make column; brand detail moved to EPK request line below) */
.gear-table--2col .gear-row { grid-template-columns: 4fr 8fr; }
@media (max-width: 700px) { .gear-table--2col .gear-row { grid-template-columns: 1fr; gap: 8px; } }

.gear-footnote {
  padding: clamp(40px, 5vh, 56px) var(--gutter) 0;
  max-width: 1400px; margin: 0 auto;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}
.gear-footnote a { color: var(--ox); border-bottom: 1px solid var(--ox); padding-bottom: 2px; }

/* ============================================================
   PRESS PAGE — bio columns + EPK + press grid
   ============================================================ */
.chap-press-hero { padding: clamp(120px, 16vh, 200px) 0 clamp(60px, 8vh, 100px); }
.chap-press-hero h1 {
  padding: 0 var(--gutter);
  font-family: var(--ff-display);
  font-size: clamp(72px, 14vw, 280px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.88; letter-spacing: -0.05em;
  color: var(--on-ink);
}
.chap-press-hero h1 em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }

.chap-bio-pair { padding: clamp(80px, 12vh, 140px) 0; border-top: 1px solid var(--hair); }
.bio-pair-wrap {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
}
.bio-col h3 {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox); margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 1px solid var(--hair);
}
.bio-col p {
  font-size: var(--fs-body); line-height: var(--lh-prose);
  color: var(--on-ink); margin-bottom: 18px; max-width: 56ch;
}
.bio-col p em { font-style: italic; color: var(--ox); }
.bio-col .btn-ghost { margin-top: 16px; }
@media (max-width: 800px) { .bio-pair-wrap { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- HI-RES PORTRAITS + EPK ROW ---------- */
.chap-epk { padding: clamp(80px, 12vh, 140px) 0; border-top: 1px solid var(--hair); }
.epk-wrap {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 100px); align-items: end;
}
.epk-h {
  font-family: var(--ff-display); font-size: clamp(40px, 5.5vw, 88px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.98; letter-spacing: -0.04em;
  color: var(--on-ink);
}
.epk-h em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.epk-body p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink-mid); margin-bottom: 24px; max-width: 50ch;
}
.epk-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 800px) { .epk-wrap { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================================
   LEGAL PAGE — plain text
   ============================================================ */
.chap-legal { padding: clamp(140px, 18vh, 220px) 0 clamp(120px, 16vh, 200px); }
.legal-wrap {
  padding: 0 var(--gutter); max-width: 880px; margin: 0 auto;
}
.legal-wrap h1 {
  font-family: var(--ff-display);
  font-size: clamp(56px, 9vw, 160px);
  font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.94; letter-spacing: -0.045em;
  color: var(--on-ink); margin-bottom: clamp(48px, 6vh, 80px);
}
.legal-wrap h1 em { font-style: italic; color: var(--ox); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.legal-wrap h2 {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 400; font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ox); margin: clamp(40px, 5vh, 64px) 0 16px;
}
.legal-wrap p, .legal-wrap li {
  font-size: var(--fs-body); line-height: var(--lh-prose);
  color: var(--on-ink); margin-bottom: 16px; max-width: 60ch;
}
.legal-wrap ul { list-style: disc; margin-left: 24px; }
.legal-wrap a { color: var(--ox); border-bottom: 1px solid var(--ox); }
.legal-wrap strong { color: var(--on-ink); font-weight: 500; }
.legal-flag {
  display: inline-block; margin-bottom: 32px;
  padding: 6px 12px; background: var(--ink-3);
  font-family: var(--ff-label); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox-bright); border: 1px solid var(--ox);
}


/* ============================================================
   ╔══════════════════════════════════════════════════════════╗
   ║  LUXURY LAYER — Private Rooms · Friendliness · Gold      ║
   ║  For the $10–15K private buyer (hip new money, WEF, etc) ║
   ╚══════════════════════════════════════════════════════════╝
   ============================================================ */

/* Gold meta variant — discreet luxury signal */
.chap-meta--gold { color: var(--gold); }
.chap-meta--gold span:first-child::after { color: var(--gold); opacity: 0.7; }

/* Italic em inside hero credits (private signals) */
.hero-credits li em {
  font-family: var(--ff-display);
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 70;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--gold);
  font-size: 1.15em;
  margin-right: 2px;
}

/* ---------- PRIVATE ROOMS INTERLUDE ---------- */
.chap-private {
  padding: clamp(100px, 14vh, 180px) 0;
  text-align: left;
  background: var(--ink);
  position: relative;
}
.chap-private::before {
  content: ''; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80%; max-width: 1200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.5;
}
.private-wrap {
  padding: 0 var(--gutter);
  max-width: 1400px;
  margin: 0 auto;
}
.private-display {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(36px, 5.4vw, 96px);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 1.02; letter-spacing: -0.04em;
  color: var(--on-ink);
  margin-bottom: clamp(32px, 5vh, 48px);
}
.private-display span {
  display: inline; margin-right: 0.45em;
}
.private-display em {
  font-style: italic; color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.private-sub {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  max-width: 60ch;
}

/* ---------- HOW IT WORKS — friendliness moment ---------- */
.chap-howitworks {
  padding: clamp(120px, 18vh, 220px) 0;
  background: var(--ink);
  position: relative;
}
.chap-howitworks::before {
  content: ''; position: absolute;
  top: 0; right: 0;
  width: 50vw; height: 50%;
  background: radial-gradient(ellipse at top right, rgba(184,148,92,0.06), transparent 70%);
  pointer-events: none;
}
.howitworks-wrap {
  padding: 0 var(--gutter);
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(60px, 8vh, 100px);
  position: relative; z-index: 1;
}
.howitworks-display {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(40px, 6vw, 112px);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  line-height: 0.98; letter-spacing: -0.045em;
  color: var(--on-ink); max-width: 18ch;
}
.howitworks-display em {
  font-style: italic; color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.howitworks-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--hair);
  padding-top: clamp(40px, 5vh, 56px);
}
.howitworks-steps li {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hiw-num {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--gold);
}
.howitworks-steps p {
  font-size: var(--fs-body-lg); line-height: 1.45;
  color: var(--on-ink);
  font-family: var(--ff-sans);
}
@media (max-width: 1024px) {
  .howitworks-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .howitworks-steps { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   100K PHASE A — HERO VIDEO (behind headline)
   The 2.5 MB transition MP4 sits at z-index -1 inside .chap-hero,
   tinted down so the type and CTAs remain dominant.
   ============================================================ */
.chap-hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-video {
  /* bulletproof full-bleed cover via viewport units — the element is always
     sized at least as large as the hero in BOTH axes (16:9), centred and
     clipped, so it never letterboxes into black bands even where object-fit
     on <video> is ignored. */
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  z-index: 0;
  /* bright, alive — the daylight is the point (NEW-ERA §2.2 / §4.4) */
  filter: brightness(0.94) contrast(1.04) saturate(0.92);
  pointer-events: none;
}
/* localized scrim — BOTTOM ONLY, so the centre stays bright and the
   headline (anchored bottom-left) reads. Never darken the whole frame. */
.chap-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(14,13,11,0.18) 0%,
      rgba(14,13,11,0.00) 26%,
      rgba(14,13,11,0.00) 52%,
      rgba(14,13,11,0.74) 100%),
    radial-gradient(132% 90% at 15% 95%, rgba(14,13,11,0.68) 0%, rgba(14,13,11,0) 62%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}


/* =============================================================
   REBUILD §3 — NEW HOMEPAGE SPREADS (May 25 2026)
   ============================================================= */

/* ---------- NOISE OVERLAY (REBUILD §1.4 — push to 10-12%) ---------- */
.noise-overlay {
  /* retired — the static 5% grain in body::before is the only grain now
     (NEW-ERA §4.5 "always-on film-grain at ~5%"; no animated TV-static layer). */
  display: none;
}
@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-4%, 3%); }
  50%      { transform: translate(3%, -2%); }
  75%      { transform: translate(-2%, -4%); }
}
@media (prefers-reduced-motion: reduce) {
  .noise-overlay { animation: none; opacity: 0.07; }
}

/* ---------- SPREAD 01 — HERO META LINES (no overlay text) ---------- */
.hero-meta-l,
.hero-meta-r {
  position: absolute;
  bottom: clamp(20px, 4vh, 36px);
  z-index: 6;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.hero-meta-l {
  left: var(--gutter);
  display: flex; gap: 14px; align-items: center;
}
.hero-meta-l .hero-meta-divider { opacity: 0.45; }
.hero-meta-r {
  right: var(--gutter);
  border-bottom: 1px solid rgba(242,237,227,0.45);
  padding-bottom: 4px;
}

/* ---------- SPREAD 02 — HEADLINE + STAKES (60/40 asymmetric) ---------- */
.chap-stakes {
  background: var(--ink);
  color: var(--on-ink);
  min-height: 100vh;
  padding: clamp(96px, 18vh, 220px) var(--gutter) clamp(80px, 12vh, 160px);
  display: flex; align-items: center;
  position: relative;
}
.stakes-grid {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: clamp(48px, 7vw, 120px);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  align-items: start;
}
.stakes-headline {
  font-family: var(--ff-display);
  font-weight: 200;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-size: clamp(56px, 11.2vw, 148px);
  line-height: 0.93;
  letter-spacing: -0.028em;
  color: var(--on-ink);
  margin: 0;
}
.stakes-headline em {
  font-style: italic;
  font-weight: 200;
  color: var(--water);            /* THE one blue moment — NEW-ERA §2.4 */
  display: inline-block;
}
/* the single licensed blue — hero word "water" only, nowhere else */
.water { color: var(--water); font-style: italic; }
.stakes-headline sup {
  font-size: 0.30em;
  font-weight: 300;
  vertical-align: super;
  color: var(--on-ink-mid);
  margin-left: 0.05em;
}
.stakes-footnote {
  margin: clamp(36px, 6vh, 72px) 0 0;
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--on-ink-mid);
  max-width: 44ch;
}
.stakes-ledger-col { padding-top: clamp(40px, 10vh, 120px); }
.stakes-ledger-eyebrow {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mid);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(150, 143, 132, 0.28);
}
.credits-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}
.credits-ledger li {
  font-family: var(--ff-display);
  font-weight: 800;
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.95;
  letter-spacing: 0.015em;
  color: var(--on-ink);
}
.credits-ledger li + li { border-top: 1px solid rgba(150, 143, 132, 0.10); }
.stakes-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 4vh, 52px);
  padding: 14px 22px;
  background: var(--ox);
  color: var(--bone);
  font-family: var(--ff-label);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ox);
  transition: background 0.32s var(--ease-cinema), border-color 0.32s var(--ease-cinema);
}
.stakes-cta:hover { background: var(--ox-bright); border-color: var(--ox-bright); }

@media (max-width: 900px) {
  .stakes-grid { grid-template-columns: 1fr; gap: clamp(48px, 8vh, 80px); }
  .stakes-ledger-col { padding-top: 0; }
}

/* ---------- SPREAD 03 — MANIFESTO (full oxblood, harder) ---------- */
.chap-manifesto {
  background: var(--ox);
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(96px, 16vh, 200px) var(--gutter);
  text-align: center;
  color: var(--bone);
  position: relative;
}
.mani-wrap { max-width: 1500px; }
.mani-spread-quote {
  font-family: var(--ff-display);
  font-weight: 800;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(56px, 11.5vw, 200px);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: var(--bone);
  margin: 0;
}
.mani-spread-quote em { font-style: italic; }
.mani-attrib {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.72);
  margin: clamp(36px, 5vh, 64px) 0 0;
}
.mani-link {
  display: inline-block;
  margin-top: clamp(44px, 7vh, 84px);
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid rgba(242, 237, 227, 0.45);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.mani-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- SPREAD 04 — THE WORK (full-bleed treated image) ---------- */
.chap-thework {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--ink);
}
.thework-figure {
  position: absolute; inset: 0; margin: 0;
}
.thework-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(0.85) contrast(1.18) brightness(0.92);
}
.thework-overlay {
  position: absolute; inset: 0;
  background: var(--ox);
  mix-blend-mode: multiply;
  opacity: 0.22;
}
.thework-cap-l,
.thework-cap-r {
  position: absolute;
  bottom: clamp(20px, 4vh, 36px);
  z-index: 6;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.thework-cap-l {
  left: var(--gutter);
  display: flex; flex-direction: column; gap: 6px;
}
.thework-cap-l .thework-cap-photog { color: rgba(242,237,227,0.62); }
.thework-cap-r {
  right: var(--gutter);
  border-bottom: 1px solid var(--bone);
  padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.thework-cap-r:hover { color: var(--ox-bright); border-color: var(--ox-bright); }

/* =============================================================
   REBUILD §3.5–§3.7 — DAY 3: Listening Bar, Da Nang split, Footer
   ============================================================= */

/* ---------- SPREAD 05 — LISTENING BAR (cream, single artefact card) ---------- */
.chap-listening {
  background: var(--ink);
  color: var(--on-ink);
  min-height: 100vh;
  padding: clamp(96px, 14vh, 180px) var(--gutter);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.listening-card {
  width: 100%;
  max-width: 520px;
  display: flex; flex-direction: column;
  gap: clamp(22px, 3vh, 32px);
  text-align: left;
}
.listening-cover {
  margin: 0;
  aspect-ratio: 1 / 1;
  background: var(--ink);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.05),
    0 18px 40px -20px rgba(0,0,0,0.25),
    0 40px 80px -40px rgba(0,0,0,0.3);
}
.listening-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-cinema);
}
.listening-card:hover .listening-cover img { transform: scale(1.02); }

.listening-text { display: flex; flex-direction: column; gap: 6px; }
.listening-eyebrow {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ox);
  margin: 0;
}
.listening-title {
  font-family: var(--ff-display);
  font-weight: 200;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--on-ink);
  margin: 0;
}

.listening-controls {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
}
.listening-controls .play-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ox);
  color: var(--bone);
  border: 1px solid var(--ox);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.32s var(--ease-cinema), transform 0.32s var(--ease-cinema);
  flex-shrink: 0;
}
.listening-controls .play-btn:hover { background: var(--ox-bright); border-color: var(--ox-bright); transform: scale(1.04); }
.listening-controls .play-btn svg { width: 18px; height: 18px; fill: currentColor; }
.listening-controls .play-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.listening-wave-wrap {
  position: relative;
  min-height: 56px;
  display: flex; align-items: center;
}
.listening-wave {
  width: 100%;
  height: 56px;
  cursor: pointer;
}
/* fallback bar that shows if wavesurfer never mounts */
.listening-wave-wrap:empty::after,
.listening-wave:empty::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: 50%; height: 2px;
  background: rgba(242, 237, 227, 0.14);
}

.listening-time {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--on-ink-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.listening-caption {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--on-ink-mid);
  margin: 0;
}
.listening-caption em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--on-ink);
}

.listening-cta {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 12px 0;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ox);
  border-bottom: 1px solid var(--ox);
  transition: color 0.3s, border-color 0.3s, gap 0.3s;
}
.listening-cta:hover { color: var(--ox-bright); border-color: var(--ox-bright); gap: 16px; }

@media (max-width: 600px) {
  .listening-controls { grid-template-columns: 48px 1fr; row-gap: 8px; }
  .listening-time { grid-column: 2 / 3; justify-self: end; }
}

/* ---------- SPREAD 06 — DA NANG SPLIT (50/50, image + ink text) ---------- */
.chap-danang {
  background: var(--ink);
  color: var(--on-ink);
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.danang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.danang-figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
}
.danang-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.danang-text {
  padding: clamp(80px, 12vh, 140px) clamp(40px, 6vw, 96px);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(24px, 3.5vh, 36px);
  max-width: 640px;
}
.danang-eyebrow {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ox-bright);
  margin: 0;
}
.danang-h {
  font-family: var(--ff-display);
  font-weight: 200;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-size: clamp(48px, 7vw, 92px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--on-ink);
  margin: 0;
}
.danang-h em {
  font-style: italic;
  background: linear-gradient(180deg, var(--ox-bright) 0%, var(--ox) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  display: inline-block;
}
.danang-body {
  font-family: var(--ff-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on-ink-mid);
  margin: 0;
  max-width: 38ch;
}
.danang-cta {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 12px 0;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid var(--bone);
  transition: color 0.3s, border-color 0.3s, gap 0.3s;
}
.danang-cta:hover { color: var(--ox-bright); border-color: var(--ox-bright); gap: 16px; }

@media (max-width: 900px) {
  .danang-grid { grid-template-columns: 1fr; }
  .danang-figure { min-height: 56vh; }
  .danang-text { padding: clamp(56px, 8vh, 96px) var(--gutter); }
}

/* ---------- FOOTER — trimmed per REBUILD §3.7 ---------- */
.site-foot {
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(64px, 9vh, 120px) var(--gutter) clamp(32px, 5vh, 64px);
  border-top: 1px solid var(--hair);
  position: relative;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(36px, 4vw, 72px);
  max-width: 1200px;
  margin: 0 auto clamp(48px, 8vh, 96px);
  align-items: start;
}
.foot-news-line {
  font-family: var(--ff-body); font-size: 15px; line-height: 1.55;
  color: var(--on-ink-mid); margin: 0 0 16px; max-width: 30ch;
}
.foot-col .foot-h {
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mid);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.foot-col .foot-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.foot-col .foot-list a {
  font-family: var(--ff-sans);
  font-size: 15px;
  color: var(--on-ink);
  transition: color 0.3s;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.foot-col .foot-list a:hover { color: var(--ox); border-bottom-color: var(--ox); }

.foot-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  font-family: var(--ff-label);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mid);
}
.foot-credit {
  color: var(--on-ink-mid);
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.foot-credit:hover { color: var(--ox); border-bottom-color: var(--ox); }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 36px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   REBUILD §7 — VIEW TRANSITIONS API (Day 4)
   Replaces the old page-curtain JS. Chrome 111+, Safari 18+.
   Graceful no-op on Firefox / older browsers (instant nav).
   ============================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }
@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

/* picture/figure used in spreads — ensure full coverage */
.thework-figure picture,
.danang-figure picture { display: contents; }
.listening-cover picture { display: block; width: 100%; height: 100%; }
.listening-cover picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================
   TYPOGRAPHIC ALBUM COVER PLACEHOLDER
   (Used until Rahmaan supplies the real ABBW master. Replaces
   the archived AI "Built Different" poster. Oliver, May 25.)
   ============================================================= */

/* --- index.html Spread 05 listening cover --- */
.listening-cover--type {
  background: var(--ox);
  color: var(--bone);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 6vw, 56px);
  position: relative;
}
.listening-cover--type::before,
.listening-cover--type::after {
  content: ''; position: absolute;
  left: 16px; right: 16px;
  height: 1px; background: rgba(242, 237, 227, 0.18);
}
.listening-cover--type::before { top: 16px; }
.listening-cover--type::after  { bottom: 16px; }
.listening-cover-type {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 18px;
  width: 100%;
  text-align: left;
}
.listening-cover-mark,
.listening-cover-foot {
  font-family: var(--ff-label);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.72);
}
.listening-cover-title {
  font-family: var(--ff-display);
  font-weight: 200; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.listening-cover-title em { font-style: italic; }

/* --- music.html album cover (large hero placement) --- */
.album-cover--type {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--ox);
  color: var(--bone);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  margin: 0;
  position: relative;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 18px 40px -20px rgba(0,0,0,0.35),
    0 40px 80px -40px rgba(0,0,0,0.4);
}
.album-cover--type::before,
.album-cover--type::after {
  content: ''; position: absolute;
  left: 20px; right: 20px;
  height: 1px; background: rgba(242, 237, 227, 0.18);
}
.album-cover--type::before { top: 20px; }
.album-cover--type::after  { bottom: 20px; }
.album-cover-type {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 24px;
  width: 100%;
  text-align: left;
}
.album-cover-mark,
.album-cover-foot {
  font-family: var(--ff-label);
  font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.72);
}
.album-cover-title {
  font-family: var(--ff-display);
  font-weight: 200; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.album-cover-title em { font-style: italic; }

/* --- music.html sampler artefact (smaller square card) --- */
.sampler-artefact--type {
  aspect-ratio: 1 / 1;
  background: var(--ox);
  color: var(--bone);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 3vw, 40px);
  margin: 0;
  position: relative;
}
.sampler-artefact--type::before,
.sampler-artefact--type::after {
  content: ''; position: absolute;
  left: 14px; right: 14px;
  height: 1px; background: rgba(242, 237, 227, 0.18);
}
.sampler-artefact--type::before { top: 14px; }
.sampler-artefact--type::after  { bottom: 14px; }
.sampler-artefact-type {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 14px;
  text-align: left;
}
.sampler-artefact-mark,
.sampler-artefact-foot {
  font-family: var(--ff-label);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.72);
}
.sampler-artefact-title {
  font-family: var(--ff-display);
  font-weight: 200; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.sampler-artefact-title em { font-style: italic; }


/* =============================================================
   CINEMATIC CHROME (May 26 2026) — homepage only
   Replaces the status-bar pattern with: a lower-left wordmark
   inside the hero, a single "menu" trigger top-right that opens
   a full-screen overlay, and a slim nav bar that reveals once
   the hero has scrolled past.
   ============================================================= */

/* The homepage no longer renders .status-bar, .hero-meta-l, .hero-meta-r
   or .scroll-hint inside .chap-hero — those rules above are dormant on
   index.html and intentionally left in place for other pages. */

/* ---------- HERO WORDMARK (title card) ---------- */
.hero-wordmark {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(40px, 9vh, 96px);
  z-index: 6;
  pointer-events: none;
}
.hero-wordmark-name {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(40px, 7.4vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--bone);
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(14px);
  animation: hero-wordmark-in 1.4s var(--ease-cinema) 0.4s forwards;
}
@keyframes hero-wordmark-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-wordmark-name { animation: none; opacity: 1; transform: none; }
}

/* ---------- MENU TRIGGER (top-right, always available at hero) ---------- */
.menu-trigger {
  position: fixed;
  top: clamp(20px, 3.4vh, 36px);
  right: var(--gutter);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  background: transparent;
  cursor: pointer;
  color: var(--bone);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.menu-trigger[data-state="hidden"] {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.menu-trigger-label {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--bone);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  transition: transform 0.32s var(--ease-out);
}
.menu-trigger-mark {
  width: 18px; height: 1px; background: var(--on-ink);
  display: inline-block;
  box-shadow: 0 5px 0 0 var(--on-ink);
  opacity: 0.85;
  transition: transform 0.32s var(--ease-out), opacity 0.32s var(--ease-out);
}
.menu-trigger:hover .menu-trigger-label { transform: translateX(-2px); }
.menu-trigger:hover .menu-trigger-mark { opacity: 1; transform: translateX(2px); }

/* ---------- REVEAL NAV (slides in once past hero) ---------- */
.reveal-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  padding: 14px var(--gutter);
  background: rgba(5,5,5,0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 0.5px solid rgba(242,237,227,0.08);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.7s var(--ease-cinema), opacity 0.5s var(--ease-out);
}
.reveal-nav[data-state="visible"] {
  transform: translateY(0);
  opacity: 1;
}
.reveal-nav-mark {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bone);
  white-space: nowrap;
}
.reveal-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.reveal-nav-links a {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--on-ink-mid);
  transition: color 0.32s var(--ease-out);
}
.reveal-nav-links a:hover,
.reveal-nav-links a.is-active { color: var(--bone); }
.reveal-nav-cta {
  margin-left: clamp(8px, 1.4vw, 20px);
  padding: 8px 16px;
  border: 0.5px solid rgba(242,237,227,0.45);
  color: var(--bone) !important;
  transition: background 0.32s var(--ease-out), border-color 0.32s var(--ease-out);
}
.reveal-nav-cta:hover {
  background: var(--ox);
  border-color: var(--ox);
}
@media (max-width: 720px) {
  .reveal-nav-links { gap: 14px; }
  .reveal-nav-links a { font-size: 14px; }
  .reveal-nav-links a:not(.reveal-nav-cta) { display: none; }
  .reveal-nav-mark { font-size: 16px; }
}

/* ---------- FULL-SCREEN MENU OVERLAY ---------- */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4.4vh, 56px) var(--gutter);
  background: rgba(5,5,5,0.94);
  backdrop-filter: blur(28px) saturate(1.05);
  -webkit-backdrop-filter: blur(28px) saturate(1.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s var(--ease-out);
}
.menu-overlay[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.menu-overlay[hidden] { display: none; }
.menu-close {
  align-self: flex-end;
  background: transparent;
  cursor: pointer;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: 19px;
  color: var(--bone);
  padding: 4px 0;
  border-bottom: 0.5px solid rgba(242,237,227,0.25);
  transition: border-color 0.32s var(--ease-out);
}
.menu-close:hover { border-color: var(--bone); }
.menu-list {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 18px);
  margin: auto 0;
  padding: clamp(20px, 6vh, 60px) 0;
}
.menu-list a {
  font-family: var(--ff-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(54px, 10.4vw, 168px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--bone);
  display: inline-block;
  transition: color 0.4s var(--ease-out), transform 0.6s var(--ease-cinema);
  transform: translateY(24px);
  opacity: 0;
}
.menu-list a em { font-style: italic; }
.menu-overlay[data-state="open"] .menu-list a {
  opacity: 1; transform: translateY(0);
}
.menu-overlay[data-state="open"] .menu-list a:nth-child(1) { transition-delay: 0.08s; }
.menu-overlay[data-state="open"] .menu-list a:nth-child(2) { transition-delay: 0.14s; }
.menu-overlay[data-state="open"] .menu-list a:nth-child(3) { transition-delay: 0.20s; }
.menu-overlay[data-state="open"] .menu-list a:nth-child(4) { transition-delay: 0.26s; }
.menu-overlay[data-state="open"] .menu-list a:nth-child(5) { transition-delay: 0.32s; }
.menu-list a:hover { color: var(--ox-bright); }
.menu-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 0.5px solid rgba(242,237,227,0.18);
}
.menu-book {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  color: var(--bone);
  display: inline-flex; align-items: baseline; gap: 12px;
  transition: color 0.32s var(--ease-out), letter-spacing 0.32s var(--ease-out);
}
.menu-book:hover { color: var(--ox-bright); letter-spacing: 0; }
.menu-book span { display: inline-block; transition: transform 0.4s var(--ease-cinema); }
.menu-book:hover span { transform: translateX(6px); }
.menu-signature {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: 16px;
  color: var(--on-ink-mid);
  letter-spacing: 0;
  text-align: right;
}
@media (max-width: 720px) {
  .menu-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .menu-signature { text-align: left; }
}

/* When menu open, lock body scroll */
body.menu-open { overflow: hidden; }

/* ============================================================
   NEW-ERA PHASE 0 — shared additions
   ============================================================ */

/* skip-to-content (a11y, NEW-ERA §10) */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-150%);
  background: var(--ox); color: var(--bone);
  font-family: var(--ff-label); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 18px;
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--bone); outline-offset: 2px; }

/* visible keyboard focus on all interactive chrome (NEW-ERA §10) */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ox-bright); outline-offset: 3px;
}

/* footer sign-off — Fraunces italic sigil (NEW-ERA §6) */
.foot-signature {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(28px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.03em;
  color: var(--bone); margin: 0 0 clamp(40px, 6vh, 72px);
}

/* 6th overlay nav item keeps the stagger going */
.menu-overlay[data-state="open"] .menu-list a:nth-child(6) { transition-delay: 0.38s; }

/* shared CTAs — used by the §7 homepage sections and beyond */
.cta-ox {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: var(--ox); color: var(--bone);
  font-family: var(--ff-label); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; width: fit-content;
  transition: background 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.cta-ox:hover { background: var(--ox-bright); gap: 14px; }
.cta-ox span { transition: transform 0.3s var(--ease-cine); }
.cta-ox:hover span { transform: translateX(3px); }
.cta-line {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-family: var(--ff-label); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ox);
  border-bottom: 1px solid var(--ox); padding-bottom: 4px;
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s;
}
.cta-line:hover { color: var(--ox-bright); border-color: var(--ox-bright); gap: 14px; }
.cta-line span { transition: transform 0.3s var(--ease-cine); }
.cta-line:hover span { transform: translateX(3px); }
/* shared eyebrow sizing bump to the new label scale */
.eyebrow { font-family: var(--ff-label); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox); }

/* ============================================================
   PHASE 1 — §7 HOMEPAGE
   ============================================================ */

/* §7.1 — HERO content: headline on the bright video, anchored bottom-left.
   In flow (not absolute) so short viewports grow the section instead of
   pushing the headline up into the nav lockup; bottom gap comes from the
   section's padding-bottom. */
.hero-content {
  position: relative;
  z-index: 4;
  margin: auto var(--gutter) 0;
  max-width: 1180px;
  /* Scroll-intro parallax: the content lags so the headline tracks the
     shrinking nav lockup at a constant gap instead of catching it.
     The lockup's bottom rises by (7vh + --mark-fs × 1.2) over the intro's
     320px of scroll (see .nav-mark transform + navHeroIntro RANGE); the
     remainder is how far the content must lag. Keep the three in sync.
     --herop = intro progress; 0 on subpages/reduced-motion (set in site.js). */
  transform: translateY(calc(var(--herop, 0) * max(0px, 320px - 7vh - clamp(72px, 6.6vw, 93px) * 1.2)));
  will-change: transform;
}
.hero-headline {
  font-family: var(--ff-display);
  font-weight: 800; font-style: italic;            /* manifesto cut */
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(54px, 9.4vw, 152px);
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--bone); margin: 0; max-width: 14ch;
  text-shadow: 0 1px 2px rgba(0,0,0,0.62), 0 2px 16px rgba(0,0,0,0.5);
}
.hero-headline .water {
  color: var(--water); font-style: italic;   /* THE one blue */
  text-shadow: 0 2px 26px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.6);
}
.hero-cred {
  margin: clamp(20px, 2.6vh, 30px) 0 0;
  max-width: 56ch;
  font-family: var(--ff-body); font-weight: 400;
  font-size: clamp(15px, 1.05vw, 18px); line-height: 1.6;
  color: var(--bone);
  text-shadow: 0 1px 10px rgba(0,0,0,0.7);
}
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(22px, 3vh, 34px); }
/* §7.1b — monochrome proof row: the rooms he plays, as logos not a text list */
.hero-proof {
  list-style: none; padding: 0;
  margin: clamp(26px, 4vh, 44px) 0 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(20px, 3.2vw, 50px);
  /* wide enough for all six logos (incl. the 200px Carnegie Hall
     wordmark) on a single row at desktop; small screens still wrap */
  max-width: 900px;
}
.hero-proof li { display: flex; }
.hero-proof img {
  height: 40px; width: auto; display: block;
  filter: brightness(0) invert(1);          /* force monochrome white */
  opacity: 0.5;
  transition: opacity 0.45s var(--ease-out);
  -webkit-filter: brightness(0) invert(1);
}
.hero-proof img[src*="grammy"] { height: 54px; }
.hero-proof li:hover img,
.hero-proof img:focus-visible { opacity: 1; }
/* text wordmark (e.g. NFL) — no logo asset exists; matches the monochrome logo row */
.hero-proof .hp-mark svg {
  height: 38px; width: auto; display: block;
  color: #fff; opacity: 0.5;
  transition: opacity 0.45s var(--ease-out);
}
.hero-proof .hp-mark:hover svg { opacity: 1; }
@media (max-width: 600px) {
  .hero-proof { gap: 18px 26px; margin-top: clamp(20px, 3vh, 30px); }
  .hero-proof img { height: 32px; }
  .hero-proof img[src*="grammy"] { height: 42px; }
  .hero-proof .hp-mark svg { height: 30px; }
}
/* ghost CTA for use over imagery */
.cta-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 1px solid rgba(242,237,227,0.6); color: var(--bone);
  font-family: var(--ff-label); font-size: 13px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.cta-ghost:hover { background: rgba(242,237,227,0.12); border-color: var(--bone); gap: 14px; }
.cta-ghost span { transition: transform 0.3s var(--ease-cine); }
.cta-ghost:hover span { transform: translateX(3px); }
@media (max-width: 600px) {
  .hero-headline { max-width: 11ch; }
}

/* §7.6 — record cover as a real image (album-abbw-front) */
.listening-cover--img { background: var(--ink-2); }
.listening-cover--img picture, .listening-cover--img img { width: 100%; height: 100%; display: block; }
.listening-cover--img img { object-fit: cover; transition: transform 0.6s var(--ease-cine); }
.listening-card:hover .listening-cover--img img { transform: scale(1.02); }
.listening-meta {
  font-family: var(--ff-label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-mid); margin: 0;
}


/* ===== §7 homepage sections (built + adversarially reviewed) ===== */

/* --- §7 who --- */
.chap-who {
  padding: var(--section) var(--gutter);
  background: var(--ink);
}

.who-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 56fr 44fr;
  align-items: center;
  column-gap: clamp(40px, 6vw, 88px);
}

/* Portrait — the single most important homepage portrait: large, intentional */
.who-portrait {
  margin: 0;
  position: relative;
}

.who-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ox-deep);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
}

.who-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 721;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.06) brightness(0.92);
}
/* +20% portrait: wider stage for the who-section, image takes the
   larger share — text column width stays ~constant. Desktop only:
   must not outrank the ≤900px single-column collapse */
@media (min-width: 901px) {
  .chap-who .who-inner {
    max-width: 1320px;
    grid-template-columns: 60fr 40fr;
  }
}
/* hover: the WHOLE frame grows outward (not an in-frame zoom).
   The scale lives on the <picture> wrapper — not the figure — so it
   never fights the .fade-up entrance transitions on direct children;
   the oxblood tint moves onto the same wrapper so it scales along. */
.who-portrait { overflow: visible; }
.who-portrait::after { content: none; }
.who-portrait picture {
  display: block; position: relative;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.who-portrait picture::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--ox-deep);
  mix-blend-mode: multiply;
  opacity: 0.14;
  pointer-events: none;
}
.who-portrait:hover picture { transform: scale(1.03); }

/* record + shop teasers — same treatment: +20% imagery, whole-frame
   hover growth on the <picture> wrapper (clear of .fade-up children) */
.listening-card { max-width: 624px; }              /* 520 × 1.2 */
.listening-cover { overflow: visible; }
.listening-cover picture {
  display: block; width: 100%; height: 100%;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.listening-card:hover .listening-cover picture { transform: scale(1.03); }
.listening-card:hover .listening-cover img { transform: none; }  /* retire the old in-frame zoom */

@media (min-width: 901px) {
  .chap-shop-teaser .shopt-inner { grid-template-columns: minmax(0, 55%) 1fr; }  /* 46% × 1.2 */
}
.shopt-figure { border: 0; }                       /* hairline rides the scaling frame instead */
.shopt-figure picture {
  display: block; width: 100%; height: 100%;
  border: 1px solid var(--hair);
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.shopt-figure:hover picture { transform: scale(1.03); }

/* danang — the claim headline runs long: one size step down;
   the luthier line reads as the small supporting text */
.chap-danang .danang-h { font-size: clamp(32px, 3.6vw, 58px); }
.chap-danang .danang-body { font-size: var(--fs-body); }

@media (prefers-reduced-motion: reduce) {
  .who-portrait picture,
  .listening-cover picture,
  .shopt-figure picture { transition: none; }
  .who-portrait:hover picture,
  .listening-card:hover .listening-cover picture,
  .shopt-figure:hover picture { transform: none; }
}

/* ============================================================
   DA NANG — bio "stamp" (margin annotation, not a content block)
   ============================================================ */
.bio-wrap--stamp { grid-template-columns: 3fr 9fr; }
.bio-meta--stamp {
  color: var(--on-ink); opacity: 0.55;
  /* optically align the stamp's first line with the prose's
     first-line cap height (display type sits lower in its box) */
  padding-top: clamp(6px, 0.8vw, 13px);
}
.bio-meta--stamp span { display: block; }
@media (max-width: 900px) {
  .bio-wrap--stamp { gap: 16px; }
  .bio-meta--stamp { padding-top: 0; }
  .bio-meta--stamp span { display: inline; }
  .bio-meta--stamp span + span::before { content: ' · '; }
}

/* Text column — divided from the portrait by a quiet vertical hairline */
.who-text {
  position: relative;
  padding-left: clamp(40px, 6vw, 88px);
  border-left: 1px solid var(--hair);
}

.who-text .eyebrow {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.who-h {
  font-family: var(--ff-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--bone);
  font-size: var(--fs-h2);
  margin: 0 0 clamp(24px, 2.8vw, 36px);
  text-wrap: balance;
}

.who-h em {
  font-style: italic;
  font-weight: 300;
}

.who-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--bone-mid);
  max-width: var(--measure);
  margin: 0 0 clamp(28px, 3vw, 40px);
}

@media (max-width: 900px) {
  .who-inner {
    grid-template-columns: 1fr;
    row-gap: clamp(36px, 7vw, 56px);
  }

  .who-text {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
    padding-top: clamp(32px, 7vw, 48px);
  }

  .who-body {
    max-width: none;
  }
}

/* --- §7 gaga --- */
.chap-gaga {
  padding: var(--section) var(--gutter);
  background: var(--ink);
}

.gaga-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.gaga-head {
  max-width: var(--measure);
}

.gaga-h2 {
  margin: 0.6em 0 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--bone);
  text-wrap: balance;
}

.gaga-h2 em {
  font-style: italic;
  font-weight: 300;
}

.gaga-body {
  margin: 1.4rem 0 0;
  max-width: var(--measure);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--bone-mid);
}

/* Media: embed dominant (2/3), still as supporting frame (1/3) */
.gaga-media {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(16px, 1.6vw, 28px);
  align-items: start;
  margin-top: clamp(40px, 6vh, 72px);
}

.gaga-embed {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  overflow: hidden;
}

.gaga-embed iframe {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gaga-still {
  margin: 0;
  position: relative;
  border: 1px solid var(--hair-soft);
  overflow: hidden;
  background: var(--ink-2);
}

.gaga-still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.06) brightness(0.92);
}

/* Credits strip: uppercase label row, dot-separated */
.gaga-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0;
  margin: clamp(32px, 4.5vh, 52px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
  padding-top: clamp(18px, 2.4vh, 28px);
}

.gaga-credits li {
  font-family: var(--ff-label);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--bone-dim);
}

.gaga-credits li:not(:last-child)::after {
  content: "·";
  margin: 0 0.85em;
  color: var(--ox);
}

.gaga-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(36px, 5vh, 56px);
}

@media (max-width: 900px) {
  .gaga-media {
    grid-template-columns: 1fr;
    gap: clamp(14px, 3vw, 22px);
  }

  .gaga-still {
    max-width: 480px;
  }
}

/* --- §7 sync --- */
.chap-sync {
  padding: var(--section) var(--gutter);
  background: var(--ink-3);
}

.sync-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 80px);
}

/* Image — large moody bleed, house grade + ink vignette toward the text column */
.sync-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  align-self: stretch;
  min-height: clamp(360px, 52vh, 620px);
  background: var(--ink);
  border: 1px solid var(--hair-soft);
}

.sync-figure picture,
.sync-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sync-figure img {
  filter: saturate(0.9) contrast(1.06) brightness(0.92);
}

/* Ink multiply tint + edge vignette toward the text column */
.sync-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(14,13,11,0) 55%, rgba(14,13,11,0.55) 100%),
    linear-gradient(0deg, rgba(14,13,11,0.45) 0%, rgba(14,13,11,0) 45%);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Text column */
.sync-text {
  align-self: center;
  display: flex;
  flex-direction: column;
}

.sync-h {
  font-family: var(--ff-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--bone);
  font-size: var(--fs-h2);
  margin: 0.5em 0 0;
  max-width: 16ch;
  text-wrap: pretty;
}

/* Single oxblood italic accent on the closing phrase — house .chap-h em convention,
   same weight as the heading so it stays one type treatment, not a second size */
.sync-em {
  font-style: italic;
  color: var(--ox);
}

.sync-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--bone-mid);
  max-width: var(--measure);
  margin: clamp(20px, 2vw, 28px) 0 0;
}

/* What-he-does strip */
.sync-strip {
  list-style: none;
  margin: clamp(26px, 2.6vw, 36px) 0 0;
  padding: clamp(18px, 1.8vw, 22px) 0 0;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em 0.9em;
  font-family: var(--ff-label);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone);
}

/* Oxblood dot separators between items — generated, not markup */
.sync-strip li + li::before {
  content: "·";
  color: var(--ox);
  letter-spacing: 0;
  margin-right: 0.9em;
}

/* CTAs */
.sync-actions {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
}

/* Responsive — stack, image on top */
@media (max-width: 900px) {
  .sync-inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 44px);
  }
  .sync-figure {
    min-height: clamp(300px, 56vw, 460px);
    order: -1;
  }
  .sync-figure::after {
    background:
      linear-gradient(0deg, rgba(14,13,11,0.6) 0%, rgba(14,13,11,0) 50%),
      linear-gradient(90deg, rgba(14,13,11,0) 60%, rgba(14,13,11,0.4) 100%);
  }
  .sync-h {
    max-width: 20ch;
  }
}

@media (max-width: 520px) {
  .sync-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
}

/* --- §7 shopt --- */
.chap-shop-teaser {
  padding: var(--section) var(--gutter);
  background: var(--ink-2);
}

.shopt-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 46%) 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}

/* Square album cover — the one strong image */
.shopt-figure {
  margin: 0;
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ink-3);
  border: 1px solid var(--hair);
}

.shopt-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.06) brightness(0.92);
}

.shopt-text {
  max-width: var(--measure);
}

.shopt-title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-h2);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--bone);
  margin: 0.5rem 0 0;
}

.shopt-body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--bone-mid);
  margin: 1.25rem 0 2rem;
}

@media (max-width: 900px) {
  .shopt-inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 7vw, 48px);
  }

  .shopt-figure {
    max-width: 440px;
  }
}

/* ============================================================
   HERO TYPEFACE — Beautiful Freak across every page hero.
   Overrides the Fraunces "manifesto cut" on hero headlines only.
   Hand-drawn display face: no italics (kills synthetic oblique),
   no variable-axis settings, a touch more leading so the
   baseline-hopping glyphs don't collide.
   ============================================================ */
.hero-headline,
.portrait-hero-name,
.work-hero-display,
.shop-hero-h,
.setup-hero-h {
  font-family: var(--ff-hero);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 0.96;
}
/* the coloured words ("water", "Phillip.", etc.) keep their colour
   but drop the italic — Beautiful Freak has no true italic. */
.hero-headline .water,
.portrait-hero-name em,
.work-hero-display em,
.shop-hero-h em,
.setup-hero-h em {
  font-style: normal;
  font-variation-settings: normal;
}

/* ============================================================
   BONE PALETTE — section display headings read DARK on bone.
   (These were authored light for the old near-black site.)
   On-dark elements — hero, manifesto, CTAs-on-crimson, the menu
   overlay, captions over photos/album art — keep their light --bone.
   ============================================================ */
.who-h,
.svc-title,
.svc-name,
.gaga-h2,
.sync-h,
.shopt-title,
.sigil,
.foot-signature {
  color: var(--char);
}
.who-h em,
.svc-title em,
.gaga-h2 em,
.sync-h em,
.shopt-title em {
  color: var(--ox);
}
.sync-strip { color: var(--bone-mid); }

/* targeted fixes from the cross-page contrast audit (bone palette) */
.danang-cta { color: var(--ox); }
.danang-cta:hover { color: var(--ox-bright); }
/* crimson sync interstitial: its button was dark-on-dark → bone button, crimson label */
.chap-sync-int .btn-primary { background: var(--bone); color: var(--ox); }
.sync-int-h em { color: var(--char); }   /* dark word pops on the crimson band */

/* ============================================================
   §7.3 — "FOUR STRINGS" HIRE-HIM SECTION (HIRE-HIM-STRINGS-SPEC)
   The one dark cinematic band on the bone site. Current tokens only:
   surfaces --char, text --bone, accents --ox/--ox-bright. No blue.
   ============================================================ */
.chap-hire {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(80px, 12vh, 150px) var(--gutter);
  background: var(--char); color: var(--bone);
}

/* cinematic scene layers, one per string */
.hire-stage { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hire-bg {
  position: absolute; inset: -6%;
  background-size: cover; background-position: center 30%;
  opacity: 0; transform: scale(1.04);
  filter: grayscale(0.35) brightness(0.5) contrast(1.06);
  transition: opacity 1s var(--ease-cine), transform 9s var(--ease-cine);
}
.hire-bg.is-on { opacity: 1; transform: scale(1.1); }
.hire-stage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(27,19,14,0.94) 0%, rgba(27,19,14,0.78) 30%,
    rgba(190,26,26,0.20) 72%, rgba(27,19,14,0.55) 100%);
}
.hire-video-slot { position: absolute; inset: 0; overflow: hidden; }
.hire-video-slot iframe {
  position: absolute; top: 50%; left: 50%;
  width: max(100vw, 177.78vh); height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  pointer-events: none; border: 0;
}

/* giant numeral watermark */
.hire-ghost {
  position: absolute; right: -2vw; top: 50%; z-index: 1;
  font-family: var(--ff-display); font-style: italic; font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: 46vw; line-height: 0.7;
  color: rgba(190,26,26,0.14);
  pointer-events: none; transform: translateY(-50%);
}

.hire-inner { position: relative; z-index: 3; max-width: 1280px; margin: 0 auto; width: 100%; }
.hire-eyebrow {
  font-family: var(--ff-label); font-weight: 500; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246,241,231,0.78);
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
.hire-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--ox-bright); }
.hire-kicker {
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1;
  font-size: clamp(18px, 1.5vw, 24px); letter-spacing: -0.01em;
  color: rgba(246,241,231,0.66);
  margin: 0 0 clamp(30px, 5vh, 56px);
}

/* sound toggle */
.hire-sound {
  position: absolute; top: clamp(22px, 4vh, 40px); right: clamp(22px, 5vw, 60px); z-index: 6;
  font-family: var(--ff-label); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246,241,231,0.66);
  display: flex; align-items: center; gap: 9px;
  background: none; border: 1px solid rgba(246,241,231,0.18); padding: 9px 14px;
  cursor: pointer; transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.hire-sound:hover, .hire-sound:focus-visible { color: var(--bone); border-color: rgba(246,241,231,0.45); }
.hire-sound:focus-visible { outline: 2px solid var(--ox-bright); outline-offset: 3px; }
.hire-sound .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(246,241,231,0.35); transition: background 0.3s; }
.hire-sound.is-on .dot { background: var(--ox-bright); }

/* the four strings */
.hire-strings { display: flex; flex-direction: column; gap: clamp(4px, 1.4vh, 16px); }
.hs {
  opacity: 0; transform: translateY(34px);
  transition: opacity 0.9s var(--ease-cine), transform 0.9s var(--ease-cine);
}
.chap-hire.is-in .hs:nth-child(1) { transition-delay: 0.05s; }
.chap-hire.is-in .hs:nth-child(2) { transition-delay: 0.14s; }
.chap-hire.is-in .hs:nth-child(3) { transition-delay: 0.23s; }
.chap-hire.is-in .hs:nth-child(4) { transition-delay: 0.32s; }
.chap-hire.is-in .hs { opacity: 1; transform: none; }

.hs-head {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: clamp(8px, 1.4vh, 16px) 0 0;
}
.hs-head:focus-visible { outline: 2px solid var(--ox-bright); outline-offset: 4px; }
.hs-row { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 34px); }
.hs-num {
  font-family: var(--ff-display); font-style: italic; font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  font-size: clamp(15px, 1.3vw, 22px); color: var(--ox-bright);
  flex: none; opacity: 0.62; transition: opacity 0.4s var(--ease-out);
}
.hs-title {
  font-family: var(--ff-display); font-style: italic; font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(34px, 6.6vw, 108px); line-height: 0.92; letter-spacing: -0.035em;
  color: transparent; -webkit-text-stroke: 1.3px rgba(246,241,231,0.28);
  transition: color 0.5s var(--ease-cine), -webkit-text-stroke-color 0.5s var(--ease-cine);
}
.hs.is-active .hs-title { color: var(--bone); -webkit-text-stroke-color: transparent; }
.hs.is-active .hs-num { opacity: 1; }

.hs-line { display: block; width: 100%; height: 26px; margin-top: 2px; }

/* detail panel */
.hs-detail {
  max-height: 0; min-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.6s var(--ease-cine), min-height 0.6s var(--ease-cine),
              opacity 0.5s var(--ease-cine), margin 0.5s var(--ease-cine),
              padding 0.6s var(--ease-cine);
}
.hs-detail { display: flex; flex-direction: column; }
.hs-detail .hs-grid { margin: auto 0; width: 100%; }   /* centre in the tall open panel */
.hs.is-active .hs-detail { max-height: 640px; opacity: 1; margin-top: clamp(14px, 2.5vh, 26px); }
/* desktop: the open string takes real vertical presence (~1.5x) */
@media (min-width: 821px) {
  .hs.is-active .hs-detail {
    min-height: clamp(250px, 34vh, 360px);
    padding-bottom: clamp(24px, 4vh, 48px);
  }
}
.hs-grid {
  display: flex; gap: clamp(24px, 5vw, 80px); flex-wrap: wrap; align-items: flex-start;
  padding-left: clamp(28px, 3.4vw, 56px);
}
.hs-body { max-width: 54ch; font-family: var(--ff-body); font-size: clamp(16px, 1.25vw, 20px); line-height: 1.72; color: var(--bone); margin: 0; }
.hs-proof { display: flex; flex-wrap: wrap; gap: 11px 24px; margin-top: clamp(20px, 3.5vh, 34px); }
.hs-proof span {
  font-family: var(--ff-label); font-weight: 500; font-size: 11px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--bone);
  position: relative; padding-left: 14px;
}
.hs-proof span::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: var(--ox-bright); transform: translateY(-50%);
}
.hs-side { flex: none; display: flex; flex-direction: column; gap: clamp(18px, 3vh, 30px); min-width: 170px; padding-top: 4px; }
.hs-price {
  font-family: var(--ff-label); font-weight: 500; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246,241,231,0.66);
}
.hs-cta {
  font-family: var(--ff-label); font-weight: 500; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone);
  display: inline-flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--ox-bright); padding-bottom: 5px; width: fit-content;
  transition: gap 0.35s var(--ease-out);
}
.hs-cta:hover, .hs-cta:focus-visible { gap: 14px; }
.hs-cta:focus-visible { outline: 2px solid var(--ox-bright); outline-offset: 3px; }

@media (max-width: 820px) {
  .hs-title { font-size: clamp(30px, 9vw, 56px); }
  .hs-grid { padding-left: 0; flex-direction: column; gap: 18px; }
  .hire-ghost { font-size: 70vw; right: -10vw; }
  /* mobile = clean vertical stack, every detail visible, scene faint */
  .hs-detail { max-height: none; opacity: 1; margin-top: 8px; }
  .hire-bg.is-on { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .hs { opacity: 1; transform: none; transition: none; }
  .hire-bg { transition: none; transform: none; }
  .hire-bg.is-on { transform: none; }
  .hs-detail { transition: none; max-height: none; opacity: 1; margin-top: 8px; }  /* spec §9: panels simply open */
  .hire-stage, .hire-ghost { transform: translateY(0); }
  .hire-ghost { transform: translateY(-50%); }
}


/* --- FOUR STRINGS, solo sections: one string per section; the detail is
       permanent content revealed once on scroll-in (JS adds .is-active) --- */
.hs--solo.is-active .hs-detail { max-height: 1800px; }
.hs-lede {
  font-family: var(--ff-display); font-style: italic; font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 80, "WONK" 1;
  font-size: clamp(19px, 1.7vw, 27px); letter-spacing: -0.01em;
  color: rgba(246,241,231,0.88);
  margin: clamp(8px, 1.5vh, 14px) 0 clamp(14px, 2.5vh, 24px);
  padding-left: clamp(28px, 3.4vw, 56px);
}
.hs-lede em { font-style: italic; color: var(--ox-bright); }
.hs-cta--quiet { border-bottom-color: rgba(246,241,231,0.28); color: rgba(246,241,231,0.72); }
.hs-cta--quiet:hover, .hs-cta--quiet:focus-visible { color: var(--bone); }

.hire-media {
  display: flex; gap: clamp(14px, 2vw, 28px); align-items: stretch;
  margin-top: clamp(24px, 4.5vh, 48px);
  padding-left: clamp(28px, 3.4vw, 56px);
}
.hire-embed { flex: 1.7; min-width: 0; }
.hire-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.hire-still { flex: 1; min-width: 0; margin: 0; overflow: hidden; }
.hire-still img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.2) contrast(1.05); }
.hire-still--wide { flex: none; width: min(100%, 880px); aspect-ratio: 21 / 9; }
@media (max-width: 820px) {
  .hs-lede, .hire-media { padding-left: 0; }
  .hire-media { flex-direction: column; }
  .hire-still { aspect-ratio: 16 / 10; }
  .hire-still--wide { width: 100%; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .hs--solo .hs-detail { max-height: none; opacity: 1; }
}

/* tracklist rows are playable */
.track-row[data-audio] { cursor: pointer; }
.track-row:focus-visible { outline: 2px solid var(--ox-bright); outline-offset: 2px; }
.track-row.is-playing .track-num,
.track-row.is-playing .track-title { color: var(--ox); }
.track-row.is-playing .track-play { color: var(--ox-bright); }

/* "Work with me." — pops in when the strings run begins, then scrolls
   away with the section as the four strings take over */
.hire-workwith {
  font-family: var(--ff-display); font-weight: 800; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(56px, 7.2vw, 124px);
  line-height: 0.95; letter-spacing: -0.03em; text-align: center;
  color: var(--bone); margin: 0 0 clamp(28px, 5vh, 56px);
  opacity: 0; transform: translateY(26px) scale(0.92);
  transform-origin: center bottom;
  transition: opacity 0.7s var(--ease-cine), transform 0.7s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.hire-workwith em { font-style: italic; color: var(--ox-bright); }
.chap-hire.is-in .hire-workwith { opacity: 1; transform: none; }
/* handoff opener: "Work with me." pops in alone, then exits as the
   section title arrives IN ITS PLACE (both stacked in one grid cell,
   so no gap is left behind). Motion users only — reduced motion keeps
   the original static flow layout with both lines visible. */
@media (prefers-reduced-motion: no-preference) {
  #hire .hire-inner { display: grid; }
  #hire .hire-workwith,
  #hire .hs { grid-area: 1 / 1; }
  #hire .hire-workwith {
    align-self: start; pointer-events: none;
    margin-bottom: 0; position: relative; z-index: 2;
  }
  #hire.is-in .hire-workwith {
    transition: none;
    animation: workwith-pass 1.55s var(--ease-cine) both;
  }
  /* the title may only begin once the kicker has fully left —
     workwith-pass reaches opacity 0 at ~1.5s of its 1.55s run, so
     starting the .hs here reads as a relay; at 0.75s the two giant
     headlines were double-exposed mid-flight. site.js mirrors this
     with lead=1700ms on the is-active fill/pluck — keep in sync. */
  #hire.is-in .hs { transition-delay: 1.5s; }
}
@keyframes workwith-pass {
  0%   { opacity: 0; transform: translateY(26px) scale(0.92); }
  29%  { opacity: 1; transform: none; }
  48%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-22px) scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .hire-workwith { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   WATCH PAGE — cinema plates (2026-06-11)
   Scoped to .page-watch (body class on watch.html only) and to
   new watch-only classes. The shared .video-card / .video-strip
   base rules used by music.html are untouched.
   ============================================================ */

/* unified grade — fan footage and brand footage read as one set */
.page-watch .video-card img {
  filter: saturate(0.85) contrast(1.06) brightness(0.85);
}
.page-watch .video-card:hover img {
  filter: saturate(0.95) contrast(1.06) brightness(0.97);
  transform: scale(1.04);
}
.page-watch .video-card-overlay {
  padding: clamp(16px, 2vw, 28px);
  background: linear-gradient(to top, rgba(14,13,11,0.88), rgba(14,13,11,0.24) 42%, transparent 70%);
  transition: background 0.6s var(--ease-cinema);
}
.page-watch .video-card:hover .video-card-overlay {
  background: linear-gradient(to top, rgba(14,13,11,0.95), rgba(14,13,11,0.34) 46%, transparent 74%);
}
.page-watch .video-card-title { font-size: clamp(19px, 1.7vw, 27px); }
.page-watch .video-card-meta  { font-size: 11px; color: rgba(246,241,231,0.78); }
.video-card-src {
  font-family: var(--ff-label); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(246,241,231,0.55); margin-top: 8px;
}
.page-watch .video-card:hover .video-play-mark { transform: scale(1.18); }

/* grand strips — Ch02 residency 2×2 + Ch04 keynote/broadcast 2-up */
.video-strip--grand { grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* Grammy feature — cinema plate at ~3/4 viewport height */
.video-feature--grand .video-card {
  aspect-ratio: auto;
  height: clamp(480px, 76vh, 920px);
}

/* solo scroller — taller cards so titles breathe (watch-only section) */
.page-watch .solo-strip-scroller { scroll-padding-inline: var(--gutter); }
.page-watch .solo-strip-scroller .video-card {
  flex: 0 0 clamp(380px, 42vw, 600px);
}

@media (max-width: 768px) {
  .video-strip--grand { grid-template-columns: 1fr; gap: 18px; }
  .video-feature--grand .video-card { height: auto; aspect-ratio: 16/9; }
  .page-watch .solo-strip-scroller .video-card { flex-basis: min(84vw, 420px); }
}

/* sync reel — designed request plate (no fake player) */
.chap-syncreel { padding: clamp(120px, 16vh, 200px) 0; }
.syncreel-plate { padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto; }
.syncreel-frame {
  position: relative;
  min-height: clamp(380px, 56vh, 620px);
  border: 1px solid var(--ox);
  outline: 1px solid var(--hair); outline-offset: 8px;
  background: var(--ink-2);
  display: grid; place-content: center; justify-items: center;
  gap: clamp(18px, 2.6vh, 28px);
  text-align: center;
  padding: clamp(48px, 8vh, 96px) var(--gutter);
}
.syncreel-frame::before, .syncreel-frame::after {
  content: ''; position: absolute; background: var(--ox); z-index: 2;
  width: 32px; height: 32px;
}
.syncreel-frame::before { top: -2px; left: -2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.syncreel-frame::after  { bottom: -2px; right: -2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.syncreel-kicker {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox);
}
.syncreel-line {
  font-family: var(--ff-display); font-weight: 800; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(44px, 6.5vw, 104px);
  line-height: 0.92; letter-spacing: -0.03em;
  color: var(--on-ink); max-width: 14ch;
}
.syncreel-line em { font-style: italic; color: var(--ox); }
.syncreel-note {
  font-size: var(--fs-body); line-height: 1.6;
  color: var(--on-ink-mid); max-width: 44ch;
}
.syncreel-caption {
  margin-top: 24px;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}

@media (prefers-reduced-motion: reduce) {
  .page-watch .video-card img,
  .page-watch .video-card-overlay,
  .page-watch .video-play-mark { transition: none; }
  .page-watch .video-card:hover img { transform: none; }
  .page-watch .video-card:hover .video-play-mark { transform: none; }
}

/* ============================================================
   DA NANG PAGE — additive, page-scoped
   (bio pull-quote, word-facts sizing, accessories note,
    visit-the-shop rows, get-involved sign-off)
   ============================================================ */
.danang-pullquote {
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--hair);
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 400;
  font-variation-settings: "opsz" 60, "SOFT" 70, "WONK" 1;
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--on-ink); max-width: 30ch;
}

/* word-based fact values (Oct 2024, 48 hrs) need a smaller cut
   than the numeral-only grid this layout was built for */
.chap-facts--danang .fact-num {
  font-size: clamp(40px, 5vw, 80px);
  letter-spacing: -0.04em;
}

.facts-note {
  padding: 0 var(--gutter); max-width: 1400px;
  margin: clamp(32px, 5vh, 48px) auto 0;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}

.chap-visit { padding: clamp(120px, 16vh, 200px) 0; }
.chap-visit .chap-h { margin-bottom: clamp(48px, 7vh, 88px); }
.visit-wrap {
  padding: 0 var(--gutter);
  max-width: 1400px; margin: 0 auto;
}
.visit-row {
  display: grid; grid-template-columns: 3fr 7fr 2fr;
  gap: clamp(16px, 3vw, 48px); align-items: baseline;
  padding: clamp(22px, 3.5vh, 36px) 0;
  border-top: 1px solid var(--hair);
}
.visit-row:last-child { border-bottom: 1px solid var(--hair); }
.visit-label {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox);
}
/* address & contact values: no text-transform — Vietnamese
   diacritics must render as written */
.visit-value {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-variation-settings: "opsz" 36, "SOFT" 50;
  line-height: 1.35; letter-spacing: -0.015em;
  color: var(--on-ink); overflow-wrap: break-word; min-width: 0;
}
.visit-value a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease-out); }
.visit-value a:hover { color: var(--ox); }
.visit-sub {
  display: block; margin-top: 10px;
  font-family: var(--ff-label); font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em; color: var(--on-ink-mid);
}
.visit-link {
  justify-self: end;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox); text-decoration: none; white-space: nowrap;
}
.visit-link:hover { color: var(--ox-bright); }
@media (max-width: 800px) {
  .visit-row { grid-template-columns: 1fr; gap: 10px; }
  .visit-link { justify-self: start; }
}

.gi-signoff {
  padding: clamp(64px, 9vh, 110px) var(--gutter) 0;
  max-width: 1400px; margin: 0 auto;
}
.gi-signoff-quote {
  font-family: var(--ff-display); font-style: italic;
  font-size: clamp(20px, 2.1vw, 30px); font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 70, "WONK" 1;
  line-height: 1.35; letter-spacing: -0.01em;
  color: var(--on-ink); max-width: 44ch;
}
.gi-signoff-craft {
  margin-top: 14px;
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink-mid);
}

/* ============================================================
   HOMEPAGE — SESSION & TOURING ARTIST LOGO MARQUEE (#gaga)
   additive, scoped to .hs-logos* — replaces the .hs-proof chips
   ============================================================ */
.hs-logos { margin-top: clamp(22px, 3.5vh, 34px); }
.hs-logos-kicker {
  font-family: var(--ff-label); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246,241,231,0.55);
  margin-bottom: 16px;
}
.hs-logos-clip {
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hs-logos-track {
  display: flex; align-items: center; gap: 64px;
  width: max-content;
  color: #F2EDE3;            /* wordmark SVGs pick this up via currentColor */
  will-change: transform;
}
.hs-logo { display: flex; align-items: center; flex: none; }
.hs-logo img {
  height: 28px; width: auto; display: block;
  filter: brightness(0) invert(1);          /* same monochrome rule as .hero-proof */
  -webkit-filter: brightness(0) invert(1);
}
.hs-logo svg { height: 13px; width: auto; display: block; }
.hs-logo img, .hs-logo svg { opacity: 0.62; transition: opacity 0.45s var(--ease-out); }
.hs-logo:hover img, .hs-logo:hover svg { opacity: 1; }
@media (max-width: 600px) {
  .hs-logos-track { gap: 40px; }
  .hs-logo img { height: 22px; }
  .hs-logo svg { height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  /* static row — no drift, so no edge fade; let it wrap on small screens */
  .hs-logos-clip { -webkit-mask-image: none; mask-image: none; }
  .hs-logos-track { flex-wrap: wrap; row-gap: 18px; }
}

/* ============================================================
   ABOUT PAGE — compact eras index (replaces the four image
   chapters) + press cells promoted to real links
   ============================================================ */
.eras-index {
  list-style: none;
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
}
.eras-row {
  display: grid; grid-template-columns: 110px 170px 1fr 1.6fr;
  gap: clamp(16px, 3vw, 44px); align-items: baseline;
  padding: clamp(22px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--hair);
}
.eras-row:last-child { border-bottom: 1px solid var(--hair); }
.ei-vol, .ei-years {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.ei-vol { color: var(--ox); }
.ei-years { color: var(--on-ink-mid); }
.ei-name {
  font-family: var(--ff-display); font-style: italic; font-weight: 700;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--on-ink);
}
.ei-line { font-size: var(--fs-body); line-height: 1.55; color: var(--on-ink-mid); }
@media (max-width: 800px) {
  .eras-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .ei-name, .ei-line { grid-column: 1 / -1; }
}

/* press cells are now anchors — quiet card affordance, corner mark */
a.press-cell {
  text-decoration: none; color: inherit;
  position: relative; display: flex;
}
a.press-cell::after {
  content: '↗'; position: absolute;
  top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px);
  font-family: var(--ff-label); font-size: 14px; color: var(--ox);
  opacity: 0; transform: translate(-5px, 5px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
a.press-cell:hover::after,
a.press-cell:focus-visible::after { opacity: 1; transform: none; }
a.press-cell:hover .press-outlet { color: var(--ox-bright); }
a.press-cell:hover .press-meta { color: var(--ox); }
a.press-cell:focus-visible {
  outline: 2px solid var(--ox-bright); outline-offset: -2px;
  background: var(--ink-2);
}
.press-outlet, .press-meta { transition: color 0.35s var(--ease-out); }

/* ============================================================
   HOMEPAGE — LIVE PERFORMANCE PANEL (#hire only)
   one left scan column: headline → body → proof → price + CTA;
   subject shifted right, left-edge scrim, rule capped to column
   ============================================================ */
/* 1 — single left column (the old .hs-side right block moved in) */
#hire .hs-grid { max-width: 640px; }
#hire .hs-book {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: clamp(24px, 4vh, 40px);
  padding-top: clamp(18px, 3vh, 26px);
  border-top: 1px solid rgba(246,241,231,0.18);
  width: fit-content; min-width: 260px;
}
/* 3 — price figure ~1.7x body, semibold; label stays mono caps */
#hire .hs-price strong {
  display: block; margin-top: 6px;
  font-family: var(--ff-body); font-weight: 600;
  font-size: clamp(26px, 2.3vw, 34px); line-height: 1;
  letter-spacing: -0.01em; color: var(--bone);
}
#hire .hs-cta { font-size: 14px; letter-spacing: 0.18em; padding-bottom: 7px; }
/* 4 — proof tags: one step larger, full-strength bone */
#hire .hs-proof span { font-size: 13px; color: var(--bone); }
/* 2 — push the subject right (max safe shift before the layer's
   left edge enters the frame; portrait asset has no bg-position slack) */
#hire .hire-bg.is-on { transform: scale(1.1) translateX(9%); }
@media (prefers-reduced-motion: reduce) {
  #hire .hire-bg.is-on { transform: translateX(9%); }
}
/* 5 — left-edge text scrim, fading out by ~58%; right kept clear */
#hire .hire-stage::after {
  background: linear-gradient(90deg,
    rgba(27,19,14,0.92) 0%,  rgba(27,19,14,0.72) 28%,
    rgba(27,19,14,0.40) 44%, rgba(27,19,14,0.12) 55%,
    rgba(27,19,14,0) 64%,    rgba(27,19,14,0.16) 100%);
}
/* 6 — the red string/rule ends at the text column's width */
#hire .hs-line { width: min(100%, 640px); }
@media (max-width: 820px) {
  #hire .hire-bg.is-on { transform: scale(1.1); }   /* mobile keeps native framing */
  #hire .hs-book { width: 100%; }
}

/* ============================================================
   SYNC OFFER CHIPS WITH DESCRIPTORS — homepage string 03 only
   (.hs-proof--desc) · label keeps the chip treatment, a one-line
   plain-case descriptor sits beneath it
   ============================================================ */
.hs-proof--desc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 32px;
  max-width: 54ch;
}
.hs-proof--desc span { display: block; }
.hs-proof--desc span::before { top: 5px; transform: none; }
.hs-proof--desc i {
  display: block;
  font-style: normal;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(246,241,231,0.62);
  margin-top: 5px;
}
@media (max-width: 640px) {
  .hs-proof--desc { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   HOMEPAGE MARQUEE — larger image logos; cap the band so at most
   one faded repeat shows at the masked edge on wide screens
   ============================================================ */
.hs-logos-clip { max-width: 1080px; }
.hs-logos-track { gap: 96px; }
.hs-logo img { height: 40px; }
@media (max-width: 600px) {
  .hs-logos-track { gap: 56px; }
  .hs-logo img { height: 30px; }
}

/* ============================================================
   WATCH HERO — single-word "Videography." headline at a calmer
   scale than the shared 17vw portrait-hero cut
   ============================================================ */
body.page-watch .portrait-hero-name { font-size: clamp(44px, 8.5vw, 150px); }

/* ============================================================
   THE RECORD — scroll-driven press (homepage §7.6 only)
   Arrival full-bleed → the press (cover settles into the sleeve)
   → oxblood frame draws → type sets. The FINAL state is authored
   here as the DEFAULT: no-JS, reduced-motion and script-failure
   all render the section complete. site.js recordPress() only
   ADDS the from-states (pinned GSAP scrub on desktop fine
   pointers; a lightweight .lp-lite IO entrance on touch/<1025px).
   ============================================================ */
.chap-listening {
  overflow: clip;   /* the full-bleed plate never spills into neighbouring sections */
  padding: clamp(48px, 8vh, 110px) var(--gutter);  /* settled composition fits one viewport */
}
.listening-stage {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, min(520px, 44vw)) minmax(0, 1fr);
  column-gap: clamp(44px, 6vw, 92px);
  align-items: center;
}
.listening-plate {
  margin: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--ink-2);
  transform-origin: center;
}
.listening-plate picture,
.listening-plate img { width: 100%; height: 100%; display: block; }
.listening-plate img { object-fit: cover; }
/* soft shadow on a pseudo: its OPACITY is animated (cheap), never the shadow */
.listening-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.05),
    0 18px 40px -20px rgba(0,0,0,0.25),
    0 40px 80px -40px rgba(0,0,0,0.3);
  opacity: var(--lp-shadow, 1);   /* GSAP scrubs --lp-shadow 0 → 1 as the plate settles */
}
/* the drawn frame — site --ox, 16px OUTSIDE the plate so it clears the
   artwork's printed red border. pathLength=1 makes dash values unitless
   fractions of the perimeter. Stroke is in USER units — the plate is
   always square so the viewBox scales uniformly: 0.55 ≈ 3px on the
   520px desktop plate, ≈ 2px on a phone-width plate. (non-scaling-stroke
   was tried and breaks pathLength dashing in Chrome: gaps in the rect.) */
.listening-frame {
  position: absolute;
  inset: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  max-width: none;                /* beat the global svg { max-width:100% } reset */
  overflow: visible;
  pointer-events: none;
}
.listening-frame rect {
  fill: none;
  stroke: var(--ox);
  stroke-width: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;           /* final: fully drawn */
}
/* the play/pause icons toggle via the [hidden] attribute; the global
   `svg { display:block }` reset silently defeats the UA's [hidden]
   rule (author styles beat UA styles), showing BOTH icons at once */
svg[hidden] { display: none; }
/* …and site.js toggles them via the `hidden` PROPERTY — a no-op on bare
   <svg> (SVGElement has no hidden IDL attr) — so drive the swap off
   aria-pressed, which setPlaying() sets reliably via setAttribute */
.listening-controls .play-btn .pause-icon { display: none; }
.listening-controls .play-btn[aria-pressed="true"] .pause-icon { display: block; }
.listening-controls .play-btn[aria-pressed="true"] .play-icon { display: none; }
.listening-col {
  position: relative;
  z-index: 3;                     /* the title may ride over the frame */
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vh, 26px);
  max-width: 560px;
}
@media (min-width: 1280px) {
  /* title overlaps the plate's right edge by ~8% of the sleeve
     (42px of 520) + the 16px frame offset + the column gap */
  .listening-col .listening-title { margin-left: calc(-58px - clamp(44px, 6vw, 92px)); }
}
@media (max-width: 900px) {
  .listening-stage { grid-template-columns: 1fr; row-gap: clamp(28px, 5vh, 44px); }
  .listening-col { max-width: none; }
  .listening-frame { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); }
  /* stroke-width is user-unit (0.55) — it scales down with the plate, no override needed */
}

/* --- lightweight entrance (touch / <1025px) — site.js adds .lp-lite
   only when motion is allowed; .lp-in fires once on first view --- */
.chap-listening.lp-lite .listening-plate {
  transform: scale(1.06);
  transition: transform 0.8s var(--ease-cine);
}
.chap-listening.lp-lite .listening-plate::before {
  opacity: 0;
  transition: opacity 0.8s var(--ease-cine);
}
.chap-listening.lp-lite .listening-frame rect {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.8s var(--ease-cine) 0.25s;
}
.chap-listening.lp-lite .listening-col > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-cine), transform 0.6s var(--ease-cine);
}
.chap-listening.lp-lite .listening-col > *:nth-child(1)    { transition-delay: 0.30s; }
.chap-listening.lp-lite .listening-col > *:nth-child(2)    { transition-delay: 0.38s; }
.chap-listening.lp-lite .listening-col > *:nth-child(3)    { transition-delay: 0.46s; }
.chap-listening.lp-lite .listening-col > *:nth-child(n+4)  { transition-delay: 0.54s; }
.chap-listening.lp-lite.lp-in .listening-plate { transform: none; }
.chap-listening.lp-lite.lp-in .listening-plate::before { opacity: 1; }
.chap-listening.lp-lite.lp-in .listening-frame rect { stroke-dashoffset: 0; }
.chap-listening.lp-lite.lp-in .listening-col > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* belt & braces — site.js never adds .lp-lite under reduced motion */
  .chap-listening.lp-lite .listening-plate,
  .chap-listening.lp-lite .listening-plate::before,
  .chap-listening.lp-lite .listening-col > * { opacity: 1; transform: none; transition: none; }
  .chap-listening.lp-lite .listening-frame rect { stroke-dashoffset: 0; transition: none; }
}

/* ============================================================
   ABOUT — MY STORY (long-form editorial bio, 03/04)
   bone canvas · drop cap · display pull-lines at the turns ·
   crimson plate for the manifesto line · timeline of receipts
   ============================================================ */
.chap-story {
  padding: clamp(100px, 14vh, 180px) 0 clamp(80px, 10vh, 140px);
}
.story-wrap {
  padding: 0 var(--gutter);
  max-width: 1400px;
  display: grid; grid-template-columns: 4fr 8fr;
  column-gap: clamp(48px, 6vw, 100px);
  align-items: start;
}
.story-lead    { grid-column: 1; }
.story-prose   { grid-column: 2; }
.story-big,
.story-names,
.story-notable { grid-column: 1 / -1; }

/* epigraph — tall and narrow beside the opening paragraph */
.story-lead {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 400; font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 70, "WONK" 1;
  line-height: 1.28; letter-spacing: -0.015em;
  color: var(--on-ink); max-width: 16ch;
}
.story-lead em {
  /* the hero's "water" blue, royal cut — light --water washes out on bone */
  font-style: italic; color: #3E7BFA;
  font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}

/* running prose */
.story-prose p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink); max-width: 62ch;
}
.story-prose p + p { margin-top: 1.5em; }

/* drop cap on the very first line */
.story-prose--open p::first-letter {
  font-family: var(--ff-display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: 4.6em; line-height: 0.78;
  float: left; padding: 8px 16px 2px 0;
  color: var(--ox);
}

/* display pull-lines — the gripping turns, set at heading scale */
.story-big {
  margin: clamp(64px, 10vh, 120px) 0 clamp(48px, 7vh, 84px);
  font-family: var(--ff-display);
  font-size: clamp(30px, 4.4vw, 62px);
  font-weight: 420; font-style: italic;
  font-variation-settings: "opsz" 90, "SOFT" 70, "WONK" 1;
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--on-ink);
  max-width: 22ch;
}
.story-big em {
  font-style: italic; color: var(--ox);
  font-variation-settings: "opsz" 90, "SOFT" 100, "WONK" 1;
}
/* …second pull pushed to the right edge for asymmetry */
.story-big--right { margin-left: auto; max-width: 20ch; }
.sb-aside {
  display: block;
  font-family: var(--ff-body); font-size: var(--fs-body-lg);
  font-style: italic; font-weight: 400;
  font-variation-settings: normal;
  line-height: var(--lh-prose); letter-spacing: 0;
  color: var(--on-ink-mid);
  margin-top: 18px; max-width: 42ch;
}
/* …the manifesto line gets the page's one crimson hit, full-bleed */
.story-big--shout {
  max-width: none; text-wrap: balance;
  margin: clamp(72px, 11vh, 130px) calc(-1 * var(--gutter)) clamp(56px, 8vh, 96px);
  padding: clamp(56px, 8vw, 120px) var(--gutter);
  background: var(--ox);
  color: rgba(246, 241, 231, 0.62);
  font-size: clamp(34px, 5.2vw, 80px);
}
.story-big--shout em { color: var(--bone); }

/* the two name-walls, side by side under a hairline */
.story-names {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--hair);
  margin: 0 0 clamp(56px, 8vh, 96px);
}
.story-names p {
  font-size: 15px; line-height: 1.75;
  color: var(--on-ink-mid);
}

/* notable performances — timeline of receipts */
.story-notable { margin-top: clamp(64px, 10vh, 120px); }
.story-notable-h {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ox);
  margin-bottom: 12px;
}
.story-roll { list-style: none; margin: 0; padding: 0; }
.story-roll li {
  display: grid; grid-template-columns: clamp(96px, 12vw, 150px) 1fr;
  gap: 24px; align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
}
.story-roll li:last-child { border-bottom: 1px solid var(--hair); }
.sr-year {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ox);
}
.sr-what { font-size: 16px; line-height: 1.6; color: var(--on-ink); }

@media (max-width: 900px) {
  .story-wrap { grid-template-columns: 1fr; }
  .story-lead, .story-prose, .story-big,
  .story-names, .story-notable { grid-column: 1; }
  .story-lead { max-width: 24ch; margin-bottom: 40px; }
  .story-big { margin: 56px 0 40px; max-width: 26ch; }
  .story-big--right { margin-left: 0; }
  .story-big--shout { margin: 64px calc(-1 * var(--gutter)) 48px; max-width: none; }
  .story-names { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .story-roll li { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}

/* homepage Da Nang teaser — heading set bold (client, 2026-06-12) */
.chap-danang .danang-h { font-weight: 700; }

/* ============================================================
   ABOUT v3 — chaptered rebuild (2026-06-15)
   Origin · Chameleon · Builder · Composer · Press.
   Editorial third-person + 2 first-person quote blocks, real
   photography unified by a desaturated + oxblood-tint treatment.
   (The older .chap-story/.story-* block above is now dormant.)
   ============================================================ */

/* shared chapter display heading */
.about-h {
  font-family: var(--ff-display); font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-size: clamp(36px, 5.4vw, 80px); line-height: 1.02;
  letter-spacing: -0.035em; color: var(--on-ink); max-width: 15ch;
}
.about-h em {
  font-style: italic; color: var(--ox);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

/* unified image treatment — disparate sources read as one editorial set */
.about-fig { margin: 0; }
.about-fig picture {
  position: relative; display: block; overflow: hidden;
  background: var(--ink-3);
}
.about-fig img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.06) brightness(0.99);
  transition: filter 0.7s var(--ease-cine);
}
.about-fig picture::after {            /* oxblood duotone wash */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ox); mix-blend-mode: color; opacity: 0.14;
}
.about-fig:hover img { filter: grayscale(35%) contrast(1.03); }
.about-fig figcaption {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-mid);
  padding-top: 14px;
}
.about-fig--portrait picture { aspect-ratio: 4 / 5; }
.about-fig--stage    picture { aspect-ratio: 5 / 6; }
.about-fig--wide     picture { aspect-ratio: 16 / 9; }

/* ORIGIN — quote beside a portrait (fills the old empty column) */
.loner-wrap--fig {
  display: grid; grid-template-columns: 36% 1fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}

/* CHAMELEON */
.chap-chameleon { padding: clamp(100px, 14vh, 180px) 0; }
.chap-chameleon > .chap-meta,
.cham-head, .stat-band, .cham-split,
.chap-chameleon > .about-fig--wide, .name-strip {
  padding-left: var(--gutter); padding-right: var(--gutter);
  max-width: 1400px; margin-left: auto; margin-right: auto;
}
.cred-marquee {
  margin-top: clamp(20px, 3vh, 32px);
  font-family: var(--ff-display); font-weight: 420; font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 80, "WONK" 1;
  font-size: clamp(20px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -0.01em;
  color: var(--ox); max-width: 26ch;
}
.stat-band {
  margin-top: clamp(48px, 7vh, 90px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hair); border-left: 1px solid var(--hair);
}
.stat-cell {
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: clamp(20px, 2.4vw, 32px) clamp(14px, 1.6vw, 22px);
  display: flex; flex-direction: column; gap: 10px;
}
.stat-num {
  font-family: var(--ff-display); font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  font-size: clamp(32px, 4vw, 58px); line-height: 0.9; color: var(--ox);
}
.stat-label {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-mid);
  line-height: 1.3;
}
.cham-split {
  margin-top: clamp(48px, 7vh, 90px);
  display: grid; grid-template-columns: 1fr 44%;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.cham-prose p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink); max-width: 56ch;
}
.cham-prose p + p { margin-top: 1.4em; }
.about-fig--wide { margin-top: clamp(40px, 6vh, 72px); }
.name-strip {
  margin-top: clamp(40px, 5vh, 64px); padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: clamp(140px, 16vw, 200px) 1fr;
  gap: clamp(16px, 2vw, 32px); align-items: baseline;
}
.ns-label {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox);
}
.ns-names {
  font-family: var(--ff-display); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 40, "SOFT" 60;
  font-size: clamp(18px, 2vw, 28px); line-height: 1.4; color: var(--on-ink);
}
.ns-more { color: var(--on-ink-mid); font-style: italic; }

/* BUILDER + COMPOSER — alternating text/image split */
.chap-builder  { padding: clamp(100px, 14vh, 180px) 0; background: var(--ink-2); }
.chap-composer { padding: clamp(100px, 14vh, 180px) 0; }
.about-split {
  padding: 0 var(--gutter); max-width: 1400px;
  margin: clamp(32px, 5vh, 56px) auto 0;
  display: grid; grid-template-columns: 44% 1fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.about-split--rev { grid-template-columns: 1fr 44%; }
.about-split__text .about-h { margin-bottom: 0.3em; }
.about-split__text p {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink); max-width: 52ch; margin-top: 1.2em;
}
.about-split__text .cta-line { margin-top: clamp(20px, 3vh, 32px); }

/* COMPOSER quote — the page's one full-bleed crimson hit */
.composer-quote {
  margin: clamp(56px, 8vh, 100px) 0 0;
  padding: clamp(56px, 8vw, 110px) var(--gutter);
  background: var(--ox); color: rgba(246, 241, 231, 0.66);
  font-family: var(--ff-display); font-weight: 420; font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  font-size: clamp(34px, 5.2vw, 76px); line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
}
.composer-quote em { color: var(--bone); font-style: italic; }
.composer-quote cite {
  display: block; margin-top: clamp(24px, 4vh, 40px);
  font-family: var(--ff-label); font-size: var(--fs-mono); font-style: normal;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 241, 231, 0.6);
}

@media (max-width: 900px) {
  .loner-wrap--fig, .cham-split,
  .about-split, .about-split--rev { grid-template-columns: 1fr; }
  .about-split--rev .about-fig { order: -1; }
  .stat-band { grid-template-columns: repeat(3, 1fr); }
  .name-strip { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  .stat-band { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ABBW SHOP — native product pages + grid (2026-06-15)
   commerce rebuild off the retired Wix store; Stripe checkout.
   ============================================================ */
/* photo-pending badge (shop grid cards + PDP) — real product
   photography is being re-sourced; the album artwork stands in. */
.product-card-img { position: relative; }
.ph-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: var(--ff-label); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone); background: var(--ox); padding: 5px 9px;
}
.product-card .product-card-price { white-space: nowrap; }

/* product detail page (PDP) */
.chap-product { padding: clamp(90px, 12vh, 150px) 0 clamp(70px, 9vh, 120px); }
.pdp-wrap {
  padding: 0 var(--gutter); max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: clamp(40px, 5vw, 88px); align-items: start;
}
.pdp-gallery { position: sticky; top: 104px; }
.pdp-figure {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--hair);
}
.pdp-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-note {
  font-family: var(--ff-label); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-ink-mid); margin-top: 12px;
}
.pdp-info { padding-top: 4px; }
.pdp-eyebrow {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ox);
}
.pdp-title {
  font-family: var(--ff-display); font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-size: clamp(32px, 4.2vw, 60px); line-height: 1.04;
  letter-spacing: -0.03em; color: var(--on-ink); margin: 0.3em 0 0.2em;
}
.pdp-price {
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: "opsz" 40, "SOFT" 60;
  font-size: clamp(22px, 2.3vw, 32px); color: var(--ox);
}
.pdp-stock {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-mid);
  margin-top: 10px;
}
.pdp-stock::before { content: "\25CF"; color: #3a7d44; margin-right: 8px; font-size: 9px; }
.pdp-desc {
  font-size: var(--fs-body-lg); line-height: var(--lh-prose);
  color: var(--on-ink); max-width: 46ch; margin-top: clamp(20px, 3vh, 30px);
}
.pdp-size { margin-top: clamp(22px, 3vh, 32px); }
.pdp-size-label {
  display: block; font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-mid);
  margin-bottom: 10px;
}
.pdp-size-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-size-opts input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pdp-size-opts label {
  cursor: pointer; border: 1px solid var(--hair); padding: 9px 17px;
  font-family: var(--ff-label); font-size: 13px; letter-spacing: 0.06em;
  color: var(--on-ink); transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pdp-size-opts input:checked + label { background: var(--char, #1B130E); color: var(--bone); border-color: var(--char, #1B130E); }
.pdp-size-opts input:focus-visible + label { outline: 2px solid var(--ox); outline-offset: 2px; }
.pdp-buy {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(26px, 4vh, 38px);
  background: var(--ox); color: var(--bone);
  font-family: var(--ff-label); font-weight: 600; font-size: 15px; letter-spacing: 0.05em;
  padding: 16px 32px; text-decoration: none; transition: background 0.3s var(--ease-out);
}
.pdp-buy:hover { background: var(--ox-bright, #D62222); }
.pdp-buy[aria-disabled="true"] {
  background: var(--ink-3); color: var(--on-ink-mid);
  pointer-events: none; cursor: not-allowed; letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px;
}
.pdp-ship { font-size: 13px; color: var(--on-ink-mid); margin-top: 16px; max-width: 42ch; }
.pdp-back {
  display: inline-block; margin-top: clamp(30px, 5vh, 48px);
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ox); text-decoration: none;
}
.pdp-back:hover { color: var(--ox-bright, #D62222); }
@media (max-width: 860px) {
  .pdp-wrap { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
}

/* ============================================================
   LAS VEGAS RESIDENCIES — inlined monochrome venue wordmarks
   (2026-06-15). Replaces the buried comma-soup property list.
   NOTE: this site's --ink is the BONE surface; dark text = --on-ink.
   ============================================================ */
.venue-strip-wrap {
  padding: 0 var(--gutter);
  max-width: 1280px; margin: clamp(40px, 6vh, 76px) auto 0;
  text-align: center;
}
.venue-strip-label {
  font-family: var(--ff-label); font-size: var(--fs-mono);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ox);
  margin-bottom: clamp(18px, 3vh, 28px);
}
.venue-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  color: var(--on-ink);            /* dark marks on the bone /about section */
}
.venue-strip svg {
  height: 22px; width: auto; display: block;
  opacity: 0.5;
  transition: opacity 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.venue-strip svg text { font-family: var(--ff-display), Georgia, serif; }
.venue-strip svg:hover { opacity: 1; color: var(--ox); }   /* lift + oxblood */
@media (max-width: 640px) { .venue-strip svg { height: 18px; } }

/* on-dark variant — homepage proof band beneath the artist marquee */
.venue-strip--on-dark { color: var(--bone); }
.venue-strip--on-dark svg { opacity: 0.42; height: 18px; }
.venue-strip--on-dark svg:hover { opacity: 0.95; color: var(--bone); }
.venue-strip-sub {
  margin-top: clamp(22px, 3vh, 34px); padding-top: clamp(18px, 2.5vh, 26px);
  border-top: 1px solid var(--on-ink-dim, rgba(246,241,231,0.16));
}
.venue-strip-sub .venue-strip-label { color: var(--bone); opacity: 0.6; }

/* visually-hidden utility (screen-reader / crawler text) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}