/* Shared chrome for the sub-pages (privacy, terms, the first book).
   index.html keeps its own inline styles — this file deliberately does not touch it.
   Tokens are copied from index.html's :root; keep them in step. */

:root {
  color-scheme: light;
  --bg:#faf8f3;
  --bg-2:#f1ede3;
  --surface:#ffffff;
  --ink:#14110d;
  --ink-2:#2a2722;
  --ink-3:#6b665c;
  --accent:#3b2f7a;
  --accent-2:#6b5dd3;
  --accent-3:#ebe6fa;
  --warm:#c95d2a;
  --warm-2:#faeede;
  --rule:#d8d2c4;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--bg); -webkit-font-smoothing:antialiased; }
body { background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; }
::selection { background:var(--accent); color:var(--bg); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.row { max-width:1120px; margin:0 auto; padding:0 32px; }

/* ---------- nav ---------- */
nav.top { position:sticky; top:0; z-index:60; background:rgba(250,248,243,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(216,210,196,.55); }
.nav-in { max-width:1120px; margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; }
.logo { font-family:'Instrument Serif',serif; font-size:26px; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:4px; color:var(--ink); text-decoration:none; }
.logo i { width:6px; height:6px; border-radius:50%; background:var(--accent);
  align-self:center; margin-bottom:4px; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { background:none; border:0; cursor:pointer; font-size:14px;
  color:var(--ink-2); text-decoration:none; }
.nav-links a:hover { color:var(--accent); }
.btn { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:0; border-radius:999px; font-size:15px; font-weight:500; text-decoration:none;
  padding:15px 26px; transition:background .2s, transform .2s, color .2s; }
.btn--solid { background:var(--ink); color:var(--bg); }
.btn--solid:hover { background:var(--accent); transform:translateY(-2px); }
.btn--sm { padding:11px 19px; font-size:13.5px; }

/* ---------- page head ---------- */
.head { padding:64px 0 34px; border-bottom:1px solid var(--rule); }
.eyebrow { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:14px;
  display:flex; align-items:center; gap:10px; }
.eyebrow::before { content:''; width:20px; height:1px; background:currentColor; }
h1 { font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(34px,4.4vw,54px); line-height:1.06; letter-spacing:-.025em; }
h1 em { font-style:italic; color:var(--accent); }
.head .sub { margin-top:14px; color:var(--ink-3); font-size:16px; max-width:640px; }
.stamp { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em;
  color:var(--ink-3); margin-top:20px; }

/* ---------- long-form prose ---------- */
.prose { padding:44px 0 76px; max-width:720px; }
.prose h2 { font-family:'Instrument Serif',serif; font-weight:400; font-size:26px;
  letter-spacing:-.02em; margin:40px 0 12px; }
.prose h2:first-child { margin-top:0; }
.prose p { margin:0 0 14px; color:var(--ink-2); font-size:15.5px; }
.prose ul { margin:0 0 16px 20px; color:var(--ink-2); font-size:15.5px; }
.prose li { margin-bottom:7px; }
.prose a { color:var(--accent); }
/* .prose a beats .btn--solid on specificity, which left solid buttons with indigo
   text on a near-black pill. Restate the button colours at matching weight. */
.prose a.btn--solid { color:var(--bg); }
.prose a.btn--solid:hover { color:var(--bg); }
.prose a.btn--line { color:var(--ink-2); }
.prose strong { font-weight:600; color:var(--ink); }
.prose .note { background:var(--warm-2); border-left:2px solid var(--warm);
  padding:14px 18px; margin:22px 0; font-size:14.5px; color:var(--ink-2); }

/* ---------- centred "coming soon" ---------- */
/* body isn't a flex column on purpose — `main.row`'s `margin:0 auto` would stop stretching
   and shrink to fit-content, knocking the prose out of line with the h1. Short pages fill
   the viewport from here instead. */
.soon { padding:96px 0 104px; text-align:center;
  min-height:calc(100vh - 190px); display:flex; flex-direction:column; justify-content:center; }
.soon .eyebrow { justify-content:center; }
.soon p { margin:18px auto 0; max-width:520px; color:var(--ink-3); font-size:16.5px; }
.soon .acts { margin-top:32px; display:flex; gap:18px; justify-content:center;
  align-items:center; flex-wrap:wrap; }
.textlink { background:none; border:0; padding:0 0 2px; cursor:pointer;
  font-size:14.5px; color:var(--accent); text-decoration:none;
  border-bottom:1px solid var(--accent-3); }
.textlink:hover { border-bottom-color:var(--accent); }

/* ---------- footer ---------- */
footer { background:var(--bg-2); border-top:1px solid var(--rule); padding:34px 0 30px; }
.foot { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:13.5px; color:var(--ink-3); }
.foot a { color:var(--ink-3); text-decoration:none; margin-left:20px; }
.foot a:hover { color:var(--accent); }

@media (max-width:720px) {
  .nav-links { gap:18px; }
  .nav-links a.hide-sm { display:none; }
  .row { padding:0 22px; }
  .foot { flex-direction:column; }
  .foot a { margin:0 20px 0 0; }
}