/* =========================================================================
   CLEAR ROUND — design system
   Editorial, restrained, literary. Parchment ground, near-black ink, a single
   oxblood / Herefordshire-red accent, muted stable-grey. No gradients, no
   glassmorphism, no clichés. Mobile-first, accessible, book-like reading.
   ========================================================================= */

/* ---- Fonts: a tasteful display serif + a readable body serif -------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,900&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ---- Tokens --------------------------------------------------------------- */
:root {
  /* Palette — the book's world */
  --parchment:      #f5f1e8;  /* page ground */
  --parchment-deep: #ece5d6;  /* recessed panels */
  --parchment-edge: #e2d9c6;  /* hairline borders */
  --ink:            #1b1815;  /* near-black */
  --ink-soft:       #423b33;  /* secondary text */
  --stable-grey:    #6f675b;  /* muted captions / labels */
  --oxblood:        #7a2e2a;  /* the single accent — Herefordshire red */
  --oxblood-deep:   #5e231f;  /* accent, pressed/hover */

  /* Type */
  --display: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:    'Spectral', 'Source Serif Pro', Georgia, 'Times New Roman', serif;

  /* Modular type scale (1.25) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.05rem, 1.00rem + 0.25vw, 1.18rem);
  --step-1:  clamp(1.30rem, 1.20rem + 0.50vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.10rem);
  --step-3:  clamp(2.05rem, 1.70rem + 1.80vw, 3.10rem);
  --step-4:  clamp(2.70rem, 2.00rem + 3.40vw, 5.20rem);
  --step-5:  clamp(3.40rem, 2.30rem + 5.40vw, 7.00rem);

  /* Spacing scale */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-s:   1rem;
  --space-m:   1.75rem;
  --space-l:   3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  /* Reading measure */
  --measure: 64ch;
  --measure-wide: 38rem;

  --rule: 1px solid var(--parchment-edge);
}

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

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A faint paper warmth at the edges, never a gradient blob */
body::selection,
::selection { background: rgba(122, 46, 42, 0.18); }

img { max-width: 100%; display: block; }

a {
  color: var(--oxblood);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 120ms ease;
}
a:hover { color: var(--oxblood-deep); }

:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0 0 var(--space-s); }

/* ---- Layout helpers ------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.measure { max-width: var(--measure-wide); }

.eyebrow {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 var(--space-m);
}

.section-label {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stable-grey);
  margin: 0 0 var(--space-m);
}

/* Hairline divider, the kind a fine book page uses */
.divider {
  border: 0;
  border-top: var(--rule);
  margin: 0;
}

/* A centred ornament rule for scene breaks etc. */
.ornament {
  display: block;
  text-align: center;
  color: var(--stable-grey);
  letter-spacing: 0.6em;
  margin: var(--space-l) 0;
  font-size: var(--step-0);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  padding-top: clamp(3rem, 9vw, 7rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__title {
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero__title .word { display: block; }

.hero__rule {
  width: 4.5rem;
  border: 0;
  border-top: 2px solid var(--oxblood);
  margin: var(--space-m) 0;
}

.hero__shelftalker {
  font-size: var(--step-2);
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  line-height: 1.28;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 0 var(--space-m);
}

.hero__comp {
  font-size: var(--step-0);
  color: var(--stable-grey);
  max-width: 48ch;
  margin: 0 0 var(--space-l);
}
.hero__comp em { color: var(--ink-soft); }

/* ---- Buttons -------------------------------------------------------------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.7em 1.5em;
  border: 1px solid var(--oxblood);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn--primary {
  background: var(--oxblood);
  color: var(--parchment);
}
.btn--primary:hover {
  background: var(--oxblood-deep);
  border-color: var(--oxblood-deep);
  color: var(--parchment);
}
.btn--ghost {
  background: transparent;
  color: var(--oxblood);
}
.btn--ghost:hover {
  background: var(--oxblood);
  color: var(--parchment);
}

/* =========================================================================
   GENERIC SECTION
   ========================================================================= */
.section {
  padding-block: clamp(3rem, 8vw, var(--space-xl));
}
.section + .section { border-top: var(--rule); }

.section__lede {
  font-size: var(--step-1);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.35;
  max-width: 34ch;
  margin: 0 0 var(--space-l);
}

/* Logline block — pulled epigraph */
.logline {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.3;
  max-width: 24ch;
  color: var(--oxblood);
  border-left: 2px solid var(--oxblood);
  padding-left: var(--space-m);
  margin: 0;
}

/* Two-column editorial layout for prose sections */
.cols {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 52rem) {
  .cols--aside {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
}

.prose p { max-width: var(--measure); }
.prose p + p { margin-top: 0; }

/* Back-cover blurb — a touch larger, the "jacket copy" voice */
.blurb p {
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 38ch;
}
.blurb .drop::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.4em;
  float: left;
  line-height: 0.8;
  padding: 0.04em 0.1em 0 0;
  color: var(--oxblood);
}
.blurb .turn {
  font-style: italic;
  color: var(--ink);
}

/* ---- Themes grid ---------------------------------------------------------- */
.themes {
  display: grid;
  gap: 1px;
  background: var(--parchment-edge);
  border: var(--rule);
}
@media (min-width: 40rem) {
  .themes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .themes { grid-template-columns: repeat(3, 1fr); }
}
.theme {
  background: var(--parchment);
  padding: var(--space-m);
}
.theme__num {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--oxblood);
  display: block;
  margin-bottom: var(--space-2xs);
}
.theme h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-xs);
}
.theme p {
  font-size: var(--step-0);
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
}

/* ---- Facts list (status / spec) ------------------------------------------ */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.facts li {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  border-bottom: var(--rule);
  align-items: baseline;
}
.facts li:first-child { border-top: var(--rule); }
.facts dt, .facts .k {
  font-family: var(--body);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stable-grey);
}
.facts .v { color: var(--ink); }

/* ---- About-this-production note ------------------------------------------ */
.note {
  background: var(--parchment-deep);
  border: var(--rule);
  padding: clamp(1.75rem, 4vw, var(--space-l));
}
.note p {
  max-width: 60ch;
  color: var(--ink-soft);
}
.note p:last-child { margin-bottom: 0; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  border-top: 2px solid var(--ink);
  padding-block: var(--space-l) var(--space-xl);
}
.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  justify-content: space-between;
  align-items: baseline;
}
.site-footer .mark {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.site-footer p {
  font-size: var(--step--1);
  color: var(--stable-grey);
  max-width: 46ch;
  margin: 0;
}

/* =========================================================================
   READING VIEW (manuscript.html)
   ========================================================================= */
.reader-top {
  border-bottom: var(--rule);
  padding-block: var(--space-s);
}
.reader-top .shell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
}
.reader-top .home {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stable-grey);
}
.reader-top .home:hover { color: var(--oxblood); }
.reader-top .title {
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.reader {
  padding-block: clamp(2.5rem, 7vw, var(--space-xl));
}
.reader__inner {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

.reader__masthead {
  text-align: center;
  margin-bottom: var(--space-2xl);
}
.reader__masthead .eyebrow { margin-bottom: var(--space-s); }
.reader__masthead h1 {
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.reader__masthead .sub {
  font-style: italic;
  color: var(--stable-grey);
  margin-top: var(--space-s);
  font-size: var(--step-1);
}

/* Chapter — generated by build.js */
.chapter { margin-bottom: var(--space-2xl); }
.chapter + .chapter {
  padding-top: var(--space-xl);
  border-top: var(--rule);
}

.chapter h2 {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 var(--space-l);
}
.chapter h2 .num {
  display: block;
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: var(--space-s);
}

/* Book-like reading typography */
.chapter p {
  font-size: var(--step-0);
  line-height: 1.78;
  margin: 0;
  max-width: var(--measure);
  margin-inline: auto;
  hyphens: auto;
}
.chapter p + p { text-indent: 1.4em; }
/* First paragraph of a chapter and first after a break: no indent + drop-ish */
.chapter p.lead { text-indent: 0; }
.chapter p.lead::first-letter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.2em;
  line-height: 0.78;
  float: left;
  padding: 0.06em 0.09em 0 0;
  color: var(--oxblood);
}

.chapter em { font-style: italic; }
.chapter strong { font-weight: 600; }

/* Scene break — from a `---` rule in the source */
.scene-break {
  border: 0;
  text-align: center;
  margin: var(--space-l) auto;
  max-width: var(--measure);
}
.scene-break::before {
  content: "\2042";          /* asterism-ish ornament */
  color: var(--stable-grey);
  font-size: var(--step-1);
  letter-spacing: 0.4em;
}

.reader__footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 2px solid var(--ink);
  text-align: center;
}
.reader__footer p {
  color: var(--stable-grey);
  font-size: var(--step--1);
  max-width: 52ch;
  margin-inline: auto;
}

/* ---- Skip link ------------------------------------------------------------ */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--parchment);
  padding: var(--space-xs) var(--space-s);
  z-index: 10;
}
.skip:focus { left: var(--space-s); top: var(--space-s); }

/* ---- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}