/* Cluck Chicken, yellow edition: the page is the van's yellow; black takes the bands the yellow used to hold. */
:root {
  /* The Cluck rooster as a solid white cut-out on transparent (made from the logo), used as a mask so it
     takes the colour of whatever it sits in, at full strength. Embedded because Chrome refuses mask
     images from separate files when the page is opened from disk. */
  --rooster: url('data:image/png;base64,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');
  --ground: #ffe11a;
  --tone: #f7d900;
  --tone-2: #efcd00;
  --ink: #0d0d0d;
  --soft: #4f4600;
  --yellow: #ffe11a;
  --yellow-2: #f2d100;
  --on-yellow: #000;
  /* The black bands and cards keep the original light text. */
  --dark-ink: #f4f4f1; --dark-soft: #bdb7a4; --dark-tone: #1c1c1c;

  --font: 'Archivo', system-ui, sans-serif;
  --s-xl: clamp(64px, 8.6vw, 156px);
  --s-l: clamp(36px, 4.2vw, 64px);
  --s-st: clamp(26px, 2.5vw, 36px);
  --s-m: 24px;
  --s-body: 18px;
  --s-sm: 14px;

  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(120px, 14vw, 200px);
  /* "One screen" for layout: the real height, capped at 72% of the width. On a tall portrait screen
     (a tablet, or a phone in desktop-site mode) full-height sections would otherwise grow huge. */
  --screen: min(100svh, 72vw);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--s-body)/1.55 var(--font);
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
/* Sideways overflow is clipped at the root too: on iPhone Safari a clip on body alone still lets the page wobble. */
html { overflow-x: hidden; overflow-x: clip; }
/* Sections reached from a link land below the fixed bar, not under it. */
main section[id] { scroll-margin-top: 72px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
::selection { background: #000; color: var(--yellow); }
:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
/* Black bands and cards: the original dark styling, so secondary text and focus rings stay readable there. */
.intro, .menu-close-text, .about-panel, .proof-band, .nav-panel, .visit-card, .foot { --ink: var(--dark-ink); --soft: var(--dark-soft); --tone-2: var(--dark-tone); }
.intro :focus-visible, .menu-close-text :focus-visible, .about-panel :focus-visible, .nav-panel :focus-visible, .visit-card :focus-visible, .foot :focus-visible { outline-color: var(--yellow); }

/* Held for a moment while the font and first burger load (see main.js); shown after 3s whatever happens. */
.is-preparing .bar, .is-preparing .hero { visibility: hidden; animation: show-anyway 0s 3s forwards; }
@keyframes show-anyway { to { visibility: visible; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: absolute; left: var(--m); top: 12px; z-index: 50; background: #000; color: var(--yellow); padding: 12px 16px; font-weight: 700; }

/* Display type: the condensed heavy cut, like the lettering on the van. */
.hero-title, .menu-title, .menu-group-title, .menu-close-title, .about-title, .proof-band, .proof-title,
.visit-title, .close-title, .foot-word, .wordmark, .strip-title, .dish-name {
  font-weight: 900;
  font-variation-settings: 'wdth' 68;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: .92;
}

/* Buttons: square, flat, one fill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  font: 800 16px/1 var(--font); font-variation-settings: 'wdth' 90;
  text-transform: uppercase; letter-spacing: .01em; text-decoration: none;
  border: 0; cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-solid { background: #000; color: var(--yellow); }
.btn-solid:hover { background: #2a2a2a; }
.btn-ink { background: var(--yellow); color: #000; }
.btn-ink:hover { background: #fff; }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 18px; }
.btn-block { display: flex; width: 100%; }

/* Bar */
/* Fixed at every width; it takes a yellow ground once the page leaves the hero so it reads over the black bands. */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--m);
  transition: background-color .3s var(--ease), padding .3s var(--ease);
}
.bar.is-solid { background: var(--yellow); padding-top: 10px; padding-bottom: 10px; }
.nav-open-page .bar { background: transparent; }
.wordmark { display: inline-flex; align-items: center; gap: .16em; font-size: 36px; color: #000; text-decoration: none; transition: color .3s var(--ease); }
.nav-open-page .wordmark { color: var(--yellow); }
/* The rooster beside the name, in the name's colour; it shrinks away while the menu panel is open. */
.wordmark-mark {
  height: .86em; aspect-ratio: 153 / 218; margin-top: -.08em; background: currentColor;
  mask: var(--rooster) center / contain no-repeat;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.nav-open-page .wordmark-mark { opacity: 0; transform: scale(.4) rotate(-20deg); }
.bar-actions { display: flex; align-items: center; gap: 12px; }
.nav-open-page .bar-order { visibility: hidden; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px;
  border: 0; cursor: pointer; background: #000; color: var(--yellow);
  font: 800 16px/1 var(--font); font-variation-settings: 'wdth' 90; text-transform: uppercase;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.nav-toggle:hover { background: #2a2a2a; }
.nav-toggle:active { transform: scale(.97); }
.nav-open-page .nav-toggle { background: var(--yellow); color: #000; }
.nav-open-page .nav-toggle:hover { background: #fff; }
.nav-toggle-icon { display: grid; gap: 5px; width: 20px; }
.nav-toggle-icon i { display: block; height: 3px; background: currentColor; transition: transform .3s var(--ease); }
.nav-toggle[aria-expanded='true'] .nav-toggle-icon i:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-icon i:last-child { transform: translateY(-4px) rotate(-45deg); }

/* The section panel: the whole screen in black, the one moment the page turns dark. */
.nav-panel {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  background: #000; color: var(--yellow);
  display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: stretch;
  padding: 96px var(--m) 32px;
}
.nav-panel[hidden] { display: none; }
/* Starts at the top, pulled up by the space above the capitals, so the first word lines up with the photo's top edge. */
.nav-links { display: grid; align-content: start; margin-top: -0.16em; font-size: clamp(44px, min(7.4vw, calc(var(--screen) * .125)), 150px); }
.nav-links a {
  position: relative; display: flex; align-items: center; gap: 24px;
  padding: 4px 0; color: var(--yellow); text-decoration: none;
  font-size: clamp(44px, min(7.4vw, calc(var(--screen) * .125)), 150px); font-weight: 900; font-variation-settings: 'wdth' 68;
  text-transform: uppercase; line-height: 1; letter-spacing: -0.01em;
}
.nav-links a span { transition: transform .3s var(--ease); }
.nav-links a:hover span, .nav-links a:focus-visible span { transform: translateX(12px); }
/* The Cluck rooster pops in beside the link you point at, cut out of the logo and filled in yellow. */
.nav-rooster {
  height: .78em; aspect-ratio: 153 / 218; flex: none; background: var(--yellow);
  /* embedded, because browsers refuse a mask image from a separate file when the page is opened straight from disk */
  mask: var(--rooster) center / contain no-repeat;
  opacity: 0; transform: translate(-8px, 6px) scale(.4) rotate(-25deg); transform-origin: 50% 90%;
  transition: opacity .2s var(--ease), transform .45s cubic-bezier(.34, 1.8, .5, 1);
}
.nav-links a:hover .nav-rooster, .nav-links a:focus-visible .nav-rooster {
  opacity: 1; transform: translate(12px, 0) scale(1) rotate(-6deg);
}
.nav-links a[aria-current='true'] span { -webkit-text-stroke: 2px var(--yellow); color: transparent; }
.nav-info { display: grid; grid-template-rows: 1fr auto auto; gap: 24px; justify-items: start; min-height: 0; }
.nav-info > .btn { margin-top: -10px; }
/* The picture of whichever section you point at. */
.nav-preview { width: 100%; height: 100%; min-height: 240px; overflow: hidden; background: #1c1c1c; }
.nav-preview img { width: 100%; height: 100%; object-fit: cover; }
.nav-shops { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.nav-shop h2 { font-size: var(--s-m); font-weight: 900; font-variation-settings: 'wdth' 80; text-transform: uppercase; line-height: 1.05; }
.nav-shop p { margin-top: 6px; }
.nav-open { font-weight: 700; }

.foot-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; background: var(--yellow);
  transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.foot-links a:hover::after { transform: scaleX(1); }

/* Hero */
.hero {
  position: relative; min-height: max(var(--screen), 640px); overflow: hidden;
  display: grid; align-items: center;
  padding: 120px var(--m) 230px;
}
.hero-object {
  position: absolute; z-index: 0;
  width: min(92vw, calc(var(--screen) * 1.5)); aspect-ratio: 1;
  right: max(-30vw, calc(var(--screen) * -.48)); top: 46%;
  transform: translateY(-50%);
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.hero-img.is-on { opacity: 1; }
.hero-pin {
  position: absolute; left: 14%; top: 64%; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; white-space: nowrap;
}
.hero-pin .dot { width: 10px; height: 10px; border-radius: 50%; background: #000; }
.hero-text { position: relative; z-index: 1; max-width: min(52vw, 760px); }
.hero-title { font-size: var(--s-xl); color: #000; }
.hero-sub { margin-top: 32px; max-width: 40ch; }
.hero-text .btn { margin-top: 32px; }
.hero-cards {
  position: absolute; z-index: 2; right: var(--m); bottom: var(--m);
  display: flex; gap: 16px;
}
.hero-card { display: block; width: clamp(170px, 15vw, 230px); text-decoration: none; overflow: hidden; background: #000; }
.hero-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .5s var(--ease); }
.hero-card:hover img { transform: scale(1.06); }
.hero-card-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 40px; padding: 0 12px; color: var(--yellow); font-weight: 800; font-size: 16px;
}
.hero-card-bar span { transition: transform .25s var(--ease); }
.hero-card:hover .hero-card-bar span { transform: translateX(4px); }

/* Intro: a black field with the food in the sentence */
.intro { background: #000; color: var(--yellow); padding: calc(var(--screen) * .16) var(--m); display: grid; place-items: center; }
/* Set big and heavy; the photos carry a hard offset shadow, like stickers on the van. */
.intro-statement {
  max-width: 1500px; text-align: center;
  font-size: clamp(24px, 3.8vw, 64px); font-weight: 900; line-height: 1.12; letter-spacing: -0.015em;
  font-variation-settings: 'wdth' 82;
}
.thumb {
  display: inline-block; height: 0.95em; width: 1.6em; margin: 0 .14em;
  vertical-align: -.12em;
  box-shadow: 0.07em 0.07em 0 var(--yellow);
  transform: rotate(-3deg);
}
.nobr:nth-of-type(2) .thumb { transform: rotate(2.5deg); }
.nobr:nth-of-type(3) .thumb { transform: rotate(-1.5deg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.nobr { white-space: nowrap; }

/* Menu */
.menu { padding: var(--gap) var(--m) 0; }
.menu-head { display: grid; justify-items: center; text-align: center; }
.menu-title { display: flex; align-items: center; justify-content: center; gap: 2vw; font-size: var(--s-xl); color: #000; }
.menu-head-img { width: clamp(140px, 22vw, 340px); margin: -4vw 0; }
.menu-lede { margin-top: 24px; max-width: 46ch; }
.allergy { margin: 56px auto 0; max-width: 980px; text-align: center; }
.allergy:not([hidden]) { display: grid; justify-items: center; gap: 16px; }
.allergy-q { font-weight: 700; }
.allergy-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--tone-2); color: var(--ink); font: 700 16px/1 var(--font);
  transition: background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.chip:hover { background: #e3c200; }
.chip:active { transform: scale(.96); }
.chip[aria-pressed='true'] { background: #000; color: var(--yellow); }
.chip[aria-pressed='true']::before { content: 'No '; }
.allergy-count { color: var(--soft); font-size: 16px; }

.menu-board {
  display: grid; grid-template-columns: 1fr clamp(180px, 40vw - 220px, 400px) 1fr;  /* the burger lane widens on big screens only */
  gap: 0 24px; margin-top: 72px; align-items: start;
}
.menu-lane { position: relative; height: 100%; }
.menu-rider-pin { position: sticky; top: calc(var(--screen) * .22); }
.menu-rider { width: 100%; }
.menu-group { margin-bottom: 72px; }
.menu-group-title { font-size: var(--s-st); color: #000; }
.menu-group-note { margin-top: 10px; color: var(--soft); font-size: 16px; max-width: 52ch; }
.dish-list { margin-top: 16px; }
.dish {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline;
  padding: 14px 16px;
}
.dish:nth-child(odd) { background: var(--tone); }
.dish.is-out { display: none; }
.dish-name { font-size: var(--s-m); line-height: 1.05; font-variation-settings: 'wdth' 78; }
.dish-desc { margin-top: 6px; font-size: 16px; line-height: 1.45; }
.dish-allergens { margin-top: 4px; font-size: var(--s-sm); color: var(--soft); }
.dish-price { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.menu-group.is-empty { display: none; }
.group-toggle {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left;
}
.group-toggle::after { content: '−'; font-size: 32px; line-height: 1; transition: transform .25s var(--ease); }
.group-toggle[aria-expanded='false']::after { content: '+'; }
.menu-group.is-closed .dish-list, .menu-group.is-closed .menu-group-note { display: none; }
.menu-col > .menu-group:last-child { margin-bottom: 0; }

/* The menu closes on a black band: Tallaght's lunch deal, a photo, one action. */
.menu-close {
  display: grid; grid-template-columns: 5fr 7fr; margin: 96px 0 var(--gap);
  color: var(--yellow); min-height: 460px;
}
.menu-close-photo { overflow: hidden; background: #000; }
/* Overfill by a hair so sub-pixel scrolling never lets the band show at the photo edge. */
.menu-close-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.02); }
.menu-close-text { background: #000; display: grid; align-content: center; justify-items: start; gap: 24px; padding: 56px clamp(24px, 5vw, 80px); }
.menu-close-title { font-size: var(--s-l); }
.menu-close-text > p:not(.menu-foot) { max-width: 44ch; font-size: 20px; }
.menu-foot { font-size: var(--s-sm); max-width: 62ch; margin-top: 8px; }

/* Strip: small frames on the yellow */
.strip { position: relative; }
.strip-title {
  position: relative; z-index: 2; margin: 0 var(--m) 8px; font-size: var(--s-st);
  display: flex; align-items: baseline; gap: 14px;
}
.strip-count { font: 400 16px var(--font); text-transform: none; color: var(--soft); }
/* Without script the window scrolls natively; with it, the row is an endless GSAP loop (main.js). */
.strip-window { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.strip-window::-webkit-scrollbar { display: none; }
.strip-window.is-loop { overflow: hidden; cursor: grab; touch-action: pan-y; }
.strip-window.is-loop.is-dragging { cursor: grabbing; }
.strip-row { position: relative; display: flex; gap: 2.5vw; width: max-content; padding: 24px var(--m) 32px; will-change: transform; }
/* The photo zooms inside its own frame on hover, so it never grows out, gets cut, or reaches the title. */
.strip-row li { flex: 0 0 17vw; height: calc(var(--screen) * .46); min-width: 160px; overflow: hidden; }
.strip-row img {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transition: transform .25s var(--ease);
}
.strip-row li:hover img { transform: scale(1.1); }

/* About: the black panel with Ian in the egg from the sauce labels */
.about { padding: var(--gap) var(--m) 0; }
.about-panel {
  position: relative; overflow: hidden; background: #000; color: var(--yellow);
  min-height: var(--screen); display: grid; grid-template-columns: 58fr 42fr; gap: 48px;
  padding: 56px 56px 0;
}
.about-title { font-size: var(--s-l); max-width: 18ch; }
.about-photo {
  width: min(40vw, 640px); aspect-ratio: 5/6; margin-top: 48px; margin-bottom: -18%;
  border-radius: 50% 50% 47% 47% / 58% 58% 42% 42%; overflow: hidden;
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.about-right { display: grid; align-content: start; gap: 48px; max-width: 380px; padding-top: 8px; }
.about-block h3 { font-size: 24px; font-weight: 900; font-variation-settings: 'wdth' 80; text-transform: uppercase; line-height: 1.05; }
.about-block p { margin-top: 10px; }
.about-right .btn { justify-self: start; }

/* Proof */
.proof { padding-top: var(--gap); }
.proof-band { background: #000; color: var(--yellow); overflow: hidden; height: calc(var(--screen) * .34); min-height: 200px; display: flex; align-items: center; }
.proof-track { display: flex; align-items: center; gap: 4vw; white-space: nowrap; font-size: 8vw; padding-left: 4vw; will-change: transform; }
.proof-track i { width: .3em; height: .3em; border-radius: 50%; background: var(--yellow); flex: none; }
/* The critics get the stage: the title on its own line, each review a tilted white card with the menu's hard
   black shadow, the words big and heavy, a giant quote mark, and who said it on a black label. */
.proof-body { padding: 72px var(--m) 0; display: grid; gap: 56px; }
.proof-title { font-size: var(--s-l); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
.quotes blockquote {
  position: relative; background: #fff; border: 3px solid #000; box-shadow: 10px 10px 0 #000;
  padding: 56px 32px 32px; display: grid; gap: 24px; justify-items: start;
}
.quotes blockquote:nth-child(1) { transform: rotate(-1.5deg); }
.quotes blockquote:nth-child(2) { transform: rotate(1deg); margin-top: 32px; }
.quotes blockquote:nth-child(3) { transform: rotate(-.75deg); }
.quotes blockquote::before {
  content: '“'; position: absolute; left: 20px; top: -46px;
  font: 900 150px/1 var(--font); color: #000;
}
.quotes p { font-size: clamp(22px, 2vw, 30px); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.quotes footer { background: #000; color: var(--yellow); font-size: 15px; font-weight: 700; padding: 8px 12px; }

/* Visit */
.visit { position: relative; margin-top: var(--gap); min-height: var(--screen); }
.visit-photo { position: absolute; inset: 0; overflow: hidden; }
.visit-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.visit-img.is-on { opacity: 1; }
.visit-card {
  position: relative; z-index: 1; margin-left: auto; margin-right: 60px; top: 60px;
  width: 420px; background: #000; color: var(--ink); padding: 32px 32px 0; display: grid; gap: 20px;
}
.visit-title { font-size: var(--s-st); color: var(--yellow); }
.shop-switch { display: flex; gap: 8px; }
.shop-btn {
  flex: 1; min-height: 44px; border: 0; cursor: pointer; background: var(--tone-2); color: var(--ink);
  font: 800 16px/1 var(--font); text-transform: uppercase; transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.shop-btn:hover { background: #2c2c2c; }
.shop-btn:active { transform: scale(.97); }
.shop-btn[aria-pressed='true'] { background: var(--yellow); color: #000; }
.open-now { font-weight: 700; min-height: 1.55em; }
/* A temporary notice set in /admin ("Closed today for a family event"), shown with the shop's details. */
.shop-notice { margin-bottom: 14px; padding: 10px 14px; background: var(--yellow); color: #000; font-weight: 700; font-size: 16px; }
.nav-shop .shop-notice { margin: 8px 0 0; }
.open-now.is-open { color: var(--yellow); }
.shop + .shop { margin-top: 24px; }
.js .shop { display: none; }
.js .shop.is-on { display: block; }
.shop-addr { font-size: 16px; }
.hours { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.hours th { text-align: left; font-weight: 400; padding: 3px 0; }
.hours td { text-align: right; padding: 3px 0; }
.hours tr.is-today { color: var(--yellow); font-weight: 700; }
.hours tr.is-today th { font-weight: 700; }
.shop-links { display: flex; gap: 24px; margin-top: 16px; font-weight: 700; }
/* The button sits inside the black card: at the card edge it would melt into the yellow page. */
.visit-card .btn-block { margin: 8px 0 32px; width: 100%; min-height: 56px; background: var(--yellow); color: #000; }
.visit-card .btn-block:hover { background: #fff; }

/* Close: the bun comes back */
.close {
  position: relative; overflow: hidden; min-height: calc(var(--screen) * .9); margin-top: var(--gap);
  display: grid; grid-template-columns: 5fr 6fr; align-items: center; padding: 0 var(--m);
}
/* The burger carries the menu burger's hard black shadow; on the wrapper so it stays put while the bun turns. */
.close-object { position: relative; height: 100%; min-height: calc(var(--screen) * .9); filter: drop-shadow(14px 14px 0 #000); }
.close-object img {
  position: absolute; width: min(58vw, 940px); max-width: none; left: -10vw; bottom: -8%;
  transform: scaleX(-1) rotate(-6deg);
}
/* On yellow the empty dark space that gave the black version its mood is gone, so the words fill it instead:
   the headline at hero size, the prices on a white sticker. */
.close-text { position: relative; display: grid; gap: 22px; justify-items: start; }
.close-title { font-size: var(--s-xl); color: #000; }
.close-text > p:not(.close-fact) { font-size: 20px; max-width: 34ch; }
.close-fact {
  font-size: var(--s-m); font-weight: 800; background: #fff; padding: 12px 18px;
  border: 3px solid #000; box-shadow: 8px 8px 0 #000; transform: rotate(-2deg); margin: 6px 0 10px;
}

/* Footer: the name across the wings */
.foot { position: relative; min-height: var(--screen); overflow: hidden; display: grid; grid-template-rows: auto 1fr; margin-top: var(--gap); color: var(--ink); background: #000; }
.foot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.foot-top { position: relative; display: flex; justify-content: space-between; gap: 32px; padding: 32px var(--m); font-size: 16px; }
.foot-links { display: grid; gap: 6px; }
.foot-links a { position: relative; justify-self: start; font-weight: 700; text-decoration: none; }
.foot-contact { font-style: normal; text-align: right; line-height: 1.7; }
.foot-bottom { position: relative; align-self: end; padding: 0 var(--m) 24px; }
.foot-word { font-size: 25.5vw; line-height: .78; color: var(--yellow); margin-left: -.03em; }
.foot-legal { margin-top: 18px; font-size: var(--s-sm); }

/* Tablet */
@media (max-width: 1024px) {
  /* One column: the groups flow as a single list, food first, drinks last, evenly spaced. */
  .menu-board { display: flex; flex-direction: column; align-items: stretch; }
  .menu-col { display: contents; }
  .menu-lane { display: none; }
  .menu-col:first-child > .menu-group:last-child { order: 1; }
  .menu-board .menu-col > .menu-group { margin-bottom: 72px; }
  .about-panel { grid-template-columns: 1fr; padding: 40px 32px 0; }
  .about-left { display: contents; }
  .about-right { max-width: 60ch; order: 2; }
  .about-photo { order: 3; }
  .about-photo { width: min(80vw, 560px); margin: 0 auto -22%; }
  .proof-body { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr 1fr; }
  .close { grid-template-columns: 1fr; padding-top: 0; }
  .close-text { order: -1; }
  /* Box and burger sized to each other, so the photo never rises over the text above it. */
  .close-object { min-height: 0; height: min(80vw, 640px); }
  .close-object img { width: min(100vw, 760px); left: -10vw; bottom: -22%; }
}

/* Phone */
@media (max-width: 680px) {
  :root { --s-xl: 15vw; --gap: 80px; --screen: 100svh; }
  .bar { padding: 14px var(--m); }
  .wordmark { font-size: 30px; }
  .bar-actions { gap: 8px; }
  .bar-actions .btn, .nav-toggle { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .nav-panel { grid-template-columns: 1fr; align-items: start; gap: 40px; padding: 96px var(--m) 48px; }
  .nav-links a { font-size: 12vw; padding: 6px 0; }
  .nav-preview { display: none; }
  .nav-info { grid-template-rows: none; }
  .nav-shops { grid-template-columns: 1fr; }
  .hero { align-items: end; padding: 0 var(--m) 200px; min-height: 100svh; }
  .hero-object { width: 130vw; right: -42vw; top: 26%; }
  .hero-pin { display: none; }
  .hero-text { max-width: none; }
  .hero-sub { margin-top: 20px; }
  .hero-text .btn { margin-top: 24px; }
  .hero-cards { left: var(--m); right: var(--m); }
  .hero-card { flex: 1; width: auto; }
  .hero-card img { aspect-ratio: 2/1; }
  .intro-statement { max-width: none; text-align: left; font-size: 7.7vw; line-height: 1.12; }

  .menu-title { gap: 8px; }
  .menu-head-img { width: 30vw; margin: -6vw 0; }
  .dish { padding: 12px; }
  .menu-close { grid-template-columns: 1fr; margin-top: 56px; min-height: 0; }
  .menu-close-photo { aspect-ratio: 4/3; }
  .menu-close-text { padding: 32px 20px 40px; }
  .menu-board .menu-col > .menu-group { margin-bottom: 8px; }
  .menu-board .menu-col > .menu-group:not(.is-closed) { margin-bottom: 40px; }
  /* Touch only: snap to a photo, lined up with the page margin rather than the screen edge. */
  .strip-window:not(.is-loop) { scroll-snap-type: x proximity; scroll-padding-inline: var(--m); }
  .strip-row li { flex-basis: 34vw; height: 51vw; scroll-snap-align: start; }
  .about { padding: 0 10px; }
  .about-panel { padding: 32px 20px 0; }
  .about-photo { width: 86vw; }
  .quotes { grid-template-columns: 1fr; }
  .proof-band { height: 22vh; min-height: 150px; }
  .proof-track { font-size: 15vw; }
  .visit { min-height: 0; display: grid; }
  .visit-photo { position: relative; height: 70svh; }
  .visit-card { width: auto; margin: -80px var(--m) 0; top: 0; padding: 24px 20px 0; }
  .visit-card .btn-block { margin: 8px 0 24px; width: 100%; }
  /* No full-screen minimum on a phone: the text, then the burger, with nothing empty around them. */
  .close { min-height: 0; gap: 8px; margin-top: 128px; }
  .close-object { min-height: 0; height: 92vw; }
  .close-object img { width: 120vw; left: -26vw; bottom: -36%; }
  .foot { min-height: 88svh; }
  .intro { padding: 72px var(--m); }
  .foot-top { flex-direction: column; }
  .foot-contact { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* The burger shots are cut out of their black studio ground (assets/img/*-cut.webp), so they sit straight on the yellow. */

/* Smooth scrolling (ScrollSmoother): the content moves inside a fixed wrapper, so the rider is pinned by GSAP instead of sticky. */
#smooth-content { background: var(--ground); }
.is-smooth .menu-rider-pin { position: relative; top: 0; }

/* No hover zoom while the page is scrolling: content sliding under a still cursor must not zoom (see main.js). */
.is-scrolling .strip-row li:hover img, .is-scrolling .hero-card:hover img { transform: none; }

/* Phone numbers never break across lines. */
a[href^="tel:"] { white-space: nowrap; }

/* Tall portrait screens wider than a phone: the panel stacks in one column (links, a wide photo, the shops)
   so it fills the height, and the photo keeps its shape instead of stretching. */
@media (orientation: portrait) and (min-width: 681px) {
  .nav-panel { grid-template-columns: 1fr; align-items: start; align-content: center; gap: 40px; }
  .nav-links { font-size: clamp(44px, 9vw, 120px); }
  .nav-links a { font-size: inherit; }
  .nav-info { grid-template-rows: auto; }
  .nav-preview { height: auto; aspect-ratio: 16 / 9; }
}

/* Touch screens: a tap leaves :hover stuck on, so the hover moves are switched off there. */
@media (hover: none) {
  .strip-row li:hover img, .hero-card:hover img { transform: none; }
  .nav-links a:hover span { transform: none; }
  .hero-card:hover .hero-card-bar span { transform: none; }
}

/* White accents: on the yellow page, white frames the food and the menu, like stickers on the van.
   (The burger cut-outs carry their white outline in the image itself, so it costs nothing as they move.) */
/* Each section's dishes sit in one black-edged block with a hard offset shadow, like the stickers on the van. */
.dish-list { border: 3px solid #000; box-shadow: 8px 8px 0 #000; background: var(--ground); }
.chip { background: #fff; color: #000; }
.chip:hover { background: #f1f1f1; }
.chip[aria-pressed='true'], .chip[aria-pressed='true']:hover { background: #000; color: var(--yellow); }
/* The hero: the burgers are stickers (white edge with a slight wobble, thin black keyline, drop shadow, baked into
   assets/img/*-hero.webp) and a faint sunburst turns slowly behind the bun. Both kept quiet on purpose. */
.hero-burst {
  position: absolute; inset: -18%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .22) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 85%); mask: radial-gradient(closest-side, #000 25%, transparent 85%);
  animation: burst-turn 90s linear infinite;
}
@keyframes burst-turn { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .hero-burst { animation: none; } }
.hero-pin {
  background: #fff; padding: 10px 16px; border: 3px solid #000; box-shadow: 6px 6px 0 #000;
  font-size: 18px; font-weight: 800; transform: rotate(-3deg);
}
.hero-card { border: 4px solid #fff; }
.strip-row li { border: 6px solid #fff; }
.thumb { border: .05em solid #fff; }
.about-photo { border: 8px solid #fff; }
/* The burger riding down the middle of the menu: larger, with the menu blocks' hard black shadow. The shadow is on
   the pin wrapper, not the turning image, so it always falls down and to the right while the burger spins. */
.menu-rider-main { position: relative; display: block; filter: drop-shadow(10px 10px 0 #000); }
/* Spin effects (main.js): bits of the burger flung off as it turns, and comic swooshes chasing the spin.
   The canvas reaches past the lane so the bits have room to fly; empty when the page is still. */
.menu-rider-fx { position: absolute; left: -12%; top: -55%; width: 124%; height: 230%; pointer-events: none; }
/* One column (tablets, tall phone screens): no full-screen minimum, so the burger follows the button closely. */
@media (max-width: 1024px) {
  .close { min-height: 0; row-gap: 24px; }
}
/* Tablet widths (and phones in desktop-site mode): a shorter box around the burger, so it sits close under the text. */
@media (min-width: 681px) and (max-width: 1024px) {
  .close-object { height: min(62vw, 520px); }
  .close-object img { bottom: -30%; }
}
/* Phones: the price sticker stays on one line. */
@media (max-width: 680px) {
  .close-fact { font-size: 17px; padding: 10px 14px; white-space: nowrap; }
}
/* Phones: the sticker burger's shadow is deeper than the plain cut-out's, so it sits a little higher and smaller, clear of the headline. */
@media (max-width: 680px) {
  .hero-object { width: 118vw; right: -34vw; top: 21%; }
}

/* Design concept credit (remove at launch): a small tag in the corner, under the menu panel. */
.concept-tag {
  position: fixed; left: 12px; bottom: 12px; z-index: 25; margin: 0; pointer-events: none;
  background: #000; color: var(--yellow); border: 2px solid #fff; padding: 6px 10px;
  font: 700 12px/1 var(--font); letter-spacing: .02em; text-transform: uppercase;
}
.nav-open-page .concept-tag { visibility: hidden; }
/* Phones: a slim strip along the bottom edge rather than a tag over the content. */
@media (max-width: 680px) { .concept-tag { left: 0; right: 0; bottom: 0; border-width: 2px 0 0; text-align: center; font-size: 10px; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); } }