/* site.css — marshmallowdiner.com, every page.
 *
 * The colours are design.md §2's, the measured ones. The type is the system
 * face, as in the app: the brand fonts are not bundled anywhere until LEGAL
 * row 4 closes, and a web font from a font service would send every visitor's
 * address to it. Nothing on this site is fetched from anywhere but this site.
 *
 * Chrome is square (CLAUDE.md rule 9). The only round things are the
 * marshmallow, the cherry, and what depicts them.
 */

:root {
  --ink: #1A1A1A;
  --paper: #FFFDF8;
  --butter: #FFE9A8;
  --cream: #FFF8E7;
  --board-light: #FFF3DC;
  --board-dark: #F2E4C6;
  --cherry: #E63946;
  --cherry-ui: #C02A37;
  --cherry-deep: #8E1A26;
  --mint: #8FE3D3;
  --mint-bar: #2FA898;      /* a FILL. 2.76:1 on cream — never text */
  --mint-ink: #1F5F58;
  --pink: #FFB3C7;
  --pink-hot: #FF7FA6;
  --lilac: #CDB4F6;
  --sky: #A9D9FF;
  --night: #221E2B;
  --night-deep: #191622;
  --waffle: #C8924A;
  --stem: #3F7D4F;
  --muted: #5E5344;
  --label: #746349;
  --hairline: #E3D6BC;
  --track: #EBD6A0;
  --amber: #EAB308;         /* the studio's, in its mark only */

  /* The fruit, which the colourblind switch swaps — a swap, not a filter. */
  --fruit: var(--cherry);

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --rule: 2px solid var(--ink);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --out: cubic-bezier(.22, 1, .36, 1);
  --hud-h: 74px;
  --gutter: max(20px, env(safe-area-inset-left));
  --gutter-r: max(20px, env(safe-area-inset-right));
}

html.cvd { --fruit: #2C6FD1; }

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hud-h) + 16px);
  background: var(--cream);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

img, svg, canvas { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: .98; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--cherry-ui); }

:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 8px; top: -200px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px; padding: 14px 18px; background: var(--ink); color: var(--butter);
  font: 500 .8125rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; --focus: var(--butter);
}
.skip:focus { top: 8px; }

/* Mono carries every label and every number (design.md §3). */
.mono, .eyebrow {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow { margin: 0 0 14px; font-size: .75rem; font-weight: 500; line-height: 1.4; color: var(--label); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The diner's black-and-white strip: 8 pt squares in a 10 pt band, the
   prototype's own recipe (App/DinerChecker.swift). */
.checker {
  height: 10px;
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--paper) 0 50%) 0 0 / 16px 16px;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 20px;
  border: var(--rule); background: var(--paper); color: var(--ink);
  font: 600 .8125rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .08s var(--ease);
}
.btn:active { transform: translateY(2px); }
.btn--ink { background: var(--ink); color: var(--butter); --focus: var(--ink); }
.btn--cherry { background: var(--cherry-ui); color: var(--paper); }
.btn--mint { background: var(--mint); color: var(--ink); }
.btn--butter { background: var(--butter); color: var(--ink); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--butter); }

/* A label that will be a button the day the App Store has the app. */
.soon {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: 0;
  padding: 12px 18px; border: var(--rule); background: var(--cherry-ui); color: var(--paper);
  font: 600 .8125rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- the face
   design.md §4.1 and App/MenuBand.swift's MarshFace: a plate with a 30 %
   corner, a 2 pt ink edge and a hard cherry offset — the sign-painter's
   shadow. Eyes ⌀11 %, cheeks ⌀13 % at hot pink 50 %. */

.face { --s: 120px; position: relative; width: var(--s); height: var(--s); flex: none; }
.face__shadow, .face__plate { position: absolute; inset: 0; border-radius: 30%; }
.face__shadow { background: var(--cherry-ui); transform: translate(calc(var(--s) * .073 * var(--sh, 1)), calc(var(--s) * .073 * var(--sh, 1))); opacity: var(--sho, 1); }
.face__plate { background: var(--paper); border: max(2px, calc(var(--s) * .02)) solid rgba(26, 26, 26, var(--edge, 1)); overflow: hidden; }
.face__feat { position: absolute; inset: 0; transform: translate(var(--gx, 0px), var(--gy, 0px)) rotate(var(--turn, 0deg)); }
.face__feat i { position: absolute; border-radius: 50%; }
.face__feat .eye { width: 11%; height: 11%; top: 37%; background: var(--ink); }
.face__feat .eye:first-child { left: 27%; }
.face__feat .eye:nth-child(2) { left: 62%; }
.face__feat .cheek { width: 13%; height: 13%; top: 58%; background: rgba(255, 127, 166, .5); }
.face__feat .cheek:nth-child(3) { left: 22%; }
.face__feat .cheek:nth-child(4) { left: 65%; }

/* Eyes closed — the paused face, for the pages that are not the game. */
.face--resting .eye { height: 3%; top: 41%; border-radius: 0; }
/* Out of time: the plate slumps. */
.face--melted .face__plate, .face--melted .face__shadow { transform-origin: 50% 100%; }
.face--melted .face__plate { transform: scale(1.04, .9); }
.face--melted .face__shadow { transform: translate(calc(var(--s) * .073), calc(var(--s) * .073)) scale(1.04, .9); }
.face--melted .eye { height: 4%; top: 44%; border-radius: 0 0 50% 50%; }

/* ---------------------------------------------------------------- HUD
   The game's own instrument strip, at the top of every page: butter, a mint
   clock bar with an ink edge, then the checker (design.md §7). */

.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: var(--butter); color: var(--ink);
  padding-top: env(safe-area-inset-top);
}
.hud__row {
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 var(--gutter-r) 0 var(--gutter);
}
.hud__home { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.hud__home .face { --s: 30px; }
.hud__home .face__plate { border-width: 2px; }
.hud__name { font: 600 .8125rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.hud__score { display: flex; align-items: baseline; gap: 8px; margin: 0; min-width: 0; }
.hud__score .num { font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.hud__score .cap { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.hud__read { margin: 0 0 0 auto; font: 500 .9375rem/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud__read .lvl { color: var(--cherry-ui); }
.hud__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.hud__read + .hud__nav { margin-left: 8px; }
.hud__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font: 600 .75rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
.hud__nav a:hover, .hud__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hud__btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; height: 44px; padding: 0 8px; border: var(--rule); background: var(--paper);
  font: 600 .625rem/1.15 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.hud__btn b { font-weight: 600; color: var(--label); }
.hud__btn[aria-pressed="true"] { background: var(--ink); color: var(--butter); }
.hud__btn[aria-pressed="true"] b { color: var(--mint); }
.hud__bar {
  height: 6px; margin: 0 var(--gutter-r) 6px var(--gutter);
  background: var(--track); border: 1px solid rgba(26, 26, 26, .55);
}
.hud__bar span { display: block; height: 100%; width: 100%; background: var(--mint-bar); transform-origin: 0 50%; }
.hud__bar.is-critical span { background: var(--fruit); }

.hud__nav--wide { display: none; }
@media (min-width: 720px) { .hud__nav--wide { display: flex; } }
html:not(.js) .hud__nav--wide { display: flex; }
@media (max-width: 419px) {
  .hud__row { gap: 8px; padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .hud__score .cap { display: none; }
  .hud__read { font-size: .875rem; }
  .hud__btn { min-width: 48px; }
}
.hud--doc .hud__row { gap: 8px; }
@media (max-width: 599px) {
  .hud--doc .hud__name { display: none; }
  .hud__nav a { padding: 0 7px; font-size: .6875rem; }
}

/* ---------------------------------------------------------------- menu sheet
   The in-game menu, folded down from the top: the board's own bands. */

.sheet {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0;
  border: 0; background: var(--cream); color: var(--ink); overflow-y: auto;
}
.sheet::backdrop { background: rgba(26, 26, 26, .35); }
.sheet__mast {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) var(--gutter-r) 14px var(--gutter);
  background: var(--ink); color: var(--paper); --focus: var(--butter);
}
.sheet__mast p { margin: 0; color: var(--butter); font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.sheet__close { border-color: var(--butter); background: var(--ink); color: var(--butter); }
.sheet ul { list-style: none; }
.sheet li { border-bottom: var(--rule); }
.sheet li a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
  min-height: 64px; padding: 10px var(--gutter-r) 10px var(--gutter);
  font: 700 1.375rem/1.1 var(--font-display); letter-spacing: -.02em; text-decoration: none;
}
.sheet li a span { font: 500 .75rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.sheet li a::after { content: "›"; font: 600 1.25rem/1 var(--font-mono); }
.sheet li.is-legal a { background: var(--paper); font-size: 1.125rem; }
.motion .sheet[open] li { animation: deal .26s var(--out) both; }
.motion .sheet[open] li:nth-child(2) { animation-delay: .04s; }
.motion .sheet[open] li:nth-child(3) { animation-delay: .08s; }
.motion .sheet[open] li:nth-child(4) { animation-delay: .12s; }
.motion .sheet[open] li:nth-child(5) { animation-delay: .16s; }
.motion .sheet[open] li:nth-child(6) { animation-delay: .2s; }
.motion .sheet[open] li:nth-child(7) { animation-delay: .24s; }
.motion .sheet[open] li:nth-child(8) { animation-delay: .28s; }
.motion .sheet[open] li:nth-child(9) { animation-delay: .32s; }
.motion .sheet[open] li:nth-child(10) { animation-delay: .36s; }

/* The deal: 260 ms, rising 10 pt, 40 ms apart — design.md §7.6.6. */
@keyframes deal { from { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--ink); color: var(--paper); --focus: var(--butter); }
.foot__in {
  display: grid; gap: 28px; max-width: 1120px; margin: 0 auto;
  padding: 56px var(--gutter-r) calc(40px + env(safe-area-inset-bottom)) var(--gutter);
}
.studio { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 .8125rem/1 var(--font-mono); letter-spacing: .2em; }
.studio__slant { width: 17px; height: 17px; background: var(--amber); clip-path: polygon(0 100%, 40% 0, 100% 0, 60% 100%); }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; list-style: none; }
.foot__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px 0 0;
  color: var(--butter); font: 600 .8125rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.foot__fine { margin: 0; max-width: 64ch; color: #CFC7B8; font-size: .875rem; line-height: 1.5; }
.foot__sign { margin: 0; color: var(--pink); font: 500 .875rem/1 var(--font-mono); }

/* ---------------------------------------------------------------- documents
   Privacy, support, terms: the masthead band, then plain reading. */

.doc-mast {
  position: relative; overflow: hidden;
  padding: calc(var(--hud-h) + env(safe-area-inset-top) + 44px) var(--gutter-r) 48px var(--gutter);
  background: var(--ink); color: var(--paper); --focus: var(--butter);
}
.doc-mast__in { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1120px; margin: 0 auto; }
.doc-mast .eyebrow { color: var(--butter); }
.doc-mast h1 { font-size: clamp(2.75rem, 11vw, 6.5rem); line-height: .88; letter-spacing: -.04em; text-transform: uppercase; }
.doc-mast h1 span { display: block; }
.doc-mast h1 span + span { color: var(--pink); }
.doc-mast .face { --s: clamp(72px, 16vw, 150px); margin-bottom: 6px; }
.doc-mast__note { margin: 20px 0 0; max-width: 46ch; color: #E9E2D3; }
.motion .doc-mast__in > * { animation: deal .26s var(--out) both; }
.motion .doc-mast__in > :nth-child(2) { animation-delay: .08s; }

.doc {
  max-width: 1120px; margin: 0 auto;
  padding: 0 var(--gutter-r) 96px var(--gutter);
}
.doc__body { max-width: 720px; }
.doc section { padding: 40px 0 8px; border-top: var(--rule); }
.doc section:first-child { border-top: 0; }
.doc h2 { font-size: clamp(1.625rem, 4vw, 2.25rem); margin: 0 0 18px; }
.doc h3 { font-size: 1.1875rem; letter-spacing: -.01em; margin: 26px 0 8px; }
.doc ul, .doc ol { padding-left: 1.2em; margin: 0 0 1em; }
.doc li { margin: 0 0 .45em; }
.doc li::marker { color: var(--cherry-ui); }
.doc .eyebrow { margin-top: 0; }
.doc strong { font-weight: 700; }
.doc dl { margin: 0 0 1.2em; }
.doc dt { font: 600 .75rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label); margin-top: 14px; }
.doc dd { margin: 4px 0 0; }

.doc-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 18px 0 8px;
  font: 500 .75rem/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label);
}

/* The bill, printed: the summary of a document as a receipt. */
.receipt {
  position: relative; max-width: 420px; margin: 40px 0 8px; padding: 26px 24px 30px;
  background: var(--paper); border: var(--rule);
  font: 500 .8125rem/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 8px 8px 0 var(--ink);
}
.receipt h2, .receipt h3 { font: 700 .875rem/1.4 var(--font-mono); letter-spacing: .12em; text-align: center; margin: 0 0 4px; }
.receipt p { margin: 0; }
.receipt__sub { text-align: center; color: var(--label); }
.receipt__rule { margin: 12px 0; border: 0; border-top: 2px dashed var(--ink); }
.receipt ul { list-style: none; padding: 0; margin: 0; }
.receipt li { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.receipt li::before { display: none; }
.receipt li span:first-child { flex: none; }
.receipt li i { flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(26, 26, 26, .45); transform: translateY(-4px); }
.receipt li b { flex: none; font-weight: 700; text-align: right; }
.receipt__total { display: flex; justify-content: space-between; font-size: 1rem; font-weight: 700; }

.callout {
  margin: 0 0 1.2em; padding: 16px 18px; border: var(--rule); background: var(--butter);
}
.callout p:last-child { margin: 0; }

.faq details { border-bottom: var(--rule); }
.faq details:first-of-type { border-top: var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none;
  font: 700 1.125rem/1.25 var(--font-display); letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: var(--rule); font: 600 1rem/1 var(--font-mono); }
.faq details[open] summary::after { content: "−"; background: var(--ink); color: var(--butter); }
.faq details > div { padding: 0 0 20px; }

.contact {
  display: grid; gap: 6px; margin: 0 0 28px; padding: 22px 22px 24px;
  background: var(--mint); border: var(--rule); box-shadow: 8px 8px 0 var(--ink);
}
.contact p { margin: 0; }
.contact a { font: 700 clamp(1.125rem, 4vw, 1.625rem)/1.2 var(--font-display); letter-spacing: -.02em; }
.contact .eyebrow { color: var(--mint-ink); margin: 0; }

.tz { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.doc-sign { margin: 36px 0 0; color: var(--label); font: 500 .875rem/1 var(--font-mono); }
.doc-mast--full { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.doc-mast--full .doc-mast__in { width: 100%; }
.doc-mast__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.doc-mast__cta .btn:not(.btn--cherry) { background: var(--ink); color: var(--butter); border-color: var(--butter); }
.doc-mast .face--melted { margin-bottom: 0; }

@media (min-width: 900px) {
  .doc { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 64px; }
  .doc__aside { position: sticky; top: calc(var(--hud-h) + 40px); align-self: start; padding-top: 40px; }
}
.doc__aside .eyebrow { margin-bottom: 10px; }
.doc__aside ol { list-style: none; padding: 0; border-top: var(--rule); }
.doc__aside li { margin: 0; border-bottom: 1px solid var(--hairline); }
.doc__aside li::marker { content: none; }
.doc__aside a { display: flex; align-items: center; min-height: 44px; font: 500 .75rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.doc__aside a:hover { text-decoration: underline; }
@media (max-width: 899px) { .doc__aside { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}
html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after { scroll-behavior: auto !important; }
@media print {
  .hud, .foot, .skip, .doc__aside { display: none !important; }
  .doc-mast { padding: 0 0 24px; background: none; color: var(--ink); }
  .doc-mast h1 span + span { color: var(--ink); }
  .doc-mast .face { display: none; }
}