@font-face{font-family:'Luckiest Guy';src:url('/assets/fonts/luckiest-guy.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo.woff2') format('woff2');font-weight:100 900;font-display:swap}

/* =================================================================
   CORNER CAFÉ — DIRECTION "THE BOARD"
   The site IS her menu board. Type is the imagery. Density is the point.
   Every colour is measured from her logo (PALETTE.md); the only additions
   are two darker shades of her own royal blue.

   The container language is not uniform: ONE framed panel (Board One, the
   hero board), everything else painted straight onto the wall, full bleed.
   A frame means "lit panel" or "press this".

   POLISH PASS — the board now runs on declared systems:
     type      one scale, --t-1 … --t9. No fractional sizes anywhere.
     space     one 4px-based scale; one band pad; one gutter.
     detail    strokes 2 / 3 / 5 / 6, radii 4 / 14 / pill, extrusion 4 / 7 / 11.
     contrast  every text colour measured on its own ground, ≥ 4.5:1.
     touch     every control ≥ 44px.
   ================================================================= */

:root{
  --blue:#0046BD;        /* the logo's field */
  --blue-deep:#00296E;   /* shade of the same hue — the recessed board */
  --wall:#001439;        /* deepest shade — the wall the boards hang on */
  --orange:#FF4500;      /* the outline round every letter. Never small text. */
  --cream:#FCE3D4;       /* the fill inside her letters */
  --maroon:#7B0100;      /* the hard offset shadow under her lettering */

  /* ---------- TYPE SCALE ---------- */
  --t-1:13px;   /* micro caps: eyebrows, notes, day names */
  --t0:15px;    /* fine print, item descriptions, chips */
  --t1:17px;    /* body + every item line */
  --t2:20px;
  --t3:24px;
  --t4:29px;
  --t5:36px;
  --t6:44px;
  --t7:54px;
  --t8:68px;
  --t9:84px;
  --tr-w:.24em; --tr-1:.17em; --tr-0:.1em; --tr-2:.05em;
  --lh-d:.94;   /* display */
  --lh-h:1.14;  /* mid display */
  --lh-b:1.45;  /* body */

  /* ---------- SPACE SCALE ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px;
  --band:clamp(30px,3.4vw,48px);
  --gut:15px;
  --rail-h:52px;
  --jump-h:52px;
  --max:1400px;

  /* ---------- DETAIL ---------- */
  --w1:2px;  /* hairline + every dashed divider */
  --w2:3px;  /* nested frame, chip, rail edge */
  --w3:5px;  /* major frame: the board, the plate, the button */
  --w4:6px;  /* band edge */
  --r:14px; --r-s:4px; --r-p:999px;
  --x-s:4px; --x-m:7px; --x-l:11px;
  --dash:rgba(252,227,212,.26);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
     scroll-padding-top:calc(var(--rail-h) + var(--jump-h) + 8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--wall);
  color:var(--cream);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:var(--t1);
  line-height:var(--lh-b);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px}

/* the wall behind the boards: authored sprinkles, no image files.
   Only visible where a band is transparent — the sign, the gaps, the foot. */
.wall{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.62}

/* every full-bleed band keeps its type on the same measure */
.in{max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
.wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- her hand, as CSS ---------- */
.disp{font-family:'Luckiest Guy','Titan One',Impact,system-ui,sans-serif;font-weight:400;
      text-transform:uppercase;line-height:var(--lh-d);letter-spacing:.012em;margin:0;
      text-wrap:balance}

/* the signature treatment: cream fill + orange outline + hard maroon offset.
   Never below ~28px — it closes up. */
.ex{color:var(--cream);
    -webkit-text-stroke:.072em var(--orange);
    paint-order:stroke fill;
    text-shadow:.045em .05em 0 var(--maroon), .088em .098em 0 rgba(123,1,0,.42)}
.ex-inv{color:var(--blue);                       /* same idea on a cream ground */
    -webkit-text-stroke:.068em var(--orange);
    paint-order:stroke fill;
    text-shadow:.045em .05em 0 var(--maroon)}
.ex-lite{color:var(--cream);text-shadow:2px 3px 0 var(--maroon)}   /* under 28px */

/* ================= the counter rail ================= */
.rail{position:sticky;top:0;z-index:60;height:var(--rail-h);
      display:flex;align-items:center;gap:var(--s2);padding:0 var(--gut);
      background:var(--maroon);border-bottom:var(--w2) solid var(--orange)}
.rail__badge{width:34px;height:34px;flex:0 0 auto}
.rail__name{font-family:'Luckiest Guy',sans-serif;font-size:var(--t1);letter-spacing:.03em;
            color:var(--cream);text-transform:uppercase;white-space:nowrap;margin-right:auto;
            text-shadow:1px 2px 0 rgba(0,0,0,.5)}
.rail__name i{display:none;font-style:normal;opacity:.75}
.rail .rail__dd{display:none}

/* ONE status indicator at a time: the rail pill stays dark until the big
   status band has scrolled off. At the top of the page there is only the band. */
.rail__mini{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-1);font-weight:800;
            letter-spacing:var(--tr-0);text-transform:uppercase;white-space:nowrap;
            opacity:0;visibility:hidden;transition:opacity .2s ease}
.rail__mini.armed{opacity:1;visibility:visible}
.nojs .rail__mini{display:none}
.dot{width:11px;height:11px;border-radius:50%;background:var(--cream);flex:0 0 auto;
     box-shadow:0 0 0 3px var(--orange),0 0 13px 3px rgba(255,69,0,.9)}
.is-shut .dot{background:transparent;box-shadow:0 0 0 3px rgba(252,227,212,.5)}
@media (prefers-reduced-motion:no-preference){
  .is-open .dot{animation:blip 2.8s ease-in-out infinite}
  .is-last .dot{animation:blip 1s ease-in-out infinite}
}
@keyframes blip{0%,100%{box-shadow:0 0 0 3px var(--orange),0 0 13px 3px rgba(255,69,0,.9)}
                50%{box-shadow:0 0 0 3px var(--orange),0 0 24px 8px rgba(255,69,0,.45)}}

/* ================= board navigator: how you pan the wall (mobile) ================= */
.jump{position:sticky;top:var(--rail-h);z-index:50;background:var(--wall);
      border-bottom:var(--w1) solid rgba(252,227,212,.2);
      overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jump::-webkit-scrollbar{display:none}
.jump ul{display:flex;gap:var(--s1);padding:var(--s1) var(--gut);width:max-content;min-width:100%}
.jump a{display:flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap;
        font-size:var(--t-1);font-weight:800;letter-spacing:var(--tr-0);text-transform:uppercase;
        color:var(--cream);background:var(--blue-deep);border:var(--w1) solid rgba(252,227,212,.38);
        border-radius:var(--r-p);padding:0 var(--s3)}
.jump a:hover{background:var(--cream);color:var(--maroon);border-color:var(--orange)}
.jump a[aria-current]{background:var(--cream);color:var(--maroon);border-color:var(--orange)}

/* ================= THE SIGN — the biggest thing in the room ================= */
.sign{position:relative;padding:var(--band) 0;border-bottom:var(--w4) solid var(--orange);
      text-align:center;isolation:isolate;overflow:hidden}
.sign::before{content:"";position:absolute;left:50%;top:-6%;transform:translateX(-50%);
  width:min(1000px,120%);height:118%;pointer-events:none;z-index:0;
  background:radial-gradient(52% 54% at 50% 44%,rgba(255,69,0,.34),rgba(255,69,0,.08) 58%,rgba(255,69,0,0) 74%)}
.sign__logo{margin:0 auto;width:100%;max-width:360px}
.sign__sub{font-size:var(--t1);font-weight:700;margin:var(--s3) auto 0;max-width:32ch;
           text-wrap:balance;letter-spacing:.005em;line-height:1.3}
.sign__where{margin:var(--s2) auto 0;max-width:34ch;font-size:var(--t-1);font-weight:900;
             letter-spacing:var(--tr-1);text-transform:uppercase;opacity:.82}

/* ================= the honest status band — full bleed, one lamp ================= */
.status{position:relative;border-bottom:var(--w4) solid var(--orange);background:var(--blue)}
.status::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,69,0,.62) 0%,rgba(255,69,0,.3) 44%,rgba(255,69,0,0) 68%)}
.status.is-last::before{
  background:linear-gradient(180deg,rgba(255,69,0,.86) 0%,rgba(255,69,0,.45) 46%,rgba(255,69,0,0) 70%)}
.status.is-shut::before{
  background:linear-gradient(180deg,rgba(123,1,0,.97) 0%,rgba(123,1,0,.72) 42%,rgba(123,1,0,0) 66%)}
.status__grid{display:grid;grid-template-columns:1fr}
.status__now{padding:var(--s4) 0;position:relative;z-index:1}
.status.is-shut{background:var(--blue-deep)}
/* the eyebrow sits on the orange wash, where cream at .8 measures 3.48:1 —
   it runs at full strength and lets size, not opacity, do the recessing */
.status__eye{display:none;font-size:var(--t-1);font-weight:900;letter-spacing:var(--tr-1);
             text-transform:uppercase;margin:0 0 var(--s3)}
.status__word{font-size:clamp(var(--t6),13.2vw,var(--t9));margin:0}
.status__till{font-size:clamp(var(--t1),4.4vw,var(--t3));font-weight:700;margin:var(--s2) 0 0}
.nojs .status__now{display:none}
.nojs .status{border-top:0}

.status__hours{padding:0 0 var(--s3)}
.hrshead{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) 0 var(--s2);
         border-top:var(--w2) solid var(--orange);margin-top:0}
.hrshead h2{font-size:var(--t1);margin:0;order:1}
.hrshead p{margin:0;order:3;flex:1 0 100%;font-size:var(--t-1);font-weight:800;
           letter-spacing:var(--tr-0);text-transform:uppercase;opacity:.82}
.nojs .hrshead{border-top:0;padding-top:var(--s4)}

.week{display:grid;grid-template-columns:1fr;gap:1px;background:var(--dash);
      border:1px solid var(--dash)}
.week li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
         background:var(--blue-deep);padding:var(--s2) var(--s3)}
.is-shut .week li{background:#052255}
.week .d{font-size:var(--t-1);font-weight:800;letter-spacing:var(--tr-0);
         text-transform:uppercase;opacity:.86}
.week .h{font-size:var(--t1);font-weight:700;white-space:nowrap}
.week li.today{background:var(--cream);box-shadow:inset 5px 0 0 var(--orange)}
.is-shut .week li.today{background:var(--cream)}
.week li.today .d,.week li.today .h{color:var(--maroon);opacity:1}
.week li.today .d{font-size:var(--t0)}
.week li.today .h{font-size:var(--t2);font-weight:800}
.week li.today .d::after{content:" · today";letter-spacing:var(--tr-2)}
.week li:nth-child(7){grid-column:1/-1}
.weekbtn{display:none;order:2;margin-left:auto;align-items:center;gap:var(--s1);cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:var(--t-1);font-weight:900;letter-spacing:var(--tr-0);
  text-transform:uppercase;color:var(--maroon);background:var(--cream);
  border:var(--w1) solid var(--orange);border-radius:var(--r-p);padding:0 var(--s3);min-height:44px}
.weekbtn::after{content:"";width:0;height:0;border:5px solid transparent;border-top-color:var(--maroon);
  margin-top:3px;transition:transform .15s}
.weekbtn[aria-expanded="true"]::after{transform:rotate(180deg);margin-top:-3px}
.js .weekbtn{display:inline-flex}
.week-shut .week{display:none}
.week-shut .status__hours{padding-bottom:var(--s3)}

/* ================= BOARD ONE — the one framed panel on the wall ============ */
.board{margin:var(--s5) 0 0;background:var(--blue);border:var(--w3) solid var(--orange);
       border-radius:var(--r);box-shadow:var(--x-l) var(--x-l) 0 var(--maroon);overflow:hidden}
.board__head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:var(--s3) var(--s4);
             background:linear-gradient(180deg,rgba(0,20,57,.6),rgba(0,20,57,0));
             border-bottom:var(--w2) dashed rgba(252,227,212,.4)}
.eyebrow{font-size:var(--t-1);font-weight:900;letter-spacing:var(--tr-1);text-transform:uppercase;
         background:var(--cream);color:var(--maroon);border-radius:var(--r-s);
         padding:var(--s1) var(--s2);white-space:nowrap}
.board__title{font-size:clamp(var(--t4),6.9vw,var(--t7));flex:1 1 100%}
.board__note{margin:0;font-size:var(--t-1);font-weight:800;letter-spacing:var(--tr-0);
             text-transform:uppercase;opacity:.86}

.board__grid{display:grid;grid-template-columns:minmax(0,1fr)}
.grp{padding:var(--s4) var(--s4) var(--s5);border-top:var(--w1) dashed var(--dash)}
.grp:first-child{border-top:0}
.grp__title{font-size:clamp(var(--t2),4.8vw,var(--t4));margin:0}
.grp__rule{height:4px;width:64px;background:var(--orange);border-radius:2px;margin:var(--s2) 0 var(--s3)}
.grp__note{margin:0 0 var(--s3);font-size:var(--t0);font-weight:600;opacity:.86}

/* --- item lines. Cornell (Yang/Kimes/Sessarego): bare numeral, no currency
       symbol, no .00 padding, nested with the item — never a right-aligned
       price column with leader dots. --- */
.items li{padding:var(--s1) 0;border-bottom:1px solid rgba(252,227,212,.15)}
.items li:last-child{border-bottom:0}
.n{display:block;font-size:var(--t1);font-weight:650;
   font-variation-settings:'wdth' 92;letter-spacing:.002em;line-height:1.3}
.p{font-weight:900;font-variation-settings:'wdth' 100;margin-left:.4em;white-space:nowrap}
.d{display:block;font-size:var(--t0);font-weight:400;opacity:.82;margin-top:1px;line-height:1.3}

/* the signature, top-left of the reading order */
.grp--sig{background:radial-gradient(88% 130% at 100% 0%,rgba(255,69,0,.36),rgba(255,69,0,0) 62%),
                    rgba(0,20,57,.34)}
.grp--sig .grp__title{font-size:clamp(var(--t4),8vw,var(--t6))}
.grp--sig .grp__rule{width:96px;margin:var(--s3) 0 var(--s3)}
.grp--sig .n{font-size:clamp(var(--t2),5vw,var(--t3));font-weight:800;
             font-variation-settings:'wdth' 96;line-height:var(--lh-h)}
.grp--sig .items li{padding:var(--s2) 0;border-bottom-color:rgba(252,227,212,.3)}
.flag{display:inline-block;transform:rotate(-2.4deg);background:var(--cream);color:var(--maroon);
      font-size:var(--t-1);font-weight:900;letter-spacing:var(--tr-1);text-transform:uppercase;
      padding:var(--s1) var(--s2);border-radius:var(--r-s);
      box-shadow:var(--x-s) var(--x-s) 0 var(--maroon);margin-bottom:var(--s2)}

.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.chips li{font-size:var(--t0);font-weight:800;letter-spacing:var(--tr-2);text-transform:uppercase;
          border:var(--w1) solid rgba(252,227,212,.5);border-radius:var(--r-p);
          padding:var(--s1) var(--s3)}
.friday{margin-top:var(--s4);background:var(--maroon);border:var(--w2) solid var(--orange);
        border-radius:var(--r);padding:var(--s3)}
.friday h4{margin:0;display:flex;align-items:center;gap:var(--s2);font-size:var(--t-1);
           font-weight:900;letter-spacing:var(--tr-1);text-transform:uppercase}
.friday .chips li{border-color:rgba(252,227,212,.72)}

/* ================= the about band — painted straight on the wall ========= */
.about{margin-top:var(--s5);background:var(--maroon);
       border-top:var(--w2) solid var(--orange);border-bottom:var(--w2) solid var(--orange)}
.about .in{display:flex;gap:var(--s3);align-items:flex-start;
           padding-top:var(--s3);padding-bottom:var(--s4)}
.about svg{flex:0 0 auto;margin-top:3px}
.about p{margin:0;font-size:var(--t1);font-weight:600;line-height:var(--lh-b);max-width:96ch;
         text-wrap:pretty}

/* ================= BOARD TWO — full bleed, recessed, denser =============== */
.b2{background:var(--blue-deep);padding-bottom:var(--s2)}
.b2 .board__head{background:none;border-bottom:var(--w1) dashed rgba(252,227,212,.34);
                 padding-left:0;padding-right:0}
.b2 .board__title{font-size:clamp(var(--t4),6.4vw,var(--t7))}
.b2 .grp{padding-left:0;padding-right:0}
.b2 .items li{padding:3px 0}
.b2 .n{font-size:var(--t0);font-variation-settings:'wdth' 90}
.b2 .grp__title{font-size:clamp(var(--t2),4.4vw,var(--t3))}
.b2 .grp__rule{margin:var(--s2) 0 var(--s2);width:52px;height:var(--w2)}

/* ================= the tape (full bleed) ================= */
.tape{background:var(--maroon);border-top:var(--w3) solid var(--orange);overflow:hidden}
.tape span{display:block;white-space:nowrap;font-family:'Luckiest Guy',sans-serif;text-transform:uppercase;
           font-size:clamp(var(--t3),5.2vw,var(--t4));letter-spacing:var(--tr-2);color:var(--cream);
           padding:var(--s3) 0;
           -webkit-text-stroke:.055em var(--orange);paint-order:stroke fill;
           text-shadow:.04em .05em 0 rgba(0,0,0,.45)}

/* ============ BOARD THREE — THE PARLOUR. A different object. ============= */
/* Not a board on the wall — you have walked under an awning into the case. */
.parlour-sec{background:var(--cream);color:var(--maroon);position:relative}
.parlour-sec::before{content:"";display:block;height:32px;
  background:
    radial-gradient(circle at 24px 0,var(--orange) 23px,rgba(255,69,0,0) 24px) repeat-x 0 0/48px 32px,
    radial-gradient(circle at 24px 0,var(--maroon) 23px,rgba(123,1,0,0) 24px) repeat-x 0 6px/48px 32px}
.parlour-sec .board__head{background:none;border-bottom:0;padding:var(--s2) 0 0;align-items:center}
.parlour-sec .board__title{font-size:clamp(var(--t4),8.4vw,var(--t8))}
.parlour-sec .board__note{color:var(--maroon);opacity:.8}
.parlour-sec .eyebrow{background:var(--maroon);color:var(--cream)}

.parlour{display:grid;grid-template-columns:1fr;gap:0;padding-bottom:var(--s2)}
.parlour__seal{display:flex;flex-direction:column;align-items:center;gap:var(--s3);
               padding:var(--s4) 0 var(--s1);text-align:center}
.parlour__seal img{width:min(56vw,250px)}
.hersheys{margin:0;max-width:22ch;font-size:var(--t0);font-weight:900;letter-spacing:var(--tr-2);
          text-transform:uppercase;line-height:1.35}
.case{padding:var(--s4) 0 var(--s2);min-width:0;display:grid;
      grid-template-columns:minmax(0,1fr);gap:0}
.case__col{min-width:0}
.case__also{padding-top:var(--s5)}
.case h3{font-size:clamp(var(--t2),4.8vw,var(--t3));margin:0;color:var(--maroon)}
.case .grp__rule{background:var(--maroon)}
.flav{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--s6);margin-top:2px}
.flav li{font-size:clamp(var(--t4),7.2vw,var(--t6));padding:var(--s2) 0;
         border-bottom:var(--w1) solid rgba(123,1,0,.22);line-height:1.02}
.flav li:last-child{border-bottom:0}

.askplate{margin:var(--s4) 0 var(--s1);background:var(--blue);border:var(--w3) solid var(--orange);
          border-radius:var(--r);box-shadow:var(--x-m) var(--x-m) 0 var(--maroon);
          padding:var(--s3) var(--s4);text-align:center;width:100%}
.askplate p{margin:0;font-family:'Luckiest Guy',sans-serif;text-transform:uppercase;
            font-size:clamp(var(--t3),5.4vw,var(--t4));color:var(--cream);letter-spacing:.02em;
            text-shadow:2px 3px 0 var(--maroon);line-height:1}
.askplate small{display:block;margin-top:var(--s2);font-family:'Archivo',sans-serif;
                font-size:var(--t0);font-weight:600;color:var(--cream);opacity:.92;line-height:1.35}

/* the toppings bar is a literal bar running under the case */
.tbar{background:var(--blue);border-top:var(--w4) solid var(--orange);color:var(--cream)}
.tbar .in{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
          padding-top:var(--s3);padding-bottom:var(--s4)}
.tbar h3{margin:0;font-size:clamp(var(--t2),4.6vw,var(--t3))}
.tbar .chips{margin-top:var(--s2)}
.tbar .chips li{border-color:rgba(252,227,212,.62)}
.tbar__also{padding-top:var(--s3);margin-top:var(--s3);
            border-top:var(--w1) dashed rgba(252,227,212,.3)}
.also li{font-size:clamp(var(--t2),4.6vw,var(--t3));color:var(--maroon);padding:var(--s2) 0;
         line-height:1.05;border-bottom:var(--w1) solid rgba(123,1,0,.18)}
.also li:last-child{border-bottom:0}

/* ================= the corner — full bleed, no frame ================= */
.corner{background:var(--blue-deep);border-top:var(--w4) solid var(--orange)}
.corner .board__head{background:none;border-bottom:var(--w1) dashed rgba(252,227,212,.32);
                     padding-left:0;padding-right:0}
.corner .board__title{font-size:clamp(var(--t4),6.4vw,var(--t7))}
.corner__grid{display:grid;grid-template-columns:1fr}
.cell{padding:var(--s4) 0 var(--s5);border-top:var(--w1) dashed var(--dash)}
.cell:first-child{border-top:0}
.cell h3{margin:0 0 var(--s2);font-size:var(--t-1);font-weight:900;letter-spacing:var(--tr-1);
         text-transform:uppercase;opacity:.82}
.cell p{margin:0;font-size:var(--t1);font-weight:700;line-height:1.4}
.big{font-size:clamp(var(--t2),4.7vw,var(--t3));font-weight:800}
.cell a{display:inline-block;padding:11px 0;text-decoration-thickness:2px;text-underline-offset:3px}
.fine{margin-top:var(--s2);font-size:var(--t0);font-weight:600;opacity:.86;line-height:var(--lh-b)}

/* a frame now means "press this" */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
     min-height:48px;
     font-family:'Luckiest Guy',sans-serif;text-transform:uppercase;letter-spacing:.03em;
     font-size:clamp(var(--t1),4.4vw,var(--t2));background:var(--cream);color:var(--maroon);
     text-decoration:none;border:var(--w3) solid var(--orange);border-radius:var(--r);
     box-shadow:var(--x-s) var(--x-s) 0 var(--maroon);padding:var(--s2) var(--s4);line-height:1;text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--maroon)}

.foot{position:relative;z-index:1;padding:var(--band) var(--gut);text-align:center;
      border-top:var(--w2) solid rgba(255,69,0,.55)}
.foot img{margin:0 auto;width:100%;max-width:300px;opacity:.95}
.foot p{margin:var(--s3) auto 0;max-width:62ch;font-size:var(--t0);font-weight:600;
        opacity:.72;line-height:var(--lh-b)}

/* ================= mobile thumb bar ================= */
.thumb{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:stretch;
       gap:var(--s2);
       padding:var(--s2) var(--gut) calc(var(--s2) + env(safe-area-inset-bottom));
       background:var(--maroon);border-top:var(--w2) solid var(--orange)}
.thumb__status{flex:1 1 0;min-width:0;display:none;flex-direction:column;justify-content:center;gap:2px}
.thumb__status.armed{display:flex}
.thumb__status.armed + .btn{flex:0 0 auto}
.thumb__w{font-family:'Luckiest Guy',sans-serif;font-size:var(--t2);letter-spacing:.02em;
          text-transform:uppercase;line-height:1;text-shadow:1px 2px 0 rgba(0,0,0,.5)}
.thumb__s{font-size:var(--t-1);font-weight:700;opacity:.9;white-space:nowrap;overflow:hidden;
          text-overflow:ellipsis}
.thumb .btn{width:auto;flex:1 1 auto;font-size:var(--t1);min-height:46px;
            padding:var(--s2) var(--s4);line-height:1;box-shadow:var(--x-s) var(--x-s) 0 rgba(0,0,0,.45)}
.nojs .thumb__status{display:none}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =================================================================
   BREAKPOINTS — the board reflows into columns; it does not just stack
   ================================================================= */
@media (min-width:430px){
  .sign__logo{max-width:410px}
  .sign__sub{font-size:var(--t2);max-width:34ch}
}
@media (min-width:620px){
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grp{border-top:0;border-left:var(--w1) dashed var(--dash);padding-left:var(--s5)}
  .grp:nth-child(odd){border-left:0;padding-left:var(--s4)}
  .grp:nth-child(n+3){border-top:var(--w1) dashed var(--dash)}
  .grp--sig{grid-column:1/-1;border-left:0;padding-left:var(--s4)}
  .grp--sig .items{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s6)}
  .b2 .grp:nth-child(odd){padding-left:0}
  .corner__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cell{border-top:0;border-left:var(--w1) dashed var(--dash);padding-left:var(--s5)}
  .cell:nth-child(odd){border-left:0;padding-left:0}
  .cell:nth-child(n+3){border-top:var(--w1) dashed var(--dash)}
  .parlour{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 var(--s6);align-items:start}
  .parlour__seal{padding-top:var(--s5);grid-column:1;grid-row:1}
  .askplate{grid-column:1;grid-row:2;align-self:start;margin-top:var(--s4)}
  .case{grid-column:2;grid-row:1/span 2}
  .tbar .in{grid-template-columns:auto minmax(0,1fr);gap:0 var(--s6);align-items:center}
  .case{grid-template-columns:minmax(0,1.34fr) minmax(0,.8fr);gap:0 var(--s6)}
  .case__also{padding-top:0;border-left:var(--w1) dashed rgba(123,1,0,.3);padding-left:var(--s6)}
  .about .in{align-items:center}
}
@media (min-width:900px){
  :root{--gut:26px;--rail-h:60px;--jump-h:47px}
  body{font-size:18px}
  .rail__badge{width:42px;height:42px}
  .rail__name{font-size:var(--t3)}
  .rail__name i{display:inline}
  .rail__mini{font-size:var(--t0)}
  .thumb{display:none}

  .sign__logo{max-width:820px}
  .sign__sub{font-size:var(--t3);margin-top:var(--s4);max-width:none;font-weight:700}
  .sign__where{font-size:var(--t-1);margin-top:var(--s2);max-width:none;letter-spacing:var(--tr-w)}

  .status::before{
    background:linear-gradient(90deg,rgba(255,69,0,.70) 0%,rgba(255,69,0,.34) 20%,rgba(255,69,0,0) 46%)}
  .status.is-last::before{
    background:linear-gradient(90deg,rgba(255,69,0,.86) 0%,rgba(255,69,0,.5) 22%,rgba(255,69,0,0) 50%)}
  .status.is-shut::before{
    background:linear-gradient(90deg,rgba(123,1,0,.97) 0%,rgba(123,1,0,.82) 18%,rgba(123,1,0,0) 44%)}
  .status__grid{grid-template-columns:minmax(300px,.95fr) minmax(0,1.6fr);gap:0}
  .status__now{padding:var(--band) var(--s6) var(--band) 0;display:flex;flex-direction:column;
    justify-content:center;border-right:var(--w3) solid var(--orange)}
  .status__eye{display:block}
  .status__hours{padding:var(--s5) 0 var(--s5) var(--s6)}
  .hrshead{border-top:0;padding-top:0}
  .hrshead h2{font-size:var(--t3)}
  .week{align-content:start}
  .week-shut .week{display:grid}
  .weekbtn{display:none !important}

  .board{margin-top:var(--s6)}
  .board__head{padding:var(--s4) var(--s5)}
  .board__title{flex:0 1 auto;order:2}
  .board__note{order:3;margin-left:auto}
  .board__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
  .grp{padding:var(--s5) var(--s5) var(--s6);border-top:0;
       border-left:var(--w1) dashed var(--dash)}
  .grp:nth-child(odd){border-left:var(--w1) dashed var(--dash);padding-left:var(--s5)}
  .grp:first-child{border-left:0}
  .grp:nth-child(n+3){border-top:0}
  .grp--sig{grid-column:auto;padding-left:var(--s5)}
  .grp--sig .items{display:block}

  .about{margin-top:var(--s6)}
  .about .in{padding-top:var(--s4);padding-bottom:var(--s4);justify-content:center}
  .about p{font-size:var(--t2);text-align:center}

  .b2 .board__head{padding:var(--s4) 0 var(--s3)}
  .b2 .board__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.84fr)}
  .b2 .grp{padding:var(--s5) var(--s5) var(--s6);border-left:var(--w1) dashed var(--dash)}
  .b2 .grp:first-child{border-left:0;padding-left:0}
  .b2 .grp:last-child{padding-right:0;display:flex}
  .b2 .friday{margin-top:0;flex:1 1 auto;display:flex;flex-direction:column;
              padding:var(--s4);justify-content:center}
  .b2 .friday h4{font-size:var(--t0)}
  .b2 .friday .chips{flex-direction:column;align-items:flex-start;gap:var(--s2);margin-top:var(--s4)}
  .b2 .friday .chips li{font-size:var(--t0);padding:var(--s2) var(--s3)}

  .parlour-sec::before{height:42px;
    background:
      radial-gradient(circle at 30px 0,var(--orange) 29px,rgba(255,69,0,0) 30px) repeat-x 0 0/60px 42px,
      radial-gradient(circle at 30px 0,var(--maroon) 29px,rgba(123,1,0,0) 30px) repeat-x 0 8px/60px 42px}
  .parlour-sec .board__head{padding:var(--s3) 0 0}
  .parlour{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0 var(--band);
           padding-bottom:var(--s4)}
  .parlour__seal{padding:var(--s5) 0 0;align-items:flex-start;text-align:left}
  .parlour__seal img{width:100%;max-width:330px}
  .hersheys{font-size:var(--t1);max-width:21ch}
  .case{padding-top:var(--s5)}
  .flav li{padding:var(--s3) 0;font-size:clamp(var(--t5),2.95vw,var(--t6))}
  .also li{padding:var(--s2) 0;font-size:clamp(var(--t2),1.65vw,var(--t3))}
  .tbar .in{padding-top:var(--s5);padding-bottom:var(--s5)}

  .corner .board__head{padding:var(--s4) 0 var(--s3)}
  .corner__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr)}
  .cell{padding:var(--s5) var(--s5) var(--s6);border-top:0;
        border-left:var(--w1) dashed var(--dash)}
  .cell:nth-child(odd){border-left:var(--w1) dashed var(--dash);padding-left:var(--s5)}
  .cell:first-child{border-left:0;padding-left:0}
  .cell:nth-child(n+3){border-top:0}
  .btn{width:auto}
  .foot img{max-width:420px}
}
@media (min-width:1024px){
  .week{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1100px){
  /* on desktop the wall is fully scannable: the navigator is a phone affordance.
     Killing it gives the sign back 47px and the top its authority. */
  .jump{display:none}
  html{scroll-padding-top:calc(var(--rail-h) + 8px)}
  .rail .rail__dd{display:inline-flex;width:auto;flex:0 0 auto;font-size:var(--t0);
            min-height:44px;padding:var(--s2) var(--s3) var(--s1);
            border-width:var(--w2);box-shadow:var(--x-s) var(--x-s) 0 rgba(0,0,0,.5);
            margin-left:var(--s4)}
  .sign{padding:calc(var(--band) + var(--s3)) 0 var(--band)}
}
@media (max-width:899.98px){ body{padding-bottom:86px} }
@media (max-width:619.98px){
  .js .hrshead p{display:none}
  .js .hrshead h2{font-size:var(--t0)}
}
@media (max-width:359.98px){
  :root{--gut:11px}
  .week li{padding:var(--s2) var(--s2)}
  .week .h{font-size:var(--t0)}
  .rail__name{font-size:var(--t0)}
  .jump a{padding:0 var(--s2)}
  .flav li{font-size:var(--t3)}
  .sign__sub{font-size:var(--t0)}
}


/* ==========================================================================
   COMPARISON-BUILD ADDITIONS - 2026-08-21
   Everything above this line is the look's OWN stylesheet, carried over
   verbatim: it is the thing being compared. Below are only the pieces the
   comparison needs, drawn in that look's language.

   COMMENT SYNTAX - READ THIS BEFORE ADDING A LINE HERE.
   Every comment in this block MUST be a real CSS comment. From 2026-08-21 to
   2026-08-22 they were written with a leading `#`, which is not a comment
   marker in CSS - it opens a selector. The parser then ran on to the next `{`,
   decided the whole selector was invalid, and threw away the comment AND the
   rule underneath it. Seven rules shipped dead in BOTH Look B and Look E,
   including [data-daypart]{display:flex}, which is the rule that makes
   dayparting work at all. Nothing caught it: the three checkers measure
   contrast, geometry and content, and a rule that never applies changes none
   of those. Measured and fixed 2026-08-22.
   ========================================================================== */

/* Dual price columns, ported from the café theme so Ro's PRE-TAX ruling
   (CAFE-030) is one attribute here too. Pure CSS - works with JS off. */
[data-price-mode="incl"] .price--pre { display: none; }
[data-price-mode="pre"] .price--incl { display: none; }
html:not([data-price-mode="incl"]):not([data-price-mode="pre"]) .price--pre::before { content: " / "; }

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;
  background:var(--cream);color:var(--maroon);font-weight:800;border-radius:0 0 10px 0}
.skip-link:focus{left:0}

/* Dayparting containers reorder with `order` only - the DOM never moves.
   The container MUST be flex or grid. `order` is ignored in block layout and in
   multi-column layout, so a plain <div data-daypart> reorders nothing at all. */
[data-daypart]{display:flex;flex-direction:column}
[data-daypart].cmp-row{flex-direction:row;flex-wrap:wrap}

/* The daypart sentence. Hidden until JS fills it, so a JS-off page never
   claims "right now" anything. A look that gives .cmp-daypart a display value
   must also restore .cmp-daypart[hidden]{display:none} - an author `display`
   beats the UA rule for [hidden] and the line would show up empty. */
.cmp-daypart{font-weight:800;line-height:1.35;margin:0}

/* ---- THE REGULARS ------------------------------------------------------
   One module, three fixed-ratio self-contained cards, so the same markup can
   become a TV slide, a window graphic and a social template. */
.cmp-rituals{padding:var(--band,34px) var(--gut,15px)}
.cmp-ritGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  max-width:var(--max,1400px);margin:16px auto 0}
.cmp-rit{display:flex;flex-direction:column;gap:8px;padding:20px 18px;border-radius:14px;
  border:4px solid var(--orange,#FF4500);background:var(--blue,#0046BD);color:var(--cream,#FCE3D4)}
.cmp-rit .day{font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:#FFB088}
.cmp-rit .nm{font-size:clamp(22px,2.3vw,29px);line-height:1.05;margin:0}
.cmp-rit p{margin:0;font-size:16px;line-height:1.35;color:var(--cream,#FCE3D4)}
.cmp-rit .when{margin-top:auto;padding-top:10px;font-weight:800;font-size:15px;color:#FFB088}
.cmp-rit.is-on{background:var(--maroon,#7B0100)}
.cmp-rit.is-on .day::after{content:" · TODAY";color:var(--cream,#FCE3D4)}
@media (max-width:900px){.cmp-ritGrid{grid-template-columns:1fr}}

/* ---- REVIEW ASK + NEXT DOOR ------------------------------------------- */
.cmp-ask{padding:var(--band,34px) var(--gut,15px)}
.cmp-ask .in2{max-width:var(--max,1400px);margin:0 auto}
.cmp-ask p{max-width:60ch;line-height:1.45;margin:10px 0 0}
.cmp-btnRow{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.cmp-btnRow a{display:inline-block;padding:15px 20px;border:3px solid currentColor;
  border-radius:10px;font-weight:800;font-size:17px;line-height:1;text-decoration:none}

/* ---- the scoop prices that replaced "ask at the counter" ------------- */
.cmp-prices{list-style:none;margin:14px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.cmp-prices li{display:flex;align-items:baseline;gap:10px;padding:9px 0;
  border-bottom:2px solid currentColor;font-weight:700;font-size:clamp(17px,2vw,22px);line-height:1.15}
.cmp-prices b{font-weight:800}
@media (max-width:640px){.cmp-prices{grid-template-columns:1fr}}

/* ---- full menu page --------------------------------------------------- */
.cmp-menuWrap{max-width:var(--max,1400px);margin:0 auto;padding:var(--band,34px) var(--gut,15px)}
.cmp-menuGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 40px}
.cmp-menuGrid .grp{break-inside:avoid;margin-bottom:18px}

[data-price-mode="incl"] .price--pre{display:none}
[data-daypart]{display:flex;flex-direction:column}
.cmp-daypart{font-weight:800;line-height:1.35;margin:0}
.cmp-rituals,.cmp-ask{padding:var(--band) var(--gut)}
.cmp-menuWrap{padding:var(--band) var(--gut)}
.cmp-menuWrap>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.cmp-prices{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s6)}

/* Look B already declares 'every text colour measured on its own ground,
   >= 4.5:1' in its own header, and the verification pass confirms it. The
   only additions here are grounds for the three NEW sections, so they are
   measured too rather than inheriting whatever they land on. */
.cmp-rituals{background:var(--blue-deep);color:var(--cream)}
.cmp-ask{background:var(--wall);color:var(--cream)}
.cmp-ask a{color:var(--cream)}
.askplate,.askplate .cmp-prices,.askplate .cmp-prices li,.askplate .cmp-prices b{color:var(--cream)}
.askplate .cmp-prices li{border-bottom-color:rgba(252,227,212,.35)}
.cmp-menuWrap{background:var(--blue-deep);color:var(--cream)}
.cmp-menuWrap .cmp-menuGrid{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.cmp-menuWrap .grp,.cmp-menuWrap li{min-width:0;overflow-wrap:anywhere}
html,body{overflow-x:clip;max-width:100%}
.cmp-menuWrap h3{font-family:'Luckiest Guy',system-ui,sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t3);color:var(--cream);margin:0 0 6px;text-shadow:2px 3px 0 var(--maroon)}
.cmp-menuWrap ul{list-style:none;margin:0;padding:0}
.cmp-menuWrap li{padding:8px 0;border-bottom:var(--w1) solid var(--dash);font-size:var(--t1);line-height:1.35}
.cmp-menuWrap .n{display:flex;gap:10px;align-items:baseline;font-weight:700}
.cmp-menuWrap .p{margin-left:auto;font-weight:900}
.cmp-menuWrap .d{display:block;font-size:var(--t0);color:#E7C6B2;margin-top:2px}
.cmp-wall{display:flex;flex-direction:column}
.cmp-wall>[data-part]{border-bottom:var(--w4) solid var(--orange)}
.cmp-wall>[data-part]>.about{border-bottom:0}
.corner{border-top:0}
@media (max-width:619.98px){
  .parlour__seal{flex-direction:row;align-items:center;gap:var(--s4);
    text-align:left;padding:var(--s4) 0 var(--s2)}
  .parlour__seal img{width:118px;flex:0 0 auto}
  .hersheys{max-width:none}
  .case__also .also{display:flex;flex-wrap:wrap;gap:var(--s1)}
  .case__also .also li,.case__also .also li:last-child{font-size:var(--t0);
    font-weight:800;letter-spacing:var(--tr-2);text-transform:uppercase;
    border:var(--w1) solid rgba(123,1,0,.55);border-radius:var(--r-p);
    padding:var(--s1) var(--s3);line-height:1.3}
  .askplate .cmp-prices{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 var(--s4)}
  .askplate .cmp-prices li{font-size:var(--t0);gap:var(--s2);padding:7px 0}
  #sides .items,.grp--tight .items{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 var(--s4)}
}
@media (max-width:900px){
  .cmp-rit{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);
    padding:var(--s3) var(--s4) var(--s4)}
  .cmp-rit .day{grid-area:1/1}
  .cmp-rit .when{grid-area:1/2;margin-top:0;padding-top:0;text-align:right;
    font-size:var(--t-1)}
  .cmp-rit .nm{grid-area:2/1/auto/-1;margin-top:2px}
  .cmp-rit>p:not([class]){grid-area:3/1/auto/-1}
}
@media (max-width:619.98px){
  .grp{padding:var(--s3) var(--s4) var(--s4)}
  .corner .cell{padding:var(--s3) 0 var(--s4)}
  .askplate .cmp-prices{text-align:left}
  .tbar .in{padding-top:var(--s3);padding-bottom:var(--s3)}
  .tbar .chips li{padding:3px var(--s2)}
  .cmp-rituals,.cmp-ask{padding-top:var(--s5);padding-bottom:var(--s5)}
  .cmp-ask p{margin-top:var(--s2)}
  .foot img{max-width:230px}
}
.mhead{background:var(--blue);border-bottom:var(--w4) solid var(--orange);
  padding:var(--band) 0}
.mhead h1{font-size:clamp(var(--t5),9vw,var(--t8));margin:0}
.mhead p{margin:var(--s2) 0 0}
.mhead .cmp-daypart{margin-top:var(--s3)}
.m-list .parlour-sec .grp__title,.m-list .parlour-sec .grp__note,
.m-list .parlour-sec .n,.m-list .parlour-sec .d,
.m-list .parlour-sec .p{color:var(--maroon)}
.m-list .parlour-sec .grp__rule{background:var(--maroon)}
.m-list .parlour-sec .items li{border-bottom-color:rgba(123,1,0,.22)}
.m-list .parlour-sec .grp{border-color:rgba(123,1,0,.28)}
.m-list .b2 .grp:last-child{display:block}
@media (min-width:620px){
  .m-list .parlour-sec .board__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.status:not(.is-open):not(.is-shut){background:var(--blue-deep)}
.status:not(.is-open):not(.is-shut)::before{background:none}
.sign__h1{margin:0;font-size:0;line-height:0}
.jump li:last-child{order:9}
.cmp-ritGrid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.flavnote{margin:0 0 var(--s2);font-size:var(--t0);font-weight:700;
  color:var(--maroon);opacity:.85}
@media (max-width:459.98px){.flav li{font-size:clamp(var(--t2),5.6vw,var(--t4))}}
@media (min-width:460px){.flav{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 var(--s5)}}
.named{margin:var(--s5) 0 var(--s2);background:var(--maroon);
  border:var(--w3) solid var(--orange);border-radius:var(--r);
  box-shadow:var(--x-m) var(--x-m) 0 rgba(123,1,0,.4);padding:var(--s4)}
.named h3{color:var(--cream);margin:0;font-size:clamp(var(--t2),4.8vw,var(--t3))}
.named .grp__rule{background:var(--orange)}
.named .items li{border-bottom-color:rgba(252,227,212,.3)}
.named .n{color:var(--cream);font-weight:800;line-height:var(--lh-h);
  font-size:clamp(var(--t1),4.4vw,var(--t2))}
.named .p{color:var(--cream)}
@media (min-width:620px){.named{grid-column:1/-1;grid-row:3}}
.m-list .parlour-sec .grp--sig{background:var(--maroon);border:var(--w3) solid var(--orange);
  border-radius:var(--r);padding:var(--s4);box-shadow:var(--x-m) var(--x-m) 0 rgba(123,1,0,.4)}
.m-list .parlour-sec .grp--sig .grp__title,.m-list .parlour-sec .grp--sig .n,
.m-list .parlour-sec .grp--sig .p,.m-list .parlour-sec .grp--sig .d{color:var(--cream)}
.m-list .parlour-sec .grp--sig .grp__rule{background:var(--orange)}
.m-list .parlour-sec .grp--sig .items li{border-bottom-color:rgba(252,227,212,.3)}
.foot a,.cmp-menulink a{display:inline-block;min-height:44px;padding:13px 4px;line-height:18px}
.rail__name{display:inline-flex;align-items:center;min-height:44px}
.thumb .btn{width:100%;flex:1 1 auto}
.cmp-menuWrap .gn{font-size:var(--t0);color:#FFB088;margin:0 0 6px}

/* ---- header CTAs: Call + Directions lead; DoorDash stays, demoted ---- */
.rail__acts{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:var(--s2)}
.rail__act{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 10px;font-family:'Archivo',sans-serif;font-size:var(--t-1);font-weight:800;
  letter-spacing:var(--tr-0);text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--maroon);background:var(--cream);border:var(--w2) solid var(--orange);
  border-radius:var(--r-s);line-height:1}
.rail__act--dd{background:transparent;color:var(--cream);border-color:rgba(252,227,212,.55);
  font-weight:700}
.rail__act:hover{background:var(--orange);color:var(--cream);border-color:var(--orange)}
.rail__act--dd:hover{background:var(--cream);color:var(--maroon)}
.dir-link{font-size:var(--t0);font-weight:800;text-transform:uppercase;letter-spacing:var(--tr-0)}
.m-nap{background:var(--blue);color:var(--cream);border-top:var(--w4) solid var(--orange)}
.m-nap .week{margin-top:var(--s3)}
.m-nap__line{margin:var(--s2) 0 0;font-size:var(--t0);font-weight:800;letter-spacing:var(--tr-0);
  text-transform:uppercase;opacity:.9}
/* look-status.js adds week-shut on /menu (no weekBtn). Keep menu NAP hours visible. */
.week-shut .m-nap .week{display:grid}
.cell .big a{padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.foot a{color:inherit}
@media (max-width:699.98px){
  .rail__mini{display:none !important}
  .rail__act{padding:0 8px;font-size:12px}
  .rail__act--dd{display:none} /* DoorDash remains on the mobile thumb bar */
  .rail__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:700px){
  .rail__act{padding:0 12px}
}
@media (min-width:1100px){
  .rail .rail__dd{display:none} /* replaced by .rail__acts */
}
/* empty photo rail: hidden until it has real images (CAFE-061 — no placeholders) */
.photo-rail:not(:has(img[src]:not([src=""]))){display:none}

/* food photos — 2026-08-31. Modest rail; does not restyle the boards. */
.photo-rail{position:relative;z-index:1;padding:var(--band) 0;border-bottom:var(--w4) solid var(--orange);background:var(--blue-deep)}
.photo-rail .board__head{padding:0 0 var(--s4)}
.photo-rail__hero{margin:0 0 var(--s4);border:var(--w3) solid var(--orange);border-radius:var(--r);box-shadow:var(--x-l) var(--x-l) 0 var(--maroon);overflow:hidden;background:var(--wall)}
.photo-rail__hero img{width:100%;aspect-ratio:5/4;object-fit:cover}
.photo-rail__hero figcaption,.photo-rail__strip span{
  display:block;font-size:var(--t-1);font-weight:800;letter-spacing:var(--tr-1);text-transform:uppercase;
  padding:var(--s2) var(--s3);background:var(--maroon);color:var(--cream)}
.photo-rail__strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:0;padding:0;list-style:none}
.photo-rail__strip li{margin:0;border:var(--w2) solid var(--orange);border-radius:var(--r-s);overflow:hidden;background:var(--wall)}
.photo-rail__strip img{width:100%;aspect-ratio:1/1;object-fit:cover}
@media (min-width:700px){
  .photo-rail__strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.photo-rail--mini{padding:var(--s4) 0 var(--s5);background:var(--blue)}
.photo-rail--mini .photo-rail__strip{gap:var(--s2)}
.photo-rail--mini .photo-rail__strip img{aspect-ratio:5/4}
.photo-rail--mini .photo-rail__strip span{padding:var(--s1) var(--s2);font-size:11px}
@media (min-width:700px){
  .photo-rail--mini .photo-rail__strip{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* ---- CAFE CSS FIX 2026-09-05 (Sean approved) ----------------------------
   1) Desktop .flav two-column names were colliding (long display type +
      line-height 1.02 with no min-width/wrap). Keep two columns; shrink type
      and let long names wrap inside their track.
   2) /menu (and home) hours clipped trailing "PM" near 1024px: 3-col week
      grid + nowrap + larger .today times. Hold 2 columns until 1280px and
      keep time strings from overflowing the cell.
   ------------------------------------------------------------------------ */
.flav li{min-width:0;overflow-wrap:anywhere;line-height:1.08}
@media (min-width:460px){
  .flav li{font-size:clamp(var(--t3),4.2vw,var(--t5));line-height:1.1}
}
@media (min-width:900px){
  .flav li{font-size:clamp(var(--t3),1.85vw,var(--t5));padding:var(--s2) 0;line-height:1.12}
}
.week li{min-width:0}
.week .d,.week .h{min-width:0}
.week .h{overflow-wrap:normal}
/* replace the early 3-col kick: stay at 2 cols through tablet/laptop */
@media (min-width:1024px){
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .week .h{font-size:var(--t0)}
  .week li.today .h{font-size:var(--t1)}
}
@media (min-width:1280px){
  .week{grid-template-columns:repeat(3,minmax(0,1fr))}
  .week .h{font-size:var(--t1)}
  .week li.today .h{font-size:var(--t2)}
}

/* ---- CAFE CSS FIX 2026-09-05b: DoorDash .btn label sat on the bottom edge.
   Cause: padding was top-heavy (s3 / s4 / s2) and Luckiest Guy has tall
   ascent + low ink, so the word looked glued to the orange border.
   Equal vertical padding + line-height 1 keeps flex centering honest. */
.btn{padding:var(--s2) var(--s4);line-height:1;text-align:center}
.thumb .btn{padding:var(--s2) var(--s4);line-height:1}

/* ---- 2026-09-11 live polish: tap delay, photo captions, hours wrap ---- */
.btn,.rail__act,.jump a,.weekbtn,.cmp-btnRow a,.thumb .btn{touch-action:manipulation}
.photo-rail__hero figcaption,.photo-rail__strip span{overflow-wrap:anywhere}
.week .h{white-space:nowrap}
@media (max-width:359.98px){
  .week .h{white-space:normal}
}

/* ---- 2026-09-12 live polish: interim plates + CTA + OG-safe presentation ---- */
.photo-rail__hero img{aspect-ratio:4/3;object-fit:cover;object-position:center 42%;background:var(--wall)}
.photo-rail__strip img{object-position:center 45%;background:var(--wall)}
.photo-rail__cta{margin:var(--s5) 0 0;display:flex;justify-content:center}
.photo-rail__cta .btn{width:100%;max-width:28rem}
@media (min-width:900px){
  .photo-rail{padding:calc(var(--band) + var(--s2)) 0}
  .photo-rail__hero{margin-bottom:var(--s5)}
  .photo-rail__hero img{aspect-ratio:16/10}
  .photo-rail__cta .btn{width:auto;min-width:18rem;padding:var(--s3) var(--s6)}
}
.photo-rail--mini .photo-rail__strip img{aspect-ratio:4/3;object-position:center 45%}
@media (min-width:700px){
  .photo-rail--mini .photo-rail__strip{grid-template-columns:repeat(7,minmax(0,1fr))}
}
/* jump: Plates is first and stays first (no data-part reorder) */
.jump li:first-child{order:0}
.cmp-btnRow a{min-height:48px;align-items:center;display:inline-flex}
/* 404 — same wall, no rail, still a way out */
.err{padding:10vh var(--gut) 12vh;max-width:44rem}
.err h1{font-size:clamp(var(--t6),12vw,var(--t8))}
.err .btn{margin-top:var(--s5);max-width:22rem}

/* ---- 2026-09-12 text + layout QA ------------------------------------------
   Customer-visible wrap/clip/overlap. Does not change prices, hours values,
   DoorDash hrefs, or price-mode. */
.flav li{overflow-wrap:normal;word-break:normal;hyphens:none}
/* Nested 2-col (parlour × case × flav) left ~95px tracks at tablet — names
   split like CHOCO / LATE. One column until the case is actually wide. */
@media (min-width:460px) and (max-width:1279.98px){
  .flav{grid-template-columns:minmax(0,1fr)}
}
.n,.askplate .n,.askplate .cmp-prices li{min-width:0;overflow-wrap:break-word}
.thumb__w{min-width:0;overflow:hidden;text-overflow:ellipsis}
.m-nap__line{line-height:1.45;text-wrap:pretty;max-width:62ch}
.photo-rail--mini .photo-rail__strip span{
  letter-spacing:.06em;overflow-wrap:break-word;line-height:1.25}
@media (min-width:900px) and (max-width:1099.98px){
  /* tagline + Call/Directions/DoorDash + jump rail do not fit Luckiest Guy nowrap */
  .rail__name i{display:none}
  .rail__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:700px) and (max-width:1099.98px){
  /* 7-up mini rail at tablet makes 11px captions wrap mid-word */
  .photo-rail--mini .photo-rail__strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1279.98px){
  /* prefer a wrapped time to a clipped "PM" */
  .week .h{white-space:normal;text-align:right}
}