/* =========================================================
   DADDY O'S DINER — SHARED STYLESHEET  (refresh 2026)
   ---------------------------------------------------------
   Loaded by EVERY page (index, kindness, contact, apply, menu).
   Sections are tagged with /* === SECTION NAME === */
   /* so you can jump straight to what you want to edit.

   --- IMPORTANT: FONTS LIVE IN A SEPARATE FILE ---
   All font choices are controlled by css/fonts.css.
   Every font-family declaration here references a variable
   like var(--font-display). To change a font, edit fonts.css.

   --- THIS REFRESH ---
   Same brand, same voice, more diner. Tighter palette,
   chrome-rail counter-edges under nav, license-plate framing
   on stats and hero, receipt-paper menu lines, ticket-stub
   feature cards, and a deeper warm-black ink.
   ========================================================= */


/* === 01. ROOT VARIABLES ================================== */
:root{
  --red:         #c8102e;
  --red-deep:    #8a0a1f;
  --red-glow:    rgba(200,16,46,.5);
  --cream:       #f6efe1;
  --paper:       #ece2c8;            /* toasted paper for cards */
  --paper-warm:  #fbf5e6;
  --ink:         #15110c;            /* warm near-black */
  --ink-soft:    #2a241e;
  --chrome:      #d6d8db;
  --chrome-dark: #8a8d92;
  --mustard:     #e3a72f;
  --mustard-dp:  #9c6e10;
  --teal:        #2a6f7a;
  --green:       #0e7a3a;

  --shadow:      0 6px 0 rgba(0,0,0,.18);
  --shadow-hard: 8px 8px 0 var(--ink);
  --shadow-card: 0 14px 30px -12px rgba(0,0,0,.35), 0 4px 0 rgba(0,0,0,.15);

  /* a reusable chrome strip — used under the nav and as a
     counter-edge accent. Brushed-metal vertical gradient. */
  --chrome-rail:
    linear-gradient(180deg,
      #f3f5f7 0%,
      #d4d7db 20%,
      #8a8e94 50%,
      #c2c5c9 80%,
      #ebedef 100%);

  /* checker tile used at section edges */
  --checker-red:
    repeating-linear-gradient(90deg, var(--red) 0 18px, var(--cream) 18px 36px);
  --checker-ink:
    repeating-linear-gradient(90deg, var(--ink) 0 18px, var(--cream) 18px 36px);
}


/* === 02. GLOBAL RESET + BASE TYPOGRAPHY ================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--red);color:#fff}


/* === 03. PAPER/GRAIN TEXTURE OVERLAY =====================
   Subtle grain + warm vignette across the whole page.
   ======================================================== */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:
    radial-gradient(circle at 22% 28%, rgba(0,0,0,.03) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 78%, rgba(0,0,0,.025) 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120,80,20,.07) 100%);
  background-size:5px 5px, 7px 7px, 100% 100%;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:multiply;
}


/* === 04. TOP UTILITY BAR ================================= */
.util-bar{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-accent);
  font-size:.82rem;
  letter-spacing:.05em;
  padding:.55rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;
  position:relative;z-index:5;
  border-bottom:1px solid #000;
}
.util-bar::after{
  /* a thin scanline of mustard — like a vintage neon underline */
  content:"";
  position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:var(--mustard);
  opacity:.7;
}
.util-bar .phones{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.25rem}
.util-bar .phones a{transition:color .18s}
.util-bar .phones a:hover,
.util-bar .social a:hover{color:var(--mustard)}


/* === 05. STICKY HEADER + NAV =============================
   Logo on the left, nav links on the right.
   Bottom of the header is a CHROME RAIL — a brushed-metal
   strip with red pinstripe above and warm-black under.
   ========================================================= */
header.nav{
  background:var(--cream);
  position:sticky;top:0;z-index:50;
  border-bottom:none;
  box-shadow:
    0 3px 0 var(--ink),
    0 5px 0 var(--red),
    0 12px 0 var(--ink),
    0 22px 18px -10px rgba(0,0,0,.25);
}
header.nav::after{
  /* chrome rail directly below the red pinstripe */
  content:"";
  position:absolute;left:0;right:0;bottom:-15px;height:10px;
  background:var(--chrome-rail);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.25rem;
  gap:1rem;
  position:relative;
}
.nav-logo{display:flex;align-items:center;gap:.65rem}
.nav-logo img{
  height:64px;width:auto;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.15));
}
nav ul{display:flex;gap:1.5rem;list-style:none;flex-wrap:wrap;align-items:center}
nav a{
  font-family:var(--font-nav);
  font-size:1.05rem;letter-spacing:.1em;
  padding:.45rem 0;
  position:relative;
  transition:color .2s;
}
nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  background:var(--red);
  transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}
nav a:hover,
nav a.current{color:var(--red)}
nav a:hover::after,
nav a.current::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}

/* push first content down past the chrome rail */
body > header.nav + *{margin-top:10px}


/* === 06. BUTTONS ========================================= */
.btn{
  display:inline-block;
  font-family:var(--font-button);
  letter-spacing:.14em;
  font-size:1.1rem;
  padding:.85rem 1.65rem;
  background:var(--red);
  color:#fff;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  cursor:pointer;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-transform:uppercase;
}
.btn::before{
  /* a little chrome rivet in the corner */
  content:"";
  position:absolute;top:5px;left:5px;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #aaa 60%, #666);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
  opacity:.85;
}
.btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:9px 9px 0 var(--ink);
  background:var(--red-deep);
}
.btn:active{
  transform:translate(2px,2px);
  box-shadow:3px 3px 0 var(--ink);
}
.btn.alt{background:var(--cream);color:var(--ink)}
.btn.alt:hover{background:var(--mustard);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:6px 6px 0 rgba(255,255,255,.15)}
.btn.ghost:hover{background:var(--cream);color:var(--ink);box-shadow:9px 9px 0 rgba(255,255,255,.25)}
.btn.ghost::before{background:radial-gradient(circle at 30% 30%, #fff, #ccc 60%, #888)}


/* === 07. SHARED SECTION HEADERS ========================== */
section.block{
  max-width:1200px;margin:0 auto;
  padding:5rem 1.25rem;
  position:relative;
}
#story,
#locations{
  scroll-margin-top:135px;   /* clear the sticky header when jumped to */
}
.section-head{text-align:center;margin-bottom:3rem}
.section-head .kicker{
  font-family:var(--font-accent);
  color:var(--red);
  letter-spacing:.32em;
  font-size:.78rem;
  text-transform:uppercase;
  margin-bottom:.65rem;
  display:inline-block;
  position:relative;
  padding:0 1rem;
}
.section-head .kicker::before,
.section-head .kicker::after{
  content:"✦";
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:.6rem;color:var(--red);opacity:.55;
}
.section-head .kicker::before{left:-.2rem}
.section-head .kicker::after{right:-.2rem}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(2.3rem, 5.5vw, 3.6rem);
  color:var(--ink);
  line-height:1;
  letter-spacing:.02em;
  text-shadow:0 3px 0 rgba(0,0,0,.08);
}
.section-head h2 em{
  color:var(--red);
  font-style:normal;
  text-shadow:0 3px 0 rgba(200,16,46,.18);
}
.divider{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  margin:1.25rem auto 0;color:var(--ink);
}
.divider::before, .divider::after{
  content:"";flex:0 0 72px;height:3px;
  background:linear-gradient(90deg, transparent, var(--ink) 30%, var(--ink) 70%, transparent);
}
.divider span{
  font-family:var(--font-accent);
  font-size:.78rem;letter-spacing:.25em;
  padding:.15rem .55rem;
  border:1px solid var(--ink);
  background:var(--cream);
}


/* === 08. SHARED FOOTER =================================== */
footer{
  background:var(--ink);color:var(--cream);
  padding:4rem 1.25rem 2.25rem;
  text-align:center;
  position:relative;
}
footer::before{
  content:"";display:block;height:18px;
  background:var(--checker-red);
  margin:-4rem -1.25rem 3rem;
  border-bottom:2px solid #000;
}
footer .neon{
  /* Pinned to the brand wordmark stack so the footer is
     identical across pages — page-level --font-hero
     overrides (e.g. Kindness uses Monoton) don't apply here. */
  font-family:'Magneto','Sonsie One','Monoton',cursive;
  font-size:2.6rem;color:#fff;
  text-shadow:
    0 0 6px var(--red-glow),
    0 0 18px var(--red-glow),
    0 0 36px var(--red-glow),
    0 4px 0 rgba(0,0,0,.65);
  letter-spacing:.05em;margin-bottom:.6rem;
  animation:neon-flicker 4.5s infinite;
}
footer p{font-family:var(--font-footer);font-size:.92rem;margin:.3rem 0;color:#dcd2bd}
footer a{color:var(--cream);border-bottom:1px dotted rgba(255,255,255,.25);transition:color .2s,border-color .2s}
footer a:hover{color:var(--mustard);border-color:var(--mustard)}
footer .foot-rail{
  display:flex;justify-content:center;align-items:center;gap:1rem;
  margin-top:1.25rem;flex-wrap:wrap;
}
footer .foot-rail .dot{
  width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 6px var(--red-glow);
}
@keyframes neon-flicker{
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity:1 }
  20%, 24%, 55% { opacity:.65 }
}


/* === 09. REVEAL-ON-SCROLL ANIMATION ====================== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}


/* === 09b. CHROME RAIL UTILITY ============================
   Reusable chrome strip — `<div class="rail"></div>`
   ========================================================= */
.rail{
  height:8px;
  background:var(--chrome-rail);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.rail.rail-thick{height:12px}


/* =========================================================
   PAGE-SPECIFIC STYLES BELOW
   ========================================================= */


/* === 10. HOMEPAGE: HERO =================================
   Dark overlay over the license-plate wall photo, with
   a "BLUE PLATE SPECIAL" diagonal tape strip and a
   chrome-counter checker band at the foot.
   ========================================================= */
.hero{
  position:relative;
  background:
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
    url('../content/images/hero-wall.jpg') center/cover no-repeat;
  background-attachment:fixed;
  color:var(--cream);
  padding:6rem 1.25rem 7rem;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  /* checkerboard counter-edge */
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:32px;
  background:var(--checker-ink);
  border-top:2px solid #000;
}
.hero::after{
  /* chrome rail right above the checker */
  content:"";
  position:absolute;left:0;right:0;bottom:32px;height:10px;
  background:var(--chrome-rail);
  border-top:1px solid #000;border-bottom:1px solid #000;
}
.hero-eyebrow{
  font-family:var(--font-accent);
  letter-spacing:.35em;
  font-size:.85rem;
  color:var(--mustard);
  margin-bottom:.85rem;
  text-transform:uppercase;
  display:inline-block;
  padding:.35rem .85rem;
  border:1px dashed var(--mustard);
}
.hero h1{
  font-family:var(--font-hero);
  font-size:clamp(3.4rem, 11vw, 9rem);
  line-height:.92;
  letter-spacing:.01em;
  color:#fff;
  text-shadow:
    0 0 16px var(--red-glow),
    0 0 38px var(--red-glow),
    0 6px 0 #000;
  margin:1rem 0 1.25rem;
  animation:neon-flicker 5s infinite;
}
.hero h1 span{
  color:var(--red);
  text-shadow:
    0 0 18px var(--red-glow),
    0 0 44px var(--red-glow),
    0 6px 0 #000;
}
.hero-tag{
  font-family:var(--font-headline);
  font-size:clamp(1.1rem, 2.4vw, 1.55rem);
  letter-spacing:.18em;
  margin-bottom:1.5rem;
  color:var(--cream);
  text-transform:uppercase;
}
.hero-tag .pipe{color:var(--mustard);margin:0 .35rem}
.hero-cta{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin-top:1.75rem;
}
/* Blue Plate Special — small pill badge centered above the
   hero eyebrow. Was a diagonal tape strip; this is calmer
   and actually fits the hero. */
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  background:#1d4d7a;
  color:#fff;
  font-family:var(--font-accent);
  font-size:.82rem;letter-spacing:.25em;text-transform:uppercase;
  padding:.45rem 1.1rem;
  border:2px solid var(--cream);
  box-shadow:0 4px 0 rgba(0,0,0,.45);
  margin-bottom:1rem;
}
.hero-badge::before,.hero-badge::after{
  content:"★";color:var(--mustard);font-size:.85rem;
}


/* === 10b. HOMEPAGE: SCROLLING MARQUEE ===================
   A retro highway-sign ticker just under the hero showing
   what the diner is famous for. Speaks the voice.
   ========================================================= */
.marquee{
  background:var(--ink);
  border-top:2px solid var(--mustard);
  border-bottom:2px solid var(--mustard);
  color:var(--cream);
  overflow:hidden;
  position:relative;
}
.marquee-track{
  display:flex;gap:3rem;
  padding:.75rem 0;
  animation:marquee 38s linear infinite;
  font-family:var(--font-roadsign);
  font-size:1.45rem;letter-spacing:.12em;
  white-space:nowrap;
  width:max-content;
}
.marquee-track span{display:inline-flex;align-items:center;gap:1.5rem}
.marquee-track span::after{
  content:"●";color:var(--red);
  font-size:.85rem;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}


/* === 11. HOMEPAGE: ORDER STRIP =========================== */
.order-strip{
  background:var(--ink);
  color:var(--cream);
  padding:3rem 1.25rem;
  position:relative;
  z-index:3;
}
.order-strip .inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;
}
.loc-card{
  border:2px dashed var(--mustard);
  padding:1.75rem;
  display:flex;flex-direction:column;gap:.6rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,.06));
  transition:transform .22s ease, background .2s, border-color .2s;
  position:relative;
}
.loc-card::before{
  /* tiny "open" sign in the corner */
  content:"OPEN";
  position:absolute;top:-12px;left:1.25rem;
  background:var(--red);color:#fff;
  font-family:var(--font-headline);letter-spacing:.18em;font-size:.72rem;
  padding:.15rem .55rem;
  border:2px solid var(--cream);
}
.loc-card:hover{
  background:rgba(200,16,46,.08);
  border-color:var(--cream);
  transform:translateY(-3px);
}
.loc-card h3{
  font-family:var(--font-display);
  font-size:1.85rem;
  color:var(--mustard);
  letter-spacing:.04em;
  line-height:1;
  margin-bottom:.25rem;
}
.loc-card p{font-family:var(--font-accent);font-size:.95rem;color:#e5dcc8}
.loc-card .row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}
.loc-card .row .btn{padding:.7rem 1.15rem;font-size:.95rem}


/* === 12. HOMEPAGE: STORY SECTION ========================= */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.story-text p{margin-bottom:1.1rem;font-size:1.07rem}
.story-text p:first-of-type::first-letter{
  font-family:var(--font-display);
  font-size:4.2rem;float:left;line-height:.85;
  padding:.3rem .75rem 0 0;color:var(--red);
  text-shadow:0 3px 0 rgba(0,0,0,.15);
}
.story-img{
  position:relative;
  transform:rotate(-2.2deg);
  border:10px solid #fff;
  background:#fff;
  box-shadow:0 18px 36px rgba(0,0,0,.32), 0 2px 0 rgba(0,0,0,.15);
  padding-bottom:3.25rem; /* polaroid white space */
}
.story-img::before{
  /* washi tape at top */
  content:"";
  position:absolute;top:-14px;left:50%;
  width:120px;height:24px;transform:translateX(-50%) rotate(-3deg);
  background:repeating-linear-gradient(45deg, rgba(200,16,46,.55) 0 6px, rgba(255,255,255,.6) 6px 12px);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.story-img::after{
  content:"4,000+ plates · & counting";
  position:absolute;bottom:.85rem;left:0;right:0;
  text-align:center;
  font-family:var(--font-accent);
  font-size:.95rem;color:var(--ink);
  letter-spacing:.08em;
}
.story-img img{width:100%;height:auto;display:block;filter:saturate(.95) contrast(1.02)}


/* === 13. HOMEPAGE: STATS ROW ============================
   Each stat is a license-plate frame.
   ========================================================= */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;
  margin-top:4rem;
}
.stat{
  text-align:center;
  padding:1.5rem 1rem 1.25rem;
  background:#fff;
  border:4px solid var(--ink);
  border-radius:14px;
  box-shadow:var(--shadow-hard);
  transform:rotate(-1.5deg);
  position:relative;
}
.stat::before{
  /* the little STATE / EST banner at the top of a plate */
  content:"DADDY O'S · MAINE";
  position:absolute;top:.4rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-plate);letter-spacing:.18em;font-size:.62rem;
  color:var(--ink);opacity:.65;
}
.stat::after{
  /* bolt-hole top-left and top-right faked with a radial */
  content:"";
  position:absolute;top:.4rem;right:.5rem;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle, #555 30%, transparent 60%);
  box-shadow:-200px 0 0 0 #5552;
}
.stat:nth-child(2){
  transform:rotate(1.5deg);
  background:var(--red);
  color:#fff;
  border-color:var(--ink);
}
.stat:nth-child(2)::before{color:#fff;opacity:.75}
.stat:nth-child(3){transform:rotate(-.5deg)}
.stat .num{
  font-family:var(--font-stat);
  font-size:2.9rem;line-height:1;
  margin-top:.65rem;
  text-shadow:0 3px 0 rgba(0,0,0,.18);
}
.stat:nth-child(2) .num{text-shadow:0 3px 0 rgba(0,0,0,.35)}
.stat .label{
  font-family:var(--font-plate);
  letter-spacing:.18em;
  font-size:.92rem;margin-top:.4rem;
  text-transform:uppercase;
}


/* === 14. HOMEPAGE: FEATURE CARDS =========================
   Ticket-stub feel: small notches in the corners.
   ========================================================= */
.features{
  background:
    linear-gradient(180deg, #fff 0%, #fff 70%, var(--paper-warm) 100%);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  position:relative;
}
.features::before, .features::after{
  content:"";position:absolute;left:0;right:0;height:6px;
  background:var(--chrome-rail);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.features::before{top:-3px}
.features::after{bottom:-3px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.feature-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.feature{
  border:2px solid var(--ink);
  padding:1.5rem 1.25rem;
  background:var(--paper-warm);
  transition:transform .22s ease, box-shadow .22s;
  position:relative;
  box-shadow:5px 5px 0 var(--ink);
  /* ticket-stub notches at the top corners */
  clip-path:polygon(
    8px 0, calc(100% - 8px) 0,
    calc(100% - 8px) 8px, 100% 8px,
    100% 100%, 0 100%,
    0 8px, 8px 8px
  );
}
.feature:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.feature .ico{
  font-family:var(--font-display);
  font-size:2.4rem;color:var(--red);line-height:1;margin-bottom:.55rem;
  text-shadow:0 3px 0 rgba(0,0,0,.1);
}
.feature h4{
  font-family:var(--font-headline);letter-spacing:.12em;font-size:1.3rem;
  margin-bottom:.45rem;text-transform:uppercase;
}
.feature p{font-size:.95rem;line-height:1.55}


/* === 15. HOMEPAGE: HOURS STRIP =========================== */
.hours-block{
  background:var(--red);color:#fff;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:3.5rem 1.25rem;
  text-align:center;
  position:relative;
}
.hours-block::before, .hours-block::after{
  content:"";
  position:absolute;left:0;right:0;height:18px;
  background:var(--checker-ink);
}
.hours-block::before{top:0}
.hours-block::after{bottom:0}
.hours-block .inner{max-width:900px;margin:0 auto;position:relative;z-index:2}
.hours-block h3{
  font-family:var(--font-display);font-size:clamp(1.3rem,6.5vw,2.6rem);
  margin-bottom:.65rem;letter-spacing:.04em;
  text-shadow:0 3px 0 rgba(0,0,0,.25);
  white-space:nowrap;
}
.hours-block .hour-row{
  font-family:var(--font-accent);
  font-size:1.15rem;margin:.4rem 0;letter-spacing:.05em;
}
.hours-block .badge{
  display:inline-block;background:var(--cream);color:var(--ink);
  padding:.4rem 1rem;
  font-family:var(--font-headline);letter-spacing:.12em;
  border:2px solid var(--ink);
  margin-top:1.25rem;
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
}


/* === 16. HOMEPAGE + CONTACT: LOCATION CARDS ============== */
.locations-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.loc{
  background:#fff;border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  overflow:hidden;
  transition:transform .22s, box-shadow .22s;
}
.loc:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.loc h3{
  font-family:var(--font-display);font-size:1.75rem;
  background:var(--ink);color:var(--mustard);
  padding:1rem 1.25rem;letter-spacing:.04em;
  border-bottom:3px solid var(--red);
  text-shadow:0 3px 0 rgba(0,0,0,.3);
}
.loc .body{padding:1.4rem 1.25rem}
.loc address{
  font-style:normal;font-family:var(--font-accent);
  margin-bottom:.75rem;font-size:1rem;
}
.loc address a{border-bottom:1px dotted var(--ink)}
.loc iframe{width:100%;height:260px;border:0;border-top:3px solid var(--ink);filter:saturate(.85)}


/* === 17. HOMEPAGE: "OPEN NOW" BADGE ====================== */
.open-now{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--green);color:#fff;
  padding:.4rem .9rem;border-radius:999px;
  font-family:var(--font-headline);letter-spacing:.12em;font-size:.9rem;
  border:2px solid var(--cream);
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.open-now .dot{
  width:.6rem;height:.6rem;border-radius:50%;background:#7cf09e;
  box-shadow:0 0 10px #7cf09e;animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.78)}
}


/* === 18. SUBPAGE HERO ====================================
   Used by Kindness/Contact/Apply — black with chrome-rail
   counter edge and a red-checker base.
   ========================================================= */
.page-hero{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(200,16,46,.18), transparent 65%),
    var(--ink);
  color:var(--cream);
  padding:4.5rem 1.25rem 5rem;
  text-align:center;
  overflow:hidden;
  border-top:1px solid #000;
}
.page-hero::before{
  /* checker base */
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:22px;
  background:var(--checker-red);
}
.page-hero::after{
  /* chrome rail above checker */
  content:"";
  position:absolute;left:0;right:0;bottom:22px;height:8px;
  background:var(--chrome-rail);
  border-top:1px solid #000;border-bottom:1px solid #000;
}
.page-hero .eyebrow{
  font-family:var(--font-accent);letter-spacing:.32em;
  font-size:.78rem;color:var(--mustard);text-transform:uppercase;
  margin-bottom:.65rem;
  display:inline-block;
  padding:.3rem .75rem;
  border:1px dashed var(--mustard);
}
.page-hero h1{
  font-family:var(--font-hero);
  font-size:clamp(2.8rem, 7.5vw, 5.4rem);
  line-height:.95;color:#fff;
  text-shadow:
    0 0 14px var(--red-glow),
    0 0 32px var(--red-glow),
    0 4px 0 #000;
  letter-spacing:.02em;
  margin-top:.4rem;
}
.page-hero h1 span{
  color:var(--red);
  text-shadow:
    0 0 16px var(--red-glow),
    0 0 36px var(--red-glow),
    0 4px 0 #000;
}
.page-hero .lead{
  font-family:var(--font-headline);letter-spacing:.14em;
  font-size:clamp(1rem, 2vw, 1.3rem);
  margin-top:1rem;color:var(--cream);
  text-transform:uppercase;
}


/* === 19. KINDNESS PAGE: IMPACT TICKER ==================== */
.impact-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  margin:0 auto;max-width:1200px;padding:3rem 1.25rem;
}
.impact-card{
  background:#fff;border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:1.4rem 1rem 1.25rem;text-align:center;
  position:relative;
  transition:transform .22s, box-shadow .22s;
}
.impact-card:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}
.impact-card::before{
  content:"";
  position:absolute;left:1rem;right:1rem;top:.5rem;height:3px;
  background:var(--chrome-rail);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.impact-card .num{
  font-family:var(--font-display);color:var(--red);
  font-size:2.6rem;line-height:1;margin-top:.65rem;
  text-shadow:0 3px 0 rgba(0,0,0,.12);
}
.impact-card .lbl{
  font-family:var(--font-headline);letter-spacing:.1em;
  font-size:.95rem;margin-top:.45rem;text-transform:uppercase;
}


/* === 20. KINDNESS PAGE: EVENT CARDS ====================== */
.event-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;
}
.event{
  background:#fff;border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:0;display:flex;flex-direction:column;
  transition:transform .22s, box-shadow .22s;
  overflow:hidden;
}
.event:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.event .ribbon{
  background:var(--red);color:#fff;
  padding:.7rem 1.25rem;
  font-family:var(--font-headline);letter-spacing:.12em;font-size:1.05rem;
  display:flex;justify-content:space-between;align-items:center;
  text-transform:uppercase;
  border-bottom:3px solid var(--ink);
}
.event .ribbon .when{
  font-family:var(--font-accent);
  font-size:.82rem;letter-spacing:.06em;
  text-transform:none;
  background:rgba(0,0,0,.25);
  padding:.18rem .55rem;
  border:1px solid rgba(255,255,255,.4);
}
.event .body{padding:1.5rem;flex:1}
.event h3{
  font-family:var(--font-display);font-size:1.55rem;
  margin-bottom:.75rem;letter-spacing:.02em;color:var(--ink);
}
.event p{margin-bottom:.75rem}


/* === 21. KINDNESS PAGE: FREE PANTRY CALLOUT ============== */
.pantry-callout{
  background:
    radial-gradient(ellipse at 50% 0%, #f3b948 0%, var(--mustard) 60%, var(--mustard-dp) 110%);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:4.5rem 1.25rem;text-align:center;
  position:relative;
}
.pantry-callout::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:8px;
  background:var(--checker-ink);
  border-bottom:2px solid var(--ink);
}
.pantry-callout::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:8px;
  background:var(--checker-ink);
  border-top:2px solid var(--ink);
}
.pantry-callout .inner{max-width:820px;margin:0 auto;position:relative}
.pantry-callout h2{
  font-family:var(--font-display);font-size:clamp(2.2rem,5.5vw,3.4rem);
  color:var(--ink);margin-bottom:1rem;letter-spacing:.02em;
  text-shadow:0 3px 0 rgba(0,0,0,.12);
}
.pantry-callout .motto{
  font-family:var(--font-accent);font-size:1.25rem;
  letter-spacing:.05em;margin-bottom:1.25rem;
  display:inline-block;
  padding:.4rem .9rem;
  background:var(--ink);color:var(--mustard);
  transform:rotate(-1.5deg);
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.35);
}
.pantry-callout p{font-size:1.05rem;margin-bottom:1rem;color:var(--ink)}


/* === 22. CONTACT PAGE: TWO-COLUMN LAYOUT ================= */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  align-items:start;
}
.contact-info h3{
  font-family:var(--font-display);font-size:1.85rem;
  color:var(--red);margin-bottom:1rem;letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(0,0,0,.08);
}
.contact-info .info-row{
  display:flex;gap:.85rem;align-items:flex-start;
  font-family:var(--font-accent);
  margin-bottom:.7rem;
  font-size:.98rem;
}
.contact-info .info-row .lbl{
  font-family:var(--font-headline);letter-spacing:.12em;
  color:var(--ink);min-width:90px;text-transform:uppercase;
  font-size:.95rem;
}
.contact-info .group{
  background:#fff;border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:1.65rem 1.5rem;margin-bottom:1.5rem;
  position:relative;
}
.contact-info .group::before{
  content:"";
  position:absolute;left:1.25rem;right:1.25rem;top:.45rem;height:3px;
  background:var(--chrome-rail);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}


/* === 23. CONTACT PAGE: CONTACT FORM ====================== */
.contact-form{
  background:#fff;border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:2.25rem;
  position:relative;
}
.contact-form::before{
  content:"";
  position:absolute;left:1.5rem;right:1.5rem;top:.55rem;height:3px;
  background:var(--chrome-rail);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.contact-form h3{
  font-family:var(--font-display);font-size:1.85rem;
  color:var(--red);margin-bottom:.5rem;letter-spacing:.02em;
}
.contact-form .form-sub{
  font-family:var(--font-accent);font-size:.92rem;
  margin-bottom:1.5rem;color:#555;
}
.contact-form label,
.apply-form label{
  display:block;
  font-family:var(--font-headline);letter-spacing:.12em;
  font-size:.95rem;margin-bottom:.4rem;margin-top:1.1rem;
  text-transform:uppercase;
}
.contact-form input,
.contact-form select,
.contact-form textarea,
.apply-form input,
.apply-form select,
.apply-form textarea{
  width:100%;
  font-family:var(--font-body);font-size:1rem;
  padding:.78rem .9rem;
  background:var(--paper-warm);
  border:2px solid var(--ink);
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus{
  border-color:var(--red);
  background:#fff;
  box-shadow:0 0 0 3px rgba(200,16,46,.18);
}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form .submit-row,
.apply-form .submit-row{margin-top:1.75rem}
.contact-form .form-msg,
.apply-form .form-msg{
  font-family:var(--font-accent);font-size:.92rem;
  margin-top:1rem;min-height:1.25rem;
}
.contact-form .form-msg.success,
.apply-form .form-msg.success{color:var(--green)}
.contact-form .form-msg.error,
.apply-form .form-msg.error{color:var(--red)}


/* === 24. APPLY PAGE: JOB CARDS =========================== */
.apply-intro{
  max-width:860px;margin:0 auto;text-align:center;
  font-size:1.12rem;
}
.apply-intro p{margin-bottom:1rem}
.role-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
  margin-top:3rem;
}
.role{
  background:#fff;border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:1.65rem 1.5rem;
  display:flex;flex-direction:column;
  transition:transform .22s, box-shadow .22s;
  position:relative;
}
.role:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.role::before{
  /* nameplate "punched" mounting pin look */
  content:"";
  position:absolute;top:-9px;left:1.5rem;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #aaa 50%, #444);
  box-shadow:0 0 0 2px var(--ink);
}
.role::after{
  content:"";
  position:absolute;top:-9px;right:1.5rem;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #aaa 50%, #444);
  box-shadow:0 0 0 2px var(--ink);
}
.role .tag{
  display:inline-block;
  font-family:var(--font-headline);letter-spacing:.14em;font-size:.78rem;
  background:var(--ink);color:var(--mustard);
  padding:.3rem .65rem;align-self:flex-start;margin-bottom:.85rem;
  text-transform:uppercase;
}
.role h3{font-family:var(--font-display);font-size:1.45rem;margin-bottom:.5rem;letter-spacing:.02em;color:var(--ink)}
.role p{font-size:.97rem;margin-bottom:1.1rem;flex:1}


/* === 25. APPLY PAGE: APPLICATION FORM ==================== */
.apply-form{
  background:#fff;border:3px solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:2.25rem;
  max-width:820px;margin:0 auto;
  position:relative;
}
.apply-form::before{
  content:"";
  position:absolute;left:1.5rem;right:1.5rem;top:.55rem;height:3px;
  background:var(--chrome-rail);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.apply-form h3{
  font-family:var(--font-display);font-size:1.85rem;
  color:var(--red);margin-bottom:.5rem;letter-spacing:.02em;
}
.apply-form .form-sub{
  font-family:var(--font-accent);font-size:.92rem;
  margin-bottom:1.5rem;color:#555;
}
.apply-form .row-2{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
}
.apply-form textarea{min-height:130px;resize:vertical}
.apply-form .checkbox-row{
  display:flex;align-items:flex-start;gap:.6rem;margin-top:1.25rem;
  font-family:var(--font-accent);font-size:.92rem;
  background:var(--paper-warm);
  padding:.85rem 1rem;
  border:2px dashed var(--ink);
}
.apply-form .checkbox-row input{width:auto;margin-top:.2rem}


/* === 26. APPLY PAGE: MULTI-STEP WIZARD ==================== */
/* .btn sets display:inline-block, which (being an author-origin rule)
   overrides the browser's default [hidden]{display:none} — so any
   element carrying both class="btn" and the hidden attribute would
   render regardless. Restated here with !important to win that fight. */
[hidden]{display:none !important}
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.req{color:var(--red)}
.field-note{
  font-family:var(--font-accent);font-size:.86rem;color:#666;
  margin-top:.25rem;margin-bottom:0;
}
.apply-form .row-3{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;
}

.wizard-progress{margin-bottom:1.75rem}
.wizard-progress-track{
  height:10px;background:var(--paper);border:2px solid var(--ink);
  overflow:hidden;
}
.wizard-progress-track span{
  display:block;height:100%;background:var(--red);
  transition:width .25s ease;
}
.wizard-progress-label{
  font-family:var(--font-headline);letter-spacing:.1em;font-size:.85rem;
  text-transform:uppercase;margin-top:.6rem;color:#555;
}

.wizard-step legend.sr-only{margin:0}
.wizard-step{border:0;padding:0;margin:0}

.apply-form fieldset.radio-field{
  border:0;padding:0;margin-top:1.3rem;
}
.apply-form fieldset.radio-field legend{
  font-family:var(--font-headline);letter-spacing:.08em;
  font-size:.95rem;text-transform:none;
  padding:0;margin-bottom:.5rem;width:100%;
}
.radio-group,
.checkbox-group{
  display:flex;flex-wrap:wrap;gap:.6rem;
}
.radio-pill,
.checkbox-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-accent);font-size:.92rem;
  background:var(--paper-warm);border:2px solid var(--ink);
  padding:.5rem .9rem;cursor:pointer;
  transition:background .15s, color .15s;
}
.radio-pill:has(input:checked),
.checkbox-pill:has(input:checked){
  background:var(--ink);color:var(--cream);
}
.radio-pill input,
.checkbox-pill input{width:auto;margin:0}

.conditional-field{margin-top:1rem}

.avail-heading{margin-top:1.75rem}
.avail-heading h4{
  font-family:var(--font-display);font-size:1.25rem;color:var(--ink);
  letter-spacing:.02em;
}
.avail-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.75rem;
}
.avail-day{
  background:var(--paper-warm);border:2px solid var(--ink);
  padding:.9rem 1rem;
}
.avail-day .avail-day-label{
  font-family:var(--font-headline);letter-spacing:.08em;
  font-size:.9rem;display:block;margin-bottom:.5rem;
}
.avail-day .conditional-field{margin-top:.6rem}
.avail-day .conditional-field input{padding:.55rem .7rem}

.certification-box{
  background:var(--paper-warm);border:2px dashed var(--ink);
  padding:1.25rem 1.4rem;margin-bottom:.5rem;
}
.certification-box h4{
  font-family:var(--font-display);font-size:1.2rem;color:var(--red);
  margin-bottom:.6rem;
}
.certification-box p{font-size:.9rem;line-height:1.55;color:#333}

.wizard-nav{
  display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;
}
.wizard-nav .btn{flex:0 0 auto}
.wizard-nav .btn:only-child{margin-left:auto}


/* === 27. MENU PAGE: NAV PILL BAR =========================
   Just the 4 top-level groups (Breakfast / Lunch / Appetizers /
   Beverages) — short enough to always wrap onto one row, so
   there's no horizontal scroll and nothing ever gets clipped.
   ========================================================= */
.menu-nav-wrap{
  position:sticky;top:103px;       /* clear chrome rail */
  z-index:40;
  background:var(--cream);
  border-bottom:3px solid var(--ink);
  box-shadow:0 4px 0 var(--red), 0 12px 18px -8px rgba(0,0,0,.2);
}
.menu-nav{
  max-width:1200px;margin:0 auto;
  display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;
  padding:.85rem 1.25rem;
}
.menu-pill{
  flex:0 0 auto;
  white-space:nowrap;
  font-family:var(--font-headline);letter-spacing:.12em;font-size:1rem;
  padding:.6rem 1.3rem;
  border:2px solid var(--ink);
  background:#fff;color:var(--ink);
  text-transform:uppercase;
  box-shadow:3px 3px 0 var(--ink);
  transition:background .15s, color .15s, transform .15s, box-shadow .15s;
}
.menu-pill:hover{
  background:var(--red);color:#fff;
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}


/* === 28. MENU PAGE: LEGEND =============================== */
.menu-legend{
  max-width:1200px;margin:2.5rem auto 0;padding:0 1.25rem;
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-accent);font-size:.88rem;
}
.legend-item{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.25rem .6rem;
  background:#fff;
  border:1px dashed var(--ink);
}


/* === 29. MENU PAGE: TAGS / BADGES ======================== */
.tag{
  display:inline-block;
  font-family:var(--font-headline);letter-spacing:.1em;
  font-size:.7rem;
  padding:.2rem .5rem;
  margin-left:.4rem;
  vertical-align:middle;
  background:var(--ink);color:var(--cream);
  border-radius:2px;
  text-transform:uppercase;
}
.tag-popular{background:var(--red);color:#fff}
.tag-v{background:var(--green);color:#fff}
.tag-gf{background:var(--teal);color:#fff}
.tag-seasonal{background:var(--mustard);color:var(--ink)}
.tag-new{background:var(--mustard);color:var(--ink)}


/* === 30. MENU PAGE: CATEGORIES + ITEMS ===================
   Receipt-paper feel. Category heads sit on a chrome rail,
   items use real dotted leaders with prices stamped in
   typewriter type.
   ========================================================= */
.menu-group-head{
  max-width:1100px;margin:0 auto;
  padding:4.5rem 1.25rem 1.5rem;
  scroll-margin-top:175px;   /* clear the sticky header + pill bar when jumped to */
  border-top:3px dashed var(--chrome-dark);
}
.menu-group-head:first-child{
  border-top:0;padding-top:1.5rem;
}

.menu-category{
  max-width:1100px;margin:0 auto;padding:3.5rem 1.25rem 1rem;
  scroll-margin-top:175px;
}
.menu-category.first-in-group{
  padding-top:1rem;   /* the group header above already added spacing */
}
.menu-category .cat-head{
  text-align:center;margin-bottom:2.25rem;
  position:relative;padding-bottom:1.25rem;
}
.menu-category .cat-head::after{
  /* simple red underline accent — was a chrome rail */
  content:"";
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:80px;height:3px;
  background:var(--red);
}
.menu-category .cat-head h2{
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.5vw, 2.9rem);
  color:var(--red);letter-spacing:.03em;line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.1);
}
.menu-category .cat-blurb{
  font-family:var(--font-accent);
  font-size:.96rem;margin-top:.7rem;color:#555;
}

.cat-items{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem;
}
.menu-item{
  padding:.3rem 0;
  position:relative;
}
.mi-line{
  display:flex;align-items:baseline;gap:.5rem;
}
.mi-name{
  font-family:var(--font-menu-item);font-weight:500;letter-spacing:.04em;
  font-size:1.25rem;color:var(--ink);
  flex:0 0 auto;text-transform:uppercase;
}
.mi-dots{
  flex:1 1 auto;
  border-bottom:3px dotted var(--ink);
  transform:translateY(-5px);
  opacity:.45;
}
.mi-price{
  flex:0 0 auto;
  font-family:var(--font-menu-price);letter-spacing:.04em;
  font-size:1.1rem;color:var(--red);
  font-weight:bold;
}
.mi-desc{
  font-family:var(--font-body);font-size:.95rem;
  margin-top:.2rem;color:#4a4a4a;line-height:1.5;
  font-style:italic;
}


/* === 31. MENU PAGE: FOOTNOTE ============================= */
.menu-footnote{
  max-width:900px;margin:3.5rem auto 0;padding:1.6rem 1.25rem 0;
  text-align:center;
  font-family:var(--font-accent);font-size:.85rem;
  color:#555;border-top:2px dashed var(--ink);
}


/* === 32. MENU PAGE: CTA BAR AT BOTTOM ==================== */
.menu-cta{
  background:
    radial-gradient(ellipse at 50% 40%, rgba(200,16,46,.18), transparent 65%),
    var(--ink);
  color:var(--cream);
  padding:4rem 1.25rem;text-align:center;
  border-top:3px solid var(--ink);margin-top:3rem;
  position:relative;
}
.menu-cta::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:8px;
  background:var(--chrome-rail);
  border-top:1px solid #000;border-bottom:1px solid #000;
}
.menu-cta h3{
  font-family:var(--font-display);font-size:clamp(2rem,4vw,2.6rem);
  color:var(--mustard);margin-bottom:1rem;letter-spacing:.04em;
  text-shadow:0 3px 0 rgba(0,0,0,.4);
}
.menu-cta .row{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  margin-top:1.25rem;
}


/* === 33. LICENSE PLATE ROW (decorative band) =============
   Used on homepage between sections to lean into the
   plate-wall identity. Markup:
     <div class="plate-band"> three <span class="plate">…</span> </div>
   ========================================================= */
.plate-band{
  background:var(--paper-warm);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  padding:2.25rem 1.25rem;
  display:flex;justify-content:center;align-items:center;
  gap:1.25rem;flex-wrap:wrap;
}
.plate{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;
  border:3px solid var(--ink);border-radius:10px;
  padding:.85rem 1.4rem .65rem;
  min-width:160px;
  position:relative;
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-1deg);
}
.plate:nth-child(even){transform:rotate(1.2deg);background:var(--mustard)}
.plate:nth-child(3n){transform:rotate(-.5deg);background:var(--red);color:#fff}
.plate::before, .plate::after{
  content:"";
  position:absolute;top:.5rem;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle, #333 30%, transparent 60%);
}
.plate::before{left:.5rem}
.plate::after{right:.5rem}
.plate .state{
  font-family:var(--font-plate);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:.75;
}
.plate .num{
  font-family:var(--font-display);
  font-size:1.6rem;line-height:1;margin:.15rem 0;
  letter-spacing:.05em;
}


/* === 26. RESPONSIVE / MOBILE ============================= */
@media (max-width:980px){
  .feature-grid{grid-template-columns:1fr 1fr}
  .feature-grid.cols-3{grid-template-columns:1fr 1fr}
  .role-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  nav ul{
    display:none;flex-direction:column;gap:.85rem;
    align-items:flex-start;
    position:absolute;top:100%;right:1rem;
    background:var(--cream);border:3px solid var(--ink);
    padding:1.1rem 1.5rem;box-shadow:var(--shadow-hard);
    z-index:60;
  }
  nav ul.open{display:flex}
  .menu-btn{display:block;margin-left:auto}
  .order-strip .inner{grid-template-columns:1fr}
  .story{grid-template-columns:1fr;gap:2.25rem}
  .story-img{transform:rotate(-1deg);max-width:440px;margin:0 auto}
  .stats{grid-template-columns:1fr;gap:1.5rem}
  .feature-grid{grid-template-columns:1fr 1fr;gap:1.25rem}
  .feature-grid.cols-3{grid-template-columns:1fr 1fr;gap:1.25rem}
  .locations-grid{grid-template-columns:1fr}
  .util-bar{justify-content:center;text-align:center}
  .impact-row{grid-template-columns:1fr 1fr}
  .event-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .role-grid{grid-template-columns:1fr}
  .apply-form .row-2{grid-template-columns:1fr}
  .apply-form .row-3{grid-template-columns:1fr}
  .avail-grid{grid-template-columns:1fr}
  .cat-items{grid-template-columns:1fr;gap:1.25rem}
  .menu-nav-wrap{top:88px}
  .menu-category{scroll-margin-top:180px}
  .menu-group-head{scroll-margin-top:180px}
  #story,
  #locations{scroll-margin-top:115px}
  .hero{background-attachment:scroll}
  .hours-block h3{white-space:normal}
  .mi-name{flex:0 1 auto;min-width:0}
  .event .ribbon{flex-wrap:wrap;row-gap:.4rem}
}
@media (max-width:480px){
  .feature-grid{grid-template-columns:1fr}
  .feature-grid.cols-3{grid-template-columns:1fr}
  .impact-row{grid-template-columns:1fr}
  .nav-logo img{height:52px}
  .hero{padding:4rem 1rem 5rem}
}


/* === 34. REDUCED MOTION =================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track{animation:none}
}