/* ============================================================
   THE COMMON TONE — site look (Doug's ruling, 24 Sept 2026)
   Spec: CLAUDE_DESIGN_KIT/SITE_LOOK_RULING_2026-09-24.md and the
   Preface mockup. One dark header on every page (two-circle mark,
   wordmark, motto beneath), parchment pages, obsidian footer.
   Each wing keeps its own tint (Doug, 24 Sept): the line under the
   header and the current menu item. Home, Practice, Subscribe: gold.
   This file is linked on every branded page by tools/apply-masthead.py.
   ============================================================ */

@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/playfair-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/playfair-display-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/playfair-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-latin-700-normal.woff2") format("woff2"); }

/* ---------- web-surface colours (ruling §2) ---------- */
:root {
  --c: #c9973f; /* default unit colour; each unit sets its own inline (home page contents) */
  --look-parchment: #f6f0e3;
  --look-paper: #fbf7ee;
  --look-card: #fffdf7;
  --look-ink: #1e1b17;
  --look-ink-soft: #4a443b;
  --look-muted: #7a7164;
  --look-amber: #a8651f;
  --look-gold: #c9973f;
  --look-gold-hi: #dcb05a;
  --look-gold-soft: #ecdcb8;
  --look-rule: #ddd0b3;
  --look-obsidian: #171512;
  --look-callout: #fff9ea;
  --look-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --look-sans: Lato, "Helvetica Neue", Arial, sans-serif;

  /* site.css names, re-pointed (parchment site; no dark variant) */
  --ground: var(--look-parchment);
  --ink: var(--look-ink);
  --ink-2: var(--look-ink-soft);
  --rule: var(--look-rule);
  --gold: var(--look-gold);
  --gold-fill: var(--look-gold-soft);
  --midnight: var(--look-amber);
  --on-midnight: #fff;
  --field: var(--look-card);
  --panel: #f3ead6;
  --tint-book: #7A5230;
  --tint-lab: #4F6B78;
  --tint-essays: #9C6B4E;

  /* book/tool pages: only the page ground and text, never figure colours */
  --ct-role-canvas: var(--look-parchment);
  --ct-role-text-primary: var(--look-ink);
  /* focus ring: needs 3:1 against its ground (WCAG 1.4.11; audit, 2026-10-04). Gold is 2.3:1 on parchment,
     so light grounds take the deep amber (5:1+); dark grounds keep gold (below and in dark mode). */
  --focus: #90551b;
  color-scheme: light;
}
body.ct-branded.wing-book, body.ct-branded.wing-lab, body.ct-branded.wing-essays,
body.ct-branded.wing-practice { --wing-ground: var(--look-parchment); }
body.ct-branded.wing-book   { --wing-tint: var(--tint-book); }
body.ct-branded.wing-lab    { --wing-tint: var(--tint-lab); }
body.ct-branded.wing-essays { --wing-tint: var(--tint-essays); }
body.ct-branded.ct-book-identity { background: var(--look-parchment); color: var(--look-ink); color-scheme: light; }
html:has(body.ct-branded) { background: var(--look-parchment); }

/* ---------- the header (ruling §1) ---------- */
.ct-site-header {
  --line: var(--look-gold);
  display: block; margin: 0; padding: 0; position: static;
  background: var(--look-obsidian); color: #efe6d2;
  border: 0; border-bottom: 3px solid var(--line);
  font-family: var(--look-sans); line-height: 1.3; text-align: left;
}
/* wing tints, lightened so they read on the dark header */
.ct-site-header[data-wing="book"]   { --line: #B8956A; }
.ct-site-header[data-wing="lab"]    { --line: #8FAEBC; }
.ct-site-header[data-wing="essays"] { --line: #C79A7E; }
.ct-site-header .ct-hwrap {
  max-width: 1120px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
}
.ct-site-header a { text-decoration: none; border: 0; box-shadow: none; }
.ct-site-header a.ct-brand, .ct-site-header a.ct-brand:visited {
  display: flex; align-items: center; gap: 14px; color: #f3ead6; background: none; padding: 0;
}
.ct-site-header .ct-mark { flex: none; display: block; width: 60px; height: 44px; max-width: none; }
.ct-site-header .ct-wm {
  display: block; font: 700 38px/1.05 var(--look-serif); letter-spacing: .3px; white-space: nowrap; color: inherit;
}
.ct-site-header .ct-wm small {
  display: block; margin-top: 3px; font: italic 500 14px/1.3 var(--look-serif);
  letter-spacing: .2px; color: var(--look-gold); white-space: nowrap;
}
.ct-site-header a.ct-brand:hover, .ct-site-header a.ct-brand:focus-visible { color: #fff; }
.ct-site-header a.ct-brand:hover small, .ct-site-header a.ct-brand:focus-visible small { color: var(--look-gold-hi); }
.ct-site-header a:focus-visible { outline: 2px solid var(--look-gold); outline-offset: 3px; border-radius: 4px; }

.ct-site-header .ct-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; }
.ct-site-header .ct-menu a, .ct-site-header .ct-menu a:visited {
  display: block; padding: 6px 11px; border-radius: 6px; background: none;
  font: 400 15px/1.4 var(--look-sans); color: #e8dcc2;
}
.ct-site-header .ct-menu a:hover { background: #2c2821; color: #fff; }
.ct-site-header .ct-menu a.here { color: var(--line); font-weight: 700; }
.ct-site-header .ct-menu a.here:hover { color: var(--line); }
.ct-site-header .ct-menu a.ct-sub, .ct-site-header .ct-menu a.ct-sub:visited {
  background: var(--look-gold); color: var(--look-obsidian); font-weight: 700; margin-left: 4px;
}
.ct-site-header .ct-menu a.ct-sub:hover { background: var(--look-gold-hi); color: var(--look-obsidian); }

@media (max-width: 640px) {
  .ct-site-header .ct-hwrap { padding: 12px 16px; }
  .ct-site-header .ct-mark { width: 44px; height: 32px; }
  .ct-site-header a.ct-brand { gap: 11px; }
  .ct-site-header .ct-wm { font-size: 30px; }
  .ct-site-header .ct-wm small { font-size: 11px; }
  /* all five items on one row from 360px up (audit, 2026-10-04): spacing comes from the padding, not a gap */
  .ct-site-header .ct-menu { gap: 0; margin-left: -5px; }
  .ct-site-header .ct-menu a { padding: 7px 5px; font-size: 14px; }
  /* touch: each link's hit area reaches 44px tall without making the header taller */
  .ct-site-header .ct-menu a { position: relative; }
  .ct-site-header .ct-menu a::after { content: ""; position: absolute; inset: -5px 0; }
}
@media (max-width: 370px) {
  .ct-site-header .ct-mark { width: 36px; height: 26px; }
  .ct-site-header a.ct-brand { gap: 9px; }
  .ct-site-header .ct-wm { font-size: 26px; }
  /* 11px is the legibility floor (audit, 2026-10-04): one line wherever it fits, two balanced lines on the narrowest phones */
  .ct-site-header .ct-wm small { font-size: 11px; margin-top: 2px; white-space: normal; text-wrap: balance; }
  .ct-site-header .ct-menu a { padding: 7px 5px; font-size: 13.5px; }
}

/* ---------- the footer (ruling §5) ---------- */
.ct-site-footer {
  display: block; margin: 56px 0 0; padding: 0; border: 0;
  background: var(--look-obsidian); color: #cfc3aa;
  font: 400 15px/1.6 var(--look-sans); text-align: left;
}
.ct-site-footer .ct-fwrap {
  max-width: 1120px; margin: 0 auto; padding: 40px 20px 24px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px;
}
.ct-site-footer h2 {
  font: 700 12px/1.3 var(--look-sans); letter-spacing: 2px; text-transform: uppercase;
  color: var(--look-gold); margin: 0 0 10px;
}
.ct-site-footer ul { list-style: none; margin: 0; padding: 0; }
.ct-site-footer li { margin: 5px 0; }
.ct-site-footer p { margin: 0; max-width: none; color: #cfc3aa; font-size: 15px; }
.ct-site-footer a, .ct-site-footer a:visited { color: #e6dac0; text-decoration: none; border: 0; }
.ct-site-footer a:hover { color: #fff; text-decoration: underline; }
.ct-site-footer .ct-fmotto { font: italic 500 19px/1.4 var(--look-serif); color: #f1e6cd; margin: 10px 0; }
.ct-site-footer .ct-fbase {
  max-width: 1120px; margin: 0 auto; padding: 16px 20px 26px; border-top: 1px solid #2f2a22;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13.5px; color: #9d927c;
}
@media (max-width: 900px) { .ct-site-footer .ct-fwrap { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 640px) { .ct-site-footer .ct-fwrap { grid-template-columns: minmax(0,1fr); gap: 22px; } }

/* ---------- page patterns on the main pages (site.css pages) ---------- */
body.ct-branded:has(.ct-site-header) .wrap > main,
body.ct-branded:has(.ct-site-header) .wrap > .practice-layout { padding-top: 8px; }
body.ct-branded .wrap { max-width: 1120px; padding: 0 20px; }
body.ct-branded .wrap h1 { font-weight: 700; color: var(--look-ink); }
body.ct-branded .wrap .eyebrow { color: var(--look-amber); font-weight: 700; font-size: 13px; letter-spacing: 2.5px; }
body.ct-branded .wrap a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.ct-branded .wrap main a:not([class]):hover { color: var(--look-obsidian); }
body.ct-branded .wrap .card { background: var(--look-card); border-color: var(--look-rule); border-radius: 8px; }
body.ct-branded .wrap .cta, body.ct-branded .wrap a.btn, body.ct-branded .read-chapter {
  background: var(--look-amber); color: #fff !important; border-radius: 6px;
}
body.ct-branded .wrap .cta:hover, body.ct-branded .wrap a.btn:hover, body.ct-branded .read-chapter:hover { background: var(--look-obsidian); }
body.ct-branded .wrap .landing-intro { border-top: 0; }

/* Book identity (book page hero, and the strip above each chapter) */
body.ct-branded .book-hero h1, body.ct-branded .book-identity h2 { color: #1c3a5a; font-weight: 500; } /* the book's own navy (ruling §5C) */
body.ct-branded .book-kicker, body.ct-branded .book-identity .contents-link { color: var(--look-amber); }
body.ct-branded .identity-subtitle { color: #7a5230; } /* the book's own sepia (ruling §5C) */
body.ct-branded .read-latest { color: var(--look-amber); }
body.ct-branded .book-identity { border-bottom-color: var(--look-gold); }

/* ---------- dark mode (Doug, 24 Sept 2026) ----------
   Follows the reader's device setting. Covers the main pages (the ones
   built on site.css: home, Book, Practice, Lab, Essays, Subscribe, 404).
   Chapters, quizzes, symbols and tools stay on paper: their figures are
   drawn for a light page. Header and footer are already dark. */
@media (prefers-color-scheme: dark) {
  html:has(body.ct-branded > .wrap) { background: #1f1c18; }
  body.ct-branded:has(> .wrap),
  body.ct-branded.ct-book-identity:has(> .wrap) {
    --ground: #1f1c18;
    --wing-ground: #1f1c18;
    --ink: #efe6d2;
    --ink-2: #cfc3aa;
    --rule: #3b352c;
    --gold: #c9973f;
    --gold-fill: #4a3f2c;
    --midnight: #dcb05a;
    --on-midnight: #171512;
    --field: #27231d;
    --panel: #2c2821;
    --tint-book: #B8956A;
    --tint-lab: #8FAEBC;
    --tint-essays: #C79A7E;
    --focus: #dcb05a;
    background: #1f1c18; color: #efe6d2; color-scheme: dark;
  }
  body.ct-branded.wing-book:has(> .wrap)   { --wing-tint: #B8956A; }
  body.ct-branded.wing-lab:has(> .wrap)    { --wing-tint: #8FAEBC; }
  body.ct-branded.wing-essays:has(> .wrap) { --wing-tint: #C79A7E; }
  body.ct-branded:has(> .wrap) .wrap h1,
  body.ct-branded:has(> .wrap) .book-hero h1,
  body.ct-branded:has(> .wrap) .book-identity h2 { color: #f3ead6; }
  body.ct-branded:has(> .wrap) .book-hero h1,
  body.ct-branded:has(> .wrap) .book-identity h2 { color: #9DBBD9; } /* the book's navy, lightened for dark mode (ruling §5C) */
  body.ct-branded:has(> .wrap) .wrap .eyebrow,
  body.ct-branded:has(> .wrap) .book-kicker,
  body.ct-branded:has(> .wrap) .read-latest,
  body.ct-branded:has(> .wrap) .book-identity .contents-link { color: #dcb05a; }
  body.ct-branded:has(> .wrap) .identity-subtitle { color: #D9B38F; }
  body.ct-branded:has(> .wrap) .identity-author { color: #9d927c; }
  body.ct-branded:has(> .wrap) .wrap main a:not([class]):hover { color: #fff; }
  body.ct-branded:has(> .wrap) .wrap .card { background: #27231d; border-color: #3b352c; }
  body.ct-branded:has(> .wrap) .wrap .cta,
  body.ct-branded:has(> .wrap) .wrap a.btn,
  body.ct-branded:has(> .wrap) .read-chapter { background: #c9973f; color: #171512 !important; }
  body.ct-branded:has(> .wrap) .wrap .cta:hover,
  body.ct-branded:has(> .wrap) .wrap a.btn:hover,
  body.ct-branded:has(> .wrap) .read-chapter:hover { background: #dcb05a; }
  body.ct-branded:has(> .wrap) .identity-cover { box-shadow: 0 18px 32px #0008, 0 2px 5px #0006; }
  body.ct-branded:has(> .wrap) .ct-site-footer { border-top: 1px solid #3b352c; }
  /* The homepage circle of fifths keeps its paper card: its function
     colours are the book's teaching colours, drawn for a light page. */
  body.ct-branded:has(> .wrap) .wheel {
    --field: #fffdf7; --ground: #f6f0e3; --panel: #f3ead6; --rule: #d6c7a6;
    --ink: #1e1b17; --ink-2: #4a443b; --midnight: #a8651f;
    background: #f3ead6; border-color: #d6c7a6; color: #1e1b17; color-scheme: light;
    box-shadow: 0 10px 30px -12px #000c;
  }
}

/* ---------- chapters: interactive pieces stand out (Doug, 24 Sept 2026) ----------
   Anything the reader can play with gets a teal frame and a "try it" tab, so it
   never looks like a static figure. Teal is the colour of the exercises' own
   Play buttons. Styling only: the approved chapter text and markup are untouched. */
body.ct-branded article :is(aside:has(iframe), section.learning) {
  position: relative; margin: 40px 0 30px; padding: 30px 16px 16px;
  border: 2px solid #2f6f6f; border-radius: 10px; background: #fbfaf4;
  box-shadow: 0 10px 26px -16px rgba(20, 60, 60, .55);
}
body.ct-branded article :is(aside:has(iframe), section.learning)::before {
  content: "\25B8\00a0 Interactive \00b7  try it";
  position: absolute; top: -14px; left: 16px; z-index: 1;
  padding: 6px 12px 6px 10px; border-radius: 999px;
  background: #2f6f6f; color: #fff; font: 700 12px/1.2 Lato, Arial, sans-serif;
  letter-spacing: 1.4px; text-transform: uppercase;
  box-shadow: 0 0 0 4px var(--ct-paper, #f6f0e3);
}
body.ct-branded article aside:has(iframe) iframe { display: block; width: 100%; border: 0; }

/* ---------- chapters: the practice box at the end ----------
   Our own drills and quizzes first, then Reader Resources from elsewhere,
   given the same weight but set apart: a dashed rule, its own label, a
   slate edge instead of gold, and a mark showing each link leaves the site. */
body.ct-branded article :is(#chapter-practice, section.practice-box) {
  margin: 44px 0 20px; padding: 24px 24px 20px;
  background: #fbf7ee; border: 1px solid #ddd0b3; border-top: 4px solid #c9973f; border-radius: 8px;
}
body.ct-branded article :is(#chapter-practice, section.practice-box) > :is(h2, h3):first-child {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 26px; margin: 0 0 14px; color: #1e1b17;
}
body.ct-branded article :is(#chapter-practice, section.practice-box) > :is(h2, h3):first-child::before {
  content: "From The Common Tone"; display: block; margin-bottom: 4px;
  font: 700 12px/1.3 Lato, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #a8651f;
}
body.ct-branded article :is(#chapter-practice, section.practice-box) ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.ct-branded article :is(#chapter-practice, section.practice-box) li {
  margin: 0; padding: 12px 16px; background: #fffdf7; border: 1px solid #ddd0b3; border-left: 4px solid #c9973f; border-radius: 6px;
  line-height: 1.55;
}
body.ct-branded article :is(#chapter-practice, section.practice-box) li > a:first-child { font-weight: 700; }
body.ct-branded article #reader-resources {
  margin: 30px 0 6px; padding-top: 24px; border-top: 2px dashed #cdbf9f;
  font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 26px; color: #1e1b17;
}
body.ct-branded article #reader-resources::before {
  content: "Elsewhere on the web"; display: block; margin-bottom: 4px;
  font: 700 12px/1.3 Lato, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #4F6B78;
}
body.ct-branded article #reader-resources + p { margin: 0 0 12px; color: #4a443b; }
body.ct-branded article #reader-resources ~ ul li { border-left-color: #4F6B78; }
body.ct-branded article #reader-resources ~ ul li > a[target="_blank"]:first-child::after {
  content: "\00a0\2197"; font-weight: 400; text-decoration: none; display: inline-block;
}
body.ct-branded article #reader-resources ~ ul li small { color: #7a7164; }

/* ---------- chapters: pictures sit at the text's width (Doug, 24 Sept 2026) ----------
   The book stylesheet lets chapter figures break out to 1024px; in the new look
   every picture lines up with the reading column. "View full-size figure" under
   each one still opens the full picture. Styling only. */
body.ct-branded article figure.chapter-image {
  width: auto; max-width: 100%; margin: 2.4rem 0; transform: none;
}

/* Sage art introduces the speaker; longer passages use the full column below it. */
body.ct-branded .box-persona.box-sage {
  display: flow-root;
  padding-left: 1.4rem;
}
body.ct-branded .box-persona.box-sage::before {
  position: static;
  float: left;
  margin: 0 1rem .5rem 0;
  transform: none;
}

/* Chapter navigation belongs in the reading flow, never over a figure or paragraph. */
body.ct-branded .helm {
  position: static;
  transform: none;
  width: fit-content;
  max-width: calc(100% - 2rem);
  margin: 2rem auto;
}

/* ---------- home page: design F — the house and the book (Doug, 24 Sept 2026; ruling §5C–5D) ---------- */
.eyebrow-l{font:700 12px/1.3 Lato,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#a8651f;margin:0 0 6px}
.heroD{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:34px 0 40px}
.heroD h1{font-size:54px}.heroD .status{font-size:19px}
.heroD{--home-amber:#90551b;--home-essay:#87583e}
body.ct-branded .wrap .heroD .eyebrow{color:var(--home-amber)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:8px}
.hero-actions .cta{margin-top:0;text-align:center}
.hero-actions .email-cta{color:var(--ink);font-weight:700;display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}
@media(max-width:520px){.hero-actions{align-items:stretch;flex-direction:column;gap:4px}.hero-actions .email-cta{justify-content:center;text-align:center}}
.hearth .hearth-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-color-scheme:dark){.heroD{--home-amber:#dcb05a;--home-essay:#c79a7e}}
.hearth{background:#fbf7ee;border:1px solid #ddd0b3;border-top:4px solid #c9973f;border-radius:10px;padding:6px 24px 8px;box-shadow:0 12px 30px -20px rgba(60,40,10,.45)}
.hearth .row{padding:16px 0;border-bottom:1px solid #e6dcc4}.hearth .row:last-child{border-bottom:0}
.hearth h3{font:700 22px/1.25 "Playfair Display",Georgia,serif;margin:2px 0 4px}.hearth p{margin:0;color:#4a443b;font-size:16px}
.hearth .row.next{background:#fff9ea;margin:0 -24px;padding:16px 24px;border-bottom:1px solid #e6dcc4}
.hearth .when{font:italic 500 19px "Playfair Display",Georgia,serif;color:#a8651f}
.hearth a.go{font-weight:700;text-decoration:none;font-size:15px}

.lead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0}.lead b{font:700 40px/1 "Playfair Display",Georgia,serif}.lead span{color:#4a443b}
@media(max-width:860px){.heroD{grid-template-columns:1fr}.heroD h1{font-size:40px}}
.book{background:#fbf4e4;border:1px solid #e3d6b8;border-top:5px solid #1c3a5a;border-radius:12px;padding:30px 30px 26px;margin:10px 0 36px;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:38px;box-shadow:0 14px 34px -24px rgba(28,58,90,.55)}
.book .bookcol img{width:100%;height:auto;display:block;border-radius:2px;box-shadow:0 18px 32px #1c3a5a2e,0 2px 5px #1c3a5a26}
.book .kick{font:700 11.5px Lato;letter-spacing:2.2px;text-transform:uppercase;color:#7a5230;margin:18px 0 6px}
.book .bt{font:500 30px/1.12 "Playfair Display",Georgia,serif;color:#1c3a5a;letter-spacing:-.02em;margin:0 0 6px}
.book .bs{font:italic 500 19px "Playfair Display",Georgia,serif;color:#7a5230;margin:0 0 6px}
.book .ba{font-size:14px;color:#5a5d66;margin:0 0 12px}
.book .pub{font-size:13.5px;color:#4a443b;border-top:1px solid #e3d6b8;padding-top:10px;margin:0}
.book .pub i{font-family:"Playfair Display",Georgia,serif}
.book .bread{display:inline-block;margin-top:14px;background:#1c3a5a;color:#fffdf7!important;text-decoration:none;font:700 14px Lato;padding:10px 16px;border-radius:4px}
.book h2{font:500 26px/1.2 "Playfair Display",Georgia,serif;color:#1c3a5a;margin:0 0 4px}
.book .bintro{color:#4a443b;margin:0 0 16px;max-width:none}
.book-toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px}
.book-toc .u{border-top:3px solid var(--c);padding-top:10px}.book-toc .u h3{font:700 12px Lato;letter-spacing:2px;text-transform:uppercase;margin:0;color:#4a443b}
.book-toc .u .un{display:block;font:600 19px/1.2 "Playfair Display",Georgia,serif;letter-spacing:normal;text-transform:none;margin:1px 0 8px;color:#1c3a5a}
.book-toc ol{list-style:none;margin:0;padding:0}.book-toc li{display:grid;grid-template-columns:2.3em 1fr;gap:4px;padding:4px 0;border-bottom:1px dotted #dccfae;font-size:15px;line-height:1.35}
.book-toc li .n{font-weight:700;color:#675e51}.book-toc li.w{color:#675e51}
.book-toc li.p{position:relative;padding-right:50px}.book-toc li.p a{font-weight:700;color:#1c3a5a;text-decoration:none}.book-toc li.p a:hover{text-decoration:underline}.book-toc li.p .n{color:var(--c)}
.book-toc .u:first-child li.p .n{color:#816022}
.book-toc li.p::after{content:"Read";position:absolute;right:0;top:5px;font:700 11px Lato;letter-spacing:.8px;text-transform:uppercase;color:#fff;background:#1c3a5a;padding:2px 7px;border-radius:999px}
.book-toc li.x{background:#fff;border:1px solid #e3d6b8;border-radius:6px;padding:6px;margin:3px -6px;font-weight:700;color:#1c3a5a}.book-toc li.x small{display:block;font:italic 500 14px "Playfair Display",Georgia,serif;color:#7a5230}
.hearth{padding:0 0 8px;overflow:hidden}.hearth .row{padding:16px 24px}
.bookstrip{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;background:#fbf4e4;border-bottom:1px solid #e3d6b8;border-top:4px solid #1c3a5a;padding:14px 24px;margin-top:-4px}
.bookstrip .thumb img{width:64px;height:auto;display:block;border-radius:1px;box-shadow:0 6px 12px #1c3a5a33}
.bookstrip .bk{font:700 11px Lato;letter-spacing:2px;text-transform:uppercase;color:#7a5230;margin:0}
.bookstrip .bkt{font:500 22px/1.15 "Playfair Display",Georgia,serif;color:#1c3a5a;margin:2px 0 0}.bookstrip .bks{font:italic 500 15px "Playfair Display",Georgia,serif;color:#7a5230;margin:0}
.hearth .brow{background:#fbf4e4;border-bottom:1px solid #e3d6b8}.hearth .brow.next{background:#fff9ea;margin:0;padding:16px 24px}
.hearth .bl{color:#7a5230}.hearth .bh{color:#1c3a5a}.hearth .bgo{color:#1c3a5a}
.hearth .when{font:italic 500 18px "Playfair Display",Georgia,serif;color:#7a5230}.yt{font:400 14px Lato;color:#7a7164;font-style:normal;margin-left:6px}
.hearth .yt{color:#635a4b}
.hearth{border-top:0}
@media(max-width:900px){.book{grid-template-columns:1fr}.book .bookcol{max-width:240px}}@media(max-width:620px){.book-toc{grid-template-columns:1fr}.book{padding:22px 18px}}

.book-home{border-top:1px solid var(--rule);padding-top:26px}
.book .bintro a{color:#90551b}.book .bintro a:hover{color:#1c3a5a}
.hearth .row h3{color:#1e1b17}.hearth .row p{color:#4a443b}.hearth a.go{color:#a8651f}.hearth .bgo{color:#1c3a5a!important}
.hearth,.book{color:#1e1b17;color-scheme:light}
@media (prefers-color-scheme: dark){ body.ct-branded:has(> .wrap) .hearth, body.ct-branded:has(> .wrap) .book{box-shadow:0 12px 30px -12px #000c} }

/* ---------- The Lab: the small circle of fifths, moved from the home page (Doug, 24 Sept 2026) ---------- */
.cofpage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;padding:10px 0 40px}
.crumbs{font-size:14px;color:var(--ink-2);margin:22px 0 0}.crumbs a{color:inherit}
@media(max-width:860px){.cofpage{grid-template-columns:1fr}}
.labcof-note{background:#fff9ea;border:1px solid #ecdcb8;border-radius:8px;padding:12px 16px;color:#1e1b17}

/* Inside a chapter (a lesson shown in a frame) only the exercise shows:
   no site header or footer. Lesson pages mark themselves "embedded". */
html.embedded .ct-site-header, html.embedded .ct-site-footer { display: none !important; }

@media print {
  .ct-site-header, .ct-site-footer { display: none !important; }
}

/* ---------- Pedestal of Pedantry — Option C (Doug, 24 Sept 2026) ----------
   Stepped in from the left, a plum seal on its edge, plum rules above and below.
   Plum #7B4E70 is the Pedestal's own box colour. Chapter markup is untouched.
   THE SYMBOL: change the one value on the next line to swap it on every chapter
   at once — any character ("⚖", "❦", "§", "♮") or a small image file (ask Claude to wire it in). */
:root { --pedestal-symbol: "⚖"; }
body .ct-notation .pedantry{position:relative;margin:48px 0 48px 56px;border:none;border-top:2px solid #7B4E70;border-bottom:2px solid #7B4E70;background:linear-gradient(90deg,#f1e6ec,#f8f2f1);border-radius:0}
body .ct-notation .pedantry summary{grid-template-columns:minmax(0,1fr) 18px;padding:16px 18px 16px 40px}
body .ct-notation .pedantry summary:hover{background:rgba(123,78,112,.08)}
body .ct-notation .pedantry-icon{position:absolute;left:-26px;top:10px;width:52px;height:52px;border-radius:50%;background:#7B4E70;color:#fbf4ea;display:grid;place-items:center;font-size:0;border:4px solid #f6f0e3;box-shadow:0 2px 6px rgba(60,30,50,.25)}
body .ct-notation .pedantry-icon::before{content:var(--pedestal-symbol);font:24px/1 Georgia,serif;color:#fbf4ea}
body .ct-notation .pedantry-label{font:700 11.5px/1.5 Lato,system-ui,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#7B4E70}
body .ct-notation .pedantry-title{font:italic 500 21px/1.35 "Playfair Display",Georgia,serif;color:#3d2336}
body .ct-notation .pedantry-chevron{color:#7B4E70}
body .ct-notation .pedantry[open] summary{border-bottom:1px dashed #c7a9bd}
body .ct-notation .pedantry-body{padding:4px 22px 12px 40px}
@media(max-width:640px){body .ct-notation .pedantry{margin-left:26px}body .ct-notation .pedantry summary{padding-left:36px}body .ct-notation .pedantry-body{padding-left:22px}}

/* ---------- sound exercises: "playing" without redrawing (Doug, 24 Sept 2026) ----------
   The status line under an exercise used to appear ("Playing") and vanish, pushing the
   exercise up and down. It stays in the page for screen readers but takes no room;
   instead the exercise's own teal tab says "Now playing" while sound plays, and the
   button that is sounding glows gold. */
body .sound-status{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;min-height:0!important}
body.ct-branded article section.learning:has(.playing)::before{
  content:"\266A\00a0 Now playing";background:#c9973f;color:#171512;animation:ct-playing-pulse 1.4s ease-in-out infinite}
@keyframes ct-playing-pulse{0%,100%{box-shadow:0 0 0 4px var(--ct-paper,#f6f0e3)}50%{box-shadow:0 0 0 4px var(--ct-paper,#f6f0e3),0 0 0 8px rgba(201,151,63,.35)}}
@media (prefers-reduced-motion: reduce){body.ct-branded article section.learning:has(.playing)::before{animation:none}}
body button.playing{animation:ct-playing-button 1.4s ease-in-out infinite}
@keyframes ct-playing-button{0%,100%{box-shadow:0 0 0 0 rgba(201,151,63,0)}50%{box-shadow:0 0 0 6px rgba(201,151,63,.38)}}
@media (prefers-reduced-motion: reduce){body button.playing{animation:none}}

/* ---------- Lab: the "New here?" guide box, in the Pedestal's plum (Doug, 24 Sept 2026) ----------
   It blended into the parchment; now it wears the Pedestal of Pedantry's colours so readers spot it. */
body .guide-cta{background:linear-gradient(90deg,#efe2ea,#f7f0f1);border:2px solid #7B4E70;box-shadow:0 6px 18px -10px rgba(80,40,70,.5)}
body .guide-cta:hover,body .guide-cta:focus-visible{background:#ead9e3}
body .guide-cta .gc-icon{background:#7B4E70;color:#fbf4ea;box-shadow:0 0 0 3px #f6f0e3,0 0 0 4px #7B4E70}
body .guide-cta .gc-text strong{color:#5a3352}
body .guide-cta .gc-text .gc-sub{color:#3d2336}
body .guide-cta .gc-arrow{color:#7B4E70}

/* ---------- footer: the house name leads, the motto follows (Doug, 25 Sept 2026) ----------
   The first column's "The Common Tone" was a small label and the motto large; reversed, echoing
   the header: the name in Playfair like the wordmark, the motto smaller, italic, in gold. */
body .ct-site-footer .ct-fwrap > div:first-child h2{font:700 30px/1.1 "Playfair Display",Georgia,serif;letter-spacing:.3px;text-transform:none;color:#f3ead6;margin:0 0 6px}
body .ct-site-footer .ct-fwrap > div:first-child .ct-fmotto{font:italic 500 15px/1.4 "Playfair Display",Georgia,serif;color:#c9973f;margin:0 0 12px}
@media (max-width:640px){body .ct-site-footer .ct-fwrap > div:first-child h2{font-size:26px}}

/* ---------- footer: the mark beside the house name (Doug, 25 Sept 2026) ----------
   Echoes the header lockup so the page closes as it opens. Same geometry as the header's
   .ct-mark, drawn from the stylesheet so every page gets it without markup edits. */
body .ct-site-footer .ct-fwrap > div:first-child h2{display:flex;align-items:center;gap:12px}
body .ct-site-footer .ct-fwrap > div:first-child h2::before{content:"";flex:none;width:46px;height:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34'%3E%3Ccircle cx='16' cy='17' r='13' fill='none' stroke='%23c9973f' stroke-width='2.2'/%3E%3Ccircle cx='30' cy='17' r='13' fill='none' stroke='%23efe6d2' stroke-width='2.2'/%3E%3Ccircle cx='23' cy='17' r='3' fill='%23c9973f'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){body .ct-site-footer .ct-fwrap > div:first-child h2::before{width:40px;height:30px}}

/* ---------- footer: name and motto each on one line (Doug, 25 Sept 2026) ----------
   The first column was too narrow below ~1080px, so both wrapped. Wide screens give that
   column room; narrower ones give it its own row above the three link columns; phones
   scale the two lines to the screen. */
body .ct-site-footer .ct-fwrap > div:first-child h2,
body .ct-site-footer .ct-fwrap > div:first-child .ct-fmotto{white-space:nowrap}
@media (min-width:1081px){body .ct-site-footer .ct-fwrap{grid-template-columns:minmax(380px,1.5fr) 1fr 1fr 1fr}}
@media (max-width:1080px){
  body .ct-site-footer .ct-fwrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  body .ct-site-footer .ct-fwrap > div:first-child{grid-column:1/-1}
  body .ct-site-footer .ct-fwrap > div:first-child p:not(.ct-fmotto){max-width:560px}
}
@media (max-width:640px){
  body .ct-site-footer .ct-fwrap{grid-template-columns:minmax(0,1fr)}
  body .ct-site-footer .ct-fwrap > div:first-child h2{font-size:min(26px,calc((100vw - 116px) / 9.2))}
  body .ct-site-footer .ct-fwrap > div:first-child .ct-fmotto{font-size:max(11px,min(15px,calc((100vw - 64px) / 25)));white-space:normal;text-wrap:balance}
}

/* ---------- home page "this week" card: book spine + essay below a rule (Doug, 26 Sept 2026, option B) ---------- */
.hearth{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;border-radius:0!important}
.hearth .bookstrip,.hearth .brow{border-left:6px solid #1c3a5a!important}
.hearth .bookstrip{margin:0;border:1px solid #e3d6b8;border-top:1px solid #e3d6b8;border-bottom:0;border-radius:8px 8px 0 0;background:#fbf4e4}
.hearth .brow{background:#fbf4e4!important;border-right:1px solid #e3d6b8;border-top:1px solid #eadfc6;border-bottom:0}
.hearth .brow.next{background:#f1e7cf!important;border-top:1px solid #e3d6b8;border-bottom:1px solid #e3d6b8;border-radius:0 0 8px 8px;padding:8px 20px 9px!important;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.hearth .brow.next .bl{margin:0;font-size:12px;letter-spacing:1.6px;color:#7a5230}
.hearth .brow.next .bh{font:600 14.5px/1.3 Lato,Arial,sans-serif;margin:0;color:#1c3a5a}
.hearth .brow.next .bh::after{content:" ·";color:#9a8a6e}
.hearth .brow.next .when{font:400 13.5px/1.4 Lato,Arial,sans-serif;color:#5d5446}
.hearth .brow.next .yt{font-size:12.5px}
.hearth > .row:not(.brow){margin-top:22px;background:transparent;border:0;border-top:2px solid #9C6B4E;padding:12px 4px 0}
.hearth > .row:not(.brow) .eyebrow-l{color:var(--home-essay)}
.hearth > .row:not(.brow) h3{font-size:19px;color:var(--ink)}
.hearth > .row:not(.brow) p:not(.eyebrow-l){color:var(--ink-2)}
.hearth > .row:not(.brow) a.go{color:var(--home-essay)}

/* ---------- focus ring follows its ground (audit, 2026-10-04) ----------
   The book panel, the "this week" book rows and the circle-of-fifths card stay light in dark mode, so they
   keep the deep amber ring; the skip link and the footer sit on obsidian, so they keep gold (6.9:1). */
.book, .hearth .bookstrip, .hearth .brow, .wheel { --focus: #90551b; }
.skip-link, .ct-site-footer { --focus: #c9973f; }