/* ============================================
   LESSON PAGES — clean figure-first layout (pilot: treble clef guide).
   Self-contained: its own tokens (mirrors the store palette), works with
   site-chrome.css (header/footer) and theme.njk (dark mode).
   Design model: a music-theory textbook page — the engraving leads,
   prose supports, one visual treatment per element type.
   ============================================ */

:root {
    --ink: #1c1917; --muted: #6b6560; --line: #e7e5e4; --bg: #fbfbfa; --card: #fff;
    --accent: #0d9488; --accent-dark: #0b7c72; --accent-soft: #f0fdfa;
    --amber: #b45309; --frame: #f5f4f2;
    --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    --sans: Inter, -apple-system, system-ui, sans-serif;
    --display: Fraunces, Georgia, serif;
}
body.dark-mode {
    --ink: #f5f5f4; --muted: #a8a29e; --line: #3a3633; --bg: #1a1817; --card: #242120;
    --accent: #2dd4bf; --accent-dark: #5eead4; --accent-soft: #132a27;
    --amber: #d9a066; --frame: #1f1d1c;
}

body { margin: 0; background: var(--bg); color: var(--ink);
    font-family: var(--sans); -webkit-font-smoothing: antialiased; }

/* 820px, not 680. The narrow measure was tuned for prose-only pages; on a
   figure-heavy guide it forces every example to full width, which is what
   made these pages one long vertical scroll of alternating text and
   pictures. A wider column lets a figure sit BESIDE its explanation.
   Prose blocks keep a comfortable measure via .lesson > p (below). */
.lesson { max-width: 820px; margin: 0 auto; padding: 0 22px; }

/* ---------- head: title, lede, byline — no hero, no buttons ---------- */

.lesson-head { padding: 30px 0 4px; }
.lesson-head h1 { font-family: var(--display); font-size: clamp(26px, 4.5vw, 34px);
    font-weight: 700; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 10px; }
.lesson-lede { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6;
    color: var(--ink); margin: 0 0 14px; }
.lesson-meta { display: flex; align-items: baseline; gap: 8px 18px; flex-wrap: wrap;
    font-size: .76rem; color: var(--muted); margin: 0 0 4px; padding-bottom: 14px;
    border-bottom: 1px solid var(--line); }
.lesson-meta strong { color: var(--muted); font-weight: 600; }
.lesson-meta a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.lesson-meta a:hover { text-decoration: underline; }

/* ---------- the pipeline: Learn -> Practice -> Download ---------- */

.pipeline { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    font-family: var(--sans); font-size: .8rem; margin: 12px 0 2px; padding-bottom: 2px; }
.pipeline::-webkit-scrollbar { display: none; }
.pl-step, .pl-arrow { flex: 0 0 auto; white-space: nowrap; }
.pl-step { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 11px;
    border: 1px solid var(--line); border-radius: 100px; color: var(--muted);
    text-decoration: none; }
.pl-step .pl-k { font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; }
.pl-step.on { background: var(--accent-soft); border-color: var(--accent);
    color: var(--ink); }
.pl-step.on .pl-k { color: var(--accent-dark); }
a.pl-step { color: var(--ink); }
a.pl-step .pl-k { color: var(--accent-dark); }
a.pl-step:hover { border-color: var(--accent); }
.pl-step a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.pl-step a:hover { color: var(--accent-dark); border-bottom-color: var(--accent-dark); }
.pl-arrow { color: var(--muted); }

/* ---------- body copy ---------- */

.lesson h2 { font-family: var(--display); font-size: 1.32rem; font-weight: 700;
    letter-spacing: -.01em; margin: 34px 0 8px; }
.lesson h2 .n, .lesson h3 .n { color: var(--accent-dark); margin-right: 6px; }
.lesson p { font-family: var(--serif); font-size: 1.04rem; line-height: 1.65;
    margin: 0 0 12px; }
.lesson p a, .lesson li a { color: var(--accent-dark); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px; }
.lesson ol, .lesson ul { font-family: var(--serif); font-size: 1.04rem; line-height: 1.65;
    margin: 0 0 12px; padding-left: 24px; }
.lesson li { margin-bottom: 6px; }
.go { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: .92rem;
    color: #fff; background: var(--accent-dark); padding: 9px 18px; border-radius: 8px;
    text-decoration: none !important; }
body.dark-mode .go { color: #0d2622; background: var(--accent); }
.go:hover { filter: brightness(1.08); }
.lesson p a.go { color: #fff; }
body.dark-mode .lesson p a.go { color: #0d2622; }
.lesson .aside { font-size: .92rem; color: var(--muted); }


/* ---------- generic lesson furniture (tables, subheads, note cards) ---------- */

.lesson h3 { font-family: var(--display); font-size: 1.08rem; font-weight: 700;
    margin: 20px 0 6px; }
.lesson .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; }
.lesson table { width: 100%; border-collapse: collapse; font-family: var(--sans);
    font-size: .9rem; line-height: 1.4; }
.lesson thead th { text-align: left; font-weight: 700; padding: 5px 12px 6px;
    border-bottom: 2px solid var(--muted); white-space: nowrap; }
.lesson tbody td { padding: 5px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lesson th:first-child, .lesson td:first-child { padding-left: 0; }
.lesson th:last-child, .lesson td:last-child { padding-right: 0; }
.lesson tbody tr:last-child td { border-bottom: none; }

.info-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin: 14px 0; }
.info-card.highlight { border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.info-card h4 { font-family: var(--sans); font-size: .92rem; font-weight: 700; margin: 0 0 6px; }
.info-card p:last-child, .info-card ul:last-child, .info-card ol:last-child { margin-bottom: 0; }

/* ---------- the example block: engraving + caption bar, one unit ---------- */

.ex { margin: 18px 0 22px; padding: 14px 16px 10px; background: var(--card);
    border: 1px solid var(--line); border-radius: 10px; }
.ex .guide-fig { max-width: 560px; margin: 0 auto; position: relative; }
.ex .guide-fig svg { display: block; width: 100%; height: auto; }
body.dark-mode .ex .guide-fig svg { filter: invert(.92) hue-rotate(180deg); }

.ex figcaption, .ex .guide-figcap { display: flex; align-items: baseline; gap: 6px 14px;
    flex-wrap: wrap; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line);
    font-family: var(--serif); font-size: .88rem; line-height: 1.45; color: var(--muted); }
.ex .mn { font-family: var(--display); font-style: normal; font-size: 1.02rem;
    font-weight: 700; color: var(--ink); }
.ex .gfig-play { margin-left: auto; order: 99; }

.gfig-play { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
    font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .03em;
    color: #fff; background: var(--accent-dark); border: none; border-radius: 100px;
    cursor: pointer; }
body.dark-mode .gfig-play { color: #0d2622; background: var(--accent); }
.gfig-play:hover { filter: brightness(1.08); }
.gfig-play:active { transform: translateY(1px); }

/* Note lit while its audio sounds (guide-figures / lesson-quiz) */
.gfig-hot path, .gfig-hot rect, .gfig-hot text { fill: #0d9488 !important; }
.gfig-hot path[stroke], .gfig-hot rect[stroke] { stroke: #0d9488 !important; }


/* ---------- "try it" quiz — interactive card, same family as .ex ---------- */

.try-it { max-width: 470px; margin: 18px auto 24px; padding: 12px 16px 12px;
    background: var(--accent-soft); border: 1px solid var(--line);
    border-radius: 12px; }
.ti-head { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 4px; }
.ti-label { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.ti-score { font-family: var(--sans); font-size: .78rem; font-weight: 700;
    color: var(--muted); font-variant-numeric: tabular-nums; }
.ti-body { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ti-stage { width: 190px; }
.ti-stage svg { display: block; }
body.dark-mode .ti-stage svg { filter: invert(.92) hue-rotate(180deg); }
.ti-right { flex: 1; min-width: 0; }
.ti-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.ti-btn { font-family: var(--sans); font-size: .95rem; font-weight: 700;
    color: var(--ink); background: var(--card); border: 1px solid var(--line);
    border-radius: 8px; width: 40px; height: 38px; cursor: pointer; }
.ti-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.ti-btn.ok { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.ti-btn.no { border-color: #dc2626; color: #dc2626; }
.ti-msg { font-family: var(--sans); font-size: .82rem; font-weight: 600;
    min-height: 1.2em; margin: 8px 0 0; color: var(--muted); }
.ti-msg.ok { color: var(--accent-dark); }
.ti-msg.no { color: #dc2626; }
.ti-right { width: 100%; }
.ti-btns { justify-content: center; }
.ti-msg { text-align: center; }

/* Hand-off panel after the three questions */
.ti-done-line { font-family: var(--serif); font-size: .96rem; line-height: 1.55;
    margin: 4px 0 10px; }
.ti-done-links { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.ti-go { font-family: var(--sans); font-size: .85rem; font-weight: 700; color: #fff;
    background: var(--accent-dark); padding: 8px 14px; border-radius: 8px;
    text-decoration: none; }
body.dark-mode .ti-go { color: #0d2622; background: var(--accent); }
.ti-go:hover { filter: brightness(1.08); }
.ti-shop { font-family: var(--sans); font-size: .82rem; font-weight: 700;
    color: var(--amber); text-decoration: none; }
.ti-shop:hover { text-decoration: underline; }
.ti-again { font-family: var(--sans); font-size: .78rem; font-weight: 600;
    color: var(--muted); background: none; border: 1px solid var(--line);
    border-radius: 100px; padding: 5px 12px; cursor: pointer; margin-left: auto; }
.ti-again:hover { color: var(--ink); border-color: var(--muted); }

/* ---------- numbered method steps (section 4) ---------- */

.steps { list-style: none; padding-left: 0 !important; counter-reset: step; }
.steps li { position: relative; padding-left: 40px; margin-bottom: 14px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-size: .95rem; font-weight: 700;
    color: var(--accent-dark); border: 1.5px solid var(--accent-dark); border-radius: 50%; }
.steps li strong { display: block; margin-bottom: 1px; }

/* ---------- closing matter: ruled off, subordinate to the lesson ---------- */

.next { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.next h2 { margin-top: 0; font-size: 1.14rem; }
.next p { margin-bottom: 10px; }

/* ---------- FAQ — same voice as the lesson, hairline-separated ---------- */

.lesson .faq { margin: 38px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.lesson .faq h2 { margin-top: 0; font-size: 1.14rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 10px 0 12px; }
.faq-item:last-of-type { border-bottom: none; }
.faq-item h3 { font-family: var(--serif); font-size: 1.02rem; font-weight: 700; margin: 0 0 4px; }
.faq-item p { font-family: var(--serif); font-size: .98rem; line-height: 1.6;
    color: var(--muted); margin: 0; }

.lesson .sources { font-size: .8rem; color: var(--muted); font-family: var(--sans);
    line-height: 1.6; margin: 22px 0 34px; }
.lesson .sources cite { font-style: italic; }

@media (max-width: 760px) {
    .lesson-head { padding-top: 22px; }
}

/* ---------- print: the page is the handout ---------- */

@media print {
    body { background: #fff !important; color: #000 !important; }
    header.site, footer.site-foot, .topic-band, .newsletter, .gfig-play,
    .go, #bmc-wbtn, iframe { display: none !important; }
    .lesson { max-width: none; padding: 0; }
    .ex, .faq-item { break-inside: avoid; }
    .ex { border-color: #bbb; }
    .lesson .faq, .next, .pipeline, .try-it { display: none; }   /* handout = the lesson itself */
    .lesson p, .lesson li { color: #000; }
    .ex .guide-fig svg { filter: none !important; }
    a { color: #000; text-decoration: none; }
}

/* ============================================
   PDF-PARITY BLOCKS (added 2026-07-25, owner item: the free guide should
   be as faithful to the paid PDF as the medium allows).

   These four treatments existed only in the PDF engine
   (product-guides/guide-engine.js + guides.css). Porting them here lets a
   /guides page carry the PDF's Learning Objectives, its table of
   contents, its right/wrong example pairs, and its closing self-check —
   so the free page and the paid page teach the same way, in the same
   order, with the same apparatus.
   ============================================ */

/* ---------- Learning Objectives / self-check ---------- */

.objectives {
    margin: 0;
    padding: 16px 18px;
    background: var(--frame);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
}
.objectives h2 {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin: 0 0 10px;
    border: 0;
    padding: 0;
}
.objectives ul { margin: 0; padding-left: 20px; }
.objectives li { margin: 0 0 5px; line-height: 1.45; font-size: .95rem; }
.objectives li::marker { color: var(--accent); }

/* Closing checklist — same box, but boxes the reader ticks rather than
   goals stated up front. Squares, not bullets. */
.selfcheck ul { list-style: none; padding-left: 2px; }
.selfcheck li { position: relative; padding-left: 26px; }
.selfcheck li::before {
    content: '';
    position: absolute;
    left: 0; top: .28em;
    width: 13px; height: 13px;
    border: 1.5px solid var(--muted);
    border-radius: 3px;
}

/* ---------- Contents (anchor list) ---------- */

.lesson-toc {
    margin: 0 0 30px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}
.lesson-toc h2 {
    font-family: var(--sans);
    font-size: .74rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 8px; border: 0; padding: 0;
}
.lesson-toc ol { margin: 0; padding-left: 20px; font-size: .95rem; }
.lesson-toc li { margin: 0 0 4px; }
.lesson-toc a { color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--line); }
.lesson-toc a:hover { border-bottom-color: var(--accent); color: var(--accent-dark); }

/* ---------- Right vs. wrong example pairs ---------- */

/* Mirrors the PDF exactly: CORRECT = solid border + solid badge.
   INCORRECT = dashed border + hollow badge + a large semi-transparent
   ISO 7010 P001 sign laid over the example. Shape carries the meaning,
   colour only reinforces it — so this still reads with colour off. */
.rw { display: grid; gap: 16px; margin: 18px 0 6px; }
@media (min-width: 620px) { .rw { grid-template-columns: 1fr 1fr; } }

/* .rw-item is the <figure>; .rw-ok/.rw-bad is the bordered FIELD inside
   it, with the caption below and OUTSIDE. That mirrors the PDF, and it
   keeps the large overlay sign centred on the engraving instead of
   drifting down over the caption text. */
.rw-item { margin: 0; }
.rw-ok, .rw-bad {
    position: relative;
    padding: 22px 12px 12px;
    border-radius: 8px;
}
.rw-ok  { border: 2px solid var(--ink);  background: var(--accent-soft); }
.rw-bad { border: 2px dashed var(--ink); background: #fdf2f2; }
body.dark-mode .rw-bad { background: #2a1c1c; }

.rw-ok::after, .rw-bad::after {
    position: absolute;
    top: -10px; left: 12px;
    padding: 2px 9px;
    border-radius: 4px;
    font-family: var(--sans);
    font-size: .66rem; font-weight: 800; letter-spacing: .06em;
}
.rw-ok::after  { content: '\2713  CORRECT'; background: var(--ink); color: var(--bg); }
.rw-bad::after { content: 'INCORRECT'; background: var(--card); color: var(--ink);
    border: 1.5px solid var(--ink); }

/* The overlay sign. Height is a percentage of the box and width is locked
   to it with aspect-ratio, so the ring is always a TRUE circle at any
   example width — the same reason the PDF uses a circle rather than a
   full-width bar. 26% opacity was chosen from a colour+grayscale draft.
   -45deg puts the bar upper-left to lower-right, per ISO 7010 P001. */
.rw-bad > .rw-sign, .rw-bad > .rw-sign::after {
    position: absolute;
    left: 50%; top: 50%;
    pointer-events: none;
    z-index: 2;
}
.rw-bad > .rw-sign {
    height: 74%;
    aspect-ratio: 1;
    border: 5px solid rgba(193, 18, 31, .26);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.rw-bad > .rw-sign::after {
    content: '';
    height: 100%;
    width: 5px;
    background: rgba(193, 18, 31, .26);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.rw figcaption {
    margin-top: 8px;
    font-size: .82rem;
    font-style: italic;
    color: var(--muted);
    text-align: center;
}


/* ============================================
   FIGURE-BESIDE-TEXT (2026-07-25, owner: "text should flow around the
   images and examples. No examples should be the full width.")

   EVERY example floats. Nothing spans the column on its own, because a
   full-width figure forces a hard stop in the reading and pushes the next
   paragraph a screen down — which is what made these pages feel like an
   endless scroll of alternating text and pictures.

   Three widths, chosen by how much horizontal room the ENGRAVING needs,
   not by importance:
     .ex           38%  one key signature — a clef and a few accidentals
     .ex-wide      56%  an eight-note scale; narrower and the noteheads
                        collide
     .rw           58%  a right/wrong PAIR, stacked inside the float so
                        each box still gets the full 58%

   Floats alternate left/right down the page (.ex-left) so the text column
   does not always sit on the same side.

   Under 760px everything un-floats to full width: a 38% figure on a phone
   is a stamp, and there is no room for text beside it anyway.
   ============================================ */

.ex, .ex-wide, .ex-side { margin: 4px 0 14px; }

@media (min-width: 760px) {
    .ex, .ex-side  { float: right; width: 38%; margin: 6px 0 16px 30px; }
    .ex-wide       { float: right; width: 56%; margin: 6px 0 16px 30px; }
    /* A right/wrong PAIR stays side by side INSIDE the float — stacking
       them made a tall column with dead space beside it, because these
       sections have little prose to wrap. Two small placement figures
       read fine at ~28% of the page each (they are a clef plus one or two
       accidentals). The "what's wrong" box spans both columns beneath. */
    .rw {
        /* LEFT, so the reading order is CORRECT -> INCORRECT -> WHAT'S
           WRONG. Floating right put the bullets before the examples;
           alternating put them beside the CORRECT box. Both read wrong. */
        float: left; width: 60%; margin: 6px 30px 18px 0;
        display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
        align-items: start;
    }
    /* Wide examples (an eight-note scale) cannot survive 28% — they stack
       in a wider float instead. */
    .rw.rw-stack { width: 68%; grid-template-columns: 1fr; }
    /* A solo example (no correct/incorrect partner) must not reserve an
       empty second column — that was leaving a gap between the figure and
       the bullets beside it. */
    .rw:has(> .rw-item:only-of-type) { width: 34%; grid-template-columns: 1fr; }

    .ex-left, .ex-wide.ex-left, .rw.ex-left {
        float: left; margin: 6px 30px 16px 0;
    }

    /* Structure must never ride up beside a float. */
    .lesson h2, .lesson h3, table, .objectives, .lesson-toc,
    .next, .faq, .sources, .ex-plate, .steps { clear: both; }
}

/* The one deliberate exception: a full-bleed reference PLATE (the All Keys
   chart lifted from the printed curriculum). It is a chart to be read, not
   an example to be explained, so there is no prose that wants to sit
   beside it. */
.ex-plate { margin: 18px 0 12px; }
.ex-plate img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

/* WHY a wrong example is wrong — the PDF's bulleted "What's wrong" box.
   A caption alone made the reader hunt for the error; this states it. */
/* overflow:hidden makes this a block formatting context, which is what
   lets it sit BESIDE a float instead of sliding underneath it. Without
   it the pink box would run under the floated example and only its text
   would wrap, leaving a void. This is the piece that makes the bullets
   act as the prose flowing around a right/wrong pair. */
.whats-wrong {
    overflow: hidden;
    margin: 10px 0 4px;
    padding: 10px 14px;
    border: 1.5px solid #c1121f;
    border-left: 5px solid #c1121f;
    border-radius: 6px;
    background: #fdf2f2;
    font-size: .9rem;
}
body.dark-mode .whats-wrong { background: #2a1c1c; }
.whats-wrong strong.ww-label {
    display: block;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c1121f;
    margin-bottom: 5px;
}
.whats-wrong ul { margin: 0; padding-left: 18px; }
.whats-wrong li { margin: 0 0 3px; line-height: 1.4; }


/* ============================================
   INTRO PAIR — Learning Objectives + Contents side by side.
   Stacked they were two heavy full-width boxes in a row before the reader
   reached any content (owner: "ugly big boxes stacked on each other").
   ============================================ */

.lesson-intro { margin: 22px 0 30px; }
@media (min-width: 780px) {
    .lesson-intro {
        display: grid;
        grid-template-columns: 1.35fr 1fr;   /* objectives are longer lines */
        gap: 20px;
        align-items: start;
    }
}
.lesson-intro .lesson-toc { margin: 0; }

/* Objectives + the closing self-check read as a CHECKLIST, not prose:
   square boxes a student can tick on a printout. Not interactive by
   design — this page prints as a music-stand reference. */
.objectives ul, .selfcheck ul { list-style: none; padding-left: 0; margin: 0; }
.objectives li, .selfcheck li {
    position: relative;
    padding-left: 26px;
    margin: 0 0 6px;
    line-height: 1.45;
    font-size: .93rem;
}
.objectives li::before, .selfcheck li::before {
    content: '';
    position: absolute;
    left: 0; top: .3em;
    width: 13px; height: 13px;
    border: 1.5px solid var(--accent);
    border-radius: 3px;
    background: var(--card);
}
.objectives li::marker { content: none; }

/* The closing self-check is a single narrow, centred block — full width
   made it look like a second lede. */
.selfcheck {
    max-width: 30rem;
    margin: 30px auto;
}
.selfcheck li::before { border-color: var(--muted); }

/* ============================================
   PIPELINE — Learn -> Practice -> Download. Same position, but this is
   the page's primary CTA and it was reading as a breadcrumb.
   ============================================ */

.pipeline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 18px 0 6px;
    padding: 14px 16px;
    background: var(--frame);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.pl-step {
    font-size: .95rem;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--line);
}
.pl-step.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pl-k {
    display: inline-block;
    font-family: var(--sans);
    font-size: .68rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
    margin-right: 6px;
}
.pl-step.on .pl-k { color: var(--accent-dark); }
.pl-arrow { color: var(--muted); font-size: 1.1rem; }
.pl-step a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.pl-step a:hover { text-decoration: underline; }
/* The buy step is the one that should catch the eye. */
.pl-buy, a.pl-buy {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.pl-buy .pl-k { color: rgba(255,255,255,.85); }
.pl-buy:hover { filter: brightness(1.08); }

/* ============================================
   TABLES — zebra rows + hover, so a 15-row chart can be read across.
   ============================================ */

.lesson table { border-collapse: separate; border-spacing: 0; }
.lesson thead th {
    position: sticky; top: 0;
    background: var(--card);
    border-bottom: 2px solid var(--accent);
    font-family: var(--sans);
    font-size: .72rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--accent-dark);
}
.lesson tbody tr:nth-child(odd) { background: var(--frame); }
.lesson tbody tr:hover { background: var(--accent-soft); }
.lesson tbody td { border-bottom: 1px solid var(--line); }
.lesson caption {
    caption-side: top;
    text-align: left;
    font-size: .85rem;
    color: var(--muted);
    padding-bottom: 8px;
}

/* Section 9's two full signatures: a plain pair at readable size, not a
   60% float split into two narrow columns. */
.ref-pair { display: grid; gap: 20px; margin: 16px 0 12px; clear: both; }
@media (min-width: 700px) { .ref-pair { grid-template-columns: 1fr 1fr; } }
.ref-pair figure { margin: 0; }


/* ============================================================
   TYPOGRAPHY SCALE (owner 2026-07-25: "hard on my eyes to distinguish
   sections"). The problem was that an h3 and an inline bold label were
   the same weight, size and family, so "Finding the major key" and
   "Sharp keys:" read as the same level. Each level now differs on TWO
   axes, not one.

     h2  display serif · 1.5rem · numbered · rule above   — a SECTION
     h3  display serif · 1.12rem · accent hairline under  — a sub-section
     h4  sans · .78rem · uppercase · letterspaced         — a label
     inline <strong> in a list — sans, ink, NOT a heading
   ============================================================ */

.lesson > h2, .faq > h2 {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 46px 0 14px;
    padding-top: 18px;
    border-top: 2px solid var(--ink);
    letter-spacing: -.015em;
}
.lesson > h2 .n {
    display: inline-block;
    min-width: 1.15em;
    color: var(--accent-dark);
    font-variant-numeric: tabular-nums;
}
.lesson > h3 {
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 700;
    margin: 26px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
}
.lesson h4 {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 20px 0 6px;
}
/* An inline label inside a list is NOT a heading — keep it sans and
   normal-ink so it never competes with an h3 above it. */
.lesson li > strong:first-child { font-family: var(--sans); font-size: .95em; }

/* ============================================================
   ACCIDENTALS IN PROSE. The Unicode ♭/♯/♮ render at full cap-height in
   the serif body face, with a wide sidebearing — so "G♭" looked like two
   letters rather than a note name. Smaller, raised, and pulled tight.
   ============================================================ */
.acc {
    font-family: var(--sans);
    font-size: .82em;
    line-height: 1;
    vertical-align: .1em;
    margin-left: -.04em;
    letter-spacing: 0;
}

/* ============================================================
   FIGURE + TABLE NUMBERING — textbook convention, via CSS counters so
   no markup churn and renumbering is automatic.
   ============================================================ */
.lesson { counter-reset: figno tblno; }
.lesson figure { counter-increment: figno; }
.lesson figcaption::before {
    content: 'Figure ' counter(figno) '. ';
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent-dark);
    font-style: normal;
    margin-right: .35em;
}
/* Right/wrong pairs are ONE figure conceptually — the CORRECT/INCORRECT
   badges already label them, so a number on each half is noise. */
.lesson .rw-item { counter-increment: none; }
.lesson .rw-item figcaption::before { content: none; }
.lesson table { counter-increment: tblno; }
.lesson caption::before {
    content: 'Table ' counter(tblno) '. ';
    font-family: var(--sans);
    font-size: .72rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent-dark);
    margin-right: .35em;
}

/* ============================================================
   GOING FURTHER — an aside for the curious, visibly OPTIONAL so a
   struggling reader knows they can skip it.
   ============================================================ */
.going-further {
    clear: both;
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 8px 8px 0;
    font-size: .92rem;
}
.going-further .gf-label {
    display: block;
    font-family: var(--sans);
    font-size: .68rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent-dark);
    margin-bottom: 4px;
}
.going-further p { margin: 0; }

/* ============================================================
   PIPELINE v2 — three explicit steps on one rail. The old version read
   as a breadcrumb; this reads as a path with a destination.
   ============================================================ */
.pipeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    margin: 20px 0 4px;
    padding: 0;
    background: none;
    border: 0;
}
.pl-step {
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: .95rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pl-step.on {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: none;
}
.pl-k {
    font-family: var(--sans);
    font-size: .64rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    margin: 0;
}
.pl-step.on .pl-k { color: var(--accent-dark); }
.pl-arrow { display: flex; align-items: center; padding: 0 10px; color: var(--line); font-size: 1.2rem; }
.pl-step a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.pl-step a:hover { text-decoration: underline; }
/* The destination. White on the dark accent — the old amber-on-teal
   failed contrast badly. */
a.pl-buy, .pl-buy {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(13,148,136,.28);
}
a.pl-buy .pl-k, .pl-buy .pl-k { color: rgba(255,255,255,.9); }
a.pl-buy:hover { filter: brightness(1.08); text-decoration: none; }
@media (max-width: 700px) {
    .pipeline { grid-template-columns: 1fr; gap: 8px; }
    .pl-arrow { display: none; }
}

/* ============================================================
   CTA GRID — replaces the old "How to Learn Them" prose list.
   ============================================================ */
.cta-grid { display: grid; gap: 14px; margin: 22px 0 8px; clear: both; }
@media (min-width: 780px) { .cta-grid { grid-template-columns: repeat(3, 1fr); } }
.cta-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    transition: transform .12s ease, box-shadow .12s ease;
}
.cta-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.09); }
.cta-kick { font-family: var(--sans); font-size: .64rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cta-title { font-family: var(--display); font-size: 1.06rem; font-weight: 700; line-height: 1.2; }
.cta-body { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.cta-go { margin-top: auto; font-family: var(--sans); font-size: .84rem;
    font-weight: 700; color: var(--accent-dark); }
.cta-primary { border-color: var(--accent); background: var(--accent-soft); }
.cta-buy { border-color: var(--amber); }
.cta-buy .cta-go, .cta-buy .cta-kick { color: var(--amber); }

/* ============================================================
   FAQ — an accordion-ish list of cards rather than a wall of prose.
   ============================================================ */
.faq { clear: both; margin-top: 40px; }
.faq-item {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    margin-bottom: 10px;
}
.faq-item h3 {
    font-family: var(--sans);
    font-size: .98rem; font-weight: 700;
    margin: 0 0 6px; padding: 0; border: 0;
    color: var(--ink);
}
.faq-item h3::before { content: 'Q '; color: var(--accent); font-weight: 800; }
.faq-item p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* Reference pair figures must not inherit the 38% float. */
.ref-pair figure { float: none !important; width: auto !important; margin: 0 !important; }

/* Pairs alternate again, and the inner order flips so the WHAT'S WRONG
   box is always adjacent to the INCORRECT example (owner ruling). */
@media (min-width: 760px) {
    .rw.rw-flip { float: right; margin: 6px 0 18px 30px; }
    .rw.rw-flip .rw-item:first-child { order: 2; }
}

/* Restrained elevation. Hairline shadows only — enough to lift a card off
   the page, never enough to look like a template. Print strips them. */
.ex-plate img, .rw-ok, .rw-bad { box-shadow: 0 1px 3px rgba(0,0,0,.05); }
@media print {
    .cta-card, .faq-item, .pl-step, .ex-plate img,
    .rw-ok, .rw-bad, .a-pl-buy { box-shadow: none !important; }
}


/* Boxed-panel headings are LABELS, not sections — they must never pick up
   the numbered-section rule (border-top + 1.5rem) applied to .lesson > h2. */
.lesson .objectives > h2,
.lesson .lesson-toc > h2 {
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}
.lesson .objectives > h2 { color: var(--accent-dark); }
.lesson .lesson-toc > h2 { color: var(--muted); }

/* The Practice step holds two links — keep them on one line each and stop
   the separator stranding itself. */
.pl-step .pl-links { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.pl-sep { color: var(--line); }


/* ============================================================
   ADVERSARIAL-REVIEW PASS (2026-07-25). Web-development, teaching and
   search-intent defects found by reviewing the finished page against
   best practice rather than against the brief.
   ============================================================ */

/* ---- 1. THE SHORT ANSWER. Someone arriving from "how do you tell what
   key a signature is in" should not have to scroll seven sections to the
   rule. Answer first, then teach — the inverted pyramid. It also gives
   the featured-snippet crawler one tight, quotable block. ---- */
.short-answer {
    margin: 20px 0 6px;
    padding: 16px 18px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 12px;
}
.short-answer > strong {
    display: block;
    font-family: var(--sans);
    font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent-dark);
    margin-bottom: 8px;
}
.short-answer ul { list-style: none; margin: 0; padding: 0; }
/* Each rule is a GRID row: label column, text column. An inline-block
   label only aligns the first line — every wrapped line fell back to the
   box edge, which read as broken styling (owner, round 4). */
.short-answer li {
    display: grid;
    grid-template-columns: 6.4em 1fr;
    gap: 2px 12px;
    align-items: baseline;
    font-family: var(--serif);
    font-size: 1rem; line-height: 1.5;
    margin: 0 0 8px; padding-left: 0;
}
.short-answer li:last-child { margin-bottom: 0; }
.short-answer .sa-k {
    font-family: var(--sans);
    font-size: .66rem; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: var(--accent-dark);
    padding-top: .1em;
}
.short-answer .sa-v { min-width: 0; }
@media (max-width: 560px) {
    .short-answer li { grid-template-columns: 1fr; gap: 0; }
}

/* ---- 2. WORKED EXAMPLE. "Go up a half step from the last sharp" is a
   procedure; a reader needs to watch it run once. Three numbered chips,
   readable at a glance, no notation required. ---- */
.worked { clear: both; margin: 16px 0 18px; }
.worked-row {
    display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.wk {
    flex: 1 1 0; min-width: 150px;
    padding: 11px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: var(--serif);
    font-size: .93rem; line-height: 1.4;
}
.wk b {
    display: block;
    font-family: var(--sans);
    font-size: .62rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 3px;
}
.wk-out { background: var(--accent-soft); border-color: var(--accent); }
.wk-out b { color: var(--accent-dark); }
.wk-arrow { display: flex; align-items: center; color: var(--line); font-size: 1.2rem; }
@media (max-width: 620px) { .wk-arrow { display: none; } }

/* ---- 3. RETRIEVAL PRACTICE. Reading a rule is not learning it; the
   testing effect is the best-evidenced thing on this page, and the
   widget was loaded but never used. Key-signature mode needs wider
   buttons than the seven-letter note row. ---- */
.try-it { clear: both; max-width: none; }
@media (min-width: 760px) {
    .try-it { max-width: 470px; }
    /* Float it like an example so the surrounding prose still wraps —
       "no element is ever full width" applies to the quiz too. */
    .try-it.ti-float { float: right; width: 42%; margin: 6px 0 18px 30px; }
    .try-it.ti-float.ex-left { float: left; margin: 6px 30px 18px 0; }
}
.ti-btns-wide { gap: 8px; }
.ti-btn-wide {
    width: auto; min-width: 74px; padding: 0 12px;
    font-size: .9rem;
}

/* ---- 4. CLS. Every engraving renders client-side into an empty div, so
   19 figures each pop in and shove the page down. Reserve a floor until
   the SVG lands. ---- */
.guide-fig:not([data-gfig-done]) { min-height: 4.5rem; }

/* ---- 5. Motion. Card lifts are decoration; honour the OS setting. ---- */
@media (prefers-reduced-motion: reduce) {
    .cta-card { transition: none; }
    .cta-card:hover { transform: none; }
}

/* ---- 6. A print control is an ACTION, not a link. Was an href="javascript:"
   URI, which is a CSP hazard and the wrong semantics for assistive tech. ---- */
.linkish {
    font: inherit;
    color: var(--accent-dark);
    background: none; border: 0; padding: 0;
    text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    cursor: pointer;
}
.linkish:hover { color: var(--ink); }

/* ---- 7. Callouts. Eight consecutive grey .aside paragraphs stopped
   reading as asides and started reading as washed-out body text. The two
   that carry a RULE are promoted to a real callout; the rest stay prose. ---- */
.keynote {
    clear: both;
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--frame);
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
}
.keynote > strong:first-child {
    display: block;
    font-family: var(--sans);
    font-size: .68rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent-dark);
    margin-bottom: 4px;
}
.keynote p { margin: 0; font-size: .96rem; }

/* ---- 8. Visually-hidden text (the updated-date label, and anywhere a
   ::after badge is the only thing carrying meaning). ---- */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 9. The 15-row table is four columns wide with nowrap headers. It
   overflowed the viewport on a phone. ---- */
.lesson .table-scroll { clear: both; }
.lesson .table-scroll table { min-width: 30rem; }

@media print {
    .try-it, .short-answer .sa-more { display: none !important; }
    .worked, .keynote, .short-answer { break-inside: avoid; }
}

/* ============================================================
   OWNER REVIEW, ROUND 4 (2026-07-25).
   ============================================================ */

/* ---- SPACING RULE OF THUMB: sibling BLOCKS (boxes, figures, pairs)
   get at least one full line of body text between them — 26px. Prose
   paragraphs keep their tighter 12px rhythm; the 26px floor applies the
   moment either neighbour is a boxed element. Section 6's what's-wrong
   box was 10px above the next CORRECT box, which read as one unit. ---- */
.whats-wrong { margin: 12px 0 26px; }
.keynote, .going-further, .worked { margin-top: 22px; margin-bottom: 26px; }
.rw, .rw.rw-flip { margin-bottom: 22px; }
.try-it { margin-bottom: 26px; }

/* ---- The 15-keys table: identity columns first, the long accidentals
   run last, and the whole chart capped — full measure made 4 short
   columns float apart. ---- */
/* Shrink-to-content and centred on large screens (owner, round 5): at
   width:100% the four short columns floated apart and the accidentals
   column absorbed all the leftover space. width:auto sizes every column
   to its content; margin:auto centres the block. Mobile keeps 100%
   inside .table-scroll. */
.lesson table.t-keys th:last-child, .lesson table.t-keys td:last-child { white-space: nowrap; }
@media (min-width: 760px) {
    .lesson table.t-keys {
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .lesson table.t-keys th, .lesson table.t-keys td { padding-left: 16px; padding-right: 16px; }
    .lesson table.t-keys th:first-child, .lesson table.t-keys td:first-child { padding-left: 12px; }
}

/* ---- Worked-flow chips can carry a real engraved signature: the point
   is reading the SIGNATURE, not a list of accidental names. The text
   list demotes to a small caption under the staff. ---- */
.wk-fig .guide-fig { max-width: 150px; margin: 2px 0 3px; }
.wk-fig .guide-fig svg { display: block; width: 100%; height: auto; }
body.dark-mode .wk-fig .guide-fig svg { filter: invert(.92) hue-rotate(180deg); }
.wk-cap { display: block; font-size: .8rem; color: var(--muted); }

/* ---- Try-it: it has to LOOK interactive before it's touched. A pill in
   the header names the affordance; a hint line tells you what to do.
   Buttons get a visible border + shadow so they read as buttons on a
   phone, where there is no hover. ---- */
.ti-head { border-bottom: 1px dashed var(--accent); padding-bottom: 6px; margin-bottom: 8px; }
.ti-pill {
    display: inline-block;
    font-family: var(--sans);
    font-size: .58rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff; background: var(--accent-dark);
    padding: 2px 8px; border-radius: 100px;
    margin-left: 8px; vertical-align: .16em;
}
body.dark-mode .ti-pill { color: #0d2622; background: var(--accent); }
.ti-hint {
    font-family: var(--sans);
    font-size: .76rem; color: var(--muted);
    margin: 0 0 8px; text-align: center;
}
.ti-btn { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ti-btn:active { transform: translateY(1px); box-shadow: none; }

/* ============================================================
   UNDER-CONSTRUCTION BADGE (owner, 2026-07-25 round 7). First-pass
   guides carry this pill until the owner approves their content.
   ON APPROVAL, per guide: delete the .wip-pill span and restore the
   byline to `By Ramsey Castaneda, DMA` (see GUIDE-LAYOUT.md).
   ============================================================ */
.wip-pill {
    display: inline-block;
    font-family: var(--sans);
    font-size: .6rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--amber); border: 1.5px solid var(--amber);
    border-radius: 100px; padding: 1px 9px;
    vertical-align: .12em;
}
@media print { .wip-pill { display: none; } }