/*
 * The public pages, wearing the app's own clothes.
 *
 * Same palette, same type, same paper-on-slate surface as public/style.css in
 * the app — deliberately, because these pages exist to say "this is that app"
 * to somebody who has never seen it, and a stranger's first impression should
 * not be of a different product. The tokens are copied rather than shared:
 * this is a separate Worker with no build step, and a copy that drifts a
 * little is a smaller problem than a bundler.
 *
 * Only latin is shipped, not latin-ext. The app carries a second font file for
 * accented dinner names; these three pages are prose in English and would pay
 * 32KB for nothing.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  --bg: #eaedf2;
  --surface: #ffffff;
  --border: #dae0e8;
  --text: #15181d;
  --muted: #5c636c;
  --brand: #0a61a0;
  --accent: #1668ad;
  --radius: 5px;
  --lift: 0 1px 2px rgba(20, 28, 44, .06);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116;
    --surface: #181c23;
    --border: #2b313a;
    --text: #e9ecf1;
    --muted: #99a1ab;
    --brand: #76b0eb;
    --accent: #76b0eb;
    --lift: 0 1px 2px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px env(safe-area-inset-bottom);
  background-color: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
}

.page { max-width: 46rem; margin: 0 auto; padding: 48px 0 72px; }

/* The same mark the apps wear, minus the sibling link — there is no "other
   site" from here, and inventing one would point a stranger at a login. */
.wordmark {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.wordmark-er { color: var(--brand); }
.wordmark-sep { margin: 0 4px; font-weight: 400; color: var(--muted); }

.tagline { margin: 0 0 40px; color: var(--muted); }

h2 {
  margin: 40px 0 12px;
  font-size: 20px;
  letter-spacing: -.02em;
}
h3 { margin: 26px 0 8px; font-size: 16px; }
p, li { margin: 0 0 12px; }
ul { padding-left: 22px; }

a { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* A pane is paper: opaque, a hairline round it, a shadow you would not notice
   if it were missing. Same restraint as the app, same reason. */
.card {
  margin: 0 0 24px;
  padding: 18px 20px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.updated { color: var(--muted); font-size: 14px; }

footer {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}
footer a + a { margin-left: 14px; }