:root{
  --ink:#111111;
  --ground:#B9C7D5;   /* steel ground */
  --steel-dk:#8FA2B6;
  --teal:#2EC4C6;     /* signal teal */
  --green:#5BC25B;    /* signal green */
  --purple:#7A3FA6;   /* deep violet */
  --red:#D7301F;      /* alarm red */
  --yellow:#FFD93B;   /* stamp yellow */
  --white:#FFFFFF;
  --display:"Unbounded", "Arial Black", sans-serif;
  --display-wt:900;
  --body:"Unbounded", system-ui, sans-serif;
  --mono:"Unbounded", system-ui, sans-serif;
  --b:4px solid var(--ink);
  --sh:8px 8px 0 var(--ink);
  --gut:clamp(16px, 4vw, 64px);
  --snap:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--ink) var(--ground);-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font:500 1rem/1.6 var(--body)}
::selection{background:var(--yellow);color:var(--ink)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:3px}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
/* on dark grounds the focus outline turns yellow */
:is(.top,footer,.sec-head,.state,.next,.why,.close-main,.contact-side) :focus-visible{outline-color:var(--yellow)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sample{
  display:inline-block;font:800 .78rem/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
  background:var(--white);border:3px solid var(--ink);padding:6px 8px;white-space:nowrap;
}

/* ─── Nav ─── */
.top{
  background:var(--ink);color:var(--white);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--gut);
  position:sticky;top:0;z-index:20;
}
html{scroll-padding-top:var(--nav-h,72px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* land each section's black heading bar just under the sticky nav, not its top padding */
#week,#reviews,#contents{scroll-margin-top:calc(16px - clamp(28px,4vw,56px))}
.menu-btn{display:none}
.top .mark{font-size:1.15rem}
.mark{padding-block:12px;margin-block:-12px;font:var(--display-wt) 1.5rem/1 var(--display);color:var(--yellow);text-decoration:none;text-transform:uppercase;display:flex;align-items:center}
.top ul{display:flex;gap:4px;list-style:none}
.top ul a{display:block;font:800 .9rem/1 var(--body);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;padding:10px 12px;border:2px solid transparent}
@media (min-width:961px){.top ul a:hover,.top ul a[aria-current]{border-color:var(--yellow);color:var(--yellow)}}

/* ─── Today: the block grid ─── */
.today{padding:clamp(20px,3.4vw,48px) var(--gut) clamp(40px,5vw,72px)}

/* ─── Hero: sell the pizza first ─── */
.hero{padding:clamp(20px,3.4vw,48px) var(--gut) clamp(8px,1.6vw,24px)}
.hero-slab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4px;background:var(--ink);border:var(--b);box-shadow:var(--sh)}
.hero-pitch{container-type:inline-size;background:var(--yellow);padding:clamp(24px,3.6vw,56px);display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2vw,26px)}
.hero h1{font:var(--display-wt) clamp(1.6rem,10cqi,6rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
.hero-lede{font:500 clamp(1rem,1.4vw,1.2rem)/1.5 var(--body);max-width:44ch}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.hero-facts li{font:800 .82rem/1 var(--body);text-transform:uppercase;letter-spacing:.03em;background:var(--white);border:3px solid var(--ink);padding:9px 11px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px clamp(16px,2.4vw,32px);margin-top:4px}
.hero .go{box-shadow:6px 6px 0 var(--purple)}
.hero .go:hover{box-shadow:3px 3px 0 var(--purple)}
.hero .go:active{box-shadow:0 0 0 var(--purple)}
.hero-art{background:var(--teal);display:grid;place-items:center;padding:clamp(20px,3vw,44px);min-height:clamp(320px,38vw,560px)}
/* ── Hero pizza (markup in index.html, explained there) ──
   Resting state = what people with reduced motion see: slice already pulled out, nothing moving. */
.pizza{width:78%;max-width:440px;height:auto;display:block;overflow:visible}   /* 78%: leaves room for the drift */
/* The slice sits 24px right / 18px up from the pie (diagonal away from the centre).
   The transition makes hover/tap pulls ease in and out instead of jumping. */
.pizza .slice{transform:translate(24px,-18px);transition:transform .5s var(--snap)}
/* Spin around the pie's centre, which sits at (225,310) in the svg's coordinates (dead centre left-to-right).
   The viewBox starts at 0,0 so this pivot means the same thing in Chrome, Safari and
   every iPhone browser (WebKit used to read an offset viewBox differently and drift). */
.pizza .turn{transform-box:view-box;transform-origin:225px 310px}
/* Steam starts invisible; the steam animation fades each squiggle in and out */
.pizza .steam path{stroke:var(--white);stroke-width:7;opacity:0}
.hero-art{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Hover (desktop) or tap (.pulled, toggled in nav.js) pulls the slice nearly twice as far.
   Change 46px/-35px to pull further or less. */
.hero-art:hover .pizza .slice,.hero-art.pulled .pizza .slice{transform:translate(46px,-35px)}
.ticker{grid-column:1/-1;display:block;overflow:hidden;min-width:0;background:var(--ink);color:var(--yellow);text-decoration:none;padding:14px 0}
.ticker-track{display:inline-flex;align-items:center;gap:22px;white-space:nowrap;padding-left:22px;font:var(--display-wt) clamp(1rem,1.8vw,1.5rem)/1 var(--display);text-transform:uppercase}
.ticker-track i{width:12px;height:12px;background:var(--teal);transform:rotate(45deg);flex:none}
.ticker:hover .ticker-track span{color:var(--white)}
.slab{
  display:grid;grid-template-columns:repeat(12, minmax(0,1fr));
  border:var(--b);box-shadow:var(--sh);background:var(--ink);gap:4px;
}
.stop{
  grid-column:span 8;background:var(--teal);
  padding:clamp(20px,3vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(18px,2.4vw,32px);
}
.stop-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.chip-today{background:var(--yellow);border:3px solid var(--ink);font:800 .95rem/1 var(--body);text-transform:uppercase;padding:8px 10px}
.tagline{margin-top:10px;font:500 1rem/1.45 var(--body);max-width:52ch}
.stop-name{font:var(--display-wt) clamp(2.6rem,7vw,6.4rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere}
.addr{font:500 1.08rem/1.45 var(--body);display:flex;gap:10px;align-items:flex-start;max-width:52ch}
.addr .icon{margin-top:.2em;stroke-width:2.6}

.state{
  grid-column:span 4;background:var(--purple);color:var(--white);
  padding:clamp(20px,2.6vw,36px);
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;
}
.stamp{
  align-self:flex-start;
  background:var(--yellow);color:var(--ink);border:var(--b);box-shadow:6px 6px 0 var(--ink);
  font:var(--display-wt) clamp(2rem,3.6vw,3.2rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;
  padding:.28em .4em .32em;
}
.stamp[data-state="burning"]{background:var(--green)}
.stamp[data-state="banked"]{background:var(--red);color:var(--white)}
.stamp[data-state="out"]{background:var(--steel-dk)}
.state-note{font:800 1.15rem/1.35 var(--body)}
.next{margin-top:auto;border-top:3px solid var(--white);padding-top:14px;font:800 1rem/1.45 var(--body);color:var(--white)}
.next-k{font:800 .82rem/1 var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--yellow);margin-right:.35em}
.next b{font-weight:800}
.next b + span::before{content:"· "}

/* the day as segmented cells */

.go-bar{
  grid-column:1/-1;background:var(--green);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;
  padding:clamp(16px,2vw,24px) clamp(20px,3vw,40px);
}
.go{
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:var(--yellow);text-decoration:none;
  font:var(--display-wt) clamp(1.3rem,2.4vw,1.9rem)/1 var(--display);text-transform:uppercase;
  padding:.6em .9em .62em;border:var(--b);box-shadow:6px 6px 0 var(--white);
  transition:transform .12s var(--snap), box-shadow .12s var(--snap);
}
.go:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--white)}
.go:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--white)}
.week-link{font:800 1rem/1 var(--body);text-transform:uppercase;padding:14px 4px}


/* ─── Sections ─── */
main > section{padding:clamp(28px,4vw,56px) var(--gut) clamp(40px,5vw,72px)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;background:var(--ink);color:var(--yellow);padding:clamp(16px,2.2vw,28px) clamp(16px,2.4vw,32px);border:var(--b);border-bottom:0;box-shadow:var(--sh)}
.sec-head .sample{background:var(--yellow);color:var(--ink);border-color:var(--yellow);white-space:normal;line-height:1.3}
.sec-head + .week,.sec-head + .contents{border-top:0}
h2,.sec-head h1{font:var(--display-wt) clamp(2.2rem,5.4vw,4.4rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.02em;text-wrap:balance}
.foot-note{margin-top:18px;font:500 .95rem/1.45 var(--body)}
.reviews-foot .foot-note{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
p{text-wrap:pretty}

/* week */
.week{display:grid;grid-template-columns:minmax(172px,1.15fr) repeat(7,minmax(0,1fr));gap:4px;background:var(--ink);border:var(--b);box-shadow:var(--sh)}
.week > *{background:var(--white);padding:12px 12px 14px;min-height:72px;min-width:0}
.week .day{background:var(--ink);color:var(--white);min-height:0;font:var(--display-wt) 1.05rem/1 var(--display);text-transform:uppercase}
.week .day small{display:block;font:800 .78rem/1.3 var(--body);color:var(--teal);margin-top:6px;text-transform:none}
.week .day.lit{background:var(--yellow);color:var(--ink)}
.week .day.lit small{color:var(--ink)}
.week .corner{background:var(--ink);min-height:0}
.week .city{background:var(--purple);color:var(--white);font:var(--display-wt) .92rem/1.1 var(--display);text-transform:uppercase}
.week .cell b{display:block;font:800 1.02rem/1.2 var(--body);text-transform:uppercase}
.week .cell > span{display:block;font:500 .84rem/1.35 var(--body);margin-top:4px}
.week .cell.mpls{background:var(--teal)}
.week .cell.stp{background:var(--green)}
.week .cell.lit{background:var(--yellow)}
.week .none{background:var(--steel-dk)}
.week .dprefix{display:none}

/* contents */
.contents{border:var(--b);box-shadow:var(--sh);background:var(--ink);display:grid;grid-template-columns:fit-content(34%) minmax(0,1fr) auto;gap:4px 28px}
.pie{background:var(--white);grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;row-gap:8px;padding:20px clamp(16px,2.4vw,32px)}
.pie :is(h2,h3){font:var(--display-wt) clamp(1.35rem,3vw,2.4rem)/1 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.pie p{font:500 1.02rem/1.5 var(--body)}
.pie p b{font:800 .8rem/1 var(--body);text-transform:uppercase;background:var(--ink);color:var(--white);padding:4px 6px;margin-right:8px;vertical-align:.12em}
.price{font:800 1.4rem/1 var(--mono);background:var(--yellow);border:3px solid var(--ink);padding:10px 14px;min-width:5ch;text-align:center}
.pie:nth-child(3n+2) :is(h2,h3){color:var(--purple)}
.pie:nth-child(3n) :is(h2,h3){color:var(--red)}

/* reviews */
.reviews{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:4px;background:var(--ink);border:var(--b);border-top:0;box-shadow:var(--sh)}
.review{background:var(--white);padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;gap:14px;min-width:0}
.review.lead{grid-row:span 2;background:var(--yellow);justify-content:space-between}
.review:nth-child(2){background:var(--teal)}
.review:nth-child(3){background:var(--green)}
.review:nth-child(4){grid-column:span 2}
.review-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stars{display:flex;gap:2px}
.stars svg{width:20px;height:20px;fill:var(--ink)}
.review blockquote{font:500 1.08rem/1.5 var(--body)}
.review.lead blockquote{font:800 clamp(1.4rem,2.4vw,2rem)/1.25 var(--body);letter-spacing:-.01em}
.review.lead .stars svg{width:28px;height:28px}
.who{display:flex;align-items:center;gap:10px;font:800 .9rem/1.3 var(--body);text-transform:uppercase}
.who i{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--ink);color:var(--yellow);font:var(--display-wt) 1rem/1 var(--display);font-style:normal}
.who small{display:block;font:500 .82rem/1.3 var(--body);text-transform:none}
.reviews-foot{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:22px}
.ghost-btn{display:inline-flex;align-items:center;gap:.5em;background:var(--white);color:var(--ink);border:var(--b);box-shadow:6px 6px 0 var(--ink);padding:14px 18px;font:800 1rem/1 var(--body);text-transform:uppercase;text-decoration:none;transition:transform .12s var(--snap), box-shadow .12s var(--snap)}
.ghost-btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.ghost-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}

/* proof */
.why{background:var(--purple);color:var(--white);border-block:var(--b)}
.why h2{color:var(--yellow);font-size:clamp(2.6rem,7vw,6rem);max-width:12ch}
.why h2 em{font-style:normal;color:var(--teal)}
.why-grid{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--ink);border:var(--b);box-shadow:8px 8px 0 var(--yellow)}
.why-grid div{padding:clamp(18px,2.4vw,30px);color:var(--ink)}
.why-grid div:nth-child(1){background:var(--red);color:var(--white)}
.why-grid div:nth-child(2){background:var(--teal)}
.why-grid h3{font:var(--display-wt) clamp(1.5rem,2.6vw,2.2rem)/1.05 var(--display);text-transform:uppercase}
.why-grid p{margin-top:12px;font:500 1.1rem/1.5 var(--body);max-width:44ch}

.close{padding:clamp(40px,6vw,88px) var(--gut)}
.menu-page .close{padding-top:clamp(8px,2vw,24px)}
.close-slab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;background:var(--ink);border:var(--b);box-shadow:var(--sh)}
.close-main{background:var(--red);color:var(--white);padding:clamp(22px,3vw,40px)}
.close h2:not(.close-place){font-size:clamp(1.4rem,2.6vw,2rem);color:var(--white)}
.close .close-place{font:var(--display-wt) clamp(2.4rem,6.4vw,5.4rem)/.92 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin-top:14px;overflow-wrap:anywhere}
.close .close-place:first-child{margin-top:0}
.close-meta{font:500 1.05rem/1.45 var(--body);margin-top:16px;max-width:60ch}
.close-go-wrap{background:var(--green);display:grid;place-items:center;padding:clamp(22px,3vw,40px)}
/* home: the closing slab carries a live map of the stop */
.close-slab.has-map{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.has-map .close-main{display:flex;flex-direction:column;align-items:flex-start}
.has-map .close-main .go{margin-top:clamp(20px,2.4vw,32px)}
.close-map{position:relative;background:var(--steel-dk);min-height:380px}
.close-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
footer{background:var(--ink);color:var(--white);padding:28px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer p{font:500 .92rem/1.45 var(--body);max-width:44ch}
.credit a{color:var(--yellow);text-decoration-thickness:2px;padding-block:12px}
.credit a:hover{color:var(--white)}
.social{display:flex;gap:14px;list-style:none}
.social a{display:grid;place-items:center;width:52px;height:52px;background:var(--yellow);color:var(--ink);border:3px solid var(--yellow);box-shadow:5px 5px 0 var(--white);transition:transform .12s var(--snap), box-shadow .12s var(--snap)}
.social a:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--white)}
.social a:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--white)}
.social svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:square;stroke-linejoin:round}
.social .dot{fill:currentColor;stroke:none}

/* ─── Motion: the press. Blocks land on their hard shadows like a stamp. ───
   Focal: the hero assembles once on load, then the status stamp slams.
   Supporting: sections press in once as they scroll into view (nav.js adds .pre),
   the mobile menu drops its slabs as a list, the NOW chip pulses as a live signal. */
@media (prefers-reduced-motion:no-preference){
  /* hero: outer slab lands, cells wipe in left to right, stamp slams last */
  .hero-slab{animation:land .5s var(--snap) both}
  .hero-pitch,.hero-art{animation:wipe .45s var(--snap) both}
  .hero-pitch{animation-delay:.1s}
  .hero-art{animation-delay:.22s}
  /* Pizza motion (only when the visitor hasn't asked for reduced motion):
     pull  = slice slides from the pie to its resting spot, 0.7s after load.
             "backwards" holds the start (closed) position during the delay; afterwards the
             resting transform above takes over, which is what lets hover/tap still work.
     turn  = one full rotation every 90s; change 90s to spin faster or slower.
     steam = each squiggle rises and fades over 3.6s, staggered 1.2s apart. */
  .pizza .slice{animation:pull .7s var(--snap) .7s backwards}
  .pizza .turn{animation:turn 90s linear 1.4s infinite}
  /* drift = the whole pizza wanders a figure-eight around the panel every 24s, starting at and
             passing back through dead centre (translate only, so it looks the same everywhere).
             Make the numbers in @keyframes drift bigger to roam further. */
  .pizza .drift{animation:drift 24s linear 1.4s infinite}
  .pizza .steam path{animation:steam 3.6s ease-out infinite}
  .pizza .steam path:nth-child(2){animation-delay:1.2s}
  .pizza .steam path:nth-child(3){animation-delay:2.4s}
  .ticker-track{animation:tick 38s linear 1s infinite}
  .ticker:hover .ticker-track,.ticker:focus-visible .ticker-track{animation-play-state:paused}

  .today.play .slab{animation:land .5s var(--snap) both}
  .today.play :is(.stop,.state,.go-bar){animation:wipe .45s var(--snap) both}
  .today.play .state{animation-delay:.1s}
  .today.play .go-bar{animation-delay:.2s}
  .today.play .stamp{animation:slam .5s var(--snap) .35s both}

  /* scroll press: only blocks below the fold get .pre, so nothing visible is ever hidden */
  .pre{opacity:0;transform:translate(-12px,-12px)}
  .pre:is(.sec-head,.week,.contents,.reviews,.close-slab){box-shadow:20px 20px 0 var(--ink) !important}
  .pre.why-grid{box-shadow:20px 20px 0 var(--yellow) !important}
  .pressable{transition:opacity .3s ease-out, transform .5s var(--snap), box-shadow .5s var(--snap)}

  /* mobile menu: the slabs drop in as a list (exit is instant) */
  .top.open #nav-links li{animation:drop .32s var(--snap) both}
  .top.open #nav-links li:nth-child(2){animation-delay:.04s}
  .top.open #nav-links li:nth-child(3){animation-delay:.08s}
  .top.open #nav-links li:nth-child(4){animation-delay:.12s}

  /* live signal */

  /* Review stars: when the reviews scroll into view (nav.js adds .stars-in), each card's
     stars pop in left to right, spinning up from nothing, overshooting, then settling.
     --card staggers the cards, --star staggers the five stars within a card. */
  .reviews.stars-wait .stars svg{transform:scale(0)}            /* hidden until the pop starts */
  .reviews.stars-in .stars svg{animation:starpop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--card,0s) + var(--star,0s))}
  .review:nth-child(2){--card:.12s}
  .review:nth-child(3){--card:.24s}
  .review:nth-child(4){--card:.36s}
  .stars svg:nth-child(2){--star:.08s}
  .stars svg:nth-child(3){--star:.16s}
  .stars svg:nth-child(4){--star:.24s}
  .stars svg:nth-child(5){--star:.32s}
}
@media (prefers-reduced-motion:reduce){
  .pizza .steam path{opacity:.7}   /* reduced motion: steam shown, but still */
  .pizza .slice{transition:none}
  .pressable{transition:opacity .3s ease-out}
  .pre{opacity:0}
}
@keyframes starpop{0%{transform:scale(0) rotate(-120deg)}70%{transform:scale(1.3) rotate(12deg)}100%{transform:none}}
@keyframes drift{
  0%,50%,100%{transform:translate(0,0)}
  12.5%{transform:translate(21px,14px)}  25%{transform:translate(30px,0)}   37.5%{transform:translate(21px,-14px)}
  62.5%{transform:translate(-21px,14px)} 75%{transform:translate(-30px,0)} 87.5%{transform:translate(-21px,-14px)}
}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes steam{0%{opacity:0;transform:translateY(16px)}25%{opacity:.85}100%{opacity:0;transform:translateY(-34px)}}
@keyframes pull{from{transform:none}to{transform:translate(24px,-18px)}}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes land{from{transform:translate(-10px,-10px);box-shadow:18px 18px 0 var(--ink)}to{transform:none;box-shadow:var(--sh)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes slam{from{transform:translate(-14px,-14px) scale(1.12);box-shadow:20px 20px 0 var(--ink)}to{transform:none;box-shadow:6px 6px 0 var(--ink)}}
@keyframes drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* ─── Narrow ─── */
@media (max-width:960px){
  .stop,.state{grid-column:1/-1}
  .hero-slab{grid-template-columns:minmax(0,1fr)}
  .hero-art{order:-1;min-height:0;padding:20px}
  .pizza{width:76%;max-width:300px}
  .stop{min-height:0}
  .menu-btn{
    display:grid;place-items:center;flex:none;width:52px;height:52px;
    background:var(--yellow);color:var(--ink);border:3px solid var(--yellow);cursor:pointer;
    box-shadow:4px 4px 0 var(--white);transition:transform .12s var(--snap), box-shadow .12s var(--snap);
  }
  .menu-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--white)}
  .menu-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--white)}
  .menu-btn svg{width:28px;height:28px;stroke:currentColor;stroke-width:3.2;stroke-linecap:square}
  .menu-btn line{transition:transform .2s var(--snap), opacity .15s;transform-origin:12px 12px}
  .top.open .menu-btn line:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .top.open .menu-btn line:nth-child(2){opacity:0}
  .top.open .menu-btn line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .top ul{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:4px;background:var(--ink);
    border-top:4px solid var(--yellow);border-bottom:4px solid var(--ink);
    box-shadow:0 8px 0 var(--ink);
  }
  .top.open ul{display:flex}
  .top #nav-links a:focus-visible{outline-color:var(--ink);outline-offset:-8px}
  .top #nav-links li:nth-child(4) a:focus-visible{outline-color:var(--yellow)}
  .top ul a{
    font:var(--display-wt) clamp(1.5rem,6.4vw,2.2rem)/1 var(--display);
    padding:22px var(--gut);border:0;color:var(--ink);
  }
  .top ul li:nth-child(1) a{background:var(--teal)}
  .top ul li:nth-child(2) a{background:var(--yellow)}
  .top ul li:nth-child(3) a{background:var(--green)}
  .top ul li:nth-child(4) a{background:var(--purple);color:var(--white)}
  .top ul a:hover,.top ul a[aria-current]{text-decoration:underline;text-decoration-thickness:4px}
  .week{grid-template-columns:1fr}
  .week .corner,.week .city,.week .day,.week .cell.none{display:none}
  .week .dprefix{display:inline}
  .week .cell{order:var(--o)}
  .why-grid{grid-template-columns:1fr}
  .close-slab{grid-template-columns:1fr}
  .close-go-wrap{place-items:stretch}
  .close-slab.has-map{grid-template-columns:1fr}
  .close-map{min-height:300px}
  .reviews{grid-template-columns:1fr}
  .review.lead{grid-row:auto}
  .review:nth-child(4){grid-column:auto}
  .contents{grid-template-columns:minmax(0,1fr) auto}
  .pie :is(h2,h3){overflow-wrap:break-word;font-size:clamp(1.1rem,5.8vw,1.6rem)}
  .pie p{grid-column:1/-1;grid-row:2}
}
@media (max-width:560px){
  .today{padding-top:16px}
  .stop{padding:18px 16px;gap:16px}
  .stop-top{font-size:.8rem}
  .state{padding:16px;gap:12px}
  .stamp{font-size:1.6rem}
  .state-note{font-size:1rem}
  .top .mark{font-size:clamp(.95rem,4.4vw,1.1rem);white-space:nowrap}
  .top{padding-block:10px}
  .go-bar{padding:14px 16px}
  .go{width:100%;justify-content:center;font-size:clamp(1.05rem,5.4vw,1.3rem)}
  .week-link{display:none}
  .hero .week-link{display:inline-block}
}

/* menu page */
:is(.menu-page,.contact-page) .sec-head h1{font-size:clamp(3rem,9vw,7rem)}
:is(.menu-page,.contact-page) > section:first-child{padding-top:clamp(24px,4vw,56px)}


/* narrowest phones: price drops under the description so pie names never break mid-word */
@media (max-width:420px){
  .contents{grid-template-columns:minmax(0,1fr)}
  .pie :is(h2,h3){font-size:clamp(1.35rem,7vw,1.6rem)}
  .pie .price{grid-row:3;justify-self:start;margin-top:4px}
}

@media print{.pre{opacity:1 !important;transform:none !important}}

/* ─── Contact page ─── */
.contact-slab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:4px;background:var(--ink);border:var(--b);border-top:0;box-shadow:var(--sh)}
.contact-side{background:var(--purple);color:var(--white);padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:16px}
.contact-side h2{color:var(--yellow);font-size:clamp(1.8rem,3.4vw,2.8rem)}
.contact-side p{font:500 1.08rem/1.5 var(--body);max-width:38ch}
.contact-find{margin-top:auto;border-top:3px solid var(--white);padding-top:16px}
.contact-find a{color:var(--yellow);font-weight:800;padding-block:10px}
.contact-form{background:var(--white);padding:clamp(22px,3vw,40px);display:grid;gap:22px}
.field{display:grid;gap:8px}
.field[hidden]{display:none}
.field label{font:800 .9rem/1.2 var(--body);text-transform:uppercase;letter-spacing:.03em}
.field .opt{font-weight:500;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;font:500 1.05rem/1.4 var(--body);color:var(--ink);background:var(--white);
  border:3px solid var(--ink);border-radius:0;padding:13px 14px;min-height:52px;
  transition:box-shadow .15s var(--snap), transform .15s var(--snap);
}
.field textarea{resize:vertical;min-height:150px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:6px 6px 0 var(--ink);transform:translate(-3px,-3px)}
.field [aria-invalid="true"]{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.field [aria-invalid="true"]:focus-visible{box-shadow:6px 6px 0 var(--red)}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:48px;cursor:pointer}
.select-wrap .icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;pointer-events:none}
.err{font:800 .9rem/1.35 var(--body);color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-top:4px}
.contact-form .go{cursor:pointer;box-shadow:6px 6px 0 var(--teal)}
.contact-form .go:hover{box-shadow:3px 3px 0 var(--teal)}
.contact-form .go:active{box-shadow:0 0 0 var(--teal)}
.contact-form .go[disabled]{opacity:.6;cursor:progress;transform:none}
.form-status{font:800 1rem/1.4 var(--body);max-width:44ch}
.form-status:empty{display:none}
.form-status.ok{background:var(--green);border:3px solid var(--ink);padding:12px 14px}
.form-status.bad{background:var(--red);color:var(--white);border:3px solid var(--ink);padding:12px 14px}
.form-status.note{background:var(--yellow);border:3px solid var(--ink);padding:12px 14px}
@media (max-width:960px){
  .contact-slab{grid-template-columns:1fr}
  .contact-find{margin-top:0}
}
@media (max-width:560px){
  .contact-form .go{width:100%;justify-content:center}
}