/* ============================================================
   Broken Barrel — Stanfield, Oregon
   Mercedes-spec (see memory/reference_mercedes_design):
   light canvas, display type at weight 400 with normal tracking,
   grey eyebrows, square buttons, drama from full-bleed photo bands.

   Gena Clayton's own line is the brief: "We're not a bar, we're a
   restaurant with a bar." So this is oak and cream and warm light —
   a room you'd bring your kids to — with char-black bands and one
   barrel-red accent. Deliberately not saloon-dark.
   ============================================================ */
:root{
  --paper:#FFFFFF;
  --paper-2:#F6F2EA;      /* oak cream — recessed panels */
  --band:#EAE3D6;         /* second band */
  --ink:#171310;          /* charred oak */
  --body-ink:#3E3630;
  --muted:#615850;
  /* Board copy sits over a veiled photograph, not over paper. Measured
     2026-08-22 across all six columns: the darkest veiled pixel is
     rgb(194,188,182). --muted itself is only 3.70:1 there and would FAIL AA on
     the 13.5px item descriptions. This token is 5.23 on the board, 9.84 on
     paper. Re-measure if the board backgrounds are ever swapped again —
     see the notes on BOARD_GROUND in _work/qa.py. */
  --muted-on-photo:#4A423B;
  --rule:#E3DACB;

  --void:#171310;         /* dark bands */
  --silver:#A39889;
  --edge:rgba(255,255,255,.11);
  --edge-2:rgba(255,255,255,.2);

  --barrel:#7E2E26;       /* the accent, on light — AA on all grounds (9.11/8.16/7.14) */
  --ember:#EA8455;        /* the accent, on dark (6.97) — HSV sat .64, clear of the pink zone */
  --oak:#B07A3C;          /* barrel oak — decorative only, never text */

  --disp:'Fraunces','Georgia',serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;

  --wrap:1260px;
  --pad:clamp(20px,5vw,68px);
  --ease:cubic-bezier(.22,1,.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(--body);font-size:17px;line-height:1.62;font-weight:400;
  background:var(--paper);color:var(--body-ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--barrel);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:clamp(76px,9.5vw,152px);position:relative}
section.tight{padding-block:clamp(44px,5vw,72px)}
.panel{background:var(--paper-2);border-block:1px solid var(--rule)}

/* ---------- dark grounds: ONE canonical list ----------
   .hero/.phead/.cta/.cook paint their own dark background but are not .dark,
   so every inversion is driven from this single list. Adding overrides
   section-by-section is what makes buttons vanish on dark. */
.dark{background:var(--void);color:var(--silver)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;line-height:1.04;letter-spacing:0;color:var(--ink)}
.h1{font-size:clamp(44px,7.4vw,112px);line-height:.98;letter-spacing:-.01em}
.h2{font-size:clamp(34px,5.2vw,72px)}
.h3{font-size:clamp(21px,2.2vw,27px);font-weight:500;font-family:var(--body);letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--barrel)}
.lead{font-size:clamp(16.5px,1.4vw,19px);color:var(--body-ink);line-height:1.62}
.label{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.label::before{content:"";width:24px;height:1px;background:var(--muted);opacity:.7}
.label.center{justify-content:center}
.sec-head{max-width:880px;margin-bottom:clamp(34px,4.4vw,60px)}
.sec-head .h2{margin-top:14px}
.sec-head .lead{margin-top:20px;max-width:62ch}
.sec-head.center{margin-inline:auto;text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--body);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:17px 30px;border-radius:0;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(--ink);color:#fff}
.btn--fill:hover{background:#241E19;transform:translateY(-1px)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--barrel);outline-offset:3px}
.go{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.go:hover{gap:12px}

/* ---------- nav ---------- */
/* fixed, not sticky: a nav in flow pushes the 100vh flip panels down by its own
   height, so their bottom-aligned content lands below the fold. */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--rule);background:rgba(255,255,255,.97)}
.nav-in{display:flex;align-items:center;gap:24px;height:80px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-txt b{display:block;font-family:var(--disp);font-weight:500;font-size:23px;letter-spacing:.01em;color:var(--ink);line-height:1;text-transform:uppercase}
.brand-txt small{display:block;font-family:var(--body);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;gap:30px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:400;color:var(--body-ink);position:relative;padding-block:7px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ink);transition:right .35s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
.nav-r{display:flex;align-items:center;gap:16px;flex:none}
.nav-tel{font-family:var(--disp);font-weight:500;font-size:21px;color:var(--ink)}
.nav-tel:hover{color:var(--barrel)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--ink);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(255,255,255,.98);backdrop-filter:blur(20px);padding-top:108px;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(34px,9vw,58px);color:var(--ink);padding:14px 0;border-bottom:1px solid var(--rule)}
.nav-overlay a:hover{padding-left:12px;color:var(--barrel)}
.ov-foot{margin-top:28px;font-size:15px;color:var(--muted)}
.ov-foot a{display:inline;font-size:15px;padding:0;border:0;color:var(--ink);text-decoration:underline}

/* ============================================================
   HERO FLIPBOOK — sticky stack, the mbusa.com mechanism.
   N full-viewport position:sticky top:0 panels inside a container
   N screens tall. They slide up and cover each other on scroll.
   ============================================================ */
.flip{position:relative;background:var(--void)}
.flip-panel{
  position:sticky;top:0;height:100vh;min-height:560px;overflow:hidden;
  display:flex;align-items:flex-end;padding:118px 0 clamp(56px,8vh,96px);
}
@supports (height:100svh){.flip-panel{height:100svh}}
.flip-panel .wrap{position:relative;z-index:2;width:100%}
.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;
  /* The whole promise here is light and space, so the scrim is lifted 0.15
     from the inherited value to let the daylight actually read. That is the
     limit: measured over the hero frame with the text hidden, the body lead
     lands at 4.94 and one more step down puts it under the 4.5 AA bar.
     White 13.16, accent 8.21. */
  background:linear-gradient(180deg,rgba(23,19,16,.45) 0%,rgba(23,19,16,.25) 26%,rgba(23,19,16,.65) 62%,rgba(23,19,16,.80) 100%),
             linear-gradient(94deg,rgba(23,19,16,.78) 0%,rgba(23,19,16,.53) 58%,rgba(23,19,16,.10) 100%)}
.flip h1,.flip h2{color:#fff;text-shadow:0 8px 60px rgba(0,0,0,.55);max-width:17ch}
.flip .lead{color:#D6CEC0;margin-top:22px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* the rail: zero-height sticky placed FIRST so it rides the whole stack */
.flip-nav{position:sticky;top:0;height:0;z-index:6;pointer-events:none}
.flip-nav .rail{position:absolute;right:clamp(14px,2.4vw,38px);top:50vh;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:13px;pointer-events:auto}
.flip-dot{width:2px;height:48px;background:rgba(255,255,255,.26);border:0;padding:0;cursor:pointer;
  position:relative;overflow:hidden;display:block;transition:background .3s}
.flip-dot:hover{background:rgba(255,255,255,.5)}
.flip-dot i{position:absolute;inset:0;display:block;background:#fff;transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.flip-dot.is-on i{transform:scaleY(1)}
.flip-dot:focus-visible{outline:2px solid var(--ember);outline-offset:5px}
@media(max-width:820px){
  /* the container is a zero-height sticky pinned to the viewport top, so any
     `bottom` offset measures back up from y=0 and lands the rail mid-screen,
     straight through the headline. Position from the top instead: just under
     the nav, in the empty band above the bottom-aligned panel content. */
  .flip-nav .rail{right:auto;left:var(--pad);top:120px;bottom:auto;transform:none;flex-direction:row;gap:9px}
  .flip-dot{width:34px;height:2px}
  .flip-dot i{transform:scaleX(0);transform-origin:left}
  .flip-dot.is-on i{transform:scaleX(1)}
}
@media(prefers-reduced-motion:reduce){.flip-dot i{transition:none}}

/* ---------- trust strip ---------- */
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.strip-i{background:var(--paper-2);padding:32px clamp(14px,2vw,28px);text-align:center}
.strip-i b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.6vw,44px);color:var(--ink);line-height:1}
.strip-i b .u{color:var(--barrel)}
.strip-i span{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:11px}
@media(max-width:800px){.strip-in{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   THE FLAT-TOP — scroll-driven replacement sequence
   ============================================================ */
.cook{padding:0;background:var(--void)}
.cook-rail{position:relative;height:560vh;min-height:3400px}
.cook-stage{position:sticky;top:0;height:100vh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
/* must out-specify `.cook-stage>*{position:relative}` — it is a direct child too */
.cook-stage>.cook-frames{position:absolute;inset:0;z-index:0}
.cook-stage>*{position:relative;z-index:3}
.cook-frame{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease)}
.cook-frame img{width:100%;height:100%;object-fit:cover}
.cook-frames::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(23,19,16,.92) 0%,rgba(23,19,16,.72) 22%,rgba(23,19,16,.24) 46%,rgba(23,19,16,.6) 74%,rgba(23,19,16,.95) 100%)}
.cook-top{padding:clamp(86px,10vh,124px) var(--pad) 0}
.cook-top .wrap{padding:0}
.cook-top h2{color:#fff;margin-top:12px;max-width:16ch;padding-bottom:.14em}
.cook-hint{display:flex;align-items:center;gap:11px;margin-top:clamp(28px,3.4vh,42px);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#968B7D}
.cook-hint .bar{width:32px;height:1px;background:var(--ember);animation:hint 2.4s var(--ease) infinite}
@keyframes hint{0%,100%{opacity:.25;transform:translateX(0)}50%{opacity:1;transform:translateX(6px)}}
@media(max-height:820px){.cook-hint{display:none}}
.cook-read{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding:0 var(--pad) 28px;max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;width:100%}
.cook-step{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.cook-name{font-family:var(--disp);font-weight:400;font-size:clamp(34px,5.4vw,68px);color:#fff;line-height:1.02;margin-top:10px}
.cook-note{font-size:15px;color:#BFB5A6;max-width:48ch;margin-top:13px;line-height:1.56}
.cook-meta{flex:none;text-align:right}
.cook-meta b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.4vw,30px);color:#fff}
.cook-meta span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8A8071;margin-top:7px}
.cook-ticks{display:flex;gap:6px;padding:0 var(--pad) clamp(24px,4vh,36px);max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;width:100%}
.cook-ticks i{flex:1;height:1.5px;background:rgba(255,255,255,.14);transition:background .4s}
.cook-ticks i.done{background:rgba(234,132,85,.55)}
.cook-ticks i.on{background:var(--ember)}
@media(max-width:1080px){.cook-ticks{padding-bottom:78px}}

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba{position:relative;border:1px solid var(--rule);background:var(--void);user-select:none;touch-action:pan-y;overflow:hidden}
.ba img{display:block;width:100%;height:auto;pointer-events:none}
.ba .after{position:absolute;inset:0;width:100%;height:100%}
.ba .after img{width:100%;height:100%;object-fit:cover}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 22px rgba(0,0,0,.5);cursor:ew-resize;z-index:4}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(23,19,16,.7);border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(6px)}
.ba-handle .arrows{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;color:#fff;font-size:12px;letter-spacing:2px;white-space:nowrap;line-height:1}
.ba-lab{position:absolute;top:16px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;transition:opacity .3s;pointer-events:none;backdrop-filter:blur(6px)}
.ba-lab.b{left:16px;background:rgba(23,19,16,.72);border:1px solid var(--edge-2);color:#fff}
.ba-lab.a{right:16px;background:#fff;color:var(--ink)}
.ba-cap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;color:var(--muted)}
.ba-cap b{color:var(--ink);font-weight:600}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cards--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards,.cards--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards,.cards--4{grid-template-columns:1fr}}
.card{background:var(--paper);padding:clamp(26px,3vw,42px);transition:background .4s var(--ease)}
.card:hover{background:var(--paper-2)}
.card .n{font-family:var(--body);font-weight:700;font-size:12px;color:var(--muted);letter-spacing:.1em}
.card h3{margin-top:18px}
.card p{font-size:15px;margin-top:12px;line-height:1.58}
.card ul{list-style:none;margin-top:18px}
.card ul li{font-size:14px;color:var(--body-ink);padding-left:16px;position:relative;margin-bottom:7px}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;background:var(--barrel);border-radius:50%}
.card .go{margin-top:20px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
/* NOT `.split.rev` — `.rev` is the review card (border, paper, flex column)
   and it was winning, stacking every reversed split into a bordered box. */
.split--rev .split-media{order:2}
@media(max-width:940px){.split{grid-template-columns:1fr}.split--rev .split-media{order:0}}
.frame{position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2)}
.map-embed{background:var(--paper-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.wide{aspect-ratio:4/3}
.frame.tall{aspect-ratio:4/5}
.frame .tag{position:absolute;left:16px;top:16px;background:rgba(23,19,16,.78);backdrop-filter:blur(6px);border:1px solid var(--edge-2);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px}

/* ---------- checks ---------- */
.checks{list-style:none;margin-top:28px}
.checks li{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--rule)}
.checks li:last-child{border-bottom:none}
.checks .mk{flex:none;width:25px;height:25px;border:1px solid var(--ink);color:var(--ink);display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:3px;border-radius:50%}
.checks h3{font-size:17px;font-family:var(--body);font-weight:600;color:var(--ink)}
.checks p{font-size:14.5px;margin-top:5px;line-height:1.55}

/* ---------- the storm-chaser contrast ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:800px){.versus{grid-template-columns:1fr}}

/* ---------- credentials ---------- */
.creds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.creds{grid-template-columns:1fr}}
.cred{border:1px solid var(--rule);padding:clamp(24px,3vw,36px);background:var(--paper)}
.cred .k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cred b{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(28px,3.2vw,40px);color:var(--ink);margin-top:14px;line-height:1.05}
.cred p{font-size:14px;margin-top:12px;line-height:1.55}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;list-style:none}
.chips li{font-size:13.5px;color:var(--body-ink);border:1px solid var(--rule);padding:9px 17px}
.chips li.hub{border-color:var(--ink);color:var(--ink);font-weight:600}

/* ---------- forms ---------- */
.form-card{border:1px solid var(--rule);background:var(--paper-2);padding:clamp(26px,3.4vw,44px)}
.form-card h3{font-family:var(--disp);font-weight:400;font-size:clamp(28px,3.2vw,40px)}
.form-card .sub{font-size:15px;margin-top:9px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.f-row{grid-template-columns:1fr}}
.field{margin-top:18px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:0;padding:15px 16px;
  transition:border-color .25s,box-shadow .25s;
}
.field textarea{min-height:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#A39A8B}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(23,19,16,.1)}
.chips-pick{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--body);font-size:14px;font-weight:500;color:var(--body-ink);
  background:#fff;border:1px solid var(--rule);border-radius:0;padding:11px 17px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.chip:hover{border-color:var(--muted);color:var(--ink)}
.chip.on{border-color:var(--ink);background:var(--ink);color:#fff;font-weight:600}
.form-success{display:none;text-align:center;padding:22px 0}
.form-success.show{display:block}
.form-success .tick{width:54px;height:54px;border-radius:50%;border:1px solid var(--barrel);color:var(--barrel);display:grid;place-items:center;font-size:22px;margin:0 auto 18px}
.form-note{font-size:12.5px;color:var(--muted);margin-top:15px;line-height:1.5}

/* ---------- page head ---------- */
.phead{position:relative;padding:clamp(112px,13vw,172px) 0 clamp(50px,6vw,84px);overflow:hidden;background:var(--void)}
.phead-bg{position:absolute;inset:0;z-index:0}
.phead-bg img,.phead-bg video{width:100%;height:100%;object-fit:cover;opacity:.66}
/* the video sits over the poster image, which stays as the fallback frame */
.phead-bg video{position:absolute;inset:0;z-index:1}
.phead-bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(23,19,16,.55) 0%,rgba(23,19,16,.72) 55%,rgba(23,19,16,.92) 100%)}
.phead .wrap{position:relative;z-index:2}
.phead h1{margin-top:18px}
.phead .lead{margin-top:22px;max-width:62ch}
.crumb{font-size:12.5px;color:#968B7D;margin-bottom:20px}
.crumb a:hover{color:#fff}

/* ---------- info / hours ---------- */
.info{list-style:none;margin-top:26px}
.info li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.info li:last-child{border-bottom:none}
.info .ic{flex:none;color:var(--ink);margin-top:3px}
.info b{display:block;color:var(--ink);font-size:16.5px;font-weight:600}
.info span,.info a{display:block;font-size:14.5px;color:var(--body-ink);margin-top:4px}
.info a:hover{color:var(--barrel)}
.hours-row{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.hours-row:last-child{border-bottom:none}
.hours-row dd{color:var(--ink);font-weight:600}
.hours-row.is-today dt,.hours-row.is-today dd{color:var(--barrel)}
.nowtag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--barrel);margin-left:10px}
.map-embed{border:1px solid var(--rule);overflow:hidden;aspect-ratio:16/10;background:var(--paper-2)}
.map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.status{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;border:1px solid var(--rule);padding:22px 26px;background:var(--paper-2)}
.status-l{display:flex;align-items:center;gap:15px}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--barrel);box-shadow:0 0 0 0 rgba(126,46,38,.6);animation:pulse 2.4s infinite;flex:none}
.status.off .status-dot{background:var(--muted);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,46,38,.45)}70%{box-shadow:0 0 0 13px rgba(126,46,38,0)}100%{box-shadow:0 0 0 0 rgba(126,46,38,0)}}
.status b{display:block;color:var(--ink);font-size:16px;font-weight:600}
.status span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.status-badge{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--barrel);color:var(--barrel)}
.status.off .status-badge{border-color:var(--muted);color:var(--muted)}

/* ---------- cta ---------- */
.cta{text-align:center;background:var(--void);color:var(--silver)}
.cta .lead{margin:20px auto 0;max-width:56ch}
.cta-tel{display:inline-block;font-family:var(--disp);font-weight:400;font-size:clamp(44px,8vw,104px);color:#fff;margin-top:26px;line-height:1}
.cta-tel:hover{color:var(--ember)}
.cta-btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);background:var(--paper-2);padding:clamp(54px,6vw,80px) 0 32px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid var(--rule)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.foot-brand p{font-size:14.5px;margin-top:18px;max-width:38ch;line-height:1.6}
.foot-col h4{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.foot-col a,.foot-col span{display:block;font-size:14.5px;color:var(--body-ink);padding:5px 0}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:12.5px;color:var(--muted)}

/* ---------- mobile bar ---------- */
.mbar{display:none}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-tel{display:none}
  .nav-r .btn{display:none}
  .nav-r{margin-left:auto}
  .nav-toggle{display:flex}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:130;box-shadow:0 -10px 34px rgba(0,0,0,.28)}
  .mbar a{padding:18px 10px;text-align:center;font-size:14.5px;font-weight:600}
  .mbar .call{background:var(--ink);color:#fff}
  .mbar .book{background:#fff;color:var(--ink);border-top:1px solid var(--rule)}
  body{padding-bottom:60px}
  /* the fixed call bar overlays anything bottom-aligned in a 100vh panel */
  .flip-panel{padding-bottom:112px}
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--barrel);outline-offset:2px}

/* ============================================================
   DARK GROUNDS — one canonical list, every inversion driven here.
   ============================================================ */
.dark h1,.hero h1,.phead h1,.cta h1,.cook h1,.flip h1,
.dark h2,.hero h2,.phead h2,.cta h2,.cook h2,.flip h2,
.dark h3,.phead h3,.cta h3,.cook h3,.flip h3{color:#fff}
.dark h1 em,.phead h1 em,.cta h1 em,.cook h1 em,.flip h1 em,
.dark h2 em,.phead h2 em,.cta h2 em,.cook h2 em,.flip h2 em{color:var(--ember)}
.dark .lead,.phead .lead,.cta .lead,.cook .lead,.flip .lead{color:var(--silver)}
.dark .label,.phead .label,.cta .label,.cook .label,.flip .label{color:rgba(255,255,255,.68)}
.dark .label::before,.phead .label::before,.cta .label::before,.cook .label::before,.flip .label::before{background:rgba(255,255,255,.5)}
.dark .btn--fill,.phead .btn--fill,.cta .btn--fill,.cook .btn--fill,.flip .btn--fill{background:#fff;color:var(--ink)}
.dark .btn--fill:hover,.phead .btn--fill:hover,.cta .btn--fill:hover,.cook .btn--fill:hover,.flip .btn--fill:hover{background:var(--ember);color:var(--ink)}
.dark .btn--ghost,.phead .btn--ghost,.cta .btn--ghost,.cook .btn--ghost,.flip .btn--ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.dark .btn--ghost:hover,.phead .btn--ghost:hover,.cta .btn--ghost:hover,.cook .btn--ghost:hover,.flip .btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.dark .go,.phead .go,.cta .go,.cook .go,.flip .go{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.dark .checks li,.phead .checks li,.cook .checks li{border-bottom-color:var(--edge)}
.dark .checks .mk,.phead .checks .mk,.cook .checks .mk{border-color:var(--ember);color:var(--ember)}
.dark .checks h3,.phead .checks h3,.cook .checks h3{color:#fff}
.dark .chips li,.phead .chips li,.cook .chips li{border-color:var(--edge);color:var(--silver)}

/* ============================================================
   REVIEWS — real quotes, no star schema (ratings conflict)
   ============================================================ */
.rank{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  border:1px solid #DAD2C4;background:var(--band);padding:26px 30px;text-align:center;
  box-shadow:inset 4px 0 0 var(--barrel)}
.rank b{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.2vw,38px);color:var(--ink);line-height:1.1}
.rank span{font-size:13px;color:var(--muted);max-width:46ch}

/* ============================================================
   MENU BOARD
   ============================================================ */
/* overflow visible so a lifted card isn't clipped by the grid */
.board{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);overflow:visible}
@media(max-width:820px){.board{grid-template-columns:1fr}}
.bcol{background:var(--paper);padding:clamp(26px,3.2vw,42px);
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
/* photo sits under a heavy veil. The veil NEVER changes on hover — the card
   comes forward by moving, not by getting harder to read. */
.bcol > .bcol-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.bcol-bg img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform .7s var(--ease)}
/* Veil opacity is a function of how bright the photos are, never a constant to
   inherit. Measured against these four service photos, .83/.78 leaves the small
   copy at 4.75 worst-case over the darkest pixel — one step lighter fails AA. */
.bcol-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.83),rgba(246,242,234,.78))}
.bcol:hover{transform:translateY(-7px);z-index:3;
  box-shadow:0 26px 52px -20px rgba(23,19,16,.3),0 4px 14px -6px rgba(23,19,16,.14)}
.bcol:hover .bcol-bg img{transform:scale(1.09)}

.bcol:focus-within{transform:translateY(-7px);z-index:3;
  box-shadow:0 26px 52px -20px rgba(23,19,16,.3)}
@media(prefers-reduced-motion:reduce){
  .bcol,.bcol-bg img{transition:none}
  .bcol:hover,.bcol:focus-within{transform:none}
  .bcol:hover .bcol-bg img{transform:scale(1.02)}
}
.bcol .k{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-photo)}
.bcol h3{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3vw,36px);color:var(--ink);margin-top:11px}
.bcol .note{font-size:14px;color:var(--muted-on-photo);margin-top:9px;line-height:1.5}
.bcol ul{list-style:none;margin-top:22px}
.bcol li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--body-ink);display:flex;gap:12px;align-items:baseline}
.bcol li:last-child{border-bottom:none}
/* The name holds one line where there is room — letting it shrink at desktop
   squeezed "Bacon Cheese Burger" onto two lines. It may only shrink and wrap
   on narrow screens, where "Coors, Coors Light, Keystone Light, Corona" would
   otherwise push its price off the side of the viewport. */
.bcol li b{color:var(--ink);font-weight:600;flex:none}
@media(max-width:600px){.bcol li b{flex:0 1 auto;min-width:0}}
.bcol li i{font-style:normal;color:var(--muted-on-photo);font-size:13.5px}
.bcol li .star{color:var(--barrel);font-size:11px;flex:none}
/* price sits hard right with a dotted leader — this menu has real prices */
.bcol li{position:relative}
.bcol li .pr{margin-left:auto;flex:none;font-style:normal;font-weight:600;font-size:15px;
  color:var(--ink);font-variant-numeric:tabular-nums;padding-left:14px}
.bcol li .pr::before{content:"$"}
.bcol li i{flex:1 1 auto;min-width:0}

/* ============================================================
   THE WEEK — the rhythm of the place
   ============================================================ */
.week{border:1px solid var(--rule);background:var(--paper)}
.wrow{display:grid;grid-template-columns:132px 1fr auto;gap:20px;align-items:center;
  padding:19px clamp(18px,2.4vw,30px);border-bottom:1px solid var(--rule)}
.wrow:last-child{border-bottom:none}
@media(max-width:720px){.wrow{grid-template-columns:1fr;gap:7px;padding-block:18px}}
.wrow .d{font-family:var(--disp);font-weight:400;font-size:20px;color:var(--ink)}
.wrow .t{font-size:14.5px;color:var(--body-ink)}
.wrow .h{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.wrow.late{background:var(--band)}
.wrow.late .t b{color:var(--barrel);font-weight:600}
.wrow.shut .d,.wrow.shut .t,.wrow.shut .h{color:#A39A8C}
.wrow.is-today{box-shadow:inset 3px 0 0 var(--barrel)}
.wrow.is-today .d{font-weight:500}

/* ---- board copy over the veiled photo: see --muted-on-photo in :root ----
   Equal specificity to the .bcol rules above, so source order decides.
   qa.py recomputes this against the measured ground on every run. */
.bcol .note,.bcol li i{color:var(--muted-on-photo)}

/* ---------- before / after disclosure ----------
   A new company has no portfolio. Saying so plainly is worth more than
   implying a back-catalogue that does not exist. */
.ba-disc{margin-top:clamp(22px,2.6vw,32px);font-size:13.5px;line-height:1.6;color:var(--muted);max-width:74ch;
  border-left:2px solid var(--rule);padding-left:18px}

/* ---------- reviews ----------
   Restored: this was deleted from an upstream fork that had no reviews, and
   came across missing into a build that does. */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.revs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.revs{grid-template-columns:1fr}}
.rev{border:1px solid var(--rule);background:var(--paper);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column}
.rev .mark{font-family:var(--disp);font-weight:400;font-size:46px;line-height:.7;color:var(--barrel);height:26px}
.rev blockquote{font-family:var(--disp);font-weight:400;font-size:clamp(19px,2.1vw,24px);line-height:1.34;color:var(--ink);margin-top:20px;flex:1}
.rev .who{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* second review row: two real quotes, not padded out to fill a third column */
.revs--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.revs--2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.revs--2{grid-template-columns:1fr}}

/* ---------- FAQ ----------
   Was never styled in this lineage: `details`/`summary` were rendering as raw
   browser default, triangle marker and all, on a prominent section. */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--body);font-weight:600;font-size:clamp(16px,1.5vw,18px);line-height:1.4;
  color:var(--ink);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{color:var(--barrel)}
.faq summary:hover::after{border-color:var(--barrel)}
.faq summary:focus-visible{outline:2px solid var(--barrel);outline-offset:3px}
.faq details > div{padding:0 46px 26px 0}
.faq details > div p{font-size:15.5px;line-height:1.62;color:var(--body-ink);max-width:72ch}
.faq details > div p + p{margin-top:12px}
.faq details > div a{color:var(--ink);text-decoration:underline}

/* footnote under the board */
.board-foot{margin-top:clamp(22px,2.6vw,32px);font-size:14px;line-height:1.62;color:var(--muted);max-width:78ch}
.board-foot b{color:var(--ink);font-weight:600}

/* ============================================================
   Added 2026-08-21 — hiring form, the Clover-era footer,
   the priced board footnotes and the visit photo block.
   ============================================================ */

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 18px;font-weight:600;font-size:14px}
.skip:focus{left:12px;top:12px}

/* board footnotes under a priced column */
.bcol-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:13px;line-height:1.6;color:var(--muted-on-photo);font-style:italic}
.bcol-foot b{font-style:normal;color:var(--body-ink)}

/* their own line, in the footer */
.foot-tag{margin-top:12px;font-family:var(--disp);font-size:15.5px;line-height:1.5;
  color:var(--ember);font-style:italic}

/* visit: the storefront photo with its action pair */
.visit-shot{margin-top:40px}
.visit-shot img{width:100%;height:clamp(240px,30vw,400px);object-fit:cover;display:block}
/* a photograph OF A DOCUMENT is not a scene: cropping it hides the content.
   Fit the whole page in, on the panel ground. */
.doc-shot img{width:100%;height:auto;max-height:min(78vh,760px);object-fit:contain;
  display:block;background:var(--band)}
.visit-shot-cap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between;margin-top:18px}
.visit-shot-cap>span{font-size:14px;color:var(--muted);max-width:52ch}
.visit-shot-cap b{color:var(--ink)}
.visit-acts{display:flex;flex-wrap:wrap;gap:12px;max-width:none!important}

/* ---------- the application form ---------- */
.jform{background:var(--paper);border:1px solid var(--rule);padding:clamp(22px,3vw,34px)}
.panel .jform{background:var(--paper)}
.jf-row,.jf-2{margin-bottom:16px}
.jf-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.jf-2{grid-template-columns:1fr}}
.jf{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.jf input,.jf select,.jf textarea{display:block;width:100%;margin-top:8px;padding:13px 14px;
  font-family:var(--body);font-size:15.5px;font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:0;-webkit-appearance:none;appearance:none}
.jf textarea{resize:vertical;line-height:1.6}
.jf select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23615850' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.jf input:focus,.jf select:focus,.jf textarea:focus{outline:none;border-color:var(--barrel);
  box-shadow:inset 0 0 0 1px var(--barrel)}
.jf input::placeholder,.jf textarea::placeholder{color:#9C9186}
.jform button{margin-top:6px}
.f-note{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the ?sent=1 confirmation */
.sent{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--barrel);
  padding:clamp(22px,3vw,34px)}
.sent h3{font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);font-weight:400;color:var(--ink)}
.sent p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--body-ink)}

/* the plate gallery — their own photographs */
/* eight plates: four across keeps two full rows with no ragged gap. */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:40px}
@media(max-width:1080px){.plates{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.plates{grid-template-columns:1fr}}
.plate{background:var(--paper);margin:0}
.plate img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.plate figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:4px 12px;padding:14px 16px 16px}
.plate figcaption b{font-family:var(--disp);font-size:16.5px;font-weight:400;color:var(--ink);line-height:1.25}
.plate figcaption span{font-size:14px;font-weight:600;color:var(--barrel);
  font-variant-numeric:tabular-nums;flex:none}