/*
 * Valley Cheesesteak Co, hand-written stylesheet.
 *
 * A pixel-for-pixel translation of the Lovable design (lovable/src), which was
 * built with Tailwind v4. Every value below is the value Tailwind compiled for
 * the utility classes on that element; the Tailwind class list is noted
 * against each rule so the two can be compared. There is no build step: edit
 * this file directly.
 *
 * Breakpoints match Tailwind: sm 40rem (640px), md 48rem (768px),
 * lg 64rem (1024px), xl 80rem (1280px).
 */

/* ---------- Tokens (lovable/src/styles.css :root) ---------- */
:root {
    --radius: 0.375rem;
    --background: oklch(0.978 0.014 92);
    --foreground: oklch(0.22 0.06 258);
    --card: oklch(1 0 0);
    --primary: oklch(0.24 0.062 259);
    --primary-foreground: oklch(0.978 0.014 92);
    --secondary: oklch(0.78 0.145 82);
    --muted-foreground: oklch(0.45 0.03 258);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.89 0.02 92);
    --input: oklch(0.86 0.02 92);
    --navy: oklch(0.24 0.062 259);
    --navy-deep: oklch(0.19 0.05 259);
    --gold: oklch(0.78 0.145 82);
    --cream: oklch(0.978 0.014 92);

    --font-display: "Anton", ui-sans-serif, sans-serif;
    --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;

    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-2xl: 0 25px 50px -12px #00000040;
}

/* ---------- Reset (the parts of Tailwind's preflight this site relies on) ---------- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; border-color: var(--border); }
html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--font-sans);
    -webkit-tap-highlight-color: transparent;
}
body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
ol, ul { list-style: none; }
img, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
}
button { cursor: pointer; }
::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
textarea { resize: vertical; }
::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; padding-block: 0; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { padding-block: 0; }
::-webkit-calendar-picker-indicator { line-height: 1; }
[hidden] { display: none !important; }

/* ---------- Small shared helpers ---------- */
.section-x { padding-inline: 1.25rem; margin-inline: auto; max-width: 72rem; }
.section-x.max-w-3xl, .max-w-3xl { max-width: 48rem; }
.section-py { padding-block: 3rem; }
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.text-lg { font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
.fw-semibold { font-weight: 600; }
.break-all { word-break: break-all; }
.block-mt { margin-top: 3rem; }

.h-2xl { font-size: 1.5rem; line-height: calc(2 / 1.5); }                  /* text-2xl */
.h-section { font-size: 1.875rem; line-height: calc(2.25 / 1.875); }       /* text-3xl sm:text-4xl */
@media (min-width: 40rem) { .h-section { font-size: 2.25rem; line-height: calc(2.5 / 2.25); } }

/* underline decoration-gold decoration-2 */
.link-gold { text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }

/* rounded-lg bg-secondary/25 p-6 */
.soft-panel { border-radius: var(--radius-lg); background: color-mix(in oklab, var(--secondary) 25%, transparent); padding: 1.5rem; }

/* rounded-lg bg-navy p-6 text-cream */
.navy-card { border-radius: var(--radius-lg); background: var(--navy); padding: 1.5rem; color: var(--cream); }

/* rounded-lg border-2 border-navy/15 bg-card p-5 */
.outline-card { border-radius: var(--radius-lg); border: 2px solid color-mix(in oklab, var(--navy) 15%, transparent); background: var(--card); padding: 1.25rem; }
.outline-card-soft { border-color: color-mix(in oklab, var(--navy) 10%, transparent); }

/* ---------- Buttons ----------
 * rounded-md px-6 py-3 font-display text-lg uppercase, in four colourways.
 * min-h-[44px]/[48px] in the design never bites: padding plus line height is already 52px. */
.btn, .btn-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-md);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: calc(1.75 / 1.125);
    text-transform: uppercase;
    text-align: center;
    transition-property: color, background-color, border-color, opacity;
    transition-timing-function: var(--ease);
    transition-duration: 0.15s;
}
.btn-lg { min-height: 48px; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-outline-gold { border: 2px solid var(--gold); color: var(--gold); }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-outline-navy { border: 2px solid var(--navy); color: var(--navy); }
.btn[disabled], .btn-plain[disabled] { opacity: 0.6; cursor: default; }
@media (hover: hover) {
    .btn-gold:hover { opacity: 0.9; }
    .btn-outline-gold:hover { background: var(--gold); color: var(--navy); }
    .btn-navy:hover { background: var(--navy-deep); }
    .btn-outline-navy:hover { background: var(--navy); color: var(--cream); }
}

/* ---------- Shell (SiteShell.tsx) ---------- */
/* flex min-h-screen w-full flex-col overflow-x-hidden bg-background */
.shell { display: flex; min-height: 100vh; width: 100%; flex-direction: column; overflow-x: hidden; background: var(--background); }
.shell-main { flex: 1 1 0%; }

/* sticky top-0 z-50 border-b-2 border-gold/40 bg-navy */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 2px solid color-mix(in oklab, var(--gold) 40%, transparent); background: var(--navy); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; }
.brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.brand-logo { height: 3rem; width: 3rem; border-radius: 9999px; }
/* truncate font-display text-base leading-tight text-gold uppercase sm:text-xl */
.brand-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-display); font-size: 1rem; line-height: 1.25;
    color: var(--gold); text-transform: uppercase;
}
@media (min-width: 40rem) { .brand-name { font-size: 1.25rem; } }

.nav-desktop { display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 64rem) { .nav-desktop { display: flex; } }
/* text-sm font-semibold uppercase tracking-wide transition-colors */
.nav-link {
    font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.025em;
    color: color-mix(in oklab, var(--cream) 80%, transparent);
    transition: color 0.15s var(--ease);
}
.nav-link.is-active { color: var(--gold); }
@media (hover: hover) { .nav-link:hover { color: var(--gold); } }

/* inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-gold/50 text-gold lg:hidden */
.menu-toggle {
    display: inline-flex; height: 2.75rem; width: 2.75rem; flex-shrink: 0;
    align-items: center; justify-content: center; border-radius: var(--radius-md);
    border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent); color: var(--gold);
}
.menu-toggle > span { display: flex; }
@media (min-width: 64rem) { .menu-toggle, .nav-mobile { display: none; } }

/* border-t border-gold/20 bg-navy-deep */
.nav-mobile { border-top: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); background: var(--navy-deep); }
.nav-mobile-list { display: flex; flex-direction: column; padding-block: 0.5rem; }
/* border-b border-cream/10 py-4 text-sm font-semibold uppercase leading-snug tracking-wide break-words last:border-0 */
.nav-mobile-link {
    border-bottom: 1px solid color-mix(in oklab, var(--cream) 10%, transparent);
    padding-block: 1rem; font-size: 0.875rem; line-height: 1.375; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.025em; overflow-wrap: break-word;
    color: color-mix(in oklab, var(--cream) 85%, transparent);
}
.nav-mobile-link:last-child { border-bottom-width: 0; }
.nav-mobile-link.is-active { color: var(--gold); }

/* mt-20 border-t-2 border-gold/40 bg-navy-deep text-cream/80 */
.site-footer {
    margin-top: 5rem; border-top: 2px solid color-mix(in oklab, var(--gold) 40%, transparent);
    background: var(--navy-deep); color: color-mix(in oklab, var(--cream) 80%, transparent);
}
/* grid gap-10 py-12 md:grid-cols-3 */
.footer-grid { display: grid; gap: 2.5rem; padding-block: 3rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-logo { height: 5rem; width: 5rem; border-radius: 9999px; }
.footer-blurb { margin-top: 1rem; max-width: 20rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
.footer-heading { font-family: var(--font-display); font-size: 1rem; line-height: 1.5; color: var(--gold); }
.footer-list { margin-top: 0.75rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
.footer-list > li:not(:last-child) { margin-bottom: 0.5rem; }
.footer-list a, .footer-legal a { transition: color 0.15s var(--ease); }
@media (hover: hover) { .footer-list a:hover, .footer-legal a:hover { color: var(--gold); } }
.footer-bottom { border-top: 1px solid color-mix(in oklab, var(--cream) 10%, transparent); }
/* flex flex-col gap-4 py-5 text-xs text-cream/60 */
.footer-bottom-inner {
    display: flex; flex-direction: column; gap: 1rem; padding-block: 1.25rem;
    font-size: 0.75rem; line-height: calc(1 / 0.75); color: color-mix(in oklab, var(--cream) 60%, transparent);
}
.footer-bottom-row { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .footer-bottom-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-legal { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
.footer-legal a { display: inline-flex; min-height: 2.75rem; align-items: center; }
.footer-credit { display: flex; align-items: center; justify-content: flex-end; }
/* inline-flex min-h-[44px] items-center gap-3 text-cream/60 transition-colors hover:text-gold */
.abbotts-credit {
    display: inline-flex; min-height: 44px; align-items: center; gap: 0.75rem;
    color: color-mix(in oklab, var(--cream) 60%, transparent); transition: color 0.15s var(--ease);
}
.abbotts-credit span { font-size: 0.75rem; line-height: calc(1 / 0.75); }
.abbotts-credit-logo { height: 2.25rem; width: auto; }
@media (hover: hover) { .abbotts-credit:hover { color: var(--gold); } }

/* ---------- Cookie banner (CookieBanner.tsx) ---------- */
/* fixed inset-x-0 bottom-0 z-50 border-t-2 border-gold bg-navy p-4 text-cream shadow-2xl */
.cookie-banner {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    border-top: 2px solid var(--gold); background: var(--navy); padding: 1rem;
    color: var(--cream); box-shadow: var(--shadow-2xl);
}
.cookie-banner-inner { margin-inline: auto; display: flex; max-width: 64rem; flex-direction: column; gap: 1rem; }
@media (min-width: 40rem) { .cookie-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.cookie-banner-text { font-size: 0.875rem; line-height: 1.375; color: color-mix(in oklab, var(--cream) 90%, transparent); }
.cookie-banner-text a { text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.cookie-banner-actions { display: flex; gap: 0.75rem; }
/* min-h-[44px] flex-1 rounded-md border-2 border-gold px-5 py-2 font-display text-sm uppercase sm:flex-none */
.cookie-btn {
    min-height: 44px; flex: 1 1 0%; border-radius: var(--radius-md); padding: 0.5rem 1.25rem;
    font-family: var(--font-display); font-size: 0.875rem; line-height: calc(1.25 / 0.875); text-transform: uppercase;
}
@media (min-width: 40rem) { .cookie-btn { flex: none; } }
.cookie-btn-reject { border: 2px solid var(--gold); color: var(--gold); }
.cookie-btn-accept { background: var(--gold); color: var(--navy); }
@media (hover: hover) {
    .cookie-btn-reject:hover { background: var(--gold); color: var(--navy); }
    .cookie-btn-accept:hover { opacity: 0.9; }
}

/* ---------- Toast (sonner, as configured in components/ui/sonner.tsx) ---------- */
.toaster { position: fixed; right: 24px; bottom: 24px; z-index: 999999; width: 356px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.toast {
    display: flex; align-items: center; gap: 6px; padding: 16px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--background); color: var(--foreground);
    box-shadow: var(--shadow-lg); font-size: 13px;
    transition: opacity 0.4s, transform 0.4s;
}
.toast.is-leaving { opacity: 0; transform: translateY(100%); }
.toast-icon { display: flex; flex-shrink: 0; width: 20px; height: 20px; margin-right: 4px; }
.toast-error .toast-icon { color: var(--destructive); }
.toast-title { font-weight: 500; line-height: 1.5; }
.toast-description { line-height: 1.4; color: var(--muted-foreground); }
@media (max-width: 600px) { .toaster { right: 16px; left: 16px; bottom: 16px; width: auto; } }

/* ---------- Page hero (navy band at the top of each inner page) ---------- */
/* bg-navy py-14 text-cream */
.page-hero { background: var(--navy); padding-block: 3.5rem; color: var(--cream); }
/* mt-4 text-4xl sm:text-5xl */
.page-hero-title { margin-top: 1rem; font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
@media (min-width: 40rem) { .page-hero-title { font-size: 3rem; line-height: 1; } }
/* mt-4 max-w-2xl text-lg text-cream/85 */
.page-hero-intro { margin-top: 1rem; max-width: 42rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--cream) 85%, transparent); }
/* legal pages: mt-4 max-w-2xl text-cream/70 */
.page-hero-intro.is-muted { font-size: 1rem; line-height: 1.5; color: color-mix(in oklab, var(--cream) 70%, transparent); }
/* mt-3 max-w-2xl text-cream/70 */
.page-hero-note { margin-top: 0.75rem; max-width: 42rem; color: color-mix(in oklab, var(--cream) 70%, transparent); }

/* ---------- Coming soon (routes/coming-soon.tsx) ---------- */
.cs { background: var(--navy); color: var(--cream); }
/* section-x flex min-h-[70vh] flex-col items-center justify-center py-16 text-center md:py-24 */
.cs-inner { display: flex; min-height: 70vh; flex-direction: column; align-items: center; justify-content: center; padding-block: 4rem; text-align: center; }
@media (min-width: 48rem) { .cs-inner { padding-block: 6rem; } }
/* text-sm font-semibold uppercase tracking-[0.2em] text-gold */
.cs-eyebrow, .home-eyebrow { font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); }
/* mt-5 text-5xl leading-[0.95] sm:text-7xl */
.cs-title { margin-top: 1.25rem; font-size: 3rem; line-height: 0.95; }
@media (min-width: 40rem) { .cs-title { font-size: 4.5rem; } }
/* mt-6 max-w-2xl text-lg text-cream/85 sm:text-xl */
.cs-lead { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--cream) 85%, transparent); }
@media (min-width: 40rem) { .cs-lead { font-size: 1.25rem; line-height: calc(1.75 / 1.25); } }
/* mt-10 w-full max-w-3xl rounded-xl border-2 border-gold/30 bg-navy-deep p-6 sm:p-8 */
.cs-teaser { margin-top: 2.5rem; width: 100%; max-width: 48rem; border-radius: var(--radius-xl); border: 2px solid color-mix(in oklab, var(--gold) 30%, transparent); background: var(--navy-deep); padding: 1.5rem; }
@media (min-width: 40rem) { .cs-teaser { padding: 2rem; } }
.cs-teaser-head { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--gold); }
/* font-display text-lg uppercase tracking-wide */
.cs-teaser-head h2 { font-size: 1.125rem; line-height: calc(1.75 / 1.125); letter-spacing: 0.025em; }
.cs-teaser-list { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .cs-teaser-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* rounded-lg border border-gold/20 bg-navy p-4 text-left */
.cs-teaser-item { border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--gold) 20%, transparent); background: var(--navy); padding: 1rem; text-align: left; }
.cs-teaser-name { font-family: var(--font-display); font-size: 1.125rem; line-height: calc(1.75 / 1.125); text-transform: uppercase; color: var(--gold); }
.cs-teaser-text { margin-top: 0.25rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--cream) 80%, transparent); }
.cs-teaser-note { margin-top: 1rem; text-align: center; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--cream) 70%, transparent); }
/* mt-10 flex w-full max-w-md flex-col gap-3 sm:flex-row sm:justify-center */
.cs-actions { margin-top: 2.5rem; display: flex; width: 100%; max-width: 28rem; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .cs-actions { flex-direction: row; justify-content: center; } }
/* mt-8 inline-flex min-h-[44px] items-center gap-2 text-sm font-semibold text-cream/70 underline decoration-gold/60 underline-offset-4 hover:text-gold */
.cs-back {
    margin-top: 2rem; display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-weight: 600;
    color: color-mix(in oklab, var(--cream) 70%, transparent);
    text-decoration-line: underline; text-decoration-color: color-mix(in oklab, var(--gold) 60%, transparent); text-underline-offset: 4px;
}
@media (hover: hover) { .cs-back:hover { color: var(--gold); } }
/* mt-10 max-w-md text-sm text-cream/60; link text-gold hover:underline */
.cs-footnote { margin-top: 2.5rem; max-width: 28rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--cream) 60%, transparent); }
.cs-footnote a { color: var(--gold); }
@media (hover: hover) { .cs-footnote a:hover { text-decoration-line: underline; } }

/* ---------- Home (routes/index.tsx) ---------- */
.home-hero { background: var(--navy); color: var(--cream); }
/* section-x grid gap-10 py-14 md:grid-cols-[1fr_auto] md:items-center md:py-24 */
.home-hero-grid { display: grid; gap: 2.5rem; padding-block: 3.5rem; }
@media (min-width: 48rem) { .home-hero-grid { grid-template-columns: 1fr auto; align-items: center; padding-block: 6rem; } }
/* mt-4 text-4xl leading-[0.95] sm:text-6xl */
.home-title { margin-top: 1rem; font-size: 2.25rem; line-height: 0.95; }
@media (min-width: 40rem) { .home-title { font-size: 3.75rem; } }
.home-lead { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--cream) 85%, transparent); }
.home-sub { margin-top: 1rem; max-width: 36rem; font-size: 1rem; line-height: 1.5; color: color-mix(in oklab, var(--cream) 70%, transparent); }
.home-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .home-actions { flex-direction: row; flex-wrap: wrap; } }
/* order-last mx-auto w-44 max-w-full rounded-full sm:w-64 md:w-80 */
.home-logo { order: 9999; margin-inline: auto; width: 11rem; max-width: 100%; border-radius: 9999px; }
@media (min-width: 40rem) { .home-logo { width: 16rem; } }
@media (min-width: 48rem) { .home-logo { width: 20rem; } }
.home-features { padding-block: 3.5rem; }
.feature-grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* rounded-lg border-2 border-navy/10 bg-card p-5 transition-colors hover:border-gold */
.feature-card { border-radius: var(--radius-lg); border: 2px solid color-mix(in oklab, var(--navy) 10%, transparent); background: var(--card); padding: 1.25rem; transition: border-color 0.15s var(--ease); }
@media (hover: hover) { .feature-card:hover { border-color: var(--gold); } }
.feature-card-title { margin-top: 0.75rem; font-size: 1rem; line-height: 1.5; color: var(--foreground); }
.feature-card-text { margin-top: 0.25rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: var(--muted-foreground); }
.home-menu { padding-bottom: 3.5rem; }
.home-menu-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .home-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .home-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-menu-name { font-size: 1.5rem; line-height: calc(2 / 1.5); color: var(--gold); }
.home-menu-text { margin-top: 0.5rem; color: color-mix(in oklab, var(--cream) 80%, transparent); }
/* mt-6 inline-flex min-h-[44px] items-center font-display text-lg uppercase text-navy underline decoration-gold decoration-4 underline-offset-4 */
.home-menu-link {
    margin-top: 1.5rem; display: inline-flex; min-height: 44px; align-items: center;
    font-family: var(--font-display); font-size: 1.125rem; line-height: calc(1.75 / 1.125); text-transform: uppercase; color: var(--navy);
    text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 4px; text-underline-offset: 4px;
}
.new-here { background: color-mix(in oklab, var(--secondary) 25%, transparent); padding-block: 3.5rem; }
.new-here-text { margin-top: 0.75rem; max-width: 36rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.new-here-btn { margin-top: 1.5rem; min-height: 44px; }

/* ---------- Forms (book-us, contact) ---------- */
.field-label { font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; }
/* mt-1 w-full rounded-md border-2 border-input bg-card px-3 py-2 outline-none focus:border-gold */
.field-input {
    margin-top: 0.25rem; width: 100%; border-radius: var(--radius-md); border: 2px solid var(--input);
    background: var(--card); padding: 0.5rem 0.75rem; outline-style: none;
}
.field-input-lg { padding-block: 0.75rem; }
.field-input:focus { border-color: var(--gold); }
.field-input[aria-invalid="true"] { border-color: var(--destructive); }
.field-error { margin-top: 0.25rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: var(--destructive); }
.field-error a { text-decoration-line: underline; }
.turnstile { margin-bottom: 1rem; }
/* Honeypot: off-screen, out of the grid flow, invisible to people */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* book-us: section-x py-12 */
.book-intro { padding-block: 3rem; }
.check-grid { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* flex items-start gap-3 rounded-lg border-2 border-navy/15 bg-card p-4 */
.check-card { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--radius-lg); border: 2px solid color-mix(in oklab, var(--navy) 15%, transparent); background: var(--card); padding: 1rem; }
.check-card-icon { margin-top: 0.125rem; flex-shrink: 0; color: var(--gold); }
.check-card span { font-size: 1.125rem; line-height: 1.375; }
.good-for-heading { margin-top: 3rem; }
.good-for-grid { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .good-for-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .good-for-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* rounded-lg bg-navy p-5 text-cream shadow-md */
.good-for-card { border-radius: var(--radius-lg); background: var(--navy); padding: 1.25rem; color: var(--cream); box-shadow: var(--shadow-md); }
.good-for-label { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.25rem; line-height: calc(1.75 / 1.25); text-transform: uppercase; color: var(--gold); }
.good-for-note { margin-top: 0.25rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--cream) 80%, transparent); }
/* section-x grid gap-10 pb-14 md:grid-cols-[2fr_1fr] */
.book-form-wrap { display: grid; gap: 2.5rem; padding-bottom: 3.5rem; }
@media (min-width: 48rem) { .book-form-wrap { grid-template-columns: 2fr 1fr; } }
.book-form { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
    .book-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .book-form .span-2, .book-form-title { grid-column: span 2 / span 2; }
}
/* w-full ... sm:w-auto */
.btn-submit { width: 100%; }
@media (min-width: 40rem) { .btn-submit { width: auto; } }
/* h-fit rounded-lg bg-navy p-6 text-cream */
.talk-card { height: fit-content; border-radius: var(--radius-lg); background: var(--navy); padding: 1.5rem; color: var(--cream); }
.talk-card-title { font-size: 1.25rem; line-height: calc(1.75 / 1.25); color: var(--gold); }
.talk-card-line { margin-top: 0.75rem; }
.talk-card-email { margin-top: 0.25rem; word-break: break-all; }
.talk-card a { transition: color 0.15s var(--ease); }
@media (hover: hover) { .talk-card a:hover { color: var(--gold); } }
.talk-card-note { margin-top: 1rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--cream) 70%, transparent); }

/* contact: section-x grid gap-10 py-12 md:grid-cols-2 */
.contact-grid { display: grid; gap: 2.5rem; padding-block: 3rem; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-details { margin-top: 1rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
.contact-details > li { display: flex; align-items: center; gap: 0.75rem; }
.contact-details > li:not(:last-child) { margin-bottom: 1rem; }
@media (hover: hover) { .contact-details a:hover { text-decoration-line: underline; } }
.contact-booking-note { margin-top: 1.5rem; color: var(--muted-foreground); }
.contact-form { display: grid; gap: 1rem; }
.contact-submit { justify-self: start; }

/* ---------- Menu (routes/menu.tsx) ---------- */
/* overflow-hidden rounded-xl border-4 border-gold bg-navy p-4 sm:p-6 */
.menu-board { overflow: hidden; border-radius: var(--radius-xl); border: 4px solid var(--gold); background: var(--navy); padding: 1rem; }
@media (min-width: 40rem) { .menu-board { padding: 1.5rem; } }
.menu-board-name { text-align: center; font-family: var(--font-display); font-size: 1.25rem; line-height: calc(1.75 / 1.25); text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold); }
@media (min-width: 40rem) { .menu-board-name { font-size: 1.5rem; line-height: calc(2 / 1.5); } }
.menu-board-tag { margin-top: 0.5rem; text-align: center; font-family: var(--font-display); font-size: 0.875rem; line-height: calc(1.25 / 0.875); text-transform: uppercase; letter-spacing: 0.3em; color: color-mix(in oklab, var(--cream) 70%, transparent); }
.menu-board-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .menu-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* rounded-lg border-2 border-cream/15 bg-navy-deep p-6 sm:p-7 */
.menu-board-item { border-radius: var(--radius-lg); border: 2px solid color-mix(in oklab, var(--cream) 15%, transparent); background: var(--navy-deep); padding: 1.5rem; }
@media (min-width: 40rem) { .menu-board-item { padding: 1.75rem; } }
.menu-board-item-name { margin-top: 0.75rem; font-size: 1.5rem; line-height: calc(2 / 1.5); color: var(--gold); }
@media (min-width: 40rem) { .menu-board-item-name { font-size: 1.875rem; line-height: calc(2.25 / 1.875); } }
.menu-board-item-text { margin-top: 0.75rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--cream) 85%, transparent); }
/* mt-6 rounded-lg border-2 border-dashed border-gold/40 bg-navy-deep p-5 sm:p-6 */
.menu-toppings { margin-top: 1.5rem; border-radius: var(--radius-lg); border: 2px dashed color-mix(in oklab, var(--gold) 40%, transparent); background: var(--navy-deep); padding: 1.25rem; }
@media (min-width: 40rem) { .menu-toppings { padding: 1.5rem; } }
.menu-toppings h2 { font-size: 1.125rem; line-height: calc(1.75 / 1.125); letter-spacing: 0.025em; color: var(--gold); }
.menu-toppings p { margin-top: 0.5rem; color: color-mix(in oklab, var(--cream) 85%, transparent); }
.sides-heading { margin-top: 3rem; }
.sides-grid { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .sides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.side-name { margin-top: 0.75rem; font-size: 1.25rem; line-height: calc(1.75 / 1.25); color: var(--gold); }
.side-text { margin-top: 0.75rem; color: color-mix(in oklab, var(--cream) 80%, transparent); }
.menu-allergy { margin-top: 2rem; }
.menu-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .menu-actions { flex-direction: row; flex-wrap: wrap; } }

/* ---------- Find us (routes/find-us.tsx) ---------- */
/* mt-4 overflow-hidden rounded-lg border-2 border-navy/15 bg-navy/5 */
.map-placeholder { margin-top: 1rem; overflow: hidden; border-radius: var(--radius-lg); border: 2px solid color-mix(in oklab, var(--navy) 15%, transparent); background: color-mix(in oklab, var(--navy) 5%, transparent); }
.map-placeholder-inner {
    display: flex; min-height: 16rem; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(11, 31, 58, 0.06) 14px, rgba(11, 31, 58, 0.06) 28px);
    padding: 2rem; text-align: center;
}
.map-placeholder-title { font-family: var(--font-display); font-size: 1.25rem; line-height: calc(1.75 / 1.25); text-transform: uppercase; color: var(--navy); }
.map-placeholder-text { max-width: 24rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: var(--muted-foreground); }
.lead-muted { margin-top: 0.75rem; max-width: 42rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.findus-events { margin-top: 1.5rem; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .findus-events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.findus-event-name { margin-top: 0.75rem; font-size: 1.25rem; line-height: calc(1.75 / 1.25); color: var(--gold); }
.findus-event-text { margin-top: 0.5rem; color: color-mix(in oklab, var(--cream) 85%, transparent); }
.findus-book { margin-top: 1.5rem; min-height: 44px; }
.insta-panel { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.insta-panel p { font-size: 1.125rem; line-height: calc(1.75 / 1.125); }

/* ---------- About (routes/about.tsx) ---------- */
/* section-x flex flex-col gap-8 md:flex-row md:items-center */
.about-hero { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 48rem) { .about-hero { flex-direction: row; align-items: center; } }
.about-title { margin-top: 0; }
.about-logo { width: 10rem; border-radius: 9999px; }
@media (min-width: 48rem) { .about-logo { width: 12rem; } }
/* section-x max-w-3xl py-12 text-lg */
.prose-col { max-width: 48rem; padding-block: 3rem; }
.prose-lg { font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
.prose-h { margin-top: 2.5rem; }
.prose-p { margin-top: 0.75rem; color: color-mix(in oklab, var(--foreground) 85%, transparent); }
.prose-faint { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.about-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Gallery (routes/gallery.tsx) ---------- */
/* section-x grid gap-6 py-12 sm:grid-cols-2 */
.gallery-grid { display: grid; gap: 1.5rem; padding-block: 3rem; }
@media (min-width: 40rem) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* overflow-hidden rounded-lg border-2 border-gold/60 bg-navy shadow-lg */
.gallery-tile { overflow: hidden; border-radius: var(--radius-lg); border: 2px solid color-mix(in oklab, var(--gold) 60%, transparent); background: var(--navy); box-shadow: var(--shadow-lg); }
.gallery-logo-frame { display: flex; aspect-ratio: 4 / 3; align-items: center; justify-content: center; padding: 2.5rem; }
.gallery-logo { max-height: 100%; width: auto; max-width: 100%; border-radius: 9999px; }
.gallery-photo { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.gallery-caption { border-top: 2px solid color-mix(in oklab, var(--gold) 60%, transparent); background: var(--navy); padding: 0.75rem 1rem; }
.gallery-caption-title { display: block; font-family: var(--font-display); font-size: 1.125rem; line-height: calc(1.75 / 1.125); text-transform: uppercase; color: var(--gold); }
.gallery-caption-note { display: block; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--cream) 70%, transparent); }

/* ---------- What is a cheesesteak? ---------- */
.inside-grid { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .inside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .inside-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inside-label { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.25rem; line-height: calc(1.75 / 1.25); text-transform: uppercase; }
.inside-note { margin-top: 0.25rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: var(--muted-foreground); }
/* bg-navy py-12 text-cream */
.steps-band { background: var(--navy); padding-block: 3rem; color: var(--cream); }
.steps { margin-top: 1.5rem; }
.steps > li:not(:last-child) { margin-bottom: 1rem; }
.step { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
/* flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-gold font-display text-xl text-gold */
.step-num { display: flex; height: 2.5rem; width: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 9999px; border: 2px solid var(--gold); font-family: var(--font-display); font-size: 1.25rem; line-height: calc(1.75 / 1.25); color: var(--gold); }
.step-text { padding-top: 0.375rem; }
.whatis-actions { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .whatis-actions { flex-direction: row; } }
.btn-tall { min-height: 48px; }

/* ---------- Allergens ---------- */
.allergen-list > li:not(:last-child) { margin-bottom: 1rem; }
.allergen-p1 { margin-top: 2rem; }
.allergen-p2 { margin-top: 1rem; }

/* ---------- Legal pages (section-x max-w-3xl space-y-8 py-12 text-lg) ---------- */
.legal > :not(:last-child) { margin-bottom: 2rem; }
.legal-p { margin-top: 0.75rem; }
.legal-list { margin-top: 0.75rem; list-style: disc; padding-left: 1.5rem; }
.legal-list > li:not(:last-child) { margin-bottom: 0.5rem; }

/* ---------- 404 (NotFoundComponent) ---------- */
.not-found { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: var(--background); padding-inline: 1rem; }
.not-found-inner { max-width: 28rem; text-align: center; }
.not-found-code { font-size: 4.5rem; line-height: 1; font-weight: 700; color: var(--foreground); }
.not-found-title { margin-top: 1rem; font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 600; color: var(--foreground); }
.not-found-text { margin-top: 0.5rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); color: var(--muted-foreground); }
.not-found-action { margin-top: 1.5rem; }
.not-found-btn {
    display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md);
    background: var(--primary); padding: 0.5rem 1rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-weight: 500;
    color: var(--primary-foreground); transition: background-color 0.15s var(--ease);
}
@media (hover: hover) { .not-found-btn:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); } }

/* ---------- Legal pages: blocks used by the abbotts.events wording ---------- */
.legal-link { text-decoration-line: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.legal-h3 { margin-top: 1.25rem; font-size: 1.25rem; line-height: calc(1.75 / 1.25); }
.legal-list .legal-list { margin-top: 0.5rem; list-style: circle; }
.legal-box { margin-top: 1rem; }
.legal-box > p + p { margin-top: 0.25rem; }
.legal-note { font-style: italic; color: var(--muted-foreground); }