/* ============================================================
   CITED & CONTESTED - Global Stylesheet
   UPDATED: 2026-08-07
   ------------------------------------------------------------
   Paper and ink, with gold, ember and teal used as meaning,
   not decoration. Gold = a claim. Ember = a claim in dispute.
   Teal = a claim that holds up.
   ------------------------------------------------------------
   HOW THIS FILE IS PUT TOGETHER (read this before editing)

   1. TOKENS. Every colour, font, radius, shadow and spacing value
      is a CSS custom property declared once in the :root block
      immediately below. Nothing else in this file should contain
      a raw hex colour. If you find yourself typing a # value in a
      component rule, add a token instead. Change a token once and
      it changes everywhere on the site, including the printables.

   2. WHERE TO CHANGE THE BRAND COLOURS.
        --ink / --paper          the two base colours, everything
                                 else is built on them
        --gold / --ember / --teal  the three brand accents
      Those five are the identity. If you change them you are
      rebranding the site, so change them deliberately and then
      re-check contrast (see point 3).

   3. WHY THERE ARE "-dark" TWINS OF EACH ACCENT.
      --gold-dark, --ember-dark and --teal-dark are the ONLY
      versions allowed for text, borders and focus rings on the
      light paper background. The bright --gold, --ember and
      --teal are for fills, dots, rules and 4px accent edges only.
      This split is a WCAG 2.1 AA contrast fix, not a style
      preference. The bright versions do not reach 4.5:1 against
      --paper. If you swap a -dark token back to its bright
      sibling in a text rule you will break AA, so do not.
      (The sister site goodlearnerproject-site solves the same
      problem with a dated override block at the bottom of its
      stylesheet. This site solves it here, at the token level.)

   4. FILE ORDER. Sections run: tokens, reset and base,
      typography, layout, buttons, then components roughly in the
      order they appear on a page, then footer, then utilities,
      then the responsive breakpoints, then reduced motion, then
      the printable one-pagers and the print rules. Keep new
      rules in the matching section rather than appending to the
      end, so the cascade stays predictable.

   5. NO BUILD STEP. This file is served exactly as written. The
      pages link it as css/style.css?v=1. If a change does not
      show up after you re-upload, bump that ?v= number in every
      .html file to bust the browser cache.
   ============================================================ */

:root {
  /* ---- Brand palette (do not change these five) ---- */
  --ink:      #0F1E2D;
  --paper:    #F6EBDC;
  --gold:     #E0B23C;
  --ember:    #F26A21;
  --teal:     #2A9D8F;
  --charcoal: #2B2B2B;
  --stone:    #8D8D85;

  /* ---- Readable variants of the accents ----
     The three brand accents are bright, so on the light paper
     background we use these darker versions for any actual text.
     They keep the same hue and pass WCAG AA contrast. ---- */
  --gold-dark:  #7A5A0D;
  --ember-dark: #A63C05;
  --teal-dark:  #1B6F65;

  /* ---- Ink family (text) ---- */
  --ink-soft:  #3A4C5C;
  --ink-faint: #4E5F6E;

  /* ---- Paper family (surfaces) ---- */
  --paper-2: #EFE1CE;
  --paper-3: #E6D5BE;
  --white:   #FFFDF9;
  --line:    #DCCBB2;
  --line-soft: #E8DAC5;

  /* ---- Dark band surfaces ---- */
  --band-bg:     #0F1E2D;
  --band-text:   #E8DCC8;
  --band-faint:  #A9B6C1;
  --footer-bg:   #0F1E2D;
  --footer-text: #C6D0D8;
  --footer-head: #F6EBDC;
  --header-bg:   rgba(246,235,220,0.94);

  /* ---- Tints used behind tags and call-outs ---- */
  --teal-soft:  #DDEFEC;
  --ember-soft: #FBE2D4;
  --gold-soft:  #F7E9C6;

  --shadow-sm: 0 1px 3px rgba(15,30,45,0.08);
  --shadow-md: 0 6px 24px rgba(15,30,45,0.12);
  --shadow-lg: 0 16px 48px rgba(15,30,45,0.18);
  --radius:    10px;
  --radius-lg: 18px;
  --transition: 0.2s ease;
  --maxw: 1120px;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* ============================================================
   RESET & BASE
   Border-box everywhere, zeroed margins, and the two global
   defaults: body colour comes from --ink, body background from
   --paper. The focus-visible rule below is an accessibility
   requirement (WCAG 2.4.7): it is what gives keyboard users a
   3px ember outline on every interactive element. Do not remove
   it, and do not replace it with outline:none.
   .visually-hidden hides text from the screen but keeps it for
   screen readers. It is used for live regions and for headings
   that exist only to give a section a name. Never use display:
   none for that job, because display:none hides it from screen
   readers too.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: var(--teal-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--ink); text-decoration: underline; }

/* Visible focus everywhere, for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ember-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen-reader only text */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; left: 0.5rem; top: -100px; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600; font-size: 0.95rem;
}
.skip-link:focus { top: 0; color: var(--paper); text-decoration: none; }

/* ============================================================
   TYPOGRAPHY
   Two families, both loaded from Google Fonts in every page
   head: Fraunces (display, --font-display) for headings, Inter
   (--font-body) for everything else. Sizes use clamp() so they
   scale with the viewport without needing extra breakpoints.
   p has max-width:70ch on purpose. That is the reading measure,
   not an accident, so avoid overriding it.
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.18;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.95rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { margin-bottom: 1.1rem; max-width: 70ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--ink-soft); }
.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold-dark);
}
.eyebrow--ember { color: var(--ember-dark); }
.eyebrow--teal  { color: var(--teal-dark); }

/* ============================================================
   LAYOUT + SPACING UTILITIES
   .container (wide, --maxw) and .container--narrow (760px) are
   the only two page widths. .section is the standard vertical
   rhythm; .section--paper2 and .section--ink are the alternating
   background bands. The .mt-* and .mb-* helpers at the end are
   the only spacing utilities. Reach for them before adding an
   inline style.
   ============================================================ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.container--narrow { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 4.5rem 0; }
.section--sm { padding: 2.75rem 0; }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--band-bg); color: var(--band-text); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--band-text); }
.section--ink p { color: var(--band-faint); }
.section--ink a { color: var(--gold); }
.section--ink a:hover { color: #fff; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.center { text-align: center; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}
.measure { max-width: 62ch; }
.measure-center { max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   COMPONENTS: BUTTONS
   One .btn base plus colour variants. .btn--ghost is the default
   secondary. .btn--sm is the small size. .btn[aria-disabled] and
   .btn.is-disabled render the disabled look. Note the disabled
   state sets pointer-events:none, so a disabled button cannot be
   clicked even if the JS forgets.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.97rem;
  padding: 0.78rem 1.4rem; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; text-align: center;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #1A3244; color: var(--paper); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #C99A26; color: var(--ink); }
.btn--ember { background: var(--ember-dark); color: #fff; }
.btn--ember:hover { background: #9A3906; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--ink); }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.87rem; }
.btn.is-disabled,
.btn[aria-disabled="true"] {
  background: var(--paper-3); color: var(--ink-soft); border-color: var(--line);
  cursor: default; pointer-events: none;
}

/* ============================================================
   COMPONENTS: HEADER + MAIN NAV
   Sticky, translucent, with a blur. The nav collapses into the
   hamburger below 900px (see the responsive section). Two
   attribute selectors carry meaning and must keep working:
     .main-nav a[aria-current="page"]        current page marker
     .nav-toggle[aria-expanded="true"] span  hamburger to X
   Both are driven by attributes, not classes, because those
   attributes are also what screen readers announce.
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); margin-right: auto; flex-shrink: 0; }
.brand:hover { color: var(--ink); text-decoration: none; }
.cc-mark { width: 34px; height: 34px; flex: none; }
.cc-mark .page { fill: var(--white); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.cc-mark .spine { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: 0.45; }
.cc-mark .check { stroke: var(--gold-dark); stroke-width: 7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cc-mark .cross { stroke: var(--ember-dark); stroke-width: 7; stroke-linecap: round; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.05; display: block; }
.brand-sub { display: block; font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 1.25rem; }
.main-nav a { font-family: var(--font-body); font-weight: 500; font-size: 0.93rem; color: var(--ink-soft); white-space: nowrap; }
.main-nav a:hover { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--gold); }
.main-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--ember); }
.nav-toggle {
  display: none; background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--radius); cursor: pointer; padding: 0.45rem 0.55rem; color: var(--ink);
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  background: var(--band-bg); color: var(--band-text);
  padding: 3.5rem 0 3.25rem;
  border-bottom: 4px solid var(--gold);
}
.hero h1 { color: var(--paper); max-width: 18ch; }
.hero .lead { color: var(--band-faint); max-width: 58ch; margin-top: 1.2rem; }
.hero .eyebrow { color: var(--gold); }
.hero-logo { width: min(420px, 82%); margin-bottom: 1.6rem; }
.hero-actions { margin-top: 2rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero-strip {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(246,235,220,0.2);
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
  font-size: 0.86rem; color: var(--band-faint);
}
.hero-strip span { display: inline-flex; align-items: center; gap: 0.45rem; }

.thesis {
  border-left: 4px solid var(--gold);
  padding: 0.3rem 0 0.3rem 1.3rem;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.4;
  color: var(--ink); max-width: 34ch;
}

/* ============================================================
   COMPONENTS: CARDS + METHOD STEPS
   .card is the generic white panel. a.card adds the lift on
   hover (disabled under prefers-reduced-motion further down).
   .step is the numbered method block on the home page.
   ============================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
a.card { color: var(--ink); display: block; transition: transform var(--transition), box-shadow var(--transition); }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); text-decoration: none; }
.card h3 { margin: 0.3rem 0 0.5rem; }
.card p { font-size: 0.96rem; color: var(--ink-soft); }
.card--ink { background: var(--band-bg); color: var(--band-text); border-color: var(--band-bg); }
.card--ink h3, .card--ink h4 { color: var(--paper); }
.card--ink p { color: var(--band-faint); }

.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); position: relative; }
.step-n {
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem;
  color: var(--gold-dark); line-height: 1; display: block; margin-bottom: 0.4rem;
}
.step h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ============================================================
   COMPONENTS: CLAIM TAGS, FILTERS AND CLAIM CARDS
   This is the load-bearing part of the brand. Three tags, always
   the same three colours, always meaning the same thing:
     .ctag--established  teal   checked against the public record
     .ctag--contested    ember  publicly disputed
     .ctag--claim        gold   only the author says so
   Do not recolour these for decoration and do not invent a
   fourth tag. .tag-filter uses [aria-pressed="true"] for its on
   state, so the visual state and the announced state cannot
   drift apart. .claim-card.is-hidden is what the filter toggles.
   ============================================================ */
.ctag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem; border-radius: 999px;
  border: 1.5px solid transparent; white-space: nowrap;
}
.ctag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ctag--established { background: var(--teal-soft);  color: var(--teal-dark);  border-color: var(--teal); }
.ctag--established::before { background: var(--teal-dark); }
.ctag--contested   { background: var(--ember-soft); color: var(--ember-dark); border-color: var(--ember); }
.ctag--contested::before { background: var(--ember-dark); }
.ctag--claim       { background: var(--gold-soft);  color: var(--gold-dark);  border-color: var(--gold); }
.ctag--claim::before { background: var(--gold-dark); }

.tag-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0; }
.tag-filter {
  display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  background: var(--white); color: var(--ink-soft);
  border: 1.5px solid var(--line); transition: all var(--transition);
}
.tag-filter:hover { border-color: var(--ink); color: var(--ink); }
.tag-filter::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--stone); flex: none; }
.tag-filter[data-tag="established"]::before { background: var(--teal); }
.tag-filter[data-tag="contested"]::before   { background: var(--ember); }
.tag-filter[data-tag="claim"]::before        { background: var(--gold); }
.tag-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-status { font-size: 0.9rem; color: var(--ink-faint); margin: 0.4rem 0 1.2rem; }

.claim-card {
  background: var(--white); border: 1px solid var(--line);
  border-left: 5px solid var(--stone);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; margin-bottom: 0.9rem;
}
.claim-card[data-tag="established"] { border-left-color: var(--teal); }
.claim-card[data-tag="contested"]   { border-left-color: var(--ember); }
.claim-card[data-tag="claim"]       { border-left-color: var(--gold); }
.claim-card.is-hidden { display: none; }
/* Quoted claims sit in charcoal rather than ink, so a quoted voice
   is visibly not the site's own voice. */
.claim-quote { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.45; color: var(--charcoal); margin: 0.6rem 0 0.6rem; }
.claim-why { font-size: 0.94rem; color: var(--ink-soft); margin: 0; }
.claim-why strong { color: var(--ink); }

/* ============================================================
   COMPONENTS: CALL-OUT BOXES
   ============================================================ */
.callout {
  background: var(--paper-2); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem; margin: 1.6rem 0;
}
.callout--teal  { border-left-color: var(--teal);  background: var(--teal-soft); }
.callout--ember { border-left-color: var(--ember); background: var(--ember-soft); }
.callout h3, .callout h4 { margin-bottom: 0.4rem; }
.callout p { color: var(--ink-soft); font-size: 0.97rem; }
.callout p:last-child { margin-bottom: 0; }

/* ============================================================
   COMPONENTS: PAGE HEAD, PROSE AND PULLQUOTES
   .prose restores list bullets and underlined links inside long
   body copy, because the global reset strips them.
   ============================================================ */
.page-head { padding: 3rem 0 1.5rem; }
.page-head h1 { max-width: 22ch; }
.prose { font-size: 1.05rem; }
.prose h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 2.4rem 0 0.7rem; }
.prose h3 { font-size: 1.15rem; margin: 1.8rem 0 0.45rem; }
.prose p { color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 1.2rem 0; padding-left: 1.4rem; color: var(--ink-soft); max-width: 70ch; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.5rem; padding-left: 0.2rem; }
.prose li::marker { color: var(--gold-dark); }
.prose a { text-decoration: underline; }
.pullquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.45; color: var(--ink);
  border-left: 4px solid var(--ember); background: var(--paper-2);
  border-radius: 0 12px 12px 0; padding: 1rem 1.3rem;
  margin: 1.8rem 0; max-width: none;
}

/* ============================================================
   COMPONENTS: DATA TABLES
   Always wrap a table in .table-wrap. That wrapper is what makes
   the table scroll sideways on a phone instead of breaking the
   layout. Keep the <caption> and the scope attributes on th
   cells: they are what makes the table readable to a screen
   reader.
   ============================================================ */
.table-wrap { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 480px; }
table.data caption { text-align: left; padding: 0.9rem 1rem 0.2rem; font-size: 0.85rem; color: var(--ink-faint); }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line-soft); }
table.data thead th {
  font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink); background: var(--paper-2); font-weight: 700;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td { color: var(--ink-soft); }
table.data th[scope="row"] { color: var(--ink); font-weight: 600; }

/* ============================================================
   COMPONENTS: BOOK CARDS AND CHAPTER LISTS
   .book-cover is a CSS-drawn cover, not an image, so there is no
   artwork file to swap. .status-pill is the gold "Coming to
   Amazon" badge. When a book actually goes on sale, the pill is
   replaced in the HTML by a .btn--gold link. Nothing here needs
   to change for that.
   ============================================================ */
.book-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.book-cover {
  aspect-ratio: 3 / 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem; text-align: center;
  background: var(--band-bg); color: var(--paper); padding: 1.5rem;
  border-bottom: 4px solid var(--gold);
}
.book-cover .bc-series { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.book-cover .bc-num { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--band-faint); font-weight: 700; }
.book-cover .bc-title { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.8rem); line-height: 1.2; color: var(--paper); }
.book-cover .bc-rule { width: 44px; height: 3px; background: var(--ember); border-radius: 2px; }
.book-cover .bc-author { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--band-faint); }
.book-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.book-body h3 { margin: 0 0 0.2rem; }
.book-kicker { color: var(--ink-faint); font-size: 0.9rem; margin: 0 0 0.8rem; }
.book-body p { color: var(--ink-soft); font-size: 0.97rem; }
.book-actions { margin-top: auto; padding-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.status-pill {
  display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 0.35rem 0.85rem; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-dark); border: 1.5px solid var(--gold);
}

.chapter-list { margin: 0; padding: 0; }
.chapter-list li { display: flex; gap: 0.9rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line-soft); }
.chapter-list li:last-child { border-bottom: 0; }
.chapter-list .ch-n { font-family: var(--font-display); font-weight: 600; color: var(--gold-dark); flex: none; min-width: 1.6rem; }
.chapter-list .ch-t { font-weight: 600; color: var(--ink); display: block; }
.chapter-list .ch-d { color: var(--ink-soft); font-size: 0.94rem; display: block; }

/* ============================================================
   COMPONENTS: FAQ ACCORDION
   .faq-trigger is a real <button>. The open and closed arrow is
   drawn from [aria-expanded="true"], and .faq-panel[hidden] is
   what actually hides a panel. That means the ARIA state and the
   visual state are the same thing here. If you style the open
   state with a class instead, the two can drift apart and screen
   reader users get told the wrong thing.
   ============================================================ */
.faq-group { margin-bottom: 2.4rem; }
.faq-group > h2 { font-size: 1.3rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--gold); margin-bottom: 1rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin-bottom: 0.6rem; overflow: hidden; }
.faq-q { margin: 0; }
.faq-trigger {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink);
  padding: 1rem 3rem 1rem 1.15rem; position: relative; line-height: 1.45;
}
.faq-trigger:hover { background: var(--paper-2); }
.faq-trigger::after {
  content: ""; position: absolute; right: 1.15rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--ember-dark); border-bottom: 2.5px solid var(--ember-dark);
  transform: rotate(45deg); transition: transform var(--transition);
}
.faq-trigger[aria-expanded="true"] { border-bottom: 1px solid var(--line); }
.faq-trigger[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-panel { padding: 1rem 1.15rem 1.2rem; }
.faq-panel[hidden] { display: none; }
.faq-panel p { color: var(--ink-soft); font-size: 0.98rem; }
.faq-panel ul { list-style: disc; padding-left: 1.3rem; color: var(--ink-soft); margin-bottom: 1rem; }
.faq-panel li { margin-bottom: 0.4rem; }
.faq-tools { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.6rem; align-items: center; }
.faq-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 2rem; }
.faq-jump a {
  font-size: 0.83rem; font-weight: 600; padding: 0.4rem 0.85rem;
  border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--white);
}
.faq-jump a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

/* ============================================================
   COMPONENTS: TOOL PANELS, CHECKLISTS AND THE COPY BUTTON
   .tool is the framed resource panel used on resources.html.
   .checklist draws its own square boxes with ::before, so there
   are no checkbox inputs to manage. .copy-btn.copied is the
   short-lived green confirmation state set by js/main.js.
   ============================================================ */
.tool {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); margin: 1.6rem 0;
}
.tool-head {
  background: var(--band-bg); color: var(--band-text);
  padding: 1rem 1.3rem; display: flex; align-items: center; justify-content: space-between;
  gap: 0.9rem; flex-wrap: wrap;
}
.tool-head h3 { color: var(--paper); margin: 0.1rem 0 0; font-size: 1.15rem; }
.tool-head .eyebrow { color: var(--gold); }
.tool-body { padding: 1.2rem 1.4rem 1.5rem; }
.tool-body > p:first-child { margin-top: 0; }
.copy-btn {
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  background: var(--gold); color: var(--ink); border: 0;
  padding: 0.45rem 0.95rem; border-radius: 999px; cursor: pointer;
  transition: background-color var(--transition);
}
.copy-btn:hover { background: #C99A26; }
.copy-btn.copied { background: var(--teal); color: var(--ink); }

.checklist { margin: 0; padding: 0; }
.checklist li {
  position: relative; padding: 0.6rem 0 0.6rem 2rem;
  border-bottom: 1px dashed var(--line); color: var(--ink-soft);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.85rem;
  width: 17px; height: 17px; border: 2px solid var(--teal-dark); border-radius: 4px;
}
.checklist li strong { display: block; color: var(--ink); }

.numbered { margin: 0; padding: 0; counter-reset: nl; }
.numbered li { position: relative; padding: 0.6rem 0 0.6rem 2.4rem; border-bottom: 1px dashed var(--line); color: var(--ink-soft); }
.numbered li:last-child { border-bottom: 0; }
.numbered li::before {
  counter-increment: nl; content: counter(nl);
  position: absolute; left: 0; top: 0.65rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--paper-2); color: var(--gold-dark);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.numbered li strong { display: block; color: var(--ink); }

/* ============================================================
   COMPONENTS: GLOSSARY, RESOURCE ROWS AND THE SUPPORT BLOCK
   ============================================================ */
.glossary { margin: 0; }
.glossary dt { font-weight: 700; color: var(--ink); margin-top: 1.1rem; font-size: 1rem; }
.glossary dt:first-child { margin-top: 0; }
.glossary dd { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.97rem; padding-bottom: 0.9rem; border-bottom: 1px dashed var(--line); }
.glossary dd:last-child { border-bottom: 0; }

/* ---------- RESOURCE ROWS ---------- */
.res-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.res-row:last-child { border-bottom: 0; }
.res-row .r-title { font-weight: 600; color: var(--ink); display: block; }
.res-row .r-sub { font-size: 0.9rem; color: var(--ink-faint); display: block; max-width: 56ch; }

/* ---------- SUPPORT / COFFEE ---------- */
.support-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  background: var(--gold-soft); border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg); padding: 1.5rem 1.7rem; flex-wrap: wrap;
}
.support-cta h3 { margin: 0 0 0.3rem; }
.support-cta p { margin: 0; max-width: 52ch; color: var(--ink-soft); font-size: 0.97rem; }

/* ============================================================
   COMPONENTS: FORMS
   Every field is label + control + optional .form-hint. If you
   add a hint, give it an id and point the control at it with
   aria-describedby, the way contact.html already does.
   ============================================================ */
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 600; font-size: 0.93rem; margin-bottom: 0.35rem; color: var(--ink); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 0.72rem 0.9rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--white); transition: border-color var(--transition);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--teal-dark); }
.form-field textarea { min-height: 150px; resize: vertical; }
.form-hint { font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.3rem; }
.fineprint { font-size: 0.86rem; color: var(--ink-faint); }

/* ============================================================
   COMPONENTS: LEGAL PAGES (disclaimer)
   ============================================================ */
.legal h2 { font-size: 1.25rem; margin: 2.2rem 0 0.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; }
.legal p { color: var(--ink-soft); font-size: 0.99rem; }
.legal .toc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.6rem 0 2rem; }
.legal .toc ol { list-style: decimal; padding-left: 1.3rem; margin: 0.5rem 0 0; }
.legal .toc li { margin-bottom: 0.35rem; }
.legal .toc a { color: var(--teal-dark); }

/* ============================================================
   COMPONENTS: FOOTER
   The footer is dark in both cases and uses the theme-stable
   --footer-* tokens rather than --ink and --paper, so it stays
   dark whatever else changes.
   ============================================================ */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 3rem 0 1.6rem; margin-top: 3rem; }
.site-footer h2, .site-footer h3, .site-footer h4 {
  color: var(--footer-head); margin-bottom: 0.7rem; font-size: 0.95rem; letter-spacing: 0;
}
.site-footer a { color: #D7C9AF; font-size: 0.92rem; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.footer-logo { width: 220px; margin-bottom: 0.9rem; }
.footer-brand p { font-size: 0.92rem; color: var(--band-faint); max-width: 44ch; margin-bottom: 0.7rem; }
.footer-links li { padding: 0.2rem 0; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1rem; }
.footer-social a {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid #33465A; border-radius: 50%; color: #D7C9AF;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); background: rgba(224,178,60,0.12); }
.footer-social svg { width: 19px; height: 19px; fill: currentColor; }
.footer-coffee {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem;
  background: var(--gold); color: var(--ink); font-weight: 700; font-size: 0.88rem;
  padding: 0.55rem 1.1rem; border-radius: 999px;
}
.footer-coffee:hover { background: #F0C558; color: var(--ink); text-decoration: none; }
.footer-coffee svg { width: 17px; height: 17px; fill: currentColor; }
.footer-legal { font-size: 0.82rem; color: var(--band-faint); max-width: none; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #24384B; }
.footer-bottom {
  border-top: 1px solid #24384B; margin-top: 1.2rem; padding-top: 1.2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem;
  font-size: 0.82rem; color: var(--band-faint);
}

/* ============================================================
   COMPONENTS: BACK TO TOP BUTTON
   Hidden with opacity + visibility rather than display, so the
   fade works. js/main.js adds .is-visible after about one and a
   half screens of scrolling.
   ============================================================ */
.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: #1A3244; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   COMPONENTS: 404 PAGE
   ============================================================ */
.err-code { font-family: var(--font-display); font-size: clamp(4rem, 16vw, 8rem); line-height: 1; color: var(--gold-dark); }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Only three, and they are mobile-narrowing (max-width), so the
   desktop rules above are the source of truth.
     900px  grids collapse to one column, the main nav turns into
            the slide-down mobile menu and .nav-toggle appears
     560px  tighter section padding, full-width buttons
     380px  base font drops to 15px, the brand sub-line is hidden
   Add a new breakpoint only if none of these three will do.
   ============================================================ */
@media (max-width: 900px) {
  .grid-2, .grid-3, .footer-grid { grid-template-columns: 1fr; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.25rem 1.25rem 1.25rem; display: none; box-shadow: var(--shadow-md);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); width: 100%; font-size: 1rem; }
  .main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom: 1px solid var(--line-soft); border-left: 3px solid var(--ember); padding-left: 0.6rem; }
  .nav-toggle { display: block; }
  .site-header { position: sticky; }
  .header-inner { position: relative; }
  .support-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .section { padding: 3rem 0; }
  .container, .container--narrow { padding: 0 1rem; }
  .hero { padding: 2.5rem 0 2.25rem; }
  .btn { width: 100%; }
  .hero-actions .btn, .book-actions .btn { width: 100%; }
  .tool-head { flex-direction: column; align-items: flex-start; }
  .copy-btn { width: 100%; }
  .footer-bottom { flex-direction: column; }
}
@media (max-width: 380px) {
  html { font-size: 15px; }
  .brand-sub { display: none; }
  .cc-mark { width: 30px; height: 30px; }
}

/* ============================================================
   REDUCED MOTION
   Honours the operating system setting. It kills transitions,
   animations and smooth scrolling for anyone who has asked not
   to see movement. This is an accessibility requirement, not a
   nicety. Do not delete it, and do not add an animation that
   ignores it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  a.card:hover { transform: none; }
}

/* ============================================================
   PRINTABLE ONE-PAGERS + PRINT RULES
   .sheet and friends style the five pages in printables/.
   The @media print block at the very bottom is what turns any
   page into a clean one-pager: it hides the header, the footer,
   the back-to-top button, the print bar, the skip link and
   anything you mark with class no-print, then flattens the
   sheet. If you add a new on-screen control that should not
   appear on paper, give it class no-print rather than adding
   another selector to that list.
   ============================================================ */
.sheet {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem;
  box-shadow: var(--shadow-sm); margin: 1.5rem 0 2.5rem;
}
.sheet-head { border-bottom: 3px solid var(--gold); padding-bottom: 1rem; margin-bottom: 1.4rem; }
.sheet-head h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.sheet-head p { color: var(--ink-soft); margin: 0.4rem 0 0; font-size: 0.95rem; }
.sheet-foot { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-faint); }
.print-bar { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0 0; }
.write-line { border-bottom: 1px solid var(--line); height: 1.6rem; margin: 0.3rem 0 0.7rem; }

@media print {
  .site-header, .site-footer, .to-top, .print-bar, .skip-link, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sheet { border: 0; box-shadow: none; padding: 0; margin: 0; background: #fff; }
  .section { padding: 0; }
  a { color: #000; text-decoration: none; }
  .checklist li::before { border-color: #555; }
  h1, h2, h3, h4 { color: #000; }
  p, li, dd { color: #222; }
}


/* ===== SERIES GRID (books.html) =============================================
   One card per subject series. .series-card--soon is the muted "in preparation"
   state. Adding a series needs no new CSS, only a new <article> in books.html.
   ========================================================================= */
.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.series-card{background:var(--paper2,#F1E4D2);border:1px solid rgba(15,30,45,0.12);
  border-radius:6px;padding:1.35rem 1.4rem;display:flex;flex-direction:column;gap:.45rem}
.series-card h3{margin:0;font-size:1.12rem}
.series-card h3 a{text-decoration:none;border-bottom:2px solid var(--gold,#E0B23C)}
.series-card h3 a:hover{border-bottom-color:var(--ember,#F26A21)}
.series-card p{margin:0;font-size:.93rem;line-height:1.55}
.series-status{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--teal,#2A9D8F)}
.series-count{margin-top:auto;padding-top:.6rem;font-size:.8rem;color:#5A6B79}
.series-card--soon{opacity:.82;background:transparent;border-style:dashed}
.series-card--soon .series-status{color:#5A6B79}
@media(max-width:520px){.series-grid{grid-template-columns:1fr}}