@import url("../lab/assets/tokens.css");
@import url("../lab/assets/legacy-token-adapter.css");
@import url("../assets/css/fonts.css");

/* ============================================================
   THE COMMON TONE — Web Edition template experiments
   Shared design tokens + book components
   Plain CSS, no framework, no build step, no external requests.
   Extends the deployed Lantern Page palette (common-tone-site).
   ============================================================ */

:root {
  /* Soft washes remain component surfaces, derived from canonical unit roles. */
  --unit-1-wash: color-mix(in srgb, var(--ct-role-unit-i) 10%, transparent);
  --unit-2-wash: color-mix(in srgb, var(--ct-role-unit-ii) 9%, transparent);
  --unit-3-wash: color-mix(in srgb, var(--ct-role-unit-iii) 8%, transparent);
  --unit-4-wash: color-mix(in srgb, var(--ct-role-unit-iv) 9%, transparent);

  --shadow-soft: 0 24px 60px color-mix(in srgb, var(--ct-brand-obsidian) 12%, transparent);
  --shadow-lift: 0 10px 28px color-mix(in srgb, var(--ct-brand-obsidian) 14%, transparent);
  --radius: 6px;
  --radius-lg: 12px;

  --measure: 66ch;          /* the reading column */
  --container: 1200px;

  --focus-ring: 3px solid color-mix(in srgb, var(--ct-brand-mahogany) 55%, transparent);

  /* Box vocabulary — DESIGN.md Appendix B, Ruling 3 (approved 2026-08-09,
     specimen box_specimen_sheet.html). Hexes below that have no projected
     brand token yet are staged here pending a brand_tokens.css v2; they are
     Ruling-3 law, not improvisation. */
  --box-fill: #F6F1E6;        /* Pattern A fill */
  --box-slate: #5B7A99;       /* Etymology */
  --box-plum: #7B4E70;        /* Pedestal of Pedantry */
  --box-sepia: #8A5636;       /* Medieval Whispers */
  --box-ochre: #B97C4B;       /* Tip */
  --box-forest: var(--ct-role-unit-ii);  /* Repose (#2F4F43) */
  --box-sage-green: #5F7D6B;  /* Craftsman persona */
  --box-brick: #A34A3F;       /* Jester persona */
}

* { box-sizing: border-box; }

html {
  color: var(--ct-ink);
  background: var(--ct-paper);
  font-family: var(--font-serif);
  line-height: 1.65;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  /* faint graph-paper weave, as on the live Lantern page */
  background:
    linear-gradient(color-mix(in srgb, var(--ct-role-surface) 24%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ct-role-surface) 18%, transparent) 1px, transparent 1px),
    var(--ct-paper);
  background-size: 32px 32px;
}

img, svg { max-width: 100%; height: auto; }

/* ---------- chapter figures ----------
   Embedded chapter figures break out of the reading column:
   centered on the page at up to 1024px, full-bleed-minus-gutter
   on narrower screens. */
figure.chapter-image {
  width: min(1024px, 100vw - 2rem);
  margin: 2.4rem 0 2.4rem 50%;
  transform: translateX(-50%);
}
figure.chapter-image img { width: 100%; height: auto; display: block; }
figure.chapter-image figcaption {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--ct-muted);
  text-align: center;
  margin-top: 0.7rem;
}

a { color: var(--ct-burgundy); text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
a:hover { color: var(--ct-blue); }
a:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }

/* ---------- type scale ---------- */

h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 0.6em; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--ct-muted);
  margin: 0 0 0.75rem;
}

/* chapter-top unit line: the unit owns the top of the page */
.eyebrow-unit {
  font-size: clamp(0.92rem, 1.8vw, 1.08rem);
  letter-spacing: 0.16em;
  margin: 0 0 1rem;
}

.chapter-title {
  font-family: var(--ct-font-web-heading);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  letter-spacing: -0.01em;
}

.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.35rem;
  margin-top: 2.75em;
}

.section-heading .sec-num {
  color: var(--unit-color, var(--ct-gold));
  margin-right: 0.6em;
  font-variant-numeric: tabular-nums;
}

.skip-link {
  position: absolute; top: -120px; left: 1rem; z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--ct-obsidian); color: var(--ct-white);
  font-family: var(--font-ui);
}
.skip-link:focus { top: 1rem; }

/* ---------- reading column ---------- */

.prose { max-width: var(--measure); font-size: 1.075rem; }
.prose p { margin: 0 0 1.1em; }

.prose .opening-line {
  font-size: 1.35rem;
  font-style: italic;
  color: var(--ct-obsidian);
}

.prose .dropcap::first-letter {
  font-family: var(--ct-font-web-heading);
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--unit-color, var(--ct-burgundy));
  font-weight: 700;
}

/* song reference chips — rights posture: link, don't host */
.song-ref {
  font-family: var(--font-ui);
  font-size: 0.92em;
  white-space: nowrap;
  border: 1px solid var(--ct-line);
  border-radius: 999px;
  padding: 0.05em 0.65em 0.1em;
  background: var(--ct-paper-soft);
  text-decoration: none;
  color: var(--ct-ink);
  transition: border-color 0.15s, background 0.15s;
}
.song-ref::before { content: "♪ "; color: var(--unit-color, var(--ct-gold)); }
.song-ref:hover { border-color: var(--unit-color, var(--ct-gold)); background: var(--ct-white); color: var(--ct-ink); }

/* glossary terms remain ordinary links; JavaScript only enhances them */
.ct-glossary-term {
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.ct-glossary-term:hover { text-decoration-style: solid; }
.ct-glossary-term:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  text-decoration-style: solid;
}

.ct-glossary-popover {
  position: absolute;
  z-index: 100;
  max-width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding: 1rem 3.25rem 1rem 1.1rem;
  border: 2px solid var(--ct-line);
  border-radius: var(--radius-lg);
  background: var(--ct-white);
  color: var(--ct-ink);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-serif);
  line-height: 1.5;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ct-glossary-popover[hidden] { display: none; }
.ct-glossary-popover__title {
  display: block;
  padding-right: 0.5rem;
  font-family: var(--ct-font-web-heading);
  font-size: 1.12rem;
  line-height: 1.25;
}
.ct-glossary-popover__definition { margin: 0.55rem 0 0.7rem; }
.ct-glossary-popover__more {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}
.ct-glossary-popover__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: currentColor;
  font: 1.5rem/1 var(--font-ui);
  cursor: pointer;
}
.ct-glossary-popover__close:hover { background: var(--ct-paper-soft); }
.ct-glossary-popover__close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* thematic pause between sections — a breath mark */
.breath {
  border: 0;
  margin: 3rem auto;
  text-align: center;
  max-width: var(--measure);
}
.breath::after {
  content: "𝄐";
  font-size: 2.7rem;
  line-height: 1;
  display: inline-block;
  color: var(--ct-gold);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--ct-role-surface) 60%, transparent);
}

/* ---------- callout & persona boxes ----------
   Names follow the binding component vocabulary:
   DefinitionBox, EtymologyBox, PedestalBox, MedievalBox, TipBox,
   ExampleBox, TravellerBox, SageBox, CraftsmanBox, JesterBox,
   KrankenhornBox                                              */

.box {
  max-width: var(--measure);
  margin: 2rem 0;
  padding: 1.1rem 1.4rem 1rem;
  background: var(--ct-paper-soft);
  border-left: 5px solid var(--ct-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow-soft);
}
.box .box-label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  margin: 0 0 0.5rem;
  display: flex; align-items: center; gap: 0.5em;
}
.box p { margin: 0 0 0.6em; }
.box p:last-child { margin-bottom: 0; }

/* Ruling 3 (2026-08-09): print semantics, Warm Scholar hues, one vocabulary.
   Labels are obsidian across all boxes (per approved specimen); the border
   carries the identity color. Pattern A (Definition, Example) = full frame
   on --box-fill; Pattern B (sidebars) = thick left bar on white. */

.box-definition,
.box-example {
  border: 1.5px solid;
  border-radius: var(--radius);
  background: var(--box-fill);
}
.box-definition { border-color: var(--ct-line); }
.box-example { border-color: var(--ct-faint); }
.box-definition .box-label,
.box-example .box-label { color: var(--ct-ink); }

.box-etymology,
.box-pedestal,
.box-medieval,
.box-tip,
.box-repose {
  background: var(--ct-white);
  border-left-width: 10px;
}
.box-etymology .box-label,
.box-pedestal .box-label,
.box-medieval .box-label,
.box-tip .box-label,
.box-repose .box-label { color: var(--ct-ink); }

.box-etymology { border-color: var(--box-slate); }
.box-pedestal { border-color: var(--box-plum); }
.box-medieval { border-color: var(--box-sepia); }
.box-medieval p { font-style: italic; }
.box-tip { border-color: var(--box-ochre); }
/* chapter-end forward seam — fixed title "…and the story continues" */
.box-repose { border-color: var(--box-forest); }

/* persona voices — spoken, so they get quote styling.
   White ground, rounded; nameplates uppercase and uniform for all five
   (the Jester's lowercase lives in his speech, never his nameplate). */
.box-persona { background: var(--ct-white); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-left-width: 8px; }
.box-persona p { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; }
.box-persona .box-label { color: var(--ct-ink); }
.box-traveller  { border-color: var(--ct-gold); }
.box-sage       { border-color: var(--ct-blue); }
.box-craftsman  { border-color: var(--box-sage-green); }
.box-jester     { border-color: var(--box-brick); }
.box-krankenhorn{ border-color: var(--ct-obsidian); }

/* cast art in-box (Rulings 3 + 5): the approved specimen renderings,
   equalization transforms baked into the SVGs. Decorative — the nameplate
   text carries the speaker's identity for screen readers. Krankenhorn uses
   the bust crop at this size and stays deliberately larger; the stonemason
   has no ground line, so he is vertically centered. */
.box-persona {
  position: relative;
  padding-left: calc(86px + 2.6rem);
  min-height: 118px;
}
.box-persona::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  width: 86px;
  height: 86px;
  background: no-repeat center bottom / contain;
}
.box-traveller::before { background-image: url("../assets/images/personas/PERSONA-001-traveller.svg"); }
.box-sage::before { background-image: url("../assets/images/personas/PERSONA-004-sage.svg"); }
.box-craftsman::before {
  background-image: url("../assets/images/personas/PERSONA-005-craftsman.svg");
  height: 80px;
  top: 50%; bottom: auto; transform: translateY(-50%);
}
.box-jester::before { background-image: url("../assets/images/personas/PERSONA-007-jester.svg"); }

/* paired personas alternate by appearance, in reading order (Doug's ruling,
   2026-08-09 review session): Traveller = walking man / Wife of Bath,
   Sage = Hildegard / monk, Craftsman = stonemason / spinner.
   .persona-alt marks every second appearance. The spinner has a ground
   line, so she reverts to bottom alignment. */
.box-traveller.persona-alt::before { background-image: url("../assets/images/personas/PERSONA-002-wife-of-bath.svg"); }
.box-sage.persona-alt::before { background-image: url("../assets/images/personas/PERSONA-003-monk.svg"); }
.box-craftsman.persona-alt::before {
  background-image: url("../assets/images/personas/PERSONA-006-spinner.svg");
  height: 86px;
  top: auto; bottom: 1rem; transform: none;
}
.box-krankenhorn { padding-left: calc(103px + 2.6rem); }
.box-krankenhorn::before { background-image: url("../assets/images/personas/PERSONA-008b-krankenhorn-bust.svg"); width: 103px; }
.dialogue .box-jester { padding-left: calc(64px + 2.2rem); }
.dialogue .box-jester::before { width: 64px; height: 64px; }

@media (max-width: 540px) {
  .box-persona, .box-krankenhorn { padding-left: calc(56px + 1.8rem); min-height: 88px; }
  .box-persona::before { width: 56px; height: 56px; }
  .box-krankenhorn::before { width: 67px; }
}

/* a two-voice exchange (Krankenhorn vs Jester) */
.dialogue { max-width: var(--measure); margin: 2rem 0; display: grid; gap: 0.75rem; }
.dialogue .box { margin: 0; }
.dialogue .box + .box { margin-left: 2.5rem; }

/* ---------- wayfinding primitives ---------- */

.crumbs {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ct-muted);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: 0.35em; color: var(--ct-line); }
.crumbs a { color: var(--ct-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ct-burgundy); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ct-ink); font-weight: 600; }

.unit-badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--ct-white);
  background: var(--unit-color, var(--ct-gold));
  border-radius: 999px;
  padding: 0.3em 0.9em;
}

/* ---- the Common Tone pager: prev/next as voice-leading ---- */

.pager {
  max-width: calc(var(--measure) + 8rem);
  margin: 3.5rem 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  font-family: var(--font-ui);
}
.pager a {
  display: block;
  text-decoration: none;
  color: var(--ct-ink);
  background: var(--ct-white);
  border: 1px solid var(--ct-line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem 1.1rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}
.pager a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--unit-color, var(--ct-gold));
}
.pager .pager-dir {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.7rem; color: var(--ct-muted);
  display: block; margin-bottom: 0.35rem;
}
.pager .pager-title {
  font-family: var(--ct-font-web-heading);
  font-weight: 700; font-size: 1.08rem; display: block;
}
.pager .pager-next { text-align: right; }
/* the signature move: name the shared idea that carries across */
.pager .common-tone {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ct-muted);
}
.pager .common-tone::before { content: "◦ common tone: "; font-style: normal; color: var(--unit-color, var(--ct-gold)); font-family: var(--font-display); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; }

/* ---------- obsidian footer ---------- */

.site-footer {
  margin-top: 4rem;
  background: var(--ct-obsidian);
  color: color-mix(in srgb, var(--ct-role-canvas) 84%, transparent);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  padding: 2.5rem 0 3rem;
}
.site-footer a { color: var(--ct-paper); }
.site-footer .container { width: min(100% - 2rem, var(--container)); margin: 0 auto; }

/* ---------- helpers ---------- */
.container { width: min(100% - 2rem, var(--container)); margin: 0 auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (max-width: 640px) {
  .pager { grid-template-columns: 1fr; }
  .dialogue .box + .box { margin-left: 1.25rem; }
}

@media (max-width: 400px) {
  .ct-glossary-popover {
    left: 1rem !important;
    right: 1rem;
    width: auto;
    max-width: none;
  }
}

@media (prefers-color-scheme: dark) {
  .ct-glossary-popover {
    border-color: var(--ct-muted);
    background: var(--ct-obsidian);
    color: var(--ct-paper);
  }
  .ct-glossary-popover__more { color: var(--ct-paper); }
  .ct-glossary-popover__close:hover { background: var(--ct-muted); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pager a { transition: none; }
  .ct-glossary-popover { transition: none; }
}

@media (forced-colors: active) {
  .ct-glossary-term { text-decoration-thickness: 2px; }
  .ct-glossary-popover { border: 2px solid CanvasText; box-shadow: none; }
  .ct-glossary-popover__close { border: 1px solid ButtonText; }
}