/* Wren — marketing + legal site. Static, no build step, no trackers.
   Dusk-and-dawn palette, mirrored from the app (app/src/lib/theme.ts).
   Deliberately single-theme (a "letters into the dark" app commits to dusk). */

:root {
  /* Default: warm paper — readable first, dawn accents. (Wren's light palette.) */
  --bg: #f6f1e6;
  --bg-raised: #fdfaf3;
  --bg-input: #efe8da;
  --text: #2b2119;        /* warm near-black, strong contrast on cream */
  --text-dim: #6a5e4b;
  --text-faint: #8f8168;
  --accent: #b5761f;      /* dawn, deepened so it reads on paper */
  --accent-deep: #935e14;
  --line: #e3d9c5;
  --glow: rgba(181, 118, 31, 0.10);
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --measure: 65ch;
  --max: 720px;
}

/* Deliberately light everywhere — the site is for reading (landing + legal),
   so readability wins over an all-dark aesthetic. `color-scheme: light` also
   stops the browser from tinting form controls/scrollbars dark. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A soft dawn glow rising from the bottom, so "into the dark" has a horizon. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(228, 168, 104, 0.14), transparent 60%);
  z-index: 0;
}

.wrap { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

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

/* ---- Header / wordmark ---- */
.site-head { padding: 28px 0 0; }
.wordmark {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.5px;
  color: var(--text);
}
.wordmark .dot { color: var(--accent); }

/* ---- Hero ---- */
.hero { padding: 12vh 0 8vh; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 24px;
}
.hero .lede {
  max-width: var(--measure);
  color: var(--text-dim);
  font-size: 1.2rem;
  margin: 0 0 36px;
}
.tagline { color: var(--accent); font-family: var(--serif); font-style: italic; }

/* ---- Buttons / store row ---- */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
}
.btn-primary { background: var(--accent); color: #241606; }
.btn-primary:hover { background: #efb87e; text-decoration: none; }
.btn-ghost { border: 1px solid var(--line); color: var(--text-dim); }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.soon { color: var(--text-faint); font-size: 0.9rem; }

/* ---- Sections ---- */
section { padding: 6vh 0; border-top: 1px solid var(--line); }
section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 28px;
  text-wrap: balance;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--accent-deep);
  margin: 0 0 10px;
}

/* Steps */
.steps { display: grid; gap: 28px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.step .n {
  font-family: var(--serif);
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1.2;
  min-width: 1.4em;
}
.step h3 { margin: 0 0 4px; font-size: 1.12rem; }
.step p { margin: 0; color: var(--text-dim); }

/* "What it's not" — quiet list */
.nots { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nots li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--text-dim);
  font-size: 0.98rem;
}

.note { color: var(--text-dim); max-width: var(--measure); }
.note strong { color: var(--text); font-weight: 600; }

/* ---- Footer ---- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  color: var(--text-faint);
  font-size: 0.92rem;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.foot-links a { color: var(--text-dim); }
.foot-mark { font-family: var(--serif); color: var(--text-dim); }

/* ---- Legal document pages ---- */
.doc { padding: 5vh 0 8vh; }
.doc .back { color: var(--text-dim); font-size: 0.95rem; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 5vw, 2.6rem); margin: 24px 0 6px; }
.doc .meta { color: var(--text-faint); font-size: 0.9rem; margin: 0 0 32px; }
.doc h2 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; margin: 40px 0 12px; }
.doc h3 { font-size: 1.08rem; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--text); max-width: var(--measure); }
.doc p { margin: 0 0 16px; }
.doc ul { padding-left: 22px; margin: 0 0 16px; }
.doc li { margin: 0 0 8px; }
.doc .lead { color: var(--text-dim); font-size: 1.08rem; }
.doc strong { color: var(--text); }
.callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-raised);
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  margin: 0 0 24px;
  max-width: var(--measure);
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .hero { padding: 8vh 0 6vh; }
  .cta-row { gap: 10px; }
  .btn { width: 100%; text-align: center; }
  .soon { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}