/*
 * styles.css — 1Chick 1Bro Cafe Bistro
 * Concept: "Blue Outside, Red Inside." The owner's red menu board blown up to
 * wall size inside a bright blue building. Square corners site-wide; pills are
 * the only round shape (plus the cake-dome arch and the three catering rounds).
 */

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  --color-primary: #A8141B;        /* Menu-Board Red — dominant field */
  --color-primary-dark: #7A0E13;   /* chili */
  --color-primary-light: #F7DCD3;  /* guava blush */
  --color-secondary: #0B5FB7;      /* 49th Street Blue — secondary field */
  --color-accent: #F2A51A;         /* Pill Gold */
  --color-tertiary: #FFCC00;       /* Flag Yellow */
  --color-bg: #FFF5E4;             /* arepa-dough cream */
  --color-surface: #F7E6C8;        /* kraft thank-you card */
  --color-dark: #2B1A14;           /* café negro */
  --color-text: #2B1A14;
  --color-text-secondary: #6A4A3C; /* cocoa table grain */
  --color-text-on-primary: #FFF5E4;
  --color-border: #E2C9A0;

  --red: var(--color-primary);
  --chili: var(--color-primary-dark);
  --blush: var(--color-primary-light);
  --blue: var(--color-secondary);
  --gold: var(--color-accent);
  --yellow: var(--color-tertiary);
  --cream: var(--color-bg);
  --kraft: var(--color-surface);
  --brown: var(--color-dark);
  --cocoa: var(--color-text-secondary);

  --font-primary: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --font-secondary: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-size-base: 17px;
  --spacing-base: 8px;
  --motion-duration: 220ms;
  --motion-duration-slow: 380ms;
  --motion-ease: cubic-bezier(0.25, 0.9, 0.3, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --section-y: clamp(64px, 9vw, 128px);
  --radius: 0;

  --fs-display: clamp(4.5rem, 11vw, 10rem);
  --fs-h1: clamp(3rem, 6.5vw, 5.75rem);
  --fs-h2: clamp(2.1rem, 4vw, 3.4rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 1.9rem);
  --fs-lead: clamp(1.15rem, 1.6vw, 1.375rem);
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  --directions-shadow: 0 6px 18px rgba(43, 26, 20, .28);
  --bar-h: 64px;
  --lcrm-cart-accent: #A8141B;
}

/* ============================================================
   Base Reset
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base, 16px);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-secondary);
  font-size: 1rem;
  background-color: var(--cream);
  color: var(--brown);
  line-height: 1.65;
  padding-bottom: 42px; /* required */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

ul, ol { list-style: none; }

[id] { scroll-margin-top: 72px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus states — WCAG AA required */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--brown);
}

/* Skip navigation link — WCAG 2.4.1 (managed by fix_ada_safe.py) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--yellow);
  color: var(--brown);
  font-weight: 800;
  text-decoration: none;
  border: 2px solid var(--brown);
}
.skip-link:focus {
  left: 0;
}

main:focus { outline: none; }

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

/* ============================================================
   Type scale
   ============================================================ */
.display, .h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--font-primary);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.display { font-size: var(--fs-display); line-height: .86; letter-spacing: -0.01em; }
h1, .h1 { font-size: var(--fs-h1); line-height: .92; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.1; }
.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; }
.body-copy { max-width: 62ch; }
.body-copy p + p { margin-top: 1em; }
.caption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   Grounds
   ============================================================ */
.g-light { background: var(--cream); color: var(--brown); }
.g-red   { background: var(--red); color: var(--cream); }
.g-blue  { background: var(--blue); color: var(--cream); }
.g-gold  { background: var(--gold); color: var(--brown); }
.g-dark  { background: var(--brown); color: var(--cream); }
.g-gingham {
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, rgba(168, 20, 27, .55) 50%, transparent 50%),
    linear-gradient(rgba(168, 20, 27, .55) 50%, transparent 50%);
  background-size: 28px 28px;
}

.photo-grade { filter: saturate(1.05) contrast(1.03); }

/* ============================================================
   Pills & buttons — restrained; the design wins, not the button
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border-radius: 999px;
  padding: .72em 1.2em;
  font: 800 .9375rem/1 var(--font-secondary);
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background-color var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease),
              border-color var(--motion-duration) var(--motion-ease);
}
.pill i { font-size: 1.1em; }
.pill--call { background: var(--yellow); color: var(--brown); }
.pill--call:hover { background: var(--gold); }
.pill--dir { border-color: var(--blue); color: var(--blue); background: transparent; }
.pill--dir:hover { background: var(--blue); color: var(--cream); }
.pill--dir-cream { border-color: var(--cream); color: var(--cream); }
.pill--dir-cream:hover { background: var(--cream); color: var(--blue); }
.pill--red { background: var(--red); color: var(--cream); }
.pill--red:hover { background: var(--chili); }
.pill--brown { background: var(--brown); color: var(--cream); }
.pill--brown:hover { background: #000; }
.pill--yellow { background: var(--yellow); color: var(--brown); }
.pill--yellow:hover { background: var(--cream); }
.pill--cream-outline { border-color: var(--cream); color: var(--cream); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
.text-link:hover { text-decoration-color: var(--red); }

/* The owner's gold-pill sub-head */
.menu-pill {
  display: inline-block;
  background: var(--gold);
  color: var(--brown);
  border-radius: 999px;
  padding: .5em 1.15em .45em;
  font: 800 .875rem/1.1 var(--font-secondary);
  letter-spacing: .06em;
  text-transform: uppercase;
}
h2.menu-pill { margin: 0 0 1.75rem; }
.menu-pill--brown { background: var(--brown); color: var(--cream); }
.menu-pill--yellow { background: var(--yellow); color: var(--brown); }

/* ============================================================
   Masthead — two tiers, breakout badge, scrolls away
   ============================================================ */
.mast {
  position: relative;
  z-index: 50;
  overflow: visible;
}
.mast__utility {
  height: 36px;
  background: var(--brown);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  font: 600 .8125rem/1 var(--font-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mast__today { display: flex; align-items: center; gap: .5em; }
.mast__utility-right { display: flex; align-items: center; gap: 18px; }
.lang-switch {
  display: inline-flex;
  border: 1.5px solid rgba(255, 245, 228, .55);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch button {
  background: transparent;
  border: 0;
  color: var(--cream);
  font: 800 .8125rem/1 var(--font-secondary);
  letter-spacing: .08em;
  padding: 5px 11px;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--blush); color: var(--brown); }
html:not(.js) .lang-switch { display: none; }
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  color: inherit;
  font-size: 1.15rem;
  text-decoration: none;
}
.social-icon:hover { color: var(--yellow); }

.mast__main {
  height: 72px;
  background: var(--cream);
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 0 var(--gutter);
  overflow: visible;
  position: relative;
  border-bottom: 3px solid var(--brown);
}
.mast__brand {
  position: relative;
  display: block;
  width: 166px;
  height: 72px;
  flex: 0 0 166px;
  margin-right: 30px; /* 196px reserved for the hanging badge */
}
.mast__brand img {
  position: absolute;
  top: 6px;
  left: 0;
  height: 160px;
  width: auto;
  max-width: 166px;
  z-index: 60;
  filter: drop-shadow(var(--directions-shadow));
  transition: transform var(--motion-duration-slow) var(--motion-ease);
  transform-origin: 50% 0;
}
.mast__brand:hover img { transform: rotate(-3deg); }
.mast__links {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-right: auto;
}
.mast__link {
  font: 600 1rem/1 var(--font-secondary);
  color: var(--brown);
  text-decoration: none;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 3px no-repeat;
  padding: 6px 0;
  transition: background-size var(--motion-duration) var(--motion-ease);
}
.mast__link:hover, .mast__link[aria-current="page"] { background-size: 100% 3px; }
.mast__actions { display: flex; align-items: center; gap: 10px; }
.mast__pages {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--brown);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font: 800 .8125rem/1 var(--font-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.mast__pages i { font-size: 1.1rem; }

/* Mobile drawer (red) */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--red);
  color: var(--cream);
  padding: 28px var(--gutter) 120px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__close {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cream); color: var(--brown);
  border: 0; border-radius: 999px;
  padding: 10px 16px;
  font: 800 .8125rem/1 var(--font-secondary);
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.drawer__links { display: flex; flex-direction: column; gap: 10px; }
.drawer__links a {
  font: 400 2rem/1.15 var(--font-primary);
  color: var(--cream);
  text-decoration: none;
}
.drawer__links a[aria-current="page"] { color: var(--yellow); }
.drawer__meta { display: flex; align-items: center; gap: 18px; margin-top: auto; }
.drawer .lang-switch { border-color: var(--cream); }
.drawer .pill { align-self: flex-start; }

/* ============================================================
   The 49th Street bar — navigation at the bottom of the screen
   ============================================================ */
.street-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--blue);
  color: var(--cream);
  transition: transform var(--motion-duration-slow) var(--motion-ease);
  box-shadow: 0 -4px 18px rgba(43, 26, 20, .22);
}
.street-bar.is-tucked { transform: translateY(110%); }
.street-bar__desk {
  display: none;
  height: var(--bar-h);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
}
.street-bar__links { display: flex; gap: 28px; }
.street-bar__links a {
  font: 600 1rem/1 var(--font-secondary);
  color: var(--cream);
  text-decoration: none;
  padding: 6px 0;
  background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 0 3px no-repeat;
  transition: background-size var(--motion-duration) var(--motion-ease);
}
.street-bar__links a:hover, .street-bar__links a[aria-current="page"] { background-size: 100% 3px; }
.street-bar__today {
  display: flex; align-items: center; gap: .5em;
  font: 600 .8125rem/1 var(--font-secondary);
  letter-spacing: .08em; text-transform: uppercase;
}
.street-bar__actions { display: flex; gap: 10px; }
.street-bar__cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.street-bar__cells a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--bar-h);
  color: var(--cream);
  text-decoration: none;
  font: 800 .8125rem/1 var(--font-secondary);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.street-bar__cells a i { font-size: 1.45rem; }
.street-bar__cells a.is-call { background: var(--yellow); color: var(--brown); }
.street-bar__cells a + a:not(.is-call) { border-left: 1px solid rgba(255, 245, 228, .25); }

/* ============================================================
   HOME — Hero: the door and the room
   ============================================================ */
.hero-door {
  display: grid;
  grid-template-columns: 42fr 58fr;
  min-height: clamp(620px, calc(100svh - 108px), 860px);
}
.hero-door__outside {
  background: var(--blue);
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
}
.door {
  position: relative;
  margin: 32px -48px 32px 32px;
  flex: 1;
  transform-origin: left center;
  box-shadow: 18px 18px 0 rgba(43, 26, 20, .28);
  background: var(--brown);
}
.door img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 40% 60%;
}
html.js .door { animation: door-swing 900ms var(--motion-ease) 250ms both; }
@keyframes door-swing {
  from { transform: perspective(1400px) rotateY(0deg); }
  to   { transform: perspective(1400px) rotateY(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .door { animation: none; transform: perspective(1400px) rotateY(-6deg); }
}
.hero-door__room {
  background: var(--red);
  color: var(--cream);
  padding: clamp(32px, 6vw, 96px);
  padding-left: calc(48px + clamp(32px, 5vw, 80px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.hero-door__room h1 {
  font-size: var(--fs-display);
  line-height: .86;
  letter-spacing: -0.01em;
}
.hero-door__es {
  margin-top: 18px;
  color: var(--yellow);
  font: 600 var(--fs-lead)/1.3 var(--font-secondary);
}
.channels { margin-top: clamp(28px, 4vw, 48px); display: grid; gap: 10px; }
.channel {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 22px;
  text-decoration: none;
  font: 500 var(--fs-lead)/1.25 var(--font-secondary);
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.channel strong { font-weight: 800; }
.channel i { font-size: 1.35em; flex: 0 0 auto; }
.channel .channel__go { margin-left: auto; }
.channel--yellow { background: var(--yellow); color: var(--brown); }
.channel--yellow:hover { background: var(--cream); }
.channel--outline { border: 2px solid var(--cream); color: var(--cream); }
.channel--outline:hover { background: var(--cream); color: var(--red); }

/* ============================================================
   The Arepa Wall (home index + menu)
   ============================================================ */
.wall-section { padding-block: var(--section-y); }
.wall-opener { margin-bottom: clamp(32px, 5vw, 64px); }
.wall-opener__h {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0 clamp(16px, 3vw, 40px);
  color: var(--cream);
  font-size: var(--fs-h2);
}
.wall-opener__words { padding-bottom: .3em; max-width: 18ch; }
.wall-opener__lede { margin-top: 14px; color: var(--kraft); max-width: 40rem; }
.wall-opener__num {
  font: 400 var(--fs-display)/.8 var(--font-primary);
  color: var(--yellow);
}

.wall {
  --num: clamp(4.5rem, 7.4vw, 7.5rem);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  aspect-ratio: 1;
  padding: calc(var(--num) * .74) 14px 14px;
  text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.tile__num {
  position: absolute;
  top: 0;
  left: 12px;
  height: calc(var(--num) * .72);
  overflow: hidden; /* crops the numeral only — the tile's top edge bites the number */
  font: 400 var(--num)/1 var(--font-primary);
  letter-spacing: -0.02em;
  pointer-events: none;
}
.tile__num span { display: block; margin-top: -.2em; }
.tile__name {
  font: 400 clamp(1.3rem, 1.55vw, 1.6rem)/1.05 var(--font-primary);
  overflow-wrap: anywhere;
}
.tile__desc { font-size: var(--fs-small); line-height: 1.45; font-weight: 500; }
.tile__desc em { font-style: normal; font-weight: 800; }
.tile__price {
  align-self: flex-end;
  border-radius: 999px;
  padding: .35em .8em .3em;
  font: 400 1.1rem/1 var(--font-primary);
  white-space: nowrap;
}
.tile--red { background: var(--red); color: var(--cream); }
.tile--red .tile__price { background: var(--yellow); color: var(--brown); }
.tile--gold { background: var(--gold); color: var(--brown); }
.tile--gold .tile__price { background: var(--brown); color: var(--yellow); }
.tile--yellow { background: var(--yellow); color: var(--brown); }
.tile--yellow .tile__num { color: var(--red); }
.tile--yellow .tile__price { background: var(--brown); color: var(--yellow); }

/* flat colour swap on hover — no scale */
.tile--red:hover { background: var(--yellow); color: var(--brown); }
.tile--red:hover .tile__num { color: var(--red); }
.tile--red:hover .tile__price { background: var(--brown); color: var(--yellow); }
.tile--gold:hover { background: var(--red); color: var(--cream); }
.tile--gold:hover .tile__price { background: var(--yellow); color: var(--brown); }
.tile--yellow:hover { background: var(--gold); }
.tile--yellow:hover .tile__num { color: var(--brown); }

/* No. 3 Pabellón — the 2×2 feature with the real plate inset */
.tile--feature {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  justify-content: stretch;
  align-content: stretch;
  gap: 0;
}
.tile--feature .tile__top {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: calc(var(--num) * .74) 16px 16px;
  min-width: 0;
}
.tile--feature .tile__top { padding-top: calc(var(--num) * 1); }
.tile--feature .tile__top .tile__num { font-size: calc(var(--num) * 1.25); height: calc(var(--num) * .9); }
.tile--feature .tile__name { font-size: var(--fs-h3); }
.tile__inset { position: relative; min-height: 0; background: var(--brown); }
.tile__inset img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 55%;
}
.tile__flag {
  position: absolute;
  left: 12px; bottom: 12px;
  background: var(--cream);
  color: var(--brown);
  padding: 4px 10px;
}

/* Photo cells */
.tile--photo {
  padding: 0;
  background: var(--brown);
  aspect-ratio: auto;
  margin: 0;
  position: relative;
  display: block;
}
.tile--photo { min-height: 200px; overflow: hidden; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--photo figcaption, .tile--photo .tile__cap { z-index: 1; }
.tile--photo figcaption,
.tile--photo .tile__cap {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--brown);
  color: var(--cream);
  padding: 6px 10px;
}
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--end {
  grid-column: span 3;
  aspect-ratio: auto;
  padding: 24px;
  border: 3px solid var(--gold);
  color: var(--cream);
  justify-content: space-between;
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tile__endtext { display: block; max-width: 34ch; color: var(--kraft); }
.tile--end strong { display: block; font: 400 var(--fs-h3)/1.1 var(--font-primary); color: var(--yellow); margin-bottom: 8px; }
.tile--end:hover { background: var(--gold); color: var(--brown); }
.tile--end:hover .tile__endtext, .tile--end:hover strong { color: var(--brown); }
.tile--end .pill { pointer-events: none; }

/* Menu-page wall — 4 columns, priced with ingredients */
.wall--menu { --num: clamp(4.5rem, 8vw, 7.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.wall--menu .tile { aspect-ratio: auto; min-height: 300px; scroll-margin-top: 90px; }
.wall--menu .tile--feature { grid-row: span 1; grid-template-rows: auto minmax(220px, 1fr); }
.wall--menu .tile__name { font-size: clamp(1.4rem, 1.9vw, 1.75rem); }
.wall--menu .tile__aside { font: 800 .8125rem/1.3 var(--font-secondary); letter-spacing: .06em; text-transform: uppercase; }
.wall--menu .tile__proteins { font-size: .875rem; line-height: 1.45; }
.wall-foot {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: var(--kraft);
  font-weight: 600;
}
.wall-foot span { display: inline-flex; align-items: center; gap: .45em; }
.wall-foot i { color: var(--yellow); }

/* ============================================================
   HOME — Empanada triptych with the yellow label strip
   ============================================================ */
.triptych { position: relative; background: var(--brown); }
.triptych__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.triptych__panel { margin: 0; height: max(480px, 72vh); position: relative; }
.triptych__panel img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.triptych__panel:nth-child(3) img { object-position: 40% 55%; }
.triptych__strip {
  position: absolute;
  left: 0; right: 0;
  top: 62%;
  min-height: 88px;
  background: var(--yellow);
  color: var(--brown);
  display: flex;
  align-items: center;
  padding: 10px var(--gutter);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 8px 0 rgba(43, 26, 20, .18);
}
.triptych__strip h2 { font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.05; }
.triptych__link {
  position: absolute;
  right: var(--gutter);
  bottom: 28px;
  z-index: 3;
}

/* ============================================================
   HOME — Cake row (gold, stair-stepped frames)
   ============================================================ */
.cake-row { padding-block: var(--section-y) calc(var(--section-y) + 40px); }
.cake-row__grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.cake-row__head { min-width: 0; }
.cake-row__head p { margin-top: 18px; }
.cake-row__ctas { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cake-frames {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.frame { margin: 0; min-width: 0; }
.frame__mat { background: var(--cream); padding: 10px; }
.frame__crop { overflow: hidden; aspect-ratio: 4 / 5; }
.frame__crop img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-slow) var(--motion-ease); }
.frame:hover .frame__crop img { transform: scale(1.05); }
.frame figcaption { margin-top: 10px; color: var(--brown); }
.cake-frames .frame:nth-child(1) .frame__crop { aspect-ratio: 3 / 4; }
.cake-frames .frame:nth-child(2) { margin-top: 32px; }
.cake-frames .frame:nth-child(3) { margin-top: 64px; }
.cake-frames .frame:nth-child(4) { margin-top: 96px; }

/* ============================================================
   HOME — 1 + 1 (family)
   ============================================================ */
.family {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: var(--section-y);
  padding-right: var(--gutter);
}
.family__photo { position: relative; margin: 0; }
.family__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; max-height: 880px; }
.family__rubric {
  position: absolute;
  top: 0;
  right: -34px;
  writing-mode: vertical-rl;
  color: var(--red);
  font: 800 .8125rem/1 var(--font-secondary);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.family__text { min-width: 0; }
.sum {
  font: 400 var(--fs-h1)/.9 var(--font-primary);
  color: var(--red);
  margin-bottom: 28px;
}
.sum--display { font-size: var(--fs-display); line-height: .82; }
.family__text .press-line {
  margin-top: 1.2em;
  padding-left: 18px;
  border-left: 6px solid var(--gold);
  color: var(--cocoa);
  font-weight: 500;
}
.family__text .text-link { margin-top: 28px; color: var(--red); }

/* ============================================================
   HOME — Press + reviews (blue)
   ============================================================ */
.tribute { padding-block: var(--section-y); }
.tribute__quote { max-width: 22ch; color: var(--cream); font-size: var(--fs-h1); line-height: .98; }
.tribute__cite { margin-top: 16px; color: var(--yellow); }
.tribute__cite a { color: inherit; text-underline-offset: .25em; }
.tribute__grid {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.reviews { display: grid; gap: 22px; min-width: 0; }
.review {
  background: var(--cream);
  color: var(--brown);
  border-left: 6px solid var(--yellow);
  padding: 26px 30px;
  max-width: 40rem;
}
.review:nth-child(even) { margin-left: 40px; }
.review__src { display: flex; align-items: center; gap: .45em; color: var(--red); }
.review blockquote p { margin-top: 12px; font-size: 1.125rem; font-weight: 500; line-height: 1.5; }
.review figcaption { margin-top: 12px; font-weight: 800; }
.rail {
  position: sticky;
  top: 32px;
  background: var(--yellow);
  color: var(--brown);
  padding: 36px;
}
.rail__score { font: 400 clamp(4rem, 8vw, 7rem)/.9 var(--font-primary); display: flex; align-items: flex-start; }
.rail__score i { font-size: .45em; margin-top: .2em; color: var(--red); }
.rail hr { border: 0; border-top: 2px solid var(--brown); margin: 22px 0; opacity: .35; }
.rail p + p { margin-top: 10px; }
.rail__meta { display: flex; gap: .55em; align-items: flex-start; font-weight: 600; }
.rail__meta i { margin-top: .25em; }

/* ============================================================
   Photo bands with docked plates (home platters, cakes pan de jamón,
   catering parties, menu appetizers)
   ============================================================ */
.band { position: relative; }
.band__photo { margin: 0; }
.band__photo img { width: 100%; aspect-ratio: 16 / 7; min-height: 440px; object-fit: cover; }
.plate {
  position: absolute;
  z-index: 3;
  max-width: 30rem;
  padding: clamp(24px, 3vw, 40px);
}
.plate h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.plate .menu-pill { font-size: .875rem; line-height: 1.1; }
.plate p { margin-top: 14px; }
.plate .pill, .plate .text-link { margin-top: 22px; }
.plate > .menu-pill:first-child + h2 { margin-top: 14px; }
.plate .text-link { color: inherit; }
.plate--red { background: var(--red); color: var(--cream); }
.plate--brown { background: var(--brown); color: var(--cream); }
.plate--yellow { background: var(--yellow); color: var(--brown); }
.band--platters .plate { right: var(--gutter); bottom: -48px; }
.band--platters .band__photo img { object-position: 50% 62%; }
.band--platters + section { padding-top: calc(var(--section-y) + 48px); }

/* ============================================================
   HOME — Visit block (gingham + kraft card)
   ============================================================ */
.visit-block { padding-block: var(--section-y); }
.kraft-card {
  background: var(--kraft);
  color: var(--brown);
  border: 8px solid var(--brown);
  max-width: 64rem;
  margin-inline: auto;
}
.visit-card {
  display: grid;
  grid-template-columns: 7fr 5fr;
}
.visit-card__text { padding: clamp(28px, 4vw, 56px); min-width: 0; }
.visit-card__num { font: 400 var(--fs-display)/.82 var(--font-primary); color: var(--red); }
.visit-card__street { margin-top: 14px; color: var(--brown); }
.visit-card .pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.visit-card__photo { margin: 0; position: relative; min-height: 420px; }
.visit-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.visit-card__photo figcaption { position: absolute; left: 14px; bottom: 14px; background: var(--brown); color: var(--cream); padding: 6px 10px; }

/* Hours tables */
.hours { width: 100%; max-width: 26rem; border-collapse: collapse; margin-top: 22px; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; padding: 9px 10px; border-bottom: 1.5px dashed rgba(43, 26, 20, .3); font-weight: 600; }
.hours td { text-align: right; white-space: nowrap; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--red); font-weight: 800; }
.hours tr.is-today th::after { content: " · today"; font-weight: 600; font-size: .8em; }
html[lang="es"] .hours tr.is-today th::after { content: " · hoy"; }

/* ============================================================
   Footer — red field, phone at headline size
   ============================================================ */
.site-footer {
  background: var(--red);
  color: var(--cream);
  padding: var(--section-y) 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr .9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
}
.footer__col { min-width: 0; }
.footer__brand img { height: 140px; width: auto; max-width: 160px; filter: drop-shadow(var(--directions-shadow)); }
.footer__brand p { margin-top: 16px; font-weight: 600; }
.footer__h { font: 400 1.4rem/1.1 var(--font-primary); color: var(--yellow); margin-bottom: 16px; }
.footer__phone {
  display: inline-block;
  font: 400 1.6rem/1.1 var(--font-primary);
  color: var(--yellow);
  text-decoration: none;
  margin: 12px 0 16px;
}
.footer__phone:hover { color: var(--cream); }
.footer__addr { display: inline-flex; gap: .5em; align-items: flex-start; text-decoration: underline; text-underline-offset: .2em; font-size: var(--fs-small); }
.footer__addr i, .footer__week i { margin-top: .3em; }
.footer__week { display: flex; gap: .5em; align-items: flex-start; font-size: var(--fs-small); }
.footer__week ul { display: grid; gap: 2px; }
.footer__links { display: grid; gap: 8px; }
.footer__links a { font-size: var(--fs-small); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: .25em; }
.footer__social { display: flex; gap: 10px; margin-bottom: 14px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 2px solid var(--cream);
  border-radius: 999px;
  color: var(--cream);
  font-size: 1.35rem;
  text-decoration: none;
}
.footer__social a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--brown); }
.footer__proof { font-size: var(--fs-small); display: grid; gap: 4px; }
.footer__base {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 245, 228, .5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: .875rem;
}

/* ============================================================
   MENU — hero (the red board) + chip rail
   ============================================================ */
.menu-hero { padding-block: clamp(120px, 12vw, 150px) var(--section-y); }
.menu-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.menu-hero__text { min-width: 0; }
.menu-hero__es { color: var(--yellow); margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip {
  display: inline-block;
  background: var(--gold);
  color: var(--brown);
  border-radius: 999px;
  padding: .55em 1.05em .5em;
  font: 800 .875rem/1 var(--font-secondary);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.chip:hover, .chip.is-active { background: var(--yellow); }
.gf-note { margin-top: 22px; display: inline-flex; gap: .55em; align-items: center; border: 2px solid var(--cream); border-radius: 999px; padding: .55em 1.1em; font-weight: 600; }
.menu-hero__fine { margin-top: 22px; display: grid; gap: 6px; font-size: var(--fs-small); max-width: 52ch; }
.menu-hero__fine a { color: var(--yellow); font-weight: 800; }
.menu-hero__plate { margin: 0; background: var(--cream); padding: 8px; min-width: 0; }
.menu-hero__plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.chip-rail { display: none; }

/* Leader-dot lists */
.menu-list { display: grid; gap: 22px; }
.menu-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: .75rem;
}
.menu-item__name { flex: 0 1 auto; max-width: calc(100% - 6.5rem); font: 400 1.5rem/1.15 var(--font-primary); color: var(--item-name, var(--red)); min-width: 0; }
.menu-item__leader { flex: 1 1 1.5rem; border-bottom: 2px dotted currentColor; opacity: .5; margin-bottom: .4em; min-width: 1.5rem; }
.menu-item__price { flex: 0 0 auto; padding-bottom: .15em; font: 800 1.0625rem/1 var(--font-secondary); font-variant-numeric: tabular-nums; }
.menu-item__desc { flex: 0 0 100%; margin-top: 4px; font-size: var(--fs-small); line-height: 1.5; max-width: 54ch; }
.menu-item__note { flex: 0 0 100%; margin-top: 4px; font-size: .875rem; font-weight: 700; }
.on-cream { --item-name: var(--red); color: var(--brown); }
.on-cream .menu-item__desc { color: var(--cocoa); }
.on-blue { --item-name: var(--yellow); color: var(--cream); }
.on-blue .menu-item__desc { color: rgba(255, 245, 228, .88); }
.on-red { --item-name: var(--cream); color: var(--cream); }
.on-gold { --item-name: var(--brown); color: var(--brown); }
.menu-item--compact .menu-item__name { font: 800 1.0625rem/1.3 var(--font-secondary); }

.menu-section { padding-block: var(--section-y); scroll-margin-top: 70px; }

/* Especiales — the circle slid onto the table */
.especiales__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.especiales__circle { margin: 0; margin-left: calc(-20% - var(--gutter)); width: 120%; min-width: 0; }
.especiales__circle img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.especiales__list { min-width: 0; }

/* Bowls — staggered stack overlapping the list */
.bowls__grid { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.bowls__note { max-width: 46ch; margin-bottom: 36px; }
.bowls__list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; min-width: 0; }
.bowls__stack { display: grid; gap: 20px; min-width: 0; position: relative; z-index: 1; }
.mat { margin: 0; background: var(--cream); padding: 6px; }
.mat img { width: 100%; object-fit: cover; }
.mat figcaption { padding: 8px 4px 2px; color: var(--brown); }
.bowls__stack .mat:nth-child(1) img, .bowls__stack .mat:nth-child(2) img { aspect-ratio: 4 / 3; }
.bowls__stack .mat:nth-child(3) img { aspect-ratio: 1; }
.bowls__stack .mat:nth-child(2) { transform: translateX(-40px); box-shadow: 10px 10px 0 rgba(43, 26, 20, .25); }

/* Appetizers — red menu card over the platter */
.apps { position: relative; min-height: 92vh; display: flex; justify-content: flex-end; padding: 64px var(--gutter); }
.apps__photo { position: absolute; inset: 0; margin: 0; }
.apps__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 55%; }
.apps .plate { position: relative; max-width: 34rem; width: 100%; }
.apps .menu-list { gap: 18px; }
.apps__pops { display: grid; grid-template-columns: 1fr 140px; gap: 16px; align-items: center; }
.apps__pops img { width: 140px; height: 140px; object-fit: cover; border: 4px solid var(--cream); }

/* Breakfast — kraft tickets on gingham */
.breakfast { padding-block: var(--section-y) calc(var(--section-y) + 64px); text-align: center; }
.breakfast h2.menu-pill { margin-inline: auto; }
.tickets { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; text-align: left; }
.ticket {
  background: var(--kraft);
  color: var(--brown);
  border: 8px solid var(--brown);
  max-width: 30rem;
  width: 100%;
  padding: clamp(24px, 3vw, 36px);
}
.ticket__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ticket__head h3 { color: var(--red); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; }
.ticket__price { background: var(--yellow); color: var(--brown); border-radius: 999px; padding: .45em .9em; font: 800 1.0625rem/1 var(--font-secondary); white-space: nowrap; }
.ticket__lines { margin-top: 18px; display: grid; gap: 8px; }
.ticket__lines li { padding-bottom: 8px; border-bottom: 1.5px dashed rgba(43, 26, 20, .3); }
.ticket__choose { margin-top: 18px; font: 800 .875rem/1.2 var(--font-secondary); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.ticket__checks { margin-top: 10px; display: grid; gap: 6px; }
.ticket__checks li { display: flex; gap: .55em; align-items: center; font-weight: 600; }
.ticket__checks i { color: var(--red); font-size: 1.2rem; }

/* Cafecito & Jugos — gold, with the cup set down on the order */
.cafecito { padding-block: 0 var(--section-y); }
.cafecito__grid { display: grid; grid-template-columns: 1fr 1fr 1fr .8fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.cafecito__head { grid-column: 1 / 4; padding-top: var(--section-y); }
.cafecito__photo { grid-column: 4; grid-row: 1 / span 2; margin-top: -64px; position: relative; z-index: 2; }
.cafecito__photo img { aspect-ratio: 3 / 4; object-position: 50% 60%; }
.drink-col { min-width: 0; }
.drink-col h3 { margin-bottom: 18px; }
.drink-col .menu-list { gap: 12px; }

/* Desserts — names at headline size */
.desserts { padding-block: var(--section-y); }
.desserts__grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.desserts__text { padding-left: var(--gutter); min-width: 0; }
.desserts__names { margin-top: 8px; }
.desserts__names li { font: 400 var(--fs-h2)/1.12 var(--font-primary); color: var(--red); }
.desserts__text .text-link { margin-top: 28px; }
.desserts__photo { margin: 0; min-width: 0; }
.desserts__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 55%; }

/* Seasonal & Sunday */
.seasonal h2.h2 { color: var(--yellow); margin-bottom: clamp(32px, 4vw, 56px); }
.seasonal__grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.seasonal__block { min-width: 0; }
.seasonal__block .menu-pill { margin: 18px 0 12px; }
.seasonal__dish { font: 400 var(--fs-h3)/1.1 var(--font-primary); color: var(--cream); }
.seasonal__note { margin-top: 6px; color: var(--kraft); }
.seasonal__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seasonal__row figure, .seasonal__sunday { margin: 0; }
.seasonal__row .crop { overflow: hidden; aspect-ratio: 1; }
.seasonal__row img { width: 100%; height: 100%; object-fit: cover; }
.seasonal__row figcaption { margin-top: 8px; color: var(--kraft); }
.seasonal__sunday img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.crop--panjamon img { transform: scale(1.3); transform-origin: 20% 100%; }

/* ============================================================
   CAKES
   ============================================================ */
.cakes-hero { padding-top: clamp(110px, 10vw, 130px); }
.cakes-hero__grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(32px, 5vw, 80px);
  min-height: clamp(560px, 80svh, 780px);
  align-items: center;
}
.cakes-hero__text { min-width: 0; padding-bottom: 72px; }
.cakes-hero__es { color: var(--red); margin-top: 12px; }
.cakes-hero__text .lead { margin-top: 22px; max-width: 34ch; }
.cakes-hero__text .pill { margin-top: 30px; }
.dome {
  margin: 0 0 -72px;
  align-self: end;
  background: var(--cream);
  padding: 10px;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  position: relative;
  z-index: 2;
  max-width: 34rem;
  justify-self: center;
  width: 100%;
}
.dome img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}
.stand { padding-block: calc(var(--section-y) + 72px) var(--section-y); }
.stand__opener { display: flex; align-items: flex-end; gap: 0 clamp(16px, 3vw, 36px); margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap; color: var(--cream); font-size: var(--fs-h3); line-height: 1.1; }
.stand__opener .wall-opener__num { line-height: .8; }
.stand__words { max-width: 20ch; padding-bottom: .35em; }
.stand__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; }
.stand__cell { margin: 0; grid-column: span 3; position: relative; min-width: 0; }
.stand__cell .crop { overflow: hidden; height: 100%; }
.stand__cell img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--motion-duration-slow) var(--motion-ease); }
.stand__cell:hover img { transform: scale(1.05); }
.stand__cell figcaption { position: absolute; left: 0; bottom: 0; background: var(--brown); color: var(--cream); padding: 6px 10px; }
.stand__cell--big { grid-column: span 6; grid-row: span 2; }
.stand__cell--big .crop { position: absolute; inset: 0; }
.stand__cell--big img { aspect-ratio: auto; }
.stand__cell--half { grid-column: span 6; }
.stand__cell--half img { aspect-ratio: 2 / 1; }

.order { padding-block: var(--section-y); }
.order__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.order__stack { display: grid; min-width: 0; }
.order__stack .mat { width: 78%; box-shadow: 10px 10px 0 rgba(43, 26, 20, .18); }
.order__stack .mat img { aspect-ratio: 4 / 5; }
.order__stack .mat + .mat { margin-top: -24px; }
.order__stack .mat:nth-child(2) { justify-self: end; position: relative; z-index: 2; }
.order__stack .mat:nth-child(3) { position: relative; z-index: 3; margin-left: 8%; }
.order__text { min-width: 0; }
.order__text h2 { color: var(--red); }
.order__text > p { margin-top: 14px; max-width: 52ch; }
.side-note { margin-top: 20px; display: flex; align-items: center; gap: .5em; font-weight: 600; }
.side-note a { font-weight: 800; color: inherit; }

.slice { padding-block: var(--section-y); }
.slice__names { margin-top: 4px; font: 400 var(--fs-h2)/1.15 var(--font-primary); color: var(--cream); max-width: 30ch; }
.slice__names .dot { color: var(--yellow); padding: 0 .2em; }
.slice__row { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 6fr 3fr 3fr; gap: 16px; align-items: start; }
.slice__row .mat { padding: 8px; }
.slice__row .mat img { aspect-ratio: 5 / 4; }
.slice__row .mat:nth-child(n+2) img { aspect-ratio: 4 / 5; }

.band--panjamon .band__photo img { object-position: 55% 65%; }
.band--panjamon .plate { left: var(--gutter); bottom: var(--gutter); max-width: 28rem; }

/* ============================================================
   CATERING
   ============================================================ */
.cat-hero {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: clamp(560px, 82svh, 800px);
  overflow-x: clip;
}
.cat-hero__text { padding: clamp(110px, 10vw, 140px) 0 var(--section-y) var(--gutter); align-self: center; min-width: 0; position: relative; z-index: 2; }
.cat-hero__text h1 { font-size: var(--fs-h1); }
.cat-hero__text .lead { color: var(--yellow); margin-top: 18px; max-width: 30ch; }
.cat-hero__text .pill { margin-top: 30px; }
.rounds { position: relative; min-height: 100%; min-width: 0; }
.round { position: absolute; margin: 0; }
.round img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid var(--cream); box-shadow: 0 18px 40px rgba(43, 26, 20, .35); }
.round--big { width: 34vw; right: -11.3vw; top: 50%; transform: translateY(-50%); z-index: 1; }
.round--a { width: 22vw; right: 20.1vw; top: 7%; z-index: 2; }
.round--b { width: 18vw; right: 20.9vw; bottom: 7%; z-index: 3; }

.platters { padding-block: var(--section-y); }
.platters__rows { display: grid; gap: 48px; }
.prow { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.prow:nth-child(even) .prow__text { order: 2; }
.prow__text { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(16px, 2.5vw, 32px); align-items: start; }
.prow__num { font: 400 var(--fs-h2)/1 var(--font-primary); color: var(--red); }
.prow__text h3 { color: var(--brown); }
.prow__text p { grid-column: 2; margin-top: 8px; color: var(--cocoa); max-width: 44ch; }
.prow__photo { margin: 0; min-width: 0; }
.prow__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.platters__close { margin-top: 56px; font: 400 var(--fs-h3)/1.2 var(--font-primary); color: var(--red); max-width: 34ch; }

.band--parties .band__photo img { object-position: 50% 58%; }
.band--parties .plate { left: var(--gutter); top: var(--gutter); max-width: 26rem; }
.band--parties .plate h2 { font-size: var(--fs-h3); line-height: 1.15; }

.plan { padding-block: var(--section-y); scroll-margin-top: 20px; }
.plan__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.plan__main { min-width: 0; }
.plan__main h2 { color: var(--cream); margin-bottom: 28px; }
.plan__side { min-width: 0; }
.plan__side .mat img { aspect-ratio: 3 / 4; object-position: 55% 55%; }
.plan__side .pill { margin-top: 20px; }

.packed { padding-block: var(--section-y); }
.packed__photo { max-width: 64rem; margin: 0 auto; }
.packed__photo .mat { padding: 10px; }
.packed__photo img { aspect-ratio: 16 / 10; object-position: 50% 45%; }
.packed__line { max-width: 64rem; margin: 22px auto 0; color: var(--cream); }

/* ============================================================
   Forms (partner.js-owned submission)
   ============================================================ */
.form-card { background: var(--cream); color: var(--brown); padding: clamp(22px, 3vw, 40px); }
.kraft-form { background: var(--kraft); color: var(--brown); border: 4px solid var(--brown); padding: clamp(22px, 3vw, 36px); margin-top: 26px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font: 600 .9375rem/1.3 var(--font-secondary); }
.field .opt { font-weight: 500; color: var(--cocoa); }
.field input, .field select, .field textarea {
  width: 100%;
  background: #FFFDF8;
  border: 2px solid var(--brown);
  border-radius: 0;
  padding: 12px 14px;
  font: 400 1.0625rem/1.4 var(--font-secondary);
  color: var(--brown);
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--blush); outline: 3px solid var(--red); outline-offset: 0; box-shadow: none; }
.field fieldset { border: 0; display: grid; gap: 8px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 4px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.check input { width: 20px; height: 20px; accent-color: var(--red); flex: 0 0 auto; }
.submit {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--red);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  padding: .7em 1.5em .65em;
  font: 400 1.35rem/1 var(--font-primary);
  cursor: pointer;
  transition: background-color var(--motion-duration) var(--motion-ease);
}
.submit:hover { background: var(--chili); }
.submit i { font-size: .9em; }

/* ============================================================
   VISIT
   ============================================================ */
.visit-hero { background: var(--blue); padding-bottom: 0; }
.visit-hero__photo { margin: 0; }
.visit-hero__photo img { width: 100%; height: clamp(520px, 78svh, 760px); object-fit: cover; object-position: 40% 55%; }
.facts-ticket {
  position: relative;
  z-index: 3;
  margin: -150px 0 0 var(--gutter);
  max-width: 40rem;
  background: var(--kraft);
  color: var(--brown);
  border: 4px solid var(--brown);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: 14px 14px 0 rgba(43, 26, 20, .3);
}
.facts-ticket h1 { color: var(--red); font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.facts-ticket .h3 { margin-top: 14px; }
.facts-ticket__today { margin-top: 12px; display: flex; gap: .5em; align-items: center; font-weight: 700; }
.facts-ticket .pills { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

.hours-dir { padding-block: clamp(56px, 7vw, 96px) var(--section-y); }
.hours-dir__grid { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.hours-dir h2 { color: var(--yellow); }
.hours-dir .hours th, .hours-dir .hours td { color: var(--cream); border-bottom-color: rgba(255, 245, 228, .35); font-size: 1.0625rem; }
.hours-dir .hours tr.is-today th, .hours-dir .hours tr.is-today td { background: var(--yellow); color: var(--brown); }
.hours-dir__col { min-width: 0; }
.hours-dir__addr { margin-top: 20px; display: grid; gap: 10px; }
.hours-dir__addr a { color: var(--cream); }
.map-frame { border: 6px solid var(--cream); background: var(--cream); aspect-ratio: 4 / 3; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.hours-dir .mat img { aspect-ratio: 3 / 4; object-position: 50% 55%; }
.amenities { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.amenities li { display: inline-flex; align-items: center; gap: .4em; border: 1.5px solid var(--cream); border-radius: 999px; padding: .35em .8em; font-size: .875rem; font-weight: 600; }

.story { padding-block: var(--section-y); scroll-margin-top: 20px; }
.story__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.story__text { min-width: 0; }
.story__aside { margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--border, #E2C9A0); color: var(--cocoa); font-size: var(--fs-small); }
.mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 10px; min-width: 0; }
.mosaic figure { margin: 0; min-width: 0; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic figure:first-child { grid-row: span 2; }
.mosaic figure:first-child img { aspect-ratio: 3 / 4; }
.mosaic figure:not(:first-child) img { aspect-ratio: 4 / 3; }
.early { margin-top: clamp(40px, 5vw, 64px); max-width: 64rem; }
.early__label { font: 800 1.125rem/1.25 var(--font-secondary); color: var(--brown); }
.early ul { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; }
.early li { font-style: italic; color: var(--cocoa); font-size: var(--fs-small); }
.early__src { margin-top: 12px; color: var(--cocoa); }

.press { padding-block: var(--section-y); }
.press__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.press__text { min-width: 0; }
.press__quote { color: var(--cream); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.1; }
.press__cite { margin-top: 18px; color: var(--yellow); }
.press__link { display: inline-flex; gap: .45em; margin-top: 14px; color: var(--cream); font-weight: 700; text-underline-offset: .25em; }
.press__second { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255, 245, 228, .35); }
.press__second p { color: var(--kraft); font-size: var(--fs-small); }
.press .mat { padding: 10px; }
.press .mat img { aspect-ratio: 4 / 5; object-position: 45% 55%; }

.hello { padding-block: var(--section-y); }
.hello__card { max-width: 60rem; display: grid; grid-template-columns: 5fr 7fr; }
.hello__intro { padding: clamp(22px, 3vw, 36px); border-right: 4px solid var(--brown); min-width: 0; }
.hello__intro img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 35%; }
.hello__intro h2 { margin-top: 22px; color: var(--red); }
.hello__intro .h3 { color: var(--brown); margin-top: 4px; }
.hello__intro p { margin-top: 14px; }
.hello__intro p a { font-weight: 800; }
.hello__form { padding: clamp(22px, 3vw, 36px); min-width: 0; }

/* 404 */
.lost { min-height: 70vh; display: grid; grid-template-columns: 1fr 1fr; }
.lost__room { padding: clamp(120px, 12vw, 160px) var(--gutter) var(--section-y); min-width: 0; }
.lost__room .display { color: var(--yellow); }
.lost__room h1 { margin-top: 16px; }
.lost__room p { margin-top: 18px; max-width: 40ch; }
.lost__room ul { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.lost__photo { margin: 0; min-width: 0; }
.lost__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }

/* ============================================================
   Gallery lightbox — scaffolded shared mechanism (binding default)
   Inert until a data-lightbox group container exists on the page.
   Restyle this chrome freely to match the brand; do not remove
   the mechanism. (frontend-design.md § "Gallery lightbox")
   ============================================================ */
.lightbox-zoomable {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.lightbox.is-open {
  display: flex;
  animation: lightbox-in var(--motion-duration) var(--motion-ease);
}
@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open { animation: none; }
}
.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.lightbox__frame {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 80px -16px color-mix(in srgb, var(--color-text) 60%, transparent);
}
.lightbox__caption {
  font-family: var(--font-secondary, inherit);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-bg);
  text-align: center;
  max-width: 60ch;
}
.lightbox__counter {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-secondary, inherit);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-bg);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text) 25%, transparent);
  font-size: 1.15rem;
  line-height: 1;
}
.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__prev:hover,
.lightbox__prev:focus-visible,
.lightbox__next:hover,
.lightbox__next:focus-visible {
  color: var(--color-accent);
}
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__caption[hidden],
.lightbox__counter[hidden],
.lightbox__prev[hidden],
.lightbox__next[hidden] {
  display: none;
}


/* Lightbox chrome — brand restyle (café-negro scrim, cream mat, yellow controls) */
.lightbox__scrim { background: rgba(43, 26, 20, .94); }
.lightbox__img { border: 8px solid var(--cream); box-shadow: none; }
.lightbox__caption { color: var(--cream); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8125rem; }
.lightbox__counter { color: var(--yellow); font-weight: 800; }
.lightbox__close, .lightbox__prev, .lightbox__next { background: var(--yellow); color: var(--brown); border-radius: 999px; box-shadow: none; }
.lightbox__close:hover, .lightbox__close:focus-visible,
.lightbox__prev:hover, .lightbox__prev:focus-visible,
.lightbox__next:hover, .lightbox__next:focus-visible { color: var(--brown); background: var(--cream); }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 1024px) {
  .street-bar__desk { display: flex; }
  .street-bar__cells { display: none; }
  html.js .street-bar:not(.is-shown) { transform: translateY(110%); }
}

@media (max-width: 1180px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
  .wall--menu { grid-auto-flow: row; }
  .mast__links { gap: 24px; }
  .mast__main { gap: 24px; }
}

@media (max-width: 1023px) {
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .mast__utility, .mast__links, .mast__actions { display: none; }
  .mast__main { height: 60px; justify-content: space-between; }
  .mast__brand { width: 136px; height: 60px; flex-basis: 136px; margin-right: 0; }
  .mast__brand img { height: 132px; max-width: 136px; top: 4px; }
  .mast__pages { display: inline-flex; }

  .hero-door { grid-template-columns: 1fr; min-height: 0; }
  .hero-door__outside { height: 58svh; min-height: 420px; }
  .door { margin: 20px; }
  .door img { min-height: 0; }
  .hero-door__room { padding: 48px var(--gutter) 56px; }
  .channel { min-height: 56px; }

  .cake-row__grid { grid-template-columns: 1fr; }
  .family { grid-template-columns: 1fr; padding-right: 0; padding-top: 0; }
  .family__photo img { aspect-ratio: 4 / 5; max-height: none; }
  .family__rubric { position: static; writing-mode: horizontal-tb; padding: 16px var(--gutter) 0; display: block; }
  .family__text { padding-inline: var(--gutter); }
  .tribute__grid { grid-template-columns: 1fr; }
  .rail { position: static; order: -1; }
  .review:nth-child(even) { margin-left: 0; }

  .menu-hero__grid, .especiales__grid, .bowls__grid, .desserts__grid, .seasonal__grid,
  .cakes-hero__grid, .order__grid, .plan__grid, .story__grid, .press__grid, .hours-dir__grid { grid-template-columns: 1fr; }
  .menu-hero .chips { display: none; }
  .chip-rail {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--red);
    gap: 8px;
    padding: 12px var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-bottom: 3px solid var(--brown);
  }
  .chip-rail::-webkit-scrollbar { display: none; }
  .chip-rail .chip { scroll-snap-align: start; }
  .menu-hero__plate img { aspect-ratio: 16 / 10; }
  .wall--menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .especiales__circle { width: 90vw; margin-left: -30vw; }
  .bowls__stack { order: -1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .bowls__stack .mat { flex: 0 0 72vw; scroll-snap-align: start; }
  .bowls__stack .mat:nth-child(2) { transform: none; box-shadow: none; }
  .bowls__stack .mat img { aspect-ratio: 4 / 3 !important; }
  .cafecito__grid { grid-template-columns: 1fr; }
  .cafecito__head { grid-column: auto; padding-top: 32px; }
  .cafecito__photo { grid-column: auto; grid-row: auto; order: -1; width: 70vw; justify-self: center; margin-top: -64px; }
  .desserts__photo { order: -1; }
  .desserts__text { padding-inline: var(--gutter); }
  .seasonal__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .seasonal__row figure { flex: 0 0 64vw; scroll-snap-align: start; }

  .cakes-hero__grid { min-height: 0; gap: 36px; }
  .dome { order: -1; width: 80vw; margin: 0; align-self: center; }
  .cakes-hero__text { padding-bottom: 0; }
  .cakes-hero { padding-bottom: 56px; padding-top: 96px; }
  .stand { padding-top: var(--section-y); }
  .stand__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stand__cell, .stand__cell--half { grid-column: span 1; }
  .stand__cell--half img { aspect-ratio: 1; }
  .stand__cell--big { grid-column: span 2; grid-row: span 1; aspect-ratio: 1; }
  .order__stack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .order__stack .mat, .order__stack .mat + .mat { width: auto; flex: 0 0 64vw; margin: 0; scroll-snap-align: start; box-shadow: none; }
  .slice__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .slice__row .mat { flex: 0 0 70vw; scroll-snap-align: start; }

  .cat-hero { grid-template-columns: 1fr; }
  .cat-hero__text { padding: 110px var(--gutter) 32px; }
  .rounds { height: 90vw; }
  .round--big { width: 70vw; right: -18vw; }
  .round--a { width: 44vw; right: 44vw; top: 2%; }
  .round--b { width: 38vw; right: 46vw; bottom: 2%; }
  .prow, .prow:nth-child(even) { grid-template-columns: 1fr; }
  .prow__photo { order: -1; }
  .prow:nth-child(even) .prow__text { order: 0; }
  .plan__grid { display: flex; flex-direction: column; gap: 24px; }
  .plan__main, .plan__side { display: contents; }
  .plan__main h2 { order: 1; margin-bottom: 0; }
  .plan__side .mat { order: 2; }
  .plan__side .mat img { aspect-ratio: 16 / 10; }
  .plan__main .form-card { order: 3; }
  .plan__side .pill { order: 4; align-self: flex-start; margin-top: 0; }

  .story .mosaic { order: -1; }
  .early ul { grid-template-columns: 1fr; }
  .hello__card { grid-template-columns: 1fr; }
  .hello__intro { border-right: 0; border-bottom: 4px solid var(--brown); }
  .hello__intro img { aspect-ratio: 16 / 10; }

  .lost { grid-template-columns: 1fr; }
  .lost__photo { height: 50vh; order: -1; }
  .lost__room { padding-top: 48px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .band__photo img { aspect-ratio: 4 / 3; min-height: 0; }
  .band .plate, .band--platters .plate, .band--panjamon .plate, .band--parties .plate {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    max-width: none;
    margin: -32px var(--gutter) 0;
  }
  .band--platters { padding-bottom: 0; }
  .band--platters + section { padding-top: var(--section-y); }
  .band--parties, .band--panjamon { padding-bottom: 48px; }
  .band--parties { background: var(--cream); }
  .band--panjamon { background: var(--red); }
  .band--platters { background: var(--cream); }
  .apps { display: block; min-height: 0; padding: 0; }
  .apps__photo { position: relative; }
  .apps__photo img { aspect-ratio: 4 / 3; height: auto; }
  .apps .plate { margin: -40px var(--gutter) 0; width: auto; }
  .apps { padding-bottom: var(--section-y); background: var(--brown); }
  .visit-card { grid-template-columns: 1fr; }
  .visit-card__photo { min-height: 0; aspect-ratio: 4 / 3; }
  .triptych__row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .triptych__panel { flex: 0 0 82vw; height: max(440px, 66vh); scroll-snap-align: start; }
  .triptych__link { bottom: 18px; }
  .bowls__list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .cake-frames { grid-template-columns: 1fr 1fr; }
  .cake-frames .frame:nth-child(1) .frame__crop { aspect-ratio: 4 / 5; }
  .cake-frames .frame:nth-child(2) { margin-top: 16px; }
  .cake-frames .frame:nth-child(3) { margin-top: 0; }
  .cake-frames .frame:nth-child(4) { margin-top: 16px; }

  .wall .tile--photo, .wall--menu .tile--photo { min-height: 0; }
  /* Home wall: 2 columns, numerals hold at 5.5rem */
  .wall { --num: 5.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wall .tile--end { grid-column: span 2; }
  .wall .tile--feature { grid-column: span 2; grid-row: span 1; grid-template-rows: auto 220px; }
  .wall .tile--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
  .wall .tile--tall { grid-row: span 2; }

  /* Menu wall: one column; each tile becomes a row — number block left, words on cream */
  .wall--menu { --num: 5.5rem; grid-template-columns: 1fr; }
  .wall--menu .tile:not(.tile--photo) {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: 14px;
    padding: 0 14px 0 0;
    min-height: 0;
    aspect-ratio: auto;
    background: var(--cream) !important;
    color: var(--brown) !important;
  }
  .wall--menu .tile:not(.tile--photo) > * { grid-column: 2; }
  .wall--menu .tile:not(.tile--photo) .tile__name { padding-top: 16px; color: var(--red); }
  .wall--menu .tile:not(.tile--photo) .tile__price { margin-bottom: 14px; background: var(--brown) !important; color: var(--yellow) !important; }
  .wall--menu .tile .tile__num {
    position: static;
    grid-column: 1;
    grid-row: 1 / -1;
    height: auto;
    min-height: 130px;
    left: auto;
    display: grid;
    place-items: start center;
    background: var(--tile-color);
    color: var(--num-color);
    overflow: hidden;
  }
  .wall--menu .tile--red { --tile-color: var(--red); --num-color: var(--cream); }
  .wall--menu .tile--gold { --tile-color: var(--gold); --num-color: var(--brown); }
  .wall--menu .tile--yellow { --tile-color: var(--yellow); --num-color: var(--red); }
  .wall--menu .tile__num span { margin-top: -.12em; }
  .wall--menu .tile--feature { grid-column: auto; grid-template-rows: none; }
  .wall--menu .tile--feature .tile__top { display: contents; }
  .wall--menu .tile--feature .tile__top > * { grid-column: 2; }
  .wall--menu .tile--feature .tile__top > .tile__num { grid-column: 1; }
  .wall--menu .tile--feature .tile__top .tile__num { font-size: 5.5rem; }
  .wall--menu .tile--feature .tile__inset { grid-column: 1 / -1; height: 220px; margin-right: -14px; }
  .wall--menu .tile--photo, .wall--menu .tile--wide { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; }

  .hours th, .hours td { padding: 8px 6px; }
  .footer__grid { grid-template-columns: 1fr; }
  .tribute__quote { font-size: var(--fs-h2); }
  .early ul { grid-template-columns: 1fr; }
  .round--a { right: 40vw; }
}

@media (max-width: 380px) {
  .channel { font-size: 1.05rem; padding: 10px 14px; }
  .pill { padding: .7em 1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

@media (max-width: 640px) {
  .apps__pops { grid-template-columns: 1fr 96px; }
  .apps__pops img { width: 96px; height: 96px; }
  .apps__pops .menu-item__name { max-width: 100%; }
}

/* ============================================================
   Self-hosted Google Fonts (localized by 20_performance_sweep)
   ============================================================ */
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4q9DaRvziissg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/_Xms-HUzqDCFdgfMm4S9DaRvzig.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* gujarati */
@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/a8IbNovtLWfR7T7bMJwrGIKR8Ttcte1q.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}
/* latin-ext */
@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/a8IbNovtLWfR7T7bMJwrDYKR8Ttcte1q.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Shrikhand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/a8IbNovtLWfR7T7bMJwrA4KR8TtctQ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* lt-perf:begin — generated by performance-sweep.py (rev 90): keeps sweep-added <picture>
   wrappers layout-transparent and reserves the box of content-sized hero images.
   Do not edit; re-run the sweep. */
picture[data-lt-picture] { display: contents; }
/* lt-perf:end */