/* === FCC-SITE-CSS:BEGIN (generated by build/gen_site.py -- content outside these markers is preserved) === */
/* ===================================================================
   Free Christian Curriculum -- the one stylesheet.

   The look is a printed schoolbook, not a software product: a serif for
   every heading, a double rule under the masthead like a chapter head, a
   dotted leader between a lesson title and its question count the way a
   table of contents sets it, and grade cards shaped like the spines of the
   books on a shelf. System fonts only -- nothing is fetched, so a page
   paints instantly on a phone on a slow line, which is who this is for.

   Light and dark both come from the same custom properties. Every colour is
   defined once on bare :root; the dark blocks only REDEFINE tokens, so no
   colour has its sole definition inside a media query.
   =================================================================== */

:root {
  /* the five named colours from the build spec */
  --ink: #1c2733;
  --parchment: #faf7f0;
  --green: #3f6b4a;
  --brass: #b07d3c;
  --rule: #e3dccd;

  --bg: var(--parchment);
  --bg-elevated: #fffdf8;
  --bg-sunken: #f2ecdf;
  --bg-tint: #f7f2e7;
  --text: var(--ink);
  --text-muted: #5a6673;
  /* Was #7c8792, which measured 3.42:1 on parchment and 3.11:1 inside the
     sunken ad slot -- under AA, and this token carries nearly every piece of
     supporting text on the site (card stats, breadcrumbs, photo credits,
     footer). #616b76 holds the same cool grey but clears 4.5:1 on all three
     backgrounds it is used over: 5.07 parchment / 5.33 elevated / 4.61 sunken. */
  --text-faint: #616b76;
  --border: var(--rule);
  --border-strong: #cfc4ac;
  --accent: var(--green);
  --accent-strong: #2f5238;
  --accent-soft: #eaf0eb;
  --accent-2: var(--brass);
  --accent-2-strong: #8f6329;
  --accent-2-soft: #f6ecd9;
  --link: #356041;
  --on-accent: #ffffff;

  --shadow-sm: 0 1px 2px rgba(28,39,51,.06);
  --shadow: 0 1px 2px rgba(28,39,51,.05), 0 6px 18px rgba(28,39,51,.07);
  --shadow-lift: 0 2px 4px rgba(28,39,51,.07), 0 14px 32px rgba(28,39,51,.12);

  --radius: 8px;
  --radius-lg: 12px;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --measure: 68ch;
  --page: 1080px;
  --col: 900px;
}

/* Dark keeps the warmth in the ink and the accents rather than the ground:
   a warm-white text on a quiet slate reads like paper at night, where a
   sepia background reads like a filter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181a;
    --bg-elevated: #1e2124;
    --bg-sunken: #111314;
    --bg-tint: #1b1e21;
    --text: #ece6da;
    --text-muted: #a9b2ba;
    --text-faint: #8c959d;
    --border: #333a40;
    --border-strong: #46505a;
    --accent: #7fb094;
    --accent-strong: #a4cbb4;
    --accent-soft: #1d2a22;
    --accent-2: #d7a962;
    --accent-2-strong: #e6c187;
    --accent-2-soft: #2a2318;
    --link: #8fc0a3;
    --on-accent: #10170f;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --bg: #16181a;
  --bg-elevated: #1e2124;
  --bg-sunken: #111314;
  --bg-tint: #1b1e21;
  --text: #ece6da;
  --text-muted: #a9b2ba;
  --text-faint: #8c959d;
  --border: #333a40;
  --border-strong: #46505a;
  --accent: #7fb094;
  --accent-strong: #a4cbb4;
  --accent-soft: #1d2a22;
  --accent-2: #d7a962;
  --accent-2-strong: #e6c187;
  --accent-2-soft: #2a2318;
  --link: #8fc0a3;
  --on-accent: #10170f;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 14px 32px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  line-height: 1.22;
  margin: 1.6em 0 .5em;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(1.95rem, 1.35rem + 2.4vw, 2.75rem); margin-top: 0; letter-spacing: -.015em; }
h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .17em; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 3px; }
ul, ol { padding-left: 1.35em; }
img { max-width: 100%; height: auto; }
b, strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: .6rem 1rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--on-accent); }

/* ---------- layout ---------- */
main { display: block; }
.section { max-width: var(--col); margin: 0 auto; padding: 2.2rem 1.25rem; }
.section > p, .section > .lede { max-width: var(--measure); }
.section h2 {
  margin-top: 0;
  padding-bottom: .35em;
  border-bottom: 3px double var(--border-strong);   /* chapter-head rule */
}
/* Full-bleed bands. The inner content still lines up with every other
   section's left edge -- computed as page padding rather than by centring
   each child, which would have indented a narrow paragraph away from its
   own heading. */
.section--alt, .section--download, .section--cta { max-width: none; }
.section--alt > *, .section--download > *, .section--cta > * { max-width: var(--col); margin-inline: auto; }
@supports (padding: max(0px)) {
  .section--alt, .section--download, .section--cta {
    padding-inline: max(1.25rem, calc((100% - var(--col)) / 2));
  }
  .section--alt > *, .section--download > *, .section--cta > * { max-width: none; margin-inline: 0; }
  .section--alt > p, .section--download > p, .section--cta > p { max-width: var(--measure); }
}
.section--alt { background: var(--bg-tint); border-block: 1px solid var(--border); }
.section--download { background: var(--bg-sunken); border-block: 1px solid var(--border); }
.section--links { border-top: 1px solid var(--border); margin-top: 1rem; }
.section--credits { border-top: 1px solid var(--border); }

/* ---------- masthead ----------
   Two rules under the header, one thick one thin, the way a textbook sets a
   running head. Sticky so 26 subjects deep in a page you can still leave. */
.masthead {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-bottom: 3px double var(--border-strong);
}
.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text); margin-right: auto; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; flex: 0 0 auto;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--serif); font-weight: 700; font-size: .8rem; letter-spacing: .03em;
  border: 1px solid var(--accent-strong); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--bg);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.02rem; }
.brand__tag { font-size: .72rem; color: var(--text-faint); letter-spacing: .01em; }

.site-nav__list { list-style: none; display: flex; align-items: center; gap: 1.05rem; margin: 0; padding: 0; }
.site-nav__list > li { position: relative; }
.site-nav__list a, .gradesmenu__summary {
  color: var(--text); text-decoration: none; font-size: .93rem;
  padding: .35rem 0; border-bottom: 2px solid transparent; display: inline-block;
}
.site-nav__list a:hover, .site-nav__list a[aria-current="page"],
.gradesmenu__summary:hover, .gradesmenu__summary.is-active {
  border-bottom-color: var(--accent-2); color: var(--text);
}

/* Grades panel: a <details>, so it opens with JavaScript switched off. */
.gradesmenu { display: inline-block; }
.gradesmenu__summary { cursor: pointer; list-style: none; user-select: none; }
.gradesmenu__summary::-webkit-details-marker { display: none; }
.gradesmenu__caret {
  display: inline-block; width: .4em; height: .4em; margin-left: .4em; vertical-align: .12em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-.1em,-.1em);
}
.gradesmenu[open] .gradesmenu__caret { transform: rotate(-135deg) translate(-.05em,-.05em); }
.gradesmenu__panel {
  position: absolute; top: calc(100% + .55rem); left: 50%; transform: translateX(-50%);
  min-width: 21rem; z-index: 40;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
  padding: .9rem 1rem 1rem;
}
.gradesmenu__band + .gradesmenu__band { margin-top: .8rem; }
.gradesmenu__band-label {
  margin: 0 0 .4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); font-weight: 700;
}
.gradesmenu__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.gradechip {
  display: inline-flex; align-items: baseline; gap: .35rem;
  padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 999px;
  text-decoration: none; color: var(--text); background: var(--bg); font-size: .85rem;
}
.gradechip:hover { border-color: var(--accent); color: var(--accent-strong); }
.gradechip.is-current { background: var(--accent-soft); border-color: var(--accent); }
.gradechip__num { font-family: var(--serif); font-weight: 700; }
.gradechip__word { display: none; }
.gradesmenu__foot { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--border); font-size: .85rem; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--border-strong); border-radius: 5px;
  width: 2.4rem; height: 2.4rem; position: relative; cursor: pointer; flex: 0 0 auto; color: var(--text);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 25%; right: 25%; height: 2px; background: currentColor;
}
.nav-toggle__bars { top: 50%; transform: translateY(-50%); }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.theme-toggle {
  background: none; border: 1px solid var(--border-strong); border-radius: 999px;
  width: 2.4rem; height: 2.4rem; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto; color: var(--text);
}
.theme-toggle__dot {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  border: 1.5px solid currentColor;
}

.breadcrumbs { max-width: var(--page); margin: 0 auto; padding: 0 1.25rem .55rem; }
.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0;
  font-size: .82rem; color: var(--text-faint);
}
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: .35rem; }
.breadcrumbs a { color: var(--text-faint); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs li[aria-current="page"] { color: var(--text-muted); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 3; }
  .site-nav { order: 5; flex-basis: 100%; }
  .site-nav__list { display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: .3rem 0 .5rem; }
  .site-nav__list.is-open { display: flex; }
  .site-nav__list > li > a, .gradesmenu__summary {
    display: block; padding: .65rem .1rem; border-bottom: 1px solid var(--border);
  }
  .gradesmenu, .gradesmenu__summary { display: block; }
  .gradesmenu__panel {
    position: static; transform: none; min-width: 0; box-shadow: none;
    border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    padding: .7rem 0 .9rem; background: transparent;
  }
  .gradechip__word { display: inline; }
  .gradechip__num { display: none; }
  .theme-toggle { order: 2; }
  .brand__tag { display: none; }
}
/* Below ~560px the brand must be allowed to shrink, or the menu button
   wraps onto a second line and leaves a band of empty header. */
@media (max-width: 560px) {
  .masthead__inner { gap: .5rem .6rem; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand__name { font-size: .93rem; }
  .brand__mark { width: 2rem; height: 2rem; }
}
@media (max-width: 380px) {
  .brand__name { font-size: .88rem; }
}

/* ---------- hero ----------
   The vertical brass rule is the margin line ruled down a composition book. */
.hero { padding: 3.2rem 1.25rem 1.6rem; }
.hero__inner { max-width: var(--col); margin: 0 auto; position: relative; }
@media (min-width: 900px) {
  .hero__inner::before {
    content: ""; position: absolute; left: -1rem; top: .25rem; bottom: .6rem;
    border-left: 2px solid var(--accent-2);
  }
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700;
  color: var(--accent-2-strong); margin: 0 0 .7rem;
}
.eyebrow a { color: inherit; }
.hero h1 { max-width: 20ch; }
.hero__lede { font-size: 1.12rem; color: var(--text-muted); max-width: var(--measure); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 .8rem; }
.hero__note { font-size: .88rem; color: var(--text-faint); font-style: italic; margin: 0; }

/* ---------- ledger (the totals strip) ---------- */
.ledger {
  max-width: var(--page); margin: 1rem auto 0; padding: 1.2rem 1.25rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem;
  border-block: 1px solid var(--border);
}
.ledger__item { text-align: center; }
.ledger__num {
  display: block; font-family: var(--serif); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.3rem);
  font-weight: 700; color: var(--accent); line-height: 1.1;
}
.ledger__label { display: block; color: var(--text-muted); font-size: .84rem; }

/* ---------- page head ---------- */
.page-head { max-width: var(--col); margin: 0 auto; padding: 2.2rem 1.25rem .4rem; }
.lede { color: var(--text-muted); font-size: 1.06rem; max-width: var(--measure); }
.tagline { font-size: .92rem; color: var(--text-muted); max-width: var(--measure); }
.jumpnav {
  display: flex; flex-wrap: wrap; gap: .3rem .95rem; margin: 1.2rem 0 0;
  padding: .7rem 0; border-block: 1px solid var(--border); font-size: .89rem;
}
/* These are in-page section jumps, but as bare text in a bordered strip they
   read as a breadcrumb trail rather than something you can tap -- and on a
   phone they were also a ~19px tap target. A transparent rule under each one
   that lights up on hover says "tab" without adding chrome, and the padding
   brings the target to a thumb-sized 44px. */
.jumpnav a {
  text-decoration: none; color: var(--text-muted);
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.jumpnav a:hover, .jumpnav a:focus-visible {
  color: var(--accent-strong); border-bottom-color: var(--accent-2);
}
.jumpnav--grades a, .jumpnav--az a {
  min-width: 1.9rem; text-align: center; border: 1px solid var(--border); border-radius: 4px;
  padding: .05rem .35rem;
}
.jumpnav--grades a:hover, .jumpnav--az a:hover { border-color: var(--accent); }

/* ---------- grade spines ---------- */
.bands { margin-top: 1.4rem; }
.band + .band { margin-top: 2.2rem; }
.band__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
.band__head h3 { margin: 0; font-size: 1.12rem; }
.band__head p { margin: 0; color: var(--text-faint); font-size: .87rem; }
.spine-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: .8rem; margin-top: .9rem; }
.spine {
  display: flex; align-items: stretch; gap: .85rem; text-decoration: none; color: var(--text);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-top: 4px solid var(--accent-2); border-radius: 3px;
  padding: .85rem .95rem; box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.spine:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); color: var(--text); }
.spine__num {
  font-family: var(--serif); font-size: 2.1rem; font-weight: 700; line-height: 1;
  color: var(--accent); flex: 0 0 auto; text-align: center;
  /* 1.6ch fits "K" but not "12", so the two-digit grades pushed their titles
     right and nothing lined up across a row. Fixed at the widest case. */
  min-width: 2.2ch; font-variant-numeric: tabular-nums;
}
.spine__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.spine__title { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.spine__stats { font-size: .8rem; color: var(--text-muted); }
.spine__subjects { font-size: .78rem; color: var(--text-faint); }
.spine__cta { margin-left: auto; align-self: center; color: var(--accent); font-size: 1.1rem; }

/* ---------- cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .9rem; margin-top: 1rem; }
.az-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .9rem; margin-top: .8rem; }
.azsection { max-width: var(--col); margin: 0 auto; padding: 1rem 1.25rem 1.4rem; }
.azletter {
  margin: 0; font-size: 1.5rem; color: var(--accent-2-strong);
  padding-bottom: .2em; border-bottom: 3px double var(--border-strong);
}
.card {
  display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.05rem 1.05rem;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); color: var(--text); }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.card h3 { margin: 0; font-size: 1.08rem; }
.card__blurb { margin: 0; color: var(--text-muted); font-size: .89rem; }
.card__stats { font-size: .8rem; color: var(--text-faint); }
.card__stats b { color: var(--text-muted); font-weight: 700; }
.card__cta { margin-top: auto; padding-top: .3rem; color: var(--accent); font-weight: 600; font-size: .87rem; }

.tag {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  padding: .12rem .45rem; border-radius: 3px; white-space: nowrap;
  background: var(--accent-2-soft); color: var(--accent-2-strong); border: 1px solid var(--accent-2);
}

.subject-group { max-width: var(--col); margin: 0 auto; padding: 1.6rem 1.25rem; }
.subject-group__head h2, .subject-group__head h3 {
  margin: 0 0 .2rem; font-size: 1.25rem; padding-bottom: .3em; border-bottom: 1px solid var(--border);
}
.subject-group__head p { margin: .45rem 0 0; color: var(--text-muted); font-size: .9rem; max-width: var(--measure); }

/* ---------- filter bar ---------- */
.filterbar { max-width: var(--col); margin: 1.4rem auto 0; padding: 0 1.25rem; }
.filterbar__label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); font-weight: 700; margin-bottom: .35rem; }
.filterbar__input {
  width: 100%; max-width: 26rem; font: inherit; font-size: 1rem;
  padding: .6rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg-elevated); color: var(--text);
}
.filterbar__input:focus { border-color: var(--accent); }
.filterbar__count { margin: .4rem 0 0; font-size: .84rem; color: var(--text-faint); min-height: 1.2em; }
.filter-empty { max-width: var(--col); margin: 0 auto; padding: 1rem 1.25rem 2rem; color: var(--text-muted); }

/* ---------- features / ways ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.3rem 1.6rem; margin-top: 1.2rem; }
.feature h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.feature h3::before { content: ""; display: block; width: 1.8rem; border-top: 2px solid var(--accent-2); margin-bottom: .45rem; }
.feature p { color: var(--text-muted); margin: 0; font-size: .91rem; }

.waylist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1.2rem; }
.way {
  display: block; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius);
  background: var(--bg-elevated);
}
.way:hover { border-color: var(--border-strong); border-left-color: var(--accent-strong); color: var(--text); }
.way h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.way p { margin: 0; color: var(--text-muted); font-size: .89rem; }

/* ---------- buttons / chips ---------- */
.btn {
  display: inline-block; padding: .62rem 1.15rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: .94rem; font-family: var(--sans);
  border: 1px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-strong); }
.btn--primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn--quiet { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text); }
.btn--quiet:hover { border-color: var(--accent); color: var(--accent-strong); }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1.2rem; }
.chip {
  display: inline-block; padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); text-decoration: none; font-size: .84rem;
}
.chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.pill {
  display: inline-block; padding: .15rem .55rem; border-radius: 3px; font-size: .76rem;
  background: var(--accent-soft); color: var(--text-muted); border: 1px solid var(--border);
}
.pill--quiet { background: transparent; }
.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.pager a { text-decoration: none; font-weight: 600; }
.pager__next { margin-left: auto; }

/* ---------- classes other generators emit that had no CSS anywhere ----------
   These are body-content classes on pages this file does not write, so the
   chrome harmonisation pass cannot reach them. Left undefined they degrade to
   raw inline text -- the supply pages were literally printing "10items to
   actually buy" and "3,422lessons analyzed", because .stat__num and
   .stat__label are spans and nothing had ever given them a box.

   gen_supplies.py's own header comment says it "reuses .stats-row/.stat as-is
   from the blocks above" -- but neither was ever actually defined here (the
   audit missed it because the names appear inside that very comment). Modelled
   on .ledger so the site's two totals strips read as the same object. */
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1rem 1.2rem; margin: 1.5rem 0; padding: 1.15rem 0;
  border-block: 1px solid var(--border);
}
.stat { text-align: center; }
.stat__num {
  display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 700;
  color: var(--accent); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.stat__label { display: block; color: var(--text-muted); font-size: .85rem; line-height: 1.35; }
.chip--sm { padding: .16rem .5rem; font-size: .74rem; cursor: help; }
/* The second, lesser buy link on a supply item ("or printer paper"). Without
   a rule it inherited .btn's transparent border and read as loose text. */
.btn--ghost {
  background: transparent; border-color: var(--border-strong); color: var(--link);
  font-weight: 600;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.tag--elective { background: var(--accent-2-soft); color: var(--accent-2-strong); border-color: var(--accent-2); }
.note { font-size: .89rem; color: var(--text-muted); max-width: var(--measure); }
.pager__prev { margin-right: auto; }
/* The Grades dropdown's <li>: a positioning context for its panel, and on a
   phone it must be able to grow to the full width of the open menu. */
.site-nav__grades { position: relative; }
/* gen_builder.py's two-column shell wants the full page measure, not the
   reading measure, or the sticky summary column has nowhere to sit. */
.fcc-wide { max-width: var(--page); }
.bld-steps { display: flex; flex-direction: column; gap: 1rem; }

/* ---------- ad slots ----------
   Deliberately unlike a download button: dashed hairline, sunken tint, no
   colour fill, a label above it, and never adjacent to the download grid. */
.fcc-ad {
  display: block; max-width: var(--col); margin: 2rem auto; padding: 1.5rem 1rem;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--bg-sunken); text-align: center; min-height: 6rem;
}
.fcc-ad__label {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint);
}

/* ---------- notices ---------- */
.notice {
  max-width: var(--col); margin: 1.4rem auto 0; padding: .9rem 1.1rem;
  background: var(--accent-2-soft); border: 1px solid var(--accent-2);
  border-left-width: 4px; border-radius: var(--radius);
}
.notice p { margin: 0 0 .5rem; font-size: .92rem; }
.notice .chip-row { margin: 0; }

/* ---------- tables ---------- */
/* `position: relative` is load-bearing, not decoration. The scope-and-sequence
   tables are wider than a 360px phone by design and scroll inside this box --
   but their cells contain `.visually-hidden` screen-reader spans, which are
   `position: absolute`. With no positioned ancestor those spans resolved
   against the initial containing block, so overflow clipping here did not
   apply to them: they stuck out to x=418 on a 360px viewport and dragged the
   whole document sideways, which BUILD-SPEC section 7 forbids ("the page body
   never scrolls sideways"). Making this the containing block puts them back
   inside the scroller. */
.table-scroll { position: relative; overflow-x: auto; margin: 1.1rem 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .92rem; }
caption { text-align: left; }
th, td { text-align: left; padding: .52rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  font-family: var(--serif); font-weight: 700; color: var(--text-muted); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--border-strong);
}
tbody tr:nth-child(odd) { background: var(--bg-tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scope tbody th, .courses tbody th { font-family: var(--sans); font-weight: 600; white-space: nowrap; }
.unit-derived { color: var(--text-muted); font-style: italic; }
.coursegrade h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.coursegrade h2 a { text-decoration: none; }
.coursegrade__stat { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--text-faint); letter-spacing: 0; text-transform: none; }
/* The course list drops its description column on a phone, so it no longer
   needs to scroll at all; the scope table keeps its columns and scrolls
   inside its own box rather than dragging the page sideways. */
@media (max-width: 640px) {
  .hide-narrow { display: none; }
  table { min-width: 22rem; }
  .courses { min-width: 0; }
}

/* ---------- unit accordions + table of contents ----------
   The dotted leader between a lesson title and its question count is the
   detail that makes this read like a book's contents page rather than a
   list of links. */
.fcc-unit-details {
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .55rem;
  background: var(--bg-elevated);
}
.fcc-unit-details summary {
  cursor: pointer; padding: .75rem .95rem; font-family: var(--serif); font-weight: 700;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
}
.fcc-unit-details summary::marker { color: var(--accent-2); }
.fcc-unit-details .count {
  font-family: var(--sans); font-weight: 400; color: var(--text-faint); font-size: .8rem;
  margin-left: auto;
}
.fcc-unit-details[open] summary { border-bottom: 1px solid var(--border); }
.unit-note { margin: .7rem .95rem 0; font-size: .88rem; }
.toc { list-style: none; margin: 0; padding: .55rem .95rem .9rem; }
.toc li { display: flex; align-items: baseline; gap: .5rem; padding: .16rem 0; font-size: .93rem; }
.toc__no {
  flex: 0 0 auto; min-width: 2.1ch; text-align: right; color: var(--text-faint);
  font-variant-numeric: tabular-nums; font-size: .8rem;
}
.toc__title { flex: 0 1 auto; }
.toc__dots { flex: 1 1 auto; min-width: 1.5rem; align-self: flex-end; border-bottom: 1px dotted var(--border-strong); transform: translateY(-.28em); }
.toc__q { flex: 0 0 auto; color: var(--text-faint); font-size: .78rem; font-variant-numeric: tabular-nums; }
.toc--plain li { padding: .2rem 0; }

/* ---------- the sample lesson, set like a leaf of the book ---------- */
.leaf {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem 1.4rem 1.7rem; margin-top: 1.1rem;
  box-shadow: var(--shadow);
}
.leaf__rule { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); border-radius: var(--radius) var(--radius) 0 0; }
.leaf__where { text-transform: uppercase; letter-spacing: .09em; font-size: .72rem; color: var(--accent-2-strong); font-weight: 700; margin: .3rem 0 .25rem; }
.leaf__title { margin: 0 0 .6rem; font-size: 1.5rem; }
.leaf__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.objectives { margin: 0 0 1.1rem; padding: .8rem 1rem; background: var(--bg-tint); border-radius: var(--radius); border: 1px solid var(--border); }
.objectives h4 { margin: 0 0 .35rem; font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-family: var(--sans); }
.objectives ul { margin: 0; }
.scripture {
  margin: 1.1rem 0; padding: .85rem 1.1rem; border-left: 3px solid var(--accent-2);
  background: var(--accent-2-soft); font-family: var(--serif); font-size: 1.02rem;
}
.scripture p { margin: 0; }
.scripture cite { display: block; font-style: normal; margin-top: .45rem; color: var(--text-muted); font-size: .82rem; font-family: var(--sans); }
.scripture-ref { color: var(--text-muted); font-size: .9rem; }
.prose { max-width: var(--measure); }
.prose h3, .prose h4, .prose h5, .prose h6 { margin-top: 1.5em; }
.prose blockquote { margin: 1em 0; padding: .6rem 1rem; border-left: 3px solid var(--border-strong); background: var(--bg-tint); }
.prose code { background: var(--bg-tint); padding: .1em .35em; border-radius: 3px; font-family: var(--mono); font-size: .9em; }
.guided { margin-top: 1.3rem; }
.guided ol { padding-left: 1.2em; }
.guided li { margin-bottom: .7rem; }
.gp__problem { font-weight: 600; margin-bottom: .25rem; }
.callout { margin: 1.2rem 0; padding: .85rem 1.05rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-tint); }
.callout h4 { margin: 0 0 .3rem; font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-family: var(--sans); }
.callout p { margin: 0; }
.callout--parent { border-left: 3px solid var(--accent); }
.callout--homework { border-left: 3px solid var(--accent-2); }
.callout--pending { border-left: 3px solid var(--accent-2); background: var(--accent-2-soft); }
.leaf__quiz { margin-top: 1.6rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.leaf__quiz h4 { font-size: .84rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-family: var(--sans); margin-top: .4rem; }
.qprev { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.qprev:last-of-type { border-bottom: none; }
.qprev__prompt { font-weight: 600; margin-bottom: .35rem; }
.qprev__options { margin: 0 0 .45rem; padding-left: 1.5em; color: var(--text-muted); }
.qprev__blank { color: var(--text-faint); font-style: italic; font-size: .9rem; }
.qprev__answer summary { cursor: pointer; color: var(--accent); font-size: .88rem; }
.qprev__explain { color: var(--text-muted); font-size: .9rem; }
.qprev__more { color: var(--text-faint); font-size: .88rem; font-style: italic; }

/* ---------- photos ---------- */
.photo { margin: 1.3rem 0; }
.photo img { display: block; width: 100%; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--bg-tint); }
.photo figcaption { margin-top: .45rem; display: flex; flex-direction: column; gap: .12rem; }
.photo__caption { font-family: var(--serif); font-style: italic; font-size: .92rem; color: var(--text-muted); }
.photo__credit { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.photo-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1.1rem 1.2rem; margin-top: 1.1rem; align-items: start;
}
.photo-strip .photo { margin: 0; }
/* A uniform crop keeps the strip tidy whatever shape the originals are;
   the full, uncropped photograph is in the lesson itself. */
.photo-strip .photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo--inline { max-width: 34rem; }
.credit-list { font-size: .86rem; color: var(--text-muted); }
.credit-list li { margin-bottom: .3rem; }

/* ---------- downloads ----------
   Solid, filled, badged, with the file name and its size. Nothing on this
   site looks like this except a real file. */
.download-lede { max-width: var(--measure); }
.dlgroup { margin-top: 1.8rem; }
.dlgroup h3 { margin: 0 0 .2rem; font-size: 1.12rem; }
.dlgroup > p { color: var(--text-muted); font-size: .9rem; max-width: var(--measure); margin: 0; }
.download-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .85rem; margin-top: .9rem; }
.btn-download {
  position: relative; display: flex; flex-direction: column; gap: .22rem;
  padding: .95rem 1.05rem .9rem; background: var(--accent); color: var(--on-accent);
  border: 2px solid var(--accent-strong); border-radius: var(--radius);
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.btn-download:hover { background: var(--accent-strong); color: var(--on-accent); box-shadow: var(--shadow); }
.btn-download--wide { grid-column: 1 / -1; }
.btn-download__badge {
  position: absolute; top: .7rem; right: .8rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .09em;
  padding: .1rem .35rem; border: 1px solid currentColor; border-radius: 3px; opacity: .85;
}
.btn-download__label { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; padding-right: 3.6rem; }
.btn-download__desc { font-size: .83rem; opacity: .93; }
.btn-download__file { font-size: .72rem; opacity: .8; font-family: var(--mono); margin-top: .2rem; overflow-wrap: anywhere; }
.btn-download__size { opacity: .85; }

/* ---------- footer ---------- */
.site-footer { border-top: 3px double var(--border-strong); margin-top: 3rem; padding: 2.3rem 1.25rem 1.6rem; background: var(--bg-tint); }
.site-footer__inner { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 2fr 1.1fr 1fr 1fr; gap: 1.8rem; }
.site-footer__col h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .6rem; border: none; box-shadow: none; padding: 0; color: var(--text-faint); font-family: var(--sans); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.site-footer__col a { color: var(--text); text-decoration: none; font-size: .9rem; }
.site-footer__col a:hover { color: var(--accent-strong); text-decoration: underline; }
.site-footer__col--brand p { color: var(--text-muted); font-size: .88rem; max-width: 44ch; }
.site-footer .brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; margin: 0 0 .5rem; display: block; }
.site-footer__grades li { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
.site-footer__band { font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; flex-basis: 100%; }
.site-footer__legalrow { max-width: var(--page); margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.site-footer__disclosure { font-size: .82rem; color: var(--text-muted); font-style: italic; margin: 0 0 .3rem; }
.site-footer__copy { font-size: .82rem; color: var(--text-faint); margin: 0; }
@media (max-width: 860px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .section, .page-head, .subject-group { padding-left: 1rem; padding-right: 1rem; }
  .leaf { padding: 1.1rem 1rem 1.3rem; }
}

/* ---------- download agreement gate ----------
   assets/fcc-gate.js builds this dialog on the fly on every page that offers
   downloads. Its markup lives in gen_legal.py and its ONLY other stylesheet,
   assets/fcc-legal.css, is loaded exclusively by the four legal/ pages -- so
   without these rules the agreement box rendered as an unstyled block glued
   to the bottom of the page and the download silently appeared to do
   nothing. Class names must stay in sync with fcc-gate.js. */
.fcc-gate-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 24, 30, .58);
  display: none; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto;
}
.fcc-gate-overlay.is-open { display: flex; }
.fcc-gate-dialog {
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 18px 46px rgba(0,0,0,.34);
  max-width: 34rem; width: 100%; padding: 1.6rem 1.5rem 1.4rem;
  margin: auto; line-height: 1.6;
}
.fcc-gate-dialog h2 {
  font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .6rem;
  border: none; box-shadow: none; padding: 0;
}
.fcc-gate-dialog p { margin: 0 0 1rem; }
.fcc-gate-agree {
  display: flex; align-items: flex-start; gap: .65rem;
  cursor: pointer; margin: 0 0 1.1rem;
}
.fcc-gate-agree input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin-top: .22rem; flex-shrink: 0;
}
.fcc-gate-status {
  font-size: .85rem; color: var(--text-muted); min-height: 1.2em; margin: 0 0 1rem;
}
.fcc-gate-error { color: var(--accent-strong); font-weight: 600; }
.fcc-gate-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.fcc-gate-btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: .95rem;
  padding: .62rem 1.15rem; border-radius: 5px; cursor: pointer;
  border: 1px solid transparent;
}
.fcc-gate-btn-primary { background: var(--accent); color: var(--on-accent); }
.fcc-gate-btn-primary:hover, .fcc-gate-btn-primary:focus { filter: brightness(1.08); }
.fcc-gate-btn-primary[disabled] { cursor: not-allowed; opacity: .5; filter: none; }
.fcc-gate-btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.fcc-gate-btn-ghost:hover, .fcc-gate-btn-ghost:focus { border-color: var(--accent); color: var(--accent-strong); }
@media (max-width: 480px) {
  .fcc-gate-dialog { padding: 1.2rem 1.05rem 1.1rem; }
  .fcc-gate-actions { flex-direction: column-reverse; }
  .fcc-gate-btn { width: 100%; text-align: center; }
}

/* ---------- misc ---------- */
.two-col { columns: 1; }
@media (min-width: 620px) { .two-col { columns: 2; column-gap: 2.2rem; } }
.two-col li { break-inside: avoid; margin-bottom: .3rem; }

/* ---------- print ---------- */
@media print {
  .masthead, .site-footer, .fcc-ad, .jumpnav, .filterbar, .theme-toggle,
  .nav-toggle, .breadcrumbs, .download-grid, .skip-link, .chip-row,
  .pager, .btn, .filter-empty, .fcc-gate-overlay { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  /* Headings and ledes carry their own token colours, which would otherwise
     print as washed-out grey-green on a home inkjet. Force real black. */
  main, .section, .page-head, .subject-group,
  h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd,
  blockquote, summary, figcaption, .lede, .eyebrow, .card, .spine { color: #000; }
  .photo__credit, .toc__no, .toc__q, .card__stats, .count { color: #444; }
  /* In-page jump links are dead ink on paper. */
  .scope td a[href^="#"], .toc__dots { display: none; }
  a { color: #000; text-decoration: none; }
  .section, .page-head, .subject-group, .hero__inner { max-width: none; padding: 0; border: 0; }
  h2 { border-bottom: 1px solid #000; box-shadow: none; page-break-after: avoid; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  .fcc-unit-details, .leaf, .card, .spine { border: 1px solid #999; box-shadow: none; page-break-inside: avoid; }
  details:not([open]) > *:not(summary) { display: block !important; }
  summary { list-style: none; }
  .toc__dots { border-bottom: 1px dotted #999; }
  table { min-width: 0; font-size: 9pt; }
  tbody tr:nth-child(odd) { background: transparent; }
  .photo { page-break-inside: avoid; }
  .photo__credit { color: #444; }

  /* The spec asks for black on white, but the tinted full-bleed bands were
     still printing as a solid parchment block behind the supply checklist --
     a whole page of wet ink on a home inkjet for no information at all.
     Nothing that is purely decorative tint should reach paper. */
  .section--alt, .section--download, .section--cta, .notice, .callout,
  .objectives, .leaf__quiz, .fcc-have-box, .fcc-disclosure, .stats-row,
  .fcc-checklist-group, .fcc-check-row, .card, .spine, .stat {
    background: transparent !important; box-shadow: none !important;
  }
  .stats-row { border-block: 1px solid #999; }

  /* The supply checklists are the one thing on this site that exists to be
     printed and carried to a shop, so the row must behave: box and name on
     one line, and never split an item across a page break. */
  .fcc-check-row { display: flex !important; flex-wrap: nowrap !important;
                   align-items: baseline; page-break-inside: avoid; gap: .5rem; }
  .fcc-check-row input[type="checkbox"] { flex: 0 0 auto; }
  .fcc-check-row .fcc-check-main { flex: 1 1 auto; min-width: 0 !important; }
  .fcc-check-row .fcc-buy-row { display: none !important; }
  .fcc-checklist-toolbar { display: none !important; }
}

/* ---------- grown-up: unit accordions and full lesson text ---------- */
.unitblock {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated); margin: 0 0 .55rem; overflow: hidden;
}
.unitblock > summary {
  cursor: pointer; padding: .8rem 1rem; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .5rem .8rem; list-style: none;
}
.unitblock > summary::-webkit-details-marker { display: none; }
.unitblock > summary::after {
  content: "+"; margin-left: auto; color: var(--text-faint); font-size: 1.1rem; line-height: 1;
}
.unitblock[open] > summary::after { content: "\2212"; }
.unitblock > summary:hover { background: var(--bg-tint); }
.unitblock__n {
  font-family: var(--serif); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent);
}
.unitblock__t { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.unitblock__c { font-size: .82rem; color: var(--text-faint); }
.unitblock__list { margin: 0; padding: 0 1rem 0 2.6rem; }
.unitblock__list li { padding: .18rem 0; font-size: .93rem; }
.unitblock__go { margin: .5rem 1rem 1rem; }

.lessonblock {
  border-top: 3px double var(--border-strong);
  padding-top: 1.4rem; margin: 2.2rem 0 0;
}
.lessonblock:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.lessonblock__n {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2-strong);
  margin: 0 0 .5rem;
}
.lessonblock .verse {
  margin: 0 0 1.1rem; padding: .7rem 1rem; border-left: 3px solid var(--accent-2);
  background: var(--accent-2-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.lessonblock .verse p { margin: 0; font-family: var(--serif); font-style: italic; }
.lessonblock .verse cite {
  display: block; margin-top: .35rem; font-style: normal; font-size: .85rem;
  color: var(--text-muted); font-family: var(--sans);
}
.quiz { margin: 1.4rem 0 0; padding: 1rem 1.1rem; background: var(--bg-sunken);
        border-radius: var(--radius); }
.quiz h3 { margin: 0 0 .7rem; font-size: 1rem; }
.quiz__list { margin: 0; padding-left: 1.3rem; }
.quiz__q { margin: 0 0 .9rem; }
.quiz__stem { margin: 0 0 .35rem; font-weight: 600; }
.quiz__opts { margin: 0 0 .35rem; padding-left: 1.4rem; }
.quiz__opts li { padding: .1rem 0; }
.quiz__ans > summary {
  cursor: pointer; font-size: .82rem; color: var(--link);
  font-family: var(--sans); display: inline-block;
}
.quiz__ans p { margin: .3rem 0 0; font-size: .9rem; }
@media print {
  .quiz__ans[open] > summary { display: none; }
  .unitblock { break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   Compatibility layer for the other generators in this multi-agent build.
   gen_legal.py (legal/ + supplies/ pages, and the fcc-gate.js download
   agreement widget) documents its expectation that the site-shell generator
   -- this file -- owns fcc.css and exposes a --fcc-* token contract plus a
   small set of .fcc-container/.fcc-nav/.fcc-crumbs/.fcc-footer/
   .fcc-callout/.fcc-disclosure component classes. These are pure aliases
   onto the same palette above, so every page in the site renders as one
   product regardless of which generator wrote it. DO NOT DELETE.
   --------------------------------------------------------------------- */
:root {
  --fcc-ink: var(--ink);
  --fcc-parchment: var(--parchment);
  --fcc-green: var(--green);
  --fcc-brass: var(--brass);
  --fcc-rule: var(--rule);
  --fcc-bg: var(--bg);
  --fcc-bg-raised: var(--bg-elevated);
  --fcc-bg-inset: var(--bg-sunken);
  --fcc-text: var(--text);
  --fcc-text-mute: var(--text-muted);
  --fcc-accent: var(--accent);
  --fcc-accent-2: var(--accent-2);
  --fcc-border: var(--border);
  --fcc-link: var(--link);
  --fcc-link-visited: #7d5a8a;
  --fcc-buy-bg: var(--accent);
  --fcc-buy-text: var(--on-accent);
  --fcc-have-bg: var(--bg-sunken);
  --fcc-have-border: var(--border);
  --fcc-shadow: var(--shadow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fcc-link-visited: #b9a6e0; }
}
:root[data-theme="dark"] { --fcc-link-visited: #b9a6e0; }

.fcc-container { max-width: 78ch; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.fcc-nav { background: var(--fcc-bg-raised); border-bottom: 1px solid var(--fcc-border); }
.fcc-nav-inner { max-width: 96ch; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.1rem; }
.fcc-brand { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--fcc-text); text-decoration: none; margin-right: auto; }
.fcc-nav-links { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; font-size: 0.92rem; }
.fcc-nav-links a { color: var(--fcc-text-mute); text-decoration: none; }
.fcc-nav-links a:hover, .fcc-nav-links a:focus { color: var(--fcc-accent); }
.fcc-crumbs { font-size: 0.85rem; color: var(--fcc-text-mute); margin: 0.75rem 0 0; }
.fcc-crumbs a { color: var(--fcc-text-mute); }
.fcc-footer { border-top: 1px solid var(--fcc-border); margin-top: 3rem; padding: 1.5rem 1.25rem 2.5rem; color: var(--fcc-text-mute); font-size: 0.88rem; }
.fcc-footer-inner { max-width: 96ch; margin: 0 auto; }
.fcc-footer a { color: var(--fcc-text-mute); }
.fcc-footer-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.6rem; }
.fcc-callout { border-left: 4px solid var(--fcc-accent); background: var(--fcc-bg-inset); padding: 0.9rem 1.1rem; border-radius: 0 6px 6px 0; margin: 1.25rem 0; }
.fcc-disclosure { background: var(--fcc-have-bg); border: 1px solid var(--fcc-have-border); border-left: 4px solid var(--fcc-accent-2); border-radius: 6px; padding: 0.75rem 1rem; font-size: 0.92rem; color: var(--fcc-text-mute); margin: 1rem 0 1.5rem; }
.fcc-disclosure strong { color: var(--fcc-text); }
.fcc-item-card { background: var(--fcc-bg-raised); border: 1px solid var(--fcc-border); border-radius: 8px; padding: 1rem 1.15rem 1.15rem; margin: 1.2rem 0; }
.fcc-item-card h4 { margin-top: 0; }
.fcc-check-name { font-weight: 600; }
@media (max-width: 480px) {
  .fcc-container { padding: 1rem 0.9rem 3rem; }
  .fcc-nav-inner { padding: 0.7rem 0.9rem; }
}
@media print {
  .fcc-nav, .fcc-footer, .fcc-disclosure, .no-print { display: none !important; }
}
/* === FCC-SITE-CSS:END === */

/* ==========================================================================
   Legal docs + download-agreement gate — additions from build/gen_legal.py
   (terms version 2026-08-10.1). Purely additive: new selectors only,
   nothing above this line is touched or overridden.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--fcc-accent-2);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }

.fcc-meta { color: var(--fcc-text-mute); font-size: 0.9rem; margin: 0 0 1.25rem; }

.fcc-toc {
  background: var(--fcc-bg-raised);
  border: 1px solid var(--fcc-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  box-shadow: var(--fcc-shadow);
}
.fcc-toc-label { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.9rem; }
.fcc-toc ol { margin: 0; padding-left: 1.25rem; columns: 1; }
@media (min-width: 640px) {
  .fcc-toc ol { columns: 2; column-gap: 1.5rem; }
}
.fcc-toc li { break-inside: avoid; margin-bottom: 0.3rem; }
.fcc-toc a { text-decoration: none; }
.fcc-toc a:hover, .fcc-toc a:focus { text-decoration: underline; }

.fcc-callout-urgent {
  border-left-color: var(--fcc-accent-2);
  background: var(--fcc-have-bg);
}

.fcc-gate-panel {
  background: var(--fcc-bg-raised);
  border: 1px solid var(--fcc-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin: 1.25rem 0;
  box-shadow: var(--fcc-shadow);
}
.fcc-gate-lead { margin-top: 0; font-weight: 600; }
.fcc-gate-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  margin: 0.75rem 0 1rem;
}
.fcc-gate-agree input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--fcc-accent);
}
.fcc-gate-downloads { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }
.fcc-gate-status { font-size: 0.9rem; color: var(--fcc-text-mute); min-height: 1.2em; margin: 0; }
.fcc-gate-error { color: #a4502a; font-weight: 600; }

.fcc-download-btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--fcc-buy-bg);
  color: var(--fcc-buy-text);
  cursor: pointer;
}
.fcc-download-btn:hover, .fcc-download-btn:focus { filter: brightness(1.08); }
.fcc-download-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  filter: none;
}

@media (max-width: 480px) {
  .fcc-gate-downloads { flex-direction: column; }
  .fcc-download-btn { width: 100%; text-align: center; }
}

@media print {
  .fcc-gate-panel, .fcc-toc, .skip-link { display: none !important; }
}


/* ==========================================================================
   Supply-list pages — additions from build/gen_supplies.py (Amazon
   affiliate supply lists: site/supplies/index.html + grade-{1,2,3}.html,
   plus the supply_box_html() fragment other generators can embed).
   Purely additive: new selectors only, nothing above this line is touched.

   Everything reusable (nav, footer, .section, .stats-row/.stat,
   .card-grid/.card, .btn/.btn--amazon/.btn--ghost, .chip, .fcc-ad,
   .fcc-disclosure, .two-col) is reused as-is from the blocks above — only
   the few concepts genuinely new to a supply page (an item card that isn't
   a single link, and a printable checkbox checklist) get new CSS here.
   ========================================================================== */

.fcc-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1rem 0 2rem;
}
.fcc-item-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.fcc-item-card h4 { margin: 0; font-family: var(--serif); font-size: 1.08rem; }
.fcc-item-card .fcc-item-desc { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.fcc-item-card .fcc-item-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fcc-item-card .fcc-qty { margin: 0; font-size: 0.88rem; }
.fcc-buy-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.fcc-no-buy { display: inline-block; font-size: 0.84rem; color: var(--text-muted); font-style: italic; }
.fcc-category-intro { color: var(--text-muted); }

/* ---- "already have" box ---- */
.fcc-have-box {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem 1.3rem;
  margin: 1.25rem 0 2rem;
}
.fcc-have-box h2 { margin-top: 0; border-bottom-color: var(--border); }

/* ---- printable checklist ---- */
.fcc-checklist-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.fcc-checklist-group { margin-bottom: 1.4rem; }
.fcc-checklist-group h3 {
  font-family: var(--sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
  margin: 0 0 0.5rem;
}
.fcc-check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.65rem;
  padding: 0.5rem 0.15rem;
  border-bottom: 1px dotted var(--border);
}
.fcc-check-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; accent-color: var(--accent); }
.fcc-check-row .fcc-check-main { flex: 1 1 auto; min-width: 220px; }
.fcc-check-row .fcc-check-name { font-weight: 600; }
.fcc-check-row .fcc-check-note { font-size: 0.84rem; color: var(--text-muted); display: block; }
.fcc-check-row .fcc-buy-row {
  /* basis accounts for its own margin-left so basis + margin never exceeds
     100% of the row — a plain "100%" here was overflowing the viewport by
     exactly the margin amount at narrow widths. */
  flex: 1 0 calc(100% - 1.15rem - 0.65rem);
  margin-left: calc(1.15rem + 0.65rem);
  margin-top: 0;
}
@media (min-width: 640px) {
  .fcc-check-row .fcc-buy-row { flex: 0 0 auto; margin-left: 0; }
}

@media print {
  .fcc-checklist-toolbar, .btn--amazon { display: none !important; }
  .fcc-item-card, .fcc-have-box { box-shadow: none; border: 1px solid #999; background: #fff; }
  .fcc-check-row { border-bottom: 1px solid #999; }
}