/* ==========================================================================
   Pangea Academy
   A reading-first stylesheet. Long-form technical text is the primary
   content, so the type scale and measure come first and the interface
   arranges itself around them.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Blueprint & Sand — the same palette as the WordPress side.

     This used to be a warm cream and rust scheme of its own, which meant
     crossing from /courses/ into /learn/ looked like arriving at a different
     organisation. Every value below is lifted from pa-global.css so the two
     halves of the site are one design, not two that happen to share a logo.

     Everything in this stylesheet reads these tokens, so retuning them here
     retunes the whole application.
     ------------------------------------------------------------------ */

  /* ground */
  --paper:        #F9F6F1;   /* --pa-paper */
  --paper-2:      #EAE5DC;   /* --pa-sand  */
  --paper-3:      #DCD5C8;   /* a step deeper, for wells and hovers */
  --card:         #ffffff;

  /* ink */
  --ink:          #16211B;   /* --pa-ink   */
  --ink-2:        #4A5262;   /* --pa-ink-2 */
  --ink-3:        #6E7787;   /* muted — still 4.6:1 on paper */
  --rule:         #D8D2C6;   /* --pa-line  */
  --rule-soft:    #E6E1D7;

  /* accent — steel blue for anything interactive, as on the main site */
  --accent:       #37507A;   /* --pa-steel */
  --accent-dark:  #1F2D47;   /* --pa-navy  */
  --accent-wash:  #EDF0F6;

  /* supporting */
  --earth:        #9D5331;   /* --pa-clay-text, passes as small text */
  --water:        #1d5c6e;
  --gold:         #8F6B16;   /* --pa-gold-text, the only gold safe when small */
  --gold-bright:  #C99A2E;   /* --pa-gold, for fills and large marks */
  --ok:           #2f6f4e;
  --warn:         #92400e;

  --serif: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --sans:  Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --measure: 34rem;
  --wrap: 78rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(22,32,52,.05), 0 6px 20px -12px rgba(22,32,52,.28);
}

/* The dark scheme that used to live here has been removed.

   It was keyed to `prefers-color-scheme`, so a student whose laptop was in
   dark mode got a dark reader while every WordPress page stayed light — the
   two halves of the same site looked unrelated depending on an OS setting
   nobody had connected to this. The curriculum is long-form technical reading
   with drawings in it, and the drawings are drawn for a light ground.

   If a dark mode comes back it should be a control the student sets, applied
   to both halves of the site, with the figures redrawn for it. */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 40rem) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem;
}
.skip:focus { left: 0; }

a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.012em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }

.muted { color: var(--ink-3); }
.small { font-size: .875rem; }
.eyebrow {
  font-family: var(--sans); font-size: .73rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .9rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem; padding-block: .6rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
/* The hand. It is the Academy's actual mark — the handprint with the feathers
 * and the Pangea landmass — and not the four-colour circle that stood in for
 * it here. Two files rather than one: the ink version has dark linework that
 * vanishes on a dark ground, so the light version inverts the luminance inside
 * the same alpha mask. A flat silhouette was tried and is useless — at 30px
 * the feathers and the globe are what make it read as this logo rather
 * than as any handprint, and a silhouette throws exactly those away. */
.brand-mark {
  width: 2.1rem; height: 2.1rem; flex: none;
  background: url('hand-ink.png') center / contain no-repeat;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.brand-text em { font-style: normal; font-size: .72rem; color: var(--ink-3); letter-spacing: .02em; }

.nav-main, .nav-account { display: flex; align-items: center; gap: 1.35rem; }
.nav-main a, .nav-account a {
  font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink-2);
  padding-block: .35rem; border-bottom: 2px solid transparent;
}
.nav-main a:hover, .nav-account a:hover { color: var(--ink); }
/* Except the button. `.nav-account a` is 0,2,0 and `.btn` is 0,1,0, so the
   navigation's link colour was winning and painting "Create account" in
   --ink-2 on the accent fill: grey-blue text on steel blue, about 1.6:1, which
   is unreadable and was on every page a signed-out visitor sees — which is
   everyone arriving from the marketing site. Same weight, later in the file. */
.nav-main a.btn, .nav-account a.btn { color: #fff; }
.nav-main a.btn:hover, .nav-account a.btn:hover { color: #fff; }
.nav-main a.btn-ghost, .nav-account a.btn-ghost { color: var(--ink); }
/* The current section, in either navigation. This used to be set only on
   .nav-main, and only one view ever passed the flag that turns it on, so
   nothing in the header was ever marked. Both navigations now derive it
   from the request path — see src/reqpath.js. */
.nav-main a[aria-current="page"],
.nav-account a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.mobile-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); padding-left: .6rem; }
.nav-account { gap: 1rem; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; flex-direction: column; gap: 4px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); }

.mobile-nav { border-top: 1px solid var(--rule-soft); background: var(--paper-2); padding: .5rem 0 1rem; }
.mobile-nav .wrap { display: flex; flex-direction: column; }
.mobile-nav a { padding: .6rem 0; text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.mobile-nav hr { border: 0; border-top: 1px solid var(--rule); margin: .6rem 0; }

@media (max-width: 62rem) {
  .nav-main, .nav-account { display: none; }
  .nav-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   Buttons, pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: .68rem 1.25rem; border-radius: var(--radius);
  font-family: var(--sans); font-size: .93rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .05s;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-3); }
.btn-sm { padding: .42rem .85rem; font-size: .85rem; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: 100px;
  background: var(--paper-3); color: var(--ink-2);
}
.pill-free { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.pill-core { background: var(--accent-wash); color: var(--accent-dark); }
.pill-spec { background: color-mix(in srgb, var(--water) 15%, transparent); color: var(--water); }
.pill-done { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
/* Certification — deliberately the warning colour rather than another cool
   accent, because the distinction it marks is "this one is not part of the
   subscription and confers authority nobody else has", not "this one is a
   different subject". */
.pill-cert { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule-soft);
  background:
    radial-gradient(110% 80% at 88% 0%, var(--accent-wash) 0%, transparent 60%),
    linear-gradient(var(--paper), var(--paper-2));
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 4.5rem; } }
.hero h1 { margin-bottom: .55em; }
.hero-lede { font-family: var(--serif); font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem); color: var(--ink-2); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.stat-block {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--card); padding: 1.35rem 1.25rem; }
.stat b { display: block; font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.stat span { display: block; margin-top: .4rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section-tint { background: var(--paper-2); }
.section-head { max-width: 46rem; margin-bottom: 2.75rem; }
.section-head p { color: var(--ink-2); font-family: var(--serif); font-size: 1.1rem; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.5rem;
}
.card-link { text-decoration: none; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
.card-link:hover { border-color: var(--ink-3); box-shadow: var(--shadow); transform: translateY(-2px); }

.course-card { position: relative; }
.course-card .code {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; color: var(--accent); text-transform: uppercase;
}
.course-card h3 { margin: .5rem 0 .45rem; font-size: 1.14rem; line-height: 1.25; }
.course-card p { margin: 0 0 1.1rem; font-size: .92rem; color: var(--ink-2); }
.course-card .meta {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  font-size: .78rem; color: var(--ink-3);
  padding-top: .9rem; border-top: 1px solid var(--rule-soft);
}

.systems-grid {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .systems-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .systems-grid { grid-template-columns: repeat(3, 1fr); } }
.system { background: var(--card); padding: 1.6rem 1.4rem; }
.system h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.system p { margin: 0; font-size: .89rem; color: var(--ink-2); }
.system .sys-mark { width: 1.6rem; height: 3px; background: var(--accent); display: block; margin-bottom: .9rem; }
.system:nth-child(2) .sys-mark { background: var(--water); }
.system:nth-child(3) .sys-mark { background: var(--earth); }
.system:nth-child(4) .sys-mark { background: var(--gold); }
.system:nth-child(5) .sys-mark { background: var(--ok); }
.system:nth-child(6) .sys-mark { background: var(--ink-3); }

/* --------------------------------------------------------------------------
   Prose — the reading surface
   -------------------------------------------------------------------------- */

.prose {
  font-family: var(--serif);
  font-size: 1.135rem;
  line-height: 1.68;
  color: var(--ink);
  max-width: var(--measure);
}
.prose-wide { max-width: 44rem; }
/* Lobotomised-owl spacing. The reset must be as specific as the rules it
   competes with, or `.prose p { margin: 0 }` wins over `> * + *` and every
   paragraph collapses onto the next. */
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.15em; }
.prose > h2 { margin-top: 2.2em; font-size: 1.6rem; }
.prose > h3 { margin-top: 1.9em; font-size: 1.24rem; font-weight: 600; }
.prose > h4 { margin-top: 1.6em; font-size: 1.06rem; }
.prose > *:first-child { margin-top: 0; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose a { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; }

.prose ul, .prose ol { padding-left: 1.3em; }
.prose > ul, .prose > ol { margin-block: 1.15em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--ink-3); }

.prose > blockquote { margin-top: 1.6em; margin-bottom: 1.6em; }
.prose blockquote { padding: .1em 0 .1em 1.35em;
  border-left: 3px solid var(--accent);
  color: var(--ink);
}
.prose blockquote p { margin-block: .6em; }
.prose blockquote > *:first-child { margin-top: 0; }
.prose blockquote > *:last-child { margin-bottom: 0; }

.prose code {
  font-family: var(--mono); font-size: .86em;
  background: var(--paper-3); padding: .12em .38em; border-radius: 2px;
}
.prose pre {
  background: var(--paper-3); padding: 1rem 1.15rem; border-radius: var(--radius);
  overflow-x: auto; font-size: .9rem; line-height: 1.5;
}
.prose pre code { background: none; padding: 0; }

.prose > hr { border: 0; border-top: 1px solid var(--rule); margin-top: 2.4em; margin-bottom: 2.4em; }

/* Tables carry real content in this curriculum — they get room to breathe. */
.prose > table { margin-top: 1.8em; margin-bottom: 1.8em; }
.prose table {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: .93rem; line-height: 1.5;
  display: block; overflow-x: auto;
}
.prose thead th {
  text-align: left; font-weight: 600; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 2px solid var(--rule); padding: .55rem .8rem .5rem;
  white-space: nowrap;
}
.prose tbody td { border-bottom: 1px solid var(--rule-soft); padding: .68rem .8rem; vertical-align: top; }
.prose tbody tr:hover { background: var(--paper-2); }
.prose td:first-child, .prose th:first-child { padding-left: 0; }

.prose > figure { margin-top: 2em; margin-bottom: 2em; }
.prose figure img { display: block; width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.prose figcaption { margin-top: .6rem; font-family: var(--sans); font-size: .83rem; color: var(--ink-3); }

.fig-placeholder {
  display: flex; flex-direction: column; justify-content: center; gap: .5rem;
  margin: 2em 0; padding: 2rem 1.5rem; min-height: 8rem;
  border: 1px dashed var(--rule); border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, transparent, transparent 9px, var(--paper-2) 9px, var(--paper-2) 18px);
  font-family: var(--sans);
}
.fig-placeholder-why {
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.fig-placeholder-cap { font-size: .92rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Course page
   -------------------------------------------------------------------------- */

.course-header { padding: clamp(2.5rem, 5vw, 4rem) 0 2.5rem; border-bottom: 1px solid var(--rule-soft); background: var(--paper-2); }
.course-header .pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.course-header h1 { max-width: 22ch; }
.course-header .lede { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-2); max-width: 44rem; }

.course-layout { display: grid; gap: 3rem; padding: 3rem 0; align-items: start; }
@media (min-width: 62rem) { .course-layout { grid-template-columns: minmax(0,1fr) 20rem; gap: 4rem; } }

.enrol-box { position: sticky; top: 5.5rem; }
.enrol-box .price { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; line-height: 1; }
.enrol-box .price small { font-family: var(--sans); font-size: .82rem; font-weight: 500; color: var(--ink-3); }
.enrol-box ul { list-style: none; margin: 1.25rem 0; padding: 0; font-size: .9rem; }
.enrol-box li { padding: .42rem 0; border-bottom: 1px solid var(--rule-soft); display: flex; justify-content: space-between; gap: 1rem; }
.enrol-box li:last-child { border-bottom: 0; }
.enrol-box li span:last-child { color: var(--ink-3); }

.outcomes { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.outcomes li { position: relative; padding-left: 1.7rem; font-size: 1rem; }
.outcomes li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .7rem; height: .7rem; border: 2px solid var(--accent); border-radius: 50%;
}

/* Syllabus */
.syllabus { border-top: 1px solid var(--rule); }
.syl-part { border-bottom: 1px solid var(--rule); }
.syl-part > summary {
  display: flex; align-items: baseline; gap: 1rem; cursor: pointer;
  padding: 1.15rem 0; list-style: none;
}
.syl-part > summary::-webkit-details-marker { display: none; }
.syl-part > summary::after {
  content: "+"; margin-left: auto; font-family: var(--mono);
  font-size: 1.2rem; color: var(--ink-3); line-height: 1;
}
.syl-part[open] > summary::after { content: "–"; }
.syl-part .part-id {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; color: var(--accent); flex: none; padding-top: .2em;
}
.syl-part .part-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.syl-part .part-meta { font-size: .8rem; color: var(--ink-3); flex: none; }
.syl-lessons { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.syl-lessons li { display: flex; align-items: baseline; gap: .85rem; padding: .45rem 0 .45rem 3.2rem; font-size: .95rem; border-top: 1px solid var(--rule-soft); }
.syl-lessons .n { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); flex: none; min-width: 2rem; }
.syl-lessons .t { flex: 1; }
.syl-lessons .m { font-size: .78rem; color: var(--ink-3); flex: none; }
.syl-lessons a { text-decoration: none; }
.syl-lessons a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Lesson reader
   -------------------------------------------------------------------------- */

.reader { display: grid; min-height: 100vh; }
@media (min-width: 64rem) { .reader { grid-template-columns: 19rem minmax(0,1fr); } }

.reader-side {
  background: var(--paper-2); border-right: 1px solid var(--rule);
  padding: 1.5rem 1.35rem 3rem;
}
@media (min-width: 64rem) { .reader-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.reader-side .back { display: inline-flex; align-items: center; gap: .4rem; font-size: .83rem; color: var(--ink-3); text-decoration: none; }
.reader-side .back:hover { color: var(--accent); }
.reader-side h2 { font-size: 1.05rem; margin: 1rem 0 .3rem; }
.reader-progress { margin: 1rem 0 1.5rem; }
.bar { height: 5px; background: var(--paper-3); border-radius: 100px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 100px; transition: width .3s; }
.reader-progress p { margin: .5rem 0 0; font-size: .78rem; color: var(--ink-3); }

.toc { list-style: none; margin: 0; padding: 0; font-size: .89rem; }
.toc .toc-part {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 1.4rem 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
.toc a {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .33rem .5rem .33rem .4rem; margin-inline: -.4rem;
  text-decoration: none; color: var(--ink-2); border-radius: 2px; line-height: 1.35;
}
.toc a:hover { background: var(--paper-3); color: var(--ink); }
.toc a.current { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.toc .tick { flex: none; width: 1rem; color: var(--ok); font-size: .8rem; }

.reader-main { padding: 2.5rem 0 5rem; }
.reader-main .inner { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.lesson-head { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.lesson-head .crumb { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; }
.lesson-head h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem); margin-bottom: .4rem; }
.lesson-head .meta { font-size: .85rem; color: var(--ink-3); }

.lesson-section { margin-bottom: 3rem; }
.lesson-section > h2 {
  font-size: 1.45rem; margin-bottom: .9rem;
  padding-top: .3rem;
}
.lesson-section > h2 .sec-num {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--accent); display: block; margin-bottom: .3rem; letter-spacing: .06em;
}

.lesson-nav {
  display: flex; gap: 1rem; justify-content: space-between;
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.lesson-nav a { flex: 1; max-width: 18rem; text-decoration: none; padding: .9rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.lesson-nav a:hover { border-color: var(--ink-3); }
.lesson-nav .dir { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem; }
.lesson-nav .ttl { font-family: var(--serif); font-size: .98rem; }
.lesson-nav .next { margin-left: auto; text-align: right; }

/* --------------------------------------------------------------------------
   Quiz
   -------------------------------------------------------------------------- */

.quiz {
  margin-top: 3.5rem; padding: 2rem 1.75rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
}
.quiz > h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.quiz > .quiz-intro { font-size: .9rem; color: var(--ink-3); margin: 0 0 1.75rem; }
.q { padding: 1.4rem 0; border-top: 1px solid var(--rule-soft); }
.q:first-of-type { border-top: 0; padding-top: 0; }
.q-prompt { font-family: var(--serif); font-size: 1.06rem; margin: 0 0 .9rem; }
.q-prompt .qn { font-family: var(--mono); font-size: .78rem; color: var(--ink-3); margin-right: .5rem; }
.opts { display: grid; gap: .45rem; }
.opt {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; font-size: .95rem; background: var(--paper);
}
.opt:hover { border-color: var(--ink-3); }
.opt input { margin: .28rem 0 0; accent-color: var(--accent); }
.opt .letter { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); flex: none; }
.opt.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--paper)); }
.opt.wrong { border-color: var(--accent); background: var(--accent-wash); }
.q textarea {
  width: 100%; min-height: 6rem; padding: .7rem .85rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); color: inherit; resize: vertical;
}
.model-answer { margin-top: .8rem; padding: .8rem 1rem; background: var(--paper-2); border-left: 3px solid var(--ok); font-size: .93rem; }
.model-answer b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.q-note { margin-top: .7rem; font-size: .88rem; color: var(--ink-2); padding-left: .9rem; border-left: 2px solid var(--rule); }
.quiz-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.quiz-result { font-weight: 600; font-size: .95rem; }
.quiz-result.pass { color: var(--ok); }
.quiz-result.fail { color: var(--accent); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-page { max-width: 25rem; margin: 0 auto; padding: clamp(2.5rem,6vw,5rem) 1.25rem; }
.form-page h1 { font-size: 1.9rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .65rem .8rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); color: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.field .hint { font-size: .8rem; color: var(--ink-3); margin-top: .3rem; }
.form-alt { margin-top: 1.5rem; font-size: .9rem; color: var(--ink-3); text-align: center; }

.notice { padding: .85rem 1.1rem; border-radius: var(--radius); font-size: .92rem; margin-bottom: 1.4rem; border: 1px solid; }
.notice-error { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-dark); }
.notice-ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: var(--ok); color: var(--ok); }
.notice-info { background: var(--paper-2); border-color: var(--rule); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Dashboard / account
   -------------------------------------------------------------------------- */

.dash-head { padding: clamp(2.5rem,5vw,4rem) 0 2rem; border-bottom: 1px solid var(--rule-soft); background: var(--paper-2); }
.progress-row { display: flex; align-items: center; gap: 1rem; font-size: .82rem; color: var(--ink-3); margin-top: .9rem; }
.progress-row .bar { flex: 1; }

.cert {
  background: var(--card); border: 1px solid var(--rule);
  padding: clamp(2rem,5vw,3.5rem); text-align: center; border-radius: var(--radius);
  max-width: 44rem; margin-inline: auto;
}
.cert .seal { width: 4.6rem; height: 4.6rem; margin: 0 auto 1.5rem;
  background: url('hand-ink.png') center / contain no-repeat; }
.cert .awarded { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.cert .who { font-family: var(--serif); font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 600; margin: .5rem 0 1rem; }
.cert .what { font-family: var(--serif); font-size: 1.2rem; color: var(--ink-2); }
.cert .code { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); margin-top: 2rem; }
/* The limitation printed on a certification certificate. It has to be on the
   face of the document, not in a footnote: the whole risk with a certificate
   for a machine that can injure somebody is that it gets waved at a site
   manager as though it were an operator's licence. Boxed and ruled so that it
   survives being printed in black and white and photographed badly. */
.cert .cert-limit {
  max-width: 34rem; margin: 1.75rem auto 0; padding: .85rem 1rem;
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  font-size: .82rem; line-height: 1.5; color: var(--ink-2); text-align: left;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 2rem; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.lead { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-2); }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* --------------------------------------------------------------------------
   The donation tax acknowledgment

   This is the one page on the site whose real destination is a sheet of paper
   in somebody's tax folder, possibly years from now, possibly photocopied. So
   it is set as a letter rather than as a web page: generous measure, no colour
   carrying meaning, and a print block below that strips everything which is
   not the document.
   -------------------------------------------------------------------------- */

.ack {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  max-width: 44rem; margin-inline: auto;
  font-size: .97rem; line-height: 1.65;
}
.ack > * + * { margin-top: 1.05rem; }

.ack-head { display: flex; gap: 1rem; align-items: flex-start;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.ack-mark { width: 3rem; height: 3rem; flex: none;
  background: url('hand-ink.png') center / contain no-repeat; }
.ack-org { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0; }
.ack-meta { font-size: .78rem; line-height: 1.5; color: var(--ink-3); margin: .25rem 0 0; }

.ack-title { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); }
.ack-to { font-style: normal; line-height: 1.5; }
.ack-date { color: var(--ink-2); }

.ack-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; }
.ack-table th, .ack-table td {
  text-align: left; vertical-align: top; padding: .55rem 0;
  border-bottom: 1px solid var(--line); font-weight: 400;
}
.ack-table th { color: var(--ink-3); font-size: .85rem; width: 12.5rem; }
.ack-table .mono { font-family: var(--mono); font-size: .85rem; }

/* The sentence the document exists for. Ruled rather than tinted, so it is
   still emphatic after a black-and-white photocopy. */
.ack-statement {
  padding: .85rem 1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);
}

.ack-sign { margin-top: 2rem; }
.ack-rule { display: inline-block; width: 14rem; border-top: 1px solid var(--ink-3); }

.ack-foot { font-size: .82rem; color: var(--ink-3); line-height: 1.55;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

@media print {
  .site-header, .site-footer, .reader-side, .lesson-nav, .quiz-actions,
  .no-print { display: none; }
  body { background: #fff; }
  /* The card framing is screen furniture. On paper the page IS the frame. */
  .ack { border: 0; background: #fff; padding: 0; max-width: none; }
  .ack a { text-decoration: none; color: inherit; }
}

/* --------------------------------------------------------------------------
   Animations
   Each one is a module in /anim, mounted by the runtime when it scrolls near.
   The figure reserves its space before the module loads so nothing jumps.
   -------------------------------------------------------------------------- */

.anim {
  margin: 2.4em 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.anim-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / var(--anim-ratio, 0.6);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--paper-2) 0%, var(--card) 70%);
}
.anim-stage > svg { width: 100%; height: 100%; display: block; }

.anim.anim-loading::before {
  content: "";
  display: block;
  aspect-ratio: 1 / var(--anim-ratio, 0.6);
  background: repeating-linear-gradient(
    100deg, var(--card) 0 12px, var(--paper-2) 12px 24px);
  opacity: .6;
}
.anim.anim-failed {
  padding: 1.25rem;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--ink-3);
}

.anim > figcaption {
  padding: .85rem 1.15rem 1.05rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}

.anim-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  padding: .8rem 1.15rem;
  border-top: 1px solid var(--rule-soft);
  background: var(--paper-2);
  font-family: var(--sans);
}
.anim-control { display: flex; align-items: center; gap: .55rem; }
.anim-control-slider { flex: 1 1 13rem; min-width: 12rem; }
.anim-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.anim-seg {
  display: inline-flex; border: 1px solid var(--rule);
  border-radius: 100px; overflow: hidden; background: var(--card);
}
.anim-seg button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 500;
  padding: .3rem .8rem; color: var(--ink-2);
  border-right: 1px solid var(--rule-soft);
}
.anim-seg button:last-child { border-right: 0; }
.anim-seg button:hover { background: var(--paper-2); color: var(--ink); }
.anim-seg button[aria-pressed="true"] {
  background: var(--accent); color: #fff; font-weight: 600;
}
.anim-control input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 5rem; }
.anim-out, .anim-value {
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--ink); min-width: 4.2rem;
}
.anim-readout .anim-value { color: var(--accent); font-size: .92rem; }

@media (max-width: 40rem) {
  .anim-controls { gap: .5rem .9rem; padding: .7rem .8rem; }
  .anim-label { font-size: .62rem; }
}

/* Animation gallery */
.anim-gallery { display: grid; gap: 2.5rem; }
.anim-gallery > section > h2 { margin-bottom: .3rem; }
.anim-gallery > section > .where {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}

/* --------------------------------------------------------------------------
   Footer

   `footer-grid`, `footer-mission`, `footer-base` and `mission` are emitted by
   src/views/layout.js and have never had a single rule between them, so the
   footer has always rendered as a run-on list of links with no columns and no
   separation. Styled here to the same four-column shape as the WordPress
   footer, so the two halves of the site end the same way.
   -------------------------------------------------------------------------- */

.site-footer { background: var(--accent-dark); color: #BDC7D6; margin-top: 4rem; }
.site-footer a { color: #DEE4EC; text-decoration: none; display: inline-block; padding: .4rem 0; }
.site-footer a:hover { color: #E7C877; text-decoration: underline; }

.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-block: clamp(40px, 6vw, 64px);
}
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid h3 {
  font-family: var(--sans); font-weight: 600; font-size: 1rem; color: #fff;
  margin: 0 0 .5rem; letter-spacing: 0;
}
.footer-mission { gap: .75rem; }
.footer-mission .mission {
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; color: #fff; margin: 0;
}
.footer-mission .muted { color: #AEB9CB; font-size: .9rem; line-height: 1.55; margin: 0; max-width: 34ch; }

.footer-base {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.25rem 2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .82rem; color: #8A99B0;
}
.footer-base p { margin: 0; }

/* --------------------------------------------------------------------------
   Billing and giving
   -------------------------------------------------------------------------- */

/* A narrower column for pages that are read rather than scanned — billing,
   giving, the thank-you. `--wrap` is sized for a syllabus beside a sidebar;
   a form at that width has the user's eye travelling half a screen between
   a label and its field. */
.wrap-narrow { width: min(100% - 2rem, 46rem); }

/* An aside that is part of the page's argument, not a decoration: "checkout
   was cancelled, nothing was charged", "card payments are not on yet". Ruled
   on the left rather than boxed, so it reads as a continuation of the text
   and not as an advert. */
.note {
  margin: 1.25rem 0; padding: .9rem 1.1rem;
  background: var(--paper-2); border-left: 3px solid var(--rule);
  font-size: .95rem;
}
.note p { margin-bottom: .6rem; }
.note p:last-child { margin-bottom: 0; }
/* The same thing when the reader has to act on it — a rejected amount, a
   failed card. Warn rather than error: nothing is broken, something needs
   changing. */
.note-warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 7%, var(--paper)); }

.price-options { display: grid; gap: .6rem; margin-top: 1.1rem; }

.row-line {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--rule-soft);
}
.row-line:last-child { border-bottom: 0; }
.plain-list { list-style: none; margin: .5rem 0 1.5rem; padding: 0; }

.give-form fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; }
.give-form legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .6rem; }
.give-form label > span { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .3rem; }
.give-form input[type="email"],
.give-form input[type="number"] { width: 100%; }

/* The amount grid. Radios are visually replaced by their labels, but the input
   itself stays in the DOM and keeps its focus ring — a picker you cannot tab
   through is not a picker, it is a decoration. */
.give-amounts { display: flex; flex-wrap: wrap; gap: .5rem; }
.give-amount { position: relative; }
.give-amount input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.give-amount span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.5rem; padding: .55rem .9rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; background: var(--paper);
  transition: border-color .12s, background .12s;
}
.give-amount input:checked + span {
  border-color: var(--accent); background: var(--accent-wash); color: var(--accent-dark);
}
.give-amount input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.give-amount--other span { min-width: 4rem; }
.give-other { margin-top: .9rem; }