/* Toastie — demo site.
   Rules borrowed from the swity site: every section is one screen tall, one idea
   per screen, almost no copy. Louder than swity: huge chunky type and flat
   enamel colour, the app's own palette (App/Support/Palette.swift).
   Section-to-section movement on desktop is script.js's eased pager, not CSS
   snapping. */

:root {
  --red: #D6291F;          /* Kitchen.enamel */
  --red-light: #EF5240;    /* Kitchen.enamelLight */
  --red-deep: #951410;     /* Kitchen.enamelDeep */
  --red-ink: #BF221A;      /* Kitchen.redInk: red that carries words on paper */
  --cream: #FFF8EE;
  --paper: #FFFFFF;
  --ink: #27444F;          /* the app's ink */
  --ink-2: #4E6770;
  --pink: #FDCAD0;         /* ServedScene.wallLit */
  --pink-deep: #E29EA9;    /* ServedScene.wallShade */
  --blue: #AEDEF0;         /* ServedScene.tableFront */
  --blue-deep: #A3C6DA;    /* ServedScene.tableBack */
  --plate: #15171B;        /* Kitchen.plateBase */
  --heat: #FF6A1E;         /* Kitchen.plateHeat */
  --ti: #2B2E33;           /* device titanium */

  /* Jost is the free cut closest to Futura, which the app uses for its legends. */
  --display: "Jost", Futura, "Trebuchet MS", system-ui, sans-serif;
  --sans: "Jost", Futura, system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(20px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--red); color: var(--cream);
  font-family: var(--sans); font-size: 18px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Keyboard focus: a clear ring, never on mouse clicks. */
:focus { outline: none; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
.how :focus-visible, .legal main :focus-visible, .menu :focus-visible { outline-color: var(--ink); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
figure { margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

.display {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.04em;
  line-height: 0.88; margin: 0; text-wrap: balance;
}

.wordmark { display: inline-block; line-height: 0; }
.wordmark img { height: 100%; width: auto; }

/* ------------------------------------------------------------------ NAV */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center;
  padding: 16px var(--gutter);
  transition: background .3s var(--ease), padding .3s var(--ease);
}
.nav { justify-content: space-between; }
.nav .wordmark { height: 36px; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.nav-links a { color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.nav-links a:not(.social):hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.nav-links .social { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .2s; }
.nav-links .social:hover { background: rgba(255,255,255,.26); }
.nav-links .social svg { width: 21px; height: 21px; }
.nav-links { gap: 10px; }
@media (max-width: 640px) { .nav-links a:not(.social) { display: none; } }
.nav.solid { background: var(--red); background: color-mix(in srgb, var(--red) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-block: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0,0,0,.25);
}
a.pill { transition: transform .2s var(--pop); }
a.pill:hover { transform: translateY(-2px) rotate(-1deg); }
.pill svg { width: 20px; height: 20px; }
.pill.red { background: var(--red); box-shadow: 0 5px 0 var(--red-deep); }
/* The "next section" links: plain words and a small arrow that nudges down. */
.next {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.next svg { width: 18px; height: 18px; animation: nudge 2.4s var(--ease) infinite; }
.next:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.next-light { color: #fff; }
.next-red { color: var(--red); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.hero > .next { position: absolute; left: 50%; bottom: max(44px, 5svh); translate: -50% 0; z-index: 3; }

/* ------------------------------------------------------------------ 1 · HERO */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; align-content: center;
  padding: 110px var(--gutter) 110px; gap: 3vw;
  background:
    radial-gradient(60vw 60vw at 75% 50%, var(--red-light) 0%, transparent 60%),
    var(--red);
}
.hero .kicker {
  font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.45vw, 26px);
  letter-spacing: -0.02em; margin: 0 0 10px; color: color-mix(in srgb, var(--cream) 90%, var(--red));
}
.hero h1 { font-size: clamp(58px, 6.6vw, 140px); color: var(--cream); }
.hero h1 em { font-style: normal; color: var(--blue); }   /* the table's blue (Tom, 1 Oct) */
.hero .kicker-after { margin: clamp(14px, 2svh, 22px) 0 0; font-size: clamp(14px, 1.05vw, 19px); font-weight: 600; }
/* Apple's own badge, white and unaltered (Tom, 10 Oct). Across: in the copy's
   column, its foot level with the picker's, so it sits beside the dots and
   the device's name (both about 50 px tall). Upright it moves under the
   picker; see below. Apple asks for clear space round it. */
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-art { grid-column: 2; grid-row: 1; }
.store-badge { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; line-height: 0; border-radius: 9px; transition: transform .15s var(--ease); }
.store-badge img { width: 150px; height: auto; }
.store-badge:hover { transform: translateY(-1px); }
.store-badge:active { transform: translateY(1px); }

.hero-art { position: relative; align-self: center; padding-bottom: 96px; }
.devices { position: relative; aspect-ratio: 1.35; }

/* The canvas bleeds past its box so a turning device is never clipped; the
   shadow under it is CSS, which has no edge to be cut off at. */
#deviceCanvas { position: absolute; inset: -6% -8%; width: 116%; height: 112%; display: block; }
.devices::before {
  content: ""; position: absolute; left: 12%; right: 6%; top: 18%; bottom: 0;
  background: radial-gradient(closest-side, rgba(70,0,0,.32), transparent);
  filter: blur(18px); transform: translate(2%, 6%); pointer-events: none;
}
.duo-video { position: absolute; display: block; pointer-events: none; visibility: hidden; }
.duo-video.on { visibility: visible; }
.no-webgl .devices { background: url(assets/screens/duo-result.avif?v=1006a) center / contain no-repeat; }

.sticker {
  position: absolute; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 14px 14px rgba(80,0,0,.35));
  transform: rotate(var(--r, 0deg));
  animation: bob 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

.picker { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.picker .dots { display: flex; gap: 14px; }
.picker .dots button {
  position: relative; width: 14px; height: 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 40%, transparent);
  transition: background .25s, transform .3s var(--pop);
}
.picker .dots button::after { content: ""; position: absolute; inset: -10px; } /* a thumb-sized target */
.picker .dots button[aria-checked="true"] { background: var(--cream); transform: scale(1.3); }
.picker-label { margin: 0; font-family: var(--display); font-weight: 700; font-size: 18px; }
.picker-label span { opacity: .7; font-weight: 600; margin-left: 6px; }

/* Phones and tablets: one column, and the whole hero, link included, fits
   one screen. Tall phones get the room; short ones scroll a little. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; align-content: center; padding: 84px var(--gutter) 76px; gap: 14px; }
  .hero .kicker { font-size: clamp(15px, 3.8vw, 19px); margin-bottom: 6px; }
  .hero .kicker-after { margin: 10px 0 0; font-size: clamp(13px, 3.3vw, 16px); }
  /* Upright: centred between the picker and "How it works", a quarter smaller. */
  .hero-copy, .hero-art { grid-column: auto; grid-row: auto; }
  .store-badge { grid-column: auto; grid-row: auto; align-self: auto; justify-self: center; margin: 22px 0 6px; }
  .store-badge img { width: 150px; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 96px); }
  .hero-art { padding-bottom: 62px; }
  .devices { aspect-ratio: 1.5; }
  .hero > .next { bottom: 22px; }
  .nav .wordmark { height: 30px; }
}
/* Tablets upright: there is room for a much bigger device. */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .hero { padding-top: 100px; gap: 22px; }
  .hero h1 { font-size: clamp(56px, 10vw, 104px); }
  .hero-art { width: min(100%, 56svh); justify-self: center; }
  .devices { aspect-ratio: 1.4; }
  .stage { width: min(100%, 50svh); }
}

/* ------------------------------------------------------------------ 2 · HOW IT WORKS
   Three screens of scroll, one pinned screen. The step is picked from scroll
   progress in script.js and written to [data-step]; everything else is CSS. */
.how { position: relative; height: 300vh; height: 300svh; background: var(--paper); color: var(--ink); }
.how-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 90px var(--gutter) 110px; gap: 4vw;
}
.how-kicker {
  font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.01em;
  color: var(--red-ink); margin: 0 0 18px; display: flex; gap: 12px; align-items: center;
}
.how-kicker .dots { display: inline-flex; gap: 8px; }
.how-kicker .dots i { width: 10px; height: 10px; border-radius: 50%; background: #E9DCD6; transition: background .3s, transform .3s var(--pop); }
.how[data-step="0"] .how-kicker .dots i:nth-child(1),
.how[data-step="1"] .how-kicker .dots i:nth-child(2),
.how[data-step="2"] .how-kicker .dots i:nth-child(3) { background: var(--red); transform: scale(1.3); }

.steps { position: relative; }
.step { position: absolute; inset: 0 auto auto 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.step:first-child { position: relative; }
.how[data-step="0"] .step:nth-child(1),
.how[data-step="1"] .step:nth-child(2),
.how[data-step="2"] .step:nth-child(3) { opacity: 1; }
.step h2 { font-size: clamp(76px, 10vw, 190px); }
.step p { font-size: clamp(20px, 1.6vw, 26px); color: var(--ink-2); white-space: nowrap; margin: 22px 0 0; font-weight: 500; line-height: 1.35; }

.how .next { position: absolute; left: 50%; bottom: max(40px, 5svh); translate: -50% 0; }
.step-nav { display: flex; gap: 12px; margin-top: clamp(24px, 4svh, 40px); }
.step-arrow {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.2);
  transition: transform .2s var(--pop), opacity .2s;
}
.step-arrow svg { width: 22px; height: 22px; }
.step-arrow:hover:not(:disabled) { transform: translateY(-2px); }
.step-arrow:disabled { opacity: .25; cursor: default; box-shadow: none; }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) { .step-nav { margin-top: 16px; } .step-arrow { width: 44px; height: 44px; } }

.stage {
  touch-action: pan-y;
  position: relative; aspect-ratio: 1; width: min(100%, 66svh); justify-self: center;
  border-radius: clamp(28px, 3vw, 48px); overflow: hidden;
  background: var(--blue);
}
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.how[data-step="0"] .scene-build,
.how[data-step="1"] .scene-press,
.how[data-step="2"] .scene-serve { opacity: 1; }

/* Build: the 2D prep view on the blue table; each frame settles onto the one
   before it, so the fillings appear to be laid on. */
.scene-build { background: url(assets/table.jpg) 50% 50% / cover var(--blue); }
.board2d { position: absolute; inset: 7%; filter: drop-shadow(0 14px 16px rgba(30,70,100,.3)); }
.board2d img { position: absolute; inset: 0; width: 100%; }
.board2d .frame { opacity: 0; transition: opacity .5s ease; }
.how[data-step="0"] .board2d .frame { opacity: 1; transition-delay: var(--d, 0s); }

/* Press: the 3D Duo from the hero, on the game's table blue, with the same
   soft CSS shadow under it. The camera follows it in as the lid folds shut. */
.scene-press {
  background: radial-gradient(75% 75% at 50% 42%, #B9DDEA 0%, #8DBFCC 70%);
}
.scene-press::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 30%; bottom: 8%;
  background: radial-gradient(closest-side, rgba(20,60,80,.34), transparent);
  filter: blur(16px); transform: translateY(8%); pointer-events: none;
}
#pressCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-press.no-webgl { background: url(assets/screens/duo-grill.avif?v=1006a) center / 86% auto no-repeat, #8DBFCC; }

/* Serve: the owner's room photograph (horizon at 683.5/1254, ServedScene
   .imageHorizon) and the composed plate standing on the counter, with the
   game's contact shadow reaching 15% past the plate on every side. */
/* Upright layout: horizon = plateTop + 0.087 side. Plate top 25%, side 74%, so
   the photo's wall line (0.5451 of it) is placed at 31.4% of the stage. */
.scene-serve { background: url(assets/room.jpg) 50% 93% / 160% auto; }
.served {
  position: absolute; left: 13%; width: 74%; aspect-ratio: 1; top: 25%; z-index: 1;
}
.served .shadow { position: absolute; left: -15%; top: -15%; width: 130%; max-width: none; }
/* The game's render carries its own contact shadow, so it is drawn at 125%
   of the box, the plate filling the box as before. */
.served .food { position: absolute; left: -12.5%; top: -12.5%; width: 125%; max-width: none; }
.stars { position: absolute; top: 7%; left: 0; right: 0; display: flex; justify-content: center; gap: 2%; z-index: 2; }
.stars svg { width: 10%; color: var(--red); transform: scale(0); transition: transform .45s var(--pop); filter: drop-shadow(0 3px 0 var(--red-deep)); }
.how[data-step="2"] .stars svg { transform: scale(1); transition-delay: calc(.8s + var(--i) * .12s); }

@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .how-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: 80px var(--gutter) 90px; gap: 22px; }
  .stage { order: -1; width: min(100%, 44svh); }
  .step h2 { font-size: clamp(60px, 18vw, 110px); }
  .step p { margin-top: 12px; font-size: clamp(15px, 4.6vw, 20px); }
  .how-kicker { margin-bottom: 10px; }
  .how .next { bottom: 24px; }
}

/* ------------------------------------------------------------------ 3 · MENU + FOOTER */
.menu {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: url(assets/table.jpg) 50% 50% / cover var(--blue);
  color: var(--ink); overflow: hidden;
}
.menu-head { padding: clamp(100px, 13svh, 150px) var(--gutter) 0; text-align: center; }
.menu-head h2 { font-size: clamp(60px, 8.4vw, 160px); color: #fff; text-shadow: 0 4px 0 rgba(40,90,120,.18); }
.menu-head p { font-size: clamp(20px, 1.6vw, 26px); font-weight: 600; color: var(--ink); margin: 18px auto 0; }

.marquee { position: relative; margin: auto 0; padding: 20px 0; display: flex; overflow: hidden; }
.marquee-track { display: flex; gap: clamp(8px, 1.4vw, 24px); padding-right: clamp(8px, 1.4vw, 24px); flex-shrink: 0; animation: slide 60s linear infinite; }
@keyframes slide { to { transform: translateX(-100%); } }
.dish { width: clamp(220px, 22vw, 360px); flex-shrink: 0; text-align: center; }
/* The plate fills its picture edge to edge, so a drop-shadow traced the
   picture's square edges. A round box-shadow under the circle instead: small
   and soft, only below the plate (Tom, 30 Sep). */
.dish img { width: 100%; border-radius: 50%; box-shadow: 0 12px 14px -7px rgba(40,80,110,.30); }
.dish figcaption { font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.3vw, 22px); margin-top: 10px; letter-spacing: -0.01em; }

.foot {
  background: var(--red); color: var(--cream);
  padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
}
.foot .wordmark { height: 30px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot nav a { text-decoration: none; font-weight: 600; font-size: 17px; }
.foot nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot small { font-size: 14px; opacity: .7; }
.foot .credit { flex-basis: 100%; order: 3; margin: 0; font-size: 14px; opacity: .85; }

/* ------------------------------------------------------------------ phones held sideways
   Short and wide: back to two columns, with everything scaled to the height. */
@media (orientation: landscape) and (max-height: 540px) {
  .nav { padding-block: 10px; }
  .hero { grid-template-columns: 1fr 1fr; align-content: center; padding: 64px var(--gutter) 52px; gap: 3vw; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-art { grid-column: 2; grid-row: 1; }
  .store-badge { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; margin: 0; }
  .store-badge img { width: 120px; }
  .hero .kicker { font-size: clamp(13px, 3svh, 16px); }
  .hero .kicker-after { margin-top: 6px; font-size: 13px; }
  .hero h1 { font-size: clamp(34px, 11svh, 64px); }
  .hero-art { width: auto; padding-bottom: 50px; }
  .devices { aspect-ratio: 1.5; }
  .picker-label { font-size: 15px; }
  .hero > .next { bottom: 14px; font-size: 16px; }
  .how-pin { grid-template-columns: 1.1fr 1fr; grid-template-rows: none; align-items: center; padding: 60px var(--gutter) 46px; gap: 4vw; }
  .stage { order: 0; width: min(100%, 64svh); }
  .how-kicker { margin-bottom: 6px; font-size: 16px; }
  .step .num { font-size: 18px; margin-bottom: 2px; }
  .step h2 { font-size: clamp(40px, 15svh, 80px); }
  .step p { font-size: 16px; margin-top: 8px; }
  .step-nav { margin-top: 12px; }
  .step-arrow { width: 38px; height: 38px; }
  .how .next { bottom: 12px; font-size: 16px; }
  .menu-head { padding-top: 64px; }
  .menu-head h2 { font-size: clamp(40px, 13svh, 72px); }
  .menu-head p { margin-top: 8px; font-size: 16px; }
  .dish { width: clamp(150px, 38svh, 220px); }
}

/* ------------------------------------------------------------------ reveal + motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .18s; } .d3 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ legal pages */
.legal { background: var(--cream); color: var(--ink); min-height: 100svh; display: flex; flex-direction: column; }
.legal .nav { position: sticky; background: var(--red); }
.legal main { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding: 70px 0 90px; flex: 1; }
.legal h1 { font-size: clamp(56px, 8vw, 110px); color: var(--red); }
.legal .updated { color: var(--ink-2); font-weight: 600; margin: 18px 0 40px; }
.legal .short {
  background: var(--paper); border-radius: 28px; padding: 28px 32px; margin-bottom: 48px;
  box-shadow: 0 4px 0 #EFE2DA; font-size: 20px; font-weight: 500;
}
.legal .short ul { margin: 12px 0 0; padding-left: 1.2em; }
.legal h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: 30px; margin: 44px 0 10px; }
.legal p, .legal li { color: #34505A; }
.legal main a { color: var(--red-ink); font-weight: 600; }
/* The press page's gameplay video (10 Oct): square, on white, as recorded. */
.press-video { margin: 34px 0 10px; }
.press-video video { display: block; width: min(100%, 540px); height: auto; aspect-ratio: 1; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -14px rgba(39,68,79,.35); }
.press-video figcaption { margin-top: 12px; font-weight: 700; color: var(--ink); }
.legal .draft { background: #FFF1B8; border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 600; }

/* ------------------------------------------------------------------ phones and tablets
   (Tom, 30 Sep) The header scrolls away with the page instead of sticking to
   the top. Every section is at least one whole screen, measured with the
   browser's bars hidden (lvh), so the edge of the section before never shows
   once you are in the next one. The links at the foot of a screen stay above
   the bars while they are showing. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .nav { position: absolute; }
  .legal .nav { position: relative; }
  .hero { min-height: 100lvh; }
  .hero > .next { bottom: calc(22px + (100lvh - 100svh)); }
  .how { height: 300lvh; }
  .how-pin { height: 100lvh; padding-top: 48px; padding-bottom: calc(90px + (100lvh - 100svh)); }
  .how .next { bottom: calc(24px + (100lvh - 100svh)); }
  .menu { min-height: 100lvh; }
  /* The title and the plates stay together (Tom, 1 Oct: less room between the
     line and the plates, and under them). The plates are a size up, and what
     the screen has left over goes three parts above the title to one below
     the plates, never between them. */
  .menu-head { padding-top: 40px; flex: 3 0 auto; display: flex; flex-direction: column; justify-content: flex-end; }
  .marquee { margin: 18px 0 0; padding: 30px 0 30px; flex: 1 0 auto; align-items: flex-start; }   /* +24 top and bottom (Tom, 1 Oct) */
  .dish { width: min(66vw, 300px); }
}
/* Phones upright (Tom, 30 Sep): the hero's copy sits just under the logo, and
   the room left over goes to the bottom, where Safari's bar is, rather than
   centring the content in the taller bars-hidden screen. */
@media (orientation: portrait) and (max-width: 599px) {
  /* (Tom, 10 Oct) More room under the logo, and no empty red under "How it
     works": the hero is as tall as what is in it, the link in the flow at
     its foot rather than pinned to the bottom of a full screen. */
  .hero { align-content: start; min-height: 0; padding-top: 104px; padding-bottom: 22px; }
  .hero > .next { position: static; translate: none; justify-self: center; margin-top: 4px; }
  .store-badge img { width: 112px; }   /* a quarter smaller on phones (Tom, 10 Oct) */
}