/* ============================================================
   LITZAS PIZZA — v3 stylesheet
   Locked palette: #ae9860 gold, warm black, off-white. That's it.
   Locked type: Anton (display), Alfa Slab One (slab),
                Oswald (labels), Inter (body).
   Floating pill nav, glass + depth + shadow.
   ============================================================ */

:root {
  /* The only three colors that matter */
  --gold:        #ae9860;
  --gold-bright: #c9b079;
  --gold-deep:   #8a7748;
  --gold-glow:   rgba(174, 152, 96, .14);

  /* Warm black system */
  --ink:    #0a0908;     /* deepest */
  --ink-2:  #14110d;     /* lifted panels */
  --ink-3:  #1c1814;     /* cards */
  --ink-4:  #261f18;     /* hover lift */
  --smoke:  #362c22;     /* rules */

  /* Warm off-white */
  --bone:   #f4ede0;
  --bone-2: #d9ccb3;
  --bone-3: #a89978;
  --paper:  #fbf6ec;

  /* Transparency layers — depth without color */
  --glass-1:    rgba(20, 17, 13, .55);
  --glass-2:    rgba(20, 17, 13, .72);
  --glass-3:    rgba(10, 9, 8, .88);
  --rule:       rgba(244, 237, 224, .12);
  --rule-soft:  rgba(244, 237, 224, .06);
  --rule-gold:  rgba(174, 152, 96, .28);

  /* Shadows — soft, deep, real */
  --shadow-sm:   0 4px 14px rgba(0, 0, 0, .28);
  --shadow-md:   0 16px 40px rgba(0, 0, 0, .42);
  --shadow-lg:   0 34px 90px rgba(0, 0, 0, .58);
  --shadow-gold: 0 8px 28px rgba(174, 152, 96, .26);
  --shadow-glow: 0 0 60px rgba(174, 152, 96, .18);

  /* Type */
  --display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --slab:    "Oswald", "Arial Narrow", system-ui, sans-serif;
  --label:   "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --max:        1240px;
  --gutter:     clamp(26px, 5vw, 56px);
  --nav-h:      82px;
  --radius:     18px;
  --radius-lg:  28px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--gold-glow), transparent 65%),
    radial-gradient(900px 600px at 0% 110%, rgba(174, 152, 96, .05), transparent 60%),
    var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
em {
  font-family: var(--slab);
  font-style: normal;
  font-weight: 400;
  color: var(--gold-bright);
}

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 9999;
  background: var(--gold); color: var(--ink);
  padding: 12px 16px;
  font-family: var(--label);
  text-transform: uppercase; letter-spacing: .12em;
  border-radius: var(--radius);
}
.skip-link:focus { left: 12px; }
:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   FLOATING PILL NAV — brand-continuous with Hires Big H
   ============================================================ */

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 32px);
  max-width: 1080px;
  background: var(--glass-2);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(244, 237, 224, .05);
  transition: all .5s var(--ease-out);
  animation: navSlideDown .8s var(--ease-out) .15s both;
}
.nav.scrolled {
  top: 10px;
  background: var(--glass-3);
  border-color: var(--rule-gold);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(174, 152, 96, .10),
    inset 0 1px 0 rgba(244, 237, 224, .05);
}
@keyframes navSlideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.scroll-progress {
  position: absolute;
  left: 18px; right: 18px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: .7;
  border-radius: 1px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px 10px 22px;
}
.nav-mark {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform .3s var(--ease-spring), opacity .3s;
  position: relative;
  line-height: 0;
}
.nav-mark:hover { transform: scale(1.04); opacity: .92; }
.nav-mark img {
  /* Real Litzas logo (LITZAS over PIZZA with rules). Recolored to cream
     (#f4ede0) at build time — see assets/images/brand/litzas-logo-cream.png.
     Source ratio is 394:137 ≈ 2.876:1. Width chosen to keep the wordmark
     readable on mobile + give room for nav links on desktop. */
  width: clamp(88px, 9.5vw, 130px);
  height: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 500;
  color: rgba(244, 237, 224, .68);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  padding: 6px 2px;
  transition: color .3s ease;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease-out);
  border-radius: 1px;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--bone); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  padding: 9px 20px !important;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--ink) !important;
  border: 0;
  font-weight: 700;
  letter-spacing: .12em !important;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(174, 152, 96, .35);
  transition: transform .25s var(--ease-out), background .25s, box-shadow .25s;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--gold-bright);
  color: var(--ink) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(174, 152, 96, .5);
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  border-radius: 50%;
  z-index: 101;
  position: relative;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  margin: 5px auto;
  background: currentColor;
  transition: transform .3s, opacity .3s;
  border-radius: 2px;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================================================
   HERO — cinematic, dark, depth-layered
   ============================================================ */

.cinema-hero {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: center;
  padding: clamp(140px, 16vw, 220px) var(--gutter) clamp(80px, 10vw, 130px);
}
.hero-bg,
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg img,
.page-hero-bg img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center 38%;
  filter: brightness(.5) saturate(1.05) contrast(1.1);
  transform: translate3d(0, 0, 0);
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 700px at 25% 40%, var(--gold-glow), transparent 60%),
    linear-gradient(90deg, rgba(10, 9, 8, .94), rgba(10, 9, 8, .5) 50%, rgba(10, 9, 8, .25)),
    linear-gradient(0deg, rgba(10, 9, 8, .9), rgba(10, 9, 8, .08) 55%, rgba(10, 9, 8, .55));
}

.hero-content {
  max-width: min(960px, 92vw);
  margin: 0 auto 0 0;
  position: relative;
}
.hero-content h1,
.page-hero h1 {
  margin: 0;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .92;
  color: var(--bone);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.hero-content h1 {
  max-width: 12ch;
  font-size: clamp(64px, 11vw, 148px);
  font-weight: 400;
}
.hero-content h1 .slab {
  display: block;
  font-family: var(--slab);
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--gold-bright);
  font-size: .42em;
  line-height: 1.1;
  margin-top: 12px;
  font-weight: 400;
}
.hero-content p:not(.eyebrow),
.page-hero p:not(.eyebrow) {
  max-width: 56ch;
  margin: 28px 0 0;
  color: rgba(244, 237, 224, .86);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.7;
}
.hero-content .button-row {
  margin-top: 40px;
}

.hero-note {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(32px, 6vw, 76px);
  display: grid;
  gap: 10px;
  padding: 22px 26px;
  border: 1px solid var(--rule-gold);
  background: var(--glass-1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.hero-note span {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--gold-bright);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-note span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--gold-bright);
}

/* Page hero — non-home pages */
.page-hero {
  min-height: 56vh;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: end;
  padding: clamp(140px, 16vw, 220px) var(--gutter) clamp(72px, 9vw, 120px);
  overflow: clip;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 600px at 20% 50%, var(--gold-glow), transparent 55%),
    linear-gradient(90deg, rgba(10, 9, 8, .92), rgba(10, 9, 8, .42) 60%),
    linear-gradient(0deg, rgba(10, 9, 8, .92), rgba(10, 9, 8, .1));
}
.page-hero-copy {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.page-hero h1 {
  max-width: 14ch;
  font-size: clamp(30px, 8vw, 88px);
  line-height: 1.05;
  font-weight: 400;
}
/* Sublines render as another uniform Anton line so every page hero matches the menu hero */
.page-hero h1 .slab {
  display: block;
  font-family: var(--display);
  font-size: 1em;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: .005em;
  text-transform: uppercase;
  margin-top: 0;
}
.shop-hero h1 { max-width: 9ch; }

/* Eyebrow — gold label above headlines */
.eyebrow {
  margin: 0 0 18px;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-bright);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-bright);
  opacity: .8;
}

.button-row,
.center-row,
.loc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.center-row { justify-content: center; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: all .35s var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn::after {
  content: "→";
  font-family: var(--body);
  font-size: 16px;
  letter-spacing: 0;
  transition: transform .3s var(--ease-out);
}
.btn:hover::after { transform: translateX(4px); }

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(174, 152, 96, .45);
}
.btn-ghost {
  background: rgba(244, 237, 224, .05);
  color: var(--bone);
  border: 1px solid var(--rule);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(244, 237, 224, .09);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-2px);
}
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-gold); }
.btn-gold:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(174, 152, 96, .45);
}

/* ============================================================
   MARQUEE — neighborhood ticker
   ============================================================ */

.marquee {
  overflow: hidden;
  background: var(--ink-2);
  border-block: 1px solid var(--rule-soft);
  padding: 18px 0;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }
.marquee > div {
  display: inline-flex;
  white-space: nowrap;
  animation: marqueeScroll 38s linear infinite;
  padding-right: 60px;
}
.marquee span {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 18px;
  color: var(--gold-bright);
  padding: 0 30px;
  position: relative;
}
.marquee span + span::before {
  content: "✦";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  opacity: .55;
  font-size: 9px;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   SECTIONS — generic layout
   ============================================================ */

section { position: relative; }
.dark-section { background: var(--ink); }
.warm-section { background: var(--ink-2); }
.page-band { padding: clamp(80px, 10vw, 140px) var(--gutter); }

.section-kicker {
  max-width: var(--max);
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: left;
}
.section-kicker.center { text-align: center; }
.section-kicker h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 76px);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .96;
  font-weight: 400;
  color: var(--bone);
  max-width: 18ch;
}
.section-kicker.center h2 { margin-inline: auto; }
.section-kicker p {
  max-width: 60ch;
  margin: 22px 0 0;
  color: rgba(244, 237, 224, .72);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.75;
}
.section-kicker.center p { margin-inline: auto; }

/* Location headline: force onto two lines and tighten the gap beneath it. */
.section-kicker.tight { margin-bottom: clamp(20px, 3vw, 32px); }
#loc-h .slab { display: block; }

/* ============================================================
   STICKY STORY — image + sticky copy
   ============================================================ */

.sticky-story {
  position: relative;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 90px);
  max-width: var(--max);
  margin: 0 auto;
  align-items: start;
}
.sticky-story .copy {
  position: sticky;
  top: 110px;
  align-self: start;
}
.sticky-story h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 76px);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .96;
  font-weight: 400;
  color: var(--bone);
}
.sticky-story h2 .slab {
  display: inline-block;
  font-family: var(--slab);
  color: var(--gold-bright);
  font-size: .8em;
  letter-spacing: 0;
  padding: 0 .08em;
  font-weight: 400;
}
.sticky-story p {
  margin: 24px 0 0;
  color: rgba(244, 237, 224, .78);
  font-size: 17px;
  line-height: 1.75;
}
.sticky-story p:first-of-type {
  font-family: var(--slab);
  font-size: 22px;
  line-height: 1.45;
  color: var(--bone);
  font-weight: 400;
}
.sticky-story .image-stack {
  display: grid;
  gap: 24px;
}
.sticky-story .image-stack figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  border: 1px solid var(--rule);
}
.sticky-story .image-stack figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(10,9,8,.5));
  z-index: 1;
}
.sticky-story .image-stack img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.sticky-story .image-stack figure:hover img { transform: scale(1.04); }
.sticky-story .image-stack figcaption {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 2;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: #f4ede0;
  background: rgba(10, 9, 8, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-gold);
}
.sticky-story .image-stack figure:nth-child(2) {
  margin-top: clamp(20px, 5vw, 80px);
}

/* ============================================================
   PILLAR CARDS — the four pillars of pizza
   ============================================================ */

.pillars {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.pillar {
  position: relative;
  padding: 32px 28px 28px;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, var(--gold-glow), transparent 50%);
  opacity: 0;
  transition: opacity .4s;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--rule-gold);
  box-shadow: var(--shadow-md);
}
.pillar:hover::before { opacity: 1; }
.pillar > * { position: relative; z-index: 1; }
.pillar-num {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 18px;
}
.pillar h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 400;
}
.pillar p {
  margin: 0;
  color: rgba(244, 237, 224, .7);
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   HIRES BRIDGE — same family, same Don
   ============================================================ */

.hires-bridge {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 68px) var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
}
.hires-bridge .copy {
  padding: 40px 36px;
  background: var(--ink-2);
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
@media (min-width: 620px) {
  .hires-bridge .copy { padding: 44px 44px; }
}
.hires-bridge .copy-text { min-width: 0; }
/* Mug floats to the side; the paragraph wraps around it so the card stays
   compact instead of stacking white space under the copy. */
.hires-body { margin-top: clamp(14px, 2.5vw, 20px); }
.hires-body::after { content: ""; display: block; clear: both; }
.hires-body > p { margin-top: 0; }
.hires-mug {
  float: right;
  width: clamp(116px, 30vw, 176px);
  height: auto;
  margin: 6px 0 8px clamp(18px, 4vw, 30px);
  filter: drop-shadow(0 10px 16px rgba(20, 12, 6, .30));
  pointer-events: none;
}
.hires-body .button-row { margin: clamp(18px, 3vw, 26px) 0 0; }
.hires-bridge .copy::before {
  content: "";
  position: absolute;
  top: -1px; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
.hires-bridge h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(32px, 4.5vw, 54px);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .98;
  color: var(--bone);
  font-weight: 400;
}
.hires-bridge h2 .slab {
  font-family: var(--slab);
  color: var(--gold-bright);
  font-size: .85em;
  font-weight: 400;
}
.hires-bridge p {
  margin: 14px 0 0;
  color: rgba(244, 237, 224, .78);
  font-size: 16px;
  line-height: 1.7;
}
.hires-bridge .button-row { margin-top: 28px; }
.hires-bridge figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hires-bridge figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* ============================================================
   MENU CARDS — pizza grid
   ============================================================ */

.menu-band {
  padding: clamp(60px, 8vw, 100px) var(--gutter);
}
.menu-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Home favorites — horizontal scroll-snap carousel. Cards are a fixed width and
   the row bleeds to the screen edges, so the next card peeks off-screen and
   invites a horizontal swipe. Scrollbar hidden; snap keeps cards aligned. */
.fav-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding: 8px var(--gutter) 6px;
  scroll-padding-left: var(--gutter);
}
.fav-scroll::-webkit-scrollbar { display: none; }
.fav-scroll > .pizza-card {
  flex: 0 0 auto;
  width: min(80vw, 320px);
  scroll-snap-align: start;
}
@media (min-width: 720px) {
  .fav-scroll > .pizza-card { width: 320px; }
}

/* Wide landscape banner image — mural in the story teaser, dough in the menu intro. */
.wide-banner {
  margin: clamp(24px, 3vw, 34px) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule);
}
.wide-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
/* A landscape figure inside an image-stack (e.g. the wall sign) — show it wide
   so nothing important gets cropped by the default portrait ratio. */
.sticky-story .image-stack figure.wide-fig img { aspect-ratio: 4 / 3; }

/* Sixty-years teaser — single column, mural sits inline between headline and copy. */
.sticky-story.story-solo { grid-template-columns: 1fr; max-width: 880px; }
.sticky-story.story-solo .copy { position: static; }
.sticky-story.story-solo .wide-banner { margin: clamp(26px, 3.5vw, 40px) 0; }

/* Don's portrait — inset in the story card, smaller than the gallery photos,
   floated so the copy wraps around it (same idea as the root-beer mug). */
.don-portrait {
  float: right;
  width: clamp(124px, 32vw, 178px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  height: auto;
  margin: 6px 0 14px clamp(18px, 4vw, 28px);
  border-radius: var(--radius);
  border: 1px solid var(--rule-cm);
  box-shadow: 0 14px 32px rgba(10, 9, 8, .16);
}

/* Menu intro — header beside the dough on desktop, dough beneath it on mobile. */
.menu-intro { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter) 0; }
.menu-intro .section-kicker { margin-bottom: 0; padding-inline: 0; }
.menu-dough { margin: clamp(22px, 4vw, 30px) 0 0; }
.menu-dough img { aspect-ratio: 4 / 3; }
@media (min-width: 860px) {
  .menu-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px); align-items: center; }
  .menu-dough { margin: 0; }
}
.pizza-card {
  position: relative;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.pizza-card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-gold);
  box-shadow: var(--shadow-md);
}
.pizza-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--ink);
}
.pizza-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.pizza-card:hover .pizza-photo img { transform: scale(1.06); }
.pizza-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,9,8,.6));
  pointer-events: none;
}
.pizza-photo-empty {
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 50% 50%, var(--gold-glow), transparent 60%),
    var(--ink-3);
  border-bottom: 1px solid var(--rule);
  display: grid;
  place-items: center;
  position: relative;
}
.pizza-photo-empty::after {
  content: "PHOTO IN APPROVAL";
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--gold-bright);
  opacity: .75;
}
.pizza-body {
  padding: 22px 24px 26px;
}
.pizza-name {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 400;
}
.pizza-card .toppings {
  margin: 0;
  color: rgba(244, 237, 224, .72);
  font-size: 14px;
  line-height: 1.55;
}
.pizza-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  background: var(--glass-3);
  color: var(--gold-bright);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-gold);
  backdrop-filter: blur(8px);
}

.menu-note {
  max-width: var(--max);
  margin: 36px auto 0;
  padding: 22px 28px;
  background: var(--ink-2);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  color: rgba(244, 237, 224, .65);
  font-size: 14px;
  line-height: 1.65;
}
.menu-note strong { color: var(--gold-bright); font-weight: 600; }

/* ============================================================
   LOCATIONS — cards with maps + deep links
   ============================================================ */

.loc-band { padding: clamp(60px, 8vw, 100px) var(--gutter); }
.loc-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 900px) { .loc-grid { grid-template-columns: 1fr 1fr; } }

/* Home-page location banner — wide establishing shot above the two cards. */
.loc-banner {
  max-width: var(--max);
  margin: 0 auto 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
.loc-banner img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 52%;
}
.loc-banner figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 26px 18px;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  color: var(--bone);
  background: linear-gradient(180deg, transparent, rgba(10, 9, 8, .8));
}
@media (max-width: 600px) {
  .loc-banner img { aspect-ratio: 4 / 3; }
  .loc-banner figcaption { font-size: 10px; letter-spacing: .14em; padding: 22px 18px 14px; }
}

/* The SLC card photo is a vertical sign shot — bias the crop upward so the
   Litzas / Hires sign stays in frame inside the 16:10 card window. */
.loc-card[data-loc="salt-lake-city"] .loc-photo img { object-position: center 15%; }

.loc-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto;
  transition: border-color .4s, box-shadow .4s, transform .4s var(--ease-out);
}
.loc-card:hover {
  border-color: var(--rule-gold);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.loc-photo {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--ink-3);
}
.loc-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.loc-card:hover .loc-photo img { transform: scale(1.05); }
.loc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,9,8,.7));
}
.loc-photo .badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 10px;
  background: var(--glass-3);
  color: var(--gold-bright);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-gold);
  backdrop-filter: blur(8px);
}
.loc-body { padding: 28px 28px 32px; }
.loc-body h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 32px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 400;
}
.loc-meta {
  margin: 0 0 18px;
  color: var(--gold-bright);
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 500;
}
.loc-address {
  margin: 0 0 8px;
  color: var(--bone);
  font-size: 15px;
  line-height: 1.5;
}
.loc-hours {
  margin: 0 0 22px;
  color: rgba(244, 237, 224, .68);
  font-size: 14px;
  line-height: 1.55;
}
.loc-actions { margin-top: 4px; }
.loc-actions .btn { padding: 12px 22px; font-size: 12px; }

/* Map embed wrapper — cinematic */
.loc-map {
  aspect-ratio: 16/9;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  background: var(--ink-3);
}
.loc-map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: brightness(.9) saturate(.85) hue-rotate(-8deg);
}
.loc-map-strip {
  display: grid;
  gap: 28px;
  max-width: var(--max);
  margin: 36px auto 0;
}
@media (min-width: 900px) { .loc-map-strip { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   SHOP — root beer + merch
   ============================================================ */

.shop-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.shop-card {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s, border-color .4s, box-shadow .4s;
}
.shop-card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-gold);
  box-shadow: var(--shadow-md);
}
.shop-card .photo {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--ink);
  display: grid;
  place-items: center;
}
.shop-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.shop-card .body { padding: 22px 24px 26px; }
.shop-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 400;
}
.shop-card p {
  margin: 0;
  color: rgba(244, 237, 224, .7);
  font-size: 14px;
  line-height: 1.55;
}

/* ============================================================
   BLOG
   ============================================================ */

.blog-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.post-card {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s, border-color .4s, box-shadow .4s;
  display: grid;
  grid-template-rows: auto 1fr;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-gold);
  box-shadow: var(--shadow-md);
}
.post-card .photo {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ink-3);
  position: relative;
}
.post-card .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.post-card:hover .photo img { transform: scale(1.05); }
.post-card .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,9,8,.55));
}
.post-card .body { padding: 26px 28px 30px; }
.post-card .meta {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10px;
  color: var(--gold-bright);
  margin: 0 0 10px;
}
.post-card h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: .015em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 400;
}
.post-card .excerpt {
  margin: 0 0 16px;
  color: rgba(244, 237, 224, .7);
  font-size: 15px;
  line-height: 1.6;
}
.post-card .more {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--gold-bright);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-card .more::after { content: "→"; transition: transform .3s; }
.post-card:hover .more::after { transform: translateX(3px); }

.post-article {
  max-width: 740px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--gutter);
}
.post-article .post-meta {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  color: var(--gold-bright);
  margin-bottom: 14px;
}
.post-article h1 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 64px);
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1;
  font-weight: 400;
  color: var(--bone);
}
.post-article .lead {
  font-family: var(--slab);
  font-size: 22px;
  line-height: 1.45;
  color: var(--bone);
  margin-bottom: 32px;
}
.post-article p { font-size: 17px; line-height: 1.75; color: rgba(244, 237, 224, .82); margin: 0 0 22px; }
.post-article h2 {
  font-family: var(--display);
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--bone);
  margin: 44px 0 14px;
  font-weight: 400;
}
.post-article a { color: var(--gold-bright); border-bottom: 1px solid var(--rule-gold); }
.post-article img { border-radius: var(--radius); margin: 28px 0; }
.post-article blockquote {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  color: var(--bone);
  font-family: var(--slab);
  font-size: 20px;
  line-height: 1.45;
}

/* ============================================================
   FORMS — jobs + catering (matches Hires structure)
   ============================================================ */

.form-band { padding: clamp(60px, 8vw, 100px) var(--gutter); }
.form-shell {
  max-width: 760px;
  margin: 0 auto;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.form-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
.form-intro {
  margin-bottom: 32px;
  color: rgba(244, 237, 224, .78);
  font-size: 16px;
  line-height: 1.7;
}
.form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}
.field { display: grid; gap: 6px; }
.field label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 500;
  color: var(--gold-bright);
}
.field label .req { color: var(--gold); margin-left: 4px; }
.field input,
.field select,
.field textarea {
  padding: 13px 16px;
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink-3);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { cursor: pointer; }
.field-note {
  font-size: 12px;
  color: rgba(244, 237, 224, .55);
  margin-top: 4px;
}
.form-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  align-items: center;
}
.form-status {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--bone-2);
}
.form-status.ok { color: var(--gold-bright); }
.form-status.err { color: #e07a5f; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--ink);
  border-top: 1px solid var(--rule-soft);
  padding: clamp(60px, 8vw, 100px) var(--gutter) clamp(24px, 4vw, 40px);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-mark {
  display: inline-block;
  line-height: 0;
  transition: opacity .3s;
}
.footer-mark:hover { opacity: .85; }
.footer-mark img {
  width: clamp(140px, 18vw, 180px);
  height: auto;
  display: block;
}
.footer-tagline {
  margin: 16px 0 0;
  color: rgba(244, 237, 224, .58);
  font-size: 14px;
  line-height: 1.6;
  max-width: 32ch;
}
.footer-col h4 {
  margin: 0 0 18px;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-bright);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: rgba(244, 237, 224, .72);
  transition: color .2s;
}
.footer-col a:hover { color: var(--bone); }
.footer-bottom {
  max-width: var(--max);
  margin: 50px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: rgba(244, 237, 224, .42);
}

/* ============================================================
   RESPONSIVE — mobile nav + small-screen tweaks
   ============================================================ */

@media (max-width: 780px) {
  .nav { width: calc(100% - 20px); top: 12px; }
  .menu-rails-slot { width: calc(100% - 20px); }
  .nav.scrolled { top: 8px; }
  .nav-toggle { display: block; }
  .nav-links {
    /* Mobile menu = solid dropdown card anchored beneath the pill.
       The pill is a transformed + backdrop-filtered ancestor, so it is the
       containing block for positioned descendants. position:fixed gets trapped
       in the ~64px pill box and the link column bleeds over the page (the
       long-standing "menu always showing" bug). Absolute positioning against
       that same pill (top:100%, left/right:0) is reliable, and a near-opaque
       background means the hero never shows through. */
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    font-size: 16px;
    background: linear-gradient(180deg, #141110 0%, #0b0a09 100%);
    border: 1px solid var(--rule-gold);
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(244, 237, 224, .05);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(.97);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity .26s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity .26s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
  }
  .nav-links a {
    padding: 14px 16px;
    border-radius: 12px;
    text-align: center;
    color: rgba(244, 237, 224, .82);
  }
  .nav-links a:not(.nav-cta)::after { display: none; }
  .nav-links a:active { background: rgba(244, 237, 224, .07); }
  .nav-cta { margin-top: 6px; text-align: center; }
  .nav-toggle { position: relative; z-index: 5; }
  .nav-cta { font-size: 14px !important; }

  .hero-note { right: 16px; left: 16px; bottom: 24px; padding: 16px 18px; }
  .sticky-story { grid-template-columns: 1fr; gap: 32px; }
  .sticky-story .copy { position: static; }

  .footer-inner { gap: 32px; }
}

/* ============================================================
   ANIMATIONS — gentle reveal on scroll
   ============================================================ */

.reveal {
  opacity: 0;
}
.reveal.is-visible {
  animation: reveal-rise .7s var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
.reveal.done {
  animation: none;
  opacity: 1;
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   MENU — size tabs, category jump, side cards (added 2026-05-18)
   Per house rule: CSS-only appends, no inline-HTML edits.
   ============================================================ */

/* Pizza price — show ONE size at a time */
.pizza-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.pizza-price .price-size {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--gold-bright);
  opacity: .85;
}
.pizza-price .price-amount {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--bone);
  letter-spacing: .02em;
}
.pizza-price.single {
  justify-content: flex-end;
}

/* Size-tabs bar — sticky pill row */
.size-tabs {
  position: sticky;
  top: 78px;
  z-index: 50;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto 28px;
  padding: 12px 16px;
  background: rgba(10, 9, 8, .82);
  backdrop-filter: blur(14px);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-pill);
  justify-content: center;
}
.size-tab {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(244, 237, 224, .68);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s var(--ease-out);
}
.size-tab:hover {
  color: var(--bone);
  border-color: var(--rule-gold);
}
.size-tab.active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* Menu category jump nav */
.menu-jump {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 12px var(--gutter);
  background: rgba(10, 9, 8, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
  justify-content: center;
}
.menu-jump a {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  color: rgba(244, 237, 224, .72);
  text-decoration: none;
  transition: all .2s var(--ease-out);
}
.menu-jump a:hover {
  color: var(--gold-bright);
  background: var(--glass);
}

/* Section heading inside menu-band */
.menu-section-head {
  max-width: var(--max);
  margin: 0 auto 28px;
  text-align: center;
}
.menu-section-head h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 400;
  margin: 0 0 8px;
}
.menu-section-head p {
  color: rgba(244, 237, 224, .68);
  font-size: 15px;
  margin: 0;
}

/* Side grid for salads / specials / drinks (single-price items) */
.side-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.side-card {
  background: var(--ink-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color .3s, transform .3s;
}
.side-card:hover {
  border-color: var(--rule-gold);
  transform: translateY(-2px);
}
.side-card.has-peek { position: relative; overflow: hidden; }
.side-card.has-peek .side-name { padding-right: 30%; }
.side-card.has-peek .toppings { padding-right: 30%; }
.side-name {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 6px;
  font-weight: 400;
}
.side-body .toppings {
  color: rgba(244, 237, 224, .68);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

/* Labeled multi-tier prices (salad sizes, garlic-bread slice/order, combos) */
.price-tiers {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-tiers li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 6px;
}
.price-tiers li:first-child { border-top: none; padding-top: 0; }
.tier-label {
  color: rgba(244, 237, 224, .72);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tier-amount {
  color: var(--gold-bright);
  font-family: var(--display);
  font-size: 16px;
  white-space: nowrap;
}

/* Build Your Own — one card: cheese photo + topping bar + a price row per tier. */
.byo-single { max-width: var(--max); margin: 0 auto; }
.byo-card { max-width: 760px; margin: 0 auto; padding: 26px 28px; }
.byo-card .side-name { margin-bottom: 16px; }
.byo-toppings { display: grid; gap: 12px; margin: 0 0 22px; }
.byo-topgroup { min-width: 0; }
.byo-toplabel { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--gink); margin-bottom: 3px; }
.byo-toplist { display: block; color: rgba(41, 39, 42, .64); font-size: 13px; line-height: 1.5; }
/* The corner pizza peek sits over the top-right; keep the first topping group
   (Sauces & Cheeses) clear of it so no text hides behind the photo. */
.byo-card.has-peek .byo-topgroup:first-child { padding-right: clamp(116px, 24%, 156px); }
.byo-price-head { font-family: var(--label); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: rgba(41, 39, 42, .5); margin: 0 0 10px; padding-top: 18px; border-top: 1px solid var(--rule-cm); }
.byo-tiers { margin: 0; }
.byo-tiers .tier-note { text-transform: none; letter-spacing: .01em; font-size: 11px; opacity: .68; }
.byo-tiers .pizza-price { display: contents; }
.byo-tiers .price-amount { font-size: 16px; white-space: nowrap; }
/* Full-width subheads and notes inside a side grid */
.side-grid .side-group {
  grid-column: 1 / -1;
  margin: 14px 0 0;
  font-family: var(--label);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.side-grid .side-group:first-child { margin-top: 0; }
.side-grid .side-note {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(244, 237, 224, .72);
  font-size: 14px;
  line-height: 1.6;
  max-width: 60ch;
}

/* ============================================================
   MENU POLISH — cascade, gold rail, tickets, depth (2026-06-09)
   ============================================================ */

/* Anchored sections land below the sticky rail + tabs */
#favorites, #build, #sides, #dressings, #specials, #drinks {
  scroll-margin-top: 140px;
}

/* Numbered ticket on each of the 24 favorites */
.pizza-no {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold-bright);
  background: rgba(10, 9, 8, .72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  box-shadow: var(--shadow-sm);
}
.pizza-no sup { font-size: 8px; letter-spacing: 0; }
.pizza-photo-empty { position: relative; }

/* Text-only menu cards — clean numbered gold-on-black tiles shown while real
   food photography is pending (SHOW_MENU_PHOTOS=false in render-site.mjs).
   The numbered ticket pill flows inline at the top of the body instead of
   floating over a photo. */
.pizza-card.text-only .pizza-body {
  padding: 26px 24px 24px;
}
.pizza-card.text-only .pizza-no {
  position: static;
  display: inline-block;
  margin: 0 0 14px;
}

/* True-count chips beside section heads */
.count-chip {
  display: inline-block;
  margin: 4px 0 16px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--rule-gold);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  white-space: nowrap;
}

/* Card depth — layered shadow at rest, gold-rimmed lift on hover */
.pizza-card {
  box-shadow: 0 1px 0 rgba(244, 237, 224, .05) inset, var(--shadow-sm);
}
.pizza-card:hover {
  box-shadow: var(--shadow-md), var(--shadow-gold);
}
.pizza-photo img {
  transition: transform .7s var(--ease-out);
}
.pizza-card:hover .pizza-photo img {
  transform: scale(1.045);
}
.side-card {
  box-shadow: 0 1px 0 rgba(244, 237, 224, .04) inset, var(--shadow-sm);
  transition: border-color .35s, transform .35s var(--ease-out), box-shadow .35s;
}
.side-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--shadow-gold);
}

/* Gold rail — scroll-spy underline tracks the section you're in */
.menu-jump a { position: relative; }
.menu-jump a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--gold-bright);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-out);
}
.menu-jump a.active { color: var(--gold-bright); }
.menu-jump a.active::after { transform: scaleX(1); }

/* Size tabs cast a shadow once actually stuck */
.size-tabs {
  transition: box-shadow .35s, background .35s;
}
.size-tabs.is-stuck {
  background: rgba(10, 9, 8, .92);
  box-shadow: var(--shadow-md);
  border-color: var(--rule-gold);
}

/* Price tick — register flip when the size changes */
@keyframes price-tick {
  0%   { opacity: 0; transform: translateY(7px); }
  100% { opacity: 1; transform: none; }
}
.price-amount.tick {
  animation: price-tick .32s var(--ease-spring);
}

@media (max-width: 640px) {
  .size-tabs { top: 64px; padding: 10px 12px; }
  .size-tab { padding: 8px 14px; font-size: 11px; }
  .menu-jump { padding: 10px var(--gutter); gap: 2px; }
  .menu-jump a { padding: 6px 10px; font-size: 11px; letter-spacing: .1em; }
}

/* ════════════════════════════════════════════════════════════════
   LITZAS — BRAND-GUIDE REBRAND   (gated: body.lz-rebrand = homepage)
   Source of truth: Litzas Pizza Brand Guide (EST. 1965 / SLC).
   Cream menu-paper page · charcoal text · purposeful dark bands
   (hero · menu-box · footer) · aged-gold accents · square print UI.
   Roll site-wide later = add class="lz-rebrand" to every page <body>.
   ════════════════════════════════════════════════════════════════ */
body.lz-rebrand {
  --paper:     #F7F4EC;   /* menu paper — main background + menu cards */
  --cream:     #EFE7D8;   /* warm cream — reverse text / alt panels */
  --whitewash: #E7E1D2;   /* shiplap support tone */
  --char:      #292728;   /* charcoal — primary text on cream */
  --steel:     #615B55;   /* secondary text */
  --black:     #11100E;   /* nav, footer, hero overlays, dark bands */
  --box:       #1F1D1D;   /* matte pizza-box panels / dark feature cards */
  --gold:      #B18B5C;   /* aged gold — rules, buttons, on-dark accents */
  --gold-ink:  #7C5A2E;   /* gold-dark — accessible gold text on cream */
  --copper:    #7A4E3D;
  --rule-cream:   rgba(41,39,40,.14);
  --rule-cream-2: rgba(41,39,40,.30);
  --rule-dark:    rgba(177,139,92,.32);
  --r: 2px;
  --disp:  "Bebas Neue","Oswald","PT Sans Narrow","Arial Narrow",sans-serif;
  --herit: "Roboto Slab",Rockwell,Georgia,serif;
  --lbl:   "Oswald","Arial Narrow",sans-serif;
  --bdy:   "Inter","Avenir Next",Arial,sans-serif;

  background: var(--paper);
  color: var(--char);
  font-family: var(--bdy);
}
body.lz-rebrand main { background: var(--paper); }

/* ---------- Type ---------- */
body.lz-rebrand h1,
body.lz-rebrand h2,
body.lz-rebrand h3 { font-family: var(--disp); font-weight: 400; line-height: .94; letter-spacing: .006em; color: var(--char); }
body.lz-rebrand .slab { font-family: var(--disp); font-weight: 400; color: var(--gold-ink); display: block; letter-spacing: .01em; }
body.lz-rebrand p { color: var(--char); }
body.lz-rebrand .eyebrow { font-family: var(--lbl); text-transform: uppercase; letter-spacing: .22em; font-weight: 600; font-size: 12px; color: var(--gold-ink); }

/* ---------- Buttons (square, condensed) ---------- */
body.lz-rebrand .btn { border-radius: var(--r); font-family: var(--disp); font-weight: 400; font-size: 18px; letter-spacing: .07em; padding: 13px 28px; box-shadow: none; border: 1px solid transparent; }
body.lz-rebrand .btn-primary { background: var(--gold); color: var(--black); border-color: var(--gold); }
body.lz-rebrand .btn-primary:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: var(--paper); transform: none; }
body.lz-rebrand .btn-ghost { background: transparent; color: var(--char); border-color: var(--rule-cream-2); }
body.lz-rebrand .btn-ghost:hover { background: var(--char); color: var(--paper); border-color: var(--char); transform: none; }
body.lz-rebrand .cinema-hero .btn-ghost,
body.lz-rebrand .dark-section:has(.menu-band) .btn-ghost { color: var(--paper); border-color: rgba(247,244,236,.42); }
body.lz-rebrand .cinema-hero .btn-ghost:hover,
body.lz-rebrand .dark-section:has(.menu-band) .btn-ghost:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }

/* ---------- Nav: solid black box-bar with gold hairline ---------- */
body.lz-rebrand .nav { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: none; transform: none; background: var(--black); border: 0; border-bottom: 1px solid var(--rule-dark); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
body.lz-rebrand .nav.scrolled { top: 0; background: var(--black); border-bottom-color: var(--gold); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
body.lz-rebrand .nav-inner { max-width: var(--max); width: 100%; margin: 0 auto; padding: 12px var(--gutter); }
body.lz-rebrand .nav-links { color: rgba(247,244,236,.78); font-family: var(--lbl); }
body.lz-rebrand .nav-links a { color: rgba(247,244,236,.78); }
body.lz-rebrand .nav-links a:hover,
body.lz-rebrand .nav-links a[aria-current="page"] { color: var(--paper); }
body.lz-rebrand .nav-links a:not(.nav-cta)::after { background: var(--gold); }
body.lz-rebrand .nav-cta { background: var(--gold); color: var(--black) !important; border-radius: var(--r) !important; font-family: var(--disp); font-size: 16px; letter-spacing: .07em !important; box-shadow: none; padding: 9px 20px !important; }
body.lz-rebrand .nav-cta:hover { background: var(--gold-ink); color: var(--paper) !important; transform: none; box-shadow: none; }
body.lz-rebrand .nav-toggle { color: var(--paper); }
body.lz-rebrand .scroll-progress { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
@media (max-width: 780px) {
  body.lz-rebrand .nav-links { background: linear-gradient(180deg, #1a1815 0%, #100f0d 100%); border: 1px solid var(--rule-dark); border-radius: var(--r); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
}

/* ---------- Hero: dark band, cream type, gold accents ---------- */
body.lz-rebrand .cinema-hero { background: var(--black); }
body.lz-rebrand .hero-content .eyebrow { color: var(--gold); }
body.lz-rebrand .hero-content h1 { color: var(--paper); }
body.lz-rebrand .hero-content h1 .slab { color: var(--gold); }
body.lz-rebrand .hero-content p { color: rgba(247,244,236,.86); }
body.lz-rebrand .hero-note { background: rgba(17,16,14,.6); border: 1px solid var(--rule-dark); border-radius: var(--r); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.lz-rebrand .hero-note span { color: var(--cream); font-family: var(--lbl); }

/* ---------- Marquee: slim dark rule band ---------- */
body.lz-rebrand .marquee { background: var(--black); border-block: 1px solid var(--rule-dark); }
body.lz-rebrand .marquee span { color: var(--cream); font-family: var(--lbl); }

/* ---------- Sections: cream by default; menu = matte-black band ---------- */
body.lz-rebrand .dark-section { background: var(--paper); color: var(--char); }
body.lz-rebrand .dark-section .eyebrow { color: var(--gold-ink); }
body.lz-rebrand .dark-section h2 { color: var(--char); }
body.lz-rebrand .dark-section h2 .slab { color: var(--gold-ink); }
body.lz-rebrand .dark-section p { color: var(--char); }
body.lz-rebrand .warm-section { background: var(--whitewash); color: var(--char); }
body.lz-rebrand .warm-section .eyebrow { color: var(--gold-ink); }
body.lz-rebrand .warm-section h2 { color: var(--char); }
body.lz-rebrand .warm-section h2 .slab { color: var(--gold-ink); }
body.lz-rebrand .warm-section p { color: var(--char); }
body.lz-rebrand .dark-section:has(.menu-band) { background: var(--box); color: var(--paper); }
body.lz-rebrand .dark-section:has(.menu-band) .eyebrow { color: var(--gold); }
body.lz-rebrand .dark-section:has(.menu-band) h2 { color: var(--paper); }
body.lz-rebrand .dark-section:has(.menu-band) h2 .slab { color: var(--gold); }
body.lz-rebrand .dark-section:has(.menu-band) .section-kicker p { color: rgba(247,244,236,.84); }

/* ---------- Size tabs: square segmented ---------- */
body.lz-rebrand .size-tabs { background: rgba(17,16,14,.5); border: 1px solid var(--rule-dark); border-radius: var(--r); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.lz-rebrand .size-tab { border-radius: var(--r); font-family: var(--lbl); color: rgba(247,244,236,.7); }
body.lz-rebrand .size-tab.active { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* ---------- Pizza cards: cream menu-paper, square ---------- */
body.lz-rebrand .pizza-card { background: var(--paper); border: 1px solid var(--rule-cream); border-radius: var(--r); box-shadow: none; }
body.lz-rebrand .pizza-card:hover { border-color: var(--gold); box-shadow: none; transform: none; }
body.lz-rebrand .pizza-no { color: var(--gold-ink); background: var(--paper); border: 1px solid var(--gold); border-radius: var(--r); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.lz-rebrand .pizza-name { color: var(--char); }
body.lz-rebrand .pizza-card .toppings { color: var(--steel); }
body.lz-rebrand .pizza-price { border-top: 1px solid var(--rule-cream); }
body.lz-rebrand .price-size { color: var(--steel); }
body.lz-rebrand .price-amount { color: var(--gold-ink); font-family: var(--disp); }

/* ---------- Location cards: cream, square, thin border ---------- */
body.lz-rebrand .loc-banner { border-radius: var(--r); border: 1px solid var(--rule-cream); box-shadow: none; }
body.lz-rebrand .loc-card { background: var(--paper); border: 1px solid var(--rule-cream); border-radius: var(--r); box-shadow: none; }
body.lz-rebrand .loc-card:hover { border-color: var(--gold); box-shadow: none; transform: none; }
body.lz-rebrand .loc-photo { border-radius: 0; }
body.lz-rebrand .loc-body h3 { color: var(--char); }
body.lz-rebrand .loc-meta { color: var(--gold-ink); }
body.lz-rebrand .loc-address { color: var(--char); }
body.lz-rebrand .loc-hours { color: var(--steel); }
body.lz-rebrand .badge { color: var(--cream); background: rgba(17,16,14,.78); border: 1px solid var(--rule-dark); border-radius: var(--r); }

/* ---------- Footer: matte black, gold rules ---------- */
body.lz-rebrand .footer { background: var(--black); border-top: 1px solid var(--rule-dark); color: var(--cream); }
body.lz-rebrand .footer h4 { color: var(--gold); font-family: var(--lbl); }
body.lz-rebrand .footer a { color: rgba(247,244,236,.74); }
body.lz-rebrand .footer a:hover { color: var(--paper); }
body.lz-rebrand .footer-tagline { color: rgba(247,244,236,.6); }
body.lz-rebrand .footer-bottom { color: rgba(247,244,236,.5); border-top-color: var(--rule-dark); }

/* Hires bridge — matte-black feature card on the warm band (light text) */
body.lz-rebrand .hires-bridge .copy { background: var(--box); border: 1px solid var(--rule-dark); border-radius: var(--r); }
body.lz-rebrand .hires-bridge .copy .eyebrow { color: var(--gold); }
body.lz-rebrand .hires-bridge .copy h2 { color: var(--paper); }
body.lz-rebrand .hires-bridge .copy h2 .slab { color: var(--gold); }
body.lz-rebrand .hires-bridge .copy p { color: rgba(247,244,236,.84); }
body.lz-rebrand .hires-bridge .copy .btn-ghost { color: var(--paper); border-color: rgba(247,244,236,.42); }
body.lz-rebrand .hires-bridge .copy .btn-ghost:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }

/* Square the photo figures (print-informed, per guide) */
body.lz-rebrand .hires-bridge figure,
body.lz-rebrand .hires-bridge figure img,
body.lz-rebrand .image-stack figure,
body.lz-rebrand .image-stack figure img { border-radius: var(--r); }


/* ============================================================
   DESIGN LIFT — 2026-06-26  ·  CREAM ALL THE WAY THROUGH
   Lighten the entire canvas to warm cream while keeping the
   current design (floating-pill nav, display fonts, rounded
   cards). Colour logic borrowed from the parked brand guide:
   charcoal text, accessible gold-on-cream, soft light cards.
   Only the photographic hero stays cinematic; everything below
   is warm. Additive + un-gated so it is easy to dial back.
   ============================================================ */
:root {
  --cream-1: #fbf6ec;            /* lightest band */
  --cream-2: #f1e9da;            /* deeper alternating band */
  --cream-3: #e7e1d2;            /* deepest — footer */
  --card-1:  #ffffff;            /* elevated cards */
  --char:    #29272a;            /* primary text on cream (AA) */
  --char-2:  rgba(41,39,42,.66); /* secondary text */
  --gink:    #7c5a2e;            /* accessible gold text on cream */
  --rule-cm: rgba(41,39,42,.14); /* hairline on cream */
}

/* Page base + html behind everything goes cream (no dark overscroll) */
html, body { background: var(--cream-1); }

/* ---- Marquee → lively gold band (first pop under the hero) ---- */
.marquee { background: var(--gold); border-block-color: var(--gold-deep); }
.marquee::before { background: linear-gradient(90deg, var(--gold), transparent); }
.marquee::after  { background: linear-gradient(270deg, var(--gold), transparent); }
.marquee span { color: var(--ink); }
.marquee span + span::before { color: var(--ink); opacity: .35; }

/* ---- Every content band is warm; two tones alternate for rhythm ---- */
.dark-section, .warm-section {
  color: var(--char);
  --bone: var(--char);        /* cream text  -> charcoal      */
  --gold-bright: var(--gink); /* bright gold -> gold-on-cream */
}
.dark-section { background: var(--cream-1); }
.warm-section { background: var(--cream-2); }
.dark-section h2, .warm-section h2,
.dark-section h3, .warm-section h3,
.dark-section p,  .warm-section p,
.dark-section .section-kicker h2, .warm-section .section-kicker h2,
.dark-section figcaption, .warm-section figcaption { color: var(--char); }
.dark-section .eyebrow, .warm-section .eyebrow { color: var(--gink); }
.dark-section .section-kicker p, .warm-section .section-kicker p { color: var(--char-2); }
.dark-section .btn-ghost, .warm-section .btn-ghost { color: var(--gink); border-color: var(--rule-cm); }
.dark-section .btn-ghost:hover, .warm-section .btn-ghost:hover { background: var(--char); color: var(--cream-1); border-color: var(--char); }
.dark-section figure img, .warm-section figure img,
.dark-section .loc-banner, .warm-section .loc-banner { box-shadow: 0 14px 40px rgba(10,9,8,.16); }

/* ---- Early hook: animated "since 1965" stat strip ---- */
.stat-strip { background: var(--cream-2); border-block: 1px solid var(--rule-cm); padding: clamp(34px,6vw,60px) 24px; }
.stat-strip .stats { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: center; }
.stat-strip .stat { position: relative; }
.stat-strip .stat + .stat::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:1px; height:54px; background:var(--rule-cm); }
.stat-strip .num { display:block; font-family:var(--display); font-size:clamp(46px,7vw,78px); line-height:1; color:var(--gink); letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.stat-strip .lbl { display:block; margin-top:10px; font-family:"Oswald","Inter",sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; color:var(--char-2); }
@media (max-width:640px){
  .stat-strip { padding-inline: 14px; }
  .stat-strip .stats { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .stat-strip .num { font-size: clamp(30px, 9.2vw, 48px); letter-spacing: 0; }
  .stat-strip .lbl { font-size: 9px; letter-spacing: .06em; margin-top: 6px; }
  .stat-strip .stat + .stat::before { left: -3px; height: 34px; }
}

/* ---- Pizza cards → light recipe cards ---- */
.pizza-card { background: var(--card-1); border: 1px solid var(--rule-cm); box-shadow: 0 10px 30px rgba(10,9,8,.07); }
.pizza-card:hover { border-color: var(--gold); }
.pizza-name { color: var(--char); }
.pizza-card .toppings, .pizza-desc, .pizza-card p { color: var(--char-2); }
.pizza-photo, .pizza-photo-empty { background: var(--cream-2); }
.pizza-no { background: #fff; color: var(--gink); border: 1px solid var(--gold); -webkit-backdrop-filter:none; backdrop-filter:none; }
.pizza-badge { background: var(--gold); color: var(--ink); }
.pizza-price { border-top-color: var(--rule-cm); }
.price-size { color: var(--char-2); }
.price-amount { color: var(--gink); }

/* size tabs + menu note + jump rail */
.size-tabs { background: rgba(41,39,42,.05); border:1px solid var(--rule-cm); }
.size-tab { color: var(--char-2); }
.size-tab.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.menu-note { background: var(--card-1); border:1px solid var(--rule-cm); color: var(--char); }
.menu-note strong { color: var(--gink); }
.menu-jump a { color: var(--char-2); }
.menu-jump a:hover, .menu-jump a.active { color: var(--gink); background: rgba(41,39,42,.05); }

/* ---- Location cards + map + shop cards ---- */
.loc-card { background: var(--card-1); border: 1px solid var(--rule-cm); box-shadow: 0 12px 34px rgba(10,9,8,.08); }
.loc-card:hover { border-color: var(--gold); }
.loc-photo { background: var(--cream-2); }
.loc-body h3 { color: var(--char); }
.loc-meta { color: var(--gink); }
.loc-address { color: var(--char); }
.loc-hours { color: var(--char-2); }
.loc-map { background: var(--cream-2); }
.shop-card { background: var(--card-1); border:1px solid var(--rule-cm); box-shadow: 0 12px 34px rgba(10,9,8,.08); }
.shop-card .photo { background: var(--cream-2); }

/* ---- Side / dressings / specials / drinks ---- */
.side-card { background: var(--card-1); border:1px solid var(--rule-cm); }
.side-name, .side-grid .side-group { color: var(--char); }
.side-grid .side-note { color: var(--char-2); }

/* ---- Blog post cards ---- */
.post-card { background: var(--card-1); border:1px solid var(--rule-cm); box-shadow: 0 12px 34px rgba(10,9,8,.08); }
.post-card h3 { color: var(--char); }
.post-card .post-meta, .post-card p { color: var(--char-2); }

/* ---- Story pillars + Hires bridge copy (soft light feature cards) ---- */
.pillar { background: var(--card-1); border:1px solid var(--rule-cm); box-shadow: 0 10px 30px rgba(10,9,8,.07); color: var(--char); }
.hires-bridge .copy { background: var(--card-1); border:1px solid var(--rule-cm); box-shadow: 0 12px 34px rgba(10,9,8,.08); }

/* ---- Contact form on cream ---- */
.form-shell { background: var(--card-1); border:1px solid var(--rule-cm); box-shadow: 0 12px 34px rgba(10,9,8,.08); }
.field label { color: var(--char); }
.field input, .field textarea, .field select { background: #fff; color: var(--char); border:1px solid var(--rule-cm); }
.field input:focus, .field textarea:focus, .field select:focus { background:#fff; border-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: rgba(41,39,42,.42); }

/* ---- Footer → deepest warm tone, gold rule, charcoal text ---- */
.footer { background: var(--cream-3); border-top: 1px solid var(--gold); color: var(--char); }
.footer h4 { color: var(--gink); }
.footer a { color: var(--char-2); }
.footer a:hover { color: var(--char); }
.footer-tagline, .footer-bottom { color: var(--char-2); }
.footer-bottom { border-top-color: var(--rule-cm); }

/* Blog post hero image (added with the design lift) */
.post-hero { margin: 28px 0 36px; border-radius: var(--radius, 14px); overflow: hidden; box-shadow: 0 18px 48px rgba(10,9,8,.16); }
.post-hero img { display:block; width:100%; height:auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ============================================================
   CONTRAST FIXES — 2026-06-26  (menu page review)
   The sticky jump rail + size-tabs kept dark backgrounds and the
   side-card description/price labels were never recoloured, so
   they read invisibly on the new cream canvas. Light them up.
   ============================================================ */

/* Sticky section jump rail → translucent cream bar */
.menu-jump {
  background: rgba(251,246,236,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-cm);
}
.menu-jump a { color: var(--char-2); }
.menu-jump a:hover, .menu-jump a.active { color: var(--gink); background: rgba(41,39,42,.06); }
.menu-jump a.active::after { background: var(--gink); }

/* Size-tabs → cream in BOTH resting and stuck states (was dark when stuck) */
.size-tabs {
  background: rgba(251,246,236,.86);
  border: 1px solid var(--rule-cm);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.size-tabs.is-stuck {
  background: rgba(251,246,236,.96);
  border-color: var(--rule-cm);
  box-shadow: 0 8px 24px rgba(10,9,8,.10);
}
.size-tab { color: var(--char-2); }
.size-tab:hover { color: var(--char); border-color: var(--rule-cm); }
.size-tab.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Side cards (salads / apps / breads / drinks) — readable text on white */
.side-body .toppings { color: var(--char-2); }
.side-group { color: var(--char); }
.side-note  { color: var(--char-2); }
.tier-label { color: var(--char-2); }
.price-tiers li { border-top-color: var(--rule-cm); }
.pizza-price .price-size { color: var(--char-2); }


/* ============================================================
   MENU RAILS — 2026-06-26  (dock INTO the pill, one box)
   At rest the rails are a dark glass bar under the hero. On
   scroll, JS moves them INSIDE the floating pill, which simply
   grows taller — corners pinned so they never change. A slot
   preserves the page space while the rails are docked.
   ============================================================ */

/* Pin the pill radius so corners are identical short OR tall */
.nav { border-radius: 28px; }

/* Slot holds the rails + their space in the page under the hero */
.menu-rails-slot { width: calc(100% - 32px); max-width: 1080px; margin: 18px auto 22px; }
/* Mobile: match the nav pill width exactly so the floating rails bar is the SAME
   width as the pill before it docks (smooth, no width jump). Placed after the base
   rule above so it wins the cascade over the earlier @media block. */
@media (max-width: 780px) { .menu-rails-slot { width: calc(100% - 20px); } }

/* Rails AT REST — dark glass bar under the hero. Same width + corner radius as
   the nav pill so the two read as one system when they stack. */
.menu-rails {
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--rule);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.menu-rails-inner { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; }

/* Rails DOCKED — inside the pill: no box of its own, just rows + a hairline */
.nav .menu-rails {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; box-shadow: none; border-radius: 0;
  margin: 0 10px;
  border-top: 1px solid rgba(244,237,224,.12);
}
.nav.is-docked-host { padding-bottom: 6px; }

/* Category rail — cream text on dark glass, horizontally scrollable */
.menu-rails .menu-jump {
  position: static; background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0; padding: 2px; gap: 2px;
  flex-wrap: nowrap; justify-content: flex-start;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.menu-rails .menu-jump::-webkit-scrollbar { display: none; }
.menu-rails .menu-jump a { color: rgba(244,237,224,.66); background: transparent; white-space: nowrap; flex: 0 0 auto; }
.menu-rails .menu-jump a:hover { color: var(--bone); background: rgba(244,237,224,.08); }
.menu-rails .menu-jump a.active { color: var(--gold-bright); background: rgba(174,152,96,.16); }
.menu-rails .menu-jump a.active::after { display: none; }

/* Size rail — blends in only on pizza sections */
.menu-rails .nav-sizes { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .42s var(--ease-out), opacity .3s var(--ease-out); }
.menu-rails.show-sizes .nav-sizes { max-height: 60px; opacity: 1; }
.menu-rails .size-tabs {
  position: static; background: transparent; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 2px; gap: 4px; justify-content: flex-start;
  overflow-x: auto; scrollbar-width: none;
}
.menu-rails .size-tabs::-webkit-scrollbar { display: none; }
.menu-rails .size-tab { color: rgba(244,237,224,.62); border: 1px solid rgba(244,237,224,.16); background: transparent; white-space: nowrap; flex: 0 0 auto; }
.menu-rails .size-tab:hover { color: var(--bone); border-color: var(--rule-gold); }
.menu-rails .size-tab.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Anchor jumps clear the taller docked pill */
body[data-page="/menu/"] .dark-section[id],
body[data-page="/menu/"] .warm-section[id] { scroll-margin-top: 210px; }
@media (max-width: 640px) {
  body[data-page="/menu/"] .dark-section[id],
  body[data-page="/menu/"] .warm-section[id] { scroll-margin-top: 200px; }
}

/* Smoother dock — grow the rails into the pill instead of snapping */
.nav .menu-rails { overflow: hidden; }
.nav.is-docked-host .menu-rails { animation: railsDockIn .34s var(--ease-out); }
@keyframes railsDockIn {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 130px; opacity: 1; }
}

/* Pizza peek — a wedge of the pie tucked into the empty top-right of text cards,
   clipped by the card edge with a soft shadow under the crust. */
.pizza-card.text-only { position: relative; overflow: hidden; }
.pizza-peek {
  position: absolute;
  top: 0; right: 0;
  width: clamp(150px, 44%, 205px);
  height: auto;
  transform: translate(30%, -42%);
  filter: drop-shadow(-2px 4px 4px rgba(12, 8, 4, .50)) drop-shadow(0 9px 15px rgba(20, 12, 6, .24));
  pointer-events: none;
  z-index: 1;
}
.pizza-card.text-only .pizza-name { padding-right: 32%; }
.pizza-card.text-only .toppings { padding-right: 32%; }

/* Menu hero — force each sentence onto its own line, sized so the longest fits */
#menu-h { font-size: clamp(30px, 8vw, 88px); line-height: 1.05; max-width: none; }
#menu-h .ln { display: block; white-space: nowrap; }

/* The "prices update / browse or jump" note, moved below the sticky rails */
.menu-rails-note {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2px var(--gutter) 10px;
  color: rgba(244, 237, 224, .52);
  font-size: 13px;
  text-align: center;
  letter-spacing: .01em;
}

/* Oswald accent (replaced the old Alfa Slab One) — give it presence */
.slab { font-weight: 600; }

/* ============================================================
   REVIEWS — real Google reviews (scroll + standout pull-quote)
   ============================================================ */
.rev-stars { display: inline-flex; color: #e6a92e; font-size: 15px; letter-spacing: 2px; line-height: 1; }
.rev-stars-empty { color: rgba(41,39,42,.18); }
.g-mark { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

/* Horizontal scroll of review cards (mirrors .fav-scroll) */
.review-scroll {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding: 10px var(--gutter) 16px;
  scroll-padding-left: var(--gutter);
}
.review-scroll::-webkit-scrollbar { display: none; }
.review-card {
  flex: 0 0 auto;
  width: min(82vw, 358px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 13px;
  background: var(--card-1, #fff);
  border: 1px solid var(--rule-cm, rgba(41,39,42,.14));
  border-radius: 20px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 28px rgba(10,9,8,.06);
}
.review-card blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: var(--ink, #16140f);
}
.review-card blockquote::before { content: "\201C"; }
.review-card blockquote::after { content: "\201D"; }
.review-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 4px;
  font-size: 13px;
  color: rgba(41,39,42,.62);
}
.review-meta .rev-who { font-weight: 600; color: rgba(41,39,42,.82); }
.review-meta .rev-dot { opacity: .5; }

/* Spacing for the reviews band on the locations page */
.reviews-band .review-scroll { margin-top: clamp(20px, 3vw, 30px); }

/* Auto-scroll review marquee — the "wall of love" */
.review-marquee {
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  padding: 10px 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.review-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-inline: var(--gutter);
  animation: marqueeScroll 140s linear infinite;
}
.review-marquee:hover .review-marquee-track,
.review-marquee:focus-within .review-marquee-track,
.review-marquee:active .review-marquee-track,
.review-marquee.is-paused .review-marquee-track { animation-play-state: paused; }
.reviews-band .review-marquee { margin-top: clamp(20px, 3vw, 30px); }

/* Customer Love grid — Story page */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  margin-top: clamp(24px, 3vw, 34px);
}
.review-grid .review-card { width: auto; }

/* Light ghost button for dark sections */
.btn-ghost-light { background: transparent; color: var(--cream-1, #fbf6ec); border: 1px solid rgba(251,246,236,.45); }
.btn-ghost-light:hover { background: var(--cream-1, #fbf6ec); color: var(--ink, #0a0908); border-color: var(--cream-1, #fbf6ec); }

@media (prefers-reduced-motion: reduce) {
  .review-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .review-marquee::-webkit-scrollbar { display: none; }
  .review-marquee-track { animation: none; width: max-content; }
}

/* Standout pull-quote — drops a single review between sections */
.review-standout {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) var(--gutter);
  text-align: center;
}
.review-standout-kicker {
  font-family: var(--font-condensed, inherit);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold, #b18b5c);
  margin: 0 0 14px;
}
.review-standout .rev-stars { font-size: 18px; margin-bottom: 14px; }
.review-standout blockquote {
  margin: 0;
  font-size: clamp(20px, 3.4vw, 27px);
  line-height: 1.34;
  font-weight: 500;
  color: var(--ink, #16140f);
  letter-spacing: -.01em;
}
.review-standout blockquote::before { content: "\201C"; }
.review-standout blockquote::after { content: "\201D"; }
.review-standout-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(41,39,42,.66);
}

/* ── Blog / story article: dark, readable text on cream ──────────────────────
   These pages were styled for a dark background (light --bone headings, gold
   body). The site is cream now, so remap the inherited vars to their cream
   equivalents — the same trick the content sections use — and override the one
   hardcoded light paragraph colour. */
.post-article {
  color: var(--char);
  --bone: var(--char);
  --gold-bright: var(--gink);
}
.post-article p { color: var(--char); }
.post-article .post-meta { color: var(--gink); }

/* Blog index / story-teaser cards: excerpt was light cream too. */
.post-card .excerpt { color: var(--char-2); }

/* ── Live open/closed status on location cards ───────────────────────────────
   Populated by js/main.js from window.__LITZAS against store-local time. Pill
   shows Open/Closed; muted line gives the next change. */
.loc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 16px; }
.loc-status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--label); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; line-height: 1;
  border: 1px solid var(--rule-cm); background: var(--cream-2); color: var(--char);
}
.loc-status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.loc-status-sub { font-size: 12.5px; color: var(--char-2); letter-spacing: .01em; }
.loc-status.is-open  .loc-status-pill { color: #246b2c; border-color: rgba(46,125,50,.34); background: rgba(46,125,50,.09); }
.loc-status.is-open  .dot { background: #2e7d32; box-shadow: 0 0 0 3px rgba(46,125,50,.16); }
.loc-status.is-closed .loc-status-pill { color: #9a2b22; border-color: rgba(176,42,30,.30); background: rgba(176,42,30,.07); }
.loc-status.is-closed .dot { background: #c0392b; }
.order-button.is-disabled { opacity: .82; }

/* (Removed the dark cap over the top — it read as a solid block on cream
   sections. The dark hero already covers the safe area at the top; when
   scrolled, the cream page bg now runs edge-to-edge behind the status bar.) */

/* Force one sentence per line in two-part display headlines (.slab headers). */
.hl-line { display: block; }
.hl-line.slab + .hl-line.slab { margin-top: 0; }

/* ── Order-online location picker ─────────────────────────────────────────── */
.order-picker{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,9,8,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.order-picker.open{display:flex}
.order-picker-card{position:relative;width:100%;max-width:420px;background:linear-gradient(180deg,#181410,#100c08);border:1px solid rgba(174,152,96,.42);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px 28px 30px;text-align:center;overflow:hidden}
.order-picker-card::before{content:"";position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,#c9b079,transparent)}
.order-picker-card h3{font-family:var(--display);font-size:30px;letter-spacing:.01em;color:#f4ede0;margin:0 0 6px}
.order-picker-card p{font-family:var(--body);color:rgba(244,237,224,.66);font-size:14px;margin:0 0 20px}
.order-picker-close{position:absolute;top:10px;right:16px;background:none;border:0;color:rgba(244,237,224,.6);font-size:30px;line-height:1;cursor:pointer}

/* Floating "Order Now" — always-on CTA, bottom-right, opens the location picker.
   Sits above content but below the picker overlay (z 1000) and the nav (z 100,
   top of screen, no overlap). Clears the iOS home indicator via safe-area inset. */
.order-fab {
  position: fixed;
  right: clamp(16px, 4vw, 24px);
  bottom: calc(clamp(16px, 4vw, 22px) + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  /* smaller pill; left padding clears the larger box that overhangs the top-left */
  padding: 9px 18px 9px 56px;
  font-family: var(--label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--gold);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(10, 9, 8, .30);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .25s var(--ease-out);
}
.order-fab:hover { transform: translateY(-3px); background: var(--gold-bright); box-shadow: 0 16px 40px rgba(10, 9, 8, .40); }
.order-fab:active { transform: translateY(-1px); }
.order-fab-icon { width: 19px; height: 19px; flex: none; display: block; }
@media (max-width: 520px) {
  .order-fab { padding: 8px 15px 8px 48px; font-size: 11px; letter-spacing: .1em; }
}

/* Litzas box icon: closed by default; a quick crossfade to the open box (lid up,
   pizza revealed) plays as an ambient peek and on hover/tap. Both frames are
   base-aligned so the swap reads as the lid lifting. */
.order-fab-icon.pbox { position: absolute; left: -28px; top: 50%; transform: translateY(-50%); width: 80px; height: 54px; overflow: visible; }
.pbox-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(10, 9, 8, .30)); }
.pbox-open  { opacity: 0; transform: scale(.96); transform-origin: 50% 92%; }
.pbox-closed { opacity: 1; }
.pbox-open   { animation: pboxOpenIn 6s ease-in-out 1.8s infinite; }
.pbox-closed { animation: pboxClosedOut 6s ease-in-out 1.8s infinite; }
@keyframes pboxOpenIn    { 0%, 80%, 100% { opacity: 0; transform: scale(.96); } 88%, 94% { opacity: 1; transform: scale(1); } }
@keyframes pboxClosedOut { 0%, 80%, 100% { opacity: 1; } 88%, 94% { opacity: 0; } }
.order-fab:hover .pbox-open,  .order-fab.is-opening .pbox-open  { animation: none; opacity: 1; transform: scale(1); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.order-fab:hover .pbox-closed, .order-fab.is-opening .pbox-closed { animation: none; opacity: 0; transition: opacity .22s var(--ease-out); }
@media (max-width: 520px) { .order-fab-icon.pbox { left: -24px; top: 50%; transform: translateY(-50%); width: 68px; height: 46px; } }
@media (prefers-reduced-motion: reduce) {
  .pbox-open, .pbox-closed { animation: none; }
  .pbox-open { opacity: 0; } .pbox-closed { opacity: 1; }
}
.order-picker-close:hover{color:var(--bone)}
.order-picker-options{display:flex;flex-direction:column;gap:12px}
.loc-picker-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:15px 18px;border-radius:var(--radius);border:1px solid var(--rule-gold);background:var(--gold);color:var(--ink);font-family:var(--slab);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease-out),background .15s}
.loc-picker-btn span{font-family:var(--body);font-weight:500;font-size:12px;text-transform:none;letter-spacing:0;color:rgba(10,9,8,.66)}
.loc-picker-btn:hover{background:var(--gold-bright);transform:translateY(-1px)}
.loc-picker-btn.is-disabled{background:transparent;color:rgba(244,237,224,.5);border-color:var(--rule);cursor:default}
.loc-picker-btn.is-disabled span{color:rgba(244,237,224,.4)}
.loc-picker-btn.is-disabled:hover{transform:none;background:transparent}

/* ── New photos pass (2026-06) ───────────────────────────── */
/* Google review mark is now an <img> (official updated logo) */
.g-mark { vertical-align: -2px; margin-right: 4px; }

/* Kitchen photo gallery — story page */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  max-width: 1100px;
  margin: clamp(36px, 5vw, 56px) auto 0;
}
.photo-gallery figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1;
  position: relative;
}
.photo-gallery img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.2s var(--ease-out);
}
.photo-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 720px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Full-height story figure (uncropped — e.g. the dough flip) */
.sticky-story .image-stack figure.full { aspect-ratio: auto; box-shadow: var(--shadow-lg); }
.sticky-story .image-stack figure.full img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* Menu pizza cards (2026-06-29): the printed menu has no record-numbers, the
   title reads a touch larger, and the corner pizza sits larger so it covers
   the card surface behind it instead of leaving a white gap. */
body[data-page="/menu/"] .pizza-name { font-size: 28px; }
.pizza-card.text-only .pizza-peek {
  width: clamp(150px, 46%, 205px);
  transform: translate(28%, -40%);
}
.pizza-card.text-only .pizza-name,
.pizza-card.text-only .toppings { padding-right: 38%; }


/* Menu cards (2026-06-29): on short descriptions the corner photo used to reach
   the price. Pin the price row to the card bottom and give a min height so the
   photo (anchored top-right) always clears it. */
.pizza-card.text-only { display: flex; min-height: 200px; }
.pizza-card.text-only .pizza-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.pizza-card.text-only .pizza-price { margin-top: auto; }
.side-card.has-peek { display: flex; min-height: 188px; }
.side-card.has-peek .side-body { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
.side-card.has-peek .price-tiers, .side-card.has-peek .pizza-price { margin-top: auto; }