/* /practice, the free courses.
 *
 * Additive only. Everything this file can borrow from nbop.css it borrows:
 * .wrap, .pagehead, .eyebrow, .standfirst, .action and the :root tokens are all
 * defined there and are not redefined here. What is left is the handful of
 * shapes the courses need and the rest of the site does not: a lesson rail, a
 * lesson body, the firewall note, the next-step cards and the book block.
 *
 * Class names are namespaced under their block where nbop.css already uses the
 * bare word. .step in particular exists there for something else, so the course
 * version is only ever addressed as .nextsteps .step.
 */

/* ---------- course layout ---------- */

.coursewrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

@media (max-width: 60rem) {
  .coursewrap { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; }
}

/* ---------- the rail ---------- */

/* Free to browse, nothing locked. A course that gates lesson four has decided
   its reader is a lead rather than a reader. */
.rail {
  position: sticky;
  top: 1.5rem;
  font-size: .9rem;
  border-right: 1px solid var(--rule-soft);
  padding-right: 1.25rem;
}
@media (max-width: 60rem) {
  .rail {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0 0 1.25rem;
  }
}

.rail .railtop {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--signal);
  margin-bottom: 1rem;
}

.rail .raildiag {
  display: block;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  padding: .7rem .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: 1.5rem;
}
.rail .raildiag:hover, .rail .raildiag:focus { background: #0D1E38; }

.rail .railparts { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rail .part { margin-bottom: 1.4rem; }
.rail .part .partname {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .55rem;
}
.rail .part ul { list-style: none; margin: 0; padding: 0; }
.rail .part li { margin: 0; }
.rail .part a {
  display: block;
  padding: .32rem 0 .32rem .75rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.35;
}
.rail .part a:hover, .rail .part a:focus { color: var(--ink); border-left-color: var(--ink-faint); }
.rail .part a.on {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--signal);
}

/* ---------- the lesson ---------- */

.lesson { min-width: 0; padding-bottom: 3rem; }
.lesson > h1 { margin: .35rem 0 0; }
.lesson .standfirst { margin-top: 1rem; }

.lesson .prose { max-width: var(--measure); margin-top: 2rem; }
.lesson .prose p { margin: 0 0 1.15rem; line-height: 1.62; }
.lesson .prose p:first-child { font-size: 1.06rem; }

/* The instrument aside that used to sit here moved into .lessonhead at the top
   of the page. Its rules are gone rather than left behind, because nothing
   carries class="instrument" any more and a reset with no markup to reset is
   just a trap for whoever reads this next. See "the lesson head" below. */

/* ---------- video ---------- */

/* The video is never the only carrier of a lesson. Everything it says is in the
   prose above it, so a reader who never presses play loses nothing, and the
   transcript is on the page as text rather than only as a caption track. */
.lessonvideo { margin: 2rem 0 0; max-width: var(--measure); }
.lessonvideo video {
  width: 100%; height: auto; display: block;
  background: var(--navy);
  aspect-ratio: 16 / 9;
}
/* Caption text is the one thing on the page that has to survive a phone at
   arm's length, so it is set larger than the browser default and on a solid
   ground rather than the translucent one Chrome ships. */
.lessonvideo video::cue {
  font-family: var(--ui);
  font-size: .92em;
  line-height: 1.4;
  background: rgba(13, 30, 56, .88);
  color: #fff;
}
.lessonvideo figcaption { margin-top: .7rem; font-size: .92rem; }
.lessonvideo .vmeta { margin: 0 0 .6rem; color: var(--ink-faint); line-height: 1.5; }
.lessonvideo summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; }
.lessonvideo summary:hover { color: var(--ink); }
.lessonvideo .transcript {
  margin-top: .75rem; padding: 1.1rem 1.25rem;
  background: var(--paper-cream);
  line-height: 1.65; color: var(--ink-soft);
}
.lessonvideo .transcript p { margin: 0 0 .9rem; }
.lessonvideo .transcript p:last-child { margin-bottom: 0; }

/* ---------- moving through ---------- */

.lessonnav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}
.lessonnav a {
  text-decoration: none; color: var(--ink); font-weight: 600; line-height: 1.3;
  max-width: 45%;
}
.lessonnav a span {
  display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500; margin-bottom: .2rem;
}
.lessonnav .next { text-align: right; margin-left: auto; }
.lessonnav a:hover, .lessonnav a:focus { color: var(--signal-ink); }

/* ---------- the firewall ---------- */

/* Not small print. This is the reason the credential is worth anything, so it
   is set as a statement at reading size. */
.firewall {
  max-width: var(--measure);
  margin: 3rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  background: var(--paper);
}
.firewall h2 {
  font-size: .95rem; margin: 0 0 .5rem; letter-spacing: 0; text-transform: none;
}
.firewall h2::before { content: none; }
.firewall p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* ---------- next steps ---------- */

.nextsteps { margin: 3rem 0 0; max-width: var(--measure); }
.nextsteps h2 { margin-bottom: 1.25rem; }
.nextsteps .steps { display: grid; gap: .85rem; }
.nextsteps .step {
  display: block; text-decoration: none;
  padding: 1.1rem 1.35rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.nextsteps .step:hover, .nextsteps .step:focus { border-color: var(--ink-faint); }
.nextsteps .step.primary { border-left: 3px solid var(--signal); background: var(--paper-cream); }
.nextsteps .step .n {
  display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .35rem;
}
.nextsteps .step strong { display: block; font-size: 1.05rem; line-height: 1.35; }
.nextsteps .step .sub { display: block; margin-top: .4rem; color: var(--ink-soft); line-height: 1.55; }
.nextsteps .alsoread { margin-top: 1rem; color: var(--ink-soft); }

/* ---------- the book ---------- */

.bookblock {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem;
  align-items: start;
  margin: 3rem 0 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}
@media (max-width: 34rem) { .bookblock { grid-template-columns: 1fr; } }
.bookblock .cover img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.bookblock h2 { margin: .2rem 0 .6rem; }
.bookblock h2::before { content: none; }
.bookblock .buy { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .75rem; }
.bookblock .notrequired { font-size: .9rem; color: var(--ink-faint); margin: 0; line-height: 1.55; }

/* ---------- course home ---------- */

.spine {
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 700;
  margin-top: 1rem;
}
.headactions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.partblock { margin: 3rem 0 0; }
.partblock .partblurb { color: var(--ink-soft); max-width: var(--measure); margin-top: -.25rem; }
/* The old lesson-list rules lived here. They styled the previous markup, an
   anchor holding a bare strong and span, and their `.lessonlist span {
   display: block }` was forcing the new metadata chips to full width. Dead
   CSS that is merely unused is untidy; dead CSS that still matches something
   is a bug waiting to be blamed on the new code. The replacement is at the
   end of this file. */

/* ---------- the index of courses ---------- */

.courselist { margin: 3rem 0 0; }
.courses { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.courses li { border: 1px solid var(--rule); padding: 1.35rem 1.5rem; background: var(--paper); }
.courses .vol {
  display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .35rem;
}
.courses strong { display: block; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; }
.courses .sub { display: block; margin-top: .35rem; color: var(--ink-soft); }
.courses .spine { font-size: 1rem; margin-top: .85rem; }
.courses .go { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 0; }
.courses .live { border-left: 3px solid var(--signal); }
.courses .soon { background: var(--paper-warm); }
.courses .soon strong { color: var(--ink-soft); }
.courses .status { display: block; margin-top: .85rem; font-size: .9rem; color: var(--ink-faint); }

/* ============ the diagnostic ============ */

/* .disclosure, .visually-hidden and .field come from nbop.css and are not
   redefined. Everything below is specific to the instrument. */

.diagnosticwrap { max-width: 60rem; }
/* This line sits inside the dark hero on all six diagnostics, not on the page
   ground, so --ink-soft was the wrong family: #54606A on the navy overlay is
   2.75:1, well under AA, and the sentence that promises nothing is kept about
   you was the least readable thing on the page. It stays quieter than the
   standfirst above it (8.7:1 against that line's 11.6:1) without being faint. */
.diagnosticwrap .privacy {
  margin-top: 1rem; font-size: .95rem; color: #A9B7CA;
  max-width: var(--measure); line-height: 1.6;
}

.qblock { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--rule); }
.qblock:first-of-type { border-top: 0; padding-top: 0; }
.qblock > p { max-width: var(--measure); color: var(--ink-soft); line-height: 1.6; }

.hint { font-size: .92rem; color: var(--ink-faint); line-height: 1.55; }

.field { display: block; margin: 1.25rem 0 0; max-width: var(--measure); }
.field > span:first-child { display: block; font-weight: 600; margin-bottom: .35rem; }
.field textarea, .field input[type="number"], .field input[type="text"] {
  width: 100%; font: inherit; padding: .6rem .75rem;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
.field.narrow input[type="number"] { max-width: 9rem; }
.field textarea:focus, .field input:focus, .board input:focus, .board select:focus {
  outline: 2px solid var(--signal); outline-offset: 1px;
}

.colguide { max-width: var(--measure); margin: 1.25rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.colguide li { margin-bottom: .5rem; line-height: 1.55; }

/* ---------- the board ---------- */

.boardscroll { overflow-x: auto; margin-top: 1.5rem; }
.board { width: 100%; border-collapse: collapse; min-width: 44rem; }
.board th[scope="col"] {
  text-align: left; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: .7rem .9rem;
  border-bottom: 2px solid var(--navy);
}
.board tbody th { text-align: left; font-weight: 400; padding: .9rem .9rem; vertical-align: top; }
.board tbody td { padding: .9rem .9rem; vertical-align: top; }
.board tbody tr + tr th, .board tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.board .dname { display: block; font-weight: 600; }
.board .dacc { display: block; font-size: .88rem; color: var(--ink-faint); line-height: 1.45; margin-top: .2rem; max-width: 22rem; }
.board select, .board input[type="number"], .board input[type="text"] {
  font: inherit; padding: .5rem .6rem; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
}
.board select, .board input[type="number"] { width: 5rem; }
.board input[type="text"] { width: 100%; min-width: 12rem; }
.board .pct { color: var(--ink-faint); }

@media (max-width: 46rem) {
  .board { min-width: 0; }
  .board thead { display: none; }
  .board tbody tr { display: block; border: 1px solid var(--rule); padding: .9rem 1rem; margin-bottom: .75rem; }
  .board tbody th, .board tbody td { display: block; padding: .5rem 0; border: 0; }
  .board tbody td::before {
    content: attr(data-label); display: block;
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: .25rem;
  }
  .board tbody tr + tr th, .board tbody tr + tr td { border-top: 0; }
}

.tally { margin-top: 1.25rem; font-size: 1.05rem; }
.tally b { font-size: 1.35rem; font-family: var(--display); }
.tally.off b { color: #9b3b2f; }

/* ---------- bands ---------- */

.bandset { border: 0; padding: 0; margin: 1.75rem 0 0; }
.bandset legend { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--rule); padding: .45rem .8rem; cursor: pointer;
  background: var(--paper);
}
.radio:hover { border-color: var(--ink-faint); }
.radio input { margin: 0; }
.radio:has(input:checked) { border-color: var(--signal); background: var(--paper-warm); font-weight: 600; }

/* Honeypot. Off screen rather than display:none, because some bots skip
   anything that is hidden and fill in everything that is not. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submitrow { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--rule); }
.submitrow .hint { margin-top: .75rem; }

/* ============ the reading ============ */

.readingbox { margin-top: 1rem; }
.readinghead {
  font-family: var(--display); font-size: 1.9rem; line-height: 1.22;
  margin: .35rem 0 1.5rem; max-width: 34rem;
}
.readinghead::before { content: none; }

.yousaid { background: var(--paper-warm); padding: 1.25rem 1.5rem; margin-bottom: 2rem; max-width: var(--measure); }
.yousaid h3 { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .35rem; }
.yousaid h3 + .quote + h3 { margin-top: 1rem; }
.quote { margin: 0; font-size: 1.1rem; line-height: 1.5; }

.readingtable { width: 100%; border-collapse: collapse; margin-bottom: 2.5rem; }
.readingtable th[scope="col"], .readingtable thead th {
  text-align: left; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: .7rem .9rem; border-bottom: 2px solid var(--navy);
}
.readingtable td { padding: .8rem .9rem; vertical-align: top; }
.readingtable tbody tr + tr td { border-top: 1px solid var(--rule-soft); }
.readingtable .blank { color: #9b3b2f; font-style: italic; }
@media (max-width: 42rem) {
  .readingtable thead { display: none; }
  .readingtable tbody tr { display: block; border: 1px solid var(--rule); padding: .75rem 1rem; margin-bottom: .6rem; }
  .readingtable td { display: block; padding: .35rem 0; border: 0; }
  .readingtable td::before {
    content: attr(data-label) ': '; font-size: .68rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .readingtable tbody tr + tr td { border-top: 0; }
}

.findinghead { margin: 0 0 1.25rem; }

.finding {
  border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  padding: 1.25rem 1.5rem; margin-bottom: 1rem; max-width: var(--measure);
  background: var(--paper);
}
.finding h4 { margin: 0 0 .6rem; font-size: 1.12rem; line-height: 1.35; }
.finding p { margin: 0; color: var(--ink-soft); line-height: 1.62; }
.finding.sev-primary { border-left-color: var(--signal); background: var(--paper-warm); }
.finding.sev-secondary { border-left-color: var(--navy); }
.finding.sev-note { border-left-color: var(--rule); }
.finding.closing { border-left-color: var(--navy); background: var(--paper-warm); margin-top: 2rem; }
.lessonlink { display: inline-block; margin-top: .85rem; font-weight: 600; }

/* ---------- capture, at the output ---------- */

.capture {
  margin: 2.5rem 0 0; padding: 1.5rem; max-width: var(--measure);
  border: 1px solid var(--rule); border-top: 3px solid var(--navy);
}
.capture h3 { margin: 0 0 .5rem; }
.capture h3::before { content: none; }
.capture .muted { color: var(--ink-soft); line-height: 1.6; }
.capturerow { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .85rem; }
.capturerow input[type="email"] {
  flex: 1 1 16rem; font: inherit; padding: .6rem .75rem;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
.capture .consent { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.5; color: var(--ink-soft); }
.capture .consent input { margin-top: .28rem; }

.again { margin: 2.5rem 0 0; }
.loading { color: var(--ink-faint); }

/* ---------- the volume diagnostics, Volumes II to VI ---------- */
/*
   Volume I's blank is a table, because its closing lesson asks you to print it
   and hand it to two colleagues. These five are question lists, so they get a
   stacked layout that stays readable on a phone, which is where a fair share of
   people will be standing when they go and count something.
*/

.q {
  border: 0; border-top: 1px solid var(--rule);
  padding: 1.6rem 0 0; margin: 0 0 1.8rem; max-width: var(--measure);
}
.q legend {
  padding: 0; font-weight: 600; font-size: 1.06rem; line-height: 1.4;
  color: var(--ink);
}
.q-n {
  display: inline-block; min-width: 1.6rem;
  color: var(--signal); font-variant-numeric: tabular-nums;
}
.q-help { margin: .5rem 0 .9rem; color: var(--ink-soft); line-height: 1.6; font-size: .95rem; }

.q input[type="text"], .q textarea {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
.q textarea { resize: vertical; }

.q-choices { display: grid; gap: .45rem; }
.q-choice {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem .7rem; border: 1px solid var(--rule); background: var(--paper);
  line-height: 1.5; cursor: pointer;
}
.q-choice:hover { border-color: var(--navy); }
.q-choice input { margin-top: .28rem; flex: none; }

.q-int { display: flex; align-items: baseline; gap: .6rem; }
.q-int input {
  width: 7.5rem; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.q-unit { color: var(--ink-soft); }

/* The subject line under the reading heading: the one thing the reader named,
   echoed back so the findings are visibly about that and not the whole org. */
.reading-subject {
  margin: -.4rem 0 1.4rem; color: var(--ink-soft);
  font-style: italic; max-width: var(--measure);
}

/* === warmth: the course pages =============================================
   The site palette warmed in nbop.css layers 77 and 78, and everything here
   that used var() tokens came with it. What did not were the few places this
   file paints or hard-codes its own edges, which is why the lesson rail still
   had a square navy slab in it while the rest of the page had softened.
--------------------------------------------------------------------------- */

/* The diagnostic call in the rail was the last hard rectangle on a lesson
   page, and it sits at the top of the column where it is read first. */
.rail .raildiag {
  border-radius: var(--r-pill);
  text-align: center;
  box-shadow: 0 1px 2px rgba(30, 58, 86, .12);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.rail .raildiag:hover, .rail .raildiag:focus {
  background: var(--navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 58, 86, .18);
}

/* Course cards, lesson lists and the next-steps block read as panels, so they
   take the same 12px the rest of the site now uses. */
.courses > li, .lessonlist > li, .nextsteps, .lessonnav, .partblock > .lessonlist {
  border-radius: var(--r-md);
}

/* Video and poster corners. The player was the one square object left in the
   middle of the reading column. */
.lessonvideo video, .lessonvideo img, .lessonvideo .frame { border-radius: var(--r-md); }

/* The current lesson marker in the rail was a hard 3px bar. */
.rail .part a { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

@media (prefers-reduced-motion: reduce) {
  .rail .raildiag { transition: none; }
  .rail .raildiag:hover { transform: none; }
}

/* === the course index, rebuilt ============================================
   The complaint was no engagement and no differentiation, and it was right:
   fifteen lessons rendered as fifteen identical rows of a title and one line
   of text, with four part headings that looked like every other heading on
   the site.

   What fixed it was not decoration. The course already carried three things
   the page never printed: the lesson number, the named instrument each lesson
   teaches, and how long its video runs. A reader deciding whether to start
   wants to know how big this is and what they get, and all three answers were
   sitting in the data.
--------------------------------------------------------------------------- */

/* The commitment, above the fold. Thirteen minutes of video across fifteen
   lessons is a good answer and the page was not giving it. */
.coursefacts {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
}
.coursefacts li {
  background: var(--paper); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.coursefacts b {
  font-family: var(--display); font-size: 1.7rem; font-weight: 500;
  line-height: 1; color: var(--ink);
}
.coursefacts span {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Read so far. Written by practice-progress.js from localStorage, so it
   costs no account and never leaves the browser. Hidden until there is
   something true to say. */
.courseprogress {
  margin: 0 0 1.75rem; font-size: .9rem; color: var(--ink-soft);
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
}
.courseprogress .bar {
  flex: 1 1 12rem; height: .4rem; background: var(--rule-soft);
  border-radius: 99px; overflow: hidden; min-width: 8rem;
}
.courseprogress .bar i { display: block; height: 100%; background: var(--signal); }
.courseprogress a { font-weight: 600; }

/* Parts get a numbered badge, so four sections read as four stages of one
   thing rather than four unrelated headings. */
.parthead { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.partnum {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-family: var(--ui); font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  margin-top: .15rem;
}
.parthead h2 { margin: 0 0 .3rem; }
.parthead h2::before { content: none; }   /* the badge is the marker now */
.parthead .partblurb { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

/* A lesson row. Number on the left as a spine, the substance in the middle,
   a tick on the right once it has been read. */
.lessonlist { display: grid; gap: .55rem; }
.lrow { margin: 0; }
.lrow > a {
  display: grid; grid-template-columns: 3rem 1fr 1.6rem; align-items: start;
  gap: .2rem 1rem; padding: 1rem 1.15rem;
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--r-md); text-decoration: none; color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.lrow > a:hover, .lrow > a:focus-visible {
  border-color: var(--signal);
  box-shadow: 0 3px 12px rgba(30, 58, 86, .10);
  transform: translateY(-1px);
}
.lnum {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.05rem; color: var(--ink-faint); padding-top: .1rem;
}
.lbody { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ltitle { font-size: 1.06rem; line-height: 1.35; color: var(--ink); }
.lrow > a:hover .ltitle { color: var(--signal-ink); }
.lstand { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }
.lmeta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .15rem; }
.linst, .ltime {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 99px;
}
/* The instrument is the takeaway, so it is the one that carries colour. */
.linst { background: var(--paper-cream); color: var(--ink-soft); border: 1px solid var(--rule); }
.ltime { color: var(--ink-faint); border: 1px solid var(--rule-soft); }

/* The tick. Empty until practice-progress.js marks the row. */
.ldone { width: 1.2rem; height: 1.2rem; margin-top: .25rem; }
.lrow.read .ldone {
  border-radius: 50%; background: var(--navy);
  position: relative;
}
.lrow.read .ldone::after {
  content: ""; position: absolute; left: .36rem; top: .19rem;
  width: .28rem; height: .55rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lrow.read .ltitle { color: var(--ink-soft); }

@media (max-width: 40rem) {
  .lrow > a { grid-template-columns: 2.2rem 1fr; }
  .ldone { display: none; }
  .parthead { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lrow > a { transition: none; }
  .lrow > a:hover { transform: none; }
}

/* === the section under the hero ===========================================
   It was a white box with ninety pixels of dead space above two paragraphs of
   body text at one size. Nothing in it was wrong, it just had no order: a
   reader arriving from the hero asks three questions in sequence and the
   section answered all three in the same voice.

     what is this        the lead line, given weight
     how much is there   the facts, scannable
     what do I do first  one call, made to look like one
--------------------------------------------------------------------------- */

.courseintro {
  background: transparent;              /* it is a band, not a card */
  border: 0;
  border-radius: 0;
  padding: clamp(2rem, 4vw, 2.75rem) 0 0;   /* the void at the top, removed */
  max-width: 62rem;
}

.introlead {
  font-size: clamp(1.12rem, 1.7vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 42rem;
  margin: 0 0 1.5rem;
}

/* The one thing to do before the lessons, made to look like one thing rather
   than the second half of a paragraph. */
.introfirst {
  margin: 1.75rem 0 0;
  padding: 1.15rem 1.35rem;
  background: var(--paper-cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  border-radius: var(--r-md);
  max-width: 44rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.5rem;
}
.introfirst p { margin: 0; flex: 1 1 22rem; color: var(--ink-soft); font-size: .95rem; }
.introfirst b { color: var(--ink); }
.introfirst-go { flex: 0 0 auto; }
.introfirst .action { white-space: nowrap; }

@media (max-width: 40rem) {
  .introfirst { display: block; }
  .introfirst-go { margin-top: .9rem; }
}

/* The gap under the hero was 98px because two spacers were stacking: the
   3.4rem margin layer 78 puts on every section in a wrap, plus a padding-top
   this file added on top of it. Both were mine. A section that follows a full
   bleed hero wants one gap, not the sum of two opinions about it. */
.courseintro { padding-top: 0; }

/* One number per row.
   The list markers reappeared because removing the old dead .lessonlist rules
   also removed their list-style reset, so for a while every row carried both
   a browser marker and a number of my own that counted differently. The list
   keeps the job: it is the ol's own semantics, it restarts inside each part,
   which is what somebody reading a part wants, and it needs no extra span. */
.lessonlist {
  list-style: none;
  counter-reset: lesson;
}
.lrow { counter-increment: lesson; }
.lrow > a { grid-template-columns: 2.6rem 1fr 1.6rem; }
.lrow > a::before {
  content: counter(lesson, decimal-leading-zero);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem;
  color: var(--ink-faint);
  padding-top: .15rem;
}
.lrow > a:hover::before, .lrow > a:focus-visible::before { color: var(--signal-ink); }

@media (max-width: 40rem) {
  .lrow > a { grid-template-columns: 2.2rem 1fr; }
}

/* === the closing furniture ================================================
   Two faults, with different scopes.

   The gap under "Two things worth doing" was ninety pixels of band padding.
   `.steps` is also the name of a full bleed alternating band on the marketing
   pages, and that rule sets padding-top: 90px on anything wearing the class.
   The card grid inside .nextsteps wears it too, so it collected the padding of
   a page section it is not. That is a collision, not a course page problem, so
   it is reset wherever .nextsteps appears.

   The widths are every practice page except the lesson. .faq, .firewall,
   .nextsteps and .bookblock were written for the lesson, where the entire
   column is a 38rem reading measure and clamping them is right. Everywhere
   else the content above them runs the full wrap, so the same blocks make the
   page narrow by half at the point the reader reaches the questions. The rule
   is scoped by excluding the lesson rather than by naming the pages, because
   the lesson is the one page the clamp was written for and any page added
   later will want the wide behaviour by default.

   The panels take the full column and the prose inside them keeps its measure,
   which is what the lesson rows above them already do.
--------------------------------------------------------------------------- */

.nextsteps .steps { padding-top: 0; padding-bottom: 0; }

body[data-page~="practice"]:not([data-page~="lesson"]) .faq,
body[data-page~="practice"]:not([data-page~="lesson"]) .firewall,
body[data-page~="practice"]:not([data-page~="lesson"]) .nextsteps,
body[data-page~="practice"]:not([data-page~="lesson"]) .bookblock { max-width: none; }

/* Full width panel, measured text. */
body[data-page~="practice"]:not([data-page~="lesson"]) .faq details > p,
body[data-page~="practice"]:not([data-page~="lesson"]) .firewall p,
body[data-page~="practice"]:not([data-page~="lesson"]) .nextsteps .alsoread,
body[data-page~="practice"]:not([data-page~="lesson"]) .bookblock .about > p { max-width: 46rem; }

/* There is room for the two calls side by side, and side by side is also the
   honest picture: they are alternatives, not a sequence. */
body[data-page~="practice"]:not([data-page~="lesson"]) .nextsteps .steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
body[data-page~="practice"]:not([data-page~="lesson"]) .nextsteps .step {
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
}
/* The subs sit under their titles, not pushed to the card floor. Bottom
   aligning them looked deliberate in the two-line case and looked like an
   orphaned line in the one-line case, which is the wrong trade: the cards are
   read one at a time, not compared row by row. */
body[data-page~="practice"]:not([data-page~="lesson"]) .nextsteps .step .sub { margin-top: .4rem; }

@media (max-width: 48rem) {
  body[data-page~="practice"]:not([data-page~="lesson"]) .nextsteps .steps { grid-template-columns: 1fr; }
}

/* The book block is a two column aside in a 38rem column. Given the whole
   width it should not stretch the cover to match. */
body[data-page~="practice"]:not([data-page~="lesson"]) .bookblock { grid-template-columns: 11rem minmax(0, 42rem); }
@media (max-width: 40rem) {
  body[data-page~="practice"]:not([data-page~="lesson"]) .bookblock { grid-template-columns: 1fr; }
}

/* === the lesson head ======================================================
   A lesson used to open with a part name, a title and a standfirst, and then
   said which instrument it teaches in a small aside below the prose, after
   the reader had finished. That is the takeaway printed as a footnote.

   It moves to the top. The lesson is fifteen paragraphs about one named
   thing, and naming it first is what lets somebody decide in two seconds
   whether this is the lesson they came for. Position moves up with it: the
   rail carries the answer already, but only if you count a list of fifteen.
--------------------------------------------------------------------------- */

.lessonhead {
  max-width: var(--measure);
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 .25rem;
}
.lessonhead h1 { margin-top: .3rem; }
.lessonhead .standfirst { margin-bottom: 0; }

/* Part on the left, position on the right, on one baseline. */
.lessonhead .eyebrow {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1rem; justify-content: space-between;
  margin: 0; max-width: none;
}
.lessonhead .lpos {
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  letter-spacing: .1em;
  flex: 0 0 auto;
}

/* The named thing, set so it reads as a label on the lesson rather than as
   another sentence of the standfirst. */
.lessoninstrument {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem;
  margin: 1.25rem 0 0; max-width: none;
  padding: .7rem 1rem;
  background: var(--paper-cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  border-radius: var(--r-md);
  font-weight: 600; color: var(--ink); line-height: 1.4;
}
.lessoninstrument > span {
  font-family: var(--display);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-faint);
  flex: 0 0 auto;
}

@media (max-width: 40rem) {
  .lessonhead .eyebrow { justify-content: flex-start; }
}

/* === the rail, ticked =====================================================
   The course index ticks the rows it knows have been read. The rail lists the
   same fifteen lessons on every lesson page and said nothing, so a reader
   thirteen lessons in still saw fifteen identical links.

   The tick is a small check in the left margin rather than a change of colour,
   because the rail already spends colour on two other states: the current
   lesson (navy edge, bold) and hover. A third colour would leave nothing
   reading as primary. Read is a fact about the past and should be quieter than
   where you are now.
--------------------------------------------------------------------------- */

.rail .part a.read { position: relative; color: var(--ink-faint); }
.rail .part a.read::before {
  content: "";
  position: absolute; left: -.62rem; top: .62rem;
  width: .3rem; height: .55rem;
  border: solid var(--ink-faint); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.rail .part a.read:hover, .rail .part a.read:focus { color: var(--ink); }
.rail .part a.read:hover::before, .rail .part a.read:focus::before { border-color: var(--ink); }

/* === the transcript disclosure ============================================
   Every lesson carries the full transcript behind a <details>, and it was the
   only disclosure on the site wearing the browser's own triangle. The FAQ on
   the course index, three scrolls away, uses a ruled row with a + that turns
   into a dash. Two disclosure widgets that behave identically should not look
   like they came from different sites, so this one joins that family.
--------------------------------------------------------------------------- */

.transcriptbox {
  margin-top: .9rem;
  border-top: 1px solid var(--rule);
}
.lessonvideo .transcriptbox summary {
  cursor: pointer;
  position: relative;
  list-style: none;
  padding: .85rem 2rem .85rem 0;
  font-weight: 600;
  color: var(--ink);
}
.transcriptbox summary::-webkit-details-marker { display: none; }
.transcriptbox summary::after {
  content: "+";
  position: absolute; right: .2rem; top: .72rem;
  font-weight: 400; font-size: 1.3rem; line-height: 1;
  color: var(--ink-faint);
}
.transcriptbox[open] summary::after { content: "\2013"; }
.lessonvideo .transcriptbox summary:hover { color: var(--navy); }
.transcriptbox summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* The panel is cream rather than the page ground, for the reason recorded in
   nbop.css layer 81: --paper-warm stopped meaning "not quite the page". */
.lessonvideo .transcript {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: 1rem;
}