/* The shared frame for every lesson page.
 *
 * Lessons sit on the apex beside /resources and /standards, so the frame — the
 * header, the display face, the brick and tan palette — is the site's. What
 * differs is the middle of the page, and deliberately: a resource page is
 * skimmed by an adult deciding whether to download something, and a lesson is
 * READ, at length, by a student who is learning to read music at the same time.
 *
 * Adding a lesson means writing lessons/<slug>/index.html against the classes
 * below and adding the record to src/lesson-content.js. It should not mean
 * editing this file.
 */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/big-shoulders-display-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/big-shoulders-display-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/barlow-condensed-700-latin.woff2") format("woff2");
}

:root {
  /* The apex palette, same values as /resources and /standards. */
  --warm-white: #fafaf9;
  --white: #fff;
  --ink: #171717;
  --ink-soft: #4f4a47;
  --brick: #8b3a3a;
  --brick-deep: #6d2d2d;
  --forest: #456a38;
  --tan: #d2b48c;
  /* MEASUREMENT INK. --tan is 1.97:1 on white and --line is 1.41:1, and both
     were drawing shapes a reader has to see to follow a figure: the tempo
     ladder's range bars, the one-beat spans in Triplets, the halving chart,
     the leaders that say which label names which part. WCAG 1.4.11 asks 3:1 of
     a graphic required to understand the content, and those were failing it by
     more than half.

     This is --tan taken down the same hue to 45% lightness, which lands at
     3.88:1 — clear of the bar with room, and still recognisably the tan the
     rest of the site uses. Decorative rules keep --tan and --line; anything
     that carries an argument takes this. */
  --measure: #a57940;
  --tan-light: #f1e6d5;
  --terra: #e2725b;
  --line: #ded9d0;
  --shadow: 0 18px 50px rgba(23, 23, 23, .09);

  --display: "Big Shoulders Display", "Barlow Condensed", Impact, sans-serif;
  --label: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;

  /* Body copy is NOT Barlow Condensed, which is what the rest of the site uses.
     This is the same call brs-print.css makes for printed sheets, for the same
     reason and from the same source: the Brand Guide asks for "a clean, highly
     legible sans-serif" for content, and Production Format Standards is blunter
     — "Avoid: serif fonts, script fonts, condensed fonts." Condensed type at
     reading size is where low-vision legibility fails first.
 
     A resource page can afford it: it is a page of headings and short blurbs a
     teacher skims. A lesson cannot. It is several hundred words of continuous
     prose aimed at a student who is decoding music notation on the same screen.
     Headings, labels and the frame stay condensed, so the page still reads as
     ours at a glance. */
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Staff figures. --rule is what a staff line and a notehead are drawn in:
     pure black, never the brand silver, following the ink rule the print
     standard paid for with a photocopier proof. */
  --rule: #000;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.65;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brick-deep); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; }

.skip-link {
  position: absolute; z-index: 20; top: -80px; left: 16px;
  padding: 12px 16px; background: var(--ink); color: #fff; font-weight: 800;
}
.skip-link:focus { top: 16px; }

/* --- frame ---------------------------------------------------------------- */

.site-header, .site-footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
/* Narrower than the frame. A lesson is a reading column; 1120px of prose is a
   line length nobody finishes. */
.wrap { width: min(760px, calc(100% - 40px)); margin-inline: auto; }

.site-header {
  min-height: 84px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand > span {
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--brick); color: #fff; border: 3px solid var(--ink);
  font-family: var(--display); font-size: 22px; line-height: 1;
}
.brand strong { font-family: var(--display); font-size: 24px; text-transform: uppercase; letter-spacing: .5px; }
.header-links, .site-footer nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.header-links a, .site-footer a { font-family: var(--label); font-size: 16px; font-weight: 700; }
.header-links a[aria-current="page"] { color: var(--brick); }

.site-footer {
  display: flex; justify-content: space-between; gap: 28px;
  margin-top: 40px; padding: 30px 0 42px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 15px;
}
.site-footer > div { display: flex; gap: 9px; flex-wrap: wrap; }
.site-footer strong { color: var(--ink); }

/* --- headings and prose --------------------------------------------------- */

h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; text-wrap: balance; margin-top: 0; }
h1 { margin-bottom: 18px; font-size: clamp(44px, 7vw, 76px); line-height: .9; letter-spacing: .5px; }
h2 { margin-bottom: 14px; font-size: clamp(30px, 4vw, 42px); line-height: .95; }
h3 { margin-bottom: 8px; font-size: 23px; line-height: 1.1; }

p { margin: 0 0 16px; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--label);
  color: var(--brick-deep); font-size: 14px; font-weight: 700;
  letter-spacing: 1.7px; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 24px; height: 4px; background: var(--terra); flex: 0 0 auto; }
.lede { color: var(--ink-soft); font-size: clamp(19px, 2.2vw, 22px); line-height: 1.6; }

.lesson-hero { padding: 64px 0 34px; }
.lesson-hero h1 em { color: var(--brick); font-style: normal; }
.lesson-count { color: var(--ink-soft); font-size: 16px; }

.wrap section { padding: 34px 0; border-top: 1px solid var(--line); }
.wrap section:first-of-type { border-top: 0; }

ul, ol { margin: 0 0 16px; padding-left: 24px; }
li { margin-bottom: 8px; }
li::marker { color: var(--brick); font-weight: 700; }

.button {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  padding: 12px 18px;
  background: var(--brick-deep); border: 2px solid var(--brick-deep); color: #fff;
  font-family: var(--label); font-weight: 700; font-size: 17px;
  text-decoration: none; text-align: center;
}
.button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- the teaching devices ------------------------------------------------- */

/* A staff figure. The SVG comes from BrsStaff, so nothing here decides where a
   clef sits — this only says what color it is drawn in and how much room it
   gets. Height is capped rather than fixed: the renderer crops its viewBox to
   the ink, and a treble clef reaches 4.39 staff spaces above the line it names,
   so different figures are legitimately different shapes. */
.figure { margin: 0 0 20px; padding: 18px 16px; background: var(--white); border: 1px solid var(--line); }
.figure svg { width: 100%; max-height: 210px; margin-inline: auto; }
.brs-staff-line, .brs-staff-ledger { stroke: var(--rule); stroke-width: 1.4; }
.brs-staff-clef, .brs-staff-accidental, .brs-staff-notehead { fill: var(--rule); }
.figure figcaption { margin-top: 12px; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }

/* Letters and numbers drawn into a staff figure. Positioned by figures.js from
   BrsStaff's own yForStep; this only says how they look.

   Lines in ink, spaces in the brick accent — the device the Theory Reference
   poster for this topic already uses, so the wall and the screen teach the
   alternation the same way. Color is never the only channel: a letter on a
   line is visibly on a line, and the figure's aria-label spells both rows out
   in order. */
.fig-letter { font-family: var(--display); font-size: 20px; font-weight: 800; }
.fig-letter-line { fill: var(--ink); }
.fig-letter-space { fill: var(--brick); }
.fig-mark { font-family: var(--label); font-size: 15px; font-weight: 700; }
.fig-mark-line { fill: var(--ink); }
.fig-mark-space { fill: var(--brick); }
/* Paints the staff line out behind a number so the number stays readable. */
.fig-chip { fill: var(--white); }

/* The systemic barline that joins a grand staff, /lessons/staff-road-map/.
   It carries .brs-staff-line as well, so it has always been drawn — but at
   plain staff-line weight, which is not what a system barline is. Engraving
   makes it heavier than the staff lines it spans, because its job is to say
   "these two staves are one system" at a glance. Ordered after the
   .brs-staff-line rule so the heavier weight wins on equal specificity. */
.fig-system { stroke-width: 2.6; }

/* ---------------------------------------------------------------------------
   Rhythm cells, /lessons/sixteenth-rhythms/.

   These shipped invisible-in-part and it is worth saying why, because the
   failure mode is not obvious: an SVG <rect> and <circle> default to a black
   fill, so beams, dots and counting text appeared and looked finished, while
   <line> defaults to `stroke: none` — so every stem and every slot guide was
   in the DOM, correctly positioned, and drawing nothing at all. The page read
   as noteheads floating under beams.

   The offline tests did not catch it because they assert the ELEMENTS exist and
   sit where the engraving says. Nothing asked whether they would be painted.
   tests/lessons.test.mjs now checks that every class the figures emit has a
   rule here, which is the cheap version of that question. */
/* The shared rhythm renderer, assets/notation/rhythm.js. Noteheads, rests,
   flags and the augmentation dot are Bravura outlines and so are filled paths;
   stems and beams are ruled, which is why one takes a stroke and the other a
   fill. An SVG <line> with no stroke is invisible, which is how every stem on
   this page once shipped missing. */
.brs-rhythm-notehead, .brs-rhythm-rest, .brs-rhythm-flag, .brs-rhythm-dot { fill: var(--rule); }
.brs-rhythm-beam { fill: var(--rule); }
.brs-rhythm-stem { stroke: var(--rule); stroke-width: 2; }

/* The value table and halving chart, /lessons/notes-and-rests/. A table rather
   than a rhythm, so it carries labels the cell figures do not. */
/* `.figure svg` sets a 210px ceiling that suits a staff — one wide, short
   image. A value table is tall, and the ceiling squashed it to a third of its
   size. Qualified with the element so it outranks that rule rather than
   quietly losing to it on specificity, which is how it shipped small once. */
.figure svg.fig-values { max-height: none; }
.fig-value-name { font-family: var(--display); font-size: 21px; font-weight: 800; fill: var(--ink); }
.fig-value-beats { font-family: var(--label); font-size: 17px; font-weight: 700; fill: var(--ink-soft); }
/* Separators between rows of a table, not part of any claim the table makes —
   which is why these keep --line while the shapes above took --measure. */
.fig-row-rule { stroke: var(--line); stroke-width: 1; }
/* The line each rest is placed against, so "hangs below" and "sits above" are
   things a reader can see rather than take on trust. Drawn as a staff line
   would be, because that is what it stands for. */
.fig-rest-line { stroke: var(--rule); stroke-width: 1.4; }

/* Halving drawn as width: each bar is as long as its value lasts, so two
   quarters visibly fill one half. Alternating fills keep adjacent bars apart
   without adding a border that would read as notation. */
.fig-span { fill: var(--tan-light); stroke: var(--measure); stroke-width: 1; }
.fig-span-label { font-family: var(--label); font-size: 14px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
.fig-span-name { font-family: var(--label); font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: end; }

.fig-slot { stroke: var(--measure); stroke-width: 1; stroke-dasharray: 3 4; }

/* The counting row. A slot with a note starting on it is in full ink; a slot
   without one is softened but never dropped — the lesson's whole claim is that
   you count all four either way, so making the silent ones invisible would
   have the figure arguing the opposite of the page. */
.fig-count { font-family: var(--label); font-size: 16px; font-weight: 700; }

/* ---------------------------------------------------------------------------
   Time Signatures.

   The numerals are Bravura outlines and take the same fill as every other
   glyph on the site — a time signature is notation, not a caption, and the one
   place it must not look like typography is the lesson explaining what it
   means. */
.fig-ts-digit { fill: var(--ink); }
.fig-ts-label { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); }
/* The bracket labels under the compound figure sit under their own span, so
   they center; the leader labels in the anatomy figure start at their line. */
.fig-ts-compound .fig-ts-label { text-anchor: middle; }
.fig-ts-count { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
/* Leaders and brackets are <line>, which defaults to `stroke: none` — the
   exact way the sixteenth-note stems shipped invisible. */
.fig-ts-leader { stroke: var(--measure); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fig-ts-bracket { stroke: var(--rule); stroke-width: 1.2; }

/* Three of these are taller than the 210px ceiling `.figure svg` sets for a
   single staff. Qualified with the element so they outrank it rather than
   losing on specificity, which is how the value table shipped squashed. */
.figure svg.fig-ts-units, .figure svg.fig-ts-cut, .figure svg.fig-ts-compound { max-height: none; }
.fig-count-on { fill: var(--ink); }
.fig-count-off { fill: var(--ink-soft); }

/* A one-beat cell is much wider than tall, so the shared 210px figure ceiling
   leaves it floating in whitespace. */
.fig-cell { max-height: 132px; }
.fig-column-label { font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: 0.8px; fill: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   Rolls & Marks.

   The slashes and the articulation marks are Bravura outlines and they are the
   subject of the page, so they take full ink rather than the softer rule color
   the staff itself is drawn in — the same choice the time-signature numerals
   make for the same reason. Where they sit is decided in figures.js from the
   glyphs' own measured ink; nothing here moves them.

   Both label rows are centered in the stylesheet rather than by an offset in the
   markup, so a longer label stays under its own note instead of drifting. */
.fig-roll-slash, .fig-roll-mark { fill: var(--ink); }
.fig-roll-label { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.fig-roll-count { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }

/* ---------------------------------------------------------------------------
   Triplets & Duplets.

   The number over the bracket is a Bravura outline and takes full ink, because
   it is the claim the page is about. The bracket, the beat spans and the
   leaders are <line> — which defaults to `stroke: none`, the exact way the
   sixteenth-note stems once shipped invisible — so every one of them is given
   a stroke here.

   The beat spans are the figure's argument drawn as a measurement, so they are
   deliberately quieter than the notation: a reader should see two rules of
   equal length under the notes, not a second layer of engraving. */
.fig-tup-number { fill: var(--ink); }
.fig-tup-bracket { stroke: var(--ink); stroke-width: 1.6; }
.fig-tup-span { stroke: var(--measure); stroke-width: 1.4; }
.fig-tup-leader { stroke: var(--measure); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fig-tup-label { font-family: var(--label); font-size: 14px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
/* The two leaders in the anatomy figure point away from the group, so their
   labels run away from it too rather than back across the notes. */
.fig-tup-lead-left { text-anchor: end; }
.fig-tup-lead-right { text-anchor: start; }
/* The count. The syllable that names the beat carries full ink and the ones
   between it do not — the page's point is that the numbers stay put and only
   what falls between them changes, so the row has to show which is which. */
.fig-tup-count { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
.fig-tup-count-beat { fill: var(--ink); }

/* ---------------------------------------------------------------------------
   Tempo Terms.

   Two of these figures are charts rather than notation — a ladder of ranges and
   three rows of beat ticks — so they take the measurement palette the halving
   chart in Notes & Rests uses: tan for the thing being measured, rule weight
   for the axis it is measured against. The notehead and the fermata are
   Bravura outlines and take full ink, because a metronome mark is notation.

   Every rule here is a <line> or a <rect> and both default to no paint at all,
   which is exactly how the sixteenth-note stems once shipped invisible. */
.fig-tempo-bar { fill: var(--tan-light); stroke: var(--measure); stroke-width: 1.2; }
.fig-tempo-axis { stroke: var(--rule); stroke-width: 1.2; }
/* The rule the beat ticks sit on. The ticks are --brick at 7.6:1 and they are
   what the figure is counting; this only shows where a row runs to, and the
   caption says the same thing in words. Decoration, so it stays light. */
.fig-tempo-track { stroke: var(--line); stroke-width: 1.2; }
.fig-tempo-beat { fill: var(--brick); }
.fig-tempo-leader { stroke: var(--measure); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fig-tempo-notehead, .fig-tempo-fermata { fill: var(--ink); }
.fig-tempo-stem { fill: var(--ink); }

.fig-tempo-term { font-family: var(--display); font-size: 21px; font-weight: 800; fill: var(--ink); text-anchor: end; }
.fig-tempo-character { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); text-anchor: start; }
.fig-tempo-bpm { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); text-anchor: end; }
.fig-tempo-tick { font-family: var(--label); font-size: 13px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
.fig-tempo-axis-label { font-family: var(--label); font-size: 14px; font-weight: 700; letter-spacing: 0.6px; fill: var(--ink-soft); text-anchor: middle; }
.fig-tempo-number { font-family: var(--label); font-size: 34px; font-weight: 700; fill: var(--ink); text-anchor: start; }
.fig-tempo-label { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); }
.fig-tempo-lead-left { text-anchor: end; }
.fig-tempo-lead-right { text-anchor: start; }

/* The ladder is a tall chart, not a wide staff, so the 210px ceiling `.figure
   svg` sets would squash it — the same way it once squashed the value table. */
.figure svg.fig-tempo-ladder, .figure svg.fig-tempo-seconds { max-height: none; }

/* ---------------------------------------------------------------------------
   Rhythms in Three.

   The time signature numerals are Bravura outlines and take full ink, the same
   choice the Time Signatures lesson makes for the same reason. The count row is
   soft except where a beat is a rest, which is the one place the count says
   something the notation does not show: a number in parentheses is a beat that
   is there and silent.

   The sticking row is the poster's own rule drawn as two letters, and it is
   deliberately quieter than the count — it is one common system, not the
   reading. */
.fig-three-digit { fill: var(--ink); }
.fig-three-count { font-family: var(--label); font-size: 16px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.fig-three-count-rest { fill: var(--ink-soft); }
.fig-three-stick { font-family: var(--display); font-size: 17px; font-weight: 800; fill: var(--brick); text-anchor: middle; }

/* Three and four staves stacked, well past the 210px ceiling `.figure svg` sets
   for one wide staff — the same override the value table and the tempo ladder
   need, and for the same reason. */
.figure svg.fig-three-split, .figure svg.fig-three-syncopated,
.figure svg.fig-three-spellings, .figure svg.fig-three-beaming { max-height: none; }

/* ---------------------------------------------------------------------------
   Dynamics & Accents.

   The markings are Bravura's dynamic letters and take full ink — a dynamic is
   notation, and the one place it must not look like italic body text is the
   lesson explaining what it means.

   Hairpins and the ladder's wedge are <line> and default to no stroke at all,
   which is how the sixteenth-note stems once shipped invisible. The wedge under
   the ladder is deliberately quieter than a hairpin: it is a reading aid for
   the row above it, not a marking anybody plays. */
.fig-dyn-mark, .fig-dyn-accent { fill: var(--ink); }
.fig-dyn-hairpin { stroke: var(--ink); stroke-width: 1.6; }
.fig-dyn-wedge { stroke: var(--measure); stroke-width: 1.4; }

.fig-dyn-italian { font-family: var(--display); font-size: 19px; font-weight: 800; fill: var(--ink); text-anchor: middle; }
.fig-dyn-meaning { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--ink-soft); text-anchor: middle; }
.fig-dyn-term { font-family: var(--display); font-size: 21px; font-weight: 800; fill: var(--ink); text-anchor: start; }
.fig-dyn-axis { font-family: var(--label); font-size: 14px; font-weight: 700; letter-spacing: 0.6px; fill: var(--ink-soft); text-anchor: middle; }
.fig-dyn-note { font-family: var(--label); font-size: 15px; font-weight: 700; fill: var(--brick); text-anchor: middle; }

/* The ladder is a six-column row and the hairpins are two stacked rows; both
   are taller than the 210px ceiling `.figure svg` sets for one wide staff. */
.figure svg.fig-dyn-ladder, .figure svg.fig-dyn-hairpins,
.figure svg.fig-dyn-accent-figure, .figure svg.fig-dyn-sudden { max-height: none; }

/* The memory sentences. Set apart because a student comes back to look these up
   and should be able to find them without re-reading the paragraph. The letters
   are the point, so they carry the weight and the sentence supports them. */
.mnemonic { margin: 0 0 16px; padding: 18px 20px; background: var(--tan-light); border-left: 6px solid var(--forest); }
.mnemonic > :last-child { margin-bottom: 0; }
.mnemonic dt { font-family: var(--label); font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); }
.mnemonic dd { margin: 4px 0 14px; }
.mnemonic dd:last-of-type { margin-bottom: 0; }
.mnemonic b { font-family: var(--display); font-size: 26px; letter-spacing: 2px; color: var(--brick); }
.mnemonic .alt { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 16px; }

/* One idea worth stopping on. Four of these carry the poster's own callouts. */
.callout { margin: 0 0 16px; padding: 18px 20px; background: var(--white); border: 2px solid var(--ink); }
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: 6px; font-size: 20px; }

/* --- the four faces ------------------------------------------------------- */

.faces { background: var(--white); }
.faces-lede { color: var(--ink-soft); }
.face-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.face {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; background: var(--warm-white);
  border: 1px solid var(--line); border-top: 6px solid var(--forest);
}
.face p { margin: 0; }
.face h3 { margin: 0; }
.face .button { margin-top: auto; }
.face-kind { font-family: var(--label); color: var(--brick-deep); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.face-meta { color: var(--ink-soft); font-size: 15px; }

/* The face you are already on. Marked rather than omitted: the point being made
   is that this page is one of four, which is hard to see if one of the four is
   missing. */
.face-current { border-top-color: var(--brick); background: var(--tan-light); }
.face-here { font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 14px; color: var(--brick-deep); }

/* A face that does not exist yet. Dashed, greyed, and carrying its reason — the
   one thing it must never do is look like a button that failed to load. */
.face-gap { border: 1px dashed var(--tan); border-top: 6px dashed var(--tan); }
.face-gap h3 { color: var(--ink-soft); }
.face-pending { font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; font-size: 14px; color: var(--ink-soft); }

/* A drill that covers part of the topic, not a face of its own — so it does not
   get the border treatment the four faces share. */
.face-note { border-top: 1px solid var(--line); background: var(--tan-light); }
.face-note p:not(.face-kind) { color: var(--ink-soft); font-size: 16px; }

/* --- the index ------------------------------------------------------------ */

.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 26px 0 0; padding: 0; list-style: none; }
.topic { padding: 24px; background: var(--white); border: 1px solid var(--line); border-left: 7px solid var(--line); }
.topic-live { border-left-color: var(--brick); }
.topic h3 { margin-bottom: 8px; }
.topic > p { color: var(--ink-soft); font-size: 16px; }
.topic-state { margin: 0 0 10px; font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); }
.topic-live .topic-state { color: var(--brick-deep); }
.topic-faces { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; }
.topic-faces li { margin: 0; }
.topic-faces a { font-weight: 700; }
.topic-gap { color: var(--ink-soft); font-style: italic; }
.topic-note { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; font-style: italic; }

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 760px) {
  .site-header, .site-footer, .wrap { width: min(100% - 24px, 1120px); }
  .site-header { padding: 14px 0; }
  .brand strong { display: none; }
  .face-grid, .topic-grid { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  .lesson-hero { padding-top: 44px; }
}

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

/* --- print ---------------------------------------------------------------- */

/* A lesson is a screen artifact and this is not the print standard — a sheet
   students write on is built from brs-print.css in the app that generates it.
   This is only so that a teacher who hits Print gets something readable rather
   than a wall of white-on-brick and a dead nav. Deliberately small: forking the
   print foundation into a second repo is how two standards start. */

/* ---------------------------------------------------------------------------
   The lesson plan, /lessons/<slug>/plan/.

   Designed for the tray first. A teacher meets this page once on a screen and
   then prints it, so the screen layout is the print layout with color: one
   column, no cards, nothing that reflows into a second sheet. The timing rail
   down the left is the one piece of chrome that earns its ink — it is what a
   teacher's eye lands on mid-period, and it is the reason the blocks are an
   <ol> rather than a grid. */
.plan .lesson-hero { padding-bottom: 4px; }
.plan-back { margin: 18px 0 0; font-family: var(--label); font-weight: 700; }

/* The other plan for this topic. Above the back-link because it is the more
   useful jump: a director who opened the wrong one wants the other one, not
   the lesson. It carries the blurb rather than just the label, because "Review"
   alone does not say it is twenty minutes. */
.plan-sibling {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: var(--tint, #f4f0e8);
  border-left: 3px solid var(--line);
  font-size: 0.9rem;
}
.plan-sibling a { font-family: var(--label); font-weight: 700; }

.plan-materials, .plan-lookfor, .plan-criteria,
.plan-support, .plan-extension, .plan-access {
  margin: 0; padding-left: 20px; display: grid; gap: 9px;
}
.plan-materials li, .plan-lookfor li, .plan-criteria li,
.plan-support li, .plan-extension li, .plan-access li { padding-left: 2px; }

/* The four single-paragraph fields. Each answers a question a teacher asks in a
   different moment — before the bell, at the door, and mid-period when it is
   going wrong — so they are set apart from the lists around them rather than
   reading as one more bullet. */
.plan-prereq, .plan-evidence, .plan-observes, .plan-contingency {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--tint, #f4f0e8);
  border-left: 3px solid var(--line);
}
.plan-contingency { margin: 14px 0 0; }
.plan-prereq strong, .plan-evidence strong,
.plan-observes strong, .plan-contingency strong { font-family: var(--label); }

/* Sub-headings inside a plan section. The section headings are the teacher's
   landmarks; these sit under them and must not compete. */
.plan h3 { font-family: var(--label); font-size: 0.92rem; margin: 18px 0 9px; }

/* The standards disclosure.

   A toggle on screen so the teaching stays first — a director opening this
   before a period wants the forty-five minutes, not the citations. It reads as
   a quiet line rather than a section heading for the same reason. */
.plan-standards {
  margin: 28px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.plan-standards > summary {
  cursor: pointer;
  padding: 12px 2px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.92rem;
}
.plan-standards > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.standards-list { margin: 0 0 4px; padding: 0 0 8px; }
.standards-list dt { margin: 14px 0 4px; }
.standards-list dt code {
  font-size: 0.86rem;
  background: var(--tint, #f4f0e8);
  border: 1px solid var(--line);
  padding: 2px 7px;
}
.standards-list dd { margin: 0 0 6px; }
.standard-text { font-style: italic; }
.standard-where strong { font-family: var(--label); font-style: normal; }
.standards-source { margin: 10px 0 12px; font-size: 0.82rem; color: var(--muted, #6b6560); }
.standards-source a { overflow-wrap: anywhere; }

.plan-blocks { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.plan-block {
  position: relative;
  padding: 18px 0 18px 108px;
  border-top: 1px solid var(--line);
}
.plan-block:first-child { border-top: 0; }
.plan-block h3 { margin: 0 0 8px; font-size: 22px; }
.plan-block p { margin: 0; }

/* The rail. Absolute so the block's prose keeps one measure regardless of how
   long the move's name is — "Immediate evidence and next move" and "Model and establish target" have to line up. */
.plan-move {
  position: absolute; left: 0; top: 18px; width: 92px;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.1px; font-size: 13px; color: var(--brick-deep);
}
.plan-minutes {
  font-size: 26px; line-height: 1; letter-spacing: 0;
  font-family: var(--display); color: var(--brick);
}
.plan-link { margin-top: 10px !important; font-family: var(--label); font-weight: 700; }
.plan-link a { color: var(--brick-deep); }

@media (max-width: 560px) {
  .plan-block { padding-left: 0; padding-top: 12px; }
  .plan-move { position: static; width: auto; flex-direction: row; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .plan-minutes { font-size: 20px; }
}

/* A plan-ready topic is the strongest state on the index, so it reads as one.
   Same treatment as .topic-live plus the brick rule, rather than a new color:
   the list has three states and only two of them need to be told apart at a
   glance — teachable tomorrow, and not. */
.topic-plan { border-top-color: var(--brick); }
.topic-plan .topic-state { color: var(--brick-deep); }

/* Said once, on the page it applies to. A generated topic page has faces and a
   plan but no prose, and a reader who arrived expecting a lesson deserves to be
   told rather than left to infer it from a short page. */
.topic-unwritten {
  margin: 18px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--tan-line, var(--tan));
  background: var(--tan-light); color: var(--ink-soft);
  font-size: 16px;
}

@media print {
  @page { size: letter portrait; margin: 0.6in; }
  body { background: #fff; font-size: 11.5pt; line-height: 1.45; }
  .wrap, .site-header, .site-footer { width: auto; }
  .site-header, .site-footer nav, .skip-link { display: none; }
  .wrap section { padding: 12px 0; break-inside: avoid; }
  h1 { font-size: 26pt; }
  h2 { font-size: 17pt; }
  .figure { border-color: #000; break-inside: avoid; }
  .fig-letter-line, .fig-letter-space, .fig-mark-line, .fig-mark-space { fill: #000; }
  .fig-roll-slash, .fig-roll-mark, .fig-roll-label, .fig-roll-count { fill: #000; }
  .fig-tup-number, .fig-tup-label, .fig-tup-count, .fig-tup-count-beat { fill: #000; }
  .fig-three-digit, .fig-three-count, .fig-three-count-rest { fill: #000; }
  .fig-dyn-mark, .fig-dyn-accent, .fig-dyn-italian, .fig-dyn-meaning,
  .fig-dyn-term, .fig-dyn-axis, .fig-dyn-note { fill: #000; }
  .fig-tempo-term, .fig-tempo-character, .fig-tempo-bpm, .fig-tempo-tick,
  .fig-tempo-axis-label, .fig-tempo-number, .fig-tempo-label,
  .fig-tempo-notehead, .fig-tempo-fermata, .fig-tempo-stem { fill: #000; }
  .fig-chip { fill: #fff; }
  .figure svg { max-height: 150px; }
  .callout, .mnemonic { border-color: #000; break-inside: avoid; }
  .face-grid { grid-template-columns: 1fr 1fr; }
  .face .button { display: none; }
  /* The plan prints as the working document it is: the rail keeps its position
     so timings stay scannable on paper, and each block is kept whole. A block
     split across a page break is the one failure that makes the sheet useless
     mid-period. */
  .plan-block { break-inside: avoid; padding: 10pt 0 10pt 86pt; }
  .plan-move { top: 10pt; width: 78pt; font-size: 9.5pt; }
  .plan-minutes { font-size: 17pt; }
  .plan-block h3 { font-size: 13.5pt; }
  .plan-materials, .plan-lookfor, .plan-criteria,
  .plan-support, .plan-extension, .plan-access { gap: 5pt; }
  /* Printed, these are read once before the period rather than scanned during
     it, so they lose the tint and keep only the rule that groups them. */
  .plan-prereq, .plan-evidence, .plan-observes, .plan-contingency {
    background: none; padding: 4pt 0 4pt 8pt; margin-bottom: 8pt;
  }
  .plan h3 { margin: 10pt 0 5pt; }
  /* On paper the other plan is a URL nobody can click, so it reads as a line of
     text rather than as a button. */
  .plan-sibling { background: none; padding: 0 0 0 8pt; font-size: 9pt; }

  /* Printed, the disclosure is not a control — it is a section, and it must be
     there whether or not the person printing thought to open it first. The
     printed plan is the copy that goes in a walkthrough folder, and a collapsed
     toggle on paper is a blank space where the citations should be. */
  .plan-standards > *:not(summary) { display: revert !important; }
  .plan-standards > summary { list-style: none; padding: 0; margin: 0 0 6pt; }
  .plan-standards > summary::-webkit-details-marker { display: none; }
  .plan-standards { break-inside: avoid; margin-top: 14pt; }
  .standards-list dt code { background: none; }
  /* A printed link that cannot be clicked should still be readable, and these
     are the two the citations depend on. */
  .standards-source a::after { content: ""; }
  .plan-back { display: none; }
  /* Printed, a link's address is the only part that survives. */
  .face::after, .topic-faces a::after { content: ""; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}