:root {
  --ink: #f6f0e2;
  --muted: #d9d0bd;
  --sign: #ffd81a;
  --panel: rgba(14, 11, 8, 0.78);
  --night: #0d1324;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  color: var(--ink);
  background: var(--night);
  font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* top nav */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  display: flex; justify-content: center; pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex; gap: 2px; padding: 3px;
  background: rgba(14, 11, 8, 0.6); border-radius: 999px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nav a {
  color: var(--muted); text-decoration: none; font-size: 0.85rem;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { background: var(--sign); color: #16140f; }

/* each stop is a screen of scroll; its panel sits at the bottom */
main { position: relative; z-index: 1; }
.stop {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 72px 16px calc(20px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.spacer { min-height: 70vh; min-height: 70svh; }
.panel {
  pointer-events: auto;
  width: 100%; max-width: 30rem;
  background: var(--panel); border: 1px solid rgba(255, 216, 26, 0.22); border-radius: 10px;
  padding: 14px 16px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
h1, h2 { font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; color: var(--sign); margin: 0 0 6px; }
h1 { font-size: clamp(1.7rem, 7vw, 2.5rem); }
h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
p { margin: 0 0 8px; color: var(--ink); }
a { color: var(--sign); }
a:focus-visible { outline: 3px solid var(--sign); outline-offset: 2px; border-radius: 4px; }

.btn {
  display: inline-block; margin-top: 4px; padding: 10px 16px; border-radius: 8px;
  background: var(--sign); color: #16140f; font-weight: 700; text-decoration: none;
}
.btn:hover { background: #fff07a; color: #16140f; }
.foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; }
.foot a { color: var(--ink); }

.cue {
  align-self: center; margin: 0; font-size: 0.8rem; color: var(--ink);
  text-shadow: 0 1px 4px #000; opacity: 0.85;
}
.cue::after { content: ""; display: block; width: 10px; height: 10px; margin: 4px auto 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .cue::after { animation: none; } }

@media (min-width: 900px) {
  .stop { padding-left: 40px; padding-right: 40px; }
}

/* No WebGL (or ?flat): a plain page */
.flat #scene, .flat .spacer, .flat .cue { display: none; }
.flat body { background: linear-gradient(#0d1324, #1b1410); }
.flat .stop { min-height: 0; padding-top: 16px; padding-bottom: 16px; }
.flat main { padding-top: 56px; }

/* ---------- the menu stop ----------
   A screen and a bit of the counter first (photo on the back wall, menu on the bar), then the card rises over it.
   main.js holds the camera at this stop until the card has passed (the [data-hold] element). */
.menu-stop {
  justify-content: flex-start;
  padding-top: 150vh; padding-top: 150svh;
  padding-bottom: 85vh; padding-bottom: 85svh;
}
.menu-card {
  --red: #c8261e; --cream: #fbf1d4; --ink: #2a2420; --tile: #ffd81a;
  pointer-events: auto;
  width: 100%; max-width: 34rem;
  color: var(--ink);
  background: var(--cream);
  border: 7px solid var(--red); border-radius: 14px;
  box-shadow: 0 0 0 2px var(--cream) inset, 0 0 0 4px var(--red) inset, 0 18px 50px rgba(0, 0, 0, 0.55);
  padding: 18px 16px 16px;
}
.menu-card p, .menu-card li, .menu-card h3 { color: var(--ink); }
/* David's two faces: Proxima Nova for the display lines, Roboto Slab for the menu text. Proxima Nova is an
   Adobe font: "proxima-nova" is the name an Adobe Fonts web project serves it under; until one is linked,
   visitors without it installed get Montserrat. */
.menu-card { --sans: "proxima-nova", "Proxima Nova", Montserrat, system-ui, sans-serif; --slab: "Roboto Slab", Rockwell, Georgia, serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header: a role either side of the name in sign tiles */
.mc-head {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  margin: -14px -12px 16px; padding: 14px 12px;   /* out to the card's inner red line */
  background: #f6e3a6; border-bottom: 2px solid var(--ink); border-radius: 3px 3px 0 0;
}
.mc-role {
  margin: 0; font-family: var(--sans); font-weight: 600; font-size: 1.05rem; line-height: 1;
  font-variant-caps: small-caps; letter-spacing: 0.04em; white-space: nowrap;
}
.mc-role .star { color: var(--red); font-size: 1.15em; vertical-align: -0.05em; }
.mc-tiles { order: -1; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; }
.mc-tiles .row { display: flex; gap: 4px; }
.mc-tiles b {
  display: grid; place-items: center;
  width: clamp(2rem, 10vw, 2.5rem); aspect-ratio: 1;
  background: var(--tile); color: #16140f; border: 3px solid #1b1a14; border-radius: 3px;
  font: 900 clamp(1.3rem, 6vw, 1.6rem)/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* three plates, left to right */
.mc-plates { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 20px; }
.mc-plates li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mc-plates img {
  width: 82%; max-width: 260px; height: 150px; object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(80, 50, 20, 0.25));
}
.mc-plates h3 { margin: 10px 0 4px; font-family: var(--slab); font-size: 1.45rem; font-weight: 700; line-height: 1.15; letter-spacing: 0; }
.mc-plates p { margin: 0; font-family: var(--slab); font-size: 1.02rem; line-height: 1.35; max-width: 17rem; }

/* bottom: the boring version in a band, then the Say Hello coaster and the mug */
.mc-bottom { display: grid; gap: 16px; margin: 0 -12px -12px; }
.mc-full { padding: 14px 12px 16px; background: #f1e2b8; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.mc-full h3 { margin: 0 0 6px; font-family: var(--sans); font-style: italic; font-weight: 700; font-size: 1.6rem; line-height: 1.1; letter-spacing: 0; }
.mc-full p { margin: 0; font-family: var(--slab); font-size: 1rem; line-height: 1.4; }
.mc-full a { color: var(--red); font-weight: 700; }
.mc-full a:focus-visible, .coaster:focus-visible { outline-color: #1e5aa8; }
.mc-hello { display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 16px 16px; }
.mc-hello .mug { width: 132px; height: auto; margin-left: -14px; filter: drop-shadow(0 8px 10px rgba(80, 50, 20, 0.25)); }
.coaster {
  position: relative; flex: none; width: 168px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; text-decoration: none;
  background: var(--red); color: #fff8e6;
  box-shadow: 0 0 0 3px var(--cream) inset, 0 0 0 5px #fff8e6 inset, 0 6px 12px rgba(80, 50, 20, 0.3);
  transition: transform 0.15s;
}
.coaster:hover { transform: rotate(-6deg) scale(1.03); }
.coaster svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.coaster text { font-family: var(--sans); font-weight: 600; font-size: 21px; letter-spacing: 0.04em; fill: currentColor; }
.coaster span { position: relative; font-family: var(--slab); font-weight: 700; font-size: 1.6rem; line-height: 1.25; }

/* wide screens: the placemat, landscape */
@media (min-width: 760px) {
  .menu-stop { align-items: center; }
  .menu-card { max-width: 60rem; padding: 18px 26px 20px; }
  .mc-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin: -14px -22px 22px; padding: 16px 22px; }
  .mc-tiles { order: 0; }
  .mc-role { font-size: 1.2rem; }
  .mc-plates { grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 26px; }
  .mc-plates img { height: 170px; width: 100%; }
  .mc-bottom { grid-template-columns: 1fr auto; align-items: stretch; gap: 0; margin: 0 -22px -16px; }
  .mc-full { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px 20px; border-bottom: 0; border-radius: 0 0 0 3px; border-right: 2px solid var(--ink); }
  .mc-full h3 { font-size: 2.2rem; }
  .mc-full p { font-size: 1.1rem; max-width: 34rem; }
  .mc-hello { padding: 12px 18px 12px 26px; }
}
@media (prefers-reduced-motion: reduce) { .coaster { transition: none; } }
.flat .menu-stop { padding-top: 16px; padding-bottom: 16px; }

/* Zooming into the arcade screen: the page's panels and nav step aside. */
.is-zooming main, .is-zooming .nav { opacity: 0; pointer-events: none; transition: opacity 0.25s; }