/* 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: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: absolute; 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); }
.hero-text { position: relative; z-index: 1; max-width: min(52vw, 760px); }
.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; }
}