/* ═══════════════════════════════════════════════════════════════════════════
   PhilGood barbesthetics — 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;
  --brand-face:"Josefin Sans","Optima","Gill Sans",sans-serif; /* brand name ONLY — real lowercase, Julius-weight strokes */
  --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:#D98F4F;   /* AMBER accent (Trumaine 2026-09-26: orange is part of the branding); measured 5.17:1 on ink */       /* verbatim. 6.6:1 on --t2 — AA body on every dark step */
  --rose-ink:#8F5220;  /* amber on cream, measured 5.11:1 */   /* 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(217,143,79,.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  */
  --e-spring:cubic-bezier(.34,1.56,.64,1);  /* element builds — small overshoot */
  --body-face:"Josefin Sans","Optima","Gill Sans",sans-serif; /* body voice (Trumaine 2026-09-26: abandon Archivo body) */
  --t-bodyj:clamp(17px,.9vw + 13px,19px);  /* baseline-matched: 15-16px Satoshi optically, in Josefin */
  --amber-deep:#C1763A;                     /* the pour liquid — decorative only */
  /* the 8-step spacing scale (Hootvale/HIG-derived); bands use these, never ad-hoc clamps */
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:clamp(28px,3vw,40px);--s7:clamp(40px,5vw,64px);--s8:clamp(56px,7vw,96px);

  /* ── 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}
/* barbesthetics is all lowercase, always (Phil via Trumaine 2026-10-09). The word keeps
   its element's face (Switzer has real lowercase) and drops the rail uppercase. */
.lc{text-transform:none}

/* 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:clamp(20px,1.6vw + 14px,27px);line-height:1.4;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:var(--hd)} /* heading = a larger rail (Trumaine 2026-09-26) */
h3{font-family:var(--display-face);font-size:clamp(16px,1.1vw + 12px,20px);line-height:1.4;letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;color:var(--hd)}
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;
}
/* The brand name renders in REAL upper- and lowercase glyphs — "PhilGood barbesthetics®",
   capital P and G only (Trumaine, 2026-09-21). Julius Sans One is BANNED for the brand
   name: it has no lowercase glyphs — its lowercase renders as small caps, which reads as
   all-uppercase. The brand face is Josefin Sans Light 300 (Trumaine's follow-up order,
   same day: same style and thickness as Julius, with real lowercase) — chosen from a
   five-candidate side-by-side against the Julius reference. Never re-add the display
   face or any text-transform to an element carrying the brand name. */
/* Sizing is MEASURED, not guessed (2026-09-21): Josefin's x-height is 0.391em vs Julius's
   0.727em cap height, so at equal font-size the mark reads a third shorter than the nav.
   23px puts the mark's lowercase mass (23 x .391 = 9.0px) level with the nav caps
   (12.54 x .727 = 9.1px); wght 320 matches the Julius hairline at that size. */
.hdr-mark{font-family:var(--brand-face);font-weight:320;font-size:calc(var(--t-rail)*1.82);letter-spacing:.08em;text-transform:none;color:var(--c-display);text-decoration:none;white-space:nowrap}
.rail .brand{font-family:var(--brand-face);font-weight:320;letter-spacing:.08em;text-indent:0;text-transform:none;font-size:1.82em}
.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(--c-display);text-decoration:none; /* cream: the header floats over imagery, amber failed axe there */
  padding:9px 16px;border:1px solid rgba(217,143,79,.55);background:rgba(26,25,23,.35);
  transition:background-color .35s var(--e-settle),border-color .35s var(--e-settle);
}
.hdr-cta:hover{background:rgba(217,143,79,.12);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}


/* ═══ 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(217,143,79,.13) 0%, rgba(217,143,79,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:var(--s5);max-width:none;font-family:var(--script);font-size:clamp(32px,3.2vw + 16px,52px);line-height:.92;color:var(--c-display)}

/* 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(--rl);display:block} /* was --t4: 1.9:1 on ink, axe serious (2026-09-26) */
.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(--brand-face);font-weight:600;font-size:12px;
  letter-spacing:.13em;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(--brand-face);font-weight:600;font-size:12px;
  letter-spacing:.13em;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)}

/* ═══ 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){
  /* the fullscreen nav overlay retired 2026-09-26: the drawer is the one
     mobile menu; the responsive header logic lives in the v4 layer */
  /* 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(217,143,79,0) 0%, rgba(217,143,79,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(217,143,79,.17) 0%, rgba(217,143,79,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(217,143,79,.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(217,143,79,.15) 0%, rgba(217,143,79,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,.drawer .drawer-consult{
  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,.drawer .drawer-consult:hover,.drawer .drawer-consult:focus-visible{color:var(--rose);padding-left:10px}
.drawer a .arw,.drawer .drawer-consult .arw{font-size:.6em;opacity:.55;transition:transform .45s var(--e-sweep)}
.drawer a:hover .arw,.drawer .drawer-consult: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 h3{
  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} }

/* ═══ PHIL'S 2026-09-26 MEMO ROUND — hero hierarchy, note-meter relabel,
      the four-section structure and the consult block. Colors and faces are
      tokens only; the brand line uses --brand-face per the standing casing
      rules. ═══ */

/* Memo 1: the brand line is the largest, boldest thing on the hero; the
   script title steps down beneath it. */
.hero-brand{margin-top:clamp(16px,2.4vw,28px)}
.hero-brand .brand{
  font-family:var(--brand-face);font-weight:480;
  font-size:clamp(30px,4.8vw,66px);line-height:1.06;letter-spacing:.05em;
  color:var(--c-display);
}
.hero-brand sup{font-size:.3em;letter-spacing:0}
.hero-presents{
  font-family:var(--display-face);font-size:var(--t-spec);
  letter-spacing:.2087em;text-indent:.2087em;text-transform:uppercase;
  color:var(--rl);margin:clamp(10px,1.4vw,16px) 0 0;
}
.section-hero h1{font-size:calc(var(--t-h1)*.62);margin-top:2px}

/* Section eyebrows + the meter/position headings */
.sec-eyebrow,.meter-eyebrow{
  font-family:var(--display-face);font-size:var(--t-spec);
  letter-spacing:.2087em;text-transform:uppercase;color:var(--rl);
  margin:0 0 14px;
}
.meter-eyebrow{margin-bottom:22px}
.pos-title{font-family:var(--display-face);font-size:var(--t-h3);line-height:1.12;letter-spacing:.03em;color:var(--hd)}
.pos-sub{
  font-family:var(--display-face);font-size:var(--t-spec);
  letter-spacing:.2087em;text-transform:uppercase;color:var(--rl);
  margin:10px 0 26px;
}
.pos-close{max-width:52ch;margin-top:clamp(22px,3vw,34px);color:var(--fg)}

/* Memo 3: the barbesthetics address list — flat hairline rows, no boxes */
.addr-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,4vw,64px);
}
.addr-list li{
  padding:13px 0;border-bottom:1px solid var(--hair);
  font-size:var(--t-body);color:var(--fg);
}
@media (max-width:700px){ .addr-list{grid-template-columns:1fr} }

/* Memos 2+4: the consult block that closes every section — four options,
   hairline rows in the section's own colorway */
.consult{margin-top:clamp(38px,5vw,64px);border-top:1px solid var(--hair);padding-top:clamp(22px,3vw,34px)}
.consult-title{
  font-family:var(--display-face);font-size:var(--t-spec);
  letter-spacing:.2087em;text-transform:uppercase;color:var(--rl);
  margin:0 0 16px;
}
.consult-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.c-opt{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.c-k{
  font-family:var(--display-face);font-size:var(--t-spec);
  letter-spacing:.14em;text-transform:uppercase;color:var(--hd);white-space:nowrap;
}
.c-v{font-size:var(--t-body);color:var(--fg);text-align:right}
a.c-v{color:var(--hd);text-decoration-color:var(--hair);text-underline-offset:3px}
a.c-v:hover{color:var(--ac)}
@media (max-width:700px){ .consult-grid{grid-template-columns:1fr} }

/* ═══ ENTRANCE — the coming-soon splash as the front door. The sheet's type
      scale and spacing are the ARCHIVE\'S MEASURED SYSTEM (see
      archive/index-comingsoon-2026-09-11.html): --ed is the display size, the
      bands hang off it. Colors are the live tokens. The wordmark bands render
      in the brand face per the standing casing rules. ═══ */
.enter{
  position:fixed;inset:0;z-index:200;background:var(--t0);
  display:flex;align-items:center;justify-content:center;text-align:center;
  transition:opacity .85s var(--e-settle);
  --ed:max(26px, min( calc((100vw - 44px) / 8.4), calc((100svh - 150px) / 8.6) ));
}
.enter.gone{opacity:0;pointer-events:none}
/* paper tooth + centre light + darkened corners, from the splash */
.enter::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(115% 80% at 50% 34%, rgba(238,233,223,.055), transparent 58%),
    radial-gradient(130% 105% at 50% 50%, transparent 42%, rgba(0,0,0,.42) 100%);
}
.enter::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:200px 200px;opacity:.15;mix-blend-mode:overlay;
}
.enter-sheet{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:0 22px}
.enter-rail{
  font-family:var(--display-face);text-transform:uppercase;line-height:1;white-space:nowrap;
  color:var(--c-rail);font-size:max(9px, calc(var(--ed) * .2));
  letter-spacing:.2087em;text-indent:.2087em;
}
.enter-rail i,.enter-go i{font-style:normal;color:var(--c-hair);padding:0 .05em}
.enter-display{margin-top:calc(var(--ed) * 1.1)}
.enter-display .brand{
  font-family:var(--brand-face);font-weight:340;font-size:var(--ed);line-height:1;
  letter-spacing:.0882em;text-indent:.0882em;color:var(--c-display);white-space:nowrap;
}
.enter-subrail{margin-top:calc(var(--ed) * .13)}
.enter-subrail .brand{
  font-family:var(--brand-face);font-weight:330;
  font-size:max(12px, calc(var(--ed) * .30));
  letter-spacing:.40em;text-indent:.40em;color:var(--c-rail);white-space:nowrap;
}
.enter-tag{
  font-family:var(--script);font-weight:400;font-size:calc(var(--ed) * .67);
  line-height:.86;letter-spacing:.005em;color:var(--c-rail);
  margin-top:calc(var(--ed) * .24);
}
.enter .seal{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:calc(var(--ed) * .229);margin-top:calc(var(--ed) * .621);
  width:max-content;max-width:100%;
}
.enter .seal .yr:first-child{text-align:right}
.enter .seal .yr:last-child{text-align:left}
.enter .seal .yr{
  opacity:0;transition:opacity .9s var(--e-settle);
  font-family:var(--sans);font-weight:400;
  font-size:max(7px, calc(var(--ed) * .218));
  letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  color:var(--c-quiet);white-space:nowrap;
}
.enter .ring{
  width:max(30px,calc(var(--ed) * .9));height:max(30px,calc(var(--ed) * .9));
  border:1px solid transparent;border-radius:50%; /* circle appears only once the pour lands */
  transition:border-color .9s var(--e-settle);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.enter .ring img{width:42%;height:auto;display:block}
/* the enter line — a rail, not a box; it appears once the pour has landed */
.enter-go{
  font-family:var(--display-face);text-transform:uppercase;line-height:1;white-space:nowrap;
  font-size:max(9px, calc(var(--ed) * .2));letter-spacing:.2087em;text-indent:.2087em;
  color:var(--c-rail);background:none;border:none;cursor:pointer;
  margin-top:calc(var(--ed) * 1.0);padding:14px 10px;
  opacity:0;pointer-events:none;transition:opacity .8s var(--e-settle),color .3s var(--e-settle);
}
.enter.ready .enter-go{opacity:1;pointer-events:auto}
.enter-go:hover,.enter-go:focus-visible{color:var(--c-display)}
.enter-go:focus-visible{outline:1px solid var(--c-hair);outline-offset:4px}
/* the pour: vessel + two canvases, ported intact from the splash */
.enter .vessel{position:absolute;left:0;top:0;width:clamp(112px,21vh,168px);aspect-ratio:1;z-index:1;will-change:transform,left,top}
.enter .vessel.land{transition:transform 1.05s var(--e-sweep)}
.enter .halo{position:absolute;inset:0;width:100%;height:100%;animation:pg-spin 9s linear infinite;opacity:.6}
@keyframes pg-spin{to{transform:rotate(360deg)}}
.enter .fx,.enter .fx2{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.enter .fx{filter:url(#pg-goo) blur(.4px);
  -webkit-mask:url(/assets/logo-mark.svg) center / 42% auto no-repeat;
          mask:url(/assets/logo-mark.svg) center / 42% auto no-repeat;}
.enter .fx2{filter:url(#pg-goo)}

/* ═══ DESIGN ROUND 2026-09-26 (SCRUM-1857) — cohesion, motion, the consult
      dialog, mobile parity. Every value rides the existing tokens. ═══ */

/* 1 · IMAGES JOIN THE GROUND. Every editorial photograph feathers into its
      section's own colorway: an edge mask kills the hard rectangle, and a
      vignette overlay in var(--bg) melts the corners into the ground. */
.pair-media{position:relative}
.pair-media img{
  -webkit-mask-image:radial-gradient(115% 115% at 50% 50%,#000 58%,transparent 99%);
  mask-image:radial-gradient(115% 115% at 50% 50%,#000 58%,transparent 99%);
}
.pair-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%,transparent 46%,var(--bg) 108%);
}
/* the hero photograph dissolves into the first section's ink */
.hero-media::before{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent, var(--t2));
}

/* 2 · POST-ENTRANCE HERO CASCADE. Hidden until the visitor enters, then the
      hero arrives line by line. Reduced motion shows everything at once. */
.hv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--e-settle),transform 1s var(--e-settle);
  transition-delay:calc(var(--hd,0)*.12s)}
body.entered .hv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .hv{opacity:1;transform:none;transition:none} }

/* 3 · IMAGE UNVEIL + slow drift. Media reveals with a settle from 1.06 scale;
      a long alternate zoom keeps the hero photograph breathing. */
.pair-media.rv img,.pair-media .rv img{transform:scale(1.06);transition:transform 1.4s var(--e-sweep)}
.pair-media.rv.in img{transform:scale(1)}
@media (prefers-reduced-motion:no-preference){
  .hero-media img{animation:pg-breathe 20s var(--e-settle) infinite alternate}
  @keyframes pg-breathe{from{transform:scale(1)}to{transform:scale(1.05)}}
}

/* 4 · STAGGERED ROWS — the address list and category stops cascade in. */
.addr-list li{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--e-settle),transform .8s var(--e-settle);
  transition-delay:calc(var(--sd,0)*.07s)}
.addr-list.in li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .addr-list li{opacity:1;transform:none;transition:none} }

/* 5 · THE CONSULT CTA — one quiet control closes each section. */
.consult-row{margin-top:clamp(34px,4.6vw,58px)}
.consult-cta{
  font-family:var(--display-face);font-size:var(--t-rail);
  letter-spacing:.2087em;text-indent:.2087em;text-transform:uppercase;
  color:var(--ac);background:transparent;cursor:pointer;
  padding:15px 30px;border:1px solid var(--hair);
  transition:background-color .35s var(--e-settle),border-color .35s var(--e-settle);
}
.consult-cta:hover,.consult-cta:focus-visible{border-color:var(--ac)}
.consult-cta .arw{display:inline-block;transition:transform .35s var(--e-settle)}
.consult-cta:hover .arw{transform:translateX(5px)}

/* 6 · THE CONSULT DIALOG — centered panel on desktop, bottom sheet on phones
      (the button becomes the surface; origin is obvious, exit is obvious). */
.cdlg{border:none;padding:0;background:transparent;max-width:none;max-height:none}
.cdlg::backdrop{background:rgba(10,9,8,.62)}
.cdlg-in{
  position:relative;width:min(560px,calc(100vw - 32px));
  background:var(--t1);color:var(--c-body);
  border:1px solid var(--c-hair);
  padding:clamp(26px,4vw,44px);
}
.cdlg[open]{display:grid;place-items:center;position:fixed;inset:0;width:100vw;height:100dvh}
.cdlg[open] .cdlg-in{animation:cdlg-pop .45s var(--e-settle)}
@keyframes cdlg-pop{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.cdlg-x{
  position:absolute;top:14px;right:14px;width:40px;height:40px;
  background:transparent;border:none;color:var(--c-rail);font-size:24px;line-height:1;
  cursor:pointer;transition:color .3s var(--e-settle);
}
.cdlg-x:hover,.cdlg-x:focus-visible{color:var(--c-display)}
.cdlg-eyebrow{
  font-family:var(--brand-face);font-weight:320;font-size:14px;letter-spacing:.08em;
  color:var(--c-rail);margin:0 0 10px;
}
.cdlg-title{
  font-family:var(--display-face);font-size:var(--t-h3);line-height:1.1;
  letter-spacing:.03em;color:var(--c-display);margin:0 0 22px;
}
.cdlg-rows .c-opt{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--c-hair);
}
.cdlg-note{font-size:var(--t-body);color:var(--c-quiet);margin:20px 0 18px;max-width:38ch}
.cdlg-cta{
  font-family:var(--display-face);font-size:var(--t-spec);
  letter-spacing:.2087em;text-indent:.2087em;text-transform:uppercase;
  color:var(--rose);background:transparent;cursor:pointer;
  padding:13px 24px;border:1px solid rgba(217,143,79,.42);
  transition:background-color .35s var(--e-settle),border-color .35s var(--e-settle);
}
.cdlg-cta:hover,.cdlg-cta:focus-visible{background:rgba(217,143,79,.12);border-color:var(--rose)}
@media (max-width:700px){
  .cdlg[open]{place-items:end center}
  .cdlg-in{width:100vw;border-left:none;border-right:none;border-bottom:none;
    padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  .cdlg[open] .cdlg-in{animation:cdlg-sheet .5s var(--e-sweep)}
  @keyframes cdlg-sheet{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .cdlg[open] .cdlg-in{animation:none}
}
.foot-consult{
  background:transparent;border:none;padding:0;cursor:pointer;
  font:inherit;color:inherit;text-decoration:underline;
  text-decoration-color:var(--c-hair);text-underline-offset:3px;
}
.foot-consult:hover{color:var(--c-display)}

/* 7 · Headline balance so mobile eyebrows never strand one word. */
.sec-eyebrow,h2,.pos-title{text-wrap:balance}

/* widow control on the hero lede */
.lede{text-wrap:balance}

.enter.ready .ring{border-color:var(--c-hair)}
.enter.ready .seal .yr{opacity:1}

/* ═══ AUDIT ROUND SCRUM-1858 (2026-09-26) — full-bleed bands, per-element
      spring builds, the services accordion, the rebranded consult dialog.
      Spacing rides the --s scale; type rides the ramp; accents ride --rose
      (amber). ═══ */

/* 1 · FULL-BLEED BANDS — the image IS the section; copy sits in the open
      area; the media fades top and bottom into the ink so no seam is a hard
      line (his: "not like old HTML websites"). */
.band-full{position:relative;min-height:92svh;display:flex;align-items:center;background:var(--t2)}
.band-media{position:absolute;inset:0;overflow:hidden}
.band-media img{
  width:100%;height:112%;object-fit:cover;display:block;   /* 12% overscan feeds the parallax */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
/* the open area: a directional scrim that clears one side for the copy */
.band-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(26,25,23,.78) 0%, rgba(26,25,23,.44) 30%, rgba(26,25,23,.06) 56%, rgba(26,25,23,0) 72%);
}
.band-right .band-media::after{
  background:linear-gradient(270deg, rgba(26,25,23,.78) 0%, rgba(26,25,23,.44) 30%, rgba(26,25,23,.06) 56%, rgba(26,25,23,0) 72%);
}
.band-in{position:relative;z-index:1;width:100%;padding-block:var(--s8)}
.band-copy{max-width:56ch}
.band-right .band-copy{margin-left:auto;text-align:left}
.band-in .sec-eyebrow{margin-bottom:var(--s3)}
.band-in h2{margin-bottom:var(--s5)}
.band-in p + p{margin-top:var(--s4)}
.band-in .consult-row{margin-top:var(--s6)}
/* body voice: Josefin light at the measured optical body size */
.band-in p,.sect-extra p,.svc-body p,.cdlg-note,.pos-close{
  font-family:var(--body-face);font-weight:350;font-size:var(--t-bodyj);line-height:1.55;
}
/* extras (meter, categories, accordion) sit on quiet ink after the band */
.sect-extra{background:var(--t2);padding-block:var(--s7)}
.sect-extra + .sect-extra{padding-top:0}

/* 2 · PER-ELEMENT SPRING BUILD — each element arrives on its own beat with a
      small overshoot; a section assembles as you scroll into it. */
.rvv{opacity:0;translate:0 30px;
  transition:opacity .65s var(--e-settle),translate .85s var(--e-spring);
  transition-delay:calc(var(--sd,0)*.09s)}
.rvv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){ .rvv{opacity:1;translate:none;transition:none} }

/* 3 · SERVICES ACCORDION — Julius rail rows; each opens to a Josefin
      description and its own consultation CTA. */
.svc{border-top:1px solid var(--hair)}
.svc-item{border-bottom:1px solid var(--hair)}
.svc-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:var(--s4) 2px;
  font-family:var(--display-face);font-size:var(--t-rail);letter-spacing:.2087em;text-indent:.2087em;
  text-transform:uppercase;color:var(--hd);
  transition:color .3s var(--e-settle);
}
.svc-item summary::-webkit-details-marker{display:none}
.svc-item summary:hover{color:var(--ac)}
.svc-item summary:focus-visible{outline:1px solid var(--hair);outline-offset:3px}
.svc-plus{font-family:var(--sans);font-size:18px;color:var(--rl);transition:rotate .35s var(--e-settle);line-height:1}
.svc-item[open] .svc-plus{rotate:45deg}
.svc-body{padding:var(--s2) 2px var(--s5)}
.svc-body p{max-width:52ch}
.svc-cta{
  margin-top:var(--s4);
  font-family:var(--display-face);font-size:var(--t-spec);letter-spacing:.2087em;text-indent:.2087em;
  text-transform:uppercase;color:var(--ac);background:transparent;border:none;cursor:pointer;padding:6px 0;
  border-bottom:1px solid rgba(217,143,79,.42);
  transition:color .3s var(--e-settle),border-color .3s var(--e-settle);
}
.svc-cta:hover{color:var(--hd);border-color:var(--hd)}
@media (prefers-reduced-motion:no-preference){
  .svc-item[open] .svc-body{animation:svc-open .45s var(--e-settle)}
  @keyframes svc-open{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
}

/* 4 · CONSULT DIALOG v2 — the splash treatment: the g in a small ring, rails,
      and the phone capture LIVES HERE (his: the bottom section was out of the
      way). */
.cdlg-mark{
  width:44px;height:44px;border:1px solid var(--c-hair);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);
}
.cdlg-mark img{width:42%;height:auto;display:block}
.cdlg-in{text-align:center}
.cdlg-eyebrow{margin-bottom:var(--s2)}
.cdlg-title{margin:0 0 var(--s5)}
.cdlg-rows{text-align:left}
.cdlg-rows .c-v{font-family:var(--body-face);font-weight:350;font-size:calc(var(--t-bodyj)*.88)}
.cdlg-note{margin:var(--s5) auto var(--s3);max-width:40ch}
.cdlg .capture{width:100%;max-width:380px;margin:0 auto;text-align:left}
.cdlg .capture button{margin-top:var(--s3)}
.cdlg .done{margin-top:var(--s4)}

/* 5 · drawer without the decoration photo — one full panel */
.drawer-panel{flex:1 1 100%;max-width:none}

/* 6 · spec row items that act (call opens the dialog, email is live) */
.spec .spec-act{background:none;border:none;padding:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--c-display);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair)}
.spec a.spec-act{color:var(--c-display)}
.spec .spec-act:hover{color:var(--ac)}

/* the hair-spa eyebrow carries the brand name: brand face, never a transform */
.sec-eyebrow-brand{letter-spacing:0;text-transform:none;text-indent:0}
.sec-eyebrow-brand .brand{
  font-family:var(--brand-face);font-weight:330;font-size:15px;letter-spacing:.08em;color:var(--rl);
}
/* footer + drawer controls that act like links */
.drawer-consult{background:none;border:none;cursor:pointer;text-align:left;width:100%}

/* ═══ TYPE HARMONY — SCRUM-1859 (2026-09-26). The baseline (thepopuphotel.com,
      probed live): ONE workhorse family carries information in weights — body
      15-16px w400, eyebrows 12px w700 tracked caps — a display face only at
      modest heading sizes, a script for emotional lines. Mapped here: Josefin
      is the information family, Julius is the display heading only, Italianno
      is the script. This layer is authoritative — it is appended last on
      purpose. ═══ */

/* the information caps — one treatment, everywhere a label speaks */
.hdr-nav a,.rail,.rail-top,
.sec-eyebrow:not(.sec-eyebrow-brand),.meter-eyebrow,.pos-sub,
.consult-title,.cdlg .c-k,.ch-no,.stop-t,.foot-col h3,
.svc-item summary,.consult-cta,.cdlg-cta,.hdr-cta,.spec span,
.capture button,.drawer-foot p{
  font-family:var(--brand-face);font-weight:600;
  font-size:12px;line-height:1.5;
  letter-spacing:.13em;text-indent:0;text-transform:uppercase;
}
.capture input::placeholder{
  font-family:var(--brand-face);font-weight:600;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;
}
.hdr-nav a,.hdr-cta{font-weight:500}
.rail,.rail-top{font-weight:500;color:var(--c-rail)}
.sec-eyebrow:not(.sec-eyebrow-brand),.meter-eyebrow{color:var(--rl)}
.ch-no{color:var(--rl);font-weight:500}
.stop-no{font-family:var(--brand-face);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--rl)}
.svc-item summary{font-weight:500;letter-spacing:.11em}
.consult-cta,.cdlg-cta{padding:13px 24px}
.spec span{letter-spacing:.11em}

/* the display heading — Julius at the baseline's modest scale, light tracking,
   never a giant tracked banner (the header/body fight ends here) */
h2,.cdlg-title{
  font-family:var(--display-face);font-weight:400;
  font-size:clamp(22px,1.4vw + 14px,30px);line-height:1.22;
  letter-spacing:.08em;text-indent:0;text-transform:none;color:var(--hd);
}
h3,.pos-title{
  font-family:var(--display-face);font-weight:400;
  font-size:clamp(18px,1vw + 12px,22px);line-height:1.3;
  letter-spacing:.08em;text-indent:0;text-transform:none;color:var(--hd);
}
.ch-name{font-family:var(--display-face);font-size:15px;letter-spacing:.1em;text-transform:uppercase}

/* the information body — one weight role against the headings */
.band-in p,.sect-extra p,.svc-body p,.cdlg-note,.pos-close,.ch-cue{
  font-family:var(--brand-face);font-weight:300;   /* thin light body — separated from headers (Trumaine 2026-09-26) */
  font-size:var(--t-bodyj);line-height:1.66;letter-spacing:.012em;
}
.band-copy{max-width:46ch}
.foot-col a,.foot-col li,.foot-consult,.foot-say{
  font-family:var(--brand-face);font-weight:380;font-size:14px;line-height:1.6;
}
.fine{font-family:var(--brand-face);font-weight:380;font-size:12px}
.consent span{font-family:var(--brand-face);font-weight:380}
.drawer a,.drawer .drawer-consult{font-family:var(--brand-face);font-weight:340;letter-spacing:.03em}
.cdlg-rows .c-v{font-size:14px}

/* ═══ INTEGRATION — the copy belongs to the picture, not on top of it.
      One shared grade across every band image (desaturated, deepened, an
      amber soft-light wash) + a feathered ink pool behind the copy column. ═══ */
.band-media img{filter:saturate(.78) contrast(.97) brightness(.92)}
.band-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(90% 90% at 70% 40%, rgba(193,118,58,.16), transparent 70%);
  mix-blend-mode:soft-light;
}
.band-copy{position:relative}
.band-copy::before{
  content:"";position:absolute;inset:-26px -34px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(26,25,23,.52), rgba(26,25,23,.24) 64%, transparent 100%);
  filter:blur(2px);
}

/* ═══ SCROLL-DRIVEN REVEALS — where the engine supports view timelines, each
      band's image settles from a deeper zoom as it crosses the viewport and
      the copy pool eases in with it; elsewhere the spring builds carry it. ═══ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .band-media img{
      animation:band-settle linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes band-settle{
      from{transform:scale(1.12) translateY(-2.5%)}
      to{transform:scale(1) translateY(2.5%)}
    }
    .band-in{
      animation:copy-drift linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 55%;
    }
    @keyframes copy-drift{
      from{opacity:.2;transform:translateY(34px)}
      to{opacity:1;transform:none}
    }
  }
}


/* ═══ ARRIVAL CHOREOGRAPHY — the entrance shows ONLY the pour at first; each
      line of the sheet arrives on its own beat (the same staged logic the
      sections use on scroll). A click-skip or reduced motion shows all. ═══ */
.enter .enter-rail,.enter .enter-display,.enter .enter-subrail,.enter .enter-tag{
  opacity:0;translate:0 22px;
  transition:opacity .9s var(--e-settle),translate 1s var(--e-spring);
}
.enter.s1 .enter-rail,
.enter.s2 .enter-display,
.enter.s3 .enter-subrail,
.enter.s4 .enter-tag{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){
  .enter .enter-rail,.enter .enter-display,.enter .enter-subrail,.enter .enter-tag{
    opacity:1;translate:none;transition:none}
}

/* ═══ TYPE-SPEC v3 — THE HOOPDREAMER SYSTEM (SCRUM-1863, 2026-09-26).
      One grotesque family in weights: Archivo variable carries every
      information role, Archivo Black carries the display headline. Julius
      retires to the frozen splash; Josefin renders only the brand name;
      Italianno keeps the script voice. Appended last: authoritative. ═══ */

/* display headline — big, bold, tight, sentence case (the reference) */
h2,.cdlg-title{
  font-family:var(--black);font-weight:400;
  font-size:clamp(34px,2.6vw + 18px,54px);line-height:.98;max-width:14ch;
  letter-spacing:-.01em;text-indent:0;text-transform:none;color:var(--hd);
}
h3,.pos-title{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(20px,1.2vw + 14px,26px);line-height:1.15;
  letter-spacing:0;text-indent:0;text-transform:none;color:var(--hd);
}
/* eyebrow — small, bold, sentence case, like the reference's "Sponsors" */
.sec-eyebrow:not(.sec-eyebrow-brand),.meter-eyebrow,.pos-sub,.consult-title,.cdlg-eyebrow{
  font-family:var(--sans);font-weight:700;
  font-size:13px;line-height:1.4;letter-spacing:.02em;
  text-transform:none;text-indent:0;color:var(--rl);
}
/* body — regular, readable, one width */
.band-in p,.sect-extra p,.svc-body p,.cdlg-note,.pos-close,.ch-cue{
  font-family:var(--sans);font-weight:400;
  font-size:17px;line-height:1.55;letter-spacing:0;max-width:60ch;
}
/* labels / nav / rails — Archivo 600 caps */
.hdr-nav a,.rail,.rail-top,.hdr-cta,.spec span,.drawer-foot p,
.cdlg .c-k,.ch-no,.stop-no,.stop-t,.foot-col h3,.svc-item summary{
  font-family:var(--sans);font-weight:600;
  font-size:12px;line-height:1.4;letter-spacing:.08em;text-indent:0;text-transform:uppercase;
}
.svc-item summary{font-size:13px}
.capture input[type=tel]::placeholder{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
#submit{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em}
/* meta / fine */
.foot-col a,.foot-col li,.foot-say{font-family:var(--sans);font-weight:400;font-size:13px;line-height:1.6}
.fine,.consent span{font-family:var(--sans);font-weight:400;font-size:12px}
.cdlg-rows .c-v{font-family:var(--sans);font-weight:400;font-size:14px}
.ch-name{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:0;text-transform:none}
.drawer a,.drawer .drawer-consult{font-family:var(--sans);font-weight:500;letter-spacing:0}

/* ═══ THE UNIFIED CTA — amber, arrow IN FRONT, one component everywhere.
      States per the Interactive-Components reference: rest, hover (arrow
      nudges, underline thickens), focus, press. ═══ */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:13px;line-height:1.4;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--ac,#D98F4F);background:transparent;border:none;cursor:pointer;
  padding:6px 2px;border-bottom:1px solid rgba(217,143,79,.45);
  transition:border-color .3s var(--e-settle),color .3s var(--e-settle);
}
.cta:hover,.cta:focus-visible{border-bottom-color:var(--ac);color:var(--c-display)}
.cta:focus-visible{outline:1px solid var(--hair);outline-offset:4px}
.cta:active{transform:translateY(1px)}
.cta-arw{color:var(--ac,#D98F4F);transition:transform .35s var(--e-spring);font-weight:400}
.cta:hover .cta-arw{transform:translateX(5px)}
.cta-sm{font-size:12px}
.consult-row{margin-top:var(--s6)}

/* ═══ THE NOTE CARD — an instrument, not text on a page. Big numerals warm
      to amber as their meter lights; generous rhythm; hairline structure. ═══ */
.notecard{display:flex;flex-direction:column;gap:0}
.notecard .ch{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;
  column-gap:clamp(20px,3vw,44px);align-items:start;
  padding:var(--s6) 0;border-bottom:1px solid var(--hair);position:relative;
}
.notecard .ch:first-child{border-top:1px solid var(--hair)}
.nc-num{
  grid-row:1 / span 4;
  font-family:var(--black);font-size:clamp(56px,6vw,96px);line-height:.9;
  color:var(--t4);transition:color .8s var(--e-settle);
}
.notecard .ch.on .nc-num{color:var(--ac)}
.notecard .ch-no{grid-column:2;margin-bottom:var(--s3);color:var(--rl)}
.notecard .ch-meter{grid-column:2;width:min(420px,100%);margin:0 0 var(--s3)}
.notecard .ch-text{grid-column:2;display:block}
.notecard .ch-name{margin-bottom:4px}
@media (max-width:700px){
  .notecard .ch{column-gap:16px}
  .nc-num{font-size:44px}
}

/* the five categories — a bold numbered strip in the same language */
.transport .stop-no{font-family:var(--black);font-size:22px;color:var(--t4);letter-spacing:0}
.transport .stop-t{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:none;margin-top:6px}

/* ═══ DECK TRANSITIONS — sections slide over one another (the Parallax
      Transitions reference translated to scroll): overlap + top radius +
      deep shadow, media and copy riding different timeline ranges. ═══ */
.sect{position:relative;background:var(--t2)}
main .sect{
  margin-top:-9svh;border-radius:26px 26px 0 0;overflow:hidden;
  box-shadow:0 -28px 60px rgba(0,0,0,.45);
}
main .sect:first-of-type{margin-top:0;border-radius:0;box-shadow:none}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .band-media img{
      animation:band-settle linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    .band-in{
      animation:copy-drift linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 45%;   /* copy travels faster than its image — the parallax seam */
    }
  }
}
/* the build slows to reading beats: eyebrow → headline → body → CTA */
.rvv{transition-delay:calc(var(--sd,0)*.18s)}
.band-copy .cta.rvv,.sect-extra .cta.rvv{transition-delay:calc(var(--sd,0)*.18s + .25s)}

/* ═══ TYPE-SPEC v4 — SWITZER (SCRUM-1865, 2026-09-26). Trumaine: "calmer, with
      a little more style, maybe Helvetica or a popular font… not the regular,
      out-of-the-box choice." Switzer (Fontshare FFL, self-hosted variable
      100–900) replaces Archivo as THE information family. The bold-header /
      light-body structure he approved stays — same ramp, new voice. The v3
      rules read var(--sans)/var(--black), so the token flip carries them. ═══ */
:root{
  --sans:"Switzer","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --black:"Switzer","Helvetica Neue",sans-serif;
}
/* weight patches — roles that leaned on Archivo Black's single weight */
h2,.cdlg-title{font-weight:800;letter-spacing:-.015em}
.nc-num{font-weight:800}
.transport .stop-no{font-weight:800}
h3,.pos-title,.meter-title{font-weight:700}

/* THE HERO — Musical Notes steps out of the script into the calm bold voice
   (note 2); the night-of line becomes a true SUBTITLE, non-cursive, tight
   beneath it (note 1). */
.hero h1,.section-hero h1{
  font-family:var(--sans);font-weight:800;
  font-size:clamp(46px,6.4vw + 14px,108px);line-height:.98;
  letter-spacing:-.02em;color:var(--c-display);margin:.04em 0 0;
}
.hero .lede{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(13px,.4vw + 11px,16px);line-height:1.5;
  letter-spacing:.17em;text-indent:.02em;text-transform:uppercase;
  color:var(--c-rail);margin-top:var(--s3);max-width:none;
}

/* THE RESPONSIVE HEADER (note 7) — one menu per viewport, never both. */
.hdr-nav{margin-left:auto}
.hdr-tools{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.hdr-nav ~ .hdr-tools{margin-left:clamp(16px,2vw,30px)}
.burger{display:none}
@media (max-width:880px){
  .hdr-nav{display:none}
  .hdr-cta{display:none}          /* Reserve lives in the drawer on phones */
  .hdr-nav ~ .hdr-tools{margin-left:auto}   /* must out-rank the desktop gap rule, or the menu button floats mid-header */
  .burger{display:block}
}
@media (min-width:881px){
  .drawer{display:none}
}


/* THE NOTE METER, compact (addendum: "still takes up a lot of real estate…
   I don't even know what it's supposed to be saying"). Three movements read
   ACROSS the room: numeral + label + one plain sentence + a slim meter that
   fills as you scroll. Meter lengths ascend top → base because that is the
   claim: the base note lives longest on the skin. */
.meter-title{margin:0 0 var(--s3)}
.meter-sub{max-width:52ch;margin:0 0 var(--s6)}
.channels.notecard{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,52px)}
.notecard .ch{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto;column-gap:clamp(12px,1.4vw,20px);
  padding:var(--s5) 0 0;border-top:1px solid var(--hair);border-bottom:0;align-items:start;
}
.notecard .ch:first-child{border-top:1px solid var(--hair)}
.notecard .nc-num{
  grid-row:1;font-size:clamp(26px,2vw,36px);line-height:1;
  color:var(--t4);transition:color .8s var(--e-settle);
}
.notecard .ch.on .nc-num{color:var(--ac)}
.notecard .ch-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.notecard .ch-no{margin:2px 0 2px;color:var(--rl)}
.notecard .ch-name{margin:0}
.notecard .ch-cue{color:var(--fg)}
.notecard .ch-meter{
  display:flex;flex-direction:row;gap:3px;height:auto;width:100%;
  margin-top:var(--s3);padding:0;border:0;
}
.notecard .ch-seg{height:5px}
@media (max-width:900px){
  .channels.notecard{grid-template-columns:1fr;gap:0}
  .notecard .ch{padding:var(--s4) 0;border-bottom:0}
  .notecard .ch + .ch{border-top:1px solid var(--hair)}
}

/* THE DECK (note 4) — each section PINS as its end arrives, and the next one
   slides over it like a card; the covered scene dims behind a veil. The pin
   is position:sticky with a JS-computed top (variable heights); the veil
   opacity rides the incoming section's travel. Reduced motion: normal flow. */
main .sect{margin-top:0}
.sect-veil{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--t0);opacity:0;
}
.foot{position:relative;border-radius:26px 26px 0 0;box-shadow:0 -28px 60px rgba(0,0,0,.45)}
/* the copy no longer fades as ONE block (note 8): the container animation is
   retired; the per-element beats own the build. The image keeps its settle. */
@supports (animation-timeline: view()){
  .band-in{animation:none}
}
/* the scrim fades with its image — a hard scrim rectangle below the masked
   photograph read as a two-tone seam above the footer (caught 2026-09-26) */
.band-media::after{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}

/* ═══ v4.1 — THE ACCEPTANCE ROUND (SCRUM-1866, 2026-09-27). His notes on the
      nine-note ship: one size down and thinner on display; nav + sound ride
      the thin voice (the PRESENTS look) while headings keep the bold; the
      splash seal shrinks and gains an engraved perimeter; Tap to enter sits
      under the circle and lands last; the view-timeline image motion retires
      (it froze while a section was pinned, then snapped on unpin — the
      scroll-up glitch he saw at Straight Razor). ═══ */

/* display: one step down, 800 → 700 — still the bold thicker version of the
   one family against the 400 body */
h2,.cdlg-title{font-weight:700;font-size:clamp(30px,2.2vw + 16px,46px)}
.hero h1,.section-hero h1{font-weight:700;font-size:clamp(40px,5.4vw + 12px,92px)}
h3,.pos-title,.meter-title{font-weight:650}
.nc-num,.transport .stop-no{font-weight:700}

/* nav: the thin body voice, tracked caps — the PRESENTS register */
.hdr-nav a{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.16em}
.hdr-cta{font-weight:500}

/* the scroll-up glitch: a view() timeline freezes while its section is
   pinned and snaps on unpin. The frame-loop drift in app.js owns image
   parallax now — it reads live rects and cannot snap. */
@supports (animation-timeline: view()){
  .band-media img{animation:none}
  .band-in{animation:none}
}

/* THE SEAL — smaller ring, an engraved curve around the perimeter (EST · 2026
   on the top arc), everything centered on one axis. */
.enter .seal{
  display:flex;align-items:center;justify-content:center;position:relative;
  margin-top:calc(var(--ed) * .62);width:auto;max-width:none;gap:0;
}
.enter .ring{width:max(26px,calc(var(--ed) * .62));height:max(26px,calc(var(--ed) * .62))}
.enter .seal-arc{
  position:absolute;left:50%;top:50%;
  width:max(56px,calc(var(--ed) * 1.34));height:max(56px,calc(var(--ed) * 1.34));
  transform:translate(-50%,-50%);
  color:var(--c-rail);opacity:0;transition:opacity 1s var(--e-settle);
  pointer-events:none;
}
.enter.ready .seal-arc{opacity:1}
.seal-arc-t{
  font-family:var(--display-face);font-size:7.2px;letter-spacing:2.1px;
  fill:currentColor;
}
/* the enter line: only the action, small, under the circle, LAST to arrive */
.enter-go{
  margin-top:calc(var(--ed) * .58);
  font-size:max(8px,calc(var(--ed) * .16));
  opacity:0;translate:0 14px;pointer-events:none;
  transition:opacity .8s var(--e-settle),translate .9s var(--e-spring),color .3s var(--e-settle);
}
.enter.ready .enter-go{opacity:1;translate:0 0;pointer-events:auto;transition-delay:.5s,.5s,0s}
/* the vessel leaves softly at the handoff cut — no hard flash */
.enter .vessel{transition:opacity .38s var(--e-settle)}
.enter .vessel.land{transition:transform 1.05s var(--e-sweep),opacity .38s var(--e-settle)}

/* ═══ LAYERED PARALLAX — THE LIVING BACKGROUND (SCRUM-1867, 2026-09-27).
      Trumaine: "bring the background to life." Three depths per band, all
      driven by the frame loop (deck-safe, view-timeline stays retired):
      the IMAGE drifts slow (back), a warm LIGHT travels across the scene
      (mid), and a faint field of AIR motes rides in front (front). The copy
      moves at page speed — the fourth depth. References: his Parallax Scroll
      Effect file + Apple AirPods Parallax + SAFARI 3D Scroll Magic (see
      docs/DESIGN-REFERENCES.md). ═══ */
.band-media,.hero-media{z-index:0}          /* contain the layers below the copy */
.band-media::after{z-index:4}               /* the scrim stays above the motes */
.plx-light,.plx-air{position:absolute;left:0;right:0;pointer-events:none;will-change:transform}
.plx-light{
  top:-14%;bottom:-14%;z-index:2;
  background:radial-gradient(44% 36% at 62% 40%, rgba(217,143,79,.16), rgba(217,143,79,0) 72%);
  mix-blend-mode:screen;
}
.plx-air{
  top:-18%;bottom:-18%;z-index:3;opacity:.12;filter:blur(.6px);
  background-image:
    radial-gradient(3px 3px at 18% 32%, rgba(238,233,223,.55), transparent 65%),
    radial-gradient(2px 2px at 64% 12%, rgba(238,233,223,.45), transparent 65%),
    radial-gradient(2.5px 2.5px at 83% 57%, rgba(217,143,79,.4), transparent 65%),
    radial-gradient(2px 2px at 37% 76%, rgba(238,233,223,.4), transparent 65%),
    radial-gradient(3px 3px at 52% 46%, rgba(238,233,223,.32), transparent 65%),
    radial-gradient(2px 2px at 8% 88%, rgba(238,233,223,.35), transparent 65%);
  background-size:620px 620px;background-repeat:repeat;
}
/* the layers respect the band's vertical fade so nothing pokes past a seam */
.band-media .plx-light,.band-media .plx-air{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
/* deeper image travel needs more overscan than the old 12% */
.band-media img{height:124%}
@media (prefers-reduced-motion:reduce){ .plx-air{display:none} }

/* ═══ v4.2 — the mid-turn notes (2026-09-27, SCRUM-1866/1867/1868). ═══ */

/* THE HERO TITLE returns to the script voice — the splash tag's face
   ("the font that was used for Self-Care on the homepage"). */
.hero h1,.section-hero h1{
  font-family:var(--script);font-weight:400;
  font-size:clamp(64px,8vw + 18px,150px);line-height:.84;
  letter-spacing:.005em;margin:.02em 0 0;
}

/* TAP TO ENTER rounds the BOTTOM arc of the seal; the button becomes a
   circular hotspot over the circle. It still animates LAST. */
.seal-go-t{opacity:0;transition:opacity .9s var(--e-settle) .55s}
.enter.ready .seal-go-t{opacity:1}
.enter .seal .enter-go{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(56px,calc(var(--ed) * 1.34));height:max(56px,calc(var(--ed) * 1.34));
  border-radius:50%;margin:0;padding:0;background:none;border:none;cursor:pointer;
  opacity:0;translate:none;pointer-events:none;transition:none;
}
.enter.ready .seal .enter-go{opacity:1;pointer-events:auto}
.enter .seal .enter-go:focus-visible{outline:1px solid var(--c-hair);outline-offset:3px}
.enter.ready .seal:hover .seal-arc{color:var(--c-display)}

/* THE DIALOG, streamlined: no headline, no explainer, one bold voice, and
   the rows + capture share the same edges on every width. */
.cdlg-eyebrow{font-size:15px;margin-bottom:var(--s4)}
.cdlg .c-k{color:var(--rl)}
.cdlg-rows .c-v{font-weight:380}
.cdlg .consent span{font-weight:380}
.cdlg .capture{max-width:none;margin-top:var(--s5)}

/* THE LIVING BACKGROUND, amplified — the first cut measured as moving but
   read as static to the operator's eye. Depth is now unmistakable, and the
   motes float on their own time so the scene lives even at rest. */
.band-media img{height:134%}
.plx-light{background:radial-gradient(50% 42% at 62% 40%, rgba(217,143,79,.30), rgba(217,143,79,0) 74%)}
.plx-air{
  opacity:.24;filter:blur(.7px);
  background-image:
    radial-gradient(4.5px 4.5px at 18% 32%, rgba(238,233,223,.6), transparent 62%),
    radial-gradient(3px 3px at 64% 12%, rgba(238,233,223,.5), transparent 62%),
    radial-gradient(4px 4px at 83% 57%, rgba(217,143,79,.45), transparent 62%),
    radial-gradient(3px 3px at 37% 76%, rgba(238,233,223,.45), transparent 62%),
    radial-gradient(4.5px 4.5px at 52% 46%, rgba(238,233,223,.38), transparent 62%),
    radial-gradient(3px 3px at 8% 88%, rgba(238,233,223,.4), transparent 62%);
  background-size:620px 620px;background-repeat:repeat;
}
@media (prefers-reduced-motion:no-preference){
  .plx-air{animation:pg-drift 38s linear infinite}
  @keyframes pg-drift{from{background-position:0 0}to{background-position:0 -620px}}
}

/* ═══ v4.3 — THE MOBILE ROUND (SCRUM-1869, 2026-09-27). His six notes. ═══ */

/* 1 · THE PHONE SEES THE FAUCET. The hero photograph's subject lives in the
   left third; a portrait crop centered at 50% cuts it out of frame. */
@media (max-width:760px){
  .hero-media img{object-position:18% 50%}
}

/* 2 · SMOKE RIDES THE SCROLL on the hero — soft blurred wisps that drift on
   their own time AND translate with the scroll (layer added by initParallax). */
.plx-smoke{
  position:absolute;inset:-20% -10%;z-index:2;pointer-events:none;will-change:transform;
  background:
    radial-gradient(42% 30% at 30% 42%, rgba(238,233,223,.11), transparent 70%),
    radial-gradient(30% 22% at 46% 28%, rgba(238,233,223,.08), transparent 70%);
  filter:blur(26px);mix-blend-mode:screen;
}
@media (prefers-reduced-motion:no-preference){
  .plx-smoke{animation:pg-smoke 26s ease-in-out infinite alternate}
  @keyframes pg-smoke{from{transform:translate3d(-2%,1%,0) scale(1)}to{transform:translate3d(3%,-3%,0) scale(1.06)}}
}
@media (prefers-reduced-motion:reduce){ .plx-smoke{display:none} }

/* 3 · THE DRAWER: nothing peeks beneath it. */
@media (max-width:880px){
  .drawer{background:var(--t1)}
  .drawer-panel{min-height:100dvh}
}

/* 4 · THE FOOTER, centered and structured on phones. */
@media (max-width:760px){
  .foot-cols{grid-template-columns:1fr;gap:30px;text-align:center}
  .foot-col ul{align-items:center}
  .foot-say{margin:0 auto;max-width:34ch}
  .foot-col .cta{justify-content:center}
  .foot-base{flex-direction:column;align-items:center;text-align:center;gap:8px}
}

/* 5 · THE BODY, one step thinner (his: "a little thinner in the body"). */
.band-in p,.sect-extra p,.svc-body p,.pos-close,.ch-cue{font-weight:360}

/* 6 · THE TITLE HOLDS ITS SUBTITLE CLOSE. */
.hero .lede{margin-top:0}

/* ═══ v4.4 — DYNAMICS + ROOM (SCRUM-1870, 2026-09-27). His notes: the motion
      still reads subtle; mobile must slide like desktop; the blocks breathe;
      the pour is ONE orange — the Reserve border amber. ═══ */

/* movements, one level up — every reveal travels further and the covered
   card dims deeper */
.rvv{translate:0 46px;transition-duration:.7s,.95s}
.sect-veil{background:var(--t0)}
/* body copy, one point down (16px holds the readable floor) */
.band-in p,.sect-extra p,.svc-body p,.pos-close,.ch-cue{font-size:16px}

/* room between the blocks — the meter, the categories, the accordion */
.sect-extra{padding-block:var(--s8)}
.meter-sub{margin-bottom:var(--s7)}
.svc{margin-top:var(--s5)}
.channels.notecard{margin-bottom:var(--s4)}

/* the category strip tells you it slides (mobile) — an edge fade plus one
   entrance nudge; the layout stays exactly as it is */
@media (max-width:760px){
  .transport{
    -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
  }
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .transport.in-nudge .transport-track{animation:pg-nudge 1.2s var(--e-settle) .5s 1}
  @keyframes pg-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(-42px)}}
}

/* the footer carries the address ONCE — three columns now */
.foot-cols{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){ .foot-cols{grid-template-columns:1fr} }

/* the splash seal ring warms to match the amber landing */
.enter.ready .ring{border-color:rgba(217,143,79,.5)}