/* Otto — shared design system.
 *
 * Every page links this file. It holds the design tokens and the base rules
 * that were previously copy-pasted into all six pages, where a rebrand meant
 * editing six files and silently breaking any one you missed.
 *
 * Page-specific values are set by overriding a token in the page's own
 * <style> block, not by redeclaring the rule. For example:
 *     :root { --wrap-max: 860px; --body-leading: 1.7; }
 */

:root {
  /* Surfaces */
  --bg: #f2ece1;
  --bg-2: #e9e0d0;
  --bg-3: #ded2be;
  --card: rgba(21, 18, 13, 0.035);
  --card-solid: #ebe3d6;

  /* Lines */
  --line: rgba(21, 18, 13, 0.16);
  --line-strong: rgba(21, 18, 13, 0.3);

  /* Text */
  --text: #15120d;
  --muted: #4b4337;
  /* Lightened from #86765f, which measured 4.22:1 inside a --card surface —
     the translucent card lightens the backdrop, so a mid-tone loses contrast
     there even though it passed 4.53:1 against the page. This clears 4.5:1 on
     both. Hue and saturation unchanged. */
  /* Clears 4.5:1 on the paper AND on --card, which the translucent card
     surface darkens slightly. Same trap as the dark theme, inverted. */
  --faint: #6d6253;

  /* Accents */
  --amber: #b03d10;
  --ember: #9a7415;
  --ember-deep: #7d3a12;
  --moss: #3f6b34;
  --amber-dim: rgba(176, 61, 16, 0.1);
  --moss-dim: rgba(63, 107, 52, 0.12);
  /* Every stop is dark enough for cream text to clear 4.5:1. The dark theme
     put DARK text on a light amber gradient; inverting the palette without
     re-checking that pairing left cream on gold at 3.85:1. */
  --grad-fire: linear-gradient(100deg, #b64d1c 0%, #b03d10 45%, #8a6813 100%);

  /* Type */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Metadata face. The reference site sets a third of its page in letter-spaced
     mono — labels, dates, prices — and that texture is most of why it reads as
     designed rather than assembled. Using the system stack rather than a
     webfont keeps it free: the page is 274KB and a fourth family would be ~30KB
     for text that is never more than a few words at a time. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale. The page previously used twenty hand-picked sizes, eleven of
     them between 0.65rem and 1rem — 0.78 and 0.79 sitting side by side, a
     difference nobody can see. Four steps in that range, each a perceptible
     jump, is what makes a page read as designed rather than assembled. */
  --t-micro: 0.72rem;   /* eyebrows, badges, table labels */
  --t-small: 0.8rem;    /* captions, meta, fine print */
  --t-body-s: 0.9rem;   /* dense body, card copy */
  --t-body: 1rem;       /* body */
  --t-lead: 1.125rem;   /* section intros */
  --t-title: 1.375rem;  /* card and step titles */

  /* Radius. Was ten values (7, 10, 13, 14, 16, 18, 20, 22, 26, 999). Three,
     used consistently, reads as a decision; ten reads as an accident. */
  --r-sm: 3px;
  --r-lg: 4px;
  --r-pill: 999px;

  /* Per-page overrides — see header comment */
  --wrap-max: 1160px;
  --body-leading: 1.65;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: var(--ember); color: #fff; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain over the whole page */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 995; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: overlay;
}

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 24px; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--amber); color: #1a0e04;
  padding: 10px 18px; z-index: 1001; border-radius: 0 0 10px 0;
  text-decoration: none; font-weight: 700;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px;
}

/* Wordmark, identical on every page */
.logo {
  font-family: var(--serif); font-weight: 600; font-size: 1.45rem;
  letter-spacing: -0.02em; text-decoration: none; color: var(--text);
}
.logo em {
  font-style: italic; font-weight: 400; color: transparent;
  background: var(--grad-fire);
  -webkit-background-clip: text; background-clip: text;
}