/* ═══════════════════════════════════════════════════════════════════
   MELISSA ZURISK — Las Vegas
   styles.css

   00  Tokens
   01  Reset & base
   02  Utilities
   03  Grain / vignette
   04  Loader
   05  Nav + drawer
   06  Act shell (scrub stage + canvas)
   07  Act I — Hero
   08  Scroll cue
   09  Stats strip
   10  Marquee
   11  Act II — Pillars
   11b Menu strip
   12  Act III — Work cards
   12b Gallery + lightbox
   13  Act IV — Finale + buttons
   13b Book pill (floating coarse CTA)
   14  Footer
   15  Responsive
   15b Blog pages (.page-blog)
   16  Reduced motion / print
   ═══════════════════════════════════════════════════════════════════ */


/* ── 00 · TOKENS ─────────────────────────────────────────────────── */

:root {
  /* Ink */
  --ink:        #080608;
  --ink-2:      #120d13;
  --ink-3:      #1b141c;
  --ink-line:   rgba(243, 238, 231, 0.11);

  /* Cream */
  --cream:      #f3eee7;
  --cream-70:   rgba(243, 238, 231, 0.70);
  --cream-45:   rgba(243, 238, 231, 0.45);
  --cream-25:   rgba(243, 238, 231, 0.25);

  /* Neon */
  --neon:       #ff0055;
  --neon-2:     #00f0ff;
  --neon-soft:  rgba(255, 0, 85, 0.55);
  --neon-2-soft:rgba(0, 240, 255, 0.45);

  /* Gradients */
  --grad:       linear-gradient(100deg, var(--neon) 0%, #ff4d7d 34%, var(--neon-2) 100%);
  --grad-soft:  linear-gradient(100deg, rgba(255,0,85,.16), rgba(0,240,255,.10));

  /* Glass */
  --glass-bg:   rgba(243, 238, 231, 0.035);
  --glass-brd:  rgba(243, 238, 231, 0.13);
  --glass-blur: blur(14px);

  /* Type */
  --f-display:  'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
  --f-body:     'Archivo', 'Helvetica Neue', Helvetica, sans-serif;

  --t-hero:     clamp(4.2rem, 17.5vw, 17rem);
  --t-h2:       clamp(2.8rem, 8.2vw, 7.4rem);
  --t-h3:       clamp(1.65rem, 3.1vw, 2.65rem);
  --t-body:     clamp(0.98rem, 1.12vw, 1.12rem);
  --t-kicker:   clamp(0.63rem, 0.78vw, 0.75rem);

  /* Space */
  --gut:        clamp(1.25rem, 4.4vw, 4.5rem);
  --wrap:       1320px;

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:    cubic-bezier(0.65, 0, 0.35, 1);

  /* Chrome */
  --nav-h:      clamp(62px, 7.4vh, 84px);

  color-scheme: dark;
}


/* ── 01 · RESET & BASE ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis owns scrolling once initialised */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

body.is-loading { overflow: hidden; height: 100vh; }
body.is-locked  { overflow: hidden; }

img, svg, canvas, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { list-style: none; }

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

:focus-visible {
  outline: 2px solid var(--neon-2);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Custom scrollbar (non-Lenis fallback) */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--neon), var(--neon-2));
  border-radius: 9px;
}


/* ── 02 · UTILITIES ──────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.004em;
  text-transform: uppercase;
}

.u-grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-45);
}

.kicker__rule {
  display: block;
  width: clamp(28px, 5vw, 62px);
  height: 1px;
  background: linear-gradient(90deg, var(--neon), transparent);
  flex: none;
}

/* JS-split characters */
.char {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

/* Gradient headlines: the ramp lives on each character, positioned by JS so
   it still reads as one continuous sweep across the line. */
.is-split-grad .char__in {
  background-image: var(--grad);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.char__in {
  display: inline-block;
  transform: translate3d(0, 106%, 0) rotate(4deg);
  transition:
    transform 1.05s var(--ease),
    opacity   0.7s  ease;
  opacity: 0;
  will-change: transform;
}
.is-revealed .char__in { transform: none; opacity: 1; }

/* Generic staggered reveal */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.is-revealed [data-reveal] { opacity: 1; transform: none; }


/* ── 03 · GRAIN / VIGNETTE ───────────────────────────────────────── */

.grain {
  position: fixed;
  inset: -160%;
  z-index: 900;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  animation: grain 0.72s steps(6) infinite;
  will-change: transform;
}

@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  16%  { transform: translate3d(-6%, -3%, 0); }
  33%  { transform: translate3d(4%, -7%, 0); }
  50%  { transform: translate3d(-4%, 5%, 0); }
  66%  { transform: translate3d(7%, 2%, 0); }
  83%  { transform: translate3d(-2%, 6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 895;
  pointer-events: none;
  background:
    radial-gradient(130% 88% at 50% 44%, transparent 42%, rgba(8,6,8,.62) 100%);
}


/* ── 04 · LOADER ─────────────────────────────────────────────────── */

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity .8s var(--ease), visibility .8s;
}

.loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 46% at 50% 52%, rgba(255,0,85,.13), transparent 70%);
  pointer-events: none;
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__inner {
  position: relative;
  z-index: 1;
  width: min(560px, 84vw);
  text-align: center;
}

.loader__mark {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 8.4vw, 5.1rem);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
.loader__mark-line { display: block; }
.loader__mark-line--alt {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.loader__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-45);
}

.loader__count {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  letter-spacing: 0.01em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.loader__count i {
  font-style: normal;
  font-size: 0.5em;
  color: var(--neon);
  margin-left: 0.12em;
}

.loader__bar {
  position: relative;
  height: 2px;
  background: rgba(243,238,231,.11);
  overflow: hidden;
}

/* Driven straight from the JS easing — no CSS transition, or the two
   smoothing passes stack and the bar lags behind the number. */
.loader__bar-fill {
  position: absolute;
  inset: 0 0 0 0;
  background: var(--grad);
  box-shadow: 0 0 18px var(--neon-soft);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.loader__fine {
  margin-top: 1.15rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--cream-25);
  text-transform: uppercase;
}


/* ── 05 · NAV + DRAWER ───────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 880;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--gut);

  /* The signature move: nav inverts against whatever scrubs beneath it */
  mix-blend-mode: difference;
  isolation: auto;

  transform: translate3d(0, 0, 0);
  transition: transform .55s var(--ease);
}

.nav.is-hidden { transform: translate3d(0, -110%, 0); }

.nav__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 1.35vw, 1.22rem);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.nav__dot {
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 12px var(--neon);
  animation: pulse 2.4s var(--ease-io) infinite;
  flex: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.6rem);
}

.nav__link {
  position: relative;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  padding-block: 0.5rem;
  overflow: hidden;
}

.nav__link span {
  display: inline-block;
  transition: transform .5s var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}

.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link:hover span   { transform: translateY(-2px); }

/* Burger — mobile only */
.nav__toggle {
  display: none;
  width: 34px;
  height: 34px;
  place-items: center;
  gap: 6px;
  flex-direction: column;
  justify-content: center;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform .45s var(--ease), opacity .3s;
}
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 870;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--gut);
  background: rgba(8, 6, 8, 0.86);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.drawer.is-open { opacity: 1; visibility: visible; }

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 11vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  border-bottom: 1px solid var(--ink-line);
  padding-block: 0.6rem;
}
.drawer__link i {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--neon);
}
.drawer__mail {
  margin-top: 1.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--cream-70);
  border-bottom: 1px solid var(--neon);
  align-self: flex-start;
  padding-bottom: 2px;
}


/* ── 06 · ACT SHELL (scrub stage + canvas) ───────────────────────── */

.act {
  position: relative;
  height: var(--rail, 300vh);
}

.act__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.act__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Present at rest, then blooms as the section scrubs */
  opacity: calc(0.68 + var(--p, 0) * 0.32);
  transition: opacity .3s linear;
}

.act__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(84% 66% at 50% 50%, rgba(8,6,8,.06) 0%, rgba(8,6,8,.72) 82%),
    linear-gradient(180deg, rgba(8,6,8,.88) 0%, transparent 30%, transparent 72%, rgba(8,6,8,.94) 100%);
}
.act__scrim--soft {
  background:
    radial-gradient(94% 70% at 50% 50%, rgba(8,6,8,.10) 0%, rgba(8,6,8,.80) 82%),
    linear-gradient(180deg, rgba(8,6,8,.94) 0%, transparent 22%, transparent 78%, rgba(8,6,8,.97) 100%);
}

.act__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Shared act-header — Act II + Act III read as siblings. Local scrim keeps
   the headline legible over any frame of footage. */
.pillars__head,
.work__head {
  position: relative;
  margin-bottom: clamp(1.8rem, 4.8vw, 4.2rem);
}

.pillars__head::before,
.work__head::before {
  content: '';
  position: absolute;
  inset: -3rem -4rem;
  z-index: -1;
  background: radial-gradient(58% 100% at 30% 50%, rgba(8,6,8,.62) 0%, rgba(8,6,8,.30) 55%, transparent 78%);
  pointer-events: none;
}

/* Short crimson rule under the heading — echoes .kicker__rule */
.pillars__head::after,
.work__head::after {
  content: '';
  display: block;
  width: clamp(44px, 6vw, 84px);
  height: 2px;
  margin-top: clamp(1.1rem, 2.4vw, 1.7rem);
  background: linear-gradient(90deg, var(--neon), transparent);
}

.pillars__heading,
.work__heading {
  font-size: var(--t-h2);
  margin-top: 1.1rem;
  text-shadow: 0 2px 28px rgba(8, 6, 8, 0.6);
}


/* ── 07 · ACT I — HERO ───────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 1rem) clamp(1.5rem, 5vh, 3rem);
}

.hero__kicker {
  --d: 120;
  position: relative;
  /* Paints above .hero__title — the two cross paths mid-travel */
  z-index: 2;
  margin-bottom: clamp(1.1rem, 2.6vh, 2rem);
}

/* Mel's "texture, not a headline" look is now the AT-REST state (--p 0,
   opacity .45); from there Billy's scroll travel takes over — the kicker
   glides down, parks just above TATTOO ARTIST and firms up to readable.
   It then HOLDS at .95 for the rest of the rail — deliberate, not an
   oversight: .hero__tag never fades (its scrub fade is out-specified by
   .is-revealed [data-reveal]), so the kicker stays with its partner —
   venue line above artist and city — rather than evaporating alone.
   The <p> stays a plain shell (it keeps its data-reveal entrance and
   settles at opacity 1) while the whole fade story lives on the mover —
   stacking the two would multiply and it could never read clearly. */
.hero__kicker-move {
  display: flex;
  align-items: center;
  gap: 0.9rem;

  /* Landing ramp — leaves at --p .04, fully parked by .34 */
  --kt: clamp(0, calc((var(--p, 0) - 0.04) / 0.3), 1);

  transform: translate3d(0, calc(var(--kicker-travel, 0px) * var(--kt)), 0);
  opacity: calc(0.45 + 0.5 * var(--kt));
  text-shadow: 0 1px 4px rgba(8, 6, 8, 0.9), 0 2px 28px rgba(8, 6, 8, 0.6);
  will-change: transform, opacity;
}
.hero__kicker .kicker__rule { opacity: 0.7; }

.hero__title {
  font-size: var(--t-hero);
  line-height: 0.8;
  margin-bottom: clamp(1.1rem, 3vh, 2.1rem);
  /* Hero drifts + fades as you scrub past it */
  transform: translate3d(0, calc(var(--p, 0) * -13vh), 0) scale(calc(1 - var(--p, 0) * 0.07));
  opacity: calc(1 - var(--p, 0) * 1.15);
  will-change: transform, opacity;
}

.hero__line { display: block; }

.hero__line--amp {
  padding-left: clamp(0.6rem, 9vw, 7.4rem);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Stagger the split characters */
.hero__line .char__in { transition-delay: calc(var(--i, 0) * 42ms + 260ms); }
.hero__line--amp .char__in { transition-delay: calc(var(--i, 0) * 42ms + 430ms); }

.hero__tag {
  --d: 620;
  font-size: clamp(0.72rem, 1.02vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-70);
  opacity: calc(1 - var(--p, 0) * 1.5);
}
.hero__sep { color: var(--neon); margin-inline: 0.35em; }

.hero__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(1.8rem, 5vh, 3.4rem);
  opacity: calc(1 - var(--p, 0) * 1.8);
}

.hero__cta {
  --d: 760;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.82rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
.hero__cta svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--neon); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease);
}
.hero__cta:hover {
  border-color: var(--neon-soft);
  background: rgba(255, 0, 85, 0.08);
  box-shadow: 0 0 34px -8px var(--neon-soft);
}
.hero__cta:hover svg { transform: translateX(4px); }


/* ── 08 · SCROLL CUE ─────────────────────────────────────────────── */

.cue {
  --d: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.cue__label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.36em;
  color: var(--cream-45);
  writing-mode: vertical-rl;
}

.cue__track {
  position: relative;
  display: block;
  width: 1px;
  height: clamp(48px, 8vh, 76px);
  background: linear-gradient(180deg, var(--cream-25), transparent);
  overflow: hidden;
}

.cue__dot {
  position: absolute;
  top: 0; left: 50%;
  width: 3px; height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 9px var(--neon);
  animation: cue 2.1s var(--ease-io) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-6px); opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(76px); opacity: 0; }
}


/* ── 08b · THE CHAIR — DOCUMENTARY STRIP ─────────────────────────── */

.chair {
  position: relative;
  z-index: 3;
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-block: clamp(3.4rem, 9vw, 7.5rem);
}

.chair__kicker { margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem); }

.chair__heading { font-size: var(--t-h2); }

.chair__sub {
  max-width: 60ch;
  font-size: clamp(0.92rem, 1.08vw, 1.05rem);
  line-height: 1.7;
  color: var(--cream-70);
  margin-top: clamp(1rem, 2.2vw, 1.6rem);
}

/* Thumbnail card — .gallery__tile idiom at feature scale */
.chair__video-link {
  position: relative;
  display: block;
  max-width: 880px;
  margin-top: clamp(2rem, 4.6vw, 3.6rem);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .45s var(--ease);
}
.chair__video-link:hover,
.chair__video-link:focus-visible { border-color: var(--neon-soft); }

.chair__thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.chair__video-link:hover .chair__thumbnail,
.chair__video-link:focus-visible .chair__thumbnail { transform: scale(1.02); }

.chair__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 7vw, 72px);
  height: clamp(56px, 7vw, 72px);
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 10px 34px rgba(255, 0, 85, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .45s var(--ease), box-shadow .5s var(--ease);
}
.chair__play::before {
  content: '';
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--cream);
  margin-left: 4px;
}
.chair__video-link:hover .chair__play,
.chair__video-link:focus-visible .chair__play {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 14px 44px rgba(255, 0, 85, 0.5);
}

/* "Watch the film" — .foot__link idiom */
.chair__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  padding-block: 0.4rem;
  font-size: 0.86rem;
  color: var(--cream-70);
  transition: color .4s var(--ease);
}
.chair__cta i {
  font-style: normal;
  font-size: 0.72em;
  color: var(--neon);
  transition: transform .4s var(--ease);
}
.chair__cta:hover,
.chair__cta:focus-visible { color: var(--cream); }
.chair__cta:hover i,
.chair__cta:focus-visible i { transform: translate(2px, -2px); }


/* ── 09 · STATS STRIP ────────────────────────────────────────────── */

.stats {
  position: relative;
  z-index: 3;
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-block: clamp(3.4rem, 9vw, 7.5rem);
}

.stats__kicker { margin-bottom: clamp(2rem, 4.6vw, 3.6rem); }

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border-block: 1px solid var(--ink-line);
}

.stat {
  position: relative;
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.8rem) clamp(1.1rem, 2vw, 2rem);
  overflow: hidden;
  transition: background .5s var(--ease);
}

.stat::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.stat:hover { background: var(--ink-2); }
.stat:hover::before { transform: scaleX(1); }

.stat__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2.9rem, 6.4vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.55rem;
}

.stat__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 0.5rem;
}

.stat__note {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cream-45);
  max-width: 26ch;
}


/* ── 10 · MARQUEE ────────────────────────────────────────────────── */

.marquee {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  padding-block: clamp(0.85rem, 1.7vw, 1.25rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee__set {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 2.1vw, 1.75rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream-25);
  white-space: nowrap;
}
.marquee__set b { color: var(--neon); font-weight: 400; }

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}


/* ── 11 · ACT II — PILLARS ───────────────────────────────────────── */

.pillars {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 2rem) 4rem;
}

/* .pillars__head / .pillars__heading — shared act-header recipe, see §06 */

.pillars__deck {
  position: relative;
  min-height: clamp(400px, 56vh, 520px);
}

/* Each pillar cross-fades in as the section scrubs */
.pillar {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: clamp(1.5rem, 3vw, 2.6rem);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 6px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}

.pillar.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pillar.is-past {
  opacity: 0;
  transform: translate3d(0, -34px, 0);
}

.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--grad-soft);
  opacity: 0.5;
  pointer-events: none;
}

.pillar > * { position: relative; }

.pillar__idx {
  font-size: clamp(3rem, 7vw, 5.4rem);
  line-height: 0.8;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 0.9rem;
}

.pillar__title {
  font-size: var(--t-h3);
  margin-bottom: 1.1rem;
}

.pillar__body {
  font-size: clamp(0.92rem, 1.05vw, 1.04rem);
  line-height: 1.72;
  color: var(--cream-70);
  max-width: 54ch;
}
.pillar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.5rem;
}
.pillar__tags li {
  padding: 0.36rem 0.78rem;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-70);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
}

.pillars__prog {
  grid-column: 1 / -1;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.pillars__prog-bar {
  display: block;
  height: 1px;
  background: var(--ink-line);
  overflow: hidden;
}
.pillars__prog-bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  box-shadow: 0 0 14px var(--neon-soft);
}


/* ── 11b · MENU STRIP ────────────────────────────────────────────── */

.menu {
  position: relative;
  z-index: 3;
  background: var(--ink);
  border-block: 1px solid var(--ink-line);
  padding-block: clamp(3rem, 7.5vw, 6rem);
}

.menu__kicker { margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem); }

/* Chips — .pillar__tags idiom, scaled up for a standalone strip */
.menu__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.menu__chips li {
  padding: 0.55rem 1.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-70);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.menu__chips li:hover {
  border-color: var(--neon-soft);
  color: var(--cream);
}

.menu__note {
  max-width: 60ch;
  font-size: clamp(0.92rem, 1.08vw, 1.05rem);
  line-height: 1.7;
  color: var(--cream-70);
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}


/* ── 12 · ACT III — WORK CARDS ───────────────────────────────────── */

/* The column can outgrow the pinned stage (phones today; desktop once the
   card photos go live): top-align it and slide it through on the scrub
   (--p). min() keeps it inert whenever the column fits inside 100svh. */
.act--work .act__content {
  align-self: start;
  transform: translateY(calc(min(0px, 100svh - 100%) * var(--p, 0)));
  will-change: transform;
}

.work {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 2rem) 4rem;
}

/* .work__head / .work__heading — shared act-header recipe, see §06 */

.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 1.6vw, 1.5rem);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 40vh, 400px);
  padding: clamp(1.25rem, 2.1vw, 1.9rem);
  overflow: hidden;

  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 6px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  /* Staggered entrance driven by scrub progress (see main.js) */
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity .7s var(--ease),
    transform .8s var(--ease),
    border-color .45s var(--ease),
    box-shadow .55s var(--ease);
  transition-delay: calc(var(--card-i, 0) * 110ms);
}

.card.is-in { opacity: 1; transform: none; }

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.card:hover {
  border-color: var(--neon-soft);
  box-shadow: 0 24px 60px -30px var(--neon-soft), inset 0 0 0 1px rgba(255,0,85,.1);
}
.card:hover::before { opacity: 1; }

.card > * { position: relative; }

/* Photo slots — dormant until the commented card markup goes live.
   Height capped so three image cards stay as close to the pinned
   stage budget as the copy allows (see pass-2 fit math). */
.card__media {
  margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
  aspect-ratio: 21 / 9;
  max-height: 150px;
  border: 1px solid var(--glass-brd);
  border-radius: 4px;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: auto;
  border-bottom: 1px solid var(--ink-line);
}

.card__idx {
  font-family: var(--f-display);
  font-size: 1.05rem;
  color: var(--neon);
  letter-spacing: 0.06em;
}

.card__meta {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--cream-45);
  text-align: right;
}

.card__title {
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  /* Two .display line-boxes (2 × 0.86lh) — one-line titles keep the
     three cards' meta/body baselines on the same rhythm */
  min-height: 1.72em;
  margin-block: clamp(1.4rem, 3vw, 2.2rem) 0.9rem;
  transition: transform .55s var(--ease);
}
.card:hover .card__title { transform: translateY(-3px); }

.card__body {
  font-size: 0.86rem;
  line-height: 1.66;
  color: var(--cream-45);
  transition: color .5s var(--ease);
}
.card:hover .card__body { color: var(--cream-70); }

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1.3rem, 2.4vw, 1.9rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink-line);
}

.card__spec {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-45);
}

.card__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--glass-brd);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  transition: border-color .45s var(--ease), background .45s var(--ease);
}
.card__arrow svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--ease), stroke .45s var(--ease);
}
.card:hover .card__arrow {
  border-color: var(--neon);
  background: var(--neon);
}
.card:hover .card__arrow svg {
  stroke: var(--ink);
  transform: translateX(2px);
}


/* ── 12b · GALLERY + LIGHTBOX ────────────────────────────────────── */

.gallery {
  position: relative;
  z-index: 3;
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-block: clamp(3.4rem, 9vw, 7.5rem);
}

.gallery__kicker { margin-bottom: clamp(2rem, 4.6vw, 3.6rem); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 30vw, 220px), 1fr));
  gap: clamp(8px, 1.4vw, 14px);
}

/* Collapsed teaser — first row keeps its height, every later row crushes
   to 0 (row-gap too, or the empty gaps still stack up). Lazy imgs in
   0-height rows have no box, so their fetches hold. */
.gallery.is-collapsed .gallery__grid {
  grid-template-rows: 1fr;
  grid-auto-rows: 0;
  row-gap: 0;
  overflow: hidden;
}
/* Aspect-ratio tiles keep their transferred height inside a 0 track
   (boxes lazy-load can still see, merely clipped) — height:100% hands
   the box to the grid area instead: row 1 content-sized, rows 2+ = 0 */
.gallery.is-collapsed .gallery__tile {
  height: 100%;
  min-height: 0;
}
.gallery.is-collapsed .gallery__foot { display: none; }
.gallery:not(.is-collapsed) .gallery__more { display: none; }

/* Expand entrance — one cheap fade/rise on the whole grid (new rows can't
   be targeted alone without per-breakpoint nth assumptions); the global
   reduced-motion animation kill covers it. Collapse snaps by design. */
.gallery:not(.is-collapsed) .gallery__grid {
  animation: gallery-expand .5s var(--ease);
}
@keyframes gallery-expand {
  from { opacity: 0.4; transform: translateY(12px); }
  to   { opacity: 1;   transform: none; }
}

.gallery__tile {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--glass-brd);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .45s var(--ease);
}
.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.gallery__tile:hover,
.gallery__tile:focus-visible { border-color: var(--neon-soft); }
.gallery__tile:hover img,
.gallery__tile:focus-visible img { transform: scale(1.02); }

/* Primary affordance while collapsed */
.gallery__more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  min-height: 44px;
  margin: 1.6rem auto 0;
  padding: 0.78rem 1.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-70);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.gallery__more b { font-weight: 800; color: var(--neon); }
.gallery__more i,
.gallery__less i {
  font-style: normal;
  font-size: 0.85em;
  color: var(--cream-45);
  transition: transform .45s var(--ease), color .45s var(--ease);
}
.gallery__more:hover { border-color: var(--neon-soft); color: var(--cream); }
.gallery__more:hover i { transform: translateY(2px); color: var(--neon); }

/* Expanded-state footer — SHOW LESS + BACK TO TOP side by side */
.gallery__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.gallery__less {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-70);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.gallery__less:hover { border-color: var(--neon-soft); color: var(--cream); }
.gallery__less:hover i { transform: translateY(-2px); color: var(--neon); }

.gallery__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.62rem 1.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-70);
  border: 1px solid var(--glass-brd);
  border-radius: 999px;
  transition: border-color .45s var(--ease), color .45s var(--ease);
}
.gallery__top:hover { border-color: var(--neon-soft); color: var(--neon); }

/* Lightbox — tap a tile to enlarge, click anywhere out to return */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(8, 6, 8, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* Backdrop hit target — main.js's click-out-to-close listener lives on
   this div. Tint stays on the .lightbox root; the scrim is a transparent
   full-coverage catcher layered under the frame and the ✕ (explicit
   z-order inside .lightbox's own stacking context, so DOM insertion
   order can't flip it). */
.lightbox__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  cursor: zoom-out;
}

.lightbox__frame {
  position: relative;
  z-index: 1;
}

.lightbox__img {
  max-width: min(92vw, 1600px);
  max-height: 84svh;
  object-fit: contain;
  border: 1px solid var(--glass-brd);
  border-radius: 4px;
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.85);
  transform: scale(0.98);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox--loading .lightbox__img { opacity: 0.7; filter: blur(6px); }

.lightbox__close {
  position: absolute;
  top: calc(0.9rem + env(safe-area-inset-top));
  right: calc(0.9rem + env(safe-area-inset-right));
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--cream);
  border-radius: 50%;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover { color: var(--neon); transform: scale(1.08); }


/* ── 13 · ACT IV — FINALE + BUTTONS ──────────────────────────────── */

.finale {
  position: relative;
  z-index: 3;
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-block: clamp(5rem, 15vw, 12rem);
  overflow: hidden;
}

.finale__glow {
  position: absolute;
  left: 50%;
  bottom: -46%;
  width: min(1180px, 128vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,0,85,.20) 0%, rgba(0,240,255,.07) 38%, transparent 66%);
  pointer-events: none;
  animation: breathe 9s var(--ease-io) infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .74; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.09); }
}

.finale__inner { position: relative; z-index: 1; }
.finale__kicker { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.finale__title {
  font-size: clamp(3rem, 12.4vw, 11.5rem);
  line-height: 0.82;
  margin-bottom: clamp(1.5rem, 3.4vw, 2.6rem);
}
.finale__word { display: block; }
.finale__word--grad {
  padding-left: clamp(0.4rem, 6vw, 5rem);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.finale__word .char__in { transition-delay: calc(var(--i, 0) * 34ms); }
.finale__word--grad .char__in { transition-delay: calc(var(--i, 0) * 34ms + 180ms); }

.finale__lede {
  max-width: 56ch;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  line-height: 1.72;
  color: var(--cream-70);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.finale__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2rem;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
  overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .5s var(--ease), color .4s var(--ease);
}
.btn span, .btn svg { position: relative; z-index: 1; }
.btn svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }

.btn--solid {
  background: var(--neon);
  color: var(--ink);
  box-shadow: 0 14px 44px -16px var(--neon);
}
.btn--solid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.btn--solid:hover {
  box-shadow: 0 20px 58px -14px var(--neon);
}
.btn--solid:hover::after { opacity: 1; }

.btn--ghost {
  color: var(--cream);
  border: 1px solid var(--glass-brd);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn--ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn--ghost:hover { color: var(--ink); }
.btn--ghost:hover::after { transform: translateY(0); }

.finale__facts {
  display: grid;
  /* Auto-fit rather than a fixed count, so the row holds three cells on
     desktop and reflows if the fact list ever changes again */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  background: var(--ink-line);
  border-block: 1px solid var(--ink-line);
  max-width: 900px;
}
.finale__facts > div {
  background: var(--ink);
  padding: clamp(1.1rem, 2vw, 1.6rem);
}
.finale__facts dt {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 0.5rem;
}
.finale__facts dd {
  font-size: 0.86rem;
  color: var(--cream-70);
  line-height: 1.5;
}

/* Quiet contact link. It sits inside body copy rather than a link list,
   so it carries a resting underline for affordance, then borrows
   .foot__link's crimson hover. Booking still goes out to Club Tattoo,
   so this stays a contact line and never reads as a CTA. */
.finale__mail {
  color: var(--cream);
  border-bottom: 1px solid var(--cream-25);
  padding-bottom: 1px;
  overflow-wrap: anywhere;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.finale__mail:hover,
.finale__mail:focus-visible { border-bottom-color: var(--neon); }


/* ── 13b · BOOK PILL (floating coarse CTA) ───────────────────────── */

/* Fixed booking shortcut, direct child of <body> — keeps booking one
   thumb away at every scroll depth on phones. Fully styled here but OFF
   by default; the coarse-pointer block switches it on. Solid ink-on-neon
   (.btn--solid family) with no blur, blend or scroll-time animation so
   phones stay composite-flat; the :active press is the only motion and
   only runs on tap. */
.book-pill {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  /* Above all in-flow content (sections top out at z 3); under the
     drawer (870), nav (880), loader (1000) and lightbox (1200). */
  z-index: 860;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--neon);
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px var(--neon-soft), 0 3px 12px rgba(8, 6, 8, 0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease);
}
.book-pill:active { transform: scale(0.96); }


/* ── 14 · FOOTER ─────────────────────────────────────────────────── */

.foot {
  position: relative;
  z-index: 3;
  background: var(--ink-2);
  border-top: 1px solid var(--ink-line);
  padding-top: clamp(3rem, 7vw, 5.5rem);
}

.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.7fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.foot__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: 0.03em;
  margin-bottom: 1.1rem;
}

.foot__addr {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--cream-45);
  max-width: 40ch;
}

.foot__col { display: flex; flex-direction: column; align-items: flex-start; }

.foot__ttl {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-45);
  margin-bottom: 1.1rem;
}

.foot__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.4rem;
  font-size: 0.86rem;
  color: var(--cream-70);
  transition: color .4s var(--ease);
}
.foot__link i {
  font-style: normal;
  font-size: 0.72em;
  color: var(--neon);
  transition: transform .4s var(--ease);
}
.foot__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: var(--neon);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.foot__link:hover { color: var(--cream); }
.foot__link:hover i { transform: translate(2px, -2px); }
.foot__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Footer-scale booking CTA — .btn--solid, sized for a column */
.foot__book {
  align-self: flex-start;
  margin-top: 1.2rem;
  padding: 0.72rem 1.35rem;
  font-size: 0.64rem;
}

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--ink-line);
  font-size: 0.7rem;
  color: var(--cream-25);
}
.foot__fine { letter-spacing: 0.04em; }


/* ── 15 · RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pillars { grid-template-columns: 1fr; align-content: center; gap: 2rem; }
  .pillars__deck { min-height: clamp(430px, 58vh, 540px); }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root {
    --t-hero: clamp(3.6rem, 20vw, 8rem);
    --nav-h: 62px;
  }

  /* Nav collapses to burger */
  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  .act { height: var(--rail-m, 240vh); }
  .act--hero    { --rail-m: 200vh; }
  .act--pillars { --rail-m: 450vh; }
  .act--work    { --rail-m: 300vh; }

  .act__stage { min-height: 520px; }

  /* Pillars content centers taller-than-stage on small phones, tucking the
     kicker under the fixed nav — extra top padding re-centers it clear.
     Row-gap 0: the shared head margin + prog margin carry the rhythm, so
     head→deck spacing matches Act III and the taller head still fits. */
  .pillars {
    padding-top: calc(var(--nav-h) + 3.5rem);
    row-gap: 0;
  }

  .hero__foot { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .cue { flex-direction: row; align-self: flex-start; }
  .cue__label { writing-mode: horizontal-tb; }
  .cue__track {
    width: clamp(60px, 22vw, 110px);
    height: 1px;
    background: linear-gradient(90deg, var(--cream-25), transparent);
  }
  .cue__dot { animation-name: cue-h; }

  @keyframes cue-h {
    0%   { transform: translate(-6px, 0); opacity: 0; }
    22%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { transform: translate(108px, 0); opacity: 0; }
  }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat__note { display: none; }

  .work__grid { grid-template-columns: 1fr; gap: 0.8rem; }
  .card { min-height: 0; }
  .card__title { margin-block: 1.5rem 0.8rem; }

  .finale__facts { grid-template-columns: 1fr; }

  .foot__inner { grid-template-columns: 1fr; }

  .grain { opacity: 0.24; }
}

@media (max-width: 560px) {
  .stats__grid { grid-template-columns: 1fr; }
  .pillar { padding: 1.35rem 1.15rem; }
  .pillar__body { font-size: 0.9rem; }
  .finale__actions .btn { width: 100%; justify-content: center; }
  .foot__bar { flex-direction: column; align-items: flex-start; }
}

/* Coarse pointers get no hover-lift jitter */
@media (hover: none) {
  .card:hover { transform: none; }
  .btn:hover  { transform: none; }
}

/* iOS Safari does expensive per-scroll-frame compositing work for fixed
   blended overlays, frosted glass (backdrop-filter) and blend modes — the
   likely cause of the laggy, "sticky" scrolling on iPhone. Strip all of it on
   touch devices; these are subtle desktop-luxury effects, near-invisible on a
   phone, and not worth the scroll jank. */
@media (pointer: coarse) {
  .grain, .vignette { display: none; }

  /* One token feeds every backdrop-filter; none = frost off everywhere. */
  :root { --glass-blur: none; }

  /* The fixed nav blends against the whole moving page every frame (the
     heaviest offender). Swap the blend for a dark scrim so the white nav
     text stays readable. */
  .nav {
    mix-blend-mode: normal;
    background: linear-gradient(180deg,
                rgba(8, 6, 8, 0.82) 0%,
                rgba(8, 6, 8, 0.5) 62%,
                rgba(8, 6, 8, 0) 100%);
  }

  /* ── Flatten the scrub on phones ──────────────────────────────────
     The scroll-scrub is disabled in JS on coarse pointers (Scrub.update
     pins --p at 0, so each canvas paints frame 1 once and holds it). Un-pin
     the stages so sections scroll natively, stack what used to cross-fade,
     and neutralize the leftover --p transforms. Mirrors the reduced-motion
     and print fallbacks; the canvas stays visible as a held still (with
     .act--stage now static, the absolute canvas resolves against .act,
     which wraps the stage tightly, so it still fills). */
  .act { height: auto; }
  .act__stage { position: static; }

  /* Hero keeps a viewport-tall stage — its content already fills 100svh,
     and the held first frame reads as the backdrop. */
  .act--hero .act__stage { height: 100svh; min-height: 520px; }

  /* Specialties + portfolio grow to fit their stacked content (taller than
     one viewport on a phone) so nothing clips. */
  .act--pillars .act__stage,
  .act--work .act__stage { height: auto; }

  /* Their held frames must NOT stretch over the whole tall act (cover-fit
     across ~2500px reduces the image to an invisible sliver). Banner-crop
     each to one viewport at the section top; the mask melts the bottom edge
     into the section's ink so there is no hard cut. Static mask on a static
     element: rasterized once, nothing recomputes during native scroll. The
     ResizeObserver in main.js re-syncs the backing store to the new box. */
  .act--pillars .act__canvas,
  .act--work .act__canvas {
    height: 100svh;
    opacity: 0.82;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }

  /* The full-act scrim's top fade would land exactly on that banner and bury
     it (its gradients are sized for the whole tall act). Pair the scrim to
     the banner and open its middle so the footage reads; below the banner the
     plain ink background carries the section, and the act headers keep their
     own local legibility scrim. */
  .act--pillars .act__scrim,
  .act--work .act__scrim {
    height: 100svh;
    background: linear-gradient(180deg,
                rgba(8,6,8,.78) 0%,
                rgba(8,6,8,.16) 26%,
                rgba(8,6,8,.30) 64%,
                rgba(8,6,8,.94) 100%);
  }

  /* Specialties: the 4 pillars cross-fade via --p; pinned at 0 only #1
     would show, so un-stack them into normal flow (mirror reduced-motion). */
  .pillars__deck { position: relative; min-height: 0; display: grid; gap: 1rem; }
  .pillar { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }

  /* Portfolio: reveal all three cards and drop the --p-driven slide. */
  .card { opacity: 1; transform: none; }
  .act--work .act__content { transform: none !important; }

  /* Hero content sits static; the kicker no longer travels (accepted
     tradeoff) and reads at full strength. */
  .hero__title,
  .hero__kicker-move { transform: none !important; opacity: 1; }

  /* ── Booking pill (styled in §13b) ────────────────────────────────
     On for touch. Off again the moment a full-screen overlay owns the
     viewport — the drawer and the JS-built lightbox both hang .is-open
     off direct children of <body>. Where :has() isn't supported the
     pill simply stays put, safely UNDER both overlays (z 860 vs 870 /
     1200), so it can never block their controls. */
  .book-pill { display: inline-flex; }

  body:has(.drawer.is-open) .book-pill,
  body:has(.lightbox.is-open) .book-pill { display: none; }

  /* ── Tap targets — 44px floor for every interactive control ─────── */
  .nav__logo { padding-block: 0.85rem; }
  .nav__link { padding-block: 0.85rem; }   /* coarse tablets >900px */
  .nav__toggle { width: 44px; height: 44px; }

  /* Underlined one-liner keeps its tight rule; an invisible overlay
     grows the hit box instead of padding (which would push the neon
     underline off the text). */
  .drawer__mail { position: relative; }
  .drawer__mail::after {
    content: '';
    position: absolute;
    inset: -0.75rem;
  }

  /* Floor for the small variants — .foot__book (~40px) and the two
     gallery footer buttons (~36px); the finale pair already clear it. */
  .hero__cta,
  .btn,
  .gallery__less,
  .gallery__top { min-height: 44px; }

  .foot__link { padding-block: 0.7rem; }

  /* Underlined inline link — same invisible-overlay trick: padding on
     an inline box would drag the resting border-bottom off the text. */
  .finale__mail { position: relative; }
  .finale__mail::after {
    content: '';
    position: absolute;
    inset: -0.9rem -0.35rem;
  }

  /* ── Stacked-flow rhythm ──────────────────────────────────────────
     Acts II + III read as siblings; un-pinned they should clear the
     fixed nav by the same amount (the ≤900px +3.5rem padding is a
     pinned-stage re-centering fix and reads uneven in plain flow). */
  .pillars,
  .work { padding-block: calc(var(--nav-h) + 3rem) 4rem; }
}

/* Compact phones (iPhone SE class) — scoped coarse-only so a narrow
   desktop window never shifts. */
@media (pointer: coarse) and (max-width: 360px) {
  /* Card edges breathe at 320px — sides match the 1.25rem gutter. */
  .pillar { padding: 1.35rem 1.25rem; }
}


/* ── 15b · BLOG PAGES (.page-blog) ───────────────────────────────── */

/* The /blog/ tree reuses homepage furniture (.menu, .card, .work__heading,
   .foot) plus its own hooks. Every rule here is scoped to .page-blog or a
   blog-only class so homepage rendering cannot change. These pages ship
   zero JS — nothing below may depend on it. Sits after §15 on purpose:
   .blog-list__grid must out-cascade the ≤900px .work__grid override. */

/* First section clears the fixed nav (homepage acts handle this per-act). */
.page-blog .blog-head,
.page-blog .post { padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 4rem)); }

/* One rhythm band between standfirst and cards, one hairline total —
   adjacent .menu borders would stack a 2px seam. */
.page-blog .blog-head { border-bottom: 0; }
.page-blog .blog-list { padding-top: 0; border-top: 0; }

.blog-head__standfirst {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--cream);
}

/* Card grid — column count from available space: 1 on phones, 2 on
   tablets, 3 from ~1050px up. */
.blog-list__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Article headline steps down from the landing scale — long SEO titles
   set calmer, editorial. */
.post .work__heading { font-size: clamp(2.6rem, 6.4vw, 6rem); }

/* Crimson rule under the head — §06 act-header recipe. */
.post__head::after,
.blog-head .work__heading::after {
  content: '';
  display: block;
  width: clamp(44px, 6vw, 84px);
  height: 2px;
  margin-top: clamp(1.1rem, 2.4vw, 1.7rem);
  background: linear-gradient(90deg, var(--neon), transparent);
}

.post__media {
  max-width: min(100%, 860px);
  aspect-ratio: 3 / 2;
  margin-block: clamp(1.7rem, 4vw, 2.8rem);
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  border-radius: 6px;
}
.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Long-form prose — magazine measure and rhythm. Bodies can appear
   twice per page (the booking post breaks for a mid-article CTA), so
   leading h2s and trailing grafs trim their own margins. */
.post__body {
  max-width: 65ch;
  font-size: clamp(1.02rem, 1.18vw, 1.16rem);
  line-height: 1.75;
}

.post__body p {
  color: var(--cream-70);
  margin-bottom: 1.35em;
}
.post__body > :last-child { margin-bottom: 0; }

/* Opening graf — the one right under the header image — reads as a lede. */
.post__media + .post__body > p:first-child {
  font-size: 1.12em;
  line-height: 1.68;
  color: var(--cream);
}

.post__body h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 2.1em 0 0.8em;
}
.post__body > h2:first-child { margin-top: 0; }

/* Echo of .kicker__rule above each section head. */
.post__body h2::before {
  content: '';
  display: block;
  width: clamp(26px, 3vw, 38px);
  height: 2px;
  margin-bottom: 0.62em;
  background: linear-gradient(90deg, var(--neon), transparent);
}

/* In-prose links — none in today's copy; recipe is .finale__mail's, so
   the first link the Copywriter adds is visible, not camouflaged by the
   global color-inherit reset. */
.post__body a {
  color: var(--cream);
  border-bottom: 1px solid var(--cream-25);
  transition: border-color .4s var(--ease);
}
.post__body a:hover,
.post__body a:focus-visible { border-bottom-color: var(--neon); }

/* Booking block — .pillar card recipe wrapped around the existing
   .btn--solid. Blur rides the --glass-blur token, so coarse pointers
   stay composite-flat for free. */
.post__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: min(100%, 640px);
  margin-block: clamp(2.4rem, 5vw, 3.6rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: 6px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.post__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--grad-soft);
  opacity: 0.5;
  pointer-events: none;
}
.post__cta > * { position: relative; }
.post__cta .menu__note { margin-top: 0; }

.post__back {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin-top: clamp(2.6rem, 6vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink-line);
}

/* ── Blog nav under 900px ─────────────────────────────────────────
   No drawer JS ships here, so the links stay inline, compacted to fit.
   The burger never renders (defensive — blog markup has no toggle
   today, and a dead one must never appear). */
@media (max-width: 900px) {
  .page-blog .nav__toggle { display: none; }
  .page-blog .nav__links {
    display: flex;
    gap: clamp(0.7rem, 2.4vw, 1.6rem);
  }
  .page-blog .nav__link {
    font-size: 0.62rem;
    letter-spacing: 0.13em;
  }
}

/* Compact phones: keep Blog + Booking inline (Home stays reachable via
   the logo); Specialties and Portfolio — homepage anchors — hide as
   children 1 and 2 of .nav__links. CODE: keep that link order. */
@media (max-width: 560px) {
  .page-blog .nav__link:nth-child(-n+2) { display: none; }

  /* CTA card: .pillar's ≤560 padding, and the nbsp-joined button label
     (min-content ~267px) goes full-width/centered like the finale's
     buttons, sized so it fits the card's content box at 320px. */
  .page-blog .post__cta { padding: 1.35rem 1.15rem; }
  .page-blog .post__cta .btn {
    width: 100%;
    justify-content: center;
    padding-inline: 1.2rem;
    font-size: 0.66rem;
  }
}

/* Compacted links keep the 44px coarse floor (the homepage 0.85rem
   padding was sized for its larger 0.71rem links). */
@media (pointer: coarse) {
  .page-blog .nav__link { padding-block: 0.95rem; }
}


/* ── 16 · REDUCED MOTION / PRINT ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .grain { animation: none; opacity: 0.18; }
  .marquee__track { animation: none; }
  .cue__dot { animation: none; opacity: 1; }
  .nav__dot { animation: none; }
  .finale__glow { animation: none; }

  .char__in { transform: none; opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; }

  .hero__title { transform: none; opacity: 1; }
  .hero__kicker-move { transform: none; opacity: 1; }
  .act__canvas { opacity: 0.5; }
  .pillar { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; }
  .pillars__deck { min-height: 0; display: grid; gap: 1rem; }
  .card { opacity: 1; transform: none; }

  .gallery__tile:hover img,
  .gallery__tile:focus-visible img { transform: none; }
  .lightbox__img,
  .lightbox.is-open .lightbox__img { transform: none; }
}

@media print {
  .grain, .vignette, .loader, .act__canvas, .marquee, .nav, .book-pill { display: none !important; }
  body { background: #fff; color: #000; }
  .act { height: auto; }
  .act__stage { position: static; height: auto; }
  /* Paper width matches the 900px query and inline --p persists — pin off */
  .act__content { transform: none !important; }
  .pillar { position: relative; inset: auto; opacity: 1; transform: none; }
}