/* Tokens lifted from the Organic design system the app uses
   (apps/web/src/styles/tokens.css) so this site and the real one cannot drift.
   Dark is derived the same way theme-dark.css derives it. */
:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-rule: #dcd3c4;
  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --radius-lg: 28px;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #2e2b25;
    --color-surface: #474238;
    --color-text: #f9f4ed;
    --color-accent: #f6a06b;
    --color-rule: color-mix(in srgb, #f9f4ed 16%, transparent);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-accent); }

/* ---- landing ---- */
body.landing { min-height: 100dvh; display: grid; place-items: center;
  padding: 32px 22px calc(32px + env(safe-area-inset-bottom)); }
.landing main { width: 100%; max-width: 560px; text-align: center;
  animation: rise 620ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .landing main { animation: none; } }
.kicker { font-family: var(--font-heading); font-size: 13px; letter-spacing: .09em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 18px; }
.landing h1 { font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(46px, 13vw, 82px); line-height: 1.02; margin: 0 0 6px;
  color: var(--color-accent); }
.amp { display: block; font-size: .52em; color: var(--color-text); opacity: .75; margin: 2px 0; }
.rule { width: 46px; height: 3px; border: 0; border-radius: 2px;
  background: var(--color-accent); opacity: .6; margin: 26px auto; }
.lede { font-size: 17px; line-height: 1.65; margin: 0 auto; max-width: 42ch;
  color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.card { margin: 34px auto 0; padding: 20px 24px; background: var(--color-surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: inline-block; }
.card p { margin: 0; font-size: 15px; line-height: 1.55; }
.suits { margin-top: 30px; font-size: 17px; letter-spacing: .5em;
  color: color-mix(in srgb, var(--color-text) 32%, transparent); padding-left: .5em; }

/* ---- document pages ---- */
body.doc { padding: 0 22px calc(56px + env(safe-area-inset-bottom)); }
.doc main { max-width: 620px; margin: 0 auto; padding-top: 44px; }
.doc h1 { font-family: var(--font-heading); font-weight: 400; font-size: 38px;
  line-height: 1.1; margin: 0 0 8px; color: var(--color-accent); }
.doc h2 { font-family: var(--font-heading); font-weight: 400; font-size: 21px;
  margin: 34px 0 10px; }
.doc p, .doc li { font-size: 16px; line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.updated { font-size: 14px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 8px; }
.backlink { display: inline-block; margin-top: 40px; font-size: 15px; }

footer { margin-top: 36px; font-size: 13px; text-align: center;
  color: color-mix(in srgb, var(--color-text) 48%, transparent); }
footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer nav { margin-top: 10px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }