/* trybite.co, the front page (2026-09-26; a polish pass on 2026-10-19: one type scale,
   a kicker over every section, one rhythm, hover lifts; the page before it is /classic).

   The brand is the app's: white paper, two inks and one hand ("Bite by Hand",
   analysis/brand/README.md). INK #1C1C1E is every line, all type and every
   button; CHERRY #D9232E (Sunflower until 2026-09-28) prints only under a drawing, or as a whole ground
   where a drawing stands on it (the close). Titles are Figtree Bold (the word
   "bite" ExtraBold; Bricolage Grotesque until 2026-10-02), body
   copy is the system sans. There are no lines, no tinted panels, no
   gradients and no grain; the photographs are the loudest thing on the page.

   Every picture is drawn by the app's object pen (web/drawings.js, generated
   by analysis/brand/web_drawings.py) and writes itself once, when it arrives.
   Two things loop (2026-09-28): the camera roll of real meals drifting under
   the opening sentence, and the drawn film under it, the app's whole loop in
   twelve seconds, played only while on screen. Both rest under Reduce Motion.

   This sheet stands alone: bite.css still dresses privacy, terms and the
   invite page, and two of its element rules (footer, .cover) collided with
   the old teaser. */

@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --ink: #1C1C1E;
  --ink-pressed: #3A3A3C;
  --ink2: #D9232E;
  --well: #F3F2F1;
  --photo-well: #EAEAEA;
  --text-2: #6B6B6F;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, .06);
  --shadow-raised: 0 6px 14px rgba(0, 0, 0, .12);
  /* A print on the page is a photograph resting on paper at page scale: the
     app's raised shadow, drawn at the size the print is. */
  --shadow-print: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 36px -12px rgba(0, 0, 0, .22);
  --display: "Figtree", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --print: cubic-bezier(.6, .05, .35, 1);   /* the pen's curve */
  --settle: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x on the ROOT too: the Keep section's flying tiles start off the page's edge, and body's
   clip alone left a phone's layout viewport 489px wide, with the nav's invite pill pushed past the
   screen (live until 2026-09-28). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(h1, h2, h3, p) { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Type ─────────────────────────────────────────────────────────────── */
.display, .title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: .98;
  text-wrap: balance;
}
.display { font-size: clamp(46px, 7.2vw, 116px); }
.title { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; }
.lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--text-2); max-width: 38ch; text-wrap: pretty; }
/* The kicker: one quiet word over a section's title, so the page reads in order. Sentence case, never caps. */
.kicker { font-size: 15px; font-weight: 600; color: var(--text-2); letter-spacing: -0.005em; }
.lead b { color: var(--ink); font-weight: 600; }
.small-title { font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.body { font-size: 17px; color: var(--text-2); line-height: 1.5; text-wrap: pretty; }

/* SplitText's line masks: the line rises out of its own slot. */
.split-line { padding-bottom: .08em; margin-bottom: -.08em; }

/* ── Buttons: the app's pills ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, transform 160ms var(--settle);
}
.btn:hover { background: var(--ink-pressed); }
.btn:active { transform: scale(.97); }
.btn.well { background: var(--well); color: var(--ink); }
.btn.well:hover { background: #E9E8E6; }
.btn.sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn .glyph { width: 20px; height: 20px; }
.link { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* ── The nav ──────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background-color 240ms ease, box-shadow 240ms ease, transform 420ms var(--settle);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav.solid { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); }
.nav.away { transform: translateY(-100%); }
.lockup { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.lockup .mark { height: 24px; width: auto; }
.lockup .mark.rebite { animation: rebite 520ms var(--settle); }
@keyframes rebite { 0% { transform: none; } 35% { transform: rotate(-8deg) scale(1.12); } 100% { transform: none; } }
.nav .right { display: flex; align-items: center; gap: 20px; }
.nav-link { font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* ── A photograph printed on the page ─────────────────────────────────── */
.print {
  margin: 0; position: absolute; border-radius: 14px; overflow: hidden;
  background: var(--photo-well); box-shadow: var(--shadow-print);
  aspect-ratio: 4 / 5;
}
.print img { width: 100%; height: 100%; object-fit: cover; }

/* ── The phone: the app's own screens, captured from the build ────────── */
.phone {
  --pw: 300px;
  position: relative; width: var(--pw); flex: none;
  padding: calc(var(--pw) * .032);
  border-radius: calc(var(--pw) * .165);
  background: #1C1C1E;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 3px 8px rgba(0, 0, 0, .08),
    0 40px 80px -24px rgba(28, 28, 30, .35);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; background: #2C2C2E; border-radius: 2px; }
.phone::before { left: -3px; top: 20%; height: 7%; box-shadow: 0 calc(var(--pw) * .1) 0 #2C2C2E; }
.phone::after { right: -3px; top: 26%; height: 11%; }
.screen { position: relative; aspect-ratio: 1206 / 2622; border-radius: calc(var(--pw) * .135); overflow: hidden; background: var(--paper); isolation: isolate; }
.screen > img, .screen .layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen .layer { position: absolute; inset: 0; }

/* ── The drawings ─────────────────────────────────────────────────────── */
.drawing { display: block; color: var(--ink); overflow: visible; }
.drawing .d-ink { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.drawing .d-fill { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.drawing .d-pen, .drawing .d-line { opacity: 0; }
.drawing.done .d-ink, .drawing.done .d-fill, .drawing.done .d-line { opacity: 1; }
.drawing.done .d-pen { display: none; }
.drawing.flat .d-ink { display: none; }   /* on the second ink, the misprint is the ground */

/* ── Sections ─────────────────────────────────────────────────────────── */
section { position: relative; }
.band { padding: clamp(96px, 11vw, 160px) 0; }
.band.tight { padding-top: clamp(40px, 6vw, 80px); }
.head { display: grid; gap: 20px; justify-items: start; }
.head .kicker { margin-bottom: -4px; }
.head .lead { max-width: 38ch; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { min-height: max(680px, 90svh); display: grid; place-items: center; overflow: clip; padding: 108px 0 72px; }
.hero-prints { position: absolute; inset: 0; pointer-events: none; }
.hero-prints .print { will-change: transform; }
.hero-copy { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; }
.hero-mark { width: clamp(64px, 6vw, 88px); margin-bottom: 24px; }
.hero-mark .mark { width: 100%; height: auto; color: var(--ink); }
.hero .display { max-width: 12ch; }
.hero .lead { margin-top: 28px; max-width: 30ch; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 36px; }
/* ── The one field: an email and the ink pill, one capsule (2026-09-28) ── */
.join { position: relative; display: flex; align-items: center; gap: 6px; width: min(100%, 460px); padding: 6px; border-radius: 999px; background: var(--well); transition: box-shadow 160ms ease; }
.join:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.join input[type=email] { flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 18px; border: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); outline: none; }
.join input::placeholder { color: #8E8E93; }
.join .btn { height: 44px; padding: 0 20px; font-size: 16px; flex: none; }
.join .btn[disabled] { opacity: .6; }
.join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join-note { position: absolute; top: calc(100% + 12px); left: 0; right: 0; font-size: 15px; color: var(--text-2); text-align: center; min-height: 1em; }
.join-note a { color: var(--ink); font-weight: 600; }
.join.joined { background: none; box-shadow: none; justify-content: center; align-items: center; }
.join.joined input, .join.joined .btn { display: none; }
.join.joined .join-note { position: static; display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 600; color: var(--ink); }
.join.joined .join-note .glyph { width: 22px; height: 22px; }
.close .join { background: rgba(255, 255, 255, .7); }
/* Words on cherry are white (ink on it is 4.2:1, short of AA at 15px); the joined line,
   larger and bolder, keeps its ink. */
.close .join-note, .close .join-note a { color: #fff; }
/* Under the beta pill once there is a link: how it installs, in the note's voice. */
.beta-how { flex: none; width: 100%; margin: 0; font-size: 15px; color: var(--text-2); text-align: center; }
.close .beta-how { color: #fff; }

/* ── The camera roll: the problem, over the photographs themselves ───── */
.roll-band { padding: clamp(40px, 6vw, 96px) 0 clamp(24px, 3vw, 40px); text-align: center; }
.statement { max-width: 18ch; margin: 0 auto; }
.cameraroll { margin: clamp(40px, 5vw, 72px) 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.cameraroll .track { display: flex; gap: 10px; width: max-content; animation: roll 70s linear infinite; }
.cameraroll img { width: clamp(120px, 12vw, 180px); transition: transform 320ms var(--settle); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--photo-well); }
@keyframes roll { to { transform: translateX(-50%); } }
.statement-answer { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -0.025em; }
.head.centered { justify-items: center; text-align: center; }
.head.centered .lead { max-width: 40ch; }

/* ── The loop ─────────────────────────────────────────────────────────── */
.loop { padding: 0 0 clamp(56px, 7vw, 110px); }
.loop .wrap { display: grid; justify-items: center; gap: 18px; }
.loop-film { width: min(100%, 920px); aspect-ratio: 16 / 9; height: auto; background: var(--paper); }
.film-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.film-link .glyph { width: 18px; height: 18px; }

/* The beta's state, said once over the headline: a dot, the words, the date while it is ahead. */
.beta-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; margin-bottom: 22px; border-radius: 999px; background: var(--well); font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.beta-pill i { width: 7px; height: 7px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }

/* ── One emoji per headline, where it says something ──────────────────────
   It rises with its line, then pops; a hover gives it a wiggle. */
.emo { display: inline-block; font-size: .86em; line-height: 1; transform-origin: 50% 80%; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; letter-spacing: 0; }
.emo:hover { animation: emo-wiggle 520ms ease; }
@keyframes emo-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.08); } 60% { transform: rotate(10deg); } }

/* The mark is SET DOWN, as the app's launch sets it (the rice bowl, 2026-10-13): the
   bowl lands, then the two pairs of chopsticks drop into it. Generated by mark_export.py. */
.drawn .bowl { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.82) translateY(-6%); }
.drawn .sticks { opacity: 0; transform: translateY(-22px); }
.drawn.in .bowl { opacity: 1; transform: none; transition: opacity 260ms ease-out 120ms, transform 620ms var(--settle) 120ms; }
.drawn.in .sticks { opacity: 1; transform: none; transition: opacity 200ms ease-out 520ms, transform 520ms var(--settle) 520ms; }

/* ── Keep ─────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.stage { position: relative; display: grid; place-items: center; min-height: 640px; }
.stage .phone { --pw: clamp(260px, 24vw, 330px); z-index: 1; }
.tile { position: absolute; z-index: 3; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-print); background: var(--photo-well); will-change: transform; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.cell-cover { position: absolute; background: var(--paper); z-index: 2; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin-top: clamp(96px, 10vw, 160px); }
.feature { display: grid; align-content: start; gap: 10px; }
.feature .art { height: 150px; display: flex; align-items: flex-end; margin-bottom: 18px; }
.feature .art .drawing { height: 100%; width: auto; }
.feature .art.wide .drawing { height: 128px; }

/* ── Try it ───────────────────────────────────────────────────────────── */
.try .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.try .stage { min-height: 700px; }
.try .copy { display: grid; gap: 22px; justify-items: start; }
.try .copy .kicker { margin-bottom: -4px; }
.swap { display: block; transition: opacity 260ms ease, transform 420ms var(--settle); }
.swap.out { opacity: 0; transform: translateY(-10px); }
.verdict { width: min(420px, 100%); margin-top: 8px; position: relative; height: 60px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transition: opacity 240ms ease, transform 320ms var(--settle); }
.pair button {
  height: 60px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  transition: transform 160ms var(--settle), background-color 160ms ease;
}
.pair .nah { background: var(--well); }
.pair .nah:hover { background: #E9E8E6; }
.pair .yeah { background: var(--ink); color: var(--paper); }
.pair .yeah:hover { background: var(--ink-pressed); }
.pair button:active { transform: scale(.96); }
.pair em { font-style: normal; font-size: 22px; line-height: 1; }
.pair.breathe { animation: breathe 900ms var(--settle) 1; }
@keyframes breathe { 40% { transform: scale(1.04); } }
.answered { position: absolute; inset: 0; display: grid; grid-template-columns: 60px 1fr; gap: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 240ms ease 80ms, transform 420ms var(--settle) 80ms; }
.answered .chip { height: 60px; border-radius: 18px; background: var(--well); display: grid; place-items: center; font-size: 26px; }
.answered .save { height: 60px; border-radius: 999px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 18px; font-weight: 600; }
.verdict.on .pair { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.verdict.on .answered { opacity: 1; transform: none; }
.own { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; font-size: 15px; color: var(--text-2); }
.own .note { font-size: 14px; }
.again { opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.again.show { opacity: 1; pointer-events: auto; }

/* The review sheet inside the phone, and the photograph the visitor chose. */
.phone .sheet { transition: transform 620ms var(--settle); will-change: transform; }
.phone .sheet.down { transform: translateY(104%); }
.own-shot { position: absolute; object-fit: cover; opacity: 0; transition: opacity 240ms ease; z-index: 2; }
.own-shot.on { opacity: 1; }
.land { position: absolute; z-index: 4; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-raised); opacity: 0; }

/* ── Revisit ──────────────────────────────────────────────────────────── */
.points { display: grid; gap: 14px; margin-top: 36px; max-width: 30rem; }
.point { display: grid; gap: 6px; }
.duo { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 2.4vw, 40px); padding-bottom: 40px; }
.duo .shot { margin: 0; display: grid; gap: 18px; justify-items: start; }
.duo .phone { --pw: clamp(240px, 21vw, 300px); }
.duo .shot.low { margin-top: 110px; }
.duo figcaption { max-width: calc(var(--pw, 280px)); font-size: 15px; line-height: 1.4; color: var(--text-2); padding: 0 6px; }
.duo figcaption b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; margin-bottom: 2px; }


/* ── Taste ────────────────────────────────────────────────────────────── */
.taste-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); align-items: start; margin-top: clamp(56px, 7vw, 96px); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.kitchen { position: relative; aspect-ratio: 1; border-radius: 12px; background: var(--well); display: grid; place-items: center; padding: 14%; }
.kitchen .drawing { width: 100%; height: 100%; transition: transform 320ms var(--settle); }
@media (hover: hover) { .kitchen:hover .drawing { transform: scale(1.06); } }
.kitchen.untried .drawing { opacity: .3; }
.kitchen .count { position: absolute; right: 8px; bottom: 8px; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-card); font-size: 13px; font-weight: 700; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity 200ms ease, transform 420ms var(--settle); }
.kitchen.counted .count { opacity: 1; transform: none; }
.kitchen-name { font-size: 13px; font-weight: 600; margin-top: 6px; }
.kitchen-name.muted { color: var(--text-2); font-weight: 400; }
.wall-legend { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.wall-legend b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.wall-legend span { font-size: 15px; color: var(--text-2); }
/* On a phone the wall opens in place: three rows, then the rest on a tap. */
.wall-more { display: none; margin: 16px auto 0; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--well); font-size: 15px; font-weight: 600; transition: background-color 160ms ease, transform 160ms var(--settle); }
.wall-more:hover { background: #E9E8E6; }
.wall-more:active { transform: scale(.97); }
.wall .rise { animation: wall-rise 520ms var(--settle) both; }
@keyframes wall-rise { from { opacity: 0; transform: translateY(10px); } }

.sticker { position: relative; background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-print); padding: 24px; display: grid; grid-template-columns: 1fr 112px; gap: 16px; align-items: center; }
.sticker .k { font-size: 15px; color: var(--text-2); }
.sticker b { display: block; font-family: var(--display); font-size: 40px; letter-spacing: -0.02em; line-height: 1; margin: 6px 0 8px; }
.sticker p { font-size: 16px; color: var(--text-2); }
.sticker .drawing { width: 112px; height: 112px; }
.taste-side { display: grid; gap: 28px; justify-items: center; }
.taste-side .phone { --pw: clamp(240px, 20vw, 290px); }

/* ── Friends ──────────────────────────────────────────────────────────── */
.feed { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(56px, 7vw, 96px); align-items: start; }
.post { background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-print); overflow: hidden; transition: transform 420ms var(--settle), box-shadow 420ms ease; }
@media (hover: hover) { .post:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 26px 48px -14px rgba(0,0,0,.26); } }
.post:nth-child(2) { margin-top: 72px; }
.post:nth-child(3) { margin-top: 24px; }
.post .who { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 15px; }
.post .who b { font-weight: 600; }
.post .who i { font-style: normal; color: var(--text-2); }
.face { width: 34px; height: 34px; border-radius: 50%; background: var(--well); display: grid; place-items: center; font-size: 19px; flex: none; line-height: 1; }
.post .pic { position: relative; aspect-ratio: 1; }
.post .pic img { width: 100%; height: 100%; object-fit: cover; }
.post .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.12) 38%, rgba(0,0,0,0) 55%); pointer-events: none; }
.post .cap { position: absolute; left: 16px; bottom: 14px; right: 80px; color: #fff; z-index: 1; }
.post .cap b { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.post .cap span { font-size: 14px; opacity: .92; }
.corner { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: row-reverse; }
.corner .face { width: 36px; height: 36px; box-shadow: 0 0 0 2.5px #fff; margin-left: -10px; background: var(--well); transform: scale(0); }
.post .note { padding: 14px 16px 18px; font-size: 15px; line-height: 1.4; }
.post .note small { display: block; color: var(--text-2); font-size: 13px; margin-top: 6px; }
.burst { position: absolute; z-index: 5; font-size: 26px; pointer-events: none; }
/* The swipe row's place on a phone: the iOS page control, the current dot a short ink pill. */
.feed-dots { display: none; justify-content: center; gap: 8px; margin-top: 4px; }
.feed-dots i { width: 7px; height: 7px; border-radius: 999px; background: #D1D1D6; transition: width 260ms var(--settle), background-color 200ms ease; }
.feed-dots i.on { width: 20px; background: var(--ink); }

.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: clamp(96px, 10vw, 160px); }
.plan {
  background: var(--ink2); color: #fff; border-radius: 28px; padding: 28px 28px 24px; width: min(420px, 100%); justify-self: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 30px 60px -24px rgba(120, 10, 20, .35);
}
.plan .ask { font-size: 15px; font-weight: 600; }
.plan .art { width: 62%; margin: 0 auto -6px; }
.plan .art .drawing { width: 100%; height: auto; }
.plan .place { font-family: var(--display); font-size: clamp(40px, 4.4vw, 54px); letter-spacing: -0.025em; line-height: 1; }
.plan .when { font-size: 19px; font-weight: 700; margin-top: 8px; }
.plan .area { font-size: 15px; margin-top: 2px; }
.plan .seats { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-size: 15px; font-weight: 600; }
.plan .pile { display: flex; }
.plan .pile .face { width: 36px; height: 36px; box-shadow: 0 0 0 2.5px var(--ink2); margin-right: -8px; background: #fff; }
.plan .pile .face.you { transform: scale(0); }
.plan .answer { display: grid; gap: 10px; margin-top: 22px; position: relative; }
.plan .answer .btn { width: 100%; }
.plan .quiet { font-size: 15px; font-weight: 600; height: 36px; }
.plan .yes-line { display: none; align-items: center; justify-content: center; gap: 8px; height: 52px; font-size: 18px; font-weight: 700; }
.plan .yes-line .glyph { width: 22px; height: 22px; }
.plan.yes .answer .btn, .plan.yes .quiet { display: none; }
.plan.yes .yes-line { display: flex; }

/* ── Discover ─────────────────────────────────────────────────────────── */
.roll { position: relative; background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-print); padding: 26px; width: min(460px, 100%); display: grid; grid-template-columns: 1fr 132px; gap: 8px 16px; }
.roll .noun { font-family: var(--display); font-size: clamp(36px, 4.2vw, 56px); white-space: nowrap; letter-spacing: -0.025em; line-height: 1; overflow: hidden; height: 1.08em; }
.roll .noun span { display: block; width: max-content; }
.roll .line { font-size: 16px; color: var(--text-2); grid-column: 1; margin-top: 6px; }
.roll .art { grid-column: 2; grid-row: 1 / span 2; width: 132px; height: 132px; }
.roll .art .drawing { width: 100%; height: 100%; }
.roll .doors { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.roll .doors .find { font-size: 16px; font-weight: 600; }
.roll .reroll { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--well); font-size: 15px; font-weight: 600; transition: background-color 160ms ease, transform 160ms var(--settle); }
.roll .reroll:hover { background: #E9E8E6; }
.roll .reroll:active { transform: scale(.96); }
.roll .reroll .glyph { width: 18px; height: 18px; }
.roll .reroll.spin .glyph { animation: die 520ms var(--settle); }
@keyframes die { to { transform: rotate(360deg); } }
.discover .stage { min-height: 0; }
.discover-copy { display: grid; gap: 24px; }
.discover-copy .roll { margin-top: 20px; }

/* ── Payoff ───────────────────────────────────────────────────────────── */
.payoff { text-align: center; }
.payoff .art { width: min(560px, 88vw); margin: 0 auto clamp(32px, 4vw, 56px); }
.payoff .art .drawing { width: 100%; height: auto; }
.payoff .title { max-width: 16ch; margin: 0 auto; }
.payoff .lead { margin: 28px auto 0; max-width: 38ch; }

/* ── Close: the one cherry ground, with a drawing standing on it ──── */
.close { background: var(--ink2); color: #fff; padding: clamp(96px, 12vw, 176px) 0 0; overflow: clip; }
.close .inner { display: grid; justify-items: center; text-align: center; }
.close .art { width: min(460px, 86vw); margin-bottom: 8px; }
.close .art .drawing { width: 100%; height: auto; }
.close .title { max-width: 14ch; }
.close .lead { color: #fff; margin-top: 24px; max-width: 34ch; }
.close .ctas .btn.well { background: rgba(255, 255, 255, .55); }
.close .ctas .btn.well:hover { background: rgba(255, 255, 255, .75); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: clamp(80px, 10vw, 140px) 0 calc(28px + env(safe-area-inset-bottom)); font-size: 14px; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a { text-decoration: none; font-weight: 600; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot .by { font-weight: 400; }

/* ── The film ─────────────────────────────────────────────────────────── */
.film { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); opacity: 0; pointer-events: none; transition: opacity 280ms ease; }
.film.open { opacity: 1; pointer-events: auto; }
.film .player { position: relative; height: min(86svh, 820px); aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--shadow-print), 0 40px 120px -30px rgba(0,0,0,.35); transform: translateY(24px) scale(.96); transition: transform 520ms var(--settle); }
.film.open .player { transform: none; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film .x { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border-radius: 12px; background: var(--well); display: grid; place-items: center; z-index: 2; }
.film .x .glyph { width: 20px; height: 20px; }

/* ── The menu: the roadmap, printed like tonight's menu ─────────────── */
.menu-band .head { margin-bottom: clamp(40px, 5vw, 64px); }
.menu { max-width: 640px; margin: 0 auto; background: var(--paper); border-radius: 20px; box-shadow: var(--shadow-print); padding: clamp(28px, 4.5vw, 56px) clamp(22px, 4.5vw, 64px) clamp(24px, 4vw, 48px); }
.menu-head { display: grid; justify-items: center; text-align: center; gap: 6px; margin-bottom: clamp(24px, 3vw, 36px); }
.menu-mark .drawing { height: 64px; width: auto; }
.menu-head h3 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4vw, 46px); letter-spacing: -0.03em; line-height: 1; margin-top: 8px; }
.menu-head p { font-size: 15px; color: var(--text-2); }
.menu-course + .menu-course { margin-top: clamp(22px, 2.6vw, 32px); }
.menu-course h4 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text-2); text-align: center; }
.menu-course ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.menu-course li { display: block; }
/* A menu's dot leader, from the dish to its availability: the one line on this page, because a menu has always had one. */
.menu .dish-row { display: flex; align-items: baseline; gap: 10px; }
.menu .dots { flex: 1; min-width: 24px; border-bottom: 2px dotted #D1D1D6; transform: translateY(-.28em); }
.menu .dish-name { display: inline-flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.menu .dish-name i { font-style: normal; font-size: 18px; width: 24px; text-align: center; flex: none; }
.menu li > small { display: block; font-size: 15px; color: var(--text-2); margin-top: 2px; padding-left: 34px; }
.menu .state { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.menu li.soon .dish-name, .menu li.soon .state { color: #8E8E93; }
.menu li.soon > small { color: #AEAEB2; }
.menu li.soon .dish-name i { filter: grayscale(1); opacity: .55; }
.menu li.new .state { color: var(--ink2); }
.menu-foot { margin-top: clamp(28px, 3.4vw, 40px); display: grid; justify-items: center; gap: 12px; text-align: center; }
.menu-foot p { font-size: 15px; color: var(--text-2); }

/* ── Arrival: parked only when the script is running and motion is allowed */
.armed [data-rise] { opacity: 0; transform: translateY(18px); }
.armed .hero-prints .print { opacity: 0; }
.armed [data-split] { visibility: hidden; }

/* ── Monitors: a notch more type at the same measure ── */
@media (min-width: 1600px) {
  body { font-size: 18px; }
  .lead { font-size: 22px; }
  .body { font-size: 18px; }
  .kicker { font-size: 16px; }
}
/* ?shot: the page laid flat for a full-page capture (analysis/web/shoot_site.py). */
html.shot .hero { min-height: 0; }

/* ── Phones, tablets ──────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .trio .feature:last-child { grid-column: 1 / -1; max-width: 26rem; }
  .taste-grid { grid-template-columns: 1fr; }
  .taste-side { grid-template-columns: 1fr auto; align-items: center; }
}
/* ── Phones (2026-10-01): one axis, and what belongs together on one screen ──
   Every head, line and caption sits on the page's middle, as the hero, the
   statement and the menu already did; a left edge on a 390px page read as a
   desktop layout that had fallen over. A section's picture is sized by the
   screen's HEIGHT as well as its width, so the phone you are asked to answer
   and the two buttons that answer it are on screen together. */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .band { padding: 80px 0; }
  .band.tight { padding-top: 40px; }
  .head { gap: 14px; justify-items: center; text-align: center; }
  .head .lead, .head.centered .lead { max-width: 32ch; }
  .split, .try .split, .plan-row { grid-template-columns: 1fr; justify-items: center; gap: 40px; }
  .stage { min-height: 0; padding: 0; width: 100%; }
  .stage .phone { --pw: min(270px, 66vw, calc((100svh - 120px) / 2.25)); }

  /* Keep: the three small promises, centred under their drawings. */
  .trio { grid-template-columns: 1fr; gap: 48px; margin-top: 72px; justify-items: center; text-align: center; }
  .trio .feature:last-child { max-width: none; }
  .feature { justify-items: center; max-width: 30ch; }
  .feature .art { height: 96px; justify-content: center; margin-bottom: 10px; }
  .feature .art.wide .drawing { height: 84px; }

  /* Try it: the question, then the phone, then the answer, in one screenful. */
  .try .split { gap: 0; }
  .try .copy { display: contents; }
  .try .title { order: 1; text-align: center; }
  .try .lead { order: 2; text-align: center; margin-top: 12px; max-width: 30ch; }
  .try .stage { order: 3; margin-top: 24px; min-height: 0; }
  .try .stage .phone { --pw: clamp(150px, calc((100svh - 340px) / 2.25), 250px); }
  .verdict { order: 4; margin-top: 20px; width: min(360px, 100%); }
  .own { order: 5; margin-top: 16px; justify-content: center; text-align: center; }

  /* Revisit: two phones side by side, captions under each, centred. */
  .duo { width: 100%; gap: 14px; padding-bottom: 0; }
  .duo .shot { justify-items: center; text-align: center; gap: 14px; }
  .duo .phone { --pw: min(200px, 43vw); }
  .duo .shot.low { margin-top: 56px; }
  .duo figcaption { max-width: min(200px, 43vw); font-size: 14px; padding: 0; }
  .duo figcaption b { font-size: 16px; }

  .feed { margin-top: 48px; gap: 14px; }
  .plan-row { margin-top: 80px; }

  /* Taste: the sticker leads the recap it opens. */
  .taste-grid { margin-top: 40px; }
  .taste-side { grid-template-columns: 1fr; }
  .taste-side .phone { --pw: min(240px, 60vw); }

  /* Discover: the roll is an app card, so its own words keep their left edge. */
  .discover-copy { justify-items: center; text-align: center; }
  .discover-copy .lead { max-width: 30ch; }
  .roll { text-align: left; }
  .discover .stage .phone { --pw: min(250px, 62vw); }

  .loop-film { width: 100%; }
  .hero { padding-top: 92px; padding-bottom: 250px; }
  /* The fan is a pile you can flick through: the prints take touches, a vertical drag still scrolls. */
  .hero-prints .print { pointer-events: auto; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
  .hero-prints .print img { pointer-events: none; -webkit-user-drag: none; }
  .foot { flex-direction: column; justify-content: center; text-align: center; padding-top: 72px; }
  .foot nav { justify-content: center; gap: 12px 22px; }
  .foot .lockup { display: none; }
}
/* Friends on a phone: a row you swipe, one post centred and the next one peeking. Three
   stacked posts were 1,600px of scrolling; a tablet still fits them side by side. */
@media (max-width: 700px) {
  .feed { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 40px calc(-1 * var(--gutter)) 0; padding: 6px calc(50vw - min(39vw, 160px)) 30px; }
  .feed::-webkit-scrollbar { display: none; }
  .post { flex: 0 0 min(78vw, 320px); scroll-snap-align: center; }
  .post:nth-child(2), .post:nth-child(3) { margin-top: 0; }
  .feed-dots { display: flex; }
}
@media (max-width: 560px) {
  .nav-link { display: none; }
  .nav .wrap { height: 60px; }
  .hero { padding-top: 84px; padding-bottom: 236px; min-height: max(640px, 100svh); }
  .hero-mark { width: 52px; margin-bottom: 18px; }
  .beta-pill { margin-bottom: 18px; height: 32px; font-size: 13px; }
  .hero .lead { margin-top: 18px; }
  .ctas { width: 100%; margin-top: 28px; }
  /* The field stays one capsule on a phone: an email and its pill fit side by side down to
     360px, and a column of two 52pt slabs pushed the photographs off the first screen. */
  .join { width: 100%; }
  .join input[type=email] { padding-left: 16px; font-size: 16px; }
  .join .btn { padding: 0 18px; font-size: 15px; }
  .join-note { font-size: 13px; top: calc(100% + 10px); }
  .hero .ctas, .close .ctas { margin-bottom: 30px; }
  .roll { grid-template-columns: 1fr 96px; padding: 22px; }
  .roll .art { width: 96px; height: 96px; }
  .sticker { grid-template-columns: 1fr 88px; padding: 20px; text-align: left; width: 100%; }
  .sticker .drawing { width: 88px; height: 88px; }
  .sticker b { font-size: 34px; }
  .plan { padding: 24px 22px 20px; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  /* Three rows on a phone: all 23 kitchens ran eight rows of scrolling. The eight tried lead, so
     the cut keeps every count and shows one of the waiting ones; "See all" opens the rest. */
  .wall:not(.open) > :nth-child(n+10) { display: none; }
  .wall-more { display: block; }
  .wall.open + .wall-more { display: none; }
  .kitchen-name { font-size: 12px; }
}
@media (max-width: 359px) {
  .join { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; background: none; }
  .join:focus-within { box-shadow: none; }
  .join input[type=email] { flex: none; height: 52px; padding: 0 20px; border-radius: 999px; background: var(--well); }
  .join .btn { height: 52px; }
  .join-note { position: static; margin: 2px 0 0; }
  .close .join { background: none; }
  .close .join input[type=email] { background: rgba(255, 255, 255, .7); }
}

@media (prefers-reduced-motion: reduce) {
  .cameraroll .track { animation: none; }
  .drawn .bowl, .drawn .sticks { opacity: 1; transform: none; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}