/* Cluck Chicken: black like the burger shots, yellow like the van. */
:root {
  --ground: #000;
  --tone: #121212;
  --tone-2: #1c1c1c;
  --ink: #f4f4f1;
  --soft: #bdb7a4;
  --yellow: #ffe11a;
  --yellow-2: #f2d100;
  --on-yellow: #000;

  --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: var(--yellow); color: #000; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* 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: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: fixed; left: var(--m); top: 12px; z-index: 50; background: var(--yellow); color: #000; 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: var(--yellow); color: #000; }
.btn-solid:hover { background: var(--ink); }
.btn-ink { background: #000; color: var(--yellow); }
.btn-ink:hover { background: var(--tone-2); color: var(--ink); }
.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 black ground once the page leaves the hero so it reads over the yellow fields. */
.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: #000; padding-top: 10px; padding-bottom: 10px; }
.nav-open-page .bar { background: transparent; }
.wordmark { font-size: 36px; color: var(--yellow); text-decoration: none; transition: color .3s var(--ease); }
.nav-open-page .wordmark { color: #000; }
.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: var(--ink); color: #000;
  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: #fff; }
.nav-toggle:active { transform: scale(.97); }
.nav-open-page .nav-toggle { background: #000; color: var(--yellow); }
.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 van yellow. */
.nav-panel {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  background: var(--yellow); color: #000;
  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: #000; 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. The logo is a yellow rooster on black,
   so used as a luminance mask over a black fill it leaves just the rooster, with no box. */
.nav-rooster {
  height: .78em; aspect-ratio: 153 / 218; flex: none; background: #000;
  /* embedded, because browsers refuse a mask image from a separate file when the page is opened straight from disk */
  mask: url('data:image/jpeg;base64,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') center / contain no-repeat luminance;
  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 #000; 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: #000; }
.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: var(--yellow); }
/* The 3D egg: a canvas filling the hero, behind the type. Where WebGL is available the burger photo is hidden
   from the start (.will-3d, set in <head>) and the egg fades in; without it the photos stay. */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.has-3d .hero-canvas { opacity: 1; }
.will-3d .hero-img, .has-3d .hero-img { opacity: 0 !important; }
.has-3d .hero-object { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.has-3d .hero-object:active { cursor: grabbing; }
.hero-text { position: relative; z-index: 1; max-width: min(52vw, 760px); }
/* With the egg: the headline keeps to two lines on wide screens; the egg takes the rest of the width. */
@media (min-width: 681px) { .has-3d .hero-text, .will-3d .hero-text { max-width: min(56vw, 1060px); } }
.has-3d .hero-pin, .will-3d .hero-pin { display: none; } /* it labelled the burger photo */
.hero-title { font-size: var(--s-xl); color: var(--yellow); }
.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: var(--yellow); }
.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: #000; 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 yellow field with the food in the sentence */
.intro { background: var(--yellow); color: #000; 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 #000;
  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: var(--yellow); }
.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: #2c2c2c; }
.chip:active { transform: scale(.96); }
.chip[aria-pressed='true'] { background: var(--yellow); color: #000; }
.chip[aria-pressed='true']::before { content: 'No '; }
.allergy-count { color: var(--soft); font-size: 16px; }

.menu-board {
  display: grid; grid-template-columns: 1fr clamp(160px, 18vw, 280px) 1fr;
  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: var(--yellow); }
.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 yellow band: Tallaght's lunch deal, a photo, one action. */
.menu-close {
  display: grid; grid-template-columns: 5fr 7fr; margin: 96px 0 var(--gap);
  color: #000; min-height: 460px;
}
.menu-close-photo { overflow: hidden; background: #000; }
/* Overfill by a hair so sub-pixel scrolling never lets the yellow 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: var(--yellow); 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, lots of black */
.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 yellow panel with Ian in the egg from the sauce labels */
.about { padding: var(--gap) var(--m) 0; }
.about-panel {
  position: relative; overflow: hidden; background: var(--yellow); color: #000;
  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: var(--yellow); color: #000; 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: #000; flex: none; }
.proof-body { padding: 56px var(--m) 0; display: grid; grid-template-columns: 3fr 9fr; gap: 32px; }
.proof-title { font-size: var(--s-st); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.quotes p { font-size: var(--s-m); line-height: 1.35; font-weight: 600; }
.quotes footer { margin-top: 16px; color: var(--soft); font-size: 16px; }

/* 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; 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; }
.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; }
.visit-card .btn-block { margin: 0 -32px; width: calc(100% + 64px); min-height: 56px; background: var(--yellow); color: #000; }
.visit-card .btn-block:hover { background: var(--ink); }

/* 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: 8fr 4fr; align-items: center; padding: 0 var(--m);
}
.close-object { position: relative; height: 100%; min-height: calc(var(--screen) * .9); }
.close-object img {
  position: absolute; width: min(70vw, 1100px); max-width: none; left: -14vw; bottom: -8%;
  transform: scaleX(-1) rotate(-6deg);
}
.close-text { position: relative; display: grid; gap: 18px; justify-items: start; }
.close-title { font-size: var(--s-l); color: var(--yellow); }
.close-fact { font-size: var(--s-m); font-weight: 800; }

/* 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); }
.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: 0 -20px; width: calc(100% + 40px); }
  /* 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 on black: let the black drop out so turning or drifting never shows the square's corners. */
.hero-img, .menu-head-img, .close-object img { mix-blend-mode: lighten; }
/* The rider's pin wrapper is moved by GSAP, which makes it its own layer: blend the whole layer, not the image inside it. */
.menu-rider-pin { mix-blend-mode: lighten; }

/* 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; }
}

/* Grain: fine noise as an extra background layer on the big colour fields (an inline SVG, so it works
   from disk). It sits under the type, never over it, and gives the flat yellow and black some material. */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.6 1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
#smooth-content, .intro, .menu-close-text, .about-panel, .proof-band { background-image: var(--grain); }