/* Riverling: ink on parchment.
   Palette values are lifted from App/Sources/Palette.swift so the site and the
   game cannot drift apart. */
:root {
  --parchment: #f0e8d6;
  --ink: #6b6354;          /* 4.87:1 on parchment */
  --border: #d9cfba;
  --card: #f6f1e4;

  /* The app's inkSoft (#8a8069) and waterBlue (#5e8fa3) are tuned for glyphs
     drawn on a retina display at reading distance. On the web they measure
     3.21:1 and 2.90:1 against parchment, under the 4.5:1 body-text floor, so
     the site uses darkened counterparts and leans on size for hierarchy
     instead of lightness. Same hues, enough contrast to actually read. */
  --ink-quiet: #706855;    /* 4.53:1 on parchment, replaces inkSoft for text */
  --water-deep: #416a79;   /* 4.83:1 on parchment, 5.72:1 under near-white */
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
    "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- the wordmark, tracked like the app's header ---- */
.mark {
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--ink);
  margin: 0;
  text-indent: 0.22em; /* letter-spacing pads the right edge; balance it */
  text-align: center;
}

.tagline {
  font-size: 15px;
  letter-spacing: 0.09em;
  color: var(--ink-quiet);
  text-align: center;
  margin: 10px 0 0;
  text-indent: 0.09em;
}

header.site { padding: 44px 0 0; }

header.site a { text-decoration: none; }

/* ---- hero ---- */
.hero { padding: 30px 0 8px; text-align: center; }

/* Deliberately modest: most arrivals come from a phone via a bio link, and a
   full-height 9:16 hero pushes the one button that matters below the fold. */
.hero video, .hero img.shot {
  display: block;
  width: 100%;
  max-width: 218px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--card);
}

.reel-toggle {
  display: block;
  margin: 12px auto 0;
  padding: 6px 16px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-quiet);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.reel-toggle:hover { color: var(--ink); border-color: var(--ink-quiet); }

.lede {
  font-size: 19px;
  margin: 36px 0 0;
  text-align: left;
}

p { margin: 18px 0 0; }

/* ---- the one button that matters ---- */
.cta {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 34px auto 0;
  padding: 17px 24px;
  background: var(--water-deep);
  color: #fdfbf6;
  border: none;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
}

.cta:hover { background: #375a67; }

.cta-note {
  text-align: center;
  font-size: 15px;
  color: var(--ink-quiet);
  margin: 14px 0 0;
}

/* ---- three notes on how it plays ---- */
.notes { padding: 60px 0 0; }

.note {
  border-top: 1px solid var(--border);
  padding: 26px 0 0;
  margin: 26px 0 0;
}

.note:first-child { border-top: none; margin-top: 0; }

.note h2 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
}

.note p { margin: 8px 0 0; color: var(--ink-quiet); }

/* ---- closing beta panel ---- */
.beta {
  margin: 64px 0 0;
  padding: 34px 28px 38px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  text-align: center;
}

.beta h2 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin: 0;
}

.beta p { color: var(--ink-quiet); }

/* ---- prose pages ---- */
.prose { padding: 48px 0 0; }
.prose h1 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.prose h2 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 38px 0 0;
}
.prose .updated { color: var(--ink-quiet); font-size: 15px; margin: 0; }
.prose ul { margin: 14px 0 0; padding-left: 22px; color: var(--ink-quiet); }
.prose li { margin: 8px 0 0; }
.prose a, .prose a:visited { color: var(--water-deep); }

/* ---- footer ---- */
footer.site {
  margin: 76px 0 0;
  border-top: 1px solid var(--border);
  padding: 26px 0 56px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-quiet);
}

footer.site a, footer.site a:visited {
  color: var(--ink-quiet);
  text-decoration: none;
  padding: 0 10px;
}

footer.site a:hover { color: var(--ink); text-decoration: underline; }

@media (min-width: 620px) {
  .mark { font-size: 42px; }
  .hero video, .hero img.shot { max-width: 250px; }
}