/* ===========================================================
   SAINT / Kingdoms Created
   Visual system v2. Direction: SUN AND STONE.
   Palette sampled from Saint's own photography, not invented.
   Light for most of the journey; evening used deliberately, twice.
   =========================================================== */

:root{
  /* --- daylight canvas, the majority of the site --- */
  --shell:#FCF8F1;          /* warm bright cream */
  --coquina:#F2E9DA;        /* sunlit stone */
  --stone:#E5D9C6;
  --stone-line:#D6C7AE;

  /* --- the cool note. Saint's real linen and sky. --- */
  --linen:#C4CFE7;          /* the actual napkin blue */
  --linen-soft:#E4EAF5;
  --sky:#A9C6DE;
  --sky-deep:#4E739A;       /* text-safe blue */

  /* --- warmth --- */
  --terra:#B8573A;          /* brick paver, saturated to life */
  --terra-hi:#CE6743;
  --terra-soft:rgba(184,87,58,.10);
  --gold:#C08A34;           /* restrained. edges and rules only. */
  --gold-soft:rgba(192,138,52,.18);
  --wood:#8A5A36;
  --palm:#4E6B3C;

  /* --- evening, used twice on purpose --- */
  --walnut:#1F1813;
  --ember:#2B211A;
  --night-line:rgba(244,237,225,.16);

  /* --- ink --- */
  --ink:#221A13;
  --ink-2:#6A5B4C;
  --ink-inv:#FBF6EC;
  --ink-inv-2:#C9B9A4;

  /* --- roles --- */
  --canvas:var(--shell); --fg:var(--ink); --fg-2:var(--ink-2);
  --accent:var(--terra); --accent-hover:var(--terra-hi);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --tshadow:0 1px 2px rgba(14,9,5,.9),0 3px 14px rgba(14,9,5,.72),0 12px 48px rgba(14,9,5,.72);
  --gut:clamp(20px,5.2vw,84px);
  --maxw:1400px;
  --rule:1px solid var(--stone-line);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--fg);
  font-family:"Jost",system-ui,-apple-system,sans-serif;font-weight:300;
  font-size:clamp(16px,1.04vw,18.5px);line-height:1.62;letter-spacing:.005em;
  transition:background-color 1.1s var(--ease),color 1.1s var(--ease)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:400;line-height:1}
p{margin:0 0 1.05em}
a{color:inherit}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--walnut);color:var(--ink-inv);padding:12px 18px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* one environment layer, sunlight rather than murk */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 76% at 8% -4%,rgba(192,138,52,.11),transparent 58%),
    radial-gradient(96% 66% at 96% 8%,rgba(169,198,222,.16),transparent 62%),
    radial-gradient(80% 60% at 50% 108%,rgba(184,87,58,.07),transparent 60%);
  animation:envDrift 84s var(--ease) -20s infinite alternate}
@keyframes envDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2%,0) scale(1.05)}}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);position:relative;z-index:1}
.wrap-narrow{max-width:1080px}
.wrap-center{text-align:center}
.bleed{width:100%;position:relative;z-index:1}

/* ===================== TYPE ===================== */
.mark{font-family:"Jost",system-ui,sans-serif;font-weight:400;letter-spacing:.44em;text-indent:.44em;font-size:.95rem}
.mark-sub{display:block;font-family:"Space Mono",ui-monospace,monospace;font-size:.56rem;letter-spacing:.28em;
  text-indent:.28em;text-transform:uppercase;color:var(--fg-2);margin-top:.55em}
.label{font-family:"Space Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.5em;display:flex;align-items:center;gap:.9em}
.label::after{content:"";flex:1;height:1px;background:var(--stone-line);max-width:120px}
.label-c{justify-content:center}
.label-c::after{display:none}
.kicker{font-family:"Space Mono",ui-monospace,monospace;font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;margin:0 0 1.2em}

/* Bodoni Moda carries every large statement. Italian, editorial, high contrast. */
.h-hero{font-family:"Bodoni Moda",Didot,"Times New Roman",serif;font-weight:400;
  font-size:clamp(3rem,9.4vw,8.6rem);line-height:.92;letter-spacing:-.018em}
.h-xl{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:clamp(2.5rem,6.6vw,5.6rem);line-height:.96;letter-spacing:-.016em}
.h-lg{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:clamp(1.95rem,4.3vw,3.5rem);line-height:1.02;letter-spacing:-.012em}
.h-md{font-family:"Bodoni Moda",Didot,serif;font-weight:400;font-size:clamp(1.5rem,2.8vw,2.35rem);line-height:1.08}
.h-it{font-style:italic}
.lede{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.55;max-width:34ch;color:var(--fg-2)}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px var(--gut);color:var(--ink-inv);
  transition:background-color .55s var(--ease),color .55s var(--ease),padding .55s var(--ease)}
.nav.solid{background:rgba(252,248,241,.93);backdrop-filter:blur(16px);color:var(--ink);
  border-bottom:var(--rule);padding-block:14px}
.nav.solid .mark-sub{color:var(--fg-2)}
.nav-mark{text-decoration:none;text-shadow:var(--tshadow)}
.nav.solid .nav-mark,.nav.solid .nav-links a{text-shadow:none}
.nav-links{display:flex;gap:28px;font-family:"Space Mono",ui-monospace,monospace;font-size:.63rem;
  letter-spacing:.2em;text-transform:uppercase}
.nav-links a{text-decoration:none;opacity:.84;transition:opacity .35s var(--ease);text-shadow:var(--tshadow);
  padding-block:4px;border-bottom:1px solid transparent}
.nav-links a:hover{opacity:1;border-bottom-color:currentColor}
@media (max-width:980px){.nav-links{display:none}}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;gap:.85em;font-family:"Space Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border-radius:0;position:relative;overflow:hidden;
  background:var(--accent);color:#FFF8F0;text-shadow:none;border:1px solid var(--accent);
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease);z-index:-1}
.btn:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn:hover::before{transform:scaleY(1)}
.btn span{position:relative}
.btn-arrow::after{content:"";width:18px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.btn:hover .btn-arrow::after,.btn-arrow:hover::after{width:26px}
.btn-sm{padding:11px 20px;font-size:.6rem}
.btn-lg{padding:20px 44px;font-size:.74rem}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--stone-line)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--ink-inv)}
/* 2026-09-18: a ghost button inside a dark section inherited the light-page ink and vanished
   (dinner "View Dinner Menu" card, bar "View Cocktail & Wine List"). Dark sections now get the
   night treatment automatically, so no page has to remember to switch classes. */
.sec-night .btn-ghost{color:var(--ink-inv);border-color:var(--night-line)}
.sec-night .btn-ghost::before{background:var(--gold)}
.sec-night .btn-ghost:hover{color:var(--walnut);border-color:var(--gold)}
.btn-night{background:transparent;color:var(--ink-inv);border-color:var(--night-line)}
.btn-night::before{background:var(--gold)}
.btn-night:hover{color:var(--walnut);border-color:var(--gold)}
@media (pointer:coarse){.btn{min-height:44px;justify-content:center}}

/* ===================== HERO (natural autoplay, no scroll-scrub) =====================
   The homepage Courtyard hero plays the source video naturally (autoplay,
   muted, loop, playsinline) rather than being scroll-scrubbed - the tall
   400vh scroll range and sticky stage that the old scrub engine needed
   have been retired along with it. Dinner's chicken-parm section still
   uses the shared saintCreateScrollScrub() engine below unchanged. */
.hero{position:relative;height:100vh;height:100svh;z-index:1}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--walnut)}
.poster,#hero{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:50% 50%}
#hero{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero{opacity:1}
.stage.video-failed #hero{display:none}
/* 2026-09-19: the hero plays once and comes to rest. The still of the video's own
   final frame is painted into .poster FIRST, while the opaque video still covers it,
   and only then does the video fade out over an identical picture - so the hand-off
   shows no black frame, flash or jump. These rules sit after .video-ready on purpose:
   equal specificity, later in source, so resting always wins. hero-rest-done drops
   the element once the fade is over, which releases the decoder and removes any
   chance of a dropped video surface painting black over the still. */
.stage.hero-rest #hero{opacity:0}
.stage.hero-rest-done #hero{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(12,8,5,.46) 0%,rgba(12,8,5,0) 26%,rgba(12,8,5,0) 62%,rgba(12,8,5,.52) 100%),
    radial-gradient(ellipse 124% 92% at 50% 46%,rgba(12,8,5,0) 38%,rgba(12,8,5,.5) 100%)}
.ring{position:absolute;right:var(--gut);bottom:var(--gut);width:32px;height:32px;color:rgba(251,246,236,.85);
  transform:rotate(-90deg);transition:opacity .5s var(--ease)}
.ring.done{opacity:0}

.bands{position:absolute;inset:0;color:var(--ink-inv);pointer-events:none}
.band{position:absolute;left:var(--gut);right:var(--gut);top:50%;transform:translateY(-50%);
  max-width:min(900px,76vw);opacity:0;text-shadow:var(--tshadow)}
.band::before{content:"";position:absolute;inset:-16% -12%;pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 76% 64% at 42% 50%,rgba(8,5,3,.66) 0%,rgba(8,5,3,.44) 46%,rgba(8,5,3,0) 76%)}
.band .btn{text-shadow:none;pointer-events:auto}
.band-settle{text-align:center;left:0;right:0;max-width:none;padding-inline:var(--gut)}
.band-settle::before{inset:-20% -4%;background:radial-gradient(ellipse 68% 60% at 50% 46%,rgba(8,5,3,.70) 0%,rgba(8,5,3,.48) 46%,rgba(8,5,3,0) 76%)}
.settle-sub{font-family:"Space Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;margin:1.5em 0 2.1em;color:var(--ink-inv-2)}
.settle-cta{pointer-events:auto}
.hero-rule{width:64px;height:1px;background:var(--gold);margin:1.4em 0 0}
.band-settle .hero-rule{margin-inline:auto}

.w{display:inline-block;white-space:pre}
.c{display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

[data-entrance="rise"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*30px))}
[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-30px))}
[data-entrance="blur"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);
  transform:scale(calc(.93 + .07*var(--kc)))}
[data-entrance="settle"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*24px))}
[data-entrance="settle"] .hero-rule{--kr:clamp(0,(var(--k,0) - .5)*4,1);transform:scaleX(var(--kr));transform-origin:center}
[data-entrance="settle"] .settle-sub{--ks:clamp(0,(var(--k,0) - .6)*4,1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px))}
[data-entrance="settle"] .settle-cta{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*14px))}
[data-entrance="settle"] .kicker{--ka:clamp(0,var(--k,0)*3,1);opacity:var(--ka)}

.cue{position:absolute;left:50%;bottom:28px;width:1px;height:58px;
  background:linear-gradient(rgba(251,246,236,0),rgba(251,246,236,.8));transform:translateX(-50%);opacity:.75}
.cue span{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--gold);
  animation:cueFall 3s var(--ease) -.6s infinite}
@keyframes cueFall{0%{transform:translateY(0);opacity:0}18%{opacity:1}100%{transform:translateY(54px);opacity:0}}
@media (max-height:560px){.cue,.ring{display:none}}

/* ===================== SECTION RHYTHM ===================== */
.sec{position:relative;z-index:1;padding:clamp(84px,13vh,190px) 0}
.sec-tight{padding-block:clamp(56px,8vh,110px)}
.sec-shell{background:var(--shell)}
.sec-coquina{background:var(--coquina)}
.sec-stone{background:var(--stone)}
.sec-linen{background:var(--linen-soft)}
.sec-night{background:var(--walnut);color:var(--ink-inv)}
.sec-night .label{color:var(--gold)}
.sec-night .label::after{background:var(--night-line)}
.sec-night .lede,.sec-night figcaption{color:var(--ink-inv-2)}
.sec-night .facts>div{border-color:var(--night-line)}
.sec-night .facts dt{color:var(--ink-inv-2)}

/* a hairline that draws itself, used as a section joint */
.joint{height:1px;background:var(--stone-line);transform:scaleX(0);transform-origin:left;
  transition:transform 1.6s var(--ease-out)}
.reveal.in .joint,.joint.in{transform:scaleX(1)}

/* ===================== EDITORIAL LAYOUT KIT ===================== */
/* full-bleed photograph band with type living on it */
.plate{position:relative;min-height:clamp(520px,86vh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--walnut)}
/* media resilience (2026-09-18): a failed <img> and its frame collapse instead of reserving
   an empty aspect-ratio box; a plate falls back to its walnut background behind the copy. */
.img-failed{display:none!important}
.overlap-img.img-failed+.overlap-card{margin-top:0}
.plate-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.1) translateY(var(--par,0px));will-change:transform}
.plate-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,10,6,.74) 0%,rgba(16,10,6,.22) 42%,rgba(16,10,6,0) 72%)}
.plate-veil-l{background:linear-gradient(to right,rgba(16,10,6,.76) 0%,rgba(16,10,6,.3) 44%,rgba(16,10,6,0) 76%)}
.plate-body{position:relative;z-index:2;color:var(--ink-inv);padding:clamp(34px,6vw,86px) var(--gut);
  max-width:min(860px,84vw);text-shadow:var(--tshadow)}
.plate-body .label{color:var(--gold)}
.plate-body .label::after{background:var(--night-line)}
.plate-tall{min-height:clamp(600px,100svh,1100px);align-items:center}

/* asymmetric overlap: image bleeds one edge, a card overlaps it */
.overlap{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;gap:0}
/* 2026-09-18: the two children never shared a row - without an explicit grid-row the card was
   auto-placed on a second row (columns 7-13), leaving an empty half-row beside it and a section
   1,300px tall at desktop. Both now sit on row 1 and overlap as the comment above describes. */
.overlap-img{grid-column:1 / 9;grid-row:1;position:relative;overflow:hidden}
.overlap-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transform:scale(1.06) translateY(var(--par,0px))}
/* 2026-09-19: portrait photographs (the rooftop server) keep their own 4/5 instead of the
   4/3 crop, so nothing above the shoulders is lost. */
.overlap-img.portrait img{aspect-ratio:4/5}
.overlap-card{grid-column:7 / 13;grid-row:1;position:relative;z-index:3;background:var(--shell);
  padding:clamp(30px,4vw,64px);box-shadow:0 40px 90px -50px rgba(34,26,19,.55);border-top:2px solid var(--terra)}
.overlap-rev .overlap-img{grid-column:5 / 13;order:2}
.overlap-rev .overlap-card{grid-column:1 / 7;order:1;border-top-color:var(--gold)}
.sec-night .overlap-card{background:var(--ember);box-shadow:none;border-top-color:var(--gold)}
@media (max-width:900px){
  .overlap{grid-template-columns:1fr}
  .overlap-img,.overlap-card,.overlap-rev .overlap-img,.overlap-rev .overlap-card{grid-column:1;grid-row:auto;order:0}
  .overlap-card{margin:-40px var(--gut) 0;padding:28px}
}

/* oversized portrait pair, offset */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,46px);align-items:start}
.duo figure:nth-child(2){margin-top:clamp(40px,9vw,140px)}
.duo img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (max-width:720px){.duo{grid-template-columns:1fr}.duo figure:nth-child(2){margin-top:0}}

figure{margin:0}
figcaption{font-family:"Space Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-2);margin-top:1em;display:flex;gap:.8em;align-items:center}
figcaption::before{content:"";width:22px;height:1px;background:var(--gold);flex:none}

/* masked image reveal */
.mask{overflow:hidden}
.mask img{transform:scale(1.14);transition:transform 1.8s var(--ease-out),clip-path 1.4s var(--ease-out)}
.reveal.in .mask img{transform:scale(1)}

/* the signature: Saint's arcade arch, drawn on scroll */
.arch{position:absolute;inset:-3% -4% auto -4%;height:108%;color:var(--gold);z-index:2;pointer-events:none;opacity:.65}
.arch svg{width:100%;height:100%}
.arch-line{stroke-dasharray:1700;stroke-dashoffset:1700;transition:stroke-dashoffset 2.4s var(--ease-out)}
.reveal.in .arch-line{stroke-dashoffset:0}
.arch-night{color:var(--gold);opacity:.5}

/* ===================== ROOMS: pinned cinematic sequence ===================== */
.rooms{position:relative;height:340vh;background:var(--walnut);color:var(--ink-inv);z-index:1}
.rooms-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;
  grid-template-columns:1fr min(46%,620px);align-items:stretch}
.rooms-media{position:relative;overflow:hidden;grid-column:1/-1;grid-row:1}
.room-shot{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.room-shot img{width:100%;height:100%;object-fit:cover;transform:scale(var(--rs,1.08));transition:transform 1.6s var(--ease)}
.room-shot.on{opacity:1}
.rooms-veil{position:absolute;inset:0;grid-column:1/-1;grid-row:1;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(18,12,8,.86) 0%,rgba(18,12,8,.5) 38%,rgba(18,12,8,.12) 70%)}
.rooms-body{position:relative;z-index:3;grid-column:1/-1;grid-row:1;align-self:center;
  padding:0 var(--gut);max-width:min(700px,80vw);text-shadow:var(--tshadow)}
.rooms-head .label{color:var(--gold)}
.rooms-head .label::after{background:var(--night-line)}
.room-name{position:relative;height:clamp(3.2rem,9vw,7rem)}
.room-name span{position:absolute;inset:0;display:flex;align-items:center;opacity:0;
  transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  font-family:"Bodoni Moda",Didot,serif;font-size:clamp(2.6rem,7.4vw,6rem);line-height:1;white-space:nowrap}
.room-name span.on{opacity:1;transform:none}
.room-note{position:relative;min-height:6.4em;margin-top:1.4em}
.room-note p{position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);max-width:38ch;color:var(--ink-inv-2)}
.room-note p.on{opacity:1;transform:none}
.rooms-index{display:flex;gap:12px;margin-top:2.2em;align-items:center}
.rooms-index i{display:block;width:46px;height:2px;background:var(--night-line);position:relative;overflow:hidden}
.rooms-index i::after{content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(var(--p,0));transform-origin:left}
.rooms-count{font-family:"Space Mono",ui-monospace,monospace;font-size:.62rem;letter-spacing:.2em;color:var(--ink-inv-2)}
@media (max-width:820px){
  .rooms{height:300vh}
  .rooms-veil{background:linear-gradient(to top,rgba(18,12,8,.9) 0%,rgba(18,12,8,.5) 46%,rgba(18,12,8,.16) 80%)}
  .rooms-body{align-self:end;padding-bottom:clamp(40px,9vh,90px);max-width:none}
}

/* ===================== MOTION SLOT (marks a planned cinematic moment) ===================== */
.slot{position:relative}
.slot::after{content:none}

/* ===================== TABLE (food) ===================== */
.menu-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.8vw,26px)}
.menu-grid figure{position:relative;overflow:hidden}
.menu-grid img{width:100%;height:100%;object-fit:cover}
.m-hero{grid-column:span 7;aspect-ratio:4/5}
.m-tall{grid-column:span 5;aspect-ratio:4/5}
.m-wide{grid-column:span 5;aspect-ratio:1/1}
.m-sm{grid-column:span 4;aspect-ratio:3/4}
.m-off{grid-column:span 3;aspect-ratio:3/4;align-self:end}
@media (max-width:820px){.menu-grid{grid-template-columns:repeat(2,1fr)}
  .m-hero,.m-tall,.m-wide,.m-sm,.m-off{grid-column:span 1;aspect-ratio:3/4}
  /* 2026-09-18: a five-figure grid left its last photograph alone beside an empty cell on
     two-column layouts (index, dinner). The odd last figure now runs the full row. */
  .menu-grid figure:nth-child(odd):last-child{grid-column:span 2;aspect-ratio:16/10}}
/* 2026-09-19: on phones the food runs one photograph at a time, full width, tall - the
   client wants the plates seen, not thumbnailed in pairs. */
@media (max-width:700px){
  .menu-grid{grid-template-columns:1fr;gap:clamp(14px,4vw,22px)}
  .m-hero,.m-tall,.m-wide,.m-sm,.m-off,.menu-grid figure:nth-child(odd):last-child{grid-column:1;aspect-ratio:4/5}}

/* ===================== SCROLL-SCRUB VIDEO SECTIONS (shared engine, site.js) =====================
   Same shape as the hero: a tall wrapper drives scroll progress, a sticky
   inner stage holds the pinned media. video.currentTime tracks scroll -
   never autoplays, never loops. Poster stays as the permanent base layer;
   the video only fades in once it has real data. Used by Dinner's chicken
   parm section, and any future .scrub-reveal section. */
.scrub-reveal{position:relative;height:280vh;z-index:1}
.scrub-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-end;background:var(--walnut)}
.scrub-poster,.scrub-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scrub-video{opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)}
.scrub-reveal.scrub-ready .scrub-video{opacity:1}
.scrub-reveal.scrub-failed .scrub-video{display:none}
@media (prefers-reduced-motion:reduce){.scrub-reveal{height:100svh}.scrub-stage{position:relative}}

/* ===================== PLAY-ONCE MOTION REVEAL (Rooftop) =====================
   Poster <img> is the permanent base layer (zero JS dependency = zero blank-media risk).
   <video> is layered on top at opacity 0 and only faded in once it has actually started
   playing. Never loops; holds its native last frame after 'ended'. See site.js Section D. */
.motion-reveal .motion-video{opacity:0;transition:opacity 1.1s ease}
.motion-reveal .motion-video.on{opacity:1}
/* 2026-09-19: the motion clip plays once and comes to rest. The still of its own
   final frame is swapped into the .motion-poster FIRST, while the opaque video still
   covers it, and only then does the video fade out over an identical picture - no
   black frame, flash or jump. These rules sit after .on on purpose: equal
   specificity, later in source, so resting always wins. motion-rest-done drops the
   element once the fade is over, releasing the decoder. */
.motion-reveal.motion-rest .motion-video{opacity:0}
.motion-reveal.motion-rest-done .motion-video{display:none}

/* ===================== FACTS / FOOTER ===================== */
.facts{margin:1.8em 0 0;display:grid;gap:0}
.facts>div{display:grid;grid-template-columns:10rem 1fr;gap:18px;padding:16px 0;border-top:var(--rule);align-items:baseline}
.facts dt{font-family:"Space Mono",ui-monospace,monospace;font-size:.61rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-2)}
.facts dd{margin:0}
@media (max-width:560px){.facts>div{grid-template-columns:1fr;gap:4px}}
/* 2026-09-18: the fixed 10rem term column starved the value column whenever a facts list sat
   in a half-width slot (Visit at 768: list 333px, values 155px wide). Stack the pair when the
   list itself is narrow, whatever the viewport. */
.facts{container-type:inline-size}
@container (max-width:420px){.facts>div{grid-template-columns:1fr;gap:4px}}
/* 2026-09-18: was a label | list grid nested in the story column (list ~280px wide, 1,100px
   tall, ~490px of empty column under the copy). Now sits beneath the story grid as a label
   over two five-row lists; single column under 700px. */
.facts-duo{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,64px);margin-top:clamp(36px,5vw,64px)}
.facts-duo>.label{grid-column:1 / -1;margin-bottom:.4em}
.facts-duo .facts{margin-top:0}
@media (max-width:700px){.facts-duo{grid-template-columns:1fr}.facts-duo .facts+.facts>div:first-child{border-top:0}}
/* 2026-09-19: was a 1/1 crop that cut the server's face off; the photograph is 1080x1350,
   shown whole at its own 4/5. */
.story-figure{width:100%;max-width:440px;aspect-ratio:4/5;object-fit:cover;object-position:50% 0;border-radius:2px}
.story-figure-wrap figcaption{margin-top:.7em;font-size:.78rem;color:var(--fg-2);font-family:"Space Mono",ui-monospace,monospace;letter-spacing:.04em}
.dolci-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px 40px}
.dolci-item h3{font-family:"Bodoni Moda",Didot,serif;font-weight:500;font-size:1.12rem;margin:0 0 .45em}
.dolci-item p{margin:0;color:var(--fg-2);font-size:.92rem;line-height:1.55}
.dolci-item .dolci-price{margin-top:.55em;font-family:"Space Mono",ui-monospace,monospace;font-size:.78rem;color:var(--terra)}
.dolci-gf{font-size:.62em;vertical-align:super;color:var(--fg-2)}

/* ===================== MENUS PAGE ===================== */
.menu-jump{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:1.6em}
.menu-jump a{font-family:"Space Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);border:var(--rule);padding:9px 16px;
  border-radius:999px;transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.menu-jump a:hover,.menu-jump a:focus-visible{color:var(--ink);border-color:var(--terra);background:var(--terra-soft)}
.menu-section{border-top:var(--rule)}
.menu-section:last-of-type{border-bottom:var(--rule)}
.menu-section>summary{cursor:pointer;list-style:none;padding:clamp(22px,3.4vw,34px) 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.menu-section>summary::-webkit-details-marker{display:none}
.menu-section>summary h2{font-family:"Bodoni Moda",Didot,serif;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.1rem);margin:0}
.menu-section>summary .menu-toggle{font-family:"Space Mono",ui-monospace,monospace;font-size:.7rem;
  color:var(--terra);flex-shrink:0;transition:transform .3s var(--ease)}
.menu-section[open]>summary .menu-toggle{transform:rotate(45deg)}
.menu-section>summary:focus-visible{outline:2px solid var(--terra);outline-offset:6px}
.menu-body{padding:0 0 clamp(30px,5vh,60px)}
.menu-sub{font-family:"Space Mono",ui-monospace,monospace;font-size:.62rem;color:var(--fg-2);
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 1.6em}
.menu-cat{font-family:"Bodoni Moda",Didot,serif;font-weight:500;font-style:italic;
  font-size:1.15rem;margin:2.2em 0 1em;color:var(--terra)}
.menu-cat:first-of-type{margin-top:0}
.dish-list{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.dish-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.dish-row h4{font-size:1rem;font-weight:600;margin:0;letter-spacing:.01em}
.dish-row .dish-price{font-family:"Space Mono",ui-monospace,monospace;font-size:.85rem;
  color:var(--terra);white-space:nowrap}
.dish .dish-desc{margin:.35em 0 0;color:var(--fg-2);font-size:.9rem;line-height:1.55;max-width:60ch}
.dish-gf{font-size:.6em;vertical-align:super;color:var(--fg-2)}
.menu-box{border:var(--rule);padding:clamp(18px,3vw,30px);margin:2em 0;text-align:center}
.menu-box h5{font-family:"Space Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .8em}
.menu-box p{margin:0;color:var(--ink-2);font-size:.92rem}
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px}
@media (max-width:700px){.menu-cols{grid-template-columns:1fr}}
.menu-flat{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.9rem;color:var(--ink-2)}
.menu-legal{font-size:.76rem;color:var(--fg-2);line-height:1.6;margin-top:2.4em;max-width:80ch}
.menu-note{font-size:.84rem;color:var(--ink-2);font-style:italic;margin-top:1.6em}
.menu-viewer-link{display:inline-flex;align-items:center;gap:8px;margin-top:2em;
  font-family:"Space Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);border-bottom:1px dashed var(--stone-line)}
.menu-viewer-link:hover{color:var(--terra);border-color:var(--terra)}
.back-to-menus{display:inline-block;margin-top:2.4em;font-family:"Space Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--fg-2)}
.back-to-menus:hover{color:var(--terra)}
.menu-lightbox{position:fixed;inset:0;background:rgba(20,15,10,.92);display:none;
  align-items:center;justify-content:center;z-index:999;padding:4vh 4vw}
.menu-lightbox.open{display:flex}
.menu-lightbox img{max-width:min(720px,92vw);max-height:92vh;object-fit:contain;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.menu-lightbox-close{position:absolute;top:20px;right:24px;background:none;border:1px solid var(--night-line);
  color:var(--ink-inv);width:42px;height:42px;border-radius:50%;font-size:1.2rem;cursor:pointer;line-height:1}
.menu-lightbox-close:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:560px){
  .dish-row{flex-direction:column;gap:2px}
  .dish-row .dish-price{order:-1}
}

.pending{color:var(--fg-2);font-size:.93rem}
.pending-tag{display:inline-block;font-family:"Space Mono",ui-monospace,monospace;font-size:.54rem;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;margin-right:.6em;
  background:var(--terra-soft);border:1px dashed rgba(184,87,58,.5);color:var(--terra)}
.sec-night .pending-tag,.plate-body .pending-tag,.rooms .pending-tag{
  background:var(--gold-soft);border-color:rgba(192,138,52,.5);color:var(--gold)}
.sec-night .pending{color:var(--ink-inv-2)}
.pending-inline{margin:0}

.foot{background:var(--ember);color:var(--ink-inv);padding:clamp(56px,9vh,110px) 0 clamp(28px,4vh,48px);position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.foot h3{font-family:"Space Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.2em;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.foot a{text-decoration:none;color:var(--ink-inv-2);transition:color .3s var(--ease)}
.foot a:hover{color:var(--ink-inv)}
.mark-foot{font-family:"Bodoni Moda",Didot,serif;font-size:clamp(2rem,4vw,3rem);letter-spacing:.12em;margin:0}
.foot-base{margin-top:clamp(36px,6vh,72px);padding-top:24px;border-top:1px solid var(--night-line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.82rem;color:var(--ink-inv-2)}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}}

/* ===================== REVEALS ===================== */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity 1.05s var(--ease-out),transform 1.05s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.menu-grid .reveal:nth-child(2){transition-delay:.08s}
.menu-grid .reveal:nth-child(3){transition-delay:.16s}
.menu-grid .reveal:nth-child(4){transition-delay:.24s}
.menu-grid .reveal:nth-child(5){transition-delay:.32s}
.menu-grid .reveal:nth-child(6){transition-delay:.4s}
.duo .reveal:nth-child(2){transition-delay:.12s}
.menu-grid .reveal.in.done:nth-child(2),.menu-grid .reveal.in.done:nth-child(3),
.menu-grid .reveal.in.done:nth-child(4),.menu-grid .reveal.in.done:nth-child(5),
.menu-grid .reveal.in.done:nth-child(6),.duo .reveal.in.done:nth-child(2){transition-delay:0s!important}

/* ===================== MOBILE NAV ===================== */
.nav-right{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;
  gap:6px;background:transparent;border:1px solid currentColor;cursor:pointer;padding:0;opacity:.6;
  transition:opacity .4s var(--ease)}
.nav-toggle:hover{opacity:1}
.nav-toggle span{display:block;width:17px;height:1px;background:currentColor;
  transition:transform .45s var(--ease)}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:980px){.nav-toggle{display:inline-flex}}
.nav-menu{position:fixed;inset:0;z-index:55;background:rgba(31,24,19,.98);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s var(--ease)}
.nav-menu[hidden]{display:none}
.nav-menu.open{opacity:1}
.nav-menu nav{display:flex;flex-direction:column;gap:2px;text-align:center;padding-inline:var(--gut)}
.nav-menu a{display:block;padding:13px 8px;text-decoration:none;color:var(--ink-inv);
  font-family:"Bodoni Moda",Didot,serif;font-size:clamp(1.7rem,8vw,2.6rem);
  opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s var(--ease)}
.nav-menu.open a{opacity:1;transform:none}
.nav-menu.open a:nth-child(2){transition-delay:.05s}.nav-menu.open a:nth-child(3){transition-delay:.1s}
.nav-menu.open a:nth-child(4){transition-delay:.15s}.nav-menu.open a:nth-child(5){transition-delay:.2s}
.nav-menu.open a:nth-child(6){transition-delay:.25s}.nav-menu.open a:nth-child(7){transition-delay:.3s}
.nav-menu a:hover{color:var(--gold)}
.nav-menu a:last-child{margin-top:.5em;font-family:"Space Mono",ui-monospace,monospace;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
body.menu-open{overflow:hidden;position:fixed;left:0;right:0;width:100%}
.nav-menu{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}

/* ===================== REDUCED-MOTION HERO FALLBACK =====================
   The hero plays naturally on every breakpoint, desktop and mobile alike -
   there is no separate mobile/static hero mode. Only prefers-reduced-motion
   collapses it to a single static frame (the video never autoplays; see
   Section B in site.js). */
@media (prefers-reduced-motion:reduce){.ring,.cue{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .reveal{opacity:1!important;transform:none!important}
  .arch-line{stroke-dashoffset:0!important}
  .joint{transform:scaleX(1)!important}
  .plate-img,.overlap-img img{transform:scale(1.02)!important}
  .mask img{transform:scale(1)!important}
  .room-shot:first-child,.room-name span:first-child,.room-note p:first-child{opacity:1!important;transform:none!important}
  .nav-menu a{opacity:1;transform:none}
  .duo figure:nth-child(2){margin-top:clamp(40px,9vw,140px)}
}
@media (prefers-reduced-motion:reduce) and (max-width:720px){.duo figure:nth-child(2){margin-top:0}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* page-level split layouts collapse cleanly */
@media (max-width:860px){
  .brunch-split{grid-template-columns:1fr!important}
  .brunch-split>div:first-child{padding-block:clamp(70px,12vh,110px)!important}
  .dessert-top{grid-template-columns:1fr!important}
  .intro-grid{grid-template-columns:1fr!important}
}

/* deeper veil for plates whose photograph is bright where the type sits */
.plate-veil-strong{background:
  linear-gradient(to right,rgba(14,9,5,.86) 0%,rgba(14,9,5,.62) 38%,rgba(14,9,5,.18) 72%,rgba(14,9,5,.06) 100%),
  linear-gradient(to bottom,rgba(14,9,5,.42) 0%,rgba(14,9,5,.1) 30%,rgba(14,9,5,0) 60%)}
/* the wordmark sits over unpredictable photography, so it carries its own backing */
.nav:not(.solid) .nav-mark .mark-sub{color:rgba(251,246,236,.94)}
.nav:not(.solid) .nav-mark{text-shadow:0 1px 3px rgba(10,6,3,.95),0 4px 18px rgba(10,6,3,.9),0 10px 40px rgba(10,6,3,.75)}
.nav:not(.solid) .nav-links a{text-shadow:0 1px 3px rgba(10,6,3,.95),0 4px 18px rgba(10,6,3,.85)}

/* ---------- local text scrim: keeps photography bright, keeps type legible ----------
   Law: contrast is measured against the WORST pixel under the text, not the average.
   So the darkening lives under the text block only, with a soft falloff, rather than
   over the whole photograph. */
.plate-body{position:relative;isolation:isolate}
.plate-body::before{content:"";position:absolute;z-index:-1;
  inset:-14% -18% -16% -22%;
  background:
    radial-gradient(ellipse 74% 78% at 26% 50%,rgba(10,6,3,.74) 0%,rgba(10,6,3,.58) 40%,rgba(10,6,3,.24) 66%,rgba(10,6,3,0) 82%),
    linear-gradient(to right,rgba(10,6,3,.58) 0%,rgba(10,6,3,.34) 44%,rgba(10,6,3,0) 78%)}
.plate-body.band-settle::before,.plate .plate-body[data-center]::before{
  background:radial-gradient(ellipse 66% 74% at 50% 48%,rgba(10,6,3,.74) 0%,rgba(10,6,3,.56) 42%,rgba(10,6,3,0) 78%)}

/* hero caption bands carry the same treatment, tuned deeper for the settle */
.band::before{opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 80% 70% at 40% 50%,rgba(8,5,3,.78) 0%,rgba(8,5,3,.6) 42%,rgba(8,5,3,.22) 66%,rgba(8,5,3,0) 82%)}
.band-settle::before{inset:-20% -6%;
  background:radial-gradient(ellipse 70% 64% at 50% 46%,rgba(8,5,3,.8) 0%,rgba(8,5,3,.62) 44%,rgba(8,5,3,0) 80%)}
/* global base scrim: a touch deeper at the edges so no frame is ever raw */
.scrim{background:
  linear-gradient(to bottom,rgba(12,8,5,.5) 0%,rgba(12,8,5,.06) 26%,rgba(12,8,5,.06) 58%,rgba(12,8,5,.58) 100%),
  radial-gradient(ellipse 124% 92% at 50% 46%,rgba(12,8,5,0) 34%,rgba(12,8,5,.54) 100%)}
/* the rooftop and events photographs carry blown highlights: they get the deepest veil */
.plate-veil-strong{background:
  linear-gradient(to right,rgba(12,7,4,.9) 0%,rgba(12,7,4,.66) 40%,rgba(12,7,4,.2) 74%,rgba(12,7,4,.05) 100%),
  linear-gradient(to bottom,rgba(12,7,4,.46) 0%,rgba(12,7,4,.12) 32%,rgba(12,7,4,0) 62%)}

/* worst-pixel pass 2: the courtyard, rooftop and coquina photographs carry the
   brightest highlights in the set, so their text scrims go deeper still. */
.band::before{
  background:radial-gradient(ellipse 88% 82% at 38% 50%,rgba(8,5,3,.9) 0%,rgba(8,5,3,.74) 38%,rgba(8,5,3,.34) 64%,rgba(8,5,3,0) 84%)}
.band-settle::before{inset:-22% -8%;
  background:radial-gradient(ellipse 76% 70% at 50% 46%,rgba(8,5,3,.9) 0%,rgba(8,5,3,.72) 42%,rgba(8,5,3,0) 82%)}
.plate-veil-strong{background:
  linear-gradient(to right,rgba(10,6,3,.95) 0%,rgba(10,6,3,.8) 34%,rgba(10,6,3,.38) 64%,rgba(10,6,3,.06) 92%),
  linear-gradient(to bottom,rgba(10,6,3,.5) 0%,rgba(10,6,3,.14) 34%,rgba(10,6,3,0) 64%)}
.plate-body::before{inset:-16% -20% -18% -26%;
  background:
    radial-gradient(ellipse 82% 84% at 24% 50%,rgba(10,6,3,.86) 0%,rgba(10,6,3,.7) 38%,rgba(10,6,3,.3) 66%,rgba(10,6,3,0) 84%),
    linear-gradient(to right,rgba(10,6,3,.7) 0%,rgba(10,6,3,.42) 46%,rgba(10,6,3,0) 80%)}

/* worst-pixel pass 3: the courtyard poster carries a bright dusk sky exactly where
   band 01's headline lands, so the hero bands get a wider, deeper local scrim. */
.band::before{inset:-20% -16%;
  background:
    radial-gradient(ellipse 96% 88% at 42% 50%,rgba(8,5,3,.93) 0%,rgba(8,5,3,.8) 40%,rgba(8,5,3,.4) 68%,rgba(8,5,3,0) 86%),
    linear-gradient(to right,rgba(8,5,3,.62) 0%,rgba(8,5,3,.42) 52%,rgba(8,5,3,0) 88%)}
.band-settle::before{inset:-24% -10%;
  background:radial-gradient(ellipse 84% 76% at 50% 46%,rgba(8,5,3,.92) 0%,rgba(8,5,3,.76) 44%,rgba(8,5,3,.28) 70%,rgba(8,5,3,0) 86%)}

/* airy veil: for photographs that must stay bright (rooftop, coquina stone).
   Almost no global darkening; the local text scrim carries legibility alone. */
.plate-veil-airy{background:
  linear-gradient(to right,rgba(12,7,4,.34) 0%,rgba(12,7,4,.12) 34%,rgba(12,7,4,0) 62%),
  linear-gradient(to bottom,rgba(12,7,4,.3) 0%,rgba(12,7,4,0) 26%,rgba(12,7,4,0) 74%,rgba(12,7,4,.2) 100%)}
/* and the text block's own scrim tightens rather than spreads */
.plate-veil-airy ~ .plate-body::before{inset:-18% -14% -20% -24%;
  background:radial-gradient(ellipse 76% 88% at 24% 50%,rgba(8,5,3,.92) 0%,rgba(8,5,3,.78) 36%,rgba(8,5,3,.3) 64%,rgba(8,5,3,0) 82%)}

/* On the bright photographs the headline column narrows so its scrim can stay
   tight. A compact text block over a bright photo reads better than a wide one
   over a dimmed photo. */
.plate-veil-airy ~ .plate-body{max-width:min(640px,76vw)!important}
.plate-veil-airy ~ .plate-body .h-hero{font-size:clamp(2.6rem,5.6vw,4.4rem)}
.plate-veil-airy ~ .plate-body::before{inset:-20% -26% -22% -30%;
  background:radial-gradient(ellipse 100% 96% at 38% 50%,rgba(8,5,3,.94) 0%,rgba(8,5,3,.86) 42%,rgba(8,5,3,.44) 70%,rgba(8,5,3,0) 88%)}

/* ---------- scrim edge fix ----------
   A linear gradient has no vertical falloff, so its pseudo-element box cuts a
   visible straight edge across the photograph. Every scrim is now built only
   from radials, which fade in all directions and leave no seam. */
.band::before{inset:-34% -30%;
  background:
    radial-gradient(ellipse 58% 62% at 34% 50%,rgba(8,5,3,.9) 0%,rgba(8,5,3,.74) 46%,rgba(8,5,3,.34) 72%,rgba(8,5,3,0) 100%),
    radial-gradient(ellipse 88% 92% at 30% 50%,rgba(8,5,3,.52) 0%,rgba(8,5,3,.3) 52%,rgba(8,5,3,0) 100%)}
.band-settle::before{inset:-38% -18%;
  background:
    radial-gradient(ellipse 54% 58% at 50% 50%,rgba(8,5,3,.9) 0%,rgba(8,5,3,.72) 48%,rgba(8,5,3,.3) 74%,rgba(8,5,3,0) 100%),
    radial-gradient(ellipse 84% 88% at 50% 50%,rgba(8,5,3,.46) 0%,rgba(8,5,3,.26) 54%,rgba(8,5,3,0) 100%)}
.plate-body::before{inset:-32% -34% -34% -40%;
  background:
    radial-gradient(ellipse 54% 60% at 26% 50%,rgba(10,6,3,.88) 0%,rgba(10,6,3,.72) 46%,rgba(10,6,3,.32) 72%,rgba(10,6,3,0) 100%),
    radial-gradient(ellipse 86% 90% at 22% 50%,rgba(10,6,3,.5) 0%,rgba(10,6,3,.28) 54%,rgba(10,6,3,0) 100%)}
.plate-veil-airy ~ .plate-body::before{inset:-36% -40% -38% -44%;
  background:
    radial-gradient(ellipse 32% 38% at 32% 50%,rgba(8,5,3,.92) 0%,rgba(8,5,3,.78) 46%,rgba(8,5,3,.34) 72%,rgba(8,5,3,0) 100%),
    radial-gradient(ellipse 48% 46% at 29% 50%,rgba(8,5,3,.5) 0%,rgba(8,5,3,.28) 56%,rgba(8,5,3,0) 100%)}
/* the veils themselves get a vertical falloff so they cannot seam either */
.plate-veil-strong{background:
  linear-gradient(105deg,rgba(10,6,3,.94) 0%,rgba(10,6,3,.74) 30%,rgba(10,6,3,.34) 60%,rgba(10,6,3,.04) 88%),
  linear-gradient(to bottom,rgba(10,6,3,.42) 0%,rgba(10,6,3,0) 38%,rgba(10,6,3,0) 68%,rgba(10,6,3,.34) 100%)}
.plate-veil-airy{background:
  linear-gradient(100deg,rgba(12,7,4,.3) 0%,rgba(12,7,4,.1) 32%,rgba(12,7,4,0) 58%),
  linear-gradient(to bottom,rgba(12,7,4,.26) 0%,rgba(12,7,4,0) 28%,rgba(12,7,4,0) 72%,rgba(12,7,4,.22) 100%)}

/* Final seam pass: the scrim box is enlarged well past the text so every radial
   reaches full transparency INSIDE it. A gradient clipped by its own box edge is
   what produces a visible band across the photograph. */
.band::before{inset:-70% -55%;
  background:
    radial-gradient(ellipse 34% 40% at 34% 50%,rgba(8,5,3,.9) 0%,rgba(8,5,3,.76) 44%,rgba(8,5,3,.34) 72%,rgba(8,5,3,0) 100%),
    radial-gradient(ellipse 50% 46% at 30% 50%,rgba(8,5,3,.5) 0%,rgba(8,5,3,.28) 54%,rgba(8,5,3,0) 100%)}
.band-settle::before{inset:-80% -40%;
  background:
    radial-gradient(ellipse 30% 36% at 50% 50%,rgba(8,5,3,.9) 0%,rgba(8,5,3,.74) 46%,rgba(8,5,3,.32) 74%,rgba(8,5,3,0) 100%),
    radial-gradient(ellipse 46% 44% at 50% 50%,rgba(8,5,3,.46) 0%,rgba(8,5,3,.24) 56%,rgba(8,5,3,0) 100%)}
.plate-body::before{inset:-72% -60% -74% -70%;
  background:
    radial-gradient(ellipse 32% 38% at 28% 50%,rgba(10,6,3,.88) 0%,rgba(10,6,3,.72) 46%,rgba(10,6,3,.3) 72%,rgba(10,6,3,0) 100%),
    radial-gradient(ellipse 48% 46% at 25% 50%,rgba(10,6,3,.48) 0%,rgba(10,6,3,.26) 56%,rgba(10,6,3,0) 100%)}
.plate-veil-airy ~ .plate-body::before{inset:-76% -66% -78% -74%;
  background:
    radial-gradient(ellipse 32% 38% at 32% 50%,rgba(8,5,3,.92) 0%,rgba(8,5,3,.78) 46%,rgba(8,5,3,.34) 72%,rgba(8,5,3,0) 100%),
    radial-gradient(ellipse 48% 46% at 29% 50%,rgba(8,5,3,.5) 0%,rgba(8,5,3,.28) 56%,rgba(8,5,3,0) 100%)}

/* ---------- scrims, final: fixed pixel geometry ----------
   Percentage radii scale with the pseudo-element box, so enlarging the box to
   avoid a clipped edge also shrinks the dark core away from the text. Pixel
   radii decouple the two: the core is sized to the text, the box is sized so
   the gradient reaches zero inside it. */
.band::before{inset:-360px -300px;
  background:
    radial-gradient(820px 440px at 34% 50%,rgba(8,5,3,.94) 0%,rgba(8,5,3,.82) 46%,rgba(8,5,3,.44) 70%,rgba(8,5,3,0) 92%),
    radial-gradient(1240px 500px at 30% 50%,rgba(8,5,3,.44) 0%,rgba(8,5,3,.22) 58%,rgba(8,5,3,0) 94%)}
.band-settle::before{inset:-360px -320px;
  background:
    radial-gradient(760px 430px at 50% 50%,rgba(8,5,3,.94) 0%,rgba(8,5,3,.8) 46%,rgba(8,5,3,.4) 72%,rgba(8,5,3,0) 92%),
    radial-gradient(1180px 500px at 50% 50%,rgba(8,5,3,.4) 0%,rgba(8,5,3,.2) 58%,rgba(8,5,3,0) 94%)}
.plate-body::before{inset:-380px -380px -400px -420px;
  background:
    radial-gradient(880px 450px at 30% 50%,rgba(10,6,3,.92) 0%,rgba(10,6,3,.78) 46%,rgba(10,6,3,.4) 70%,rgba(10,6,3,0) 92%),
    radial-gradient(1320px 520px at 26% 50%,rgba(10,6,3,.42) 0%,rgba(10,6,3,.2) 58%,rgba(10,6,3,0) 94%)}
.plate-veil-airy ~ .plate-body::before{inset:-380px -400px -400px -440px;
  background:
    radial-gradient(760px 450px at 36% 50%,rgba(8,5,3,.94) 0%,rgba(8,5,3,.82) 46%,rgba(8,5,3,.44) 70%,rgba(8,5,3,0) 92%),
    radial-gradient(1160px 520px at 32% 50%,rgba(8,5,3,.44) 0%,rgba(8,5,3,.22) 58%,rgba(8,5,3,0) 94%)}
@media (max-width:820px){
  .band::before{inset:-300px -220px;
    background:radial-gradient(620px 400px at 42% 50%,rgba(8,5,3,.94) 0%,rgba(8,5,3,.8) 48%,rgba(8,5,3,.4) 72%,rgba(8,5,3,0) 92%)}
  .plate-body::before,.plate-veil-airy ~ .plate-body::before{inset:-300px -240px;
    background:radial-gradient(640px 420px at 44% 50%,rgba(10,6,3,.92) 0%,rgba(10,6,3,.78) 48%,rgba(10,6,3,.4) 72%,rgba(10,6,3,0) 92%)}
}

/* The hero band's box was wider than its longest line, leaving bright photograph
   inside the measured text area. A tighter measure fixes the contrast and reads
   better as typography. */
.band{max-width:min(740px,72vw)}
.band-settle{max-width:none}
.band-settle .h-hero{max-width:16ch;margin-inline:auto}