/* Cluck lab: the yellow of the van, the egg stamp, the slab lettering of the logo. */

:root {
  /* Colour, from the real things: the truck and shopfront, the boxes, the inside of the egg. */
  --yellow: #ffe100;
  --yellow-deep: #f5c400;   /* tone step: the box yellow */
  --cream: #fff3c9;         /* buttermilk, the inside of the egg */
  --ink: #0d0c0a;           /* lacquer black */
  --ink-2: #1b1915;         /* raised on black */
  --ink-3: #2a2721;
  --ink-soft: #3d382c;      /* secondary text on yellow and cream */
  --paper-soft: #b9b2a1;    /* secondary text on black */

  --display: 'Zilla Slab', Rockwell, Georgia, serif;
  --text: 'Archivo', system-ui, sans-serif;

  /* One spacing scale (Utopia method): step 0 is the body size. */
  --s-2: clamp(0.375rem, 0.35rem + 0.12vw, 0.5rem);
  --s-1: clamp(0.625rem, 0.58rem + 0.2vw, 0.75rem);
  --s0: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --s1: clamp(1.5rem, 1.35rem + 0.6vw, 2rem);
  --s2: clamp(2rem, 1.6rem + 1.6vw, 3.25rem);
  --s3: clamp(3rem, 2.3rem + 3vw, 5rem);
  --s4: clamp(4rem, 2.8rem + 5vw, 8rem);
  --gap: clamp(5rem, 3rem + 9vw, 12.5rem); /* between sections: 80–200px */
  --margin: clamp(1rem, 2.2vw, 2rem);
  --screen: min(100svh, 72vw);

  /* Layered, tinted shadows, light from above (you asked for photo shadows). */
  --shadow-hue: 40deg 70% 12%;
  --lift:
    0 1px 1px hsl(var(--shadow-hue) / 0.14),
    0 4px 6px hsl(var(--shadow-hue) / 0.12),
    0 14px 22px -6px hsl(var(--shadow-hue) / 0.18),
    0 36px 56px -16px hsl(var(--shadow-hue) / 0.28);
  --lift-dark:
    0 2px 3px rgb(0 0 0 / 0.35),
    0 12px 24px -6px rgb(0 0 0 / 0.45),
    0 40px 70px -20px rgb(0 0 0 / 0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden; overflow-x: clip;
  background: var(--yellow);
  color: var(--ink);
  font: 400 var(--s0) / 1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
.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 {
  position: fixed; left: var(--margin); top: -100px; z-index: 100;
  background: var(--ink); color: var(--yellow); padding: var(--s-1) var(--s0);
}
.skip:focus { top: var(--s-1); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.board :focus-visible, .critics :focus-visible, .foot :focus-visible { outline-color: var(--yellow); }

/* Buttons: one flat fill, fully round, decided once. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4em; border-radius: 999px;
  font: 700 1rem/1 var(--text); font-stretch: 105%; text-decoration: none;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background-color 0.2s;
}
.btn-ink { background: var(--ink); color: var(--yellow); }
.btn-ink:hover { transform: translateY(-2px); }
.btn-ink:active { transform: translateY(0) scale(0.98); }
.btn-lg { min-height: 60px; font-size: 1.125rem; padding: 0 1.6em; }

/* Film grain over everything: turns the flat yellow into material. Under 300 bytes, works from disk. */
.grain {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  opacity: 0.09; mix-blend-mode: multiply;
  background-image: 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='.8' 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.2 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The 3D egg sits behind the page; the hero and the close are see-through. */
.egg-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity 0.6s ease;
}
.has-egg .egg-canvas.is-on { opacity: 1; }
#smooth-wrapper { position: relative; z-index: 1; }
#smooth-content { background: transparent; }

/* Bar: outside the smooth wrapper. Transparent over the hero, yellow once it leaves. */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: var(--s1);
  padding: var(--s-1) var(--margin);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.bar.is-solid { background: var(--yellow); box-shadow: 0 1px 0 hsl(var(--shadow-hue) / 0.1), 0 10px 30px -18px hsl(var(--shadow-hue) / 0.5); }
.wordmark {
  width: 132px; aspect-ratio: var(--logo-ratio, 582 / 171);
  background: var(--ink);
  -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat luminance;
  -webkit-mask-mode: luminance;
}
.bar-links { display: flex; gap: var(--s1); margin-left: auto; font-weight: 600; }
.bar-links a { text-decoration: none; padding: 0.6em 0; }
.bar-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: transparent; }
.hero-stage {
  position: relative; height: 100svh; min-height: 560px;
  padding: calc(var(--s4) + 24px) var(--margin) var(--s3);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end;
  overflow: hidden;
}
.hero-text { grid-column: 1 / span 7; position: relative; z-index: 2; }
.hero-title {
  font: 700 clamp(3.4rem, min(8.6vw, calc(var(--screen) * 0.15)), 9.5rem) / 0.9 var(--display);
  letter-spacing: -0.02em; max-width: 12.5ch;
}
.hero-sub { margin-top: var(--s1); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem); max-width: 34ch; color: var(--ink-soft); }
.hero-actions { margin-top: var(--s2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0) var(--s1); }

/* Live status: the one live thing, from the real hours in Dublin time. */
.live { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 600; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-soft); flex: none; }
.live.is-open .live-dot { background: #1f9d4c; box-shadow: 0 0 0 0 rgb(31 157 76 / 0.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgb(31 157 76 / 0); } 100% { box-shadow: 0 0 0 0 rgb(31 157 76 / 0); } }

.egg-fallback {
  position: absolute; z-index: 1; right: 12%; top: 50%; translate: 0 -48%;
  width: min(30vw, 44svh); aspect-ratio: 0.74; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: var(--ink); box-shadow: var(--lift);
  display: grid; place-items: center;
}
.egg-fallback-mark {
  width: 64%; aspect-ratio: var(--logo-ratio, 582 / 171); background: var(--yellow);
  -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat luminance;
  -webkit-mask-mode: luminance;
}
.has-egg .egg-fallback { visibility: hidden; }

.beats { list-style: none; position: absolute; z-index: 2; left: var(--margin); bottom: var(--s3); width: min(32vw, 30rem); }
.beat { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; }
.beat-title { font: 700 clamp(2.4rem, 1.4rem + 3.6vw, 5rem) / 0.95 var(--display); letter-spacing: -0.015em; }
.beat p { margin-top: var(--s0); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.35rem); max-width: 26ch; }

/* Without the scroll scene (no script, reduced motion): the beats read as a plain list. */
html:not(.is-scened) .beats { position: static; width: auto; display: none; }

/* ---------- Intro ---------- */
.intro { position: relative; z-index: 1; background: var(--cream); padding: var(--s3) var(--margin) calc(var(--gap) + 8rem); }
.intro-statement {
  font: 600 clamp(2.2rem, 1rem + 5vw, 6.2rem) / 1.02 var(--display); letter-spacing: -0.015em;
  max-width: 17ch;
}
.nobr { white-space: nowrap; }
.thumb {
  display: inline-block; vertical-align: -0.1em; width: 1.5em; height: 0.92em; margin: 0 0.06em;
  border-radius: 999px; overflow: hidden; background: var(--ink); box-shadow: var(--lift);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }

/* ---------- The board ---------- */
.board {
  position: relative; z-index: 1; background: var(--ink); color: #f6f1e4;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(0.75rem, 1.4vw, 1.5rem);
  padding: 0 var(--margin) var(--gap);
}
/* Overlap: the photo rises out of the cream section into the black one. */
.board-photo {
  grid-column: 1 / span 5; grid-row: 1; align-self: start;
  margin-top: -8rem; position: sticky; top: 96px;
  aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #000;
  box-shadow: var(--lift-dark);
}
.board-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.5s ease, transform 0.9s cubic-bezier(.2,.8,.2,1); }
.board-photo img.is-on { opacity: 1; transform: scale(1.02); }
.board-body { grid-column: 7 / span 6; grid-row: 1; padding-top: var(--s4); }
.board-title { font: 700 clamp(2.6rem, 1.4rem + 4vw, 5.6rem) / 0.95 var(--display); color: var(--yellow); max-width: 10ch; margin-bottom: var(--s3); }
.dishes { list-style: none; }
.dish {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--s1); align-items: baseline;
  padding: var(--s1) var(--s1); margin: 0 calc(var(--s1) * -1); border-radius: 20px;
  cursor: default; transition: background-color 0.3s;
}
.dish + .dish { margin-top: var(--s-2); }
.dish.is-on { background: var(--ink-2); }
.dish-name { font: 600 clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem) / 1.05 var(--display); }
.dish-price { font: 700 clamp(1.25rem, 1rem + 0.7vw, 1.7rem) / 1 var(--display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.dish-desc { grid-column: 1 / -1; margin-top: var(--s-1); color: var(--paper-soft); max-width: 46ch; }
.board-more { display: inline-block; margin-top: var(--s2); color: var(--yellow); font-weight: 700; font-size: 1.125rem; text-underline-offset: 5px; }

/* ---------- The van ---------- */
.van { position: relative; z-index: 1; background: var(--yellow-deep); padding-bottom: var(--s4); }
.van-bleed { position: relative; height: calc(var(--screen) * 0.86); overflow: hidden; background: #000; }
.van-bleed img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.van-title {
  position: absolute; z-index: 2; left: var(--margin); bottom: var(--s3);
  font: 700 clamp(3rem, 1rem + 7.4vw, 9.5rem) / 0.86 var(--display); letter-spacing: -0.025em;
  max-width: 17ch; color: var(--yellow);
}
/* The one gradient the house rules allow: a neutral scrim under text on a photograph. */
.van-bleed::after {
  content: ""; position: absolute; inset: 35% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0)); /* taste-skill-ignore: scrim under text on a photo */
}
.van-layers {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(0.75rem, 1.4vw, 1.5rem);
  padding: 0 var(--margin); align-items: start;
}
.van-pic { border-radius: 24px; overflow: hidden; background: #000; box-shadow: var(--lift); }
.van-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
/* Overlap: the chef's photo rises over the bottom of the van; the burgers overlap the chef. */
.van-pic-a { grid-column: 1 / span 6; grid-row: 1; aspect-ratio: 3 / 2; margin-top: -7rem; }
.van-text { grid-column: 8 / span 5; grid-row: 1 / span 2; padding-top: var(--s3); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.5; }
.van-text p + p { margin-top: var(--s1); }
.van-pic-b { grid-column: 4 / span 4; grid-row: 2; aspect-ratio: 1; margin-top: -5rem; }

/* ---------- Critics ---------- */
.critics { position: relative; z-index: 1; background: var(--ink); color: #f6f1e4; padding: var(--gap) var(--margin); }
.critics-title { font: 600 clamp(1.4rem, 1.1rem + 1vw, 2rem) / 1.1 var(--display); color: var(--yellow); margin-bottom: var(--s2); }
.quote-big p { font: 700 clamp(2.8rem, 1rem + 7vw, 8.6rem) / 0.92 var(--display); letter-spacing: -0.02em; max-width: 14ch; }
.critics footer { margin-top: var(--s0); color: var(--paper-soft); font-weight: 600; }
.quotes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(0.75rem, 1.4vw, 1.5rem); margin-top: var(--s4); }
.quotes blockquote { background: var(--ink-2); border-radius: 24px; padding: var(--s2); }
.quotes blockquote:first-child { grid-column: 1 / span 5; }
.quotes blockquote:last-child { grid-column: 7 / span 6; margin-top: var(--s3); }
.quotes p { font: 600 clamp(1.35rem, 1rem + 1vw, 2rem) / 1.2 var(--display); }

/* ---------- Visit ---------- */
.visit { position: relative; z-index: 1; background: var(--cream); padding: var(--gap) var(--margin); }
.visit-title { font: 700 clamp(3rem, 1rem + 7vw, 8.5rem) / 0.9 var(--display); letter-spacing: -0.02em; margin-bottom: var(--s3); }
.shops { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 3rem); }
.shop { display: grid; align-content: start; }
.shop-photo { aspect-ratio: 5 / 4; border-radius: 24px; overflow: hidden; background: #000; box-shadow: var(--lift); margin-bottom: var(--s1); }
.shop-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.shop-name { font: 700 clamp(2.2rem, 1.4rem + 2.6vw, 4rem) / 1 var(--display); }
.shop .live { margin-top: var(--s-1); font-size: 1.125rem; }
.shop-addr { margin-top: var(--s0); font-size: 1.125rem; }
.shop-hours { margin-top: var(--s-1); color: var(--ink-soft); }
.shop-links { margin-top: var(--s0); display: flex; gap: var(--s1); font-weight: 700; }

/* ---------- Close: the egg comes back whole ---------- */
.close { position: relative; background: transparent; }
.close .close-text { margin-left: auto; }
.close {
  min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center; padding: var(--gap) var(--margin);
}
.close-text { grid-column: 7 / span 6; }
.close-title { font: 700 clamp(3.6rem, 1rem + 9vw, 11rem) / 0.88 var(--display); letter-spacing: -0.025em; }
.close-text p { margin: var(--s1) 0 var(--s2); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem); max-width: 30ch; }

/* ---------- Footer: the name at full width ---------- */
.foot { position: relative; z-index: 1; background: var(--ink); color: var(--paper-soft); padding: var(--s4) var(--margin) var(--s2); }
.foot-mark {
  width: 100%; aspect-ratio: var(--logo-ratio, 582 / 171); background: var(--yellow);
  -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat luminance;
  -webkit-mask-mode: luminance;
}
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s0) var(--s2); margin-top: var(--s2); font-size: 0.95rem; }
.foot-row a { color: #f6f1e4; }

/* Hidden until fonts and the hero are ready; shown anyway after 3s if script never runs. */
.is-preparing .hero-sub, .is-preparing .hero-actions { opacity: 0; animation: reveal-anyway 0s 3s forwards; }
@keyframes reveal-anyway { to { opacity: 1; } }

/* Hover moves stay off on touch screens. */
@media (hover: none) {
  .btn-ink:hover { transform: none; }
}
.is-scrolling .dish:hover { background: transparent; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  :root { --screen: 100svh; --gap: 80px; }
  .bar-links { display: none; }
  .bar .btn { margin-left: auto; }
  .wordmark { width: 108px; }
  .hero-stage { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: var(--s2); }
  .hero-text { width: 100%; }
  .hero-title { font-size: clamp(2.9rem, 13vw, 4.4rem); }
  .egg-fallback { right: 50%; translate: 50% 0; top: 15%; width: 40vw; }
  .beats { width: auto; right: var(--margin); bottom: var(--s2); }

  .board { display: flex; flex-direction: column; }
  .board-photo { position: relative; top: auto; margin-top: -5rem; aspect-ratio: 1; align-self: stretch; }
  .board-body { padding-top: var(--s3); }
  .board-photo img.is-on { transform: none; }

  .van-bleed { height: 62svh; }
  .van-layers { display: flex; flex-direction: column; gap: var(--s2); }
  .van-pic-a { margin-top: -3rem; }
  .van-text { padding-top: 0; }
  .van-pic-b { margin-top: 0; width: 70%; align-self: flex-end; }
  .van-title { bottom: calc(3rem + var(--s1)); font-size: clamp(2.4rem, 11vw, 3.4rem); }

  .quotes { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s3); }
  .quotes blockquote:last-child { margin-top: 0; }

  .shops { grid-template-columns: 1fr; gap: var(--s3); }

  .close { display: flex; flex-direction: column; justify-content: flex-end; min-height: 92svh; padding-bottom: var(--s4); }
  .close-text { width: 100%; }
}

/* Phones in "desktop site" mode: a desktop width on a very tall screen. */
@media (orientation: portrait) and (min-width: 761px) {
  .hero-stage { height: min(100svh, 130vw); }
  .close { min-height: min(100svh, 120vw); }
  .board-photo { aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .live.is-open .live-dot { animation: none; }
  .btn, .board-photo img { transition: none; }
}

/* Under ScrollSmoother, CSS sticky does not work: the photo is pinned by ScrollTrigger instead. */
.is-smooth .board-photo { position: relative; top: auto; }