/* Al's Pizza Norridge — global stylesheet
   Mobile-first. Above-the-fold on mobile: brand callout → photo → H1 → sub → trust bar (NO CTAs).
   Sticky bar carries the CTAs. */

:root {
  /* Palette sampled from alspizzanorridge.com. --ink matches their dark solid brown;
     --wood-tone matches the average of their "Dark Wood Panels" background. */
  --ink: #3D2A1A;         /* their solid dark brown */
  --ink-2: #2A1D11;       /* darker step for cards on dark */
  --wood-tone: #5E442F;   /* dominant tone of the wood-panel background */
  --paper: #FFFFFF;
  --brand: #2E7D32;       /* button green */
  --brand-hot: #1B5E20;
  --brand-deep: #107000;  /* text/link green on paper */
  --brand-text: #7CC97F;  /* text/link green on brown, softer */
  --brown: #6B4423;       /* eyebrow/label warm brown */
  --brown-hot: #4E2F17;
  --brown-warm: #A67C52;  /* lighter warm brown for accents on dark */
  --cream: #F7E8C8;
  --char: #2A1D11;        /* alias — same as ink-2 */
  --fog: #5A3E28;         /* borders on brown, warm */
  --mute: #4A4642;         /* darkened helper text on white — >=7:1 AAA */
  --mute-dark: #D4CCC0;    /* helper text on brown/dark bg — >=8:1 */

  --fs-display: clamp(2.5rem, 8vw, 6rem);
  --fs-h1: clamp(2rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.5rem, 4vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 2.5vw, 1.5rem);
  --fs-body: clamp(1rem, 1.15vw, 1.125rem);
  --fs-small: 0.875rem;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;   --space-9: 6rem;
  --space-10: 8rem;

  --radius: 4px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

img, video, svg { display: block; max-width: 100%; height: auto; }
picture { display: block; }

a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--brand-hot); }
/* Button classes always win over any element defaults. Never let a{color} bleed. */
a.btn { text-decoration: none; }

/* Skip link for a11y */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--brand); color: var(--paper);
  padding: var(--space-3) var(--space-4);
  z-index: 100; text-decoration: none;
}
.skip-link:focus { top: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p.lede { font-size: 1.15rem; color: var(--mute); max-width: 60ch; }
ul, ol { padding-left: 1.25rem; }
ul li, ol li { margin-bottom: var(--space-2); }

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.section { padding-block: var(--space-7); }
@media (min-width: 900px) { .section { padding-block: var(--space-8); } }
.section--dark { background: var(--ink); color: #EDE8DF; }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }

.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark a:not(.btn) { color: var(--brand-text); }
.section--dark p, .section--dark li { color: #EDE8DF; }
.section--dark p.lede { color: #C9C3B9; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--fs-small);
  color: var(--cream);
  margin-bottom: var(--space-3);
  display: inline-block;
}
.section--paper .eyebrow, .section--cream .eyebrow { color: var(--brown); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  min-height: 48px;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:active { transform: translateY(1px); }
/* Primary = brand green with WHITE text (softer than black on bright green). */
.btn-primary { background: var(--brand); color: var(--paper); }
.btn-primary:hover { background: var(--brand-hot); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--paper); border: 2px solid var(--paper); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); }
.btn-black { background: var(--ink); color: var(--paper); }
.btn-black:hover { background: var(--char); color: var(--paper); }
/* Back-compat alias */
.btn-tomato { background: var(--brand); color: var(--paper); }
.btn-tomato:hover { background: var(--brand-hot); color: var(--paper); }

.card { background: var(--paper); color: var(--ink); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-sm); }
.card--dark { background: var(--char); color: var(--paper); border: 1px solid var(--fog); }

/* Header */
.als-header {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--fog);
  position: sticky; top: 0; z-index: 40;
}
.als-header__row {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-3);
  gap: var(--space-4);
}
.als-brand {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--paper); text-decoration: none;
}
.als-brand__name {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 1px; line-height: 1;
}
.als-brand__tag { font-size: 0.7rem; color: var(--brand-text); text-transform: uppercase; letter-spacing: 1px; }

.als-header__nav { display: none; }
.als-nav { list-style: none; display: flex; gap: var(--space-5); margin: 0; padding: 0; }
.als-nav a { color: var(--paper); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.als-nav a[aria-current="page"] { color: var(--brand-text); }
.als-nav a:hover { color: var(--brand-text); }
.als-header__ctas { display: none; }
.als-header__cta { display: none; }
/* Mobile-only click-to-call in header */
.als-header__phone {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--paper); text-decoration: none; font-weight: 700;
  font-size: 0.95rem; padding: 0.4rem 0.6rem;
  border-radius: 6px;
  transition: color .15s ease;
}
.als-header__phone:hover { color: var(--brand-text); }
@media (min-width: 900px) {
  .als-header__nav { display: block; }
  .als-header__ctas { display: inline-flex; gap: var(--space-3); }
  .als-header__cta { display: inline-flex; }
  .als-header__phone { display: none; }
}

/* Mobile menu toggle */
.als-menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--fog); border-radius: 6px;
  padding: 10px 8px; cursor: pointer;
}
.als-menu-toggle__bar { display: block; height: 2px; background: var(--paper); }
@media (min-width: 900px) { .als-menu-toggle { display: none; } }

/* Mobile menu drawer (starts collapsed via [hidden]) */
.als-mobile-menu {
  background: var(--char);
  border-top: 1px solid var(--fog);
  padding: var(--space-5);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.als-mobile-menu[hidden] { display: none; }
.als-mobile-nav { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.als-mobile-nav li { margin: 0; border-bottom: 1px solid var(--fog); }
.als-mobile-nav a {
  display: block; padding: var(--space-4) 0;
  color: var(--paper); font-weight: 700; text-decoration: none; font-size: 1.15rem;
  letter-spacing: 0.5px;
}
.als-mobile-nav a[aria-current="page"] { color: var(--brand-text); }
.als-mobile-menu__ctas { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.als-mobile-menu__info { color: #C9C3B9; font-size: 0.95rem; }
.als-mobile-menu__info h4 {
  color: var(--brand-text); font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.75rem;
  margin: var(--space-4) 0 var(--space-2);
}
.als-mobile-menu__info p { color: #EDE8DF; margin-bottom: 0; }

/* Hero — Al's actual "Dark Wood Panels" texture from their site + Al's original
   "Home of Chicago's / Thinnest Pizza / The Pizza King" brush headline layout.
   Overlay is a flat black at ~48% so wood grain reads but text stays legible. */
.als-hero {
  background-color: var(--wood-tone);
  background-image:
    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.62)),
    url('../img/wood.jpg');
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center center;
  color: var(--paper);
  padding-block: var(--space-6) var(--space-6);
  border-bottom: 3px solid var(--brown);
}

/* MOBILE: pizza (with ingredient overlays) on top, brush headline below, trust bar below. */
.als-hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

/* Pizza — oblong WebP with a soft-feathered elliptical mask; natural camera-angle look.
   Structure: outer <figure> holds spacing + caption, inner .frame is the anchor for absolute overlays
   so ingredient positions are relative to the pizza image ONLY (not the padded container). */
.als-hero__pizza {
  margin: 0 auto;
  width: min(94vw, 520px);
  color: var(--paper);
}
.als-hero__pizza-frame {
  position: relative;
  aspect-ratio: 1100 / 739;
}
.als-hero__pizza-img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
/* Ingredient overlays — big, tucked right against the pizza edge like Al's site */
.als-hero__ing {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
  pointer-events: none;
}
.als-hero__ing--mushrooms { top: -14%;  right: 2%;    width: 30%; transform: rotate(6deg); }
.als-hero__ing--garlic    { top: 32%;   right: -8%;   width: 26%; transform: rotate(-4deg); }
.als-hero__ing--tomato    { bottom: 6%; right: -4%;   width: 22%; transform: rotate(4deg); }
.als-hero__ing--spoon     { bottom: -14%; right: 12%; width: 36%; transform: rotate(-6deg); }

.als-hero__caption {
  display: block;
  margin-top: 0.5rem;      /* mobile: minimal — spoon overhang is small at narrow widths */
  padding-inline: var(--space-4);
  text-align: center;
  color: var(--paper);
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
@media (min-width: 900px) {
  .als-hero__caption { margin-top: 3rem; }   /* desktop: bigger pizza, spoon hangs further */
}
.als-hero__caption-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
}
.als-hero__caption-ing {
  display: block;
  font-size: 0.82rem;
  color: var(--cream);
  margin-top: 0.15rem;
}

/* Brush headline — Al's exact Rushink typeface + his exact color #1C8A43. */
.als-hero__brush {
  font-family: var(--font-brush);
  font-weight: 400;
  color: var(--paper);
  margin: 0;                        /* caption is now inside the pizza figure — no reserved gap */
  line-height: 1;
  text-shadow: 0 3px 10px rgba(0,0,0,.6);
  text-align: center;
  letter-spacing: 0;
}
.als-hero__brush span {
  display: block;
  font-size: clamp(2.75rem, 11vw, 3.75rem);
  line-height: 1;
  margin: 0.1em 0;                  /* tight line-spacing */
}
/* Only enforce single-line phrases at desktop widths where they always fit;
   on mobile allow natural wrap so the text can be BIG without overflowing. */
@media (min-width: 720px) {
  .als-hero__brush span { white-space: nowrap; }
}
.als-hero__brush .w-green { color: var(--brand-green-solid); }
.als-hero__brush .w-white { color: var(--paper); }

/* DESKTOP: 2-col grid — pizza (with ingredients) left, brush headline right. */
@media (min-width: 900px) {
  .als-hero { padding-block: var(--space-9); }
  .als-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-8);
    align-items: center;
  }
  .als-hero__pizza { width: min(48vw, 560px); }
  .als-hero__brush { text-align: left; margin: 0; }
  .als-hero__brush span { font-size: clamp(2.5rem, 5.5vw, 4.75rem); }
  .als-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); }
}


/* Inline trust bar (below hero text, above the fold on mobile).
   Cream labels for AAA contrast on brown. Three items: full Hours, Visit + directions, Everyday deal. */
.als-trust-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  background: var(--char);
  border: 1px solid var(--fog);
  border-radius: 8px;
  padding: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 720px) {
  .als-trust-inline { grid-template-columns: 1fr; gap: var(--space-4); }
  .als-trust-inline__item + .als-trust-inline__item { padding-top: var(--space-4); border-top: 1px solid var(--fog); }
}
.als-trust-inline__item {
  display: flex; flex-direction: column; gap: 0.25rem;
  min-width: 0;
}
.als-trust-inline__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.als-trust-inline__label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--cream); font-weight: 700;
}
.als-trust-inline__value {
  color: var(--paper);
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none;
}
.als-trust-inline__value--balance { text-wrap: balance; }
.als-trust-inline__inline {
  font-size: 0.75rem; font-weight: 700;
  text-decoration: none;
}
.als-trust-inline__inline--open { color: #7CE38A; }
.als-trust-inline__inline--closed { color: #F0A868; }
.als-trust-inline__inline--link { color: var(--brand-text); }
.als-trust-inline__inline--link:hover { color: var(--paper); text-decoration: underline; }

/* Popular items — forced 3-column grid on desktop so 6 items balance as 2 rows of 3.
   Never leave 4+2 or other unbalanced layouts. */
.als-popular {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .als-popular { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .als-popular { grid-template-columns: repeat(3, 1fr); } }

/* Signature dish cards */
.als-dish { background: var(--paper); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.als-dish__photo { aspect-ratio: 4/3; background: #EEE9DE; overflow: hidden; }
.als-dish__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.als-dish:hover .als-dish__photo img { transform: scale(1.04); }
.als-dish__body { padding: var(--space-5); }
.als-dish__body h3 { margin: 0 0 var(--space-2); }
.als-dish__body p { color: var(--mute); margin: 0; }
.als-dish__row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: var(--space-2); }
.als-dish__row h3 { margin: 0; }
.als-dish__price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

/* Everyday deal band */
.als-deal {
  background: var(--ink);
  border-top: 1px solid var(--fog);
  border-bottom: 1px solid var(--fog);
}
.als-deal__inner {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block: var(--space-4);
  flex-wrap: wrap;
}
.als-deal__tag {
  background: var(--brand); color: var(--paper);
  padding: 0.25rem 0.6rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  font-size: 0.75rem;
  border-radius: 4px;
}
.als-deal__text {
  color: var(--paper);
  margin: 0;
  flex: 1;
  font-size: 1rem;
}
.als-deal__text strong { color: var(--brand-text); }
@media (max-width: 620px) {
  .als-deal__inner { flex-direction: column; align-items: flex-start; }
  .als-deal .btn { width: 100%; }
}

/* Lean page head — used on every non-home page. Photo + H1 (+ optional buttons).
   Contrast: h1 is ink brown on white, always readable. No brown-on-brown text ever. */
.als-simple-head {
  background: var(--paper);
  padding-block: var(--space-5) var(--space-6);
}
.als-simple-head__photo {
  margin: 0 0 var(--space-5);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #EEE9DE;
}
.als-simple-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.als-simple-head h1 { margin: 0 0 var(--space-3); color: var(--ink); }
.als-simple-head__note { color: var(--mute); margin: 0; }
.als-simple-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }

/* Menu page — lean head: photo, hours, directions. No hero pitch.
   Tight bottom padding so the menu below sits close (no big white gap). */
.als-menu-head {
  padding-block: var(--space-5) 0;
  background: var(--paper);
}
.als-menu-head__photo {
  margin: 0 0 var(--space-4);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #EEE9DE;
}
.als-menu-head__photo img { width: 100%; height: 100%; object-fit: cover; }
.als-menu-head__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.als-menu-head__hours {
  display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-4);
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}
.als-menu-head__hours div { display: flex; align-items: baseline; gap: 0.5rem; }
.als-menu-head__hours dt {
  font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem;
}
.als-menu-head__hours dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.als-menu-head__directions {
  color: var(--brand); font-weight: 700; text-decoration: none;
  font-size: 1rem;
}
.als-menu-head__directions:hover { color: var(--brand-hot); text-decoration: underline; }

/* When als-menu-head is followed by a section, collapse the section's top padding
   so the menu jumps sit right under the directions bar. */
.als-menu-head + .section { padding-top: var(--space-4); }

/* ============================================================
   ABOUT PAGE — editorial layout
   Contrast rules baked in:
   - On paper: only --ink text, --mute (#4A4642 → 9:1) for helper
   - On cream: only --ink text
   - On ink (walnut brown): only --paper white body, --cream (11:1) for labels
   ============================================================ */

/* Editorial head — mobile-first single column with landscape photo (dek included);
   desktop uses portrait photo in 2-col grid so the storefront sign is fully visible. */
.als-story-head {
  background: var(--paper);
  padding-block: var(--space-5) var(--space-6);
}
.als-story-head__grid {
  display: grid;
  gap: var(--space-5);
}
.als-story-head__photo {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #EEE9DE;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.als-story-head__photo img {
  width: 100%; height: auto;
  display: block;
  /* MOBILE: 4/3 landscape crop, biased toward top so the sign stays in frame */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
}
.als-story-head__photo figcaption {
  padding: var(--space-3) var(--space-4);
  color: var(--mute);
  font-size: 0.8rem;
  background: var(--paper);
  border-top: 1px solid rgba(0,0,0,.06);
  letter-spacing: 0.5px;
}
.als-story-head__text { color: var(--ink); }
.als-story-head__text h1 {
  color: var(--ink);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
}
/* Dek: shows on mobile below the H1 (hidden on desktop — desktop shows its own copy). */
.als-story-head__dek {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 44ch;
}

/* DESKTOP: portrait photo (4/5) so the full "AL'S PIZZA" sign is visible.
   Photo on the left, title + dek stack on the right, aligned to the top. */
@media (min-width: 900px) {
  .als-story-head { padding-block: var(--space-7) var(--space-6); }
  .als-story-head__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
    align-items: start;
  }
  .als-story-head__photo img {
    aspect-ratio: 4 / 5;      /* portrait — matches the source image */
    object-position: center top;
  }
  .als-story-head__text { padding-top: var(--space-4); }
}
.als-story__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.72rem;
  color: var(--brown);
  margin-bottom: var(--space-3);
}

/* The story column — narrow editorial column, sits below the head */
.als-story {
  background: var(--paper);
  padding-block: 0 var(--space-7);
}
.als-story__wrap {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.als-story__wrap > p { margin: 0 0 1.25rem; }
.als-story__wrap > p:first-child { margin-top: 0; }
.als-story__wrap > p strong { color: var(--ink); }
.als-story__wrap h2 {
  color: var(--ink);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: var(--space-7) 0 var(--space-3);
  line-height: 1.1;
}
/* Pull quote — magazine style */
.als-pull {
  margin: var(--space-7) -1rem;
  padding: var(--space-5) var(--space-5);
  background: var(--cream);
  border-left: 4px solid var(--brand);
  border-radius: 4px;
}
@media (min-width: 640px) { .als-pull { margin-inline: 0; padding: var(--space-6) var(--space-6); } }
.als-pull blockquote {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
}
.als-pull figcaption {
  font-size: 0.85rem;
  color: var(--brown);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Voices grid */
.als-voices {
  background: var(--cream);
  padding-block: var(--space-8);
}
.als-voices__title {
  color: var(--ink);
  margin-bottom: var(--space-5);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
}
.als-voices__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .als-voices__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .als-voices__grid { grid-template-columns: repeat(3, 1fr); } }
.als-voice {
  background: var(--paper);
  color: var(--ink);
  padding: var(--space-5);
  border-radius: 4px;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  break-inside: avoid;
}
.als-voice p {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
.als-voice cite {
  font-style: normal;
  color: var(--brown);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.72rem;
}

/* Tips + Joey pull */
.als-tips {
  background: var(--paper);
  padding-block: var(--space-8);
  border-top: 1px solid rgba(0,0,0,.05);
}
.als-tips__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 900px) { .als-tips__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-8); } }
.als-tips__list h2 {
  color: var(--ink);
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  margin: 0 0 var(--space-4);
}
.als-tips__list ul {
  list-style: none;
  padding: 0; margin: 0;
}
.als-tips__list li {
  padding: var(--space-3) 0 var(--space-3) 2rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
  position: relative;
  color: var(--ink);
  line-height: 1.5;
}
.als-tips__list li:last-child { border-bottom: none; }
.als-tips__list li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 1.1rem;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--brand);
}
.als-tips__list li strong { color: var(--ink); }
.als-tips__pull {
  margin: 0;
  padding: var(--space-6);
  background: var(--ink);
  border-radius: 8px;
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.als-tips__pull::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem; left: 1rem;
  font-family: var(--font-display);
  font-size: 6rem;
  color: var(--brand-text);
  opacity: .25;
  line-height: 1;
}
.als-tips__pull blockquote {
  margin: 0 0 var(--space-3);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--paper);
  position: relative;
}
.als-tips__pull figcaption {
  font-size: 0.8rem;
  color: var(--cream);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* At-a-glance — subtle horizontal strip at bottom of story */
.als-glance {
  background: var(--paper);
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid rgba(0,0,0,.08);
}
.als-glance__label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.7rem;
  color: var(--brown);
  margin-bottom: var(--space-4);
}
.als-glance__grid {
  display: grid;
  gap: var(--space-4) var(--space-6);
  margin: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .als-glance__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .als-glance__grid { grid-template-columns: repeat(3, 1fr); } }
.als-glance__grid > div {
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.als-glance__grid dt {
  font-weight: 700;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  margin-bottom: 0.15rem;
}
.als-glance__grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.4;
}

/* Compact page title (no photo) — used on Gallery where the whole page IS photos. */
.als-page-title {
  background: var(--paper);
  padding-block: var(--space-6) var(--space-4);
}
.als-page-title h1 { margin: 0 0 var(--space-2); color: var(--ink); }
.als-page-title__note { color: var(--mute); margin: 0; }
.als-page-title + .section { padding-top: var(--space-4); }

/* Menu jump-links */
.als-menu-jump {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem;
  padding: var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 0.9rem;
}
.als-menu-jump a { color: var(--brand); text-decoration: none; font-weight: 600; }
.als-menu-jump a:hover { text-decoration: underline; }

/* Menu list */
.als-menu-cat { margin-bottom: var(--space-8); scroll-margin-top: 80px; }
.als-menu-cat__label {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--brand-deep);
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--brown);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-5);
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.als-menu-cat__label small { font-family: var(--font-body); font-size: 0.85rem; color: var(--mute); letter-spacing: 0.5px; text-transform: none; }
.als-menu-list { list-style: none; padding: 0; margin: 0; }
.als-menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding-block: var(--space-4);
  border-bottom: 1px dashed rgba(0,0,0,.08);
  align-items: baseline;
}
.als-menu-item__name { font-weight: 700; font-size: 1.05rem; }
.als-menu-item__desc { color: var(--mute); font-size: 0.95rem; margin-top: 0.15rem; }
.als-menu-item__price {
  font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.als-menu-footnote {
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--cream);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--mute);
}

/* Gallery — fixed column counts so N items always land on balanced rows.
   Home gallery = 6 items → 2 rows of 3 on desktop. /gallery/ = 28 items → 7 rows of 4 on desktop. */
.als-gallery {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .als-gallery { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
@media (min-width: 960px) {
  .als-gallery { grid-template-columns: repeat(4, 1fr); }
}
/* Home gallery variant — 6 items, always 3 cols on tablet+ so it stays 2×3 */
.is-home .als-gallery,
.als-gallery--six {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .is-home .als-gallery,
  .als-gallery--six { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .is-home .als-gallery,
  .als-gallery--six { grid-template-columns: repeat(3, 1fr); }
}
.als-gallery__item {
  position: relative; border-radius: 6px; overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--char); display: block;
}
.als-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.als-gallery__item:hover img { transform: scale(1.04); }
.als-gallery__credit { color: var(--mute); font-size: 0.85rem; margin-top: var(--space-4); text-align: center; }

/* Quotes */
.als-quotes__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.als-quote {
  background: var(--paper); color: var(--ink);
  padding: var(--space-5);
  border-left: 4px solid var(--brand);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  margin: 0;
}
.section--dark .als-quote { background: var(--char); color: #EDE8DF; border-left-color: var(--brand-text); }
.als-quote__text { font-size: 1.05rem; margin-bottom: var(--space-4); }
.als-quote__attr { font-size: 0.8rem; color: var(--mute); text-transform: uppercase; letter-spacing: 1px; }
.section--dark .als-quote__attr { color: var(--brand-text); }

/* Sticky order bar (mobile only) — cream call button, brighter green order button.
   Both readable, both distinct, both high-contrast against the phone screen. */
.als-orderbar {
  position: fixed;
  top: auto;
  /* Sit above the OS gesture bar / nav buttons — env() falls back to 0 on desktop. */
  bottom: env(safe-area-inset-bottom, 0px);
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  min-height: 60px;
  background: var(--ink);
  border-top: 1px solid var(--fog);
  box-shadow: 0 -4px 12px rgba(0,0,0,.24);
}
.als-orderbar__btn {
  flex: 1 1 50%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 1.15rem 0.5rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  transition: background-color .15s ease;
}
.als-orderbar__btn--menu {
  background: var(--cream);
  color: var(--ink);
}
.als-orderbar__btn--menu:hover { background: #EBDCB6; color: var(--ink); }
.als-orderbar__btn--order {
  background: #43A047;
  color: var(--paper);
  text-transform: uppercase;
}
.als-orderbar__btn--order:hover { background: #388E3C; color: var(--paper); }
@media (min-width: 900px) {
  .als-orderbar { display: none; }
}

/* Footer */
.als-footer {
  background: var(--ink);
  color: #C9C3B9;
  padding-block: var(--space-8) var(--space-5);
  margin-top: var(--space-9);
}
.als-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.als-footer h3 { color: var(--paper); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 1px; margin-bottom: var(--space-4); }
.als-footer p { color: #C9C3B9; }
.als-footer a { color: var(--brand-text); text-decoration: none; }
.als-footer a:hover { color: var(--paper); }
.als-footer__legal {
  border-top: 1px solid var(--fog);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--mute-dark);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}

/* Utility */
.text-center { text-align: center; }
.mb-6 { margin-bottom: var(--space-6); }
.mt-6 { margin-top: var(--space-6); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}