/* ============================================================
   PALETTE — D "Skin & Shadow" (site) + B "Blush & Ink" (booking)
   Chosen from docs/COLOUR-RESEARCH.md.

   Two accent roles, on purpose:
     --accent-fill  terracotta. Buttons and fills. Ivory on it = 4.7:1.
     --accent-text  tan. Small accent text on the dark ground = 7.9:1.
   Terracotta as small text would be 3.6:1 and fail, so it never is.

   Body text is 15:1, not the 4.5:1 minimum — the 45+ audience has a
   yellowing lens and falling contrast sensitivity (F7).
   ============================================================ */

:root {
  /* ground */
  --ground:      #171012;   /* warm near-black */
  --ground-2:    #1F1518;   /* raised surfaces */
  --ground-3:    #241A1C;   /* hover / pressed */
  --card:        #1F1518;

  /* edges */
  --edge:        rgba(240,228,220,.14);
  --edge-soft:   rgba(240,228,220,.07);

  /* text */
  --text:        #F0E4DC;   /* ivory  · 15.2:1 */
  --text-mid:    #C9B7AC;   /*        ·  9.7:1 */
  --text-dim:    #9C8A81;   /*        ·  5.7:1 — meta only, never body copy */

  /* accent */
  --accent-fill: #A8453C;   /* terracotta, deepened · ivory on it = 5.9:1,
                               and still 3.2:1 against the ground so the
                               button edge stays visible */
  --accent-text: #D9A87C;   /* tan        ·  7.9:1 on ground */
  --accent-deep: #8C2F39;   /* oxblood */
  --on-accent:   #FFF8F5;
  --error:       #E08B7B;

  /* darker bands inside the dark site */
  --night:       #120C0E;
  --night-2:     #1B1315;
  --on-night:    #F0E4DC;
  --on-night-2:  #C9B7AC;

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --body: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  --s1: .5rem;  --s2: .875rem; --s3: 1.5rem;
  --s4: 2.5rem; --s5: 4.5rem;  --s6: 7rem;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --measure: 60ch;
}

/* Legacy token names, kept so every existing rule keeps working.
   Declared on ":root, body" and not on ":root" alone: custom properties
   compute where they are declared, so a body-level theme override would
   otherwise never reach these aliases. */
:root, body {
  --paper:        var(--ground);
  --paper-2:      var(--ground-2);
  --paper-3:      var(--ground-3);
  --ink:          var(--text);
  --ink-2:        var(--text-mid);
  --ink-3:        var(--text-dim);
  --stage:        var(--accent-text);
  --stage-lit:    var(--accent-text);
  --stage-deep:   var(--accent-deep);
  --line:         var(--edge);
  --line-2:       var(--edge-soft);
  --line-night:   var(--edge);
  --text-mid-c:   var(--text-mid);
  --dim:          var(--text-dim);
  --raise:        var(--ground-2);
  --line-soft:    var(--edge-soft);
  --cream:        var(--ground-2);
  --on-cream:     var(--text);
  --on-cream-dim: var(--text-mid);
  --amber:        var(--accent-text);
  --amber-lit:    var(--accent-text);
  --amber-deep:   var(--accent-deep);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;                 /* F7 — never below */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--stage); outline-offset: 3px; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--display); font-weight: 400;
  text-wrap: balance; margin: 0; letter-spacing: -.012em;
}
h1 { font-size: clamp(2.8rem, 7.5vw, 6.4rem); line-height: .94; }
h2 { font-size: clamp(2rem, 4.6vw, 3.7rem);   line-height: 1.03; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.15; }
em { font-style: italic; }
p { margin: 0 0 var(--s3); max-width: var(--measure); }

.eyebrow {
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--stage); margin: 0 0 var(--s3);
}
.script { font-family: var(--display); font-style: italic; color: var(--stage); }
.lede { font-size: 1.16rem; color: var(--ink-2); max-width: 44ch; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, 78rem); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
section { position: relative; }
.pad { padding-block: var(--s6); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 1.05rem clamp(1.25rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge-soft);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.nav.solid {
  background: color-mix(in srgb, var(--ground) 96%, transparent);
  border-bottom-color: var(--line-2);
}
.nav-brand {
  font-family: var(--display); font-size: 1.18rem;
  letter-spacing: .02em; text-decoration: none; white-space: nowrap;
}
.nav-links { display: flex; gap: var(--s3); }
.nav-links a {
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); transition: color .25s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--stage); }
@media (max-width: 54rem) { .nav-links { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.02rem 1.8rem;
  background: var(--stage); color: #FFF6F8;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--stage-deep); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: transparent; border-color: var(--stage); color: var(--stage); }
.night .btn-ghost { color: var(--on-night); border-color: var(--line-night); }
.night .btn-ghost:hover { border-color: var(--stage-lit); color: var(--stage-lit); }

.circ {
  width: 3rem; height: 3rem; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid var(--stage);
  background: transparent; color: var(--stage);
  display: grid; place-items: center; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.circ:hover, .circ.filled { background: var(--stage); color: #FFF6F8; }
.circ.filled:hover { background: var(--stage-deep); }

/* ============================================================
   EDITORIAL IMAGE SYSTEM
   Source material ranges from 4K studio files to video stills.
   A shared grade is what makes them read as one commissioned set.
   ============================================================ */

.plate { position: relative; margin: 0; }
/* The grade lives on the image itself, not on an overlay — an overlay
   pinned to the figure would sit on top of the caption, and a ratio box
   with overflow:hidden would clip it. */
.plate img,
.plate video {
  width: 100%; object-fit: cover; display: block;
  filter: saturate(.88) contrast(1.05) sepia(.07) brightness(.99);
}
.plate figcaption {
  margin-top: .7rem; font-size: .78rem; letter-spacing: .03em;
  color: var(--ink-3); display: flex; gap: .55rem; align-items: baseline;
}
.plate figcaption b {
  font-weight: 600; color: var(--stage); flex: 0 0 auto;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
.night .plate figcaption { color: var(--on-night-2); }

/* controlled aspect ratios — no more guessing at crops */
.ar-portrait > img, .ar-portrait > video { aspect-ratio: 4 / 5; }
.ar-tall     > img, .ar-tall     > video { aspect-ratio: 3 / 4.4; }
.ar-square   > img, .ar-square   > video { aspect-ratio: 1 / 1; }
.ar-wide     > img, .ar-wide     > video { aspect-ratio: 16 / 10; }
/* A 21:9 crop of a portrait source loses the subject on a phone, so the
   marquee stays tall on small screens and only goes cinematic on desktop. */
.ar-cinema   > img, .ar-cinema   > video { aspect-ratio: 4 / 5; object-position: 50% 34%; }
@media (min-width: 46rem) { .ar-cinema > img, .ar-cinema > video { aspect-ratio: 16 / 9; } }
@media (min-width: 70rem) { .ar-cinema > img, .ar-cinema > video { aspect-ratio: 21 / 9; } }

/* ---------- hero: full-page asset & editorial presentation ---------- */
.hero-full {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--paper);
}

.hero-full .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-full .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 24%;
  filter: none; /* pure clarity, no sepia or dulling filter */
  image-rendering: -webkit-optimize-contrast;
  display: block;
}

@media (min-width: 62rem) {
  .hero-full .hero-bg {
    overflow: hidden;
  }
  .hero-full .hero-bg img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 58% 24%;
    transform: none;
  }
}

.hero-full .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 7.5rem var(--s5);
}

.hero-full .hero-type {
  max-width: 32rem;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: clamp(2rem, 3.8vw, 3rem);
  border-radius: 4px;
  border: 1px solid var(--edge);
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.55);
}

.hero-full .hero-type h1 {
  margin: var(--s2) 0 var(--s3);
}

.hero-full .hero-type h1 .l2 {
  display: block;
  padding-left: clamp(0px, 3vw, 2.5rem);
}

@media (max-width: 62rem) {
  .hero-full {
    min-height: 100svh;
    align-items: flex-end;
  }
  .hero-full .hero-content {
    padding-block: 5.5rem 2.5rem;
  }
  .hero-full .hero-type {
    max-width: 100%;
    background: color-mix(in srgb, var(--ground) 92%, transparent);
  }
}

/* ---------- voice note ---------- */
.voice {
  display: flex; align-items: center; gap: var(--s3);
  border: 1px solid var(--line); background: rgba(255,255,255,.55);
  padding: var(--s2) var(--s3); margin-top: var(--s4); max-width: 29rem;
}
.night .voice { border-color: var(--line-night); background: rgba(255,255,255,.05); }
.voice-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.voice-label b {
  display: block; color: var(--ink); letter-spacing: 0;
  text-transform: none; font-size: .96rem; font-weight: 500;
}
.night .voice-label { color: var(--on-night-2); }
.night .voice-label b { color: var(--on-night); }

/* ---------- night sections ---------- */
.night { background: var(--night); color: var(--on-night); }
.night h1, .night h2, .night h3 { color: var(--on-night); }
.night p { color: var(--on-night-2); }
.night .eyebrow, .night .script { color: var(--stage-lit); }

/* ---------- the mirror (F2) ---------- */
.mirror { padding-block: var(--s6); }
.mirror-lines { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.mirror-lines p {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.22; color: var(--ink-2); margin: 0; max-width: 22ch;
}
.mirror-turn {
  font-family: var(--display); font-style: italic;
  font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 1.06;
  color: var(--stage); margin: 0; max-width: 16ch;
}

/* ---------- editorial act rows: offset, alternating ---------- */
.row-act { display: grid; gap: var(--s4); align-items: center; padding-block: var(--s5); }
@media (min-width: 60rem) {
  .row-act { grid-template-columns: 1.05fr .95fr; gap: var(--s6); }
  .row-act.flip > .plate { order: 2; }
  .row-act.flip > .row-copy { order: 1; }
  .row-act > .plate { transform: translateY(-1.5rem); }
  .row-act.flip > .plate { transform: translateY(1.5rem); }
}
.row-copy .band-index {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--stage); font-variant-numeric: tabular-nums;
}
.row-copy h3 { margin: var(--s1) 0 var(--s2); }
.row-copy p { color: var(--ink-2); }
.night .row-copy p { color: var(--on-night-2); }

/* ---------- letters ---------- */
.letters { display: grid; gap: var(--s3); }
@media (min-width: 56rem) { .letters { grid-template-columns: repeat(3, 1fr); } }
.letter {
  border-top: 2px solid var(--stage);
  background: var(--paper-2);
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
}
.night .letter { background: var(--night-2); }
.letter blockquote {
  margin: 0; font-family: var(--display); font-size: 1.2rem;
  line-height: 1.42; color: var(--ink);
}
.night .letter blockquote { color: var(--on-night); }
.letter cite { font-style: normal; font-size: .78rem; letter-spacing: .08em; color: var(--ink-3); }
.letter-badge {
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stage); align-self: flex-start;
}
.letter.is-sample { border-top-style: dashed; }
.placeholder-flag {
  margin-top: var(--s2); font-size: .74rem;
  color: var(--stage-deep); border-top: 1px solid var(--line); padding-top: var(--s2);
}
.sample-banner {
  max-width: none; border: 1px solid var(--stage);
  background: rgba(179,30,75,.07); color: var(--stage-deep);
  padding: var(--s2) var(--s3); font-size: .86rem; margin-bottom: var(--s3);
}
.sample-banner code {
  font-family: ui-monospace, Menlo, monospace;
  background: rgba(179,30,75,.1); padding: .1em .35em;
}

/* ---------- close ---------- */
.close { text-align: center; padding-block: var(--s6); }
.close h2 { font-size: clamp(3rem, 12vw, 10rem); line-height: .86; letter-spacing: -.025em; }
.close .btn { margin-top: var(--s4); }

/* ---------- footer ---------- */
.foot { background: var(--night); border-top: 1px solid var(--line); padding-block: var(--s4); font-size: .84rem; color: var(--ink-3); }
.foot-grid { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--stage); }
.foot h4 {
  font-family: var(--body); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stage); margin: 0 0 .6rem; font-weight: 600;
}

/* ---------- reveal ---------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* staged hero load — one directed moment, not scattered effects */
.stage-in > * { opacity: 0; transform: translateY(14px); animation: heroIn .9s var(--ease) forwards; }
.stage-in > *:nth-child(1) { animation-delay: .05s; }
.stage-in > *:nth-child(2) { animation-delay: .17s; }
.stage-in > *:nth-child(3) { animation-delay: .29s; }
.stage-in > *:nth-child(4) { animation-delay: .41s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage-in > * { opacity: 1; transform: none; animation: none; } }

/* ---------- mobile nav ---------- */
@media (max-width: 34rem) {
  .nav { padding: .8rem 1.1rem; gap: .7rem; }
  .nav-brand { font-size: 1rem; }
  .nav .btn { padding: .78rem 1rem; font-size: .68rem; letter-spacing: .09em; white-space: nowrap; }
}

/* ---------- /acts ---------- */
.act-head { margin-bottom: var(--s5); }
.act-line {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.35;
  color: var(--stage); max-width: 30ch; margin-top: var(--s3);
}
.act-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 56rem) { .act-grid { grid-template-columns: 1.6fr 1fr; gap: var(--s5); } }
.act-body h3, .act-facts h3, .how h3, .visually-quiet {
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--stage);
  margin-bottom: var(--s3);
}
.act-body p { color: var(--ink-2); }
.act-facts {
  border: 1px solid var(--line); background: var(--paper-2); padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
}
.act-facts dl { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.act-facts dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stage); margin-bottom: .2rem; }
.act-facts dd { margin: 0; font-size: .94rem; color: var(--ink-2); }
.act-facts .btn { align-self: flex-start; }

.no-list { margin: var(--s4) 0 var(--s3); padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .9rem; max-width: 46ch; }
.no-list li { padding-left: 1.9rem; position: relative; font-size: 1.02rem; }
.no-list li::before { content: "—"; position: absolute; left: 0; color: var(--stage); }

/* ---------- /him ---------- */
.chapter { padding-block: var(--s6); border-top: 1px solid var(--line-2); }
.chapter-deep { background: var(--paper-2); }
.chapter h2 { margin: var(--s2) 0 var(--s3); }
.needs-words {
  border: 1px dashed var(--stage); background: rgba(179,30,75,.05);
  padding: var(--s4) var(--s3) var(--s3); margin-top: var(--s4); position: relative;
}
.needs-words p { color: var(--ink-2); max-width: none; }
.needs-words-label {
  position: absolute; top: -.7rem; left: var(--s3);
  background: var(--paper); padding: 0 .6rem;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--stage); margin: 0;
}
.chapter-deep .needs-words-label { background: var(--paper-2); }
.needs-words-prompt {
  border-top: 1px solid rgba(179,30,75,.3); padding-top: var(--s2);
  margin: var(--s3) 0 0 !important; font-size: .86rem; color: var(--ink-3) !important;
}
.plain-photo { margin: var(--s5) 0 0; }
.plain-photo figcaption { margin-top: var(--s2); font-size: .84rem; color: var(--ink-3); }

/* ============================================================
   Compatibility layer — /acts, /him, /letters, /private still use
   the earlier .hero / .band / .cream markup. These map them onto
   the new palette so nothing renders on the wrong ground while
   those pages get the full editorial treatment in the next pass.
   ============================================================ */
.hero { min-height: 88svh; display: grid; align-items: end; position: relative; overflow: hidden;
  background: var(--night); color: var(--on-night); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
/* The scrim has to hold type over photographs we don't control — some of
   these are bright, busy phone shots. Two layers: a vertical fade for the
   copy block, plus a flat wash so nothing drops below AA. (F7) */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--night) 6%, rgba(20,16,14,.88) 34%, rgba(20,16,14,.55) 62%, rgba(20,16,14,.35) 100%),
    linear-gradient(180deg, rgba(179,30,75,.14), transparent 60%),
    rgba(20,16,14,.22);
}
.hero-copy { position: relative; z-index: 2; padding-bottom: var(--s5); }
.hero-copy h1, .hero-copy p:not(.eyebrow) { color: var(--on-night); }
.hero-copy .eyebrow { color: var(--stage-lit); }
.hero-copy .script { color: var(--stage-lit); }
.hero h1 { margin: var(--s2) 0 var(--s3); }
.hero h1 .l2 { display: block; padding-left: clamp(0px, 5vw, 4rem); }
.scrollcue { position: absolute; bottom: 1.5rem; right: clamp(1.25rem,4vw,2.5rem); z-index: 3;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-night-2); }

.band { position: relative; min-height: 72svh; display: grid; align-items: end; overflow: hidden;
  background: var(--night); }
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.band-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,16,14,.97) 3%, rgba(20,16,14,.8) 32%, rgba(20,16,14,.4) 62%, rgba(20,16,14,.15)),
              rgba(20,16,14,.18); }
.band-copy { position: relative; z-index: 2; padding: 0 clamp(1.25rem,4vw,3.5rem) var(--s4);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.band-copy h3 { color: var(--on-night); }
.band-copy p { color: var(--on-night-2); font-size: .97rem; max-width: 40ch; margin: var(--s2) 0 0; }
.band-index { font-size: .72rem; letter-spacing: .2em; color: var(--stage-lit);
  font-variant-numeric: tabular-nums; }
.band .circ { border-color: var(--stage-lit); color: var(--stage-lit); }
.band .circ:hover { background: var(--stage-lit); color: var(--night); }

/* .cream is now simply a raised paper section */
.cream { background: var(--paper-2); color: var(--ink); padding-block: var(--s6); }
.cream .eyebrow { color: var(--stage); }
.cream p { color: var(--ink-2); }

/* geo fork cards */
.fork { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 50rem) { .fork { grid-template-columns: 1fr 1fr; } }
.fork-card { background: var(--paper); border: 1px solid var(--line); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s2); }
.fork-card h3 { color: var(--ink); }
.fork-card p { color: var(--ink-2); }
.fork-card .price { font-family: var(--display); font-size: 1.7rem; color: var(--stage); }
.fork-card ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .4rem; }
.fork-card li { font-size: .94rem; color: var(--ink-2); }
.fork-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- the reel: one moving image, used once ---------- */
.reel { position: relative; min-height: 86svh; display: grid; align-items: end; overflow: hidden; }
.reel-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  filter: saturate(.95) contrast(1.04);
}
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--night) 5%, rgba(20,16,14,.82) 30%, rgba(20,16,14,.4) 60%, rgba(20,16,14,.12));
}
.reel-copy { position: relative; z-index: 2; padding-block: var(--s5); }
.reel-line {
  font-family: var(--display); font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.22; color: var(--on-night); max-width: 22ch; margin: 0;
}
@media (prefers-reduced-motion: reduce) { .reel-video { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .reel { background: var(--night) url("../assets/img/sensual-red-poster.jpg") center/cover; }
}

/* a small plate inside the fork cards */
.fork-card .plate { margin-bottom: var(--s2); }
.fork-card .plate img { aspect-ratio: 16/10; }

/* hero ledes sit on photography — they take the night colour, never ink */
.lede-night { font-size: 1.14rem; color: var(--on-night-2); }
.hero-copy .lede-night { color: rgba(244,238,228,.86); }

/* ---------- transcripts: every voice note has a text version (F7) ---------- */
.transcript { margin-top: .85rem; max-width: 29rem; }
.transcript summary {
  cursor: pointer; width: fit-content;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); list-style-position: inside;
}
.transcript summary:hover { color: var(--stage); }
.transcript p {
  margin: .7rem 0 0; max-width: none;
  font-family: var(--display); font-size: 1.05rem; line-height: 1.5; color: var(--ink-2);
}
.hero-copy .transcript summary { color: rgba(244,238,228,.72); }
.hero-copy .transcript summary:hover { color: var(--stage-lit); }
.hero-copy .transcript p { color: var(--on-night); }

/* ---------- /him: Will's own words ---------- */
.his-words {
  margin: var(--s4) 0 0; padding-left: var(--s3);
  border-left: 2px solid var(--stage);
}
.his-words p {
  font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.45; color: var(--ink); margin: 0 0 var(--s2); max-width: none;
}
.his-words cite {
  display: block; margin-top: var(--s2); font-style: normal;
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}


/* ============================================================
   PALETTE WIRING — appended last so it wins over the older rules.
   ============================================================ */

body { background: var(--ground); color: var(--text); }

/* fills use terracotta/rose; accent *text* uses tan/rose */
.btn { background: var(--accent-fill); color: var(--on-accent); }
.btn:hover { background: var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--edge); }
.btn-ghost:hover { background: transparent; border-color: var(--accent-text); color: var(--accent-text); }
.circ { border-color: var(--accent-text); color: var(--accent-text); }
.circ:hover, .circ.filled { background: var(--accent-fill); color: var(--on-accent); }
.circ.filled:hover { background: var(--accent-deep); }

/* the bar floats over both dark and light grounds */
.nav { background: color-mix(in srgb, var(--ground) 82%, transparent); border-bottom: 1px solid var(--edge-soft); }
.nav.solid { background: color-mix(in srgb, var(--ground) 96%, transparent); border-bottom-color: var(--edge); }

.night { background: var(--night); color: var(--on-night); }
.cream { background: var(--ground-2); color: var(--text); }
.cream p { color: var(--text-mid); }
.letter { background: var(--ground-2); }
.act-facts { background: var(--ground-2); border-color: var(--edge); }
.fork-card { background: var(--ground-2); border-color: var(--edge); }
.chapter-deep { background: var(--ground-2); }
.needs-words-label, .chapter-deep .needs-words-label { background: var(--ground-2); }

/* the sepia wash suited a bone page; on warm dark it muddies skin tones */
.plate img, .plate video { filter: saturate(.92) contrast(1.04) brightness(.98); }
.hero-media img, .band-media img { filter: saturate(.92) contrast(1.04); }

.placeholder-flag { color: var(--accent-text); border-top-color: var(--edge); }
.transcript p { color: var(--text-mid); }
.lede-night { color: var(--on-night-2); }

/* ============================================================
   B "Blush & Ink" — the booking page only (body class).
   Light, warm and the highest-contrast of the four directions,
   because this is where prices and commitments live (F8).
   ============================================================ */
body.theme-booking {
  --ground:      #FBF7F4;
  --ground-2:    #F2E3E0;   /* blush */
  --ground-3:    #EAD9D6;
  --card:        #FFFFFF;

  --edge:        rgba(28,21,23,.14);
  --edge-soft:   rgba(28,21,23,.07);

  --text:        #1C1517;   /* 16:1 */
  --text-mid:    #4A3B3F;
  --text-dim:    #6E5B60;

  --accent-fill: #A4133C;   /* deep rose · white on it = 7.6:1 */
  --accent-text: #A4133C;   /*           · on paper    = 7.2:1 */
  --accent-deep: #7C0E2D;
  --on-accent:   #FFF8F5;
  --error:       #8A2E1F;

  --night:       #1C1517;
  --night-2:     #2A2023;
  --on-night:    #FBF7F4;
  --on-night-2:  #D8CACD;
}
/* violet is the secondary here — used for quiet marks, never for fills */
body.theme-booking .band-index,
body.theme-booking .act-facts dt { color: #6A4C93; }
body.theme-booking .plate img { filter: saturate(.9) contrast(1.03); }


/* ------------------------------------------------------------
   Full-page hero scrim.
   Under the old bone palette the type sat on a light ground beside
   the photograph, so no overlay existed. On a dark ground ivory type
   was left sitting straight on a bright portrait. This puts the
   ground colour back behind the words, weighted to the text side so
   the picture stays open on the right.
   ------------------------------------------------------------ */
.hero-full .hero-bg::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg,
      var(--ground) 0%,
      color-mix(in srgb, var(--ground) 84%, transparent) 30%,
      color-mix(in srgb, var(--ground) 34%, transparent) 60%,
      transparent 88%),
    linear-gradient(to top, var(--ground) 2%, transparent 40%);
}
.hero-full .hero-content { position: relative; z-index: 3; }

/* On a phone the type sits over the middle of the picture, so the
   scrim becomes an even veil instead of a side wash. */
@media (max-width: 56rem) {
  .hero-full .hero-bg::after {
    background:
      linear-gradient(to top,
        var(--ground) 5%,
        color-mix(in srgb, var(--ground) 74%, transparent) 55%,
        color-mix(in srgb, var(--ground) 48%, transparent) 100%);
  }
}

/* ============================================================
   Media Enhancements: Non-scrollable fixed backgrounds,
   scrim overlays, responsive pictures, and styled placeholders
   ============================================================ */

/* Non-scrollable (fixed parallax) backgrounds */
.bg-fixed {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
@media (hover: none) and (pointer: coarse) {
  /* Touch devices: avoid viewport repaint stutter with fixed attachment */
  .bg-fixed {
    background-attachment: scroll;
  }
}
.scrim-dark {
  position: relative;
}
.scrim-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,16,18,0.85) 0%, rgba(18,12,14,0.92) 100%);
  z-index: 1;
  pointer-events: none;
}
.scrim-dark > * {
  position: relative;
  z-index: 2;
}

/* Styled user-facing placeholders */
.plate-placeholder {
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--s3);
  text-align: center;
  color: var(--text-dim);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  width: 100%;
  box-sizing: border-box;
}
.plate-placeholder.ar-portrait {
  aspect-ratio: 3 / 4;
}
.plate-placeholder:hover {
  border-color: var(--stage);
  background: var(--ground-3);
}
.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
}
.placeholder-icon {
  opacity: .6;
  stroke: var(--stage);
}
.placeholder-label {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--stage);
  font-weight: 600;
}
.placeholder-desc {
  font-size: .88rem;
  margin: 0;
  max-width: 32ch;
  color: var(--text-mid);
}

/* Video card embedded player styling */
.act-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night);
  border: 1px solid var(--line);
}
.act-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive picture tags in heroes/plates */
picture.hero-pic {
  display: contents;
}
picture.hero-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ------------------------------------------------------------
   Every landing section is now the same object: full-bleed image,
   100svh, glass card. The only thing that varies per page is where
   the picture is cropped, so that comes from --hero-focus on the
   section rather than a value baked into the rule.
   ------------------------------------------------------------ */
.hero-full .hero-bg img { object-position: var(--hero-focus, 50% 40%); }
@media (min-width: 62rem) {
  .hero-full .hero-bg img { object-position: var(--hero-focus, 50% 40%); }
}

/* Him uses <picture> for its mobile crop — without this the element
   collapses and the image never fills the section. */
.hero-full .hero-bg picture {
  display: block; width: 100%; height: 100%;
}

/* ------------------------------------------------------------
   Hero type scale.

   The hero is min-height:100svh, so anything that outgrows the
   viewport makes that page's landing section taller than the
   others — which is exactly what long headlines were doing
   ("Him" wrapped to six lines and pushed its hero to 1212px on a
   900px screen). Sizing against vh as well as vw keeps the card's
   contents inside one screen, so every landing section settles on
   the same 100svh regardless of how long its headline is.
   ------------------------------------------------------------ */
.hero-full .hero-type {
  max-width: 38rem;
}
.hero-full .hero-type h1 {
  font-size: clamp(2.2rem, min(5.2vw, 7.2vh), 4.6rem);
  line-height: .98;
}
.hero-full .hero-type .lede {
  font-size: clamp(1rem, 1.25vh, 1.14rem);
}

/* On short viewports the pages carrying a voice player still pushed a few
   pixels past one screen. The padding gives those pixels back as the window
   gets shorter, while never dropping below the fixed nav's 5rem. */
.hero-full .hero-content {
  padding-block: clamp(5rem, 12vh, 7.5rem) clamp(1.5rem, 8vh, var(--s5));
}

/* Phones see a narrow slice of a landscape photo, so the desktop crop can
   point at empty backdrop there. --hero-focus-sm overrides it below 62rem. */
@media (max-width: 62rem) {
  .hero-full .hero-bg img {
    object-position: var(--hero-focus-sm, var(--hero-focus, 50% 40%));
  }
}

/* Portrait hero on phones. Stretched to the full screen height, the face lands
   right where the glass card starts, so the photo keeps its own proportions,
   pins to the top and fades out behind the card. The section is still 100svh. */
@media (max-width: 62rem) and (orientation: portrait) {
  .hero-full .hero-bg picture { height: auto; }
  .hero-full .hero-bg picture img {
    height: auto;
    min-height: 60svh;
    object-fit: cover;
    object-position: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
}

/* width/height attributes on <img> exist so the browser can reserve space
   before the file loads. Without height:auto the height attribute is used
   literally (a 4800px-tall plate) and the aspect-ratio rules above are ignored. */
.plate img, .plate video { height: auto; }

/* .hero-right: for photos whose subject stands on the left. The card moves to
   the right edge and the legibility wash flips with it, so the subject is
   neither covered by the card nor left in the dark. Phones keep the stacked
   layout, where the card already sits below the subject. */
@media (min-width: 62rem) {
  .hero-full.hero-right .hero-type { margin-left: auto; }
  .hero-full.hero-right .hero-bg::after {
    background:
      linear-gradient(260deg,
        var(--ground) 0%,
        color-mix(in srgb, var(--ground) 84%, transparent) 30%,
        color-mix(in srgb, var(--ground) 34%, transparent) 60%,
        transparent 88%),
      linear-gradient(to top, var(--ground) 2%, transparent 40%);
  }
}

/* ---------- Letters page non-scrollable background ---------- */
.page-letters {
  position: relative;
}

.letters-fixed-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.letters-fixed-backdrop picture {
  width: 100%;
  height: 100%;
  display: block;
}

.letters-fixed-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  filter: none; /* Keep image sharp — no blur as instructed */
}

.letters-backdrop-tint {
  position: absolute;
  inset: 0;
  /* subtle warm-dark tint ensuring ivory text contrast without darkening the subject out of view */
  background: rgba(23, 16, 18, 0.42);
}

/* Allow fixed background to show through the letters sections */
.page-letters .cream,
.page-letters .pad {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* Semi-translucent letter cards so text is sharp while background remains visible */
.page-letters .letter {
  background: rgba(31, 21, 24, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(240, 228, 220, 0.12);
  border-top: 2px solid var(--accent-text);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.page-letters h2,
.page-letters .eyebrow,
.page-letters .wrap > p {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.page-letters .close {
  background: linear-gradient(to bottom, transparent 0%, rgba(18, 12, 14, 0.6) 40%, var(--night) 100%);
  position: relative;
  z-index: 1;
}

.page-letters .hero-full {
  position: relative;
  z-index: 2;
}

.page-letters .foot {
  position: relative;
  z-index: 2;
  background: var(--night);
  border-top: 1px solid var(--edge);
}

.page-letters .foot a {
  color: var(--text-mid);
}

.page-letters .foot a:hover {
  color: var(--accent-text);
}

.page-letters .foot p {
  color: var(--text-dim);
}


/* A voice slot waiting for its recording. main.js removes the attribute once
   the mp3 is found on the server, so visitors never see a dead play button. */
.voice[data-voice-pending] { display: none; }
.voice + .needs-words, .voice + .his-words, .voice + .no-list { margin-top: var(--s3); }

/* Non-scrollable background wrapper extending across closing section and footer on him.html */
.him-closing-foot-wrap {
  position: relative;
  background-attachment: fixed;
  background-position: center 20%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

@media (hover: none) and (pointer: coarse) {
  .him-closing-foot-wrap {
    background-attachment: scroll;
  }
}

.him-closing-foot-wrap .him-closing-scrim {
  background: rgba(14, 9, 12, 0.65);
  position: relative;
  z-index: 1;
  padding-block: var(--s6);
}

.him-closing-foot-wrap .him-closing-scrim h2 {
  color: var(--text);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

.him-closing-foot-wrap .him-closing-scrim p {
  color: var(--text-mid);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.him-closing-foot-wrap .him-closing-scrim .eyebrow {
  color: var(--stage-lit);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Footer on him.html with darker tint and blur */
.him-closing-foot-wrap .foot.him-foot-blurred {
  background: rgba(10, 6, 8, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 2;
}

.him-closing-foot-wrap .foot.him-foot-blurred h4 {
  color: var(--on-night);
}

.him-closing-foot-wrap .foot.him-foot-blurred p,
.him-closing-foot-wrap .foot.him-foot-blurred a {
  color: var(--on-night-2);
}

.him-closing-foot-wrap .foot.him-foot-blurred a:hover {
  color: #fff;
}


/* ------------------------------------------------------------
   /him chapters as photographs.
   The photo fills the section and the words sit over it. A wash
   darkens only the side the text is on, so the words stay at full
   contrast and he stays visible on the other side.
   --chapter-focus sets the desktop crop, --chapter-focus-sm the phone crop.
   ------------------------------------------------------------ */
.chapter-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  background: var(--ground);
  padding-block: clamp(6rem, 12vh, 9rem);
}
.chapter-bg { position: absolute; inset: 0; z-index: -1; }
.chapter-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--chapter-focus, 50% 40%);
  display: block;
}
.chapter-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--ground) 0%, transparent 14%, transparent 86%, var(--ground) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--ground) 94%, transparent) 0%,
      color-mix(in srgb, var(--ground) 86%, transparent) 34%,
      color-mix(in srgb, var(--ground) 40%, transparent) 48%,
      transparent 64%);
}
.chapter-photo--right .chapter-bg::after {
  background:
    linear-gradient(to bottom, var(--ground) 0%, transparent 14%, transparent 86%, var(--ground) 100%),
    linear-gradient(270deg,
      color-mix(in srgb, var(--ground) 94%, transparent) 0%,
      color-mix(in srgb, var(--ground) 86%, transparent) 34%,
      color-mix(in srgb, var(--ground) 40%, transparent) 48%,
      transparent 64%);
}

.chapter-copy { max-width: 34rem; }
.chapter-photo--right .chapter-copy { margin-left: auto; }
.chapter-photo h2 { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.chapter-photo .his-words p { color: var(--text); text-shadow: 0 1px 18px rgba(0,0,0,.5); }
.chapter-photo .his-words cite { color: var(--text-mid); }

/* The voice note, as glass over the photo. */
.chapter-photo .voice {
  background: color-mix(in srgb, var(--ground) 62%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--edge);
}
.chapter-photo .voice-label { color: var(--accent-text); }
.chapter-photo .voice-label b { color: var(--text); }

@media (min-width: 62rem) {
  .chapter-photo { min-height: 100svh; display: flex; align-items: center; }
  .chapter-photo > .wrap { width: min(100% - 5rem, 78rem); }
}

/* Phones: the photo takes the top of the section at full strength, so his
   face is seen before any text, then fades into the words below it. */
@media (max-width: 61.99rem) {
  .chapter-photo { padding-top: 58svh; }
  .chapter-bg { bottom: auto; height: 78svh; }
  .chapter-bg img { object-position: var(--chapter-focus-sm, var(--chapter-focus, 50% 40%)); }
  .chapter-bg::after,
  .chapter-photo--right .chapter-bg::after {
    background: linear-gradient(to bottom,
      transparent 0%, transparent 45%,
      color-mix(in srgb, var(--ground) 70%, transparent) 72%,
      var(--ground) 100%);
  }
  .chapter-copy { max-width: none; }
}

/* ------------------------------------------------------------
   /him as sliding doors.
   Five doors: hero, chapter one, two, three, closing + footer. Each door
   waits, still, behind the one above it. As you scroll, the door on top
   lifts away like a garage door and the next is already there.

   How: every door after the first starts one screen early (margin-top:
   -100vh), so it sits directly under the last screen of the door above,
   which has a higher z-index. Its section is sticky at top:0, so it holds
   still while the door above slides off. The spacer after it gives that
   hold exactly one screen of scroll, then the door scrolls normally.

   Inside a door, the photo is sticky too: it holds still while that
   section's words scroll over it, and only leaves when the whole door
   lifts to reveal the next one.

   Desktop only. On phones the chapters stack photo-then-words and the page
   scrolls normally.
   ------------------------------------------------------------ */
@media (min-width: 62rem) {
  .door { position: relative; z-index: var(--door-z, 1); }
  .door--reveal { margin-top: -100vh; }
  .door--reveal > :first-child { position: sticky; top: 0; }
  .door-spacer { height: 100vh; }

  /* Every door is at least a screen tall, and opaque, so nothing behind it
     shows through before its turn. */
  .door > section, .door > .him-closing-foot-wrap { min-height: 100vh; }

  /* Chapter photo: held for the length of its own section. */
  .chapter-photo {
    display: block;
    padding-block: 0;
    overflow: clip;           /* hidden would stop the sticky photo */
  }
  .chapter-photo .chapter-bg {
    inset: auto;              /* clear the base rule's inset:0 first... */
    position: sticky; top: 0; /* ...or it would cancel this top */
    height: 100vh;
    z-index: 0;
  }
  .chapter-photo > .wrap {
    position: relative; z-index: 1;
    margin-top: -100vh;
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(7rem, 14vh, 10rem) clamp(5rem, 10vh, 7rem);
  }
  /* The edge of each door is now the transition, so no fade at the ends. */
  .chapter-photo .chapter-bg::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--ground) 94%, transparent) 0%,
      color-mix(in srgb, var(--ground) 86%, transparent) 34%,
      color-mix(in srgb, var(--ground) 40%, transparent) 48%,
      transparent 64%);
  }
  .chapter-photo--right .chapter-bg::after {
    background: linear-gradient(270deg,
      color-mix(in srgb, var(--ground) 94%, transparent) 0%,
      color-mix(in srgb, var(--ground) 86%, transparent) 34%,
      color-mix(in srgb, var(--ground) 40%, transparent) 48%,
      transparent 64%);
  }

  /* Closing + footer: its photo already holds still (fixed background);
     the footer sits at the bottom of the screen. */
  .door > .him-closing-foot-wrap {
    display: flex; flex-direction: column; justify-content: space-between;
    background-color: var(--ground);
  }
  .door > .him-closing-foot-wrap .him-closing-scrim { flex: 1; display: flex; align-items: center; }
  .door > .him-closing-foot-wrap .him-closing-scrim > .narrow { width: min(100% - 2.5rem, 46rem); }
}
@media (max-width: 61.99rem) {
  .door-spacer { display: none; }
}

/* Lead-in that opens chapter one. */
.chapter-preface { margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--edge); }
.chapter-preface p { text-shadow: 0 1px 18px rgba(0,0,0,.5); }

/* Homepage "Come closer": photograph behind the closing call. */
.close-photo { position: relative; isolation: isolate; overflow: hidden; }
.close-bg { position: absolute; inset: 0; z-index: -1; }
.close-bg picture { display: block; width: 100%; height: 100%; }
.close-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.close-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%,
      color-mix(in srgb, var(--ground) 72%, transparent) 0%,
      color-mix(in srgb, var(--ground) 45%, transparent) 70%),
    linear-gradient(to bottom, var(--ground) 0%, transparent 18%, transparent 82%, var(--ground) 100%);
}
.close-photo h2, .close-photo p { text-shadow: 0 2px 24px rgba(0,0,0,.55); }
@media (max-width: 62rem) and (orientation: portrait) {
  .close-bg img { object-position: 62% 25%; }
}

/* Desktop: the bath photo has him dead centre, exactly where a centred
   COME CLOSER would sit. So the call moves to the left over a dark wash,
   and the photo is drawn a quarter wider with the spare width off the
   right edge, which moves him clear of the words. */
@media (min-width: 62rem) {
  .close-photo { text-align: left; }
  .close-photo > .wrap { width: auto; max-width: 40rem; margin-inline: clamp(2rem, 7vw, 8rem) auto; }
  .close-photo > .wrap > p { margin-left: 0 !important; }  /* beats the inline "auto" centring */
  .close-bg img {
    position: absolute; top: 0; left: 0;   /* extra width spills off the right, */
    width: 125%; max-width: none;          /* so he moves right, clear of the words */
    object-position: 50% 30%;
  }
  .close-bg::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--ground) 92%, transparent) 0%,
        color-mix(in srgb, var(--ground) 78%, transparent) 30%,
        color-mix(in srgb, var(--ground) 20%, transparent) 50%,
        transparent 62%),
      linear-gradient(to bottom, var(--ground) 0%, transparent 16%, transparent 84%, var(--ground) 100%);
  }
}

/* Phones: a centred call would sit on his face, so the photo leads at full
   strength and the words start below him, over a fade. */
@media (max-width: 62rem) and (orientation: portrait) {
  .close-photo {
    min-height: 100svh;
    padding-top: 58svh;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .close-bg img { object-position: 62% 18%; }
  .close-bg::after {
    background: linear-gradient(to bottom,
      var(--ground) 0%, transparent 10%, transparent 42%,
      color-mix(in srgb, var(--ground) 78%, transparent) 60%,
      var(--ground) 82%);
  }
}

/* ------------------------------------------------------------
   /him photos at their own shape.
   These are portrait photos. Stretched across a landscape screen they
   lost ~60% of their height, so on desktop each one is shown whole, full
   screen height, beside the words, and a blurred, darkened copy of the
   same photo fills the rest of the section behind it. On phones each is
   shown at its exact proportions (--chapter-ratio = height / width).
   ------------------------------------------------------------ */
.chapter-photo .chapter-bg { overflow: hidden; }
.chapter-photo .chapter-bg::before,
.him-closing-foot-wrap::before {
  content: ""; position: absolute; inset: -60px; z-index: 0;
  background: var(--chapter-img) center / cover no-repeat;
  filter: blur(30px) saturate(.9) brightness(.65);
}
.chapter-photo .chapter-bg::after { z-index: 1; }
.chapter-photo .chapter-bg img { position: relative; z-index: 2; }
.him-closing-foot-wrap { background-image: none; }

@media (min-width: 62rem) {
  /* The whole photo, top to bottom, set in from the page edge. */
  .chapter-photo .chapter-bg img,
  .him-closing-scrim .closing-portrait {
    position: absolute; z-index: 2;
    top: 6.5rem;
    height: calc(100vh - 9rem);
    width: auto;
    max-width: 46vw;
    object-fit: cover;
    object-position: 50% 30%;   /* only matters if max-width ever trims it */
    right: max(2.5rem, calc((100vw - 78rem) / 2));
    left: auto;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  }
  .chapter-photo--right .chapter-bg img { left: max(2.5rem, calc((100vw - 78rem) / 2)); right: auto; }

  /* The blurred fill is only atmosphere; darken it evenly, a touch more on
     the words' side. The sharp photo sits above this, undimmed. */
  .chapter-photo .chapter-bg::after {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--ground) 70%, transparent) 0%,
      color-mix(in srgb, var(--ground) 45%, transparent) 60%,
      color-mix(in srgb, var(--ground) 35%, transparent) 100%);
  }
  .chapter-photo--right .chapter-bg::after {
    background: linear-gradient(270deg,
      color-mix(in srgb, var(--ground) 70%, transparent) 0%,
      color-mix(in srgb, var(--ground) 45%, transparent) 60%,
      color-mix(in srgb, var(--ground) 35%, transparent) 100%);
  }
  .chapter-copy { max-width: min(34rem, calc(100vw - 46vw - 7rem)); }

  /* Closing: words on the left, the photo whole on the right. */
  .him-closing-foot-wrap .him-closing-scrim {
    position: relative;
    background: color-mix(in srgb, var(--ground) 45%, transparent);
  }
  .him-closing-scrim .closing-portrait { top: 6.5rem; height: calc(100% - 9rem); max-height: calc(100vh - 9rem); }
  .door > .him-closing-foot-wrap .him-closing-scrim > .narrow {
    position: relative; z-index: 3;
    width: auto; max-width: 34rem;
    margin-inline: max(2.5rem, calc((100vw - 78rem) / 2)) auto;
  }
}

@media (max-width: 61.99rem) {
  /* Exactly the photo's shape: full width, nothing cropped. */
  .chapter-photo .chapter-bg::before { display: none; }
  .chapter-photo .chapter-bg { height: calc(100vw * var(--chapter-ratio, 1.33)); }
  .chapter-photo .chapter-bg img { object-position: 50% 50%; }
  .chapter-photo { padding-top: calc(100vw * var(--chapter-ratio, 1.33) - 5rem); }
  .chapter-photo .chapter-bg::after,
  .chapter-photo--right .chapter-bg::after {
    background: linear-gradient(to bottom,
      transparent 0%, transparent 70%,
      color-mix(in srgb, var(--ground) 75%, transparent) 88%,
      var(--ground) 100%);
  }

  .him-closing-foot-wrap .him-closing-scrim { padding-top: 0; }
  .him-closing-scrim .closing-portrait {
    width: 100%; height: auto; display: block;
    margin-bottom: calc(-1 * var(--s5));
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  .him-closing-scrim > .narrow { position: relative; z-index: 1; }
}

/* ------------------------------------------------------------
   /him on phones: the same garage doors as desktop.
   Each door waits still behind the one above and is uncovered as that
   door lifts. Inside a chapter the photo stays pinned at the top of the
   screen, whole and uncropped, and the words arrive on a dark glass
   sheet that slides up over it, so text never sits on the bare photo.

   100lvh (the screen with the browser bars hidden) is used for the door
   maths, with 100vh as the fallback, so a door is always at least a full
   screen and nothing behind it peeks out when the address bar hides.
   ------------------------------------------------------------ */
@media (max-width: 61.99rem) {
  .door { position: relative; z-index: var(--door-z, 1); }
  .door--reveal { margin-top: -100vh; margin-top: -100lvh; }
  .door--reveal > :first-child { position: sticky; top: 0; }
  .door-spacer { display: block; height: 100vh; height: 100lvh; }
  .door > section,
  .door > .him-closing-foot-wrap { min-height: 100vh; min-height: 100lvh; }

  /* Chapter: pinned photo layer */
  .chapter-photo { display: block; padding: 0; overflow: clip; }
  .chapter-photo .chapter-bg {
    inset: auto;
    position: sticky; top: 0;
    height: 100vh; height: 100lvh;
    z-index: 0;
  }
  .chapter-photo .chapter-bg::before { display: block; }
  .chapter-photo .chapter-bg img {
    position: absolute; z-index: 2;
    top: 4.4rem; left: 0;                        /* just under the nav */
    width: 100%;
    height: calc(100vw * var(--chapter-ratio, 1.33));   /* its own shape */
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  }
  .chapter-photo .chapter-bg::after,
  .chapter-photo--right .chapter-bg::after {
    background: color-mix(in srgb, var(--ground) 35%, transparent);
  }

  /* Chapter: the words on a sheet that slides up over the photo. The sheet
     starts where the photo ends, or at the latest 9rem from the bottom of
     the screen so its heading always shows as the cue to keep scrolling. */
  .chapter-photo > .wrap {
    position: relative; z-index: 1;
    margin-top: -100vh; margin-top: -100lvh;
    width: 100%;
    padding: min(calc(4.4rem + 100vw * var(--chapter-ratio, 1.33) - 3.5rem),
                 calc(100lvh - 9rem))
             0 0;
  }
  .chapter-copy {
    max-width: none;
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid var(--edge);
    box-shadow: 0 -28px 40px -12px color-mix(in srgb, var(--ground) 85%, transparent);
    padding: var(--s4) 1.25rem var(--s6);
    min-height: 60vh;
  }
  .chapter-photo h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .chapter-photo .his-words p { font-size: 1.22rem; line-height: 1.55; }
  .chapter-photo .voice { max-width: none; }
  .chapter-preface { margin-bottom: var(--s4); padding-bottom: var(--s3); }
  .chapter-preface p:first-child { font-size: 1.3rem !important; }

  /* Closing: photo whole under the nav, the ask below it, then the footer. */
  .him-closing-foot-wrap { display: flex; flex-direction: column; }
  .him-closing-foot-wrap .him-closing-scrim { flex: 1; padding-top: 4.4rem; }
}

/* Upright tablets use the phone layout, where a full-width portrait photo
   would be taller than the screen. --pw caps the photo's width so its
   height always fits, centred over the blurred fill. On phones the cap
   never bites, so they stay full width. */
@media (max-width: 61.99rem) {
  .chapter-photo {
    --pw: min(100vw, calc((100vh - 12rem) / var(--chapter-ratio, 1.33)));
    --pw: min(100vw, calc((100lvh - 12rem) / var(--chapter-ratio, 1.33)));
  }
  .chapter-photo .chapter-bg img {
    width: var(--pw);
    height: calc(var(--pw) * var(--chapter-ratio, 1.33));
    left: 50%;
    transform: translateX(-50%);
  }
  .chapter-photo > .wrap {
    padding-top: min(calc(4.4rem + var(--pw) * var(--chapter-ratio, 1.33) - 3.5rem),
                     calc(100lvh - 9rem));
  }
}

/* Text for screen readers only. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   Phone menu (built by main.js). Shown below 54rem, where the
   header's own links are hidden.
   ------------------------------------------------------------ */
.nav-toggle { display: none; }
.nav-menu { display: none; }

@media (max-width: 54rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;          /* 44px touch target */
    margin-left: -.25rem;
    background: none; border: 1px solid var(--edge); border-radius: 2px;
    color: var(--text); cursor: pointer; flex: 0 0 auto;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .nav-toggle-bars { position: relative; width: 1.15rem; height: .7rem; }
  .nav-toggle-bars span {
    position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
    transition: transform .3s var(--ease), top .3s var(--ease);
  }
  .nav-toggle-bars span:first-child { top: 0; }
  .nav-toggle-bars span:last-child  { top: calc(100% - 1.5px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { top: calc(50% - .75px); transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child  { top: calc(50% - .75px); transform: rotate(-45deg); }

  /* The brand takes the spare room so the CTA and the menu button sit together on the right. */
  .nav-brand { margin-right: auto; }

  .nav-menu {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 59;       /* just under the header, so its close button stays usable */
    padding: calc(4.4rem + var(--s5)) 1.5rem calc(var(--s4) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--ground) 97%, transparent);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    overflow-y: auto;
    opacity: 0; transform: translateY(-.75rem);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav-menu[hidden] { display: none; }
  .nav-menu.is-open { opacity: 1; transform: none; }

  .nav-menu-links { display: flex; flex-direction: column; }
  .nav-menu-links a {
    font-family: var(--display);
    font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.1;
    color: var(--text); text-decoration: none;
    padding: .55rem 0;
    border-bottom: 1px solid var(--edge-soft);
    opacity: 0; transform: translateY(.6rem);
    transition: opacity .35s var(--ease), transform .35s var(--ease), color .2s;
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  .nav-menu.is-open .nav-menu-links a { opacity: 1; transform: none; }
  .nav-menu-links a[aria-current="page"] { color: var(--accent-text); font-style: italic; }
  .nav-menu-links a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }

  .nav-menu-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding-top: var(--s4); }
  .nav-menu-foot .btn { width: 100%; text-align: center; }
  .nav-menu-mail { font-size: .9rem; color: var(--text-mid); text-decoration: none; }

  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (max-width: 54rem) and (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-menu-links a, .nav-toggle-bars span { transition: none; }
}

/* Phone menu with a photograph behind it. His face sits near the top of
   the photo, so the links and CTA move to the bottom of the screen (also
   where a thumb reaches) and the photo fades to the page colour behind them. */
@media (max-width: 54rem) {
  .nav-menu {
    justify-content: flex-end;
    background: var(--ground);
    isolation: isolate;
  }
  .nav-menu::before,
  .nav-menu::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .nav-menu::before {
    /* Path is relative to this stylesheet, so it works from legal/ pages too. */
    background: url('../assets/img/menu-billiards.jpg') 50% 12% / cover no-repeat;
  }
  .nav-menu::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 55%, transparent) 0%,
      transparent 14%,
      transparent 34%,
      color-mix(in srgb, var(--ground) 72%, transparent) 50%,
      color-mix(in srgb, var(--ground) 94%, transparent) 64%,
      var(--ground) 100%);
  }
  .nav-menu-links a { text-shadow: 0 2px 18px color-mix(in srgb, var(--ground) 80%, transparent); }
}

/* The Call-Out: Will stands at the far right of this photo, so the crop
   favours the right (the default centre shows the extinguisher). */
.band--callout .band-media img { object-position: 78% 22%; }

/* ------------------------------------------------------------
   /acts photo & video bands on phones and upright tablets.
   A wide photo stretched to fill a tall band lost up to 64% of its
   width; the Chair video sat at the top of a tall black band. Here each
   band shows its photo or video at its own shape, full width, and the
   words follow underneath on the dark ground.
   ------------------------------------------------------------ */
@media (max-width: 40rem), (max-width: 61.99rem) and (orientation: portrait) {
  .band { display: block; min-height: 0; }
  .band-media { position: relative; inset: auto; }
  .band-media img { height: auto; aspect-ratio: auto; }
  .band--callout .band-media img { object-position: 50% 50%; }
  .band-media::after {
    background: linear-gradient(to bottom, transparent 55%, var(--night) 100%);
  }
  .act-video-wrap { border: 0; }
  .band-copy {
    display: block;
    padding-top: var(--s3);
    padding-bottom: var(--s3);
    margin-top: calc(-1 * var(--s4));   /* the heading tucks just into the fade */
  }
  .band-copy h3 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* Voice bars everywhere: dark glass, the same treatment as the /him
   chapters. The old light-grey bar left the small length label
   ("25 SECONDS") almost unreadable. Built from theme tokens, so it also
   follows the light palette on the booking page. */
.voice {
  background: color-mix(in srgb, var(--ground) 62%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--edge);
}
.voice-label { color: var(--accent-text); }
.voice-label b { color: var(--text); }

/* /acts closing: stage footage behind "Bring him to you". */
.close-video { position: relative; isolation: isolate; overflow: hidden; }
.close-video .close-bg { position: absolute; inset: 0; z-index: -1; }
.close-video .close-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 22%;   /* trim the audience, not his head */
  display: block;
}
.close-video .close-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ground) 0%, transparent 18%, transparent 80%, var(--ground) 100%),
              color-mix(in srgb, var(--ground) 45%, transparent);
}
.close-video h2, .close-video p { text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.close-video p[style] { color: var(--text) !important; }

/* Desktop: a full screen of footage, the ask on the left over a wash,
   Will clear on the right. */
@media (min-width: 62rem) {
  .close-video {
    min-height: 100vh;
    display: flex; align-items: center;
    text-align: left;
  }
  .close-video > .wrap { width: auto; max-width: 40rem; margin-inline: clamp(2rem, 7vw, 8rem) auto; }
  .close-video > .wrap > p { margin-left: 0 !important; }
  .close-video .close-bg::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--ground) 90%, transparent) 0%,
        color-mix(in srgb, var(--ground) 72%, transparent) 30%,
        color-mix(in srgb, var(--ground) 18%, transparent) 50%,
        transparent 64%),
      linear-gradient(to bottom, var(--ground) 0%, transparent 14%, transparent 86%, var(--ground) 100%);
  }
}

/* Phones: the portrait cut fills a full screen; the words sit at the
   bottom over a fade, Will above them. */
@media (max-width: 61.99rem) and (orientation: portrait) {
  .close-video {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .close-video .close-bg video { object-position: 55% 40%; }
  .close-video .close-bg::after {
    background: linear-gradient(to bottom,
      var(--ground) 0%, transparent 12%, transparent 40%,
      color-mix(in srgb, var(--ground) 80%, transparent) 62%,
      var(--ground) 88%);
  }
}

/* Phone heroes: drop the photo clear of the fixed nav, so a face near the
   top of the frame isn't sitting under the bar. Pairs with the portrait
   crops served to phones via <source media="…orientation: portrait">. */
@media (max-width: 62rem) and (orientation: portrait) {
  .hero-full .hero-bg picture img {
    position: relative;   /* without this, top has nothing to offset from */
    top: 4.4rem;
    min-height: 56svh;
  }
}

/* Short phones (iPhone SE and friends): the Home and Acts hero cards carry
   a voice player and transcript, which on a 667px screen left only ~75px of
   photograph showing. Tighten the card's own spacing rather than cut
   anything out of it. Taller phones are untouched. */
@media (max-width: 62rem) and (orientation: portrait) and (max-height: 740px) {
  .hero-full .hero-type { padding: 1.35rem 1.25rem 1.5rem; }
  .hero-full .hero-type h1 { margin: .5rem 0 .85rem; font-size: clamp(1.95rem, 8.4vw, 2.4rem); }
  .hero-full .hero-type .lede { font-size: 1rem; line-height: 1.5; }
  .hero-full .voice { margin-top: 1.1rem; padding: .55rem .85rem; }
  .hero-full .transcript { margin-top: .75rem; }
}

/* Phone held sideways: only ~390px of height, so the hero card has to give.
   Narrower, tighter, smaller type — the hero then still fits one screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-full .hero-content { padding-block: 3.9rem .85rem; }
  .hero-full .hero-type { max-width: 26rem; padding: .85rem 1rem .95rem; }
  .hero-full .hero-type h1 { font-size: clamp(1.4rem, 4.4vh, 1.9rem); margin: .3rem 0 .5rem; }
  .hero-full .hero-type .lede { font-size: .94rem; line-height: 1.45; }
  .hero-full .voice { margin-top: .8rem; padding: .5rem .8rem; }
  .hero-full .transcript { margin-top: .6rem; }
}

/* ------------------------------------------------------------
   Phone pass over the whole site (not just heroes).
   Three problems found by auditing every page at 390x844:
   small type, tap targets under 36px, and photos forced into
   fixed crops that suit desktop columns but not a phone.
   ------------------------------------------------------------ */
@media (max-width: 62rem) {
  /* 1. Type. 11.5px eyebrows and 13.4px footer text are too small for
     the audience this site is aimed at (research F7: contrast and size). */
  .eyebrow, .band-index { font-size: .85rem; letter-spacing: .12em; }
  .foot { font-size: .95rem; }
  .plate figcaption, .plain-photo figcaption { font-size: .88rem; }

  /* 2. Tap targets: 44px is the comfortable minimum on a phone.
     Footer links were 15px tall, the transcript toggle 18px. */
  .foot a { display: inline-block; padding: .6rem 0; }
  .transcript summary { padding: .7rem 0; }
  .nav-brand { padding: .35rem 0; }
  .room-exit, .softexit a { display: inline-block; padding: .6rem 0; }

  /* 3. Photos at their own shape instead of a desktop crop. The fixed
     ratios (4:5, 16:10, 21:9) are right for desktop columns; on a phone
     they threw away up to 187% of the frame. */
  .plate img, .plate video,
  .pack-plate img,
  .fork-card .plate img,
  .plain-photo img {
    aspect-ratio: auto;
    height: auto;
  }
  .pack-plate { aspect-ratio: auto; }
  .reel-video { aspect-ratio: 16 / 9; height: auto; object-fit: contain; }
}