/* ═══════════════════════════════════════════════════════════════════════════
   Phil Good Esthestics — Musical Notes
   ---------------------------------------------------------------------------
   The brief, from Phil, verbatim: "a vibe that is like if you were going into
   a store to buy some high-end stereo equipment. Warm, clean lines." He
   rejected "woodsy" when it was offered.

   So this is a listening room: a dark ground, warm pooled light, machined
   faceplates, one amber signal. The brand ink/cream/rose already WAS that
   palette — nothing here replaces a brand value, it only extends it into a
   ladder. --t2 and --t6 are the live brand ink and cream, byte-identical.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── FACES — preserved verbatim. woff2 already self-hosted in /assets. ──── */
  --display-face:"Julius Sans One","Optima","Gill Sans",sans-serif;
  --sans:"Archivo","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --black:"Archivo Black","Archivo",sans-serif;   /* numerals + meter scale ONLY, never prose */
  --script:"Italianno","Snell Roundhand","Apple Chancery",cursive; /* the wordmark ONLY */

  /* ── THE LADDER — 7 warm steps, read as a machined faceplate stack.
        Deliberately gappy through the middle: mid-greys on a dark listening
        room are mud. Three grounds, one edge, two lights. ────────────────── */
  --t0:#1A1917;   /* the room — hero, the blindfold beat                      */
  --t1:#232220;   /* chassis — header, footer                                 */
  --t2:#2E2E2E;   /* BRAND INK (verbatim) — default panel                     */
  --t3:#3B3A37;   /* raised panel                                             */
  --t4:#5C5951;   /* brushed edge — hairlines, unlit meter segments           */
  --t5:#C9C3B7;   /* engraved label                                           */
  --t6:#EEE9DF;   /* BRAND CREAM (verbatim)                                   */

  /* ── ACCENT — one, scarce. It is the SIGNAL. Under 5% coverage: lit meter
        segments, the single CTA, the active nav mark, form errors. ───────── */
  --rose:#E0A899;       /* verbatim. 6.6:1 on --t2 — AA body on every dark step */
  --rose-ink:#8F4A3A;   /* 5.4:1 on --t6. Bright rose on cream is 3.9:1 and
                           FAILS AA body — never use --rose on a cream ground.  */
  --glow:0 0 12px rgba(224,168,153,.42);

  /* ── TYPE ON DARK — the live alpha ladder, verbatim ───────────────────── */
  --c-display:rgba(238,233,223,1);
  --c-rail:rgba(238,233,223,.72);
  --c-body:rgba(238,233,223,.62);
  --c-quiet:rgba(238,233,223,.62);
  --c-hair:rgba(238,233,223,.26);
  /* ── TYPE ON CREAM — the mirror, for the one light section ────────────── */
  --i-display:rgba(46,46,46,1);
  --i-rail:rgba(46,46,46,.76);
  --i-body:rgba(46,46,46,.68);
  --i-hair:rgba(46,46,46,.22);

  /* ── MOTION — two named tokens, BOTH lifted from the live page. The curve
        already shipping IS a brand element; importing another site's would
        have discarded it. Never a bare `ease`. ──────────────────────────── */
  --e-settle:cubic-bezier(.22,.61,.36,1);   /* arrivals   */
  --e-sweep:cubic-bezier(.6,0,.2,1);        /* traverses  */

  /* ── TYPE SCALE. The poster's --d unit is HEIGHT-fitted to one screen and
        is wrong for a scrolling page — it stays scoped to .lockup. ──────── */
  --t-micro:11px;
  --t-spec:clamp(10px,.26vw + 8.8px,12px);
  --t-rail:clamp(10px,.28vw + 8.6px,13px);
  --t-body:clamp(16px,.35vw + 14.6px,19px);   /* 16px floor = the iOS zoom floor */
  --t-lede:clamp(20px,1.10vw + 16px,28px);
  --t-h3:clamp(24px,1.60vw + 18px,38px);
  --t-h2:clamp(34px,3.40vw + 20px,68px);
  --t-h1:clamp(52px,9.6vw + 8px,168px);

  --gutter:clamp(20px,4.4vw,64px);
  --hdr:64px;
  --measure:62ch;
}

/* ── COLORWAYS — the reference's black/gray/green system, retuned ───────── */
[data-colorway="deep"] {--bg:var(--t0);--fg:var(--c-body);--hd:var(--c-display);--rl:var(--c-rail);--hair:var(--c-hair);--ac:var(--rose)}
[data-colorway="ink"]  {--bg:var(--t2);--fg:var(--c-body);--hd:var(--c-display);--rl:var(--c-rail);--hair:var(--c-hair);--ac:var(--rose)}
[data-colorway="panel"]{--bg:var(--t3);--fg:var(--c-body);--hd:var(--c-display);--rl:var(--c-rail);--hair:var(--c-hair);--ac:var(--rose)}
[data-colorway="cream"]{--bg:var(--t6);--fg:var(--i-body);--hd:var(--i-display);--rl:var(--i-rail);--hair:var(--i-hair);--ac:var(--rose-ink)}

/* ═══ RESET ═══ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--t0);color:var(--c-body);
  font-family:var(--sans);font-size:var(--t-body);font-weight:350;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Lenis — required, verbatim from the proven pw-hydration build */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ═══ TRACKING — brand, not taste. Verbatim from the live page. ═══ */
.rail{
  font-family:var(--display-face);font-size:var(--t-rail);
  letter-spacing:.2087em;text-indent:.2087em;text-transform:uppercase;
  color:var(--rl);margin:0;
}
.display{font-family:var(--display-face);letter-spacing:.0882em;text-indent:.0882em}

/* ═══ LAYOUT ═══ */
section{background:var(--bg);color:var(--fg);position:relative}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(56px,8vw,128px)}
.band-tight{padding-block:clamp(48px,7vw,96px)}
h1,h2,h3{color:var(--hd);font-weight:400;margin:0}
h2{font-family:var(--display-face);font-size:var(--t-h2);line-height:1.02;letter-spacing:.02em}
h3{font-family:var(--display-face);font-size:var(--t-h3);line-height:1.12;letter-spacing:.03em}
p{margin:0}
.lede{font-size:var(--t-lede);line-height:1.45;color:var(--fg);max-width:22ch}
.body{max-width:var(--measure)}
.hair{height:1px;background:var(--hair);border:0;margin:0}

/* ═══ HEADER — seamless. Same ground as the room beneath, no hairline,
      no backdrop-filter. A visible seam reads old-school. ═══ */
.hdr{
  position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:60;
  display:flex;align-items:center;gap:24px;
  padding-inline:var(--gutter);
  background:transparent;
}
.hdr-mark{font-family:var(--display-face);font-size:var(--t-rail);letter-spacing:.2087em;text-transform:uppercase;color:var(--c-display);text-decoration:none;white-space:nowrap}
.hdr-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.hdr-nav a{
  font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-rail);text-decoration:none;
  transition:color .3s var(--e-settle);
}
.hdr-nav a:hover{color:var(--c-display)}
.hdr-cta{
  font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.18em;
  text-transform:uppercase;color:var(--rose);text-decoration:none;
  padding:9px 16px;border:1px solid rgba(224,168,153,.34);
  transition:background-color .35s var(--e-settle),border-color .35s var(--e-settle);
}
.hdr-cta:hover{background:rgba(224,168,153,.1);border-color:var(--rose)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:1px;background:var(--c-display);margin:5px 0;transition:transform .4s var(--e-settle),opacity .3s}

/* ═══ SOUND TOGGLE — honest, labelled, default OFF ═══
   The previous build's audio died because the unlock was coupled to the page
   entrance, and a one-screen splash offers no gesture. This never gates the
   entrance; it only ever arms on a gesture the visitor was already making. */
.sound{
  display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  cursor:pointer;padding:8px 0;
  font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-rail);
  transition:color .3s var(--e-settle);
}
.sound:hover{color:var(--c-display)}
.sound-bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.sound-bars i{width:2px;height:3px;background:currentColor;transition:height .3s var(--e-settle)}
.sound[aria-pressed="true"]{color:var(--rose)}
.sound[aria-pressed="true"] .sound-bars i:nth-child(1){height:6px}
.sound[aria-pressed="true"] .sound-bars i:nth-child(2){height:11px}
.sound[aria-pressed="true"] .sound-bars i:nth-child(3){height:8px}

/* ═══ HERO ═══ */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(40px,7vh,86px);padding-top:calc(var(--hdr) + 28px);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
/* the warm pooled light — the single most load-bearing gradient on the site */
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 62% 34%, rgba(224,168,153,.13) 0%, rgba(224,168,153,0) 58%),
    linear-gradient(180deg, rgba(26,25,23,.62) 0%, rgba(26,25,23,.42) 38%, rgba(26,25,23,.95) 100%);
}
.hero-in{position:relative;z-index:1;width:100%}
.hero h1{
  font-family:var(--script);font-size:var(--t-h1);line-height:.84;
  color:var(--c-display);margin:.06em 0 0;font-weight:400;
}
.hero .lede{margin-top:clamp(18px,2.4vw,30px);max-width:26ch}

/* the spec line — audio-spec-sheet register applied to an experience.
   Answers duration, format and party size in one glance. */
.spec{
  display:flex;flex-wrap:wrap;align-items:center;gap:0;
  margin-top:clamp(26px,3.4vw,44px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.spec span{
  font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.2087em;
  text-transform:uppercase;color:var(--c-rail);
  padding:14px clamp(14px,2vw,28px) 14px 0;
  position:relative;
}
.spec span + span{padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--hair)}

/* ═══ THE SIGNATURE — four channel strips, one per note.
      Each meter fills with warm signal as you scroll. Scroll-BOUND via
      track(), not a transition: a transition fires once and decorates;
      a scroll-bound property IS movement. ═══ */
.channels{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.2vw,36px);margin-top:clamp(40px,5vw,72px);
}
.ch{display:flex;flex-direction:column;gap:16px;min-width:0}
.ch-no{font-family:var(--black);font-size:var(--t-spec);letter-spacing:.16em;color:var(--t4)}
.ch-meter{
  display:flex;flex-direction:column-reverse;gap:3px;
  height:clamp(120px,20vh,210px);padding:10px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.ch-seg{flex:1;background:var(--t4);opacity:.42;transition:background-color .18s linear,opacity .18s linear,box-shadow .18s linear}
.ch-seg.lit{background:var(--rose);opacity:1;box-shadow:var(--glow)}
.ch-name{font-family:var(--display-face);font-size:var(--t-rail);letter-spacing:.14em;text-transform:uppercase;color:var(--c-display)}
.ch-house{font-size:var(--t-spec);letter-spacing:.06em;color:var(--c-quiet);text-transform:uppercase}
.ch-cue{font-size:var(--t-spec);color:var(--t4)}

/* ═══ TRANSPORT BAR — seven detented stops, like a tape counter.
      This is the draggable:">1" carousel: static and precisely aligned at
      1440, draggable at 390. Same markup, one option, both behaviors. ═══ */
.transport{overflow:hidden}
.transport-track{display:flex;gap:0}
.stop{
  flex:0 0 auto;width:calc(100% / 7);min-width:132px;
  padding:22px clamp(10px,1.4vw,20px) 0 0;
  border-top:1px solid var(--hair);position:relative;
}
.stop::before{content:"";position:absolute;top:-1px;left:0;width:14px;height:3px;background:var(--ac)}
.stop-no{font-family:var(--black);font-size:var(--t-micro);letter-spacing:.14em;color:var(--t4);display:block}
.stop-t{font-family:var(--display-face);font-size:var(--t-rail);letter-spacing:.12em;text-transform:uppercase;color:var(--hd);display:block;margin-top:9px}
.stop-d{font-size:var(--t-spec);color:var(--fg);margin-top:7px;line-height:1.5}

/* ═══ MARQUEE — the service lexicon. There are no partner logos and
      inventing them is fabrication, so this carries real vocabulary. ═══ */
.marq{overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding-block:clamp(16px,2.2vw,26px)}
.marq-in{display:flex;width:max-content;will-change:transform}
.marq-in span{
  font-family:var(--display-face);font-size:clamp(15px,1.9vw,26px);
  letter-spacing:.2087em;text-transform:uppercase;color:var(--c-hair);
  padding-right:clamp(28px,4vw,64px);white-space:nowrap;
}

/* ═══ THE BLINDFOLD BEAT — one line, one screen. The single detail that
      separates this from a wine tasting, and the thing a person repeats. ═══ */
.blind{min-height:82svh;display:grid;place-items:center;text-align:center}
.blind p{
  font-family:var(--display-face);font-size:var(--t-h2);line-height:1.12;
  letter-spacing:.04em;color:var(--c-display);max-width:16ch;
}

/* ═══ EDITORIAL PAIR ═══ */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.pair.rev .pair-media{order:2}
.pair-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:1000px){.pair-media img{aspect-ratio:16/10}}
.pair-body h2{margin-bottom:22px}
.pair-body p{color:var(--fg);max-width:46ch}

/* ═══ COMING SOON — honest, dated, unpriced ═══ */
.soon{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,40px);margin-top:clamp(34px,4vw,56px)}
.soon-card{border-top:1px solid var(--hair);padding-top:20px}
.soon-tag{font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.2087em;text-transform:uppercase;color:var(--ac);display:block;margin-bottom:12px}
.soon-card h3{font-size:var(--t-h3)}
.soon-card p{font-size:var(--t-spec);color:var(--fg);margin-top:10px;line-height:1.55}

/* ═══ THE SHELF — real product renders, no prices, the store is not open ═══ */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,32px);margin-top:clamp(34px,4vw,56px)}
.shelf figure{margin:0}
.shelf img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--t2)}
.shelf figcaption{font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.14em;text-transform:uppercase;color:var(--hd);margin-top:14px}

/* ═══ CAPTURE — ported verbatim in behavior. The validator's type-parity
      assertions compare #phone::placeholder and #submit against .rail-top,
      so all three share one declaration block by construction. ═══ */
.capture{display:flex;flex-direction:column;gap:18px;max-width:430px;margin-top:32px}
.field{position:relative}
.capture input[type=tel]{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--c-hair);
  color:var(--c-display);padding:13px 0;font-size:16px;  /* 16px — iOS zoom floor */
  font-family:var(--sans);
  transition:border-color .3s var(--e-settle);
}
.capture input[type=tel]:focus{outline:none;border-bottom-color:var(--rose)}
.capture input[type=tel]::placeholder{
  font-family:var(--display-face);font-size:var(--t-rail);
  letter-spacing:.2087em;text-transform:uppercase;color:var(--c-rail);opacity:1;
}
.consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.consent input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:16px;height:16px;margin:3px 0 0;border:1px solid var(--c-hair);
  background:transparent;cursor:pointer;
  transition:background-color .2s var(--e-settle),border-color .2s var(--e-settle);
}
.consent input:checked{background:#EEE9DF;border-color:#EEE9DF}
.consent span{font-size:12px;line-height:1.6;color:var(--c-quiet)}
#submit{
  font-family:var(--display-face);font-size:var(--t-rail);
  letter-spacing:.2087em;text-transform:uppercase;
  background:transparent;border:1px solid var(--c-hair);color:var(--c-display);
  padding:15px 26px;cursor:pointer;align-self:flex-start;
  transition:background-color .35s var(--e-settle),border-color .35s var(--e-settle),color .35s var(--e-settle);
}
#submit:hover:not(:disabled){background:var(--rose);border-color:var(--rose);color:var(--t0)}
#submit:disabled{opacity:.34;cursor:not-allowed}
.msg{font-size:13px;margin:0;min-height:1.2em;color:var(--c-quiet)}
.msg.err{color:var(--rose)}
.done{display:none;align-items:center;gap:12px;margin-top:30px}
.done.show{display:flex}
.done svg{width:28px;height:28px;flex:0 0 auto;fill:none;stroke:var(--rose);stroke-width:1.5}
.done p{color:var(--c-display);font-size:var(--t-spec)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ═══ FOOTER ═══ */
.foot{background:var(--t1);padding-block:clamp(46px,6vw,80px)}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px;align-items:baseline;justify-content:space-between}
.fine{font-size:12px;color:var(--c-quiet);margin:0}
.fine a{color:var(--c-rail);text-decoration:none;transition:color .3s var(--e-settle)}
.fine a:hover{color:var(--c-display)}
.sep{padding:0 9px;color:var(--c-hair)}
.fine.credit{flex-basis:100%;font-size:11px;color:var(--c-hair);margin-top:6px}
.fine.credit a{color:var(--c-hair)}

/* ═══ REVEALS — IntersectionObserver, unobserved on first hit ═══ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--e-settle),transform 1.05s var(--e-settle)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.ln{overflow:hidden;display:block}
.lnI{display:block;transform:translateY(105%);transition:transform 1.05s var(--e-settle)}
.in .lnI{transform:none}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1000px){
  .channels{grid-template-columns:repeat(2,1fr);gap:clamp(18px,4vw,34px)}
  .soon{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(2,1fr)}
  .pair{grid-template-columns:1fr}
  .pair.rev .pair-media{order:0}
}
@media (max-width:760px){
  .hdr-nav{
    position:fixed;inset:0;background:var(--t0);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:22px;
    padding:var(--gutter);
    transform:translateY(-100%);transition:transform .6s var(--e-sweep);
    z-index:59;
  }
  .hdr-nav.open{transform:none}
  .hdr-nav a{font-size:var(--t-h3);letter-spacing:.08em}
  .burger{display:block;position:relative;z-index:61}
  .burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  /* the meters rotate: same object, read across instead of down */
  .channels{grid-template-columns:1fr;gap:26px}
  .ch{flex-direction:row;align-items:center;gap:14px}
  .ch-meter{flex-direction:row;height:auto;width:44%;flex:0 0 auto;padding:0;
    border:0;border-left:1px solid var(--hair);border-right:1px solid var(--hair);
    padding-inline:8px;gap:2px}
  .ch-seg{height:28px}
  .ch-text{min-width:0}
  .spec span{padding-block:11px}
  .stop{width:74%;min-width:0}
}

/* ═══ REDUCED MOTION ═══
   No Lenis at all (never "Lenis with duration 0" — that still hijacks the
   wheel). Meters render fully lit rather than animating; never blank.
   Content can never be stranded invisible if an observer never fires.
   Audio is deliberately NOT disabled here: a person who prefers reduced
   motion has said nothing about sound. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1 !important;transform:none !important}
  .lnI{transform:none !important}
  .ch-seg{background:var(--rose);opacity:1}
  .marq-in{transform:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTION LAYER — added after auditing thepopuphotel.com click-for-click.
   The audit found the gap precisely: our page had ZERO links wrapping images,
   while the reference is built almost entirely on hoverable, clickable
   photographic cards with a script label laid over them. Everything below
   closes that gap in this brand's own palette and faces.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE CARD — a photographic panel you can hover and click.
      The reference lays a handwritten script label over a full-bleed frame.
      Italianno is already this brand's script, so the pattern ports without
      importing anyone else's typography. ─────────────────────────────────── */
.card{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  background:var(--t0);isolation:isolate;
}
.card-media{position:absolute;inset:0;overflow:hidden}
.card-media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.005);
  transition:transform 1.5s var(--e-settle),filter 1.1s var(--e-settle);
  filter:saturate(.86) brightness(.74);
}
/* the warm pooled light, as a hover state */
.card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(110% 80% at 50% 42%, rgba(224,168,153,0) 0%, rgba(224,168,153,0) 60%),
    linear-gradient(180deg, rgba(26,25,23,.30) 0%, rgba(26,25,23,.16) 45%, rgba(26,25,23,.82) 100%);
  transition:background 1.1s var(--e-settle);
}
.card:hover .card-media img,.card:focus-visible .card-media img{
  transform:scale(1.055);filter:saturate(1) brightness(.86);
}
.card:hover::after,.card:focus-visible::after{
  background:
    radial-gradient(110% 80% at 50% 42%, rgba(224,168,153,.17) 0%, rgba(224,168,153,0) 62%),
    linear-gradient(180deg, rgba(26,25,23,.22) 0%, rgba(26,25,23,.10) 45%, rgba(26,25,23,.78) 100%);
}
.card-in{
  position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;height:100%;padding:clamp(20px,3vw,40px);
}
.card-eyebrow{
  font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.2087em;
  text-transform:uppercase;color:var(--c-rail);margin-bottom:10px;
}
/* the script label — the reference's move, in our own hand */
.card-label{
  font-family:var(--script);font-size:clamp(38px,4.4vw,72px);line-height:.9;
  color:var(--c-display);
  transform:translateY(0);transition:transform .9s var(--e-settle);
}
.card:hover .card-label{transform:translateY(-5px)}
.card-note{
  font-size:var(--t-spec);color:var(--c-rail);margin-top:10px;
  max-width:34ch;opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--e-settle),transform .7s var(--e-settle);
}
.card:hover .card-note,.card:focus-visible .card-note{opacity:1;transform:none}
/* a hairline that draws in on hover — the "it responds" tell */
.card-rule{
  position:absolute;left:clamp(20px,3vw,40px);bottom:0;height:2px;width:0;
  background:var(--rose);transition:width 1s var(--e-sweep);z-index:3;
}
.card:hover .card-rule,.card:focus-visible .card-rule{width:calc(100% - clamp(40px,6vw,80px))}

/* ── FULL-BLEED CARD ── */
.card-bleed{height:clamp(420px,74svh,760px)}
/* ── 2-UP GRID — the reference's paired half-width panels ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.duo .card{height:clamp(320px,52svh,560px)}
/* ── 4-UP RAIL ── */
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.quad .card{height:clamp(320px,54svh,520px)}

/* ── QUOTE SLIDER — counter, hairline rules, paired image.
      Matches the reference's structure: 01 / 06 counter, a mark, a large
      italic quote between thin vertical rules, a photograph alongside. ──── */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,76px);align-items:center}
.q-body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.q-count{
  position:absolute;top:0;left:0;font-family:var(--black);font-size:var(--t-spec);
  letter-spacing:.14em;color:var(--ac);
}
.q-mark{
  font-family:var(--display-face);font-size:var(--t-rail);letter-spacing:.2087em;
  text-transform:uppercase;color:var(--rl);margin-bottom:6px;
}
.q-rule{width:1px;height:clamp(26px,4vw,52px);background:var(--hair)}
.q-text{overflow:hidden;width:100%;align-self:stretch}
.q-text blockquote{
  flex:0 0 100%;min-width:0;max-width:none;
  margin:0;padding:clamp(18px,2.6vw,34px) clamp(0px,4%,40px);
  font-family:var(--display-face);font-style:normal;
  font-size:clamp(23px,2.5vw,40px);line-height:1.22;letter-spacing:.02em;
  color:var(--hd);
}
.q-who{font-size:var(--t-spec);letter-spacing:.16em;text-transform:uppercase;color:var(--rl);margin-top:4px}
.q-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.q-nav{display:flex;gap:10px;margin-top:26px;justify-content:center}
.q-nav button{
  width:40px;height:40px;border:1px solid var(--hair);background:transparent;
  color:var(--hd);cursor:pointer;display:grid;place-items:center;
  transition:border-color .35s var(--e-settle),background-color .35s var(--e-settle);
}
.q-nav button:hover{border-color:var(--ac);background:rgba(224,168,153,.08)}
.q-dots{display:flex;gap:7px;align-items:center;margin-left:12px}
.q-dots button{width:7px;height:7px;padding:0;border:0;border-radius:0;background:var(--hair);cursor:pointer;transition:background-color .4s var(--e-settle),width .4s var(--e-settle)}
.q-dots button[aria-current="true"]{background:var(--ac);width:20px}

/* ── LINK HOVER — every text link answers the pointer ── */
.lnk{
  position:relative;text-decoration:none;color:var(--hd);
  background-image:linear-gradient(var(--ac),var(--ac));
  background-size:0% 1px;background-repeat:no-repeat;background-position:left 100%;
  transition:background-size .6s var(--e-sweep);padding-bottom:3px;
}
.lnk:hover,.lnk:focus-visible{background-size:100% 1px}
.hdr-nav a:not(.hdr-cta){
  background-image:linear-gradient(var(--rose),var(--rose));
  background-size:0% 1px;background-repeat:no-repeat;background-position:left 100%;
  transition:color .3s var(--e-settle),background-size .55s var(--e-sweep);
  padding-bottom:4px;
}
.hdr-nav a:not(.hdr-cta):hover{background-size:100% 1px}
/* the header earns a ground once you leave the hero */
.hdr{transition:background-color .6s var(--e-settle)}
.hdr.stuck{background:var(--t1)}

/* product tiles become real cards */
.shelf a{display:block;text-decoration:none;overflow:hidden}
.shelf a img{transition:transform 1.4s var(--e-settle),filter 1s var(--e-settle);filter:brightness(.92)}
.shelf a:hover img,.shelf a:focus-visible img{transform:scale(1.05);filter:brightness(1)}
.shelf a:hover figcaption{color:var(--ac)}
.shelf figcaption{transition:color .4s var(--e-settle)}

@media (max-width:1000px){
  .quad{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr;gap:28px}
  .q-media{order:-1}
  .q-body{align-items:flex-start;text-align:left}
  .q-count{position:static;margin-bottom:12px}
}
@media (max-width:760px){
  .duo,.quad{grid-template-columns:1fr}
  .duo .card,.quad .card{height:clamp(300px,46svh,420px)}
  /* touch has no hover — reveal the note and the rule at rest */
  .card-note{opacity:1;transform:none}
  .card-rule{width:44px}
}
@media (prefers-reduced-motion: reduce){
  .card-media img{transform:none !important}
  .card-note{opacity:1 !important;transform:none !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FRAMEWORK — rebuilt from a measured capture of the baseline.
   The census found the real shape: a 100vh video hero, then a 2780px spine of
   FIVE cards each a full viewport tall carrying ONE centred word, then a
   marquee, an editorial block, a contrasting-colorway quote slider, a journal
   grid, and an 882px footer. Scale is the whole point — our cards were 450px
   and carried four text elements each.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO — full viewport, video, zero links ───────────────────────────── */
.section-hero{min-height:100svh;height:100svh}
.section-hero .hero-media video,.section-hero .hero-media img{width:100%;height:100%;object-fit:cover}

/* ── THE SPINE — 1 full-width + 2 + 2, every card a full viewport tall.
      The baseline lays out exactly this way: plain flow, position:relative,
      no transforms and no pinning. The power is scale, not machinery. ───── */
.spine{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.5vw,22px);
  padding:clamp(10px,1.5vw,22px);
}
.spine .card{grid-column:span 1}
.spine .card:first-child{grid-column:1 / -1}
.card-spine{height:clamp(520px,92svh,900px)}

/* stripped back: ONE centred label. No eyebrow, no note, no hairline —
   the baseline carries none of them and the card reads better without. */
.card-spine .card-in{align-items:center;justify-content:center;text-align:center}
.card-spine .card-label{
  font-family:var(--script);
  font-size:clamp(44px,5.2vw,76px);line-height:.92;
  color:var(--c-display);
  text-shadow:0 2px 40px rgba(26,25,23,.55);
}
.card-spine .card-eyebrow,.card-spine .card-note,.card-spine .card-rule{display:none}
/* the hover stays — it is our twist and costs nothing structurally */
.card-spine::after{
  background:linear-gradient(180deg,rgba(26,25,23,.34) 0%,rgba(26,25,23,.14) 42%,rgba(26,25,23,.62) 100%);
}
.card-spine:hover::after{
  background:
    radial-gradient(100% 70% at 50% 50%, rgba(224,168,153,.15) 0%, rgba(224,168,153,0) 64%),
    linear-gradient(180deg,rgba(26,25,23,.24) 0%,rgba(26,25,23,.06) 42%,rgba(26,25,23,.54) 100%);
}

/* ── THE MENU DRAWER — a split panel, not a fullscreen overlay.
      Baseline: serif nav list across the left third, full-bleed media filling
      the right two-thirds, header stays put, burger becomes an X. ───────── */
.drawer{
  position:fixed;inset:0;z-index:55;display:grid;grid-template-columns:minmax(320px,29%) 1fr;
  visibility:hidden;pointer-events:none;
}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer-panel{
  background:var(--t1);padding:calc(var(--hdr) + 40px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:4px;
  transform:translateX(-100%);transition:transform .72s var(--e-sweep);
}
.drawer.open .drawer-panel{transform:none}
.drawer-media{position:relative;overflow:hidden;background:var(--t0);opacity:0;transition:opacity .9s var(--e-settle) .15s}
.drawer.open .drawer-media{opacity:1}
.drawer-media img,.drawer-media video{width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.drawer-scrim{position:absolute;inset:0;background:rgba(26,25,23,.55);opacity:0;transition:opacity .6s var(--e-settle)}
.drawer.open .drawer-scrim{opacity:1}
.drawer a{
  font-family:var(--display-face);font-size:clamp(22px,2.1vw,32px);letter-spacing:.04em;
  color:var(--c-display);text-decoration:none;padding:13px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--c-hair);
  transition:color .35s var(--e-settle),padding-left .45s var(--e-settle);
}
.drawer a:hover,.drawer a:focus-visible{color:var(--rose);padding-left:10px}
.drawer a .arw{font-size:.6em;opacity:.55;transition:transform .45s var(--e-sweep)}
.drawer a:hover .arw{transform:translateX(5px)}
.drawer-foot{margin-top:auto;padding-top:28px}
.drawer-foot p{font-size:var(--t-spec);color:var(--c-quiet);letter-spacing:.06em}
/* burger becomes an X */
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger{display:block;background:none;border:0;padding:10px;cursor:pointer;position:relative;z-index:61;margin-right:4px}
.burger span{display:block;width:22px;height:1px;background:var(--c-display);margin:5px 0;transition:transform .45s var(--e-settle),opacity .3s}

/* ── JOURNAL GRID — the baseline's article-list ───────────────────────── */
.journal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,40px);margin-top:clamp(34px,4vw,56px)}
.jrnl{display:block;text-decoration:none;overflow:hidden}
.jrnl-media{overflow:hidden;aspect-ratio:3/2;background:var(--t2)}
@media (max-width:760px){.jrnl-media{aspect-ratio:2/1}}
.jrnl-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e-settle),filter 1s var(--e-settle);filter:brightness(.86)}
.jrnl:hover .jrnl-media img{transform:scale(1.055);filter:brightness(1)}
.jrnl-tag{font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.2087em;text-transform:uppercase;color:var(--ac);display:block;margin:18px 0 8px}
.jrnl h3{font-size:var(--t-h3);transition:color .4s var(--e-settle)}
.jrnl:hover h3{color:var(--ac)}
.jrnl p{font-size:var(--t-spec);color:var(--fg);margin-top:9px;line-height:1.55}

/* ── FOOTER — a real navigation surface, not a legal strip ────────────── */
.foot{background:var(--t1);padding-block:clamp(56px,7vw,92px) clamp(28px,3vw,40px)}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,56px);align-items:start}
.foot-col h4{
  font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.2087em;
  text-transform:uppercase;color:var(--c-rail);margin:0 0 16px;font-weight:400;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot-col a{
  font-size:var(--t-spec);color:var(--c-body);text-decoration:none;
  transition:color .35s var(--e-settle);
}
.foot-col a:hover{color:var(--rose)}
.foot-mark{font-family:var(--script);font-size:clamp(32px,3.4vw,46px);color:var(--c-display);line-height:1;margin:0 0 12px}
.foot-say{font-size:var(--t-spec);color:var(--c-quiet);max-width:30ch;line-height:1.6}
.foot-base{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline;
  margin-top:clamp(38px,5vw,66px);padding-top:22px;border-top:1px solid var(--c-hair);
}

@media (max-width:1000px){
  .journal{grid-template-columns:1fr 1fr}
  .foot-cols{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:760px){
  /* the spine stacks; every card stays a full screen of photograph */
  .spine{grid-template-columns:1fr}
  .spine .card{grid-column:1 / -1}
  .card-spine{height:48svh;min-height:330px}
  .drawer{grid-template-columns:1fr}
  .drawer-media{display:none}
  .journal{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .drawer-panel{transition:none}
  .jrnl-media img{transform:none !important}
}


/* ── RHYTHM — the side-by-side showed five photographs reading as one dark
      wall and seven text bands in a row. The baseline alternates constantly.
      These two rules are what break the tunnel. ─────────────────────────── */
.section-spine{background:var(--t2)}
.section-spine .card{background:var(--t0)}

/* ── FOOTER WORDMARK — the baseline closes on a very large lockup. Ours
      closed on four small columns and stopped. ─────────────────────────── */
.foot-wordmark{
  font-family:var(--script);
  font-size:clamp(56px,11vw,176px);line-height:.84;
  color:var(--c-display);opacity:.92;
  margin:clamp(40px,5vw,72px) 0 0;
  letter-spacing:.01em;
}
@media (max-width:760px){ .foot-wordmark{font-size:clamp(44px,15vw,88px)} }

/* the capture moved into the footer, matching the baseline, which has no
   standalone sign-up band */
.foot-capture{grid-column:span 2}
.foot-capture .capture{margin-top:4px;max-width:380px}
.foot-capture .done{margin-top:18px}
@media (max-width:1000px){ .foot-capture{grid-column:1 / -1} }