/* Hot Pepper Thai Cuisine
   Desktop/base rules first; the phone block is the LAST thing in this file.
   (Crepes lesson: a mobile block placed above the section rules loses to them.) */

/* Fonts are self-hosted. No visitor request reaches Google, so style-src and font-src
   both stay 'self', and no third-party handshake sits in front of the first paint.
   Both families are SIL OFL 1.1 and their licences ship beside the files in
   assets/fonts/, which is what the licence requires when you redistribute them.

   The weight ranges and unicode-ranges below are copied VERBATIM from what Google's
   own API served, not chosen. Both files carry a wider range than Google declared
   (Fraunces goes to 100, Figtree to 900), and declaring the wider range would silently
   change how any out-of-range weight renders. Matching their numbers is what makes
   this swap invisible. The variable axes are intact and load-bearing: Fraunces carries
   opsz, wght, SOFT and WONK, and the design sets SOFT and WONK all over. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(../assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(../assets/fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --char:#17100E;
  --char-2:#241A16;
  --ember:#C4291A;
  --ember-d:#A31F12;
  --flame:#E8873B;
  --turmeric:#DFA02B;
  --cream:#F6EFE3;
  --cream-2:#EDE2D1;
  --ink:#241A16;
  --muted:#6E5B52;
  --rule:rgba(36,26,22,.12);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;
  --heat-1:#E8C23B;            /* the ramp: turmeric -> flame -> ember -> near-black */
  --heat-2:#E8873B;
  --heat-3:#C4291A;
  --heat-4:#6E1207;
  --seam:#17100E;              /* melts into the dark landing section below */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:'SOFT' 30,'WONK' 1;font-weight:600;
  letter-spacing:-.018em;line-height:1.05;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:4px}

/* The film is 400vh of scroll before a word of menu. A keyboard user gets a way past it.
   Fixed, not absolute — absolute would scroll off with the top of the page it sits on. */
.skip{position:fixed;left:10px;top:-70px;z-index:95;
  background:var(--cream);color:var(--ink);border:1px solid var(--rule);
  border-radius:8px;padding:11px 16px;text-decoration:none;
  font-family:var(--body);font-size:14px;font-weight:700;transition:top .14s}
.skip:focus{top:10px}
/* Sent here by the skip link, not tabbed to — ringing the whole page is noise. */
.page:focus{outline:none}

/* ---------------------------------------------------------------- loader */
.loader{position:fixed;inset:0;z-index:90;background:var(--char);
  display:grid;place-items:center;transition:opacity .5s ease}
.loader.done{opacity:0;pointer-events:none}
.lwrap{text-align:center;width:min(260px,60vw)}
.lmark{display:block;margin:0 auto 22px;width:30px}
.ltrack{height:2px;background:rgba(246,239,227,.16);border-radius:2px;overflow:hidden}
.ltrack i{display:block;height:100%;width:0;background:var(--ember);
  transition:width .25s linear}
.lpct{margin-top:12px;font-size:11px;letter-spacing:.24em;color:rgba(246,239,227,.78)}
.lfail{display:none;margin-top:16px;font-size:12px;color:#C9B8AE;line-height:1.5}
.loader.failed .lfail{display:block}
.loader.failed .ltrack,.loader.failed .lpct{display:none}

/* ---------------------------------------------------------------- header */
#hdr{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:20px;
  padding:16px clamp(18px,3.4vw,40px);
  color:#FCF6EC;transition:transform .34s ease,background .34s ease,color .34s ease;
  background:linear-gradient(rgba(11,7,5,.62),rgba(11,7,5,0))}
#hdr.on-light{color:var(--ink)}
#hdr.past{background:var(--cream);color:var(--ink);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 20px rgba(20,10,6,.05)}
.wordmark{font-family:var(--display);font-variation-settings:'SOFT' 30,'WONK' 1;
  font-size:19px;font-weight:600;text-decoration:none;letter-spacing:-.01em;
  white-space:nowrap}
.wordmark em{font-style:italic;color:var(--flame)}
#hdr.past .wordmark em{color:var(--ember)}

.readout{display:flex;align-items:center;gap:10px;margin-left:6px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.72;
  transition:opacity .3s}
#hdr.past .readout{opacity:0;pointer-events:none}
.readout .num{font-weight:800;color:var(--flame)}
.readout .track{display:block;width:52px;height:2px;background:currentColor;
  opacity:.28;border-radius:2px;overflow:hidden}
.readout .track i{display:block;height:100%;width:0;background:var(--flame);opacity:1}

.hactions{margin-left:auto;display:flex;gap:8px;align-items:center}
.ha{font-size:13px;font-weight:700;letter-spacing:.01em;text-decoration:none;
  padding:9px 16px;border-radius:999px;white-space:nowrap;
  border:1px solid currentColor;transition:background .2s,color .2s,border-color .2s}
/* over the film the backdrop is whatever frame is showing, and the header scrim alone left
   these at 3.86:1 — a translucent plate under the pill fixes it without a solid bar */
.ha.ghost{background:#150E0C;border-color:rgba(252,246,236,.5)}
.ha.ghost:hover{background:#2A1D18;border-color:rgba(252,246,236,.8)}
#hdr.past .ha.ghost{background:transparent;backdrop-filter:none;
  border-color:rgba(36,26,22,.26)}
#hdr.past .ha.ghost:hover{background:rgba(36,26,22,.06)}
.ha.solid{background:var(--ember);border-color:var(--ember);color:#FFF4EF}
.ha.solid:hover{background:var(--ember-d);border-color:var(--ember-d)}

/* ---------------------------------------------------------------- film */
.film{height:400vh;position:relative;background:var(--char);
  margin-bottom:-1px}                 /* 1px overlap kills the DPR hairline seam */
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--char)}
#c,#pc{position:absolute;inset:0;width:100%;height:100%;display:block}
#pc{pointer-events:none;mix-blend-mode:screen;opacity:.85}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 88% at 50% 46%,transparent 42%,rgba(6,3,2,.62) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>")}
.fadeout{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 52%,var(--seam) 100%)}

.beats{position:absolute;inset:0;display:grid;place-items:center;
  padding:0 clamp(20px,5vw,60px);pointer-events:none}
.beat{position:absolute;text-align:center;opacity:0;will-change:opacity,transform;
  max-width:min(900px,90vw);isolation:isolate}
/* By the last chapter the wok fills the frame and the captions sit over bright noodles,
   where a text-shadow alone stops holding. This is a soft dark plate behind the text only —
   it reads as lens falloff rather than a box. */
.beat::before{content:"";position:absolute;inset:-14% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 64% at 50% 50%,rgba(8,4,2,.74),rgba(8,4,2,.34) 58%,transparent 76%)}
.beat.opening::before{background:radial-gradient(66% 70% at 34% 50%,rgba(8,4,2,.76),rgba(8,4,2,.3) 60%,transparent 78%)}
.beat h1,.beat h2{color:#FCF6EC;text-shadow:0 2px 46px rgba(10,4,2,.8);
  font-variation-settings:'SOFT' 42,'WONK' 1;font-weight:500;
  font-size:clamp(44px,7.6vw,108px);line-height:.98;letter-spacing:-.028em}
.beat h1 em{font-style:italic;color:var(--flame)}
/* the food occupies the centre of frame 1 — the opening title moves off it, into the
   clean black to its left, rather than fighting the noodles for legibility */
.beat.opening{justify-self:start;text-align:left;max-width:min(560px,46vw);
  margin-left:clamp(20px,5.5vw,76px)}
.beat.opening h1{font-size:clamp(40px,5.6vw,80px)}
.beat .sub{margin-top:18px;color:rgba(252,246,236,.82);font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.01em;text-shadow:0 2px 24px rgba(10,4,2,.7)}
.beat .cta{display:inline-block;margin-top:28px;pointer-events:auto;
  background:var(--ember);color:#FFF4EF;text-decoration:none;font-weight:700;
  font-size:14px;padding:14px 28px;border-radius:999px;
  transition:background .2s,transform .2s}
.beat .cta:hover{background:var(--ember-d);transform:translateY(-1px)}
.cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(252,246,236,.6);display:flex;flex-direction:column;
  align-items:center;gap:8px;transition:opacity .4s}
.cue span{width:1px;height:26px;background:linear-gradient(rgba(252,246,236,.7),transparent)}

/* ---------------------------------------------------------------- page */
.page{position:relative;z-index:2;background:var(--cream)}
.sect{padding:clamp(56px,7vw,104px) clamp(20px,4vw,44px)}
.inner{max-width:var(--wrap);margin:0 auto}
.lede{font-size:clamp(16px,1.55vw,18.5px);line-height:1.66;color:var(--muted);
  max-width:62ch}
.fine{font-size:13px;color:var(--muted);line-height:1.6}
.fine.center{text-align:center;margin-top:30px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);margin-bottom:18px}
.shead{margin-bottom:34px}

/* Reveal-on-scroll. Scoped to html.fx, which page.js only adds once it has decided to
   actually run the observer — so ?nofx, no IntersectionObserver, reduced-motion or a JS
   error all leave the page plainly visible instead of stranding it at opacity:0. */
.fx [data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.fx [data-rv].in{opacity:1;transform:none}

.landing{padding-top:clamp(52px,6vw,88px);background:var(--char);color:var(--cream)}
.landing h2{font-size:clamp(30px,4.4vw,58px);margin-bottom:20px;max-width:20ch;color:#FCF6EC}
.landing .lede{color:rgba(246,239,227,.72)}
.landing .tag{color:var(--flame)}
.landing .mline{display:inline}

/* The order bar. Sits at the dark-landing -> cream seam so an ordering CTA lands
   BEFORE the menu, not only after it. Toast alone here; the full channel list is
   still #order at the bottom. Slimmer padding than a .sect — it reads as a bar. */
.obar{background:var(--char-2);color:var(--cream);
  padding:20px clamp(20px,4vw,44px);border-top:1px solid rgba(246,239,227,.1)}
.obar .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px clamp(18px,2.4vw,30px)}
.obar p{color:rgba(246,239,227,.76);font-size:15.5px}

.ftop{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,60px);align-items:center}
.feature h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:16px}
.feature{padding-bottom:clamp(44px,5vw,74px)}
.feature .fine{margin-top:20px}

/* The heat scale. Four identical pills hid the one thing this section is about, so the
   levels are laid out as a ramp: dot count climbs, the rule under them warms from turmeric
   to near-black, and each step says what it actually feels like to eat. */
.heat{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,26px);margin-top:clamp(38px,5vw,62px);
  border-top:1px solid var(--rule);padding-top:0}
.hstep{position:relative;padding:24px 4px 4px;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
/* the warming rule sits on the section's top border, one segment per step */
.hstep::before{content:"";position:absolute;top:-1px;left:0;right:0;height:3px;
  border-radius:0 0 2px 2px;transition:height .45s cubic-bezier(.22,1,.36,1)}
.s1::before{background:var(--heat-1)}
.s2::before{background:var(--heat-2)}
.s3::before{background:var(--heat-3)}
.s4::before{background:var(--heat-4)}
.hdots{display:flex;gap:5px;margin-bottom:12px}
.hdots i{width:8px;height:8px;border-radius:50%;display:block}
.s1 .hdots i{background:var(--heat-1)}
.s2 .hdots i{background:var(--heat-2)}
.s3 .hdots i{background:var(--heat-3)}
.s4 .hdots i{background:var(--heat-4)}
.hname{display:block;font-family:var(--display);
  font-variation-settings:'SOFT' 24,'WONK' 1;font-weight:600;
  font-size:clamp(19px,2vw,25px);letter-spacing:-.012em;line-height:1.1}
.hsay{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--muted);
  text-wrap:pretty}
@media (hover:hover){
  .hstep:hover{transform:translateY(-4px)}
  .hstep:hover::before{height:6px}
}
.fimg{border-radius:14px;overflow:hidden;background:var(--cream-2);
  max-height:420px}
.fimg img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- menu */
.menu{background:var(--cream-2)}
.menu h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:12px}
.mkey{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);
  margin-bottom:10px;flex-wrap:wrap}
/* Sits above the cards, not buried under them: the per-card badge is the reminder,
   this is the disclosure. */
.mdisc{max-width:64ch;margin-bottom:26px}
/* Every dish carries a photo, so the menu is a card grid. The old two-column text
   flow is gone: a card is exactly the tall unbreakable box that strands a CSS
   column, and the balancer cannot place 60 of them without leaving holes. */
.mgrid,.mtail{column-count:1}
.mtail{margin-top:34px}
.m-sec{margin-bottom:44px;display:block;width:100%}

/* Each section is one row that scrolls sideways rather than a block that wraps.
   The rail bleeds to the viewport edge on both sides so a half-visible card at the
   edge reads as "more this way" instead of as a cropping mistake. */
.m-rail{position:relative;margin-top:16px}
.m-list{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x proximity;padding:2px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none}
.m-list::-webkit-scrollbar{display:none}
.m-item{flex:0 0 236px;scroll-snap-align:start}
/* The focus ring belongs on the rail when it is keyboard-scrolled, not on nothing. */
.m-list:focus-visible{outline:2px solid var(--flame);outline-offset:3px;border-radius:12px}

.m-arrow{position:absolute;top:74px;z-index:2;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  font-family:var(--body);font-size:22px;line-height:1;padding-bottom:3px;
  color:var(--ink);background:var(--cream);border:1px solid var(--rule);
  box-shadow:0 2px 10px rgba(20,10,6,.14);
  transition:background .2s,transform .2s,opacity .2s}
.m-arrow:hover{background:#fff;transform:translateY(-1px)}
.m-arrow.prev{left:-8px}
.m-arrow.next{right:-8px}
.m-arrow[hidden]{display:none}
.m-h{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);margin-bottom:6px;font-variation-settings:'SOFT' 20,'WONK' 0}
.m-note{font-size:12.5px;color:var(--muted);font-style:italic;margin-bottom:8px}
.m-list{list-style:none}
.m-item{display:block;padding:0;border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;background:var(--cream)}
.m-card-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:#DED2C0}
.m-body{display:block;padding:2px 14px 14px}
.m-code{display:block;padding:12px 14px 0;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;color:var(--muted);
  font-variant-numeric:lining-nums tabular-nums}
.m-name{font-family:var(--display);font-variation-settings:'SOFT' 20,'WONK' 1;
  font-size:19px;font-weight:500;letter-spacing:-.006em;display:block}
.m-desc{display:block;font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:3px}
.m-tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.09em;
  border:1px solid var(--turmeric);color:#8A6414;border-radius:3px;
  padding:1px 5px;margin-left:7px;vertical-align:2px;font-family:var(--body)}
.m-tag.v{border-color:#4E7A3A;color:#3E6A2C}

/* ---------------------------------------------------------------- reviews */
.reviews .inner{display:grid;grid-template-columns:minmax(240px,300px) 1fr;
  gap:clamp(30px,5vw,80px);align-items:start}
.reviews h2{font-size:clamp(26px,3vw,38px);margin-bottom:26px;max-width:14ch}
.snum{font-family:var(--display);font-variation-settings:'SOFT' 30,'WONK' 1;
  font-size:76px;font-weight:600;line-height:1;letter-spacing:-.022em;
  font-variant-numeric:lining-nums}   /* Fraunces old-style figures drop below baseline */
.stars{position:relative;display:inline-block;font-size:21px;letter-spacing:.14em;
  margin-top:8px;color:rgba(36,26,22,.16)}
/* Ships at the true rating (4.6/5 = 92%). page.js knocks it to 0 only when it has committed
   to animating, so reduced-motion / ?nofx / a JS error show the real score instead of an
   empty row of grey stars. */
.stars .sfill{position:absolute;inset:0;width:92%;overflow:hidden;white-space:nowrap;
  color:var(--turmeric);transition:width 1.1s cubic-bezier(.22,.7,.3,1)}
.glink{display:inline-block;color:var(--ember);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(196,41,26,.35);padding:4px 0 3px;min-height:24px}
.glink:hover{border-bottom-color:var(--ember)}
/* Three identical tinted cards is the "identical card grid" pattern, and card chrome was
   doing no work here — the quotes are the content. Ruled pull-quotes instead, in the display
   face — hairline separators, no boxes, all three at one size. */
.quotes{list-style:none;display:grid}
.quotes li{padding:26px 0;border-top:1px solid var(--rule)}
.quotes li:first-child{border-top:none;padding-top:0}
.quotes blockquote{font-family:var(--display);
  font-variation-settings:'SOFT' 26,'WONK' 1;font-weight:500;
  font-size:19.5px;line-height:1.44;letter-spacing:-.008em;text-wrap:pretty}
.quotes cite{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin-top:12px;font-style:normal;font-size:12.5px;letter-spacing:.02em}
.quotes cite b{font-weight:700;color:var(--ink)}
.quotes cite span{color:var(--muted)}

/* ---------------------------------------------------------------- order */
.order{background:var(--char);color:var(--cream);text-align:center}
.order h2{font-size:clamp(28px,3.6vw,44px);color:#FCF6EC;margin-bottom:14px}
.order .lede{color:rgba(246,239,227,.72);margin:0 auto}
.obtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.ob{display:inline-flex;flex-direction:column;align-items:center;
  text-decoration:none;font-weight:700;font-size:14.5px;
  padding:14px 26px;border-radius:999px;border:1px solid rgba(246,239,227,.3);
  color:inherit;transition:background .2s,border-color .2s,transform .2s}
.ob:hover{transform:translateY(-1px);border-color:rgba(246,239,227,.6)}
.ob.solid{background:var(--ember);border-color:var(--ember);color:#FFF4EF}
.ob.solid:hover{background:var(--ember-d);border-color:var(--ember-d)}
.ob span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  opacity:.82;margin-top:3px}

/* ---------------------------------------------------------------- visit */
.visit .inner{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,44px);align-items:start}
.visit h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:14px}
.card{margin-top:22px;background:var(--cream-2);border-radius:14px;padding:24px}
.addr{font-size:17px;line-height:1.5}
/* inline-block + padding so the tap target clears 24x24 (a bare inline link measured 124x20) */
.tel{display:inline-block;font-weight:700;color:var(--ember);text-decoration:none;
  font-size:17px;padding:4px 0;min-height:24px}
.tel:hover{text-decoration:underline}
.foot a{display:inline-block;padding:4px 0;min-height:24px}
.hours{width:100%;margin:16px 0 6px;border-collapse:collapse;font-size:14.5px}
.hours th{text-align:left;font-weight:700;padding:6px 0;color:var(--ink)}
.hours td{text-align:right;padding:6px 0;color:var(--muted);
  font-variant-numeric:lining-nums tabular-nums}
.acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.visit .ob{border-color:var(--rule);flex-direction:row}
.visit .ob:hover{border-color:rgba(36,26,22,.4)}
.vmap{border-radius:14px;overflow:hidden;background:var(--cream-2);
  height:100%;min-height:380px}
.vmap iframe{width:100%;height:100%;min-height:380px;border:0;display:block}

/* toast for desktop click-to-call */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--char);color:var(--cream);font-size:13.5px;font-weight:600;
  padding:12px 20px;border-radius:999px;z-index:80;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--char);color:rgba(246,239,227,.66);
  padding:52px clamp(20px,4vw,44px) 60px;text-align:center}
.foot .fine{color:rgba(246,239,227,.6)}
.foot a{color:rgba(246,239,227,.86)}
.fmark{font-family:var(--display);font-variation-settings:'SOFT' 30,'WONK' 1;
  font-size:21px;font-weight:600;color:#FCF6EC;margin-bottom:12px}
/* .42 read as 3.74:1 — below AA for 11.5px text. .52 clears it at 5.10 while staying
   quieter than .foot .fine above it, so the disclaimer is still visibly subordinate. */
.disc{margin-top:26px;font-size:11.5px;line-height:1.6;color:rgba(246,239,227,.52);
  max-width:60ch;margin-left:auto;margin-right:auto}
/* The credit link opts out of the footer's 24px tap-target sizing: a link inline in a
   block of text is exempt under WCAG 2.5.8, and the min-height stretched its line. */
.disc a{display:inline;padding:0;min-height:0}

.nojs{padding:60px 24px;max-width:640px;margin:0 auto;text-align:center}
.nojs h1{font-size:34px;margin-bottom:14px}
.nojs p{margin-bottom:10px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-rv]{opacity:1;transform:none}
  .film{height:100vh}
}

/* ================================================================
   PHONE — must stay LAST so it beats the section rules above.
   ================================================================ */
@media (max-width:820px){
  body{font-size:16px}
  #hdr{padding:12px 16px;gap:12px}
  .wordmark{font-size:16px}
  .readout{display:none}
  .ha{padding:8px 13px;font-size:12.5px}
  .ha .lx{display:none}

  .film{height:340vh}
  .beat h1,.beat h2{font-size:clamp(38px,10.4vw,60px)}
  .beat.opening{justify-self:center;text-align:center;max-width:90vw}
  .beat.opening h1{font-size:clamp(38px,10.4vw,58px)}
  .beat .sub{font-size:15px;margin-top:14px}
  .cue{bottom:26px}

  .sect{padding:48px 20px}
  .landing h2{font-size:clamp(27px,7.6vw,38px)}

  .ftop,
  .reviews .inner,
  .visit .inner{grid-template-columns:1fr;gap:26px}
  .fimg{display:none}
  .heat{grid-template-columns:repeat(2,1fr);gap:0 18px;margin-top:34px;border-top:none}
  .hstep{padding:18px 4px 20px;border-top:1px solid var(--rule)}
  .hstep::before{top:-1px}

  .mgrid{column-count:1}
  .mtail{grid-template-columns:1fr;row-gap:30px}
  .m-item{grid-template-columns:32px 1fr;gap:8px}
  .m-name{font-size:18px}

  .snum{font-size:60px}
  .quotes blockquote{font-size:17.5px}
  .quotes li{padding:22px 0}

  .vmap{min-height:280px}
  .vmap iframe{min-height:280px}
  .obtns{flex-direction:column;align-items:stretch}
  .ob{justify-content:center}
  .obar p{text-align:center}
}

/* The reduced-motion block above sets .film to 100vh, and the phone query that follows it
   sets 340vh — so on a phone, source order silently undid the accommodation, on the widths
   where most of this site is read. Restated here, last, where it wins at every width. */
@media (prefers-reduced-motion:reduce){
  .film{height:100vh}
}