/* ============================================================
   Bastoni — Italian & Mediterranean Kitchen · Newburgh, IN

   Design system: classic black · olive green · cream-white,
   with warm brown accents. Upscale trattoria, editorial, calm.
   Mobile-first; 375px is the priority experience.

   House rules encoded here:
   · Food imagery is ALWAYS square, white canvas, object-fit:
     contain — full plate visible. No rotate / skew / flip /
     perspective on food, including hover. Max hover = 0.985 → 1.
   · Motion is opacity + gentle vertical drift only, and every
     bit of it is disabled under prefers-reduced-motion.
   · AA contrast minimum. Olive is lightened for text on black
     and deepened for text on cream (see token comments).
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* ---- Neutrals: classic black → cream ---- */
  --black:      #0c0c0c;   /* hero / footer ground */
  --ink:        #121212;   /* dark section ground */
  --ink-2:      #1a1a1a;
  --ink-3:      #242424;

  --cream:      #f7f3ea;   /* page ground */
  --cream-2:    #f0ebdf;   /* banded sections (menu, socials) */
  --paper:      #fffdf8;   /* raised tiles / plates */
  --line:       #e3dbcb;   /* hairline on cream */
  --line-2:     #cec4ae;   /* stronger hairline / rules */
  --dot:        #c3b89c;   /* menu dot leaders */
  --line-dark:  rgba(247, 243, 234, 0.16); /* hairline on black */

  /* ---- Luxury brown family (token names kept for selector
     stability; values re-pointed from olive per client) ----
     --olive       deep espresso, ornament + borders  → 8.2:1 on cream
     --olive-deep  dark chocolate text on cream       → 10.8:1 AAA
     --olive-btn   primary CTA brown                  → 6.4:1 vs cream label
     --olive-light warm champagne text on black       → 9.7:1 AAA        */
  --olive:            #5f4128;
  --olive-deep:       #4a3018;
  --olive-btn:        #6f4e2a;
  --olive-btn-hover:  #5b3f21;
  --olive-light:      #d3b285;

  /* ---- Warm brown accents ----
     --brown  prices / accents on cream → 5.2:1 AA
     --tan    accents on black          → 10:1  AAA  */
  --brown:      #8a5a2e;
  --brown-deep: #6f4622;
  --tan:        #d9b48a;
  --terra:      #a4522e;   /* "closed" status on light → 4.9:1 AA */

  /* ---- Text ---- */
  --text:          #211e18; /* 14.8:1 on cream */
  --muted:         #5a5346; /*  6.8:1 on cream */
  --on-ink:        #f4efe3; /* 16.5:1 on black */
  --on-ink-muted:  #c3bba9; /* 10.3:1 on black */

  /* ---- Type families ---- */
  --font-display: "Cinzel", "Times New Roman", serif;          /* labels, wordmark */
  --font-serif:   "Cormorant Garamond", Georgia, serif;        /* display headings, dish names */
  --font-body:    "Jost", "Avenir Next", "Helvetica Neue", sans-serif;

  /* ---- Type scale (one scale, used everywhere) ---- */
  --fs-eyebrow: 0.75rem;                                   /* 12px, tracked caps */
  --fs-small:   0.875rem;                                  /* 14px */
  --fs-body:    1rem;                                      /* 16px floor — no tiny text */
  --fs-lede:    clamp(1.03rem, 1rem + 0.2vw, 1.14rem);
  --fs-name:    clamp(1.14rem, 1.09rem + 0.22vw, 1.26rem);  /* dish names */
  --fs-label:   clamp(0.95rem, 0.9rem + 0.3vw, 1.14rem);    /* menu category heads */
  --fs-sub:     clamp(1.35rem, 1.05rem + 1.4vw, 2rem);
  --fs-title:   clamp(2.15rem, 1.5rem + 3.1vw, 3.5rem);

  /* ---- Space & shape ---- */
  --header-h:    60px;
  --catnav-h:    56px;
  --actionbar-h: 70px;
  --shell-max:   1140px;
  --section-y:   clamp(3.5rem, 8vw, 7rem);
  --radius:      10px;
  --radius-sm:   6px;
  --shadow-soft: 0 14px 34px -26px rgba(18, 16, 12, 0.55);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 920px) {
  :root { --header-h: 76px; }
}

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* clearance for the fixed mobile action bar */
  padding-bottom: calc(var(--actionbar-h) + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--olive-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s var(--ease-out);
}
a:hover { color: var(--brown-deep); }

h1, h2, h3, h4 {
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout ---------- */
.shell {
  width: min(100% - 2.5rem, var(--shell-max));
  margin-inline: auto;
}

#menu, #gift, #visit, #socials { scroll-margin-top: calc(var(--header-h) - 1px); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ============================================================
   3. FOCUS & SKIP LINK
   Visible everywhere: olive-deep on light ground, olive-light
   on black ground. Never removed, never colour-only.
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--olive-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.hero :focus-visible,
.gift :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible,
.action-bar :focus-visible,
.dish-card.is-typographic :focus-visible {
  outline-color: var(--olive-light);
}
.btn:focus-visible { outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus { transform: none; color: var(--on-ink); }

/* ============================================================
   4. TYPE HELPERS
   ============================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive-light);       /* on black */
  margin: 0 0 1rem;
}
.eyebrow-dark { color: var(--olive-deep); }   /* on cream */

.section-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: inherit;
  margin: 0 0 0.5em;
}

/* ============================================================
   5. BUTTONS
   "Order Online" is the strongest element after the logo:
   solid olive, near-white label, no motion — colour only.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.7rem 1.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out);
}
.btn-small {
  min-height: 42px;
  padding: 0.4rem 1.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}

/* Primary — olive. Used by .btn-solid and .btn-gold so every
   "Order Online" / "Buy a Gift Card" reads as one CTA. */
.btn-solid,
.btn-gold {
  background: var(--olive-btn);
  border-color: var(--olive-btn);
  color: #fbf8f1;
}
.btn-solid:hover,
.btn-gold:hover {
  background: var(--olive-btn-hover);
  border-color: var(--olive-light);
  color: #fff;
}

/* Ghost — on black grounds */
.btn-ghost {
  border-color: rgba(244, 239, 227, 0.42);
  color: var(--on-ink);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--on-ink);
  color: var(--on-ink);
  background: rgba(244, 239, 227, 0.09);
}

/* Outline — on cream grounds */
.btn-outline {
  border-color: var(--line-2);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--olive-deep);
  color: var(--olive-deep);
  background: rgba(95, 65, 40, 0.07);
}

/* ============================================================
   6. HEADER — compact, sticky, hairline-quiet
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 234, 0.93);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
}
@media (min-width: 920px) { .brand-logo { height: 46px; } }
.brand-logo[hidden] { display: none; }

.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: none;               /* shown only if the logo image fails */
}
.brand.logo-fallback .brand-word { display: inline; }

.site-nav { display: none; gap: 2rem; }
.site-nav a {
  position: relative;
  text-decoration: none;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 1px;
  background: var(--olive-deep);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.site-nav a:hover { color: var(--olive-deep); }
.site-nav a:hover::after { opacity: 1; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--text);
  background: transparent;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.icon-link svg { width: 19px; height: 19px; }
.icon-link:hover { border-color: var(--olive-deep); color: var(--olive-deep); }

/* Hamburger (mobile only) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 42px; height: 42px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s var(--ease-out);
}
.nav-toggle-bar {
  width: 16px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.22s var(--ease-out);
}
.nav-toggle:hover { border-color: var(--olive-deep); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 419px) {
  .icon-link { display: none; }   /* Call lives in the action bar on small phones */
}
@media (min-width: 920px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
}

/* ============================================================
   7. FULL-SCREEN MOBILE MENU
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  background:
    radial-gradient(125% 80% at 50% 0%, rgba(95, 65, 40, 0.20) 0%, rgba(12, 12, 12, 0) 58%),
    var(--black);
  color: var(--on-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu[hidden] { display: none; }
body.menu-open { overflow: hidden; }

.mobile-menu-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}
.mobile-menu-head .brand-word {
  display: inline;
  color: var(--on-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.mobile-menu-close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--on-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.mobile-menu-close:hover { border-color: var(--olive-light); color: var(--olive-light); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: clamp(1.75rem, 8vh, 3.75rem) 0 2.25rem;
}
.mobile-nav a {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 7.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--on-ink);
  text-decoration: none;
  padding: 0.4rem 1rem;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.2s var(--ease-out);
}
.mobile-nav a:hover { color: var(--olive-light); }
.mobile-menu.is-open .mobile-nav a { opacity: 1; transform: none; }
.mobile-menu:not(.is-open) .mobile-nav a { opacity: 0; transform: translateY(10px); }
.mobile-nav a:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav a:nth-child(2) { transition-delay: 0.1s; }
.mobile-nav a:nth-child(3) { transition-delay: 0.15s; }
.mobile-nav a:nth-child(4) { transition-delay: 0.2s; }

.mobile-menu-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(100%, 20rem);
}
.mobile-menu-social {
  list-style: none;
  display: flex;
  gap: 0.9rem;
  margin: 2.25rem 0 1rem;
  padding: 0;
}
.mobile-menu-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--on-ink-muted);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.mobile-menu-social a:hover { border-color: var(--olive-light); color: var(--olive-light); }
.mobile-menu-social svg { width: 21px; height: 21px; }
.mobile-menu-address {
  color: var(--on-ink-muted);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ============================================================
   8. HERO — logo-first, black, generous
   ============================================================ */
.hero {
  background:
    radial-gradient(130% 95% at 50% 0%, rgba(95, 65, 40, 0.16) 0%, rgba(12, 12, 12, 0) 58%),
    var(--black);
  color: var(--on-ink);
  text-align: center;
  padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}
.hero-inner { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% auto;
  width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(159, 182, 115, 0.07), transparent 70%);
  pointer-events: none;
}
.hero-logo {
  margin: 0.25rem 0 1.15rem;
  display: flex;
  justify-content: center;
}
.hero-logo img {
  width: min(78vw, 540px);
  height: auto;
  display: block;
  will-change: transform;   /* JS applies a vertical-only parallax */
}
.hero-logo-word {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 9vw, 5.25rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #faf6ec;
}
.hero-logo.logo-fallback .hero-logo-word { display: inline; }

.hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: 1.2;
  color: var(--tan);
  margin: 0 0 1.5rem;
}
.hero-sub .amp { font-style: normal; }

.hero-copy {
  max-width: 34rem;
  margin: 0 auto 2.25rem;
  color: var(--on-ink-muted);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.75;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.75rem;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: var(--on-ink-muted);
  margin: 0;
}
.hero-tel { color: var(--on-ink); text-decoration-color: var(--olive-light); }
.hero-tel:hover { color: var(--olive-light); }
.hero-status .dot { color: var(--olive-light); }
@media (max-width: 559px) {
  /* the middot would strand at the end of a wrapped line */
  .hero-status .dot { display: none; }
  .hero-status { gap: 0.4rem 0.85rem; }
}

@media (max-height: 520px) {
  /* landscape phones: keep CTAs and status reachable */
  .hero { padding-block: 2rem; }
  .hero-logo img { width: min(42vh, 320px); }
}

/* Hero entrance — opacity + gentle rise only. Disabled below
   under prefers-reduced-motion. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes eyebrow-settle {
  from { opacity: 0; letter-spacing: 0.38em; }
  to   { opacity: 1; letter-spacing: 0.26em; }
}
.hero .eyebrow { animation: eyebrow-settle 1s var(--ease-out) both; }
.hero-logo     { animation: hero-rise 0.9s var(--ease-out) 0.1s both; }
.hero-sub      { animation: hero-rise 0.7s var(--ease-out) 0.3s both; }
.hero-copy     { animation: hero-rise 0.7s var(--ease-out) 0.4s both; }
.hero-ctas     { animation: hero-rise 0.7s var(--ease-out) 0.5s both; }
.hero-status   { animation: hero-rise 0.7s var(--ease-out) 0.6s both; }

/* Open / closed pill */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.open-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.open-status.is-open   { color: var(--olive-light); }
.open-status.is-closed { color: var(--tan); }
.visit .open-status.is-open   { color: var(--olive-deep); }
.visit .open-status.is-closed { color: var(--terra); }

/* ============================================================
   9. INTRO
   ============================================================ */
.intro { padding: var(--section-y) 0; }
.intro-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.intro-lede p {
  max-width: 38rem;
  color: var(--muted);
  font-size: var(--fs-lede);
  line-height: 1.8;
}
.intro-figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  max-width: 26rem;
  width: 100%;
  justify-self: center;
}
.intro-figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;   /* full plate, never cropped */
  background: #fff;
  display: block;
}
/* NOTE: atmosphere photography (storefront / dining room) is editorial,
   not a plate — the contain-on-white rule above applies to FOOD only.
   `.intro-figure-atmosphere` overrides live in section 18. */
@media (min-width: 760px) {
  .intro-grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .intro-pillars { grid-column: 1 / -1; }
  .intro-figure { justify-self: end; }
}

/* Pillars — editorial columns, not boxes */
.intro-pillars {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.intro-pillars li { border-bottom: 1px solid var(--line); }
.intro-pillars a {
  display: block;
  height: 100%;
  padding: 1.5rem 0 1.4rem;
  text-decoration: none;
  color: var(--text);
  transition: color 0.2s var(--ease-out);
}
.intro-pillars a:hover { color: var(--olive-deep); }
.pillar-num {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--brown);
}
.intro-pillars h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0.45rem 0 0.35rem;
}
.intro-pillars a:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.intro-pillars p { margin: 0; color: var(--muted); font-size: var(--fs-small); max-width: 32rem; }

@media (min-width: 700px) {
  .intro-pillars {
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .intro-pillars li { border-bottom: 0; }
  .intro-pillars a { padding: 1.6rem 0 0; }
}

/* ============================================================
   10. MENU — the calm centrepiece
   Generous spacing, tracked category labels, dot leaders,
   square white plates. No badges, no card chrome, no shadows.
   ============================================================ */
.menu-section {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--section-y) 0 clamp(3rem, 7vw, 5.5rem);
}
.menu-head { text-align: center; }
.menu-disclaimer {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 34rem;
  margin: 0 auto 1.4rem;
}
.menu-head-cta { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.menu-loading {
  text-align: center;
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  padding: 2.5rem 0;
}
.menu-noscript, .menu-error {
  text-align: center;
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- Sticky category nav ---------- */
.cat-nav {
  position: sticky;
  top: calc(var(--header-h) - 1px);
  z-index: 90;
  background: rgba(240, 235, 223, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.cat-nav-track {
  position: relative;   /* anchors the sliding active indicator */
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block: 0.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-nav-track::-webkit-scrollbar { display: none; }
.cat-link {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.4rem 0.85rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s var(--ease-out);
}
.cat-link:hover { color: var(--text); }
.cat-link.is-active { color: var(--olive-deep); }

/* single champagne underline that SLIDES between category links as
   the scrollspy changes (transform-only: translateX + scaleX on a
   100px basis bar — no layout shift). */
.cat-indicator {
  position: absolute;
  left: 0;
  bottom: 0.35rem;
  width: 100px;
  height: 2px;
  background: var(--olive-light);
  transform-origin: 0 50%;
  transform: translateX(0) scaleX(0);
  transition: transform 0.35s var(--ease-out);
  opacity: 0;
  pointer-events: none;
}
.cat-indicator.is-set { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cat-indicator { transition: none !important; } /* instant jump, no slide */
}

/* ---------- Category block ---------- */
.menu-cat {
  padding: clamp(2rem, 4vw, 3rem) 0 0.5rem;
  scroll-margin-top: calc(var(--header-h) + var(--catnav-h));
}
.menu-cat + .menu-cat {
  border-top: 1px solid var(--line);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.menu-cat-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.menu-cat-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.menu-cat-head .rule {
  flex: 1;
  height: 1px;
  min-width: 1.5rem;
  background: var(--line-2);
}
.menu-cat-count {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0.75;
}

/* ---------- Plated grid (categories with photos) ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Cards carry no chrome: the plate is the object, the type sits under it. */
.dish-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* Food plate: square, white, contained, never cropped or tilted. */
.dish-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.dish-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* rests a hair inset so the whole plate is visible;
     hover settles to exactly 1.0 — no zoom past full size,
     and never any rotation, skew or 3D. */
  transform: scale(0.985);
  transition: transform 0.4s var(--ease-out);
}
.dish-card:hover .dish-media img { transform: scale(1); }

.dish-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.1rem 0;
}
.dish-body > :first-child { min-width: 0; }
.dish-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-name);
  line-height: 1.25;
  letter-spacing: -0.003em;
  color: var(--text);
  margin: 0;
}
.dish-desc {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--muted);
  margin: 0.3rem 0 0;
  max-width: 34ch;
}
.dish-price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--brown);
  white-space: nowrap;
  margin-left: auto;
}

/* Image-free item: a recessive tinted panel carrying the olive
   sprig as a watermark. Deliberately quieter than a photo — it
   should read as an ornament, not as a missing image (and never
   as a wall of black tiles). */
.dish-card.is-typographic .dish-media {
  background: rgba(95, 65, 40, 0.05);
  border-color: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dish-card.is-typographic .dish-media {
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.75rem;
  text-align: center;
}
.dish-card.is-typographic .panel-sprig {
  width: clamp(40px, 28%, 116px);
  height: auto;
  aspect-ratio: 1 / 1;
  color: var(--olive);
  opacity: 0.28;
}
/* "Photo coming soon" — a whisper, never a badge.
   Typography for `.panel-caption` lives in section 18. */

/* Mobile (priority): the grid becomes a calm scannable list —
   84px plate, name left, price right, hairline separators.
   (No dot leader here: the plate eats the width and the leader
   comes out as 4–6 stubby dots. Photo rows get clean right
   alignment; the leader is reserved for full-width text rows.) */
@media (max-width: 559px) {
  .dish-card {
    flex-direction: row;
    align-items: center;
    gap: 0.95rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
  }
  .menu-grid .dish-card:last-child { border-bottom: 0; }
  .dish-media {
    flex: 0 0 84px;
    width: 84px;
    align-self: center;
  }
  /* an 84px plate has no room for a caption — the sprig carries it
     (the caption is hidden in section 18's matching media query) */
  .dish-card.is-typographic .dish-media { padding: 0.4rem; gap: 0; }
  .dish-card.is-typographic .panel-sprig { width: 34px; opacity: 0.32; }
  .dish-body {
    flex: 1 1 auto;
    padding: 0;
    gap: 0.8rem;
    align-items: baseline;
  }
}

@media (min-width: 560px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  }
}
@media (min-width: 900px) {
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
}

/* A grid where NO item has a photo (e.g. Seafood) would otherwise
   be a wall of empty plates — collapse it to the typographic rhythm. */
@supports selector(:has(*)) {
  .menu-grid:not(:has(.dish-card:not(.is-typographic))) {
    grid-template-columns: 1fr;
    gap: 0 3rem;
  }
  .menu-grid:not(:has(.dish-card:not(.is-typographic))) .dish-media { display: none; }
  .menu-grid:not(:has(.dish-card:not(.is-typographic))) .dish-card {
    flex-direction: row;
    padding: 0.6rem 0;
    border-bottom: 0;
  }
  .menu-grid:not(:has(.dish-card:not(.is-typographic))) .dish-body {
    flex: 1 1 auto;
    padding: 0;
    gap: 0.55rem;
  }
  /* same dot leader as the typographic lists it sits beside */
  .menu-grid:not(:has(.dish-card:not(.is-typographic))) .dish-body > :first-child {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.55rem;
  }
  .menu-grid:not(:has(.dish-card:not(.is-typographic))) .dish-body > :first-child::after {
    content: "";
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    height: 0.45em;
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.1px);
    background-size: 7px 7px;
    background-position: left bottom;
    background-repeat: repeat-x;
  }
  /* max-width must be released or the description would sit on the
     leader line instead of dropping below the name */
  .menu-grid:not(:has(.dish-card:not(.is-typographic))) .dish-desc {
    order: 1;
    flex: 1 0 100%;
    max-width: none;
  }
  @media (min-width: 760px) {
    .menu-grid:not(:has(.dish-card:not(.is-typographic))) { grid-template-columns: 1fr 1fr; }
  }
}

/* ---------- Typographic list (categories without photos) ---------- */
.menu-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
}
@media (min-width: 760px) {
  .menu-list { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.menu-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0;
}
.menu-row-thumb {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  object-fit: contain;      /* house rule: contain, never cover */
  background: #fff;
  border: 1px solid var(--line);
}
.menu-row-text { flex: 1; min-width: 0; }
.menu-row-line {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.menu-row-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-name);
  line-height: 1.3;
  letter-spacing: -0.003em;
  color: var(--text);
}
/* dot leader — fine, evenly spaced, sits on the baseline */
.menu-row-leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  height: 0.45em;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.1px);
  background-size: 7px 7px;
  background-position: left bottom;
  background-repeat: repeat-x;
}
.menu-row-price {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--brown);
  white-space: nowrap;
}
.menu-row-desc {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--muted);
  margin: 0.2rem 0 0;
  max-width: 42ch;
}

.menu-foot { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.menu-foot-alt {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 36rem;
  margin: 1.25rem auto 0;
}

/* ============================================================
   11. GIFT CARDS
   ============================================================ */
.gift {
  background:
    radial-gradient(115% 100% at 50% 100%, rgba(95, 65, 40, 0.22) 0%, rgba(12, 12, 12, 0) 62%),
    var(--ink);
  color: var(--on-ink);
  text-align: center;
  padding: var(--section-y) 0;
}
.gift-sprig {
  width: 44px; height: 44px;
  color: var(--olive-light);
  margin: 0 auto 1.25rem;
  opacity: 0.9;
}
.gift p {
  max-width: 32rem;
  margin-inline: auto;
  color: var(--on-ink-muted);
  font-size: var(--fs-lede);
}
.gift .btn { margin-top: 1.5rem; }

/* ============================================================
   12. VISIT — hours, address, map
   ============================================================ */
.visit { padding: var(--section-y) 0; }
.visit-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 820px) {
  .visit-grid { grid-template-columns: 1.05fr 1fr; gap: clamp(3rem, 6vw, 5rem); }
}
.visit-address {
  font-style: normal;
  font-size: var(--fs-lede);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.visit-address strong { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.9rem; }
.visit-note { font-size: var(--fs-small); color: var(--muted); }

.hours-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.hours-table { width: 100%; max-width: 26rem; }
.hours-table th, .hours-table td {
  text-align: left;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  font-size: var(--fs-body);
}
.hours-table td {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hours-table tr.is-today th,
.hours-table tr.is-today td {
  color: var(--olive-deep);
  font-weight: 600;
}
.hours-table tr.is-today th::after {
  content: " · today";
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95em;
  letter-spacing: 0.02em;
}
.hours-note { font-size: var(--fs-small); color: var(--muted); margin-top: 1.1rem; }

.visit-social {
  list-style: none;
  display: flex;
  gap: 0.65rem;
  margin: 1.75rem 0 0;
  padding: 0;
}
.visit-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--olive-deep);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.visit-social a:hover { border-color: var(--olive-deep); color: var(--brown-deep); }
.visit-social svg { width: 20px; height: 20px; }

.visit-map {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-2);
}
.visit-map iframe {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 420px);
  border: 0;
}

/* ============================================================
   13. SOCIALS
   ============================================================ */
.socials {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding: var(--section-y) 0;
}
.socials-head { text-align: center; }
.socials-copy {
  max-width: 34rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: var(--muted);
  font-size: var(--fs-lede);
}
.feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 560px) { .feed-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 900px) { .feed-grid { grid-template-columns: repeat(6, 1fr); } }
.feed-tile {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  transition: border-color 0.22s var(--ease-out);
}
.feed-tile:hover { border-color: var(--olive); }
.feed-tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;      /* full plate, white canvas */
  display: block;
  transform: scale(0.985);  /* settles to 1.0 on hover — nothing else */
  transition: transform 0.4s var(--ease-out);
}
.feed-tile:hover img { transform: scale(1); }
.feed-note {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
  margin: 1.6rem auto 1.8rem;
}
.socials-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer {
  background: var(--black);
  color: var(--on-ink-muted);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.site-footer a { color: var(--on-ink); text-decoration-color: rgba(159, 182, 115, 0.7); }
.site-footer a:hover { color: var(--olive-light); }
.footer-grid {
  display: grid;
  gap: 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
}
.footer-brand img {
  width: 160px;
  margin-bottom: 1rem;
}
.footer-brand p { font-size: var(--fs-small); line-height: 1.7; }
.footer-col h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--olive-light);
  margin-bottom: 1rem;
}
.footer-col p { margin-bottom: 0.5rem; font-size: var(--fs-small); }
.social-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.5rem;
}
.social-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: var(--fs-small);
  min-height: 34px;
}
.social-list svg { width: 20px; height: 20px; color: var(--olive-light); }
.social-list a:hover svg { color: var(--tan); }
.footer-base {
  padding-top: 1.75rem;
  font-size: 0.82rem;
  text-align: center;
  letter-spacing: 0.02em;
}
.footer-base p { margin-bottom: 0.4rem; }
.footer-fine { color: #9c9482; }   /* 6.6:1 on black */

/* ============================================================
   15. MOBILE ACTION BAR — thumb-friendly, safe-area aware
   ============================================================ */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 110;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.25fr;
  gap: 0.4rem;
  padding:
    0.5rem
    calc(0.7rem + env(safe-area-inset-right, 0px))
    max(0.5rem, env(safe-area-inset-bottom, 0px))
    calc(0.7rem + env(safe-area-inset-left, 0px));
  background: rgba(12, 12, 12, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-dark);
}
.action-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  min-height: 52px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--on-ink);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--line-dark);
  padding-inline: 0.25rem;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
              background-color 0.2s var(--ease-out);
}
.action-bar a:hover { border-color: var(--olive-light); color: var(--olive-light); }
.action-bar svg { width: 19px; height: 19px; flex: 0 0 auto; }
.action-bar .action-order {
  background: var(--olive-btn);
  border-color: var(--olive-btn);
  color: #fbf8f1;
  font-weight: 600;
}
.action-bar .action-order:hover {
  background: var(--olive-btn-hover);
  border-color: var(--olive-light);
  color: #fff;
}

@media (min-width: 860px) {
  .action-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ============================================================
   16. REVEAL — opacity + gentle rise, nothing else
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ============================================================
   17. REDUCED MOTION — hard stop
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* nothing moves, in any state */
  .reveal,
  .reveal.in-view,
  .mobile-menu .mobile-nav a,
  .hero .eyebrow,
  .hero-logo,
  .hero-sub,
  .hero-copy,
  .hero-ctas,
  .hero-status {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    letter-spacing: inherit;
  }
  .hero .eyebrow { letter-spacing: 0.26em; }
  .dish-media img,
  .feed-tile img,
  .dish-card:hover .dish-media img,
  .feed-tile:hover img {
    transform: none !important;
  }
  .skip-link { transition: none; }
}

/* ============================================================
   18. FINAL INTEGRATION ROUND (client directives)
   ============================================================ */

/* Intro figure now carries the real storefront photo — an
   atmosphere image, not a plate: natural framing, no white canvas. */
.intro-figure-atmosphere { max-width: 28rem; background: var(--cream-2); }
.intro-figure-atmosphere img {
  aspect-ratio: auto;
  object-fit: unset;
  background: transparent;
  height: auto;
}

/* "Photo coming soon" — refined small-caps caption inside the sprig
   panel. Only photo-enabled categories ever render these panels. */
.dish-card.is-typographic .dish-media {
  flex-direction: column;
  gap: 0.5rem;
}
.panel-caption {
  font-family: var(--font-body);
  font-variant: all-small-caps;
  font-weight: 500;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--olive-deep);
  opacity: 0.85;
}
@media (max-width: 559px) {
  /* the 84px mobile plate row has no room for a caption */
  .panel-caption { display: none; }
}

/* ============================================================
   19. MOTION SYSTEM — slow, luxurious timing (principles only,
   no copying). Classes are applied at runtime so a no-JS page
   stays fully static and visible.
   ============================================================ */

/* Base reveal: lengthened to the 1s / quint-out signature
   (rise distance amplified a notch per client — durations unchanged) */
.reveal {
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

/* Line-mask heading reveal: serif headings rise out of an
   overflow-hidden line. Slightly delayed so the section's
   eyebrow/backdrop fades first, then the heading, then children. */
.masked .mask-line { display: block; overflow: hidden; }
.masked .mask-inner {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  /* 0.3s hold so the section's typed eyebrow leads, then the title rises */
  transition: transform 1.1s var(--ease-out) 0.3s, opacity 0.9s var(--ease-out) 0.3s;
}
.masked.in-view .mask-inner { transform: none; opacity: 1; }

/* Atmosphere-only wipe entrance (storefront etc.).
   NEVER applied to food imagery — food keeps the plain
   fade/rise per the binding image-component spec. */
.wipe-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-out);
}
.wipe-reveal img {
  transform: scale(1.06);
  transition: transform 1.1s var(--ease-out);
}
.wipe-reveal.in-view { clip-path: inset(0 0 0 0); }
.wipe-reveal.in-view img { transform: scale(1); }

/* Nav underline: grows from the left, 1px olive */
.site-nav a::after {
  opacity: 1;
  height: 1px;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

/* Buttons: shade deepen + 2px lift — no scale, no bounce */
.btn { transition-duration: 0.3s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .masked .mask-inner {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .wipe-reveal { clip-path: none !important; transition: none !important; }
  .wipe-reveal img { transform: none !important; transition: none !important; }
  .site-nav a::after { transition: none !important; transform: scaleX(1); opacity: 0; }
  .site-nav a:hover::after { opacity: 1; }
  .btn:hover, .btn:active { transform: none !important; }
  .js-parallax { transform: none !important; }
}

/* ============================================================
   20. ITALY → NEWBURGH FLIGHT (visit section)
   One continuous camera timeline on a single world group:
   tight on Italy → pull out over the implied Atlantic → sweep
   west with the drawing flight path → dive onto the Newburgh
   pin, where it parks as the section's decorative header.
   Hand-drawn schematic geography only. Without JS (or with
   reduced motion) the base state below is the full static
   composition: whole world, path drawn, pin placed.
   ============================================================ */
.journey {
  /* timing tokens (mobile shortens the whole flight) */
  --cam-dur: 2.2s;
  --pin-delay: 1.45s;
  --pulse-delay: 1.95s;
  --label-delay: 1.6s;
  aspect-ratio: 1000 / 420;   /* box reserved — no layout shift */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 100% at 20% 45%, rgba(95, 65, 40, 0.06) 0%, rgba(95, 65, 40, 0) 55%),
    var(--cream-2);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.journey-svg { display: block; width: 100%; height: 100%; }
.journey-world {
  transform-box: view-box;
  transform-origin: 0 0;
}

/* world artwork */
.journey-meridian { fill: none; stroke: var(--line); stroke-width: 1; opacity: 0.6; }
.journey-land {
  fill: rgba(95, 65, 40, 0.07);
  stroke: var(--olive);
  stroke-width: 2;
  stroke-linejoin: round;
}
.journey-route-static {
  fill: none;
  stroke: var(--olive);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 0.4 3.2;  /* pathLength=100 → tidy dotted arc */
  opacity: 0.85;
}
.journey-dot { fill: var(--olive); transition: opacity 0.3s var(--ease-out); }
.journey-dots-built .journey-route-static { display: none; }
.journey-pin-glyph { fill: var(--olive-deep); }
.journey-pin-dot { fill: var(--cream); }
.journey-pulse { fill: none; stroke: var(--olive); stroke-width: 2; opacity: 0; }
.journey-pin {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.55s var(--ease-out) var(--pin-delay), opacity 0.3s linear var(--pin-delay);
}
.journey-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  fill: var(--olive-deep);
  text-anchor: middle;
}
.journey-italia { font-size: 10.5px; opacity: 0.75; }
.journey-newlabel { transition: opacity 0.7s var(--ease-out) var(--label-delay); }

/* staged states (classes applied by JS only, so no-JS stays static) */
.journey-stage:not(.play) .journey-world {
  /* first frame of the flight: camera tight on Italy */
  transform: translate(-152.8%, -41.4%) scale(2.4);
}
.journey-stage:not(.play) .journey-dot { opacity: 0; }
.journey-stage:not(.play) .journey-pin { opacity: 0; transform: translateY(-14px); }
.journey-stage:not(.play) .journey-newlabel { opacity: 0; }

/* the one continuous flight — no cuts, no fades between phases */
@keyframes journey-flight {
  0% {
    transform: translate(-152.8%, -41.4%) scale(2.4);
    animation-timing-function: cubic-bezier(0.5, 0, 0.4, 1);
  }
  38% {
    transform: translate(-13.2%, 6.3%) scale(1.02);
    animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1);
  }
  64% {
    transform: translate(10%, 16.7%) scale(1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  100% {
    transform: translate(22.8%, -26.1%) scale(1.7);
  }
}
.journey-stage.play .journey-world { animation: journey-flight var(--cam-dur) both; }
@keyframes journey-pulse {
  0%   { opacity: 0.7; transform: scale(0.5); }
  100% { opacity: 0;   transform: scale(1.7); }
}
.journey-stage.play .journey-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: journey-pulse 0.9s var(--ease-out) var(--pulse-delay) 1 both;
}

/* map reveal is gated behind the flight (JS-applied; falls back
   to the normal .reveal path without JS or with reduced motion) */
.visit-map.journey-gated {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.visit-map.journey-gated.map-in { opacity: 1; transform: none; }

@media (max-width: 759px) {
  .journey {
    --cam-dur: 1.2s;
    --pin-delay: 0.8s;
    --pulse-delay: 1.05s;
    --label-delay: 0.9s;
  }
  .journey-label { font-size: 24px; }
  .journey-italia { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-world, .journey-pin, .journey-dot, .journey-newlabel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .journey-pulse { animation: none !important; opacity: 0 !important; }
  .journey-route-static { display: block !important; }
  .visit-map.journey-gated { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   21. HERO OPENING FLIGHT — the Italy → Newburgh sequence moves
   to the top of the page as the opening moment, on the near-black
   hero ground, then parks as a dim backdrop behind the logo.
   Gated by the inline head script: html.flight-play runs the
   choreography once per session; html.flight-skip (repeat visit,
   reduced motion, or any storage error) and no-JS render the
   static parked backdrop with the normal hero entrance.
   The visit-section journey stays as a STATIC reprise (its
   animation classes are simply never applied any more).
   ============================================================ */
.hero-journey {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;          /* never blocks scroll/keyboard */
  opacity: 0.25;                 /* parked: subtle dim backdrop */
  transition: opacity 0.8s var(--ease-out);
  --hero-cam-dur: 2.2s;
  --pin-delay: 1.45s;
  --pulse-delay: 1.95s;
  --label-delay: 1.6s;
}
.hero-journey svg { display: block; width: 100%; height: 100%; }
/* base = parked frame (tight on the pin): what no-JS, flight-skip and
   reduced motion see; the flight animation overrides it while playing */
.hero-journey .journey-world { transform: translate(22.8%, -26.1%) scale(1.7); }
.hero-inner { z-index: 1; }

/* dark-ground palette */
.journey--dark .journey-land {
  stroke: var(--on-ink);
  fill: rgba(243, 237, 222, 0.05);
}
.journey--dark .journey-meridian { stroke: rgba(243, 237, 222, 0.14); opacity: 1; }
.journey--dark .journey-route-static { stroke: var(--olive-light); }
.journey--dark .journey-dot { fill: var(--olive-light); }
.journey--dark .journey-pulse { stroke: var(--olive-light); }
.journey--dark .journey-pin-glyph { fill: var(--on-ink); }
.journey--dark .journey-pin-dot { fill: var(--hero-black); }
.journey--dark .journey-label { fill: var(--on-ink); }
.journey--dark .journey-italia { fill: rgba(243, 237, 222, 0.6); }
.journey--dark .journey-sub {
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: var(--olive-light);
  transition: opacity 0.7s var(--ease-out) calc(var(--label-delay) + 0.15s);
}
.journey-star { fill: var(--on-ink); opacity: 0.75; }
.hero-comet circle { fill: var(--olive-light); }
.hero-comet .comet-head { fill: var(--on-ink); }
.hero-comet .comet-t1 { opacity: 0.65; }
.hero-comet .comet-t2 { opacity: 0.45; }
.hero-comet .comet-t3 { opacity: 0.28; }
.hero-comet { opacity: 0; }      /* JS drives it during the flight only */

/* choreography (flight-play only) */
html.flight-play .hero-journey:not(.parked) { opacity: 1; }
html.flight-play .hero-journey .journey-world {
  animation: hero-flight var(--hero-cam-dur) 0.15s both;
}
@keyframes hero-flight {
  0% {
    transform: translate(-152.8%, -41.4%) scale(2.4);
    animation-timing-function: cubic-bezier(0.6, 0, 0.55, 1);
  }
  40% {
    transform: translate(-13.2%, 6.3%) scale(1.02);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.65, 0.75); /* carries velocity through the sweep */
  }
  66% {
    transform: translate(10%, 16.7%) scale(1);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);        /* hard deceleration into the dive */
  }
  100% {
    transform: translate(22.8%, -26.1%) scale(1.7);
  }
}
html.flight-play .hero-journey:not(.play) .journey-dot { opacity: 0; }
html.flight-play .hero-journey:not(.play) .journey-pin { opacity: 0; transform: translateY(-14px); }
html.flight-play .hero-journey:not(.play) .journey-newlabel,
html.flight-play .hero-journey:not(.play) .journey-sub { opacity: 0; }
html.flight-play .hero-journey.play .journey-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: journey-pulse 0.9s var(--ease-out) var(--pulse-delay) 1 both;
}
html.flight-play .hero-journey.parked .hero-comet { opacity: 0 !important; }

/* Hero context only: the parked backdrop hides the journey's TEXT
   labels so they never double up behind the hero copy. They show
   during the flight (fade in with the pin), then fade out 600ms
   once parked, after the hand-off. Dots/meridians/stars/pin stay.
   The visit-section static reprise keeps its labels — scoped out. */
.hero-journey .journey-newlabel,
.hero-journey .journey-sub { opacity: 0; }
html.flight-play .hero-journey.play:not(.parked) .journey-newlabel,
html.flight-play .hero-journey.play:not(.parked) .journey-sub { opacity: 1; }
html.flight-play .hero-journey.parked .journey-newlabel,
html.flight-play .hero-journey.parked .journey-sub {
  transition: opacity 0.6s var(--ease-out) 0.5s;
}

/* hand-off: hero entrance waits for the flight, overlapping its
   final ~200ms. Defaults to 0s (normal entrance) for flight-skip,
   no-JS, and reduced motion. */
html.flight-play { --flight-shift: 2s; }
.hero .eyebrow  { animation-delay: var(--flight-shift, 0s); }
.hero-logo      { animation-delay: calc(var(--flight-shift, 0s) + 0.1s); }
.hero-sub       { animation-delay: calc(var(--flight-shift, 0s) + 0.3s); }
.hero-copy      { animation-delay: calc(var(--flight-shift, 0s) + 0.4s); }
.hero-ctas      { animation-delay: calc(var(--flight-shift, 0s) + 0.5s); }
.hero-status    { animation-delay: calc(var(--flight-shift, 0s) + 0.6s); }

@media (max-width: 759px) {
  html.flight-play { --flight-shift: 1.2s; }
  .hero-journey {
    --hero-cam-dur: 1.4s;
    --pin-delay: 0.95s;
    --pulse-delay: 1.2s;
    --label-delay: 1.05s;
  }
  .journey--dark .journey-sub { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-journey { opacity: 0.25 !important; transition: none !important; }
  .hero-journey .journey-world { animation: none !important; transform: translate(22.8%, -26.1%) scale(1.7) !important; }
  /* labels hidden in the hero's static parked state too (they win
     over the generic .journey-newlabel reduce rule by specificity) */
  .hero-journey .journey-newlabel,
  .hero-journey .journey-sub { transition: none !important; opacity: 0 !important; }
  .hero-comet { opacity: 0 !important; }
}

/* ============================================================
   22. BRAND OPENING MOMENT + TYPEWRITER LABELS
   Logo arrival: slow 1.05→1.0 scale settle plus one subtle light
   sweep clipped to the logo box. Small-caps eyebrows type
   character-by-character (hero eyebrow on the flight hand-off;
   section eyebrows on scroll, every load). Serif titles keep the
   mask-rise so the effects layer. All runtime-applied: no-JS and
   reduced motion get plain static text.
   ============================================================ */
@keyframes hero-logo-arrive {
  from { opacity: 0; transform: translateY(16px) scale(1.05); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-logo {
  position: relative;
  animation-name: hero-logo-arrive;
  animation-duration: 1.2s;
}
.logo-wrap { position: relative; display: inline-block; overflow: hidden; }
.logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(243, 237, 222, 0.26) 50%, transparent 58%);
  mix-blend-mode: screen;
  transform: translateX(-130%);
  animation: logo-sheen 1.2s cubic-bezier(0.4, 0, 0.3, 1) calc(var(--flight-shift, 0s) + 0.4s) 1 both;
}
@keyframes logo-sheen {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* typewriter: chars pre-occupy their space (visibility, not width),
   so nothing shifts; a thin caret tracks the last typed character */
.eyebrow.typed-mode { animation: none; opacity: 1; }
.type-line { position: relative; display: inline-block; }
.type-char { visibility: hidden; }
.type-char.is-typed { visibility: visible; }
.type-caret {
  position: absolute;
  top: 10%;
  bottom: 6%;
  left: 0;
  width: 1px;
  background: currentColor;
  opacity: 0;
}
.type-caret.is-on { opacity: 1; }
.type-caret.is-done { animation: caret-end 1.2s steps(1, end) forwards; }
@keyframes caret-end {
  0%   { opacity: 1; }
  25%  { opacity: 0; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-sheen { display: none !important; }
  .type-char { visibility: visible !important; }
  .type-caret { display: none !important; }
}