/* ==========================================================================
   Webspinner Academy — Screen Design System
   --------------------------------------------------------------------------
   Scope:   All course hub and lesson SPAs.
   Pairing: Always load alongside print.css (media="print").
   Fonts:   System stacks only. No network requests — these documents must
            render identically offline, on a locked-down LMS, or from a USB key.
   Themes:  Light and dark, driven by prefers-color-scheme with an explicit
            [data-theme] override that always wins (the header toggle).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Typography ---------------------------------------------------------- */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                Charter, Georgia, "Times New Roman", serif;
  --font-sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;

  /* Modular scale, 1.25 ratio, 19px base --------------------------------- */
  --fs-base: 1.1875rem;   /* 19px  */
  --fs-sm:   0.9375rem;   /* 15px  */
  --fs-xs:   0.8125rem;   /* 13px  */
  --fs-lg:   1.375rem;    /* 22px  */
  --fs-h4:   1.1875rem;
  --fs-h3:   1.5rem;
  --fs-h2:   2rem;
  --fs-h1:   2.75rem;
  --fs-display: 3.5rem;

  --lh-body: 1.7;
  --lh-tight: 1.2;

  /* Measure — the single most important typographic decision here.
     66 characters is the classic optimum for continuous reading. */
  --measure: 34rem;
  --measure-wide: 46rem;

  /* Spacing (8px base) --------------------------------------------------- */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 3rem;     --s8: 4rem;   --s9: 6rem;

  --radius: 6px;
  --radius-lg: 12px;

  --rule: 1px;
  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Palette provenance
   --------------------------------------------------------------------------
   Sampled directly from the Webspinner Academy logo (images/Webspinner-Academy-
   Logo.png) rather than invented, so the pages and the mark share one identity:

     ground   #00040c   near-black navy field
     column   #a87848 / #906030   antique gold of the Ionic column and wordmark
     capital  #a8c0d8 / #90a8c0   silver-blue of the head and cloud
     depth    #306078 / #183048   mid and shadow blues

   The light theme darkens the gold to #8a5a1e so body-weight text on paper
   clears WCAG AA; the logo's #a87848 is reserved for decorative rules and
   large type, where it passes on its own.
   -------------------------------------------------------------------------- */

/* Light theme (default) */
:root,
:root[data-theme="light"] {
  --paper:        #f8f7f4;   /* faintly warm off-white — low glare on long reads */
  --paper-raised: #ffffff;
  --paper-sunken: #efece5;
  --ink:          #14181e;
  --ink-muted:    #545a63;
  --ink-faint:    #838a94;
  --line:         #dcd8ce;
  --line-strong:  #bdb7a9;

  /* Accent: the column gold, darkened for text contrast. */
  --accent:       #8a5a1e;
  --accent-soft:  #f4ead6;
  --accent-ink:   #5f3d10;
  --accent-bright:#a87848;   /* logo gold, decorative use only */

  /* Semantic callouts — evidence blue is the logo's column-shadow blue. */
  --evidence:      #2c5673;   --evidence-soft:  #e4edf4;
  --caution:       #8f3a2a;   --caution-soft:   #f8e5e0;
  --practice:      #3d5a2b;   --practice-soft:  #e8f0e0;

  --shadow: 0 1px 2px rgba(20, 24, 30, 0.05), 0 4px 16px rgba(20, 24, 30, 0.06);
  --shadow-lg: 0 2px 4px rgba(20, 24, 30, 0.06), 0 12px 40px rgba(20, 24, 30, 0.12);
}

/* Dark theme — built on the logo's navy ground so the mark sits on its own
   field rather than on a neutral grey that fights it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0b1119;
    --paper-raised: #131b26;
    --paper-sunken: #070c12;
    --ink:          #dde5ee;
    --ink-muted:    #97a3b2;
    --ink-faint:    #6a7684;
    --line:         #24303f;
    --line-strong:  #3a4859;

    --accent:       #cba36a;
    --accent-soft:  #241c10;
    --accent-ink:   #e2c08d;
    --accent-bright:#a87848;

    --evidence:      #7fb0cc;   --evidence-soft:  #10202c;
    --caution:       #d98a76;   --caution-soft:   #2c1a15;
    --practice:      #97bd7c;   --practice-soft:  #172312;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --paper:        #0b1119;
  --paper-raised: #131b26;
  --paper-sunken: #070c12;
  --ink:          #dde5ee;
  --ink-muted:    #97a3b2;
  --ink-faint:    #6a7684;
  --line:         #24303f;
  --line-strong:  #3a4859;

  --accent:       #cba36a;
  --accent-soft:  #241c10;
  --accent-ink:   #e2c08d;
  --accent-bright:#a87848;

  --evidence:      #7fb0cc;   --evidence-soft:  #10202c;
  --caution:       #d98a76;   --caution-soft:   #2c1a15;
  --practice:      #97bd7c;   --practice-soft:  #172312;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the sticky masthead when jumping to an anchor. */
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the page body must never scroll horizontally */
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--accent-ink); }

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

::selection { background: var(--accent-soft); color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff;
  padding: var(--s3) var(--s5); z-index: 200; border-radius: 0 0 var(--radius) 0;
  font-family: var(--font-sans); font-size: var(--fs-sm);
}
.skip-link:focus { left: 0; top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 var(--s5);
}

/* The hub has no contents rail, so it needs its own ceiling — at 90rem the
   measure-constrained hero strands itself against a wide empty right margin. */
.shell--hub { max-width: 64rem; }

/* Lesson pages get a persistent contents rail at wide viewports. */
@media (min-width: 60rem) {
  .shell--lesson {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s8);
    padding: 0 var(--s6);
  }
}

/* At very wide viewports the rail widens rather than opening a third column;
   an empty gutter reads as a layout mistake, not as generous margin. */
@media (min-width: 88rem) {
  .shell--lesson {
    grid-template-columns: 18rem minmax(0, 1fr);
    max-width: 76rem;
  }
}

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

/* Full-bleed escape hatch for tables and figures inside a narrow measure. */
.bleed {
  width: min(var(--measure-wide), 100%);
  max-width: none;
}
@media (min-width: 60rem) {
  .bleed { width: var(--measure-wide); }
}

/* --------------------------------------------------------------------------
   4. Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: var(--rule) solid var(--line);
}

.masthead__inner {
  max-width: 90rem; margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap;
}

.wordmark {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-sans); text-decoration: none;
  color: var(--ink); font-weight: 600; letter-spacing: -0.01em;
  font-size: var(--fs-sm); line-height: 1.15;
}
.wordmark:hover { color: var(--ink); }

/* The logo is supplied on its own navy field, so it is set as a badge rather
   than knocked out. Reads correctly in both themes without a second asset. */
.wordmark__badge {
  width: 30px; height: 30px; flex: none;
  border-radius: 7px;
  background: #00040c;
  box-shadow: 0 0 0 1px var(--line);
}
.wordmark__text { display: flex; flex-direction: column; }
.wordmark__sub {
  font-weight: 400; font-size: var(--fs-xs);
  color: var(--ink-muted); letter-spacing: 0.02em;
}

.masthead__spacer { flex: 1 1 auto; }

.masthead__nav {
  display: flex; align-items: center; gap: var(--s1);
  font-family: var(--font-sans); font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   5. Controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500;
  padding: var(--s2) var(--s3);
  border: var(--rule) solid transparent;
  border-radius: var(--radius);
  background: transparent; color: var(--ink-muted);
  cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { background: var(--paper-sunken); color: var(--ink); }
.btn[aria-pressed="true"], .btn.is-active {
  background: var(--accent-soft); color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn svg { width: 15px; height: 15px; flex: none; }

/* Icon-only theme switch, pinned to the top-right of the masthead. Shows the
   moon on a light page (tap to go dark) and the sun on a dark page (tap to go
   light) — the icon names the destination, matching the visually-hidden label
   the script keeps in sync. */
.btn--theme {
  padding: var(--s2);
  width: 34px; height: 34px;
  justify-content: center;
  border-radius: 999px;
}
.btn--theme svg { width: 17px; height: 17px; }
.theme-icon--sun { display: none; }
.theme-icon--moon { display: block; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun { display: block; }
:root[data-theme="light"] .theme-icon--moon { display: block; }
:root[data-theme="light"] .theme-icon--sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon--moon { display: none; }
  :root:not([data-theme="light"]) .theme-icon--sun { display: block; }
}

.btn--primary {
  background: var(--accent); color: #fff;
  border-color: var(--accent);
  padding: var(--s3) var(--s5); font-size: var(--fs-sm); font-weight: 600;
}
.btn--primary:hover { background: var(--accent-ink); color: #fff; }
:root[data-theme="dark"] .btn--primary,
:root:not([data-theme="light"]) .btn--primary { color: #16181b; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn--primary { color: #fff; }
}

.btn--outline {
  border-color: var(--line-strong); color: var(--ink);
  padding: var(--s3) var(--s5); font-size: var(--fs-sm);
}
.btn--outline:hover { border-color: var(--accent); background: var(--accent-soft); }

.btn-group { display: inline-flex; gap: var(--s1); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. Contents rail (lesson sidebar)
   -------------------------------------------------------------------------- */

.rail { display: none; }

@media (min-width: 60rem) {
  .rail {
    display: block;
    position: sticky; top: 5rem;
    align-self: start;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    padding: var(--s6) 0 var(--s7);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    scrollbar-width: thin;
  }
}

.rail__title {
  text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 0.6875rem; font-weight: 700; color: var(--ink-faint);
  margin: 0 0 var(--s3);
}

.rail__list { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.rail__list li { margin: 0; }

.rail__link {
  display: block; padding: var(--s2) var(--s3);
  color: var(--ink-muted); text-decoration: none;
  border-left: 2px solid var(--line);
  line-height: 1.35;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
.rail__link:hover { color: var(--ink); background: var(--paper-sunken); }
.rail__link.is-current {
  color: var(--accent-ink); border-left-color: var(--accent);
  background: var(--accent-soft); font-weight: 600;
}
.rail__link--sub { padding-left: var(--s5); font-size: 0.75rem; }

/* Reading progress bar */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 101;
  transition: width 90ms linear;
}

/* --------------------------------------------------------------------------
   7. Lesson header
   -------------------------------------------------------------------------- */

.lesson-head { padding: var(--s8) 0 var(--s6); }

.eyebrow {
  font-family: var(--font-sans); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
  color: var(--accent); margin: 0 0 var(--s3);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.eyebrow__divider { color: var(--line-strong); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); margin: 0 0 var(--s4); }
h2 { font-size: var(--fs-h2); margin: var(--s8) 0 var(--s4); }
h3 { font-size: var(--fs-h3); margin: var(--s7) 0 var(--s3); }
h4 { font-size: var(--fs-h4); margin: var(--s5) 0 var(--s2); font-weight: 700; }

.deck {
  font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-muted);
  margin: 0 0 var(--s5); max-width: var(--measure-wide);
  text-wrap: pretty;
}

p { margin: 0 0 var(--s4); text-wrap: pretty; }

/* Metadata strip under the lesson title */
.meta-strip {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  padding: var(--s4) 0;
  border-top: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
  font-family: var(--font-sans); font-size: var(--fs-xs);
  max-width: var(--measure-wide);
}
.meta-strip__item { display: flex; flex-direction: column; gap: 2px; }
.meta-strip__label {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.6875rem; color: var(--ink-faint); font-weight: 600;
}
.meta-strip__value { color: var(--ink); font-weight: 500; }

/* Objective statement — the pedagogical contract with the learner. */
.objective {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--paper-raised);
  border: var(--rule) solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--measure-wide);
}
.objective__label {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin: 0 0 var(--s2);
}
.objective p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. Callouts
   -------------------------------------------------------------------------- */

.callout {
  margin: var(--s6) 0;
  padding: var(--s5);
  border-radius: var(--radius);
  border: var(--rule) solid var(--line);
  background: var(--paper-raised);
  max-width: var(--measure-wide);
  font-size: 1.0625rem;
}
.callout__label {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 var(--s3);
  display: flex; align-items: center; gap: var(--s2);
}
.callout__label svg { width: 16px; height: 16px; flex: none; }
.callout > :last-child { margin-bottom: 0; }

.callout--evidence {
  background: var(--evidence-soft);
  border-color: color-mix(in srgb, var(--evidence) 28%, transparent);
}
.callout--evidence .callout__label { color: var(--evidence); }

.callout--caution {
  background: var(--caution-soft);
  border-color: color-mix(in srgb, var(--caution) 28%, transparent);
}
.callout--caution .callout__label { color: var(--caution); }

.callout--practice {
  background: var(--practice-soft);
  border-color: color-mix(in srgb, var(--practice) 28%, transparent);
}
.callout--practice .callout__label { color: var(--practice); }

.callout--definition {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.callout--definition .callout__label { color: var(--accent-ink); }

/* Pull quote */
.pullquote {
  margin: var(--s7) 0;
  padding-left: var(--s5);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-lg); line-height: 1.45;
  color: var(--ink); font-style: italic;
  max-width: var(--measure-wide);
}
.pullquote cite {
  display: block; margin-top: var(--s3);
  font-family: var(--font-sans); font-size: var(--fs-xs);
  font-style: normal; color: var(--ink-muted);
}

/* Blockquote for source material */
blockquote {
  margin: var(--s5) 0; padding: 0 0 0 var(--s5);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-muted); font-style: italic;
}
blockquote > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Figures — illustration placeholders
   -------------------------------------------------------------------------- */

figure { margin: var(--s7) 0; }

.figure-placeholder {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      45deg,
      transparent, transparent 12px,
      color-mix(in srgb, var(--line) 35%, transparent) 12px,
      color-mix(in srgb, var(--line) 35%, transparent) 13px
    ),
    var(--paper-sunken);
  padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s3);
  min-height: 15rem;
  justify-content: center;
}

.figure-placeholder__slug {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--accent-ink); background: var(--accent-soft);
  padding: var(--s1) var(--s2); border-radius: 3px;
  align-self: flex-start; letter-spacing: 0.01em;
}
.figure-placeholder__title {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm);
  color: var(--ink); margin: 0;
}
.figure-placeholder__brief {
  font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--ink-muted); margin: 0; line-height: 1.55;
}
.figure-placeholder__brief b { color: var(--ink); font-weight: 600; }
.figure-placeholder__spec {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--ink-faint); margin: 0;
}

figcaption {
  font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--ink-muted); line-height: 1.55;
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: var(--rule) solid var(--line);
}
figcaption b, figcaption strong {
  color: var(--ink); font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;                 /* wide tables scroll inside their own box */
  margin: var(--s6) 0;
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  line-height: 1.45;
}

caption {
  caption-side: top; text-align: left;
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
  color: var(--ink-muted); padding: var(--s4) var(--s4) var(--s2);
  text-transform: uppercase; letter-spacing: 0.06em;
}

th, td {
  padding: var(--s3) var(--s4);
  text-align: left; vertical-align: top;
  border-bottom: var(--rule) solid var(--line);
}
thead th {
  font-weight: 700; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: var(--paper-sunken);
  border-bottom: 2px solid var(--line-strong);
  position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper-sunken); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   11. Endnote references and popovers
   -------------------------------------------------------------------------- */

.enref {
  font-family: var(--font-sans);
  font-size: 0.75em; font-weight: 700;
  vertical-align: super; line-height: 0;
  color: var(--accent); text-decoration: none;
  padding: 0 0.1em; border-radius: 2px;
  cursor: pointer;
}
.enref:hover, .enref:focus-visible {
  background: var(--accent-soft); color: var(--accent-ink);
}
.enref::before { content: "["; }
.enref::after  { content: "]"; }

/* Hover/focus card that shows the note without losing your place. */
.enpop {
  position: absolute; z-index: 150;
  max-width: min(26rem, calc(100vw - 2rem));
  background: var(--paper-raised);
  border: var(--rule) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s4);
  font-family: var(--font-sans); font-size: var(--fs-xs);
  line-height: 1.55; color: var(--ink);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.enpop.is-open { opacity: 1; visibility: visible; }
.enpop__num {
  font-weight: 700; color: var(--accent); margin-right: var(--s2);
}
.enpop a { word-break: break-word; }

/* --------------------------------------------------------------------------
   12. Endnotes and bibliography sections
   -------------------------------------------------------------------------- */

.apparatus {
  margin-top: var(--s9);
  padding-top: var(--s6);
  border-top: 2px solid var(--line-strong);
  max-width: var(--measure-wide);
}

.endnotes { counter-reset: none; }

.endnotes ol {
  list-style: none; counter-reset: note; padding: 0; margin: 0;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  line-height: 1.6;
}
.endnotes li {
  counter-increment: note;
  position: relative;
  padding: var(--s3) 0 var(--s3) 2.75rem;
  border-bottom: var(--rule) solid var(--line);
}
.endnotes li:last-child { border-bottom: none; }
.endnotes li::before {
  content: counter(note) ".";
  position: absolute; left: 0; top: var(--s3);
  font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
  width: 2.25rem; text-align: right;
}
.endnotes li:target { background: var(--accent-soft); border-radius: var(--radius); }
.endnotes a { word-break: break-word; }

.backref {
  font-size: 0.85em; text-decoration: none; margin-left: var(--s2);
  color: var(--ink-faint);
}
.backref:hover { color: var(--accent); }

/* Source-tier badge — tells the reader how much weight a citation carries. */
.tier {
  display: inline-block;
  font-family: var(--font-sans); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 1px 6px; border-radius: 3px; margin-right: var(--s2);
  vertical-align: 1px; white-space: nowrap;
}
.tier--primary   { background: var(--practice-soft); color: var(--practice);
                   border: 1px solid color-mix(in srgb, var(--practice) 35%, transparent); }
.tier--institutional { background: var(--evidence-soft); color: var(--evidence);
                   border: 1px solid color-mix(in srgb, var(--evidence) 35%, transparent); }
.tier--documentation { background: var(--accent-soft); color: var(--accent-ink);
                   border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.tier--journalism { background: var(--paper-sunken); color: var(--ink-muted);
                   border: 1px solid var(--line-strong); }
.tier--trade     { background: var(--caution-soft); color: var(--caution);
                   border: 1px solid color-mix(in srgb, var(--caution) 35%, transparent); }

.bibliography h3 { margin-top: var(--s6); font-size: var(--fs-h4); }
.bibliography ul { list-style: none; padding: 0; margin: 0; }
.bibliography li {
  font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.55;
  padding: var(--s3) 0 var(--s3) var(--s5);
  text-indent: calc(-1 * var(--s5));   /* hanging indent, as scholarship demands */
  border-bottom: var(--rule) solid var(--line);
  word-break: break-word;
}
.bibliography li:last-child { border-bottom: none; }

/* --------------------------------------------------------------------------
   13. Self-check (retrieval practice)
   -------------------------------------------------------------------------- */

.selfcheck { margin: var(--s6) 0; max-width: var(--measure-wide); }

.selfcheck__item {
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  margin-bottom: var(--s3);
  overflow: hidden;
}
.selfcheck__q {
  padding: var(--s4) var(--s5);
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.0625rem;
  display: flex; gap: var(--s3); align-items: flex-start;
  transition: background var(--transition);
}
.selfcheck__q::-webkit-details-marker { display: none; }
.selfcheck__q:hover { background: var(--paper-sunken); }
.selfcheck__q::before {
  content: "?";
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-xs);
  color: var(--accent); background: var(--accent-soft);
  width: 1.5rem; height: 1.5rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  margin-top: 2px;
}
details[open] .selfcheck__q { background: var(--paper-sunken); }
.selfcheck__a {
  padding: var(--s4) var(--s5) var(--s5) calc(var(--s5) + 2.25rem);
  border-top: var(--rule) solid var(--line);
  font-size: 1.0625rem; color: var(--ink-muted);
}
.selfcheck__a > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Lists, code, misc prose
   -------------------------------------------------------------------------- */

.prose ul, .prose ol { padding-left: var(--s5); margin: 0 0 var(--s4); }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--accent); }

dl.terms { margin: var(--s5) 0; }
dl.terms dt {
  font-weight: 700; font-family: var(--font-sans); font-size: var(--fs-sm);
  margin-top: var(--s4); color: var(--ink);
}
dl.terms dd {
  margin: var(--s1) 0 0; color: var(--ink-muted); font-size: 1.0625rem;
}

code, kbd, samp {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--paper-sunken); padding: 0.1em 0.35em;
  border-radius: 3px; border: var(--rule) solid var(--line);
}
pre {
  background: var(--paper-sunken); border: var(--rule) solid var(--line);
  border-radius: var(--radius); padding: var(--s4);
  overflow-x: auto; font-size: var(--fs-sm); line-height: 1.55;
  max-width: var(--measure-wide);
}
pre code { background: none; border: none; padding: 0; font-size: inherit; }

hr {
  border: none; border-top: var(--rule) solid var(--line);
  margin: var(--s8) 0; max-width: var(--measure-wide);
}

.small { font-size: var(--fs-sm); color: var(--ink-muted); }
.tabnum { font-variant-numeric: tabular-nums; }

/* Data point — a large figure with its source attached, for on-screen stats. */
.datapoint {
  display: grid; gap: var(--s2);
  padding: var(--s5); border-radius: var(--radius);
  background: var(--paper-raised); border: var(--rule) solid var(--line);
}
.datapoint__value {
  font-size: 2.5rem; font-weight: 700; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.datapoint__label {
  font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--ink); line-height: 1.4;
}
.datapoint__source {
  font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--ink-faint);
}
.datagrid {
  display: grid; gap: var(--s4); margin: var(--s6) 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  max-width: var(--measure-wide);
}

/* --------------------------------------------------------------------------
   15. Course hub
   -------------------------------------------------------------------------- */

.hero {
  padding: var(--s8) 0 var(--s8);
  border-bottom: var(--rule) solid var(--line);
}
.hero h1 {
  font-size: clamp(2.25rem, 6vw, var(--fs-display));
  max-width: 20ch;
}

.hero__lockup {
  width: min(19rem, 70%);
  border-radius: var(--radius-lg);
  background: #00040c;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  margin-bottom: var(--s6);
}

/* Two lockups ship in the markup; CSS reveals the one that suits the active
   theme. The brighter "Light" lockup rides the light page; the deeper original
   rides the dark page. Follows prefers-color-scheme until the toggle sets an
   explicit [data-theme], which then wins. */
.hero__lockup--dark { display: none; }
:root[data-theme="dark"] .hero__lockup--light { display: none; }
:root[data-theme="dark"] .hero__lockup--dark { display: block; }
:root[data-theme="light"] .hero__lockup--light { display: block; }
:root[data-theme="light"] .hero__lockup--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__lockup--light { display: none; }
  :root:not([data-theme="light"]) .hero__lockup--dark { display: block; }
}

/* Printed title pages carry the lockup at a modest, non-shouty size. Force the
   light lockup and hide the dark one so the PDF never prints a black panel. */
@media print {
  .hero__lockup { width: 52mm; box-shadow: none; border: 0.5pt solid #cfcabd; }
  .hero__lockup--dark { display: none !important; }
  .hero__lockup--light { display: block !important; }
  .wordmark__badge { display: none; }
}

.movement { margin: var(--s8) 0; }
.movement__head {
  display: flex; align-items: baseline; gap: var(--s4);
  padding-bottom: var(--s3); margin-bottom: var(--s5);
  border-bottom: 2px solid var(--line-strong);
  flex-wrap: wrap;
}
.movement__numeral {
  font-family: var(--font-serif); font-size: var(--fs-h2);
  color: var(--accent); font-weight: 600; line-height: 1;
}
.movement__title { font-size: var(--fs-h3); margin: 0; flex: 1 1 15rem; }
.movement__question {
  font-family: var(--font-sans); font-size: var(--fs-sm);
  color: var(--ink-muted); font-style: italic;
}

.lesson-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.lesson-card {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5);
  background: var(--paper-raised);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--ink);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.lesson-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
  color: var(--ink);
}
.lesson-card__num {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.lesson-card__title {
  font-size: var(--fs-h4); font-weight: 600; line-height: 1.3;
  margin: 0;
}
.lesson-card__objective {
  font-size: var(--fs-sm); color: var(--ink-muted); line-height: 1.5;
  margin: 0; flex: 1 1 auto;
}
.lesson-card__foot {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--ink-faint); padding-top: var(--s3);
  border-top: var(--rule) solid var(--line); margin-top: var(--s2);
}

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 100px;
  background: var(--paper-sunken); color: var(--ink-muted);
  border: var(--rule) solid var(--line);
}
.chip--high { background: var(--caution-soft); color: var(--caution);
              border-color: color-mix(in srgb, var(--caution) 30%, transparent); }
.chip--medium { background: var(--accent-soft); color: var(--accent-ink);
              border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.chip--low { background: var(--practice-soft); color: var(--practice);
              border-color: color-mix(in srgb, var(--practice) 30%, transparent); }

/* --------------------------------------------------------------------------
   16. Lesson footer navigation
   -------------------------------------------------------------------------- */

.lesson-nav {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: var(--s8) 0 var(--s9);
  max-width: var(--measure-wide);
}
.lesson-nav__link {
  padding: var(--s5); border-radius: var(--radius-lg);
  border: var(--rule) solid var(--line);
  background: var(--paper-raised);
  text-decoration: none; color: var(--ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.lesson-nav__link:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--ink); }
.lesson-nav__dir {
  font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint);
  display: block; margin-bottom: var(--s2);
}
.lesson-nav__title { font-weight: 600; line-height: 1.35; }
.lesson-nav__link--next { text-align: right; }

.colophon {
  border-top: var(--rule) solid var(--line);
  padding: var(--s6) 0 var(--s8);
  font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--ink-faint); line-height: 1.6;
  max-width: var(--measure-wide);
}
.colophon a { color: var(--ink-muted); }

/* --------------------------------------------------------------------------
   17. Print-affordance banner (screen only)
   -------------------------------------------------------------------------- */

/* Paper-only furniture. print.css is linked with media="print", so it cannot
   hide anything on screen — these rules have to live here, in the stylesheet
   the browser actually parses for the screen. print.css then re-reveals them.
   .handout-only stays hidden in a plain Ctrl+P too, where academy.js has not
   set a printing-* class; only the Handout PDF button reveals it. */
.print-masthead,
.print-only,
.handout-only { display: none; }

.print-bar {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  padding: var(--s4) var(--s5);
  margin: var(--s6) 0;
  background: var(--paper-sunken);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  max-width: var(--measure-wide);
}
.print-bar__text {
  font-family: var(--font-sans); font-size: var(--fs-xs);
  color: var(--ink-muted); flex: 1 1 14rem; line-height: 1.5;
}