/* ---------------------------------------------------------------
   Walton Diner — self-hosted webfonts.
   Righteous (headlines: geometric like the neon tubing), Oswald (sub-heads
   and nav; what waltondiner.com used before), Pacifico (the menu cover's
   "Welcome to" script), Nunito Sans (body). Served from this origin inside
   the already render-blocking stylesheet, so no extra blocking request.
   unicode-range keeps a typical visitor to the latin files.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('assets/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('assets/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('assets/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('assets/fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/pacifico-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/pacifico-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/righteous-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Righteous';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('assets/fonts/righteous-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Walton Diner — Color & Type Tokens
   Dusk into neon: night-sky navy, the logo's orange/red/yellow tubing, periwinkle and
   cyan outlines, blush Catskills from the menu cover, stainless-steel cards.
   ========================================================================= */

/* Global border-box. Without this, every padded element given a width or
   height computes LARGER than declared — the cause of the oversized buttons,
   nav links, map pin and logos found in review. Declared first so the
   per-element box-sizing patches further down are now redundant, not wrong. */
*, *::before, *::after { box-sizing: border-box; }

/* The fixed mobile action bar's height, used by the footer reserve and the
   scroll padding so the three can't drift apart (they had: 68px bar
   against a 96px reserve, leaving 28px of dead space). */
:root { --action-bar-h: 68px; }

/* Fonts are loaded with <link rel="preconnect"> + <link rel="stylesheet"> in each
   page <head>. An @import here forced the browser to download styles.css, parse it,
   then start a third request before it could paint any text. */

:root {
  /* ---------- Brand Core ----------
     Sampled from Walton's own artwork: the neon logo disc, and the menu
     cover's blush Catskills fading into a navy New York skyline. */
  --brand-accent:      #1962A9;   /* menu banner blue — headings, prices, links on light */
  --brand-accent-dark: #124C86;
  --brand-accent-deep: #0C3663;   /* pressed state */

  --brand-navy:      #24265D;     /* menu-cover skyline */
  --brand-navy-dark: #181A45;
  --brand-night:     #0E1238;     /* night sky behind the neon */
  --brand-periwinkle:#7BA0D6;     /* "WALTON" neon outline */
  --brand-cyan:      #00AEEF;     /* "RESTAURANT" neon outline */

  /* Neon — for dark backgrounds only: none of these pass AA as text on light */
  --brand-neon:        #F7941D;   /* "DINER" outer tube — CTAs */
  --brand-neon-dark:   #D9760B;
  --brand-neon-red:    #ED1C24;   /* "DINER" middle tube, the ring */
  --brand-neon-yellow: #FFF200;   /* "DINER" inner tube */
  --brand-disc:        #231F20;   /* the logo disc / menu frame */

  /* Menu section tints (from the printed panels) */
  --tint-pink:    #F9E4DB;     /* pasta */
  --tint-mint:    #E2F2D8;     /* specialty salads */
  --tint-butter:  #FFF0C2;     /* benedicts, hungry man, wraps, seafood */
  --tint-rose:    #FADFDA;     /* cover mountains */
  --tint-sky:     #DDE3F3;     /* classic sandwiches, burgers */

  --brand-paper:        #FBF7F6;  /* canvas: the menu cover's blush-white */
  --brand-surface:      #EEF1F6;  /* cards: brushed stainless */
  --brand-surface-deep: #DDE3F0;

  --brand-ink:       #161A33;     /* navy-black text */
  --brand-ink-soft:  #2A2F4D;

  /* Accents */
  --brand-mint:    #E2F2D8;
  --brand-blush:   #F8C3BF;       /* cover mountains */
  --brand-blush-soft: #FADFDA;
  --brand-chrome:  #C9D0DC;       /* stainless trim */

  /* ---------- Semantic — Foreground ---------- */
  --fg-1: var(--brand-ink);            /* primary text */
  --fg-2: #454A66;                       /* secondary text, cool dark */
  --fg-3: #5F6480;                       /* tertiary, captions */
  --fg-inverse: var(--brand-paper);     /* on dark surfaces */
  --fg-accent: var(--brand-accent);        /* link / accent */
  --fg-on-red: var(--brand-paper);
  --fg-on-navy: var(--brand-paper);
  --fg-on-neon: var(--brand-night);

  /* ---------- Semantic — Background ---------- */
  --bg-1: var(--brand-paper);          /* paper canvas */
  --bg-2: var(--brand-surface);     /* card, raised */
  --bg-3: var(--brand-surface-deep);     /* hover / inset */
  --bg-inverse: var(--brand-night);
  --bg-red: var(--brand-accent);
  --bg-navy: var(--brand-navy);
  --bg-neon: var(--brand-neon);
  --bg-ink: var(--brand-ink);

  /* ---------- Semantic — Border ---------- */
  --border-1: rgba(22, 26, 51, 0.16);
  --border-2: rgba(22, 26, 51, 0.38);
  --border-strong: var(--brand-ink);
  --border-red: var(--brand-accent);
  --border-chrome: var(--brand-chrome);

  /* ---------- Status ---------- */
  --status-success: #2E7D3A;     /* "open now" */
  --status-warn:    #E08A1F;
  --status-error:   var(--brand-accent);
  --status-info:    var(--brand-accent);

  /* ---------- Type Families ---------- */
  --font-display: 'Righteous', 'Avenir Next', 'Trebuchet MS', sans-serif;  /* neon-sign headlines */
  --font-condensed: 'Oswald', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;  /* sub-heads, nav, eyebrow */
  --font-script:  'Pacifico', 'Brush Script MT', cursive;             /* "Welcome to" */
  --font-serif:   'Nunito Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;  /* body (token name kept for the shared markup) */

  /* ---------- Type Scale ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;
  --fs-mega:  120px;

  /* ---------- Line Heights ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* ---------- Letter spacing ---------- */
  --tr-tight:  -0.01em;
  --tr-base:   0;
  --tr-wide:   0.04em;
  --tr-wider:  0.08em;
  --tr-widest: 0.18em; /* ALL-CAPS EYEBROWS */

  /* ---------- Spacing (8pt-ish, loose) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- Radii ---------- */
  --r-0:    0px;        /* signage */
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-pill: 999px;

  /* ---------- Shadows / Elevation ---------- */
  --shadow-paper: 0 1px 0 rgba(14,18,56,0.06), 0 2px 8px rgba(14,18,56,0.06);
  --shadow-card:  0 2px 0 rgba(14,18,56,0.08), 0 8px 22px rgba(14,18,56,0.10);
  --shadow-raised: 0 4px 0 rgba(14,18,56,0.10), 0 16px 36px rgba(14,18,56,0.16);
  --shadow-press:  inset 0 2px 0 rgba(0,0,0,0.18);
  --shadow-neon-red:    0 0 0 2px var(--brand-paper), 0 0 16px rgba(237, 28, 36, 0.55);
  --shadow-neon-yellow: 0 0 0 2px var(--brand-paper), 0 0 16px rgba(247, 148, 29,0.65);

  /* ---------- Borders ---------- */
  --bw-hair:   1px;
  --bw-base:   2px;
  --bw-thick:  3px;
  --bw-heavy:  6px;
  --bw-poster: 10px;

  /* ---------- Motion ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---------- Patterns ---------- */
  --pattern-checker: repeating-conic-gradient(var(--brand-night) 0 25%, var(--brand-surface) 0 50%);
}

/* =========================================================================
   Semantic element styles — drop on a page and core elements look like Walton Diner
   ========================================================================= */

.walton {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-1);
}

.walton h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--brand-accent);
  text-transform: uppercase;
  margin: 0 0 var(--sp-5);
}

.walton h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--brand-navy);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}

.walton h3, .h3 {
  font-family: var(--font-condensed);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-wide);
  color: var(--fg-1);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}

.walton h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

.walton p, .p {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-condensed);
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--brand-accent);
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--brand-accent);
  font-size: var(--fs-2xl);
  line-height: 1;
}

.price {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--brand-accent);
  letter-spacing: var(--tr-tight);
}

.menu-leader {
  /* dotted leader for menu items */
  border-bottom: 2px dotted var(--border-2);
  flex: 1;
  margin: 0 var(--sp-3) 4px;
}

.code, code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.95em;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: var(--r-2);
}


/* ===== SITE STYLES ===== */

/* Marketing site — page-specific styles */
html {
  /* The header is sticky above 820px; without this, #anchor jumps and Tab focus
     land underneath it. Mobile header is static, so it only needs breathing room. */
  scroll-padding-top: 100px;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; background: var(--bg-1); font-family: var(--font-serif); color: var(--fg-1); }

/* HEADER */
.site-header {
  background: var(--brand-night);
  border-bottom: 3px solid var(--brand-neon);
  box-shadow: 0 1px 10px rgba(247,148,29,.35);   /* the tube's glow */
  position: sticky; top: 0; z-index: 50;
}
/* A 7-row hours table grew to 4169px under large text and dragged its card
   off-screen, hiding every closing time. Contain it instead. */
.hours-table { width: 100%; max-width: 100%; table-layout: fixed; }
.hours-table td { overflow-wrap: anywhere; }

.site-header-row { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; gap: 24px;
  /* wrap rather than overflow if a font renders wider than measured */
  flex-wrap: wrap; }
.site-header .wordmark img { height: 56px; display:block; }
.site-nav { display: flex; gap: 4px; }
.site-nav button {
  font-family: var(--font-condensed); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  background: transparent; border: 0; padding: 8px 14px; cursor: pointer; color: var(--brand-ink);
  border-radius: 3px; transition: all 120ms;
}
.site-nav button:hover { background: var(--bg-3); }
.site-nav button.active { background: var(--brand-accent); color: var(--brand-paper); }
/* Sits on the night-sky header. State classes are set by assets/hours.js
   (America/New_York). */
.hours-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-condensed); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.06); color: #E6E9F7;
  border: 1.5px solid rgba(123,160,214,.45);
  padding: 7px 14px; border-radius: 999px;
  /* No nowrap below the desktop header: at large text / text-only zoom the
     label grew to 1050px in a 320px viewport and was clipped at BOTH ends,
     leaving "d - opens 7 AM tom" — a fragment that reads as though we're open. */
  max-width: 100%; text-align: center; flex-wrap: wrap; white-space: normal;
}
/* The label is a flex item; without min-width:0 it refuses to shrink below
   its automatic minimum and spills out of the pill it lives in. */
.hours-pill > * { min-width: 0; }
.hours-pill [data-hours-label] { overflow-wrap: anywhere; }
@media (min-width: 821px) { .hours-pill { white-space: nowrap; } }
/* On the dark pill the brighter greens and reds read; each state also
   changes the label text, so colour is never the only signal. */
/* Neutral until hours.js proves a state: the default used to be green, so a
   no-JS visitor saw an "open" dot at 2am. */
.hours-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #8A90AE; box-shadow: 0 0 0 3px rgba(138,144,174,.20); flex: none; }
.hours-pill.is-open .dot { background: #3DDC84; box-shadow: 0 0 8px rgba(61,220,132,.75); }
.hours-pill.is-closed { color: #FFB3B5; border-color: rgba(237,28,36,.55); }
.hours-pill.is-closed .dot { background: var(--brand-neon-red); box-shadow: 0 0 8px rgba(237,28,36,.7); }
.header-right { display:flex; align-items:center; gap: 12px; }
.order-now-btn {
  font-family: var(--font-condensed); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  background: var(--brand-neon); color: var(--brand-night);
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
  border: 2px solid var(--brand-neon); box-shadow: 0 0 14px rgba(247,148,29,.45);
  transition: all 120ms;
}
.order-now-btn { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 44px; }
.order-now-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(247,148,29,.7); }

/* HERO — dusk into neon: the night sky from the diner's string-light photos,
   the blush Catskills from the menu cover, the neon disc in the middle. */
.hero {
  position: relative; padding: 56px 24px 150px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2A2F72 0%, var(--brand-navy) 38%, var(--brand-night) 78%);
  color: #F2F3FA; isolation: isolate;
}
/* a strand of warm bulbs across the top, like the lights over the diner's porch */
.hero::before {
  content: ""; position: absolute; left: -2%; right: -2%; top: 16px; height: 24px; z-index: -1;
  background:
    radial-gradient(circle at 50% 62%, #FFE4B5 0 2.6px, rgba(255,196,110,.55) 3.6px, transparent 9px) 0 0 / 60px 24px repeat-x,
    linear-gradient(rgba(201,214,240,.22), rgba(201,214,240,.22)) 0 10px / 100% 1px no-repeat;
  pointer-events: none;
}
/* layered mountain ridges, back to front */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath fill='%23FADFDA' d='M0 170V96c80-30 150-54 250-36s150 40 240 22 170-60 280-58 160 46 250 44 150-40 250-46 120 18 170 30v118z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath fill='%23F8C3BF' d='M0 170V120c110-24 190-50 300-40s170 36 270 30 190-48 290-44 170 40 270 38 180-30 310-24v90z'/%3E%3C/svg%3E") bottom/100% 78% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 170' preserveAspectRatio='none'%3E%3Cpath fill='%23FBF7F6' d='M0 170v-38c120 14 240 18 360 6s240-30 360-26 240 28 360 30 240-12 360-20v48z'/%3E%3C/svg%3E") bottom/100% 44% no-repeat;
  pointer-events: none;
}
.hero-logo { display:flex; justify-content:center; margin: 0 auto 14px; }
.hero-logo img {
  width: clamp(190px, 24vw, 280px); aspect-ratio: 1; height: auto; display: block; object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(247,148,29,.38)) drop-shadow(0 0 60px rgba(0,174,239,.18));
}
.hero-eyebrow {
  font-family: var(--font-condensed); font-weight: 500; font-size: 15px; letter-spacing: .26em;
  color: #A3BDE8; text-transform: uppercase; margin-bottom: 6px;
}
.hero .since {
  font-family: var(--font-script); color: #FFD7C2; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.25;
  display: inline-block; transform: rotate(-2deg); margin: 2px 0 4px;
  text-shadow: 0 0 18px rgba(247,148,29,.45);
}
.hero p.lede { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; max-width: 620px; margin: 14px auto 26px; color: #D5D9EC; }
.hero-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .neon { position: absolute; top: 40px; right: 4%; transform: rotate(5deg); }
.hero .neon img { width: 200px; }

/* button base */
.btn {
  font-family: var(--font-condensed); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  padding: 13px 26px; border-radius: 999px; border: 2px solid var(--brand-accent); cursor: pointer;
  box-shadow: 0 2px 0 rgba(14,18,56,0.12); transition: all 120ms; text-decoration: none; display:inline-block;
}
/* On light pages */
.btn-primary { background: var(--brand-accent); color: #fff; }
.btn-secondary { background: #fff; color: var(--brand-accent); }
.btn-mustard { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
/* On the night-sky hero: neon for the one thing we most want tapped */
.hero .btn-primary { background: var(--brand-neon); color: var(--brand-night); border-color: var(--brand-neon);
  box-shadow: 0 0 18px rgba(247,148,29,.5); }
.hero .btn-secondary, .hero .btn-mustard { background: rgba(255,255,255,.04); color: #F2F3FA; border-color: var(--brand-periwinkle); box-shadow: none; }
/* border-box, or the 44px touch minimum lands on the CONTENT box and every
   button renders 76px tall (44 + 28px padding + 4px border). */
.btn { box-sizing: border-box; min-height: 44px; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(14,18,56,.2); }
.hero .btn:hover { box-shadow: 0 0 24px rgba(247,148,29,.55); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(0,0,0,.18); }

/* DIVIDERS */
.red-bar { height: 6px; background: var(--brand-accent); }
.section-rule { display:flex; align-items:center; gap: 14px; margin: 48px auto 24px; max-width: 1200px; padding: 0 24px; }
.section-rule .line { flex:1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(25,98,169,0), var(--brand-accent) 40%, var(--brand-periwinkle)); }
.section-rule .line:last-child { transform: scaleX(-1); }
.section-rule h1,
.section-rule h2 { font-family: var(--font-display); font-size: clamp(24px, 5.2vw, 36px); color: var(--brand-navy); text-transform: uppercase; letter-spacing: .02em; margin: 0; text-align: center; }

/* MENU STRIP */
.strip { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.strip-card {
  background: linear-gradient(180deg, #F6F8FB, var(--brand-surface)); border: 1.5px solid var(--brand-chrome); border-radius: 16px;
  padding: 18px; box-shadow: 0 2px 0 rgba(14,18,56,0.08), 0 8px 22px rgba(14,18,56,0.10);
  position: relative; overflow: hidden; cursor: pointer; transition: all 160ms;
}
.strip-card::before { content:""; position: absolute; left:0; right:0; top:0; height: 5px; background: var(--brand-neon-red); }
.strip-card:nth-child(2)::before { background: var(--brand-cyan); }
.strip-card:nth-child(3)::before { background: var(--brand-neon); }
.strip-card:nth-child(4)::before { background: var(--brand-periwinkle); }
.strip-card:hover { transform: translateY(-2px); }
.strip-card .ic {
  width: 72px; height: 72px; margin: 6px auto 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-accent);
}
.strip-card .ic img { width: 44px; height: 44px; display: block; }
.strip-card { text-align: center; }
.strip-card h3 { text-align: center; }
.strip-card p { text-align: center; }
.strip-card h3 { font-family: var(--font-display); font-size: 22px; color: var(--brand-navy); text-transform: uppercase; margin: 12px 0 4px; }
.strip-card p { font-family: var(--font-serif); font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.4; }

/* FAQ */
.faq-section { max-width: 1200px; margin: 0 auto 48px; padding: 0 24px; }
.faq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.faq-grid article {
  background: var(--brand-surface);
  border: 2px solid var(--brand-ink);
  border-radius: 6px;
  padding: 18px;
  min-height: 132px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(14,18,56,0.08), 0 8px 22px rgba(14,18,56,0.08);
}
.faq-grid article::before {
  content: "";
  display: block;
  height: 5px;
  margin: -18px -18px 16px;
  background: var(--brand-accent);
}
.faq-grid article:nth-child(2)::before { background: var(--brand-cyan); }
.faq-grid article:nth-child(3)::before { background: var(--brand-neon); }
.faq-grid article:nth-child(4)::before { background: var(--brand-periwinkle); }
.faq-grid h3 { font-family: var(--font-display); font-size: 18px; line-height: 1.15; text-transform: uppercase; margin: 0 0 8px; color: var(--brand-ink); }
.faq-grid p { font-family: var(--font-serif); color: var(--fg-2); font-size: 13px; line-height: 1.45; margin: 0; }
.faq-grid a { color: var(--brand-accent); font-weight: 700; }
.faq-strip { margin-bottom: 48px; }
.faq-card { min-height: 128px; cursor: default; }
.faq-card h3 { font-size: 18px; line-height: 1.15; }
.faq-card p { font-size: 13px; line-height: 1.45; }
.faq-card a { color: var(--brand-accent); font-weight: 700; }

/* MENU PAGE */
.menu-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.menu-section h3 { font-family: var(--font-condensed); font-size: 18px; letter-spacing: .14em; color: var(--brand-accent); text-transform: uppercase; border-bottom: 3px double var(--brand-ink); padding-bottom: 6px; margin: 0 0 12px; }
.menu-row { display: flex; align-items: baseline; padding: 8px 0; }
.menu-row .name { font-family: var(--font-serif); font-weight: 700; font-size: 15px; color: var(--fg-1); white-space: nowrap; }
.menu-row .leader { flex: 1; border-bottom: 2px dotted rgba(14,18,56,.4); margin: 0 12px 4px; }
.menu-row .price { font-family: var(--font-display); font-size: 16px; color: var(--brand-accent); white-space: nowrap; }
.menu-row .desc { font-family: var(--font-serif); font-size: 12.5px; color: var(--fg-2); margin: 2px 0 0; line-height: 1.4; }
.pop-tag { font-family: var(--font-condensed); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-accent); margin-left: 6px; }

/* LOCATION */
.loc-grid { max-width: 1100px; margin: 0 auto; padding: 0 24px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
/* Grid items default to min-width:auto, so the column sized itself to the
   hours table's intrinsic width and dragged the card off-screen under large
   text. min-width:0 lets the card shrink so the table can wrap inside it. */
.loc-grid > * { min-width: 0; }
.info-card { min-width: 0; }
.info-card { background: linear-gradient(180deg, #F6F8FB, var(--brand-surface)); border: 1.5px solid var(--brand-chrome); border-radius: 16px; padding: 28px; box-shadow: 0 2px 0 rgba(14,18,56,.08); }
/* The cards use <h2>; this rule only named h3, so 'Hours' and 'The Diner'
   rendered as unstyled browser defaults instead of the display face. */
.info-card h2, .info-card h3, .info-card h4 { font-family: var(--font-display); font-size: 28px; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 16px; }
.hours-table { width: 100%; }
.hours-table tr td { padding: 6px 0; font-family: var(--font-serif); font-size: 16px; border-bottom: 1px dotted var(--border-1); }
.hours-table tr td:first-child { font-weight: 700; }
.hours-table tr td:last-child { text-align: right; color: var(--brand-accent); font-family: var(--font-condensed); letter-spacing: .08em; }
.address { font-family: var(--font-serif); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.address .name { font-family: var(--font-display); font-size: 22px; color: var(--brand-navy); display:block; margin-bottom: 6px; text-transform: uppercase; }

.map-placeholder {
  height: 100%; min-height: 340px; border-radius: 6px;
  background-color: var(--brand-mint);
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 38, 93,.12) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(36, 38, 93,.12) 0 1px, transparent 1px 40px);
  border: 2px solid var(--brand-ink);
  display:flex; align-items:center; justify-content:center; position: relative;
}
.map-pin { font-family: var(--font-display); color: var(--brand-accent); font-size: 44px; }

/* ABOUT */
.about-wrap { max-width: 760px; margin: 0 auto; padding: 0 24px 48px; }
.about-wrap p { font-family: var(--font-serif); font-size: 19px; line-height: 1.6; color: var(--fg-1); margin: 0 0 18px; text-wrap: pretty; }
.about-wrap .callout { font-family: var(--font-script); color: var(--brand-accent); font-size: 36px; line-height: 1.2; text-align: center; margin: 28px 0; }
.signature { font-family: var(--font-script); font-size: 28px; color: var(--brand-navy); margin-top: 24px; }

/* FOOTER */
.site-footer { background: var(--brand-night); color: var(--brand-paper); margin-top: 48px; }
.checker-strip {
  height: 28px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA4MCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIj4KICA8cmVjdCB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9IiNGRkY4RUMiPjwvcmVjdD4KICA8cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHg9IjAiIHk9IjAiIGZpbGw9IiMxQTFBMUEiPjwvcmVjdD4KICA8cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHg9IjQwIiB5PSI0MCIgZmlsbD0iIzFBMUExQSI+PC9yZWN0Pgo8L3N2Zz4=');
  background-size: 28px;
}
.footer-row { max-width: 1200px; margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-row h4,
/* h2, not h4: on shallow pages (about, location) the footer h4 followed the
   page h1 directly, skipping two heading levels for screen-reader nav. */
.footer-row h2 { font-family: var(--font-condensed); font-size: 13px; letter-spacing: .18em; color: var(--brand-neon); text-transform: uppercase; margin: 0 0 10px; }
.footer-row p, .footer-row a { overflow-wrap: anywhere; font-family: var(--font-serif); font-size: 14px; color: var(--brand-paper); line-height: 1.6; text-decoration: none; display: block; opacity: .9; }
.footer-row a:hover { text-decoration: underline; opacity: 1; }
.footer-row a:not(.order-now-btn) { display: flex; align-items: center; min-height: 28px; }
.footer-meta { text-align: center; padding: 14px; border-top: 1px solid rgba(123,160,214,.22); font-family: var(--font-condensed); font-size: 12px; letter-spacing: .14em; opacity: .8; }


/* ===== Static-page additions ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  /* ten of these sit inside .pop-tag and would otherwise be announced
     as "HOUSE SPECIALTY" by a screen reader */
  text-transform: none;
}
.site-nav a {
  font-family: var(--font-condensed); font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; padding: 8px 14px; cursor: pointer; color: #E6E9F7;
  border-radius: 999px; transition: all 120ms; text-decoration: none;
  /* Keep "Our Story" / "Reviews & More" on one line — they were breaking
     mid-label in the 821-1000px band and stacking the header to two rows. */
  white-space: nowrap;
}
.site-nav a:hover { background: rgba(123,160,214,.16); color: #fff; }
.site-nav a.active { background: var(--brand-neon); color: var(--brand-night); }
.site-header .wordmark { display: inline-flex; }
.site-header .wordmark img { height: 64px; width: 64px; border-radius: 50%; }
.footer-logo { height: 92px; width: 92px; margin-bottom: 12px; filter: drop-shadow(0 0 12px rgba(247,148,29,.3)); }
.strip-card { text-decoration: none; color: inherit; display: block; }
.hero .neon { position: absolute; top: 32px; right: 4%; transform: rotate(6deg); width: 200px; }
.hero .neon svg { width: 100%; height: auto; }
/* The map fills the card and the directions button sits in its own row
   underneath. It used to float over the map's bottom-left corner, which hid
   Google's logo (their terms require it to stay visible) and the Satellite toggle. */
.map-card { padding: 0 !important; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.map-frame { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 340px; }
/* with JS off the map is the <noscript> copy; let it fill the frame the same way */
.map-frame > noscript { flex: 1 1 auto; display: flex; flex-direction: column; }
.map-card iframe { border: 0; width: 100%; flex: 1 1 auto; min-height: 340px; display: block; background: var(--brand-surface-deep); }
.map-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 16px; border-top: 1.5px solid var(--brand-chrome);
}
.map-pin-link {
  /* Primary "Get Directions" CTA — was 38px tall, under the touch minimum. */
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--brand-neon); color: var(--brand-night); font-weight: 600;
  font-family: var(--font-condensed); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px; border: 2px solid var(--brand-night);
  box-shadow: 0 2px 0 rgba(14,18,56,.18); text-decoration: none;
}
.map-pin-link:hover { box-shadow: 0 0 18px rgba(247,148,29,.55); }
@media (max-width: 560px) {
  /* one full-width tap target on phones */
  .map-pin-link { flex: 1 1 100%; }
}
.menu-row .pop-tag { font-family: var(--font-condensed); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-accent); margin-left: 6px; }

/* Mobile / tablet */
@media (max-width: 820px) {
  /* The header was sticky AND 206px tall here — a quarter of a phone screen,
     and 71% of a landscape one once the fixed bottom bar is counted. Let it
     scroll away; the fixed action bar already keeps Call/Directions reachable. */
  .site-header { position: static; }
  .site-header-row { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 16px; }
  .site-header .wordmark img { height: 48px; width: 48px; }

  /* .site-nav was a nowrap flex row 479px wide inside a 327px column, so
     "Our Story" and "Reviews & More" sat off-screen with no way to reach them. */
  .site-nav { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; gap: 2px; }
  .site-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 8px 12px; font-size: 12.5px; letter-spacing: .10em;
  }
  .hours-pill { font-size: 12px; padding: 7px 12px; }

  html { scroll-padding-top: 16px; }

  .strip { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-cols { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
  .footer-row { grid-template-columns: 1fr; }
  .hero .neon { display: none; }

  /* Footer links were 22px tall — under the 44px touch-target minimum. */
  .footer-row a:not(.order-now-btn) { min-height: 44px; }
}
@media (max-width: 480px) {
  .strip { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}


/* =========================================================
   FULL MENU PAGE + MOBILE ACTION BAR
   ========================================================= */
.full-menu-shell {
  background: var(--brand-paper);
}
/* The search field's own rules live in menu.html's <style> block, but none of
   them declared a placeholder colour, so every engine fell back to its own
   default: Chrome #757575 4.61:1, WebKit #A9A9A9 2.35:1, Firefox 3.79:1 — a
   fail on iPhone Safari, and the placeholder is the field's only visible
   label. Measured 6.84:1 in all three with this. `opacity: 1` is load-bearing:
   Firefox's default placeholder carries alpha, not just a colour. */
.menu-filter input::placeholder { color: #5F5A52; opacity: 1; }
.full-menu-intro {
  max-width: 980px;
  margin: 0 auto 26px;
  padding: 0 24px;
  text-align: center;
}
.full-menu-intro p {
  max-width: 760px;
  margin: 8px auto 16px;
  color: var(--fg-2);
  font-size: 17px;
  line-height: 1.55;
}
.full-menu-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0 8px;
}
.full-menu-actions a {
  font-family: var(--font-condensed);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brand-ink);
  background: var(--brand-surface);
  border: 2px solid var(--brand-ink);
  padding: 11px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(14,18,56,.12);
}
.full-menu-actions a.primary {
  background: var(--brand-accent);
  color: var(--brand-paper);
}
.menu-note {
  font-size: 13px !important;
  color: var(--fg-3) !important;
  margin-top: 10px !important;
}
.menu-highlights-pro {
  max-width: 1180px;
  margin: 38px auto 38px;
  padding: 0 24px;
}
.menu-highlights-pro .section-rule {
  margin-top: 0;
  margin-bottom: 18px;
  padding: 0;
}
.menu-highlights-intro {
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
}
.menu-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.menu-highlight-card {
  background: var(--brand-surface);
  border: 2px solid var(--brand-ink);
  border-radius: 6px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(14,18,56,.08), 0 8px 22px rgba(14,18,56,.10);
  position: relative;
  overflow: hidden;
}
.menu-highlight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--brand-accent);
}
.menu-highlight-card:nth-child(2)::before { background: var(--brand-navy); }
.menu-highlight-card:nth-child(3)::before { background: var(--brand-neon); }
.menu-highlight-card:nth-child(4)::before { background: var(--brand-ink); }
.menu-highlight-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 8px 0 10px;
}
.menu-highlight-card p {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-2);
  margin: 0;
}
.full-menu-pages {
  max-width: 1040px;
  margin: 0 auto 52px;
  padding: 0 18px;
}
.full-menu-page {
  margin: 0 auto 34px;
  text-align: center;
}
.full-menu-page h3 {
  font-family: var(--font-condensed);
  color: var(--brand-accent);
  letter-spacing: .12em;
  font-size: 16px;
  text-transform: uppercase;
  margin: 20px 0 10px;
}
.full-menu-page a {
  display: inline-block;
  max-width: 100%;
}
.full-menu-page img {
  width: 100%;
  max-width: 980px;
  height: auto;
  display: block;
  border: 2px solid rgba(14,18,56,.18);
  box-shadow: 0 8px 26px rgba(0,0,0,.14);
  background: #fff;
}
.mobile-sticky-bar-final { display: none; }
@media screen and (max-width: 900px) {
  .menu-highlights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 820px) {
  html, body { overflow-x: hidden !important; }
  /* Room for the fixed action bar. It is the footer's own padding, not the body's:
     on body the reserve (68 + 8px) outgrew the bar (64px + 3px border) and left a
     9px strip of the light page background between the navy footer and the bar.
     Inside the footer, that space is navy and runs on behind the bar. */
  .site-footer { padding-bottom: calc(var(--action-bar-h) + 8px + env(safe-area-inset-bottom)); }
  .full-menu-intro { padding: 0 14px; }
  .full-menu-actions { justify-content: stretch; }
  .full-menu-actions a { flex: 1 1 42%; text-align: center; }
  .full-menu-pages { padding: 0 8px; }
  .full-menu-page { margin-bottom: 22px; }
  .full-menu-page img { border-width: 1px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
  .mobile-sticky-bar-final {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2147483647 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    background: var(--brand-night) !important;
    border-top: 3px solid var(--brand-neon) !important;
    box-shadow: 0 -6px 18px rgba(0,0,0,.28) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .mobile-sticky-bar-final a,
  .mobile-sticky-bar-final a:visited,
  .mobile-sticky-bar-final a:hover,
  .mobile-sticky-bar-final a:active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px !important;
    padding: 12px 6px !important;
    color: #F2F3FA !important;
    background: var(--brand-night) !important;
    text-decoration: none !important;
    font-family: var(--font-condensed) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    border-right: 1px solid rgba(123,160,214,.25) !important;
  }
  .mobile-sticky-bar-final a:last-child {
    border-right: 0 !important;
    background: var(--brand-neon) !important;
    color: var(--brand-night) !important;
    font-weight: 600 !important;
  }
}
@media screen and (max-width: 560px) {
  .menu-highlights-grid { grid-template-columns: 1fr; }
  .menu-highlights-intro { font-size: 16px; }
  .full-menu-actions a { flex-basis: 100%; }
}
/* Measured on the previous site's wider display font (kept as a safety margin;
   re-measure if the label font changes). Four labels across a 320px viewport is
   80px a cell, and WebKit set that font wider than Blink did: measured, "DIRECTIONS" ran 16px past its cell
   and left a -5.8px gap to "DELIVERY" — the two labels touch. Blink and Gecko
   are clear at every width. Dropping the tracking alone still overflowed by
   6.4px; this combination measures a +9.3px gap with 0.1px of overflow, and
   11px matches the sizes the header already shrinks to in its tight bands.
   Inert from 375px up, where the 12px label fits on its own. */
@media screen and (max-width: 374px) {
  .mobile-sticky-bar-final a {
    font-size: 11px !important;
    letter-spacing: .04em !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}


/* =========================================================
   RESPONSIVE REPAIRS
   ========================================================= */

/* Tablet/small-laptop band. Above 820px the header keeps its single-row
   desktop layout, but logo + 5 nav links + hours pill needed ~869px, so at
   ~880px the labels wrapped and the header grew to two ragged rows. */
/* Upper bound is 1100, not 1000: at 1024px (iPad landscape) Blink fit the
   full-size header but WebKit and Gecko overflowed by 27px — they set
   the display font slightly wider. The extra headroom absorbs that variance. */
@media (min-width: 821px) and (max-width: 1100px) {
  .site-header-row { gap: 12px; padding: 10px 16px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 8px 9px; font-size: 12px; letter-spacing: .06em; }
  .hours-pill { font-size: 11px; letter-spacing: .06em; padding: 6px 10px; gap: 6px; }
}

/* Section headings: the flex rules collapsed to hairlines at narrow widths
   and left the title left-aligned. Stack them into full-width bars instead. */
@media (max-width: 620px) {
  .section-rule { flex-direction: column; gap: 10px; }
  .section-rule .line { align-self: stretch; flex: 0 0 2px; width: 100%; }
}

/* Hero CTAs were centre-justified but ragged — four different widths in a
   stack. Equal width, single centred column. */
@media (max-width: 560px) {
  .hero-cta-row { flex-direction: column; align-items: center; gap: 10px; }
  /* border-box matters here: .btn carries 26px side padding + 2px border, so a
     content-box max-width:320 renders 376px — wider than the hero's content
     box, which pushed the stack off-centre and overflowed the viewport. */
  .hero-cta-row .btn { box-sizing: border-box; width: 100%; max-width: 320px; }
}

/* Buttons are inline-block links; centre their label once they have width. */
.btn { text-align: center; }

/* Cards read as one centred column on phones rather than edge-to-edge slabs. */
@media (max-width: 480px) {
  .strip { justify-items: center; }
  .strip-card { box-sizing: border-box; width: 100%; max-width: 420px; }
}

/* All seven hours rows broke as "7 AM – 9 / PM" at 320 and 360px, splitting the
   closing time onto its own line. Two alternatives were measured and rejected:
   `white-space: nowrap` clears the wrap but overflows every cell by 20px at
   320px, and `table-layout: auto` still wraps all seven there. 13px is the one
   that measures clean — 0 of 7 wrapped, no cell overflow, card 647px -> 444px —
   and the red stays at 4.68:1 on the card, so nothing trades away. */
@media (max-width: 374px) {
  .hours-table tr td:last-child { font-size: 13px; }
}

/* Clickable address / phone. The footer's generic `a { display: flex }` rule
   would turn an inline address link into its own flex block, so opt out. */
.footer-row a.footer-addr {
  display: inline-block; min-height: 0; padding: 5px 0; opacity: .9;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255,.45);
}
.footer-row a.footer-addr:hover { opacity: 1; text-decoration-color: currentColor; }

.addr-link {
  overflow-wrap: anywhere;
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(14,18,56,.35);
  display: inline-block; padding: 3px 0;
}
.addr-link:hover { color: var(--brand-accent); text-decoration-color: currentColor; }

/* 821-900px is the tightest point on the whole site: the desktop single-row
   header resumes at 821px but there is barely room for logo + 5 links + pill
   (measured 2px of overflow at 830px). Shave the row a little harder here. */
@media (min-width: 821px) and (max-width: 900px) {
  .site-header .wordmark img { height: 52px; width: 52px; }
  .site-nav a { padding: 8px 6px; font-size: 11.5px; letter-spacing: .03em; }
  .hours-pill { font-size: 10.5px; letter-spacing: .03em; padding: 6px 9px; gap: 5px; }
  .hours-pill .dot { width: 8px; height: 8px; }
}

/* Footer "Order Delivery" was stretching the full column: the generic
   `.footer-row p, .footer-row a { display: block }` (0,1,1) outranks
   `.order-now-btn { display: inline-flex }` (0,1,0). Win it back on specificity. */
.footer-row a.order-now-btn {
  display: inline-flex; width: auto; align-self: flex-start;
  padding: 11px 18px; font-size: 12px;
  color: var(--brand-night);
  /* the footer's link rule sets the body face; a button keeps the button face */
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: .14em;
}

/* =========================================================
   CONDITION FIXES  (zoom, keyboard, motion, touch, print)
   ========================================================= */

/* Keyboard focus was left entirely to the UA, and the UA ring is near-invisible
   on the navy footer and red buttons. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: 3px;
}
.site-footer :focus-visible,
.more-band :focus-visible,
.mobile-sticky-bar-final :focus-visible {
  outline-color: var(--brand-neon);
}

/* iOS paints a grey wash over any tapped element; on the full-size cards that
   is a large flash. Tint it to brand instead. Inherits, so declare once. */
html { -webkit-tap-highlight-color: rgba(25, 98, 169, 0.15); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn:active, .strip-card:hover, .order-now-btn:hover { transform: none !important; }
}

@media screen and (max-width: 820px) {
  /* Tabbing to something near the page bottom parked it behind the fixed
     action bar. Mirrors the footer's bottom reserve. */
  html { scroll-padding-bottom: calc(var(--action-bar-h) + 8px + env(safe-area-inset-bottom)); }
}

@media print {
  /* Cream text on navy/red prints as invisible-on-white. Force ink on paper. */
  .site-header, .mobile-sticky-bar-final, .neon, .checker-strip { display: none !important; }
  .site-footer, .more-band, .more-panel,
  .seo-menu-section > h3, .btn, .order-now-btn, .seo-menu-actions a {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    box-shadow: none !important;
  }
  .site-footer a, .more-panel a, .footer-row a, .footer-row p { color: #000 !important; }
  .seo-menu-section > h3 { border-bottom: 2px solid #000; }
  /* Keep menu sections and scanned pages from splitting across sheets. */
  .menu-image-card, .seo-menu-section, .seo-subsection {
    break-inside: avoid; page-break-inside: avoid;
  }
  .menu-image-card img { max-height: 9in; width: auto; margin: 0 auto; }
  body { padding-bottom: 0 !important; }
}

/* The hero neon is a real sign: unlit when the diner is shut. Without this it
   glowed OPEN while the header pill read "Closed - opens 7 AM tomorrow". */
.diner-closed .hero .neon { opacity: .32; filter: grayscale(1); }
.hero .neon { transition: opacity 200ms, filter 200ms; }

/* Skip link. Was duplicated inline in three pages; defined once here so every
   page that links this stylesheet gets it. 404.html deliberately links no
   stylesheet and needs none — it is a single box. */
main[tabindex="-1"]:focus { outline: none; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; background: var(--brand-accent); color: var(--brand-paper); font-family: var(--font-condensed); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 10px 16px; border-radius: 3px; }