/* decco.ai — web tokens
   Extracted from the S941 copper editorial system ("Fourteen Months of Decco",
   artifact d3a8775b). Keep aligned with native/tokens.ts by eye, not machinery. */

:root {
  --canvas: #F7F5F0;
  --surface: #FBFBF9;
  --ink: #26221C;
  --ink-soft: #57503F;
  --muted: #8A8171;
  --copper: #A96A38;
  --copper-deep: #8C5527;
  --hairline: #E3DDCE;
  --wash: #F1ECE1;
  --good: #5D7A4E;
  /* S951 brand ruling (turn 8): the name is Hickory, the dot is copper — always. */
  --wordmark-ink: #7A2F18;
  --wordmark-dot: #A96A38;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #1E1A15;
    --surface: #252019;
    --ink: #EDE7DA;
    --ink-soft: #C8BFAC;
    --muted: #94896F;
    --copper: #CE9057;
    --copper-deep: #DCA76F;
    --hairline: #3A332A;
    --wash: #2B251D;
    --good: #8FAE7C;
    /* Dark ground: glyphs go ink, the dot goes the ruled dark-ground copper #C88B5C (turn 8). */
    --wordmark-ink: #EDE7DA;
    --wordmark-dot: #C88B5C;
  }
}
:root[data-theme="dark"] {
  --canvas: #1E1A15;
  --surface: #252019;
  --ink: #EDE7DA;
  --ink-soft: #C8BFAC;
  --muted: #94896F;
  --copper: #CE9057;
  --copper-deep: #DCA76F;
  --hairline: #3A332A;
  --wash: #2B251D;
  --good: #8FAE7C;
  --wordmark-ink: #EDE7DA;
  --wordmark-dot: #C88B5C;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 720px; margin: 0 auto; padding: 0 28px 96px; }

/* eyebrow label */
.label {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
}

h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(42px, 7vw, 62px);
  line-height: 1.06;
  margin: 0 0 26px;
  text-wrap: balance;
}
h1 em { font-style: italic; color: var(--copper); }

h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: 31px;
  line-height: 1.2;
  margin: 14px 0 20px;
  text-wrap: balance;
}

h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 21px; margin: 0 0 8px; }

p { margin: 0 0 1.1em; max-width: 66ch; }
.quiet { color: var(--ink-soft); }
.standfirst { font-size: 21px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 60ch; }
.standfirst strong { font-weight: 500; color: var(--ink); }

a { color: var(--copper); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { color: var(--copper-deep); }

section { padding-top: 64px; }
.rule-dot { color: var(--copper); }

/* ---- sticky header (founder requirement) ---- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
.site-header .bar {
  max-width: 720px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
/* S951 wordmark ruling: Lora 600, name Hickory, one copper dot, no domain.
   Never below 20px live text (blur floor ~19px). */
.site-header .wordmark {
  font-family: "Lora", Georgia, serif;
  font-weight: 600; font-size: 22px; color: var(--wordmark-ink); text-decoration: none;
  font-style: normal;
}
.site-header .wordmark em { font-style: normal; color: var(--wordmark-dot); }
.site-header nav { display: flex; gap: 22px; }
.site-header nav a {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--copper); }

/* ---- hero ---- */
.hero { padding: 88px 0 56px; border-bottom: 1px solid var(--hairline); }
.hero .label { display: block; margin-bottom: 22px; }

/* ---- washed callout ---- */
.front { border-left: 2px solid var(--copper); background: var(--wash); padding: 20px 24px; margin: 0 0 18px; }
.front h3 { font-size: 20px; }
.front p { font-size: 16.5px; margin: 0; color: var(--ink-soft); }

/* ---- audience grid ---- */
.who {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); margin-top: 8px;
}
.who .cell { background: var(--surface); padding: 22px 20px 18px; }
.who .cell h3 { font-size: 19px; margin-bottom: 6px; }
.who .cell p { font-size: 15.5px; color: var(--ink-soft); margin: 0; }
@media (max-width: 620px) { .who { grid-template-columns: 1fr; } }

/* ---- app store ---- */
.store-cta {
  display: inline-block;
  font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--canvas); background: var(--copper);
  padding: 14px 26px; text-decoration: none; margin-top: 8px;
}
.store-cta:hover { background: var(--copper-deep); color: var(--canvas); }

/* ---- continue nav (bottom of every page) ---- */
.continue {
  margin-top: 88px; padding-top: 36px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.continue a {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--copper);
}
.continue a:hover { color: var(--copper-deep); }
.continue .kicker { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }

/* ---- footer ---- */
.site-footer {
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hairline);
  font-family: "Archivo", system-ui, sans-serif; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--copper); }

/* ---- prose pages (story, privacy) ---- */
.era { display: grid; grid-template-columns: 120px 1fr; gap: 26px; padding: 26px 0; border-top: 1px solid var(--hairline); }
.era:first-of-type { border-top: none; padding-top: 8px; }
.era .when {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 6px;
}
.era p { font-size: 17px; margin-bottom: .5em; }
.era p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .era { grid-template-columns: 1fr; gap: 6px; } }

.legal h2 { font-size: 24px; margin-top: 40px; }
.legal p, .legal li { font-size: 16.5px; }
.legal ul { padding-left: 22px; }
.eff { color: var(--muted); font-size: 15px; margin-bottom: 8px; }