/* ══════════════════════════════════════════════════════════════
   Three Bear's Cafe — Heber-Overgaard, Arizona

   NO LOGO SUPPLIED. Palette derived from the subject's world:
   Mogollon Rim ponderosa, cabin timber, griddle and maple. Kept
   deliberately cheap to re-skin — every colour lives in the ONE
   :root block below, and no component hard-codes a hex.
   Deliberately NOT cream + terracotta serif (the default AI look).

   Contrast computed before a line of this was written:
     pine  #1A211C on oat   14.96      body  #464F48 on oat   7.73
     muted #69726B on oat    4.53      maple #8A4E18 on oat   6.01
     oat on maple (button)   6.01      oat on pine (band)    14.96
     honey #D9A45C on pine   7.37

   ⚠ maple on pine is 2.49 — the light-ground accent must NEVER
   appear on a dark band. honey is the dark-ground colour. Both are
   in the tokens; using the wrong one is the mistake to avoid.
   ══════════════════════════════════════════════════════════════ */
:root{
  --oat:#F7F4ED;          /* canvas — batter, not white */
  --paper:#FFFDF8;
  --oat-2:#EBE5D8;        /* wells */
  --pine:#1A211C;         /* ink + dark bands */
  --pine-2:#141A16;
  --body:#464F48;
  --muted:#69726B;
  --maple:#8A4E18;        /* THE accent — light grounds only */
  --maple-h:#6E3D12;
  --honey:#D9A45C;        /* labels/accents on dark grounds only */
  --rule:#DFD8C9;
  --rule-2:#EDE8DC;

  --disp:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;

  --wrap:1220px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:400;
  background:var(--oat);color:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
/* height:auto is load-bearing — without it the width/height attributes apply as
   presentational hints and the used height beats aspect-ratio. */
img,video{max-width:100%;height:auto;display:block}
figure{margin:0}
::selection{background:var(--maple);color:var(--oat)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(74px,9vw,138px);position:relative}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--maple);
  color:var(--oat);padding:13px 20px;font-weight:600;font-size:14px}
.skip:focus{left:12px;top:12px}

/* ── type: display 400, normal tracking, sentence case ── */
h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.08;
  letter-spacing:0;color:var(--pine)}
.h1{font-size:clamp(42px,6.6vw,90px);line-height:1.02}
.h2{font-size:clamp(31px,4.5vw,60px)}
h1 em,h2 em{font-style:normal;color:var(--maple)}
.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--body);line-height:1.66}
.label{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.label::before{content:"";width:22px;height:1px;background:var(--maple)}
.label.center{justify-content:center}
.label.center::after{content:"";width:22px;height:1px;background:var(--maple)}
.sec-head{max-width:840px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .h2{margin-top:15px}
.sec-head .lead{margin-top:18px;max-width:58ch}

/* ── every self-dark section shares these colour rules.
      (Six previous builds shipped with em/.label keeping light-canvas
      colours because the section painted its own dark background but
      didn't match a `.dark …` selector. Fold them ALL in here.) ── */
.hero,.phead,.cook,.dark-split,.cta,.stmt{color:#DDE3DC}
.hero .h1,.phead .h1,.cook .h2,.dark-split .h2,.cta .h2,.stmt .stmt-p{color:var(--oat)}
.hero em,.phead em,.cook em,.dark-split em,.cta em,.stmt em{color:var(--honey)}
.hero .label,.phead .label,.cook .label,.dark-split .label,.cta .label{color:var(--oat)}
.hero .label::before,.hero .label::after,
.phead .label::before,.phead .label::after,
.cook .label::before,.cook .label::after,
.dark-split .label::before,.dark-split .label::after,
.cta .label::before,.cta .label::after{background:var(--honey)}
.hero .lead,.phead .lead,.dark-split .lead{color:#D6DCD5}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);
  font-weight:600;font-size:14.5px;padding:16px 28px;border-radius:2px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--fill{background:var(--maple);color:var(--oat)}
.btn--fill:hover{background:var(--maple-h);transform:translateY(-1px)}
.btn--light{background:var(--oat);color:var(--pine)}
.btn--light:hover{background:#fff;transform:translateY(-1px)}
.btn--onDark{border-color:rgba(247,244,237,.4);color:var(--oat)}
.btn--onDark:hover{border-color:var(--oat);background:rgba(247,244,237,.09)}
.btn:focus-visible{outline:2px solid var(--honey);outline-offset:3px}

/* ── nav: fixed, never sticky (a nav in flow pushes a 100vh hero down) ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;background:rgba(247,244,237,.84);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--rule);background:rgba(247,244,237,.97)}
.nav-in{display:flex;align-items:center;gap:22px;height:78px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--maple)}
.brand-txt b{display:block;font-family:var(--disp);font-weight:500;font-size:20px;
  color:var(--pine);line-height:1}
.brand-txt small{display:block;font-family:var(--sans);font-size:9px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.mark{flex:none}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-size:14.5px;color:var(--body);position:relative;padding-block:7px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--maple);transition:right .35s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--pine)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-r{display:flex;align-items:center;gap:14px;flex:none}
.nav-tel{font-family:var(--disp);font-size:19px;color:var(--pine)}
.nav-tel:hover{color:var(--maple)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  padding:15px 12px;background:none;border:0;cursor:pointer;min-height:44px;min-width:44px}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--pine);
  transition:transform .35s var(--ease),opacity .25s}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-overlay{position:fixed;inset:0;z-index:110;background:rgba(247,244,237,.99);
  backdrop-filter:blur(18px);padding-top:104px;opacity:0;visibility:hidden;
  transition:opacity .35s,visibility .35s}
body.menu-open .nav-overlay{opacity:1;visibility:visible}
.nav-overlay a{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(32px,8.5vw,54px);color:var(--pine);padding:14px 0;
  border-bottom:1px solid var(--rule)}
.nav-overlay a:hover{padding-left:12px;color:var(--maple)}
.ov-foot{margin-top:26px;font-size:15px;color:var(--muted)}
.ov-foot a{display:inline;font-size:15px;padding:0;border:0;color:var(--maple)}

/* ── hero / page header ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;
  padding:120px 0 clamp(54px,7vh,88px);overflow:hidden;background:var(--pine-2)}
@supports (min-height:100svh){.hero{min-height:100svh}}
.hero-bg,.phead-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,.hero-bg video,.phead-bg img,.phead-bg video{width:100%;height:100%;object-fit:cover}
.phead-bg img,.phead-bg video{opacity:.55}
.hero-bg .vfallback,.phead-bg .vfallback{display:none}
@media(prefers-reduced-motion:reduce){
  .hero-bg video,.phead-bg video{display:none}
  .hero-bg .vfallback,.phead-bg .vfallback{display:block;width:100%;height:100%;object-fit:cover}
}
/* Directional gradients at high image opacity — never a flat wash. The radial
   is anchored on the copy so the veil darkens where the type is and fades off
   the subject. Stops get tuned to the real photo's brightness once it exists. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(126% 92% at 6% 78%, rgba(16,20,17,.74) 0%, rgba(16,20,17,.30) 46%, rgba(16,20,17,0) 70%),
             linear-gradient(180deg,rgba(16,20,17,.70) 0%,rgba(16,20,17,.30) 34%,rgba(16,20,17,.66) 72%,rgba(16,20,17,.93) 100%),
             linear-gradient(96deg,rgba(16,20,17,.88) 0%,rgba(16,20,17,.52) 52%,rgba(16,20,17,.10) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{margin-top:18px;max-width:14ch}
.hero .lead{margin-top:20px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

.phead{position:relative;padding:clamp(112px,13vw,168px) 0 clamp(48px,6vw,80px);
  overflow:hidden;background:var(--pine-2)}
.phead-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,20,17,.58) 0%,rgba(16,20,17,.74) 60%,rgba(16,20,17,.93) 100%)}
.phead .wrap{position:relative;z-index:2}
.phead h1{margin-top:16px}
.phead .lead{margin-top:19px;max-width:56ch}
.crumb{font-size:12.5px;color:#AFB8AF;margin-bottom:18px}
.crumb a:hover{color:var(--honey)}

/* ── marquee strip ── */
.strip{background:var(--paper);border-block:1px solid var(--rule);padding-block:0}
.strip .wrap{padding-inline:0}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-2)}
@media(max-width:820px){.strip-in{grid-template-columns:repeat(2,1fr)}}
.strip-i{background:var(--paper);padding:28px clamp(16px,2.4vw,30px);text-align:center}
.strip-i b{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(26px,3vw,38px);color:var(--maple)}
.strip-i .u{font-size:.6em;vertical-align:.3em;margin-left:2px}
.strip-i span{display:block;margin-top:7px;font-size:12.5px;color:var(--muted)}

/* ── centred statement ── */
.stmt{background:var(--pine);padding-block:clamp(64px,7.5vw,110px)}
.stmt-p{font-family:var(--disp);font-weight:400;text-align:center;
  font-size:clamp(23px,3.2vw,40px);line-height:1.3;max-width:22ch;margin:0 auto}

/* ══════════════════════════════════════════════════════════════
   THE GRIZZLY — the one signature. A tall rail with a pinned
   stage; stills cross-fade on opacity. Stills, never scrubbed
   video (video scrubbing stalls on mobile).
   ══════════════════════════════════════════════════════════════ */
.cook{padding:0;background:var(--pine-2)}
.cook-rail-outer{position:relative;height:calc(var(--frames,6) * 100vh)}
.cook-stage{position:sticky;top:0;height:100vh;overflow:hidden}
@supports (height:100svh){.cook-stage{height:100svh}}
.cook-media{position:absolute;inset:0;z-index:0;background:var(--pine-2)}
/* all frames in the DOM and cross-faded — swapping src mid-scroll flashes through */
.cook-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease)}
.cook-media img.is-on{opacity:1}
.cook-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(16,20,17,.84) 0%,rgba(16,20,17,.44) 30%,rgba(16,20,17,.28) 60%,rgba(16,20,17,.72) 84%,rgba(16,20,17,.96) 100%),
             linear-gradient(94deg,rgba(16,20,17,.92) 0%,rgba(16,20,17,.60) 44%,rgba(16,20,17,.08) 100%)}
.cook-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:clamp(40px,7vh,84px)}
.cook-copy{max-width:38ch;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cook-copy.swap{opacity:0;transform:translateY(8px)}
.cook-step{display:flex;align-items:center;gap:12px;font-family:var(--sans);
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--honey)}
.cook-step::before{content:"";width:26px;height:1px;background:var(--honey)}
.cook-copy h3{font-family:var(--disp);font-weight:400;color:var(--oat);
  font-size:clamp(29px,4.4vw,56px);line-height:1.06;margin-top:15px}
.cook-copy p{margin-top:16px;font-size:clamp(15.5px,1.3vw,18px);line-height:1.62;color:#D6DCD5}
.cook-head{position:absolute;top:clamp(90px,12vh,128px);left:0;right:0;z-index:3}
.cook-head .h2{max-width:15ch;margin-top:14px}
.cook-prog{margin-top:clamp(24px,3vh,36px);height:2px;background:rgba(247,244,237,.22);
  max-width:340px}
.cook-prog span{display:block;height:100%;width:0;background:var(--honey);
  transition:width .4s var(--ease)}
.cook-rail{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  z-index:4;display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.cook-rail button{background:none;border:0;padding:6px 0 6px 22px;cursor:pointer;
  display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:600;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#AFB8AF;
  transition:color .3s}
.cook-rail button i{font-style:normal;width:24px;height:1px;background:#AFB8AF;
  display:block;transition:width .4s var(--ease),background .3s}
.cook-rail button[aria-current="true"]{color:var(--oat)}
.cook-rail button[aria-current="true"] i{width:42px;background:var(--honey)}
.cook-rail button:hover{color:var(--oat)}
.cook-rail button:focus-visible{outline:2px solid var(--honey);outline-offset:3px}
@media(max-width:900px){.cook-rail{display:none}.cook-copy{max-width:none}}
/* reduced motion + no-JS: drop the rig, lay the frames out as a plain grid */
@media(prefers-reduced-motion:reduce){
  .cook-rail-outer{height:auto}
  .cook-stage{position:static;height:auto}
  .cook-media{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
  .cook-media img{position:static;opacity:1;height:auto;aspect-ratio:3/2}
  .cook-media::after,.cook-rail,.cook-prog{display:none}
  .cook-head{position:static;margin-bottom:24px}
  .cook-in{padding-block:clamp(34px,5vw,56px)}
}
.no-js .cook-rail-outer{height:auto}
.no-js .cook-stage{position:static;height:auto}
.no-js .cook-media{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.no-js .cook-media img{position:static;opacity:1;height:auto;aspect-ratio:3/2}
.no-js .cook-media::after,.no-js .cook-rail{display:none}
.no-js .cook-head{position:static;margin-bottom:24px}

/* ── section grounds: the paper/dark rhythm, stated rather than inherited.
      Every section carries an explicit background so the alternation is a
      decision and the class-coverage check has something to find. ── */
.split-sec{background:var(--oat)}
.visit-sec{background:var(--oat)}
.faq-sec{background:var(--oat)}

/* ── splits ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:940px){.split{grid-template-columns:1fr}}
.split-media{min-width:0}
.frame{position:relative;overflow:hidden;border-radius:2px;background:var(--oat-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.wide{aspect-ratio:3/2}
.frame.tall{aspect-ratio:4/5}
.dark-split{background:var(--pine)}
.dark-split .frame{background:var(--pine-2)}

/* ── pull quote ── */
.pull{margin-top:clamp(24px,3vw,34px);padding-left:clamp(20px,2.4vw,30px);
  border-left:2px solid var(--maple)}
.pull blockquote{font-family:var(--disp);font-weight:400;
  font-size:clamp(19px,2.2vw,26px);line-height:1.36;color:var(--pine)}
.pull figcaption{margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ── rating breakdown ── */
.bd-row{display:flex;gap:clamp(24px,3.4vw,46px);margin-top:clamp(26px,3vw,36px);
  padding-top:22px;border-top:1px solid var(--rule)}
.bd b{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(24px,2.7vw,32px);color:var(--maple);line-height:1}
.bd span{display:block;margin-top:5px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ── reviews ── */
.revs-sec{background:var(--paper)}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.revs{grid-template-columns:1fr}}
.rev{padding:clamp(24px,2.9vw,34px);border-top:2px solid var(--maple);
  display:flex;flex-direction:column;background:var(--oat)}
.rev .mark-q{font-family:var(--disp);font-size:42px;line-height:.7;
  color:var(--maple);height:22px}
.rev blockquote{font-family:var(--disp);font-weight:400;
  font-size:clamp(17.5px,1.9vw,21px);line-height:1.4;color:var(--pine);
  margin-top:18px;flex:1}
.rev figcaption{margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

/* ── checks ── */
.checks{list-style:none;margin-top:26px}
.checks li{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--rule-2)}
.checks li:last-child{border-bottom:none}
.checks .mk{flex:none;width:24px;height:24px;border:1px solid var(--maple);
  color:var(--maple);display:grid;place-items:center;font-size:10.5px;
  font-weight:700;margin-top:3px;border-radius:50%}
.checks h3{font-family:var(--sans);font-size:16.5px;font-weight:600;color:var(--pine)}
.checks p{font-size:14.5px;margin-top:5px;line-height:1.56}
.dark-split .checks li{border-bottom-color:rgba(247,244,237,.14)}
.dark-split .checks h3{color:var(--oat)}
.dark-split .checks .mk{border-color:var(--honey);color:var(--honey)}

/* ── menu ── */
.menu-sec{background:var(--paper)}
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.6vw,56px)}
@media(max-width:820px){.mgrid{grid-template-columns:1fr}}
.msec h3{font-family:var(--disp);font-weight:400;font-size:clamp(25px,2.7vw,34px);
  padding-bottom:14px;border-bottom:2px solid var(--pine)}
.msec .snote{margin-top:11px;font-size:13.5px;color:var(--muted);line-height:1.55}
.msec ul{list-style:none;margin-top:8px}
.msec li{padding:14px 0;border-bottom:1px solid var(--rule-2);display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.mprice{font-weight:600;font-size:14.5px;color:var(--pine);white-space:nowrap;flex-shrink:0}
/* Sits where a price used to, when prices are off, and says only that the
   item comes two ways. Deliberately lighter than .mprice — it is an aside,
   not a number — and it must be allowed to WRAP, because "Full or Mama Bear
   portion" is far too long to sit on one line on a phone. */
.msize{font-weight:400;font-size:13px;color:var(--muted);text-align:right;
  line-height:1.45;flex-shrink:1;min-width:0}
.msec li:last-child{border-bottom:none}
.mname{font-weight:600;font-size:16px;color:var(--pine)}
.mname i{display:block;font-style:normal;font-weight:400;font-size:14px;
  color:var(--muted);margin-top:4px;line-height:1.5}
.board-foot{margin-top:clamp(26px,3vw,38px);font-size:14px;line-height:1.62;
  color:var(--muted);max-width:72ch}

/* ── hours + live status ── */
.status{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;border:1px solid var(--rule);border-radius:2px;
  padding:20px 24px;background:var(--paper);margin-top:24px}
.status-l{display:flex;align-items:center;gap:14px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--maple);flex:none;
  box-shadow:0 0 0 0 rgba(138,78,24,.5);animation:pulse 2.4s infinite}
.status.off .dot{background:var(--muted);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(138,78,24,.42)}70%{box-shadow:0 0 0 13px rgba(138,78,24,0)}100%{box-shadow:0 0 0 0 rgba(138,78,24,0)}}
.status b{display:block;color:var(--pine);font-size:16px;font-weight:600}
.status span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.status-badge{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 15px;border:1px solid var(--maple);color:var(--maple);border-radius:2px}
.status.off .status-badge{border-color:var(--rule);color:var(--muted)}
.hours{margin-top:24px}
.hrow{display:flex;justify-content:space-between;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--rule-2);font-size:15.5px}
.hrow:last-child{border-bottom:none}
.hrow b{color:var(--pine);font-weight:600}
.hrow.is-today b{color:var(--maple)}
.hrow.is-shut span{color:var(--muted)}
.nowtag{margin-left:9px;font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oat);background:var(--maple);padding:3px 7px;
  vertical-align:2px;border-radius:2px}

/* ── info list + chips ── */
.info{list-style:none;margin-top:24px}
.info li{padding:17px 0;border-bottom:1px solid var(--rule-2)}
.info li:last-child{border-bottom:none}
.info b{display:block;color:var(--pine);font-size:16px;font-weight:600}
.info span,.info a{display:block;font-size:14.5px;color:var(--body);margin-top:4px}
.info a:hover{color:var(--maple)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;list-style:none}
.chips li{font-size:13px;color:var(--body);border:1px solid var(--rule);
  padding:9px 16px;background:var(--paper);border-radius:2px}
.chips li.hub{border-color:var(--maple);color:var(--maple);font-weight:600}

/* ── map ── */
.map-sec{background:var(--paper)}
.mapbox{border:1px solid var(--rule);border-radius:2px;background:var(--oat-2);
  overflow:hidden;aspect-ratio:21/9;position:relative}
@media(max-width:760px){.mapbox{aspect-ratio:4/3}}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── FAQ ── */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:21px 46px 21px 0;position:relative;
  font-family:var(--sans);font-weight:600;font-size:clamp(16px,1.5vw,17.5px);
  line-height:1.4;color:var(--pine);transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease),border-color .25s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.faq summary:hover,.faq details[open] summary{color:var(--maple)}
.faq summary:hover::after{border-color:var(--maple)}
.faq summary:focus-visible{outline:2px solid var(--maple);outline-offset:3px}
.faq details > div{padding:0 46px 24px 0}
.faq details > div p{font-size:15.5px;line-height:1.62;color:var(--body);max-width:70ch}

/* ── CTA band ── */
.cta{background:var(--pine-2);text-align:center}
.cta .h2{margin-top:15px}
.cta .lead{margin:14px auto 0;max-width:50ch;color:#D6DCD5}
.cta-tel{display:inline-block;margin-top:26px;font-family:var(--disp);font-weight:400;
  font-size:clamp(34px,5.4vw,64px);color:var(--honey);line-height:1}
.cta-tel:hover{color:#E8BC7E}
.cta-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:28px}

/* ── footer ── */
footer{background:var(--paper);border-top:1px solid var(--rule);
  padding-block:clamp(48px,6vw,74px) 30px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(26px,3.4vw,50px)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-brand p{margin-top:16px;font-size:14px;color:var(--muted);max-width:40ch;line-height:1.6}
.foot-col h4{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:14.5px;color:var(--body);margin-bottom:9px}
.foot-col a:hover{color:var(--maple)}
.foot-accent{color:var(--maple)!important}
.foot-area{margin-top:clamp(30px,3.6vw,44px);padding-top:22px;
  border-top:1px solid var(--rule-2);font-size:13px;color:var(--muted)}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:18px;font-size:12.5px;color:var(--muted)}

/* ── mobile call bar ── */
.mbar{display:none}
@media(max-width:760px){
  .nav-links,.nav-tel,.nav-r .btn{display:none}
  .nav-toggle{display:flex}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;
    bottom:0;z-index:130;border-top:1px solid var(--rule)}
  .mbar a{padding:17px 10px;text-align:center;font-size:14px;font-weight:600}
  .mbar .call{background:var(--maple);color:var(--oat)}
  .mbar .book{background:var(--paper);color:var(--pine)}
  body{padding-bottom:58px}
  .hero{padding-bottom:104px}
}

/* ── reveals ── */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.1s}
.rv[data-d="2"]{transition-delay:.2s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* seasonal hours labels */
.hours-season{margin:14px 0 4px;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass)}
.hours-other{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--body)}

/* ---------- pancake of the month ---------- */
.potm{background:var(--panel);border-block:1px solid var(--line)}
.potm-in{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(24px,4vw,58px);
  align-items:center;padding-block:clamp(38px,5vw,64px)}
@media(max-width:760px){.potm-in{grid-template-columns:1fr}}
.potm-media img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:2px}
.potm-media.is-empty{display:none}
.potm-copy .h2{margin-top:12px}
.potm-name{margin-top:14px;font-family:var(--display);font-size:clamp(21px,2.4vw,29px);
  font-weight:500;line-height:1.25;color:var(--ink)}
.potm-note{margin-top:10px;font-size:14px;line-height:1.6;color:var(--body)}
.potm-sub{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--body);max-width:46ch}
.potm-copy .btn{margin-top:22px}


/* ---------- the duo band: real kitchen photographs ---------- */
.duo-band{padding-block:clamp(56px,7vw,96px);background:var(--oat-2);
  border-block:1px solid var(--line)}
.duo-band .h2{margin-top:12px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px);
  margin-top:clamp(28px,4vw,44px)}
@media(max-width:700px){.duo{grid-template-columns:1fr}}
.duo figcaption{margin-top:12px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--body)}

/* ---------- trio: the specials-board photographs ---------- */
.trio{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.trio{grid-template-columns:1fr}}
.trio-band{padding-bottom:clamp(28px,4vw,44px)}


/* ---------- For the Cubs: the bearcub pancake behind the board ---------- */
.msec--cubs{position:relative;overflow:hidden;isolation:isolate;border-radius:2px}
.msec--cubs .msec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:78% 30%;z-index:-2;opacity:.9}
/* Paper veil, solid under the type, lifting toward the bear's face. */
.msec--cubs::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(102deg,var(--oat) 0%,var(--oat) 46%,
    rgba(247,244,237,.92) 62%,rgba(247,244,237,.55) 82%,rgba(247,244,237,.2) 100%)}
.msec--cubs{padding:clamp(18px,2.4vw,28px)}