:root{
--purple-950:#1c0a35;--purple-900:#2c0f52;--purple-800:#3a1668;--purple-700:#4a1a86;--purple-600:#6d19ca;--purple-500:#7c3aed;--purple-300:#c4a6f0;--purple-100:#f2e8ff;--purple-050:#faf6ff;
--ink-950:#0e0e0e;--ink-800:#1a1720;--gray-700:#454548;--gray-600:#5d5d5d;--gray-400:#8c8a90;--gray-200:#d9d6de;--white:#ffffff;
--orange-700:#d96600;--orange-600:#f57800;--orange-100:#fde6cf;
--surface-page:var(--white);--surface-tint:var(--purple-100);--surface-inverse:var(--ink-950);
--text-primary:var(--ink-950);--text-secondary:var(--gray-600);--text-accent:var(--purple-600);--text-accent-warm:var(--orange-600);
--accent-primary:var(--purple-600);--accent-primary-hover:var(--purple-700);--accent-warm:var(--orange-600);
--border-subtle:var(--gray-200);--border-strong:var(--ink-950);
--font-display:"Sora",ui-sans-serif,system-ui,sans-serif;
--font-body:"Neuton",Georgia,"Times New Roman",serif;
/* Sara collapsed the palette to two families, 2026-08-27.
   --font-mono and --font-ui are kept as tokens so every existing rule
   still resolves; both now point at Sora. Attribution and metadata are
   Sora uppercase and letterspaced, which the rules below already do. */
--font-mono:"Sora",ui-sans-serif,system-ui,sans-serif;
--font-ui:"Sora",ui-sans-serif,system-ui,sans-serif;
--radius-md:8px;
--measure:720px;
}

html,body{margin:0;padding:0}
*{box-sizing:border-box}
img{max-width:100%;height:auto}

.stf-chapter{font-family:var(--font-body);background:var(--surface-page);color:var(--text-primary);line-height:1.65}
.stf-chapter a{color:var(--accent-primary)}
.stf-chapter a:hover{color:var(--accent-primary-hover)}

/* --- site chrome --- */
.stf-top{background:var(--white);border-bottom:1px solid var(--border-subtle)}
.stf-top-inner{max-width:1200px;margin:0 auto;padding:18px clamp(20px,5vw,48px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.stf-brand{display:flex;align-items:center;gap:12px}
.stf-brand img{height:32px}
.stf-brand span{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-0.01em}
.stf-nav{display:flex;gap:28px;font-family:var(--font-display);font-size:13px;letter-spacing:0.06em;text-transform:uppercase}
.stf-nav a{color:var(--text-secondary);text-decoration:none}
.stf-nav a:hover{color:var(--text-primary)}

/* --- reading column --- */
.stf-wrap{max-width:var(--measure);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.stf-head{padding-top:64px;padding-bottom:8px}
.stf-kicker{font-family:var(--font-ui);font-weight:500;font-size:0.8125rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-warm)}
.stf-chapter h1{font-family:var(--font-display);font-weight:700;font-size:3.75rem;line-height:1.08;margin:14px 0 28px;text-wrap:pretty}
.stf-lede,.stf-body p.lede{font-size:1.375rem;line-height:1.6;color:var(--text-secondary);margin:0 0 30px;text-wrap:pretty}

/* --- body copy --- */
.stf-body{padding-bottom:64px}
.stf-body p{font-size:1.1875rem;line-height:1.7;margin:0 0 26px;text-wrap:pretty}
.stf-body h2{font-family:var(--font-display);font-weight:700;font-size:1.75rem;line-height:1.25;margin:48px 0 16px}
.stf-body h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;line-height:1.3;margin:36px 0 12px}
.stf-body ul,.stf-body ol{font-size:1.1875rem;line-height:1.7;margin:0 0 26px;padding-left:24px}
.stf-body li{margin-bottom:8px}
.stf-body hr{border:0;border-top:1px solid var(--border-subtle);margin:44px 0}
.stf-body img{margin:32px 0}

/* --- epigraph / pull quote --- */
.stf-body blockquote{margin:56px 0;padding:0 0 0 15%;border:0}
.stf-body blockquote p{font-family:var(--font-body);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--text-primary);margin:0 0 14px;text-align:right;text-wrap:pretty}
.stf-body blockquote cite,.stf-body blockquote footer{display:block;text-align:right;font-family:var(--font-mono);font-style:normal;font-size:0.8125rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-secondary)}
.stf-body blockquote cite::before,.stf-body blockquote footer::before{content:'\2014\00a0'}
@media (max-width:600px){.stf-body blockquote{padding-left:0}}

/* --- footnote markers and back-links --- */
.stf-body sup{font-family:var(--font-ui);font-size:0.72em;line-height:0;margin:0 0.06em 0 0.02em}
.stf-body sup a,.stf-body a.footnote-ref{color:var(--accent-warm);text-decoration:none}
.stf-body sup a:hover,.stf-body a.footnote-ref:hover{color:var(--orange-700);text-decoration:underline}
.stf-body a.footnote-backref{color:var(--accent-warm);text-decoration:none;margin-left:6px}
.stf-body a.footnote-backref:hover{color:var(--orange-700)}

/* --- notes block --- */
.stf-notes{padding-bottom:56px}
.stf-notes h2,.stf-body h2.stf-notes-heading{font-family:var(--font-ui);font-weight:500;font-size:0.75rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--border-subtle)}
.stf-notes ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.stf-notes li{display:grid;grid-template-columns:28px 1fr;gap:8px;font-size:0.9375rem;line-height:1.6;color:var(--text-secondary);margin:0}
.stf-notes li::before{content:counter(list-item) ".";font-family:var(--font-ui);color:var(--accent-warm)}
.stf-notes ol{counter-reset:list-item}
.stf-notes li{counter-increment:list-item}

/* --- prev / next --- */
.stf-pager{max-width:var(--measure);margin:0 auto;border-top:1px solid var(--border-subtle);padding:28px clamp(20px,5vw,48px);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.stf-pager a{font-family:var(--font-display);font-weight:600;font-size:0.9375rem;color:var(--text-accent);text-decoration:none;background:transparent;border:1.5px solid transparent;border-radius:var(--radius-md);padding:12px 22px}
.stf-pager a:hover{color:var(--accent-primary-hover)}
.stf-pager .stf-pager-empty{visibility:hidden}

/* --- footer --- */
.stf-foot{background:var(--ink-950);border-top:1px solid rgba(255,255,255,0.1);padding:28px clamp(20px,5vw,48px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.stf-foot img{height:22px}
.stf-foot span{font-family:var(--font-mono);font-size:11px;color:var(--gray-400)}
/* .stf-chapter a sets the purple link colour and outranks a single class,
   so this needs the extra specificity or the link renders deep purple on black. */
.stf-chapter .stf-foot-out{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--purple-300);text-decoration:none}
.stf-chapter .stf-foot-out:hover{color:var(--white)}

@media (max-width:600px){
.stf-chapter h1{font-size:2.5rem}
.stf-head{padding-top:40px}
.stf-nav{gap:16px;font-size:11px}
}


/* Short chapters, and the front- and back-matter pieces, left the footer
   sitting mid-screen. Push it to the bottom edge. margin-top:auto rather than
   flex:1 on a content element, so nothing in the chapter body gets stretched.
   Scoped to the chapter body class - /read/, /register/, /book-login/ and
   /thank-you-book/ each solve this in their own stylesheet already. */
.stf-chapter-page .stf-chapter{min-height:100vh;display:flex;flex-direction:column}
.stf-chapter-page .stf-foot{margin-top:auto}


/* --- footer, three-column (3 Oct): matches the landing pages -- wordmark left, (c) + year centre, Sign out right --- */
.stf-foot.stf-foot-3{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.stf-foot-3 .stf-foot-mark{justify-self:start;display:flex;align-items:center}
.stf-foot-3 .stf-foot-mark img{height:26px}
.stf-foot-3 .stf-foot-copy{justify-self:center;white-space:nowrap}
.stf-foot-3 .stf-foot-right{justify-self:end;font-size:inherit;color:inherit}

/* --- footnote pop-overs (footnotes.js, 2026-10-15) --- */
.stf-fn-pop{position:absolute;z-index:1000;max-width:min(380px,calc(100vw - 24px));background:var(--white);color:var(--text-primary);border:1px solid var(--border-subtle);border-top:3px solid var(--accent-warm);border-radius:var(--radius-md);box-shadow:0 6px 24px rgba(14,14,14,.14);padding:12px 14px;font-family:var(--font-body);font-size:16px;line-height:1.45}
.stf-fn-pop[hidden]{display:none}
.stf-fn-pop p{margin:0}
.stf-fn-pop p + p{margin-top:.5em}
.stf-fn-pop a{color:var(--accent-primary)}
.stf-fn-pop-num{float:left;font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--accent-warm);margin:3px 8px 0 0}

/* --- back matter: Glossary, Works Cited, Further Reading, appendices (2026-10-15) --- */
.stf-nav{flex-wrap:wrap;row-gap:6px}
.stf-body [id]{scroll-margin-top:24px}
.stf-body p.stf-cite{padding-left:1.5em;text-indent:-1.5em;margin:0 0 14px}
.stf-body p.stf-cite a{overflow-wrap:anywhere}
.stf-body p.stf-gloss{margin:0 0 18px}
.stf-body p.stf-break{text-align:center;letter-spacing:.3em;color:var(--text-secondary);margin:36px 0}
.stf-body p:target,.stf-body li:target{background:rgba(247,147,50,.12);border-radius:4px}
.stf-body figure.stf-figure{margin:32px 0}
.stf-body figure.stf-figure img{display:block;max-width:100%;height:auto;margin:0 auto}
.stf-body figure.stf-figure figcaption{font-size:.95rem;line-height:1.5;color:var(--text-secondary);margin-top:10px}
/* --- quiet glossary links: first use of a glossary term per chapter (2026-10-16) --- */
.stf-body a.stf-gloss-link{color:inherit;text-decoration:underline dotted;text-decoration-color:var(--text-secondary);text-decoration-thickness:1px;text-underline-offset:3px}
.stf-body a.stf-gloss-link:hover{color:var(--accent-primary);text-decoration-color:currentColor}
/* glossary pop-over label (2026-10-16) */
.stf-fn-pop-label{display:block;font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-warm);margin:0 0 6px}
.stf-fn-pop strong{font-weight:700}
/* glossary pop-over: purple bar and label, so it reads differently from footnotes (orange) (2026-10-16) */
.stf-fn-pop:has(.stf-fn-pop-label){border-top-color:var(--accent-primary)}
.stf-fn-pop .stf-fn-pop-label{color:var(--accent-primary)}
/* glossary opening note (2026-10-16) */
.stf-body p.stf-gloss-note{font-style:italic;color:var(--text-secondary);margin:0 0 32px}
/* support reminders (2026-10-16): footer link on every book page, one quiet line at the end of each chapter */
.stf-foot-3 .stf-foot-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.stf-support-line{max-width:680px;margin:4px auto 44px;padding:0 20px;text-align:center;font-family:var(--font-body);font-style:italic;font-size:1rem;line-height:1.5}
.stf-chapter .stf-support-line a{color:var(--text-secondary);text-decoration:none}
.stf-chapter .stf-support-line a:hover{color:var(--accent-warm)}