/* ===========================================================
   The Grizzly Den — Hoquiam, Washington
   "Your Handcrafted Burger Destination"

   Palette is measured off their own sign: the oxblood field of
   the shield, the brick red of the lettering, the gold of the
   banner, and the cream that outlines the letters. Warm near-
   black ground, never blue-black and never green. Display type
   at 500, not 800, so it reads confident rather than shouty.
   =========================================================== */

:root{
  --den:#17100E;         /* the sign's outline black — warm, almost brown */
  --den-2:#241715;
  --den-3:#33211E;
  --fir:#17100E;         /* legacy alias: older rules still reference --fir */
  --fir-2:#241715;
  --fir-3:#33211E;
  --fog:#F7F1E4;         /* the cream that outlines the lettering */
  --fog-2:#E9DCC4;
  --ink:#191110;
  --body:#5E514A;
  --body-dk:rgba(247,241,228,.66);
  --muted:#8C7E73;
  --oxblood:#6B1D1E;     /* the shield field */
  --griddle:#B5342A;         /* the lettering red — the accent */
  --griddle-hi:#E15B44;
  --amber:#DFA92B;        /* the banner gold */
  --cedar:#6B4423;         /* the bear, sparingly */
  --line:rgba(247,241,228,.15);
  --line-dk:rgba(25,17,16,.15);
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --disp:'Familjen Grotesk',system-ui,sans-serif;
  --sans:'Inter Tight',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--fog);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--griddle);color:#fff}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,8vw,120px)}
.dark{background:var(--fir);color:var(--fog)}
.dark .lead{color:var(--body-dk)}

/* ---------- type ---------- */
h1,h2,h3,.h1,.h2{font-family:var(--disp);font-weight:500;letter-spacing:-.012em;line-height:1.03}
.h1{font-size:clamp(38px,6.4vw,84px)}
.h2{font-size:clamp(29px,4.2vw,58px)}
.h3{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2vw,23px);letter-spacing:-.01em}
.lead{font-size:clamp(15.5px,1.35vw,18px);line-height:1.7;color:var(--body);max-width:60ch}
em{font-style:normal;color:var(--griddle)}
.dark em{color:var(--griddle-hi)}
.label{display:inline-flex;align-items:center;gap:11px;font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--griddle)}
.label::before{content:"";width:24px;height:2px;background:var(--griddle)}
.dark .label{color:var(--amber)}
.dark .label::before{background:var(--amber)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:14.5px;
  padding:17px 30px;border:none;cursor:pointer;text-decoration:none;background:var(--griddle);color:#fff;
  transition:transform .2s var(--ease),background .25s}
.btn:hover{background:#9E4318;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--fog);box-shadow:inset 0 0 0 1.5px rgba(247,244,238,.32)}
.btn--ghost:hover{background:rgba(247,244,238,.09);box-shadow:inset 0 0 0 1.5px rgba(247,244,238,.6)}
.btn--dark{background:var(--ink);color:var(--fog)}
.btn--dark:hover{background:#27332E}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;padding-block:16px;transition:background .4s,backdrop-filter .4s,padding .4s}
.nav.tight{background:rgba(23,16,14,.94);backdrop-filter:blur(20px) saturate(1.25);padding-block:10px;border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--fog)}
/* 48, not 42 — her logo is an illustration and needs the extra pixels
   to read. Checked by rasterising the mark at both sizes. */
.brand-mark{width:48px;height:48px;flex:none;border-radius:5px}
.brand-txt b{display:block;font-family:var(--disp);font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1}
.brand-txt small{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,244,238,.56);margin-top:3px}
.nav-links{display:flex;gap:24px;flex:0 1 auto}
.nav-links a{font-size:13.5px;font-weight:500;text-decoration:none;color:rgba(247,244,238,.84);white-space:nowrap;transition:color .2s}
.nav-links a:hover{color:var(--fog)}
.nav-links a[aria-current="page"]{color:var(--fog)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--amber);margin-top:5px}
.nav-r{display:flex;align-items:center;gap:14px}
.nav-tel{font-family:var(--disp);font-weight:600;font-size:15px;text-decoration:none;color:var(--fog);white-space:nowrap}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-toggle span{width:24px;height:2px;background:var(--fog);display:block}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(620px,94vh,1000px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--fir);padding-block:150px clamp(48px,6vw,86px)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(23,16,14,.74) 0%,rgba(23,16,14,.24) 30%,rgba(23,16,14,.52) 62%,rgba(23,16,14,.96) 100%),
  linear-gradient(96deg,rgba(23,16,14,.88) 0%,rgba(23,16,14,.4) 54%,rgba(23,16,14,.05) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{color:var(--fog);max-width:15ch;margin-top:20px}
.hero .lead{color:rgba(247,244,238,.82);margin-top:20px;max-width:50ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:36px;padding-top:22px;
  border-top:1px solid var(--line);font-size:13.5px;color:rgba(247,244,238,.74)}
.hero-trust b{color:var(--fog);font-weight:600}
.hero-trust .sep{width:1px;height:14px;background:var(--line)}

/* ---------- marquee ---------- */
.marq{background:var(--oxblood);color:#fff;padding-block:14px;overflow:hidden;white-space:nowrap}
.marq-in{display:inline-flex;animation:marq 36s linear infinite}
.marq span{font-family:var(--disp);font-weight:600;font-size:14px;padding-inline:26px;position:relative}
.marq span::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;background:rgba(255,255,255,.5);
  border-radius:50%;transform:translateY(-50%)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ===========================================================
   THE BRISKET — scroll-driven cook sequence.
   The rail is a tall scroll track; the frames are pinned inside it
   and cross-fade as you scroll, so the meat visibly cooks under
   your thumb. Pure CSS opacity driven by JS scroll progress — no
   scrubbing a video, which would stall on mobile connections.
   =========================================================== */
.fire{background:var(--fir);color:var(--fog)}
.fire-rail{position:relative;height:600vh}
.fire-pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(24px,4vw,64px);padding-inline:var(--pad);max-width:1240px;margin:0 auto}
.fire-frames{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--fir-2)}
.fire-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .55s var(--ease),transform 1.4s var(--ease);transform:scale(1.06)}
.fire-frames img.on{opacity:1;transform:scale(1)}
.fire-txt{position:relative}
.fire-step{position:absolute;inset:auto 0 0 0;bottom:0;opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.fire-step.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.fire-n{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--amber)}
.fire-step h3{margin:12px 0 12px;font-size:clamp(26px,3.6vw,46px);color:var(--fog);line-height:1.05}
.fire-step p{font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:var(--body-dk);max-width:44ch}
.fire-meta{margin-top:20px;display:flex;gap:20px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.fire-meta b{color:var(--amber);font-weight:700}
/* progress bar */
.fire-prog{position:absolute;left:var(--pad);right:var(--pad);bottom:34px;height:2px;background:rgba(247,244,238,.14);max-width:1240px;margin-inline:auto}
.fire-prog i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--amber);transition:width .2s linear}
@media(max-width:900px){
  .fire-pin{grid-template-columns:1fr;gap:22px;align-content:center}
  .fire-frames{aspect-ratio:4/3}
  .fire-step h3{font-size:clamp(22px,6vw,30px)}
  .fire-step p{font-size:14.5px}
}

/* ---------- menu ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--fog-2);
  border:1px solid var(--fog-2);margin-top:44px}
.mcard{background:var(--fog);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;isolation:isolate;transition:background .3s}
.mcard:hover{background:#FBF6EC}
/* The dish sits behind the card, framed right so it lands clear of the type.
   A cream veil stays opaque under the copy and lifts off toward that corner. */
.mcard-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:84% 50%;
  z-index:-2;opacity:.9;transition:opacity .45s var(--ease),transform .7s var(--ease)}
.mcard::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(96deg,var(--fog) 0%,var(--fog) 55%,rgba(247,244,238,.93) 66%,
    rgba(247,244,238,.55) 84%,rgba(247,244,238,.16) 100%)}
.mcard:hover .mcard-bg{opacity:1;transform:scale(1.05)}
@media(max-width:600px){.mcard-bg{opacity:.72}
  .mcard::after{background:linear-gradient(168deg,var(--fog) 0%,var(--fog) 56%,rgba(247,244,238,.72) 100%)}}
.mcard .h3{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.mcard p{font-size:14.5px;line-height:1.62;color:var(--body)}
.tagline{display:inline-block;margin-top:6px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--griddle);border:1px solid rgba(196,71,42,.35);padding:5px 9px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.split.rev .split-media{order:2}
.split-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}}

/* ---------- page header ---------- */
.phead{position:relative;padding:clamp(130px,17vw,200px) 0 clamp(50px,7vw,84px);background:var(--fir);overflow:hidden}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img{width:100%;height:100%;object-fit:cover}
.phead-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(23,16,14,.8) 0%,rgba(23,16,14,.56) 45%,rgba(23,16,14,.95) 100%),
  linear-gradient(96deg,rgba(23,16,14,.9) 0%,rgba(23,16,14,.44) 62%,rgba(23,16,14,.12) 100%)}
.phead .wrap{position:relative;z-index:2}
.phead h1{color:var(--fog);margin-top:16px;max-width:15ch}
.phead .lead{color:rgba(247,244,238,.8);margin-top:18px}

/* ---------- info / hours ---------- */
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(22px,3vw,44px);margin-top:44px}
.info h4{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.info p,.info a{font-size:15px;line-height:1.75;color:var(--body-dk);text-decoration:none;display:block}
.info a:hover{color:var(--fog)}
.hrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--body-dk)}
.hrow b{color:var(--fog);font-weight:600}
.hrow.is-today{color:var(--fog)}
.hrow.is-today b{color:var(--amber)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:44px}
.gal figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal figcaption{margin-top:10px;font-size:13.5px;color:var(--body)}
.dark .gal figcaption{color:var(--body-dk)}

/* ---------- FAQ ---------- */
.faq{margin-top:34px;border-top:1px solid var(--line-dk)}
.faq details{border-bottom:1px solid var(--line-dk)}
.faq summary{cursor:pointer;padding:19px 0;font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.8vw,20px);
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--griddle);font-size:22px;font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 19px;font-size:15px;line-height:1.68;color:var(--body);max-width:70ch}

/* ---------- CTA band ---------- */
.cta-band{padding-block:clamp(56px,7vw,96px)}
.cta-band .lead{max-width:52ch;margin-inline:auto}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--fog);padding-block:clamp(48px,6vw,74px) 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,54px)}
.foot-grid h4{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:15px}
.foot-grid a,.foot-grid span{display:block;font-size:14px;color:rgba(247,244,238,.68);text-decoration:none;margin-bottom:9px}
.foot-grid a:hover{color:var(--fog)}
.foot-bot{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 22px;
  justify-content:space-between;font-size:12.5px;color:rgba(247,244,238,.44)}

/* ---------- mobile bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;font-weight:600;font-size:14.5px;text-decoration:none}
.mbar .call{background:var(--ink);color:var(--fog)}
.mbar .go{background:var(--griddle);color:#fff}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}

@media(max-width:1080px){.nav-tel{display:none}}
@media(max-width:980px){.nav-links{display:none}.nav-toggle{display:flex}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr}.mbar{display:flex}footer.site{padding-bottom:76px}
  .hero{min-height:auto;padding-block:128px 52px}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  /* The cook sequence collapses to a plain stacked list — no pinning. */
  .fire-rail{height:auto}
  .fire-pin{position:static;height:auto;display:block;padding-block:40px}
  .fire-frames{aspect-ratio:3/2;margin-bottom:20px}
  .fire-frames img{position:relative;opacity:1;transform:none;margin-bottom:12px}
  .fire-step{position:relative;opacity:1;transform:none;margin-bottom:34px}
  .fire-prog{display:none}
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ===========================================================
   HIRING
   =========================================================== */
/* Home-page hiring band. Sits on the ember red rather than the smoke dark so
   it reads as a distinct call, not just another dark section in the stack. */
.hire-band{background:#8E2F17;color:var(--fog)}
.hire-band .lead{color:rgba(247,244,238,.8)}
.hire-band .label{color:var(--amber)}
.hire-band .label::before{background:var(--amber)}
.hire-band em{color:var(--amber)}
.hire-band .btn{background:var(--fog);color:var(--ink)}
.hire-band .btn:hover{background:#fff}

/* Role cards */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line-dk);
  border:1px solid var(--line-dk);margin-top:44px}
.role{background:var(--fog);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:10px;transition:background .3s}
.role:hover{background:#FBF6EC}
.role-n{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.18em;color:var(--griddle)}
.role-sum{font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.5}
.role p{font-size:14.5px;line-height:1.65;color:var(--body)}

/* Tick list */
.ticks{list-style:none;display:grid;gap:11px}
.ticks li{position:relative;padding-left:28px;font-size:15px;line-height:1.55;color:var(--body-dk)}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--amber);
  border-bottom:2px solid var(--amber);transform:rotate(-45deg)}

/* Form */
.formwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,76px);align-items:start;margin-top:10px}
form{display:grid;gap:17px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:15.5px;padding:14px 15px;
  background:#fff;border:1px solid rgba(23,16,14,.18);color:var(--ink);outline:none;border-radius:0;
  transition:border-color .25s;appearance:none}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--griddle)}
.field input::placeholder,.field textarea::placeholder{color:rgba(23,16,14,.32)}
.hp{position:absolute!important;left:-9999px!important;opacity:0}
.f-note{font-size:12.5px;color:var(--muted);line-height:1.6}
/* Confirmation panel shown when Netlify returns ?sent=1 */
.sent{border:1px solid rgba(23,16,14,.16);border-left:3px solid var(--griddle);padding:clamp(24px,3vw,36px);background:#FBF6EC}
.sent:focus{outline:none}
@media(max-width:900px){.formwrap{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}}

/* Dark grounds that do NOT carry the .dark class — hero, page headers and the
   cook rail all paint their own. One canonical rule rather than per-section
   patches; this exact failure has recurred on four builds. */
.hero em,.phead em,.fire em,.cater em{color:var(--griddle-hi)}
.hero .label,.phead .label,.cater .label{color:var(--amber)}
.hero .label::before,.phead .label::before,.cater .label::before{background:var(--amber)}

/* ===========================================================
   THE SAUCE BOARD — the signature interaction
   The house-made sauces are the thing people ask about, so they get the slot.
   Pick a pot and the copy follows. Ashley's own idea — the sauces are
   CSS/JS, no photography, and it is specific to this restaurant rather than
   a component that would fit any other page.
   =========================================================== */
.sauce{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4vw,60px);align-items:center;margin-top:40px}
@media(max-width:880px){.sauce{grid-template-columns:1fr}}
.sauce-pots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* Three sauces plus the "+ more" tile is four, and four in three columns
   leaves one stranded on its own row. Square it up until Ashley sends the
   rest of the list, at which point this rule stops matching on its own. */
.sauce-pots:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.jar{position:relative;border:none;cursor:pointer;padding:0;background:none;text-align:left;
  font-family:var(--sans);transition:transform .25s var(--ease)}
.jar:hover{transform:translateY(-3px)}
.jar-well{aspect-ratio:1/1;border-radius:3px;position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(247,244,238,.14)}
/* Each pot is a real photograph of that sauce. The hex still paints behind it
   so the tile is never a white hole while the image loads. */
.jar-well img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) brightness(.78);transition:filter .35s var(--ease),transform .5s var(--ease)}
.jar:hover .jar-well img{filter:saturate(1) brightness(.95);transform:scale(1.05)}
.jar[aria-pressed="true"] .jar-well img{filter:saturate(1.06) brightness(1);transform:scale(1.03)}
/* Top gloss, so the tile reads as a lit surface rather than a flat crop. */
.jar-well::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 12%,rgba(255,255,255,.16),transparent 62%),
  linear-gradient(180deg,transparent 55%,rgba(9,13,11,.42) 100%)}
.jar b{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--fog)}
.jar span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,244,238,.5);margin-top:3px}
.jar[aria-pressed="true"] .jar-well{box-shadow:inset 0 0 0 2px var(--amber),0 8px 26px rgba(0,0,0,.4)}
.jar[aria-pressed="true"] span{color:var(--amber)}

.sauce-read h3{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.4vw,42px);color:var(--fog);line-height:1.06}
.sauce-read p{margin-top:14px;font-size:15.5px;line-height:1.7;color:var(--body-dk);max-width:44ch;min-height:5.4em}


/* ---------- catering ---------- */
/* Its own band: photograph behind a warm scrim, so it reads as a different
   kind of offer from the counter-service sections either side of it. */
.cater{position:relative;overflow:hidden;background:var(--ink);
  padding:clamp(74px,10vw,124px) 0}
.cater-bg{position:absolute;inset:0;z-index:0}
.cater-bg img{width:100%;height:100%;object-fit:cover}
.cater-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(23,16,14,.9) 0%,rgba(23,16,14,.72) 40%,rgba(23,16,14,.95) 100%),
  linear-gradient(92deg,rgba(30,16,8,.78) 0%,rgba(23,16,14,.4) 70%)}
.cater .wrap{position:relative;z-index:2}
.cater-head{max-width:60ch}
.cater .lead{color:rgba(247,244,238,.78)}
.cater-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(247,244,238,.14);
  border:1px solid rgba(247,244,238,.14);margin-top:clamp(38px,5vw,58px)}
.cater-item{background:rgba(23,16,14,.5);backdrop-filter:blur(2px);padding:clamp(22px,2.6vw,32px)}
.cater-item h3{font-family:var(--disp);font-weight:600;font-size:clamp(17px,1.5vw,20px);color:var(--fog);
  line-height:1.2;letter-spacing:-.01em}
.cater-item p{margin-top:10px;font-size:14.5px;line-height:1.62;color:rgba(247,244,238,.66)}
@media(max-width:860px){.cater-grid{grid-template-columns:1fr}}
.cater-cta{margin-top:clamp(34px,4vw,50px);display:flex;justify-content:space-between;align-items:center;
  gap:26px;flex-wrap:wrap}
.cater-cta p{font-family:var(--disp);font-size:clamp(17px,1.9vw,23px);font-weight:400;line-height:1.36;
  color:var(--fog);max-width:34ch}
.cater-btns{display:flex;gap:13px;flex-wrap:wrap}
.cater .btn--ghost{background:rgba(23,16,14,.6);backdrop-filter:blur(3px)}
.cater .btn--ghost:hover{background:rgba(23,16,14,.8)}

/* Seven dishes never fill three columns evenly — the eighth cell is the ask. */
.mcard--cta{justify-content:center;gap:14px}
.mcard--cta p{font-family:var(--disp);font-size:clamp(17px,1.7vw,21px);line-height:1.34;color:var(--ink);max-width:22ch}


/* ---------- the three most-ordered ---------- */
/* Ashley ranked these herself on the call, so the numbering carries real
   information — it is her order, not decoration. */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(38px,5vw,56px)}
@media(max-width:860px){.three{grid-template-columns:1fr}}
.tcard{position:relative}
.tcard-img{position:relative;overflow:hidden;background:var(--fir)}
.tcard-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .7s var(--ease)}
.tcard:hover .tcard-img img{transform:scale(1.04)}
.tcard-n{position:absolute;top:0;left:0;z-index:2;display:grid;place-items:center;
  width:clamp(42px,4vw,54px);aspect-ratio:1;background:var(--griddle);color:var(--fog);
  font-family:var(--disp);font-weight:700;font-size:clamp(14px,1.3vw,17px);letter-spacing:.02em}
.tcard h3{margin-top:18px;font-family:var(--disp);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(20px,2vw,26px);line-height:1.14;color:var(--ink)}
.tcard p{margin-top:9px;font-size:14.5px;line-height:1.62;color:var(--body);max-width:38ch}
.dark .tcard h3{color:var(--fog)}
.dark .tcard p{color:var(--body-dk)}

/* ---------- sauce board: the "+ more" pot ---------- */
.jar--more .jar-well{display:grid;place-items:center;background:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(247,244,238,.22)}
.jar--more .jar-well span{font-family:var(--disp);font-size:30px;font-weight:400;
  color:rgba(247,244,238,.5);line-height:1}
.jar--more[aria-pressed="true"] .jar-well{box-shadow:inset 0 0 0 2px var(--amber)}
.jar--more[aria-pressed="true"] .jar-well span{color:var(--amber)}
.jar-well--more::after{display:none}
.stamp{display:inline-block;margin-top:24px;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber);border:1px solid rgba(216,163,63,.4);padding:8px 13px}

/* ---------- catering grid, light ground ---------- */
.cater-grid--light{background:var(--fog-2);border-color:var(--fog-2);margin-top:clamp(34px,4vw,48px)}
.cater-grid--light .cater-item{background:var(--fog);backdrop-filter:none}
.cater-grid--light .cater-item h3{color:var(--ink)}
.cater-grid--light .cater-item p{color:var(--body)}
@media(max-width:860px){.cater-grid--light{grid-template-columns:1fr}}

/* ---------- the enquiry form ---------- */
/* Ashley would rather people ring, so the phone side leads and the form is
   the "or send the details" path beside it. */
.bookgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,68px);align-items:start}
@media(max-width:900px){.bookgrid{grid-template-columns:1fr}}
.btn--big{font-size:16px;padding:17px 26px}
.formcard{background:rgba(247,244,238,.05);border:1px solid var(--line);padding:clamp(22px,3vw,34px)}
.formcard form{display:flex;flex-direction:column;gap:15px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.frow{grid-template-columns:1fr}}
.formcard label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,238,.6);font-family:var(--sans)}
.formcard input,.formcard select,.formcard textarea{width:100%;font:400 15px/1.5 var(--sans);
  color:var(--fog);background:rgba(23,16,14,.6);border:1px solid var(--line);border-radius:0;
  padding:12px 14px;letter-spacing:normal;text-transform:none;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.formcard textarea{resize:vertical;min-height:96px}
.formcard select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(247,244,238,.5) 50%),
  linear-gradient(135deg,rgba(247,244,238,.5) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.formcard input:hover,.formcard select:hover,.formcard textarea:hover{border-color:rgba(247,244,238,.32)}
.formcard input:focus-visible,.formcard select:focus-visible,.formcard textarea:focus-visible{
  outline:none;border-color:var(--griddle-hi);background:rgba(23,16,14,.85)}
.formcard input::placeholder,.formcard textarea::placeholder{color:rgba(247,244,238,.3)}
.formcard button{align-self:flex-start;margin-top:6px;border:none;cursor:pointer}
.fnote{font-size:12.5px;line-height:1.6;color:rgba(247,244,238,.5);max-width:44ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Confirmation panel. Shown by site.js, which also forces every .rv ancestor
   open — without that it renders at opacity 0 and reads as a broken form. */
.sent{max-width:60ch;margin-top:8px;border-left:3px solid var(--griddle);padding:22px 0 22px 24px}
.sent h3{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.6vw,30px);color:var(--fog);line-height:1.1}
.sent p{margin-top:12px;font-size:15.5px;line-height:1.7;color:var(--body-dk)}
.sent a{color:var(--griddle-hi);font-weight:600}


/* ---------- the sign's own gold rule, used once per dark band ---------- */
.cater{background:var(--oxblood)}


/* ---------- hours ---------- */
/* Real, from two agreeing listings. A hairline row per band so the shape of
   the week is readable at a glance rather than as a paragraph. */
.hrow{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:none}
.hrow span{font-size:13px;color:rgba(247,241,228,.6)}
.hrow b{font-family:var(--disp);font-size:14px;font-weight:600;color:var(--fog);white-space:nowrap}
.foot-hours{display:block;margin-top:18px;max-width:30ch}
.foot-hours .hrow{padding:7px 0;border-color:rgba(247,241,228,.1)}
.foot-hours .hrow span{font-size:12px}
.foot-hours .hrow b{font-size:12.5px}
/* On a light ground the same rows have to flip. */
.tint .hrow span,section:not(.dark):not(.cater) .hrow span{color:var(--body)}
.tint .hrow b,section:not(.dark):not(.cater) .hrow b{color:var(--ink)}
.tint .hrow,section:not(.dark):not(.cater) .hrow{border-color:var(--line-dk)}

/* ---------- their real sign, once it is dropped in ---------- */
.brand-mark--img{width:48px;height:48px;object-fit:cover;background:none}


/* ---------- their real sign, used as the brand lockup ---------- */
/* The artwork already carries the wordmark and the tagline, so it stands on
   its own — no mark-plus-text lockup beside it. */
.brand--logo{display:inline-flex;align-items:center}
.brand--logo img{height:126px;width:auto;background:none;display:block}
@media(max-width:640px){.brand--logo img{height:104px}}

/* ============================================================
   TODAY'S SPECIALS — driven by Stacey's Google Sheet.

   Two boards, food and ice cream, each hidden until the sheet has
   something for today. `[hidden]` is forced because .sp-card is a
   flex item and flex would otherwise override the attribute — the
   band would sit there empty on every quiet day.
   ============================================================ */
.sp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:14px;margin-bottom:clamp(20px,2.6vw,32px)}
.sp-row:empty{display:none}
.sp-card[hidden]{display:none!important}
.sp-card{display:flex;align-items:stretch;gap:0;overflow:hidden;
  background:var(--ink);color:var(--fog);border-radius:3px;
  box-shadow:0 18px 40px -30px rgba(25,17,16,.8)}
.sp-card--ice{background:var(--fir)}
.sp-img{flex:0 0 116px;overflow:hidden}
.sp-img img{width:100%;height:100%;object-fit:cover;display:block}
.sp-body{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.sp-label{font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.sp-item{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.1vw,25px);
  line-height:1.1;letter-spacing:-.01em}
.sp-note{font-size:13.5px;line-height:1.45;opacity:.78}

/* today's row in the hours list, so a visitor's eye lands on it first */
.hrow.is-today span,.hrow.is-today b{color:var(--amber)}

/* the community section — cream ground so it reads as a breath between
   the dark sauce band and whatever follows it */
.community{background:var(--fog-2);padding:clamp(56px,7vw,96px) 0}
.community .lead{max-width:62ch}