/* bundled fonts — OFL, shipped in-app; nothing fetched, ever */
@font-face{font-family:'Fraunces';font-weight:300;src:url(fonts/fraunces-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-weight:400;src:url(fonts/fraunces-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;src:url(fonts/fraunces-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

/* Analog² — the reading room, offline. Field Unit chrome, house reading page. */
:root{
  --ink:#111110; --sheet:#EDEBE4; --pull:#FF4A00; --alu:#B8B5AC;
  --cream:#ece2d2; --night:#12100d;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--mono);font-size:13px}

/* wake sequence */
#wake{position:fixed;inset:0;background:#0b0a09;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;z-index:10;transition:opacity .6s}
#wake.done{opacity:0;pointer-events:none}
#wake .glyph{animation:wakein 1.6s ease-out both}
@keyframes wakein{from{opacity:.12}to{opacity:1}}
#wake .log{font-size:11px;line-height:2;color:rgba(236,226,210,.5);min-height:88px}
#wake .log .ok{color:#7CB88A}
#wake .log .or{color:var(--pull)}

/* frame */
#app{display:grid;grid-template-columns:290px 1fr;height:100vh}
#rail{border-right:1px solid rgba(236,226,210,.12);overflow-y:auto;padding:18px 0}
#rail .brand{display:flex;align-items:center;gap:10px;padding:4px 18px 16px;
  border-bottom:1px solid rgba(236,226,210,.1);margin-bottom:10px}
#rail .brand b{font-size:11px;letter-spacing:.3em}
#rail .brand b i{color:var(--pull);font-style:normal}
#search{margin:8px 16px 12px;display:flex}
#search input{flex:1;background:#1a1712;border:1px solid rgba(236,226,210,.16);
  color:var(--cream);font-family:var(--mono);font-size:12px;padding:8px 10px;border-radius:3px}
.bk{padding:9px 18px;cursor:pointer;border-left:2px solid transparent}
.bk:hover{background:rgba(236,226,210,.04)}
.bk.on{border-left-color:var(--pull);background:rgba(236,226,210,.05)}
.bk .t{font-family:var(--serif);font-size:14.5px;color:var(--cream)}
.bk .a{font-size:9.5px;letter-spacing:.1em;color:rgba(236,226,210,.42);
  text-transform:uppercase;margin-top:2px}
.bk .aid{color:var(--pull)}

/* reading pane */
#main{overflow-y:auto;padding:0}
#chaprow{position:sticky;top:0;background:rgba(18,16,13,.94);backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(236,226,210,.1);padding:12px 34px;display:flex;
  gap:8px;overflow-x:auto;white-space:nowrap;z-index:3}
#chaprow button{background:none;border:1px solid rgba(236,226,210,.18);color:rgba(236,226,210,.6);
  font-family:var(--mono);font-size:10px;padding:5px 10px;border-radius:3px;cursor:pointer}
#chaprow button.on{border-color:var(--pull);color:var(--cream)}
#page{max-width:660px;margin:0 auto;padding:44px 34px 120px}
#page h1{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 4px}
#page .who{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.42);margin-bottom:34px}
.para{font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.85;
  color:#e7ddcb;margin:0 0 18px}
.para mark{background:none;color:inherit;border-bottom:2px solid rgba(255,74,0,.45);cursor:pointer}
.gl{border-left:2px solid var(--pull);margin:10px 0 22px;padding:4px 0 4px 14px}
.gl .ge{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--pull)}
.gl p{margin:5px 0 0;font-family:var(--mono);font-size:12px;line-height:1.7;
  color:rgba(236,226,210,.66)}
#hits{padding:24px 34px}
.hit{padding:12px 0;border-bottom:1px solid rgba(236,226,210,.08);cursor:pointer}
.hit .hb{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pull)}
.hit .hs{font-family:var(--serif);font-size:14px;color:#e7ddcb;margin-top:4px}
.hit .hs b{color:var(--cream);font-weight:500}
#plateline{position:fixed;bottom:0;left:290px;right:0;padding:8px 34px;
  border-top:1px solid rgba(236,226,210,.1);background:rgba(18,16,13,.95);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,226,210,.35)}
#plateline b{color:rgba(236,226,210,.6)}

/* ask the library — instrument III, the honest half: verbatim, sourced */
#askchips{margin:0 16px 4px;display:flex;flex-wrap:wrap;gap:6px}
#askchips button{background:none;border:1px solid rgba(236,226,210,.14);color:rgba(236,226,210,.5);
  font-family:var(--mono);font-size:9.5px;padding:4px 9px;border-radius:12px;cursor:pointer;
  text-align:left}
#askchips button:hover{border-color:var(--pull);color:var(--cream)}
.askhead{margin-bottom:20px}
.askhead .aq{font-family:var(--serif);font-size:21px;font-weight:400;color:var(--cream);
  margin-bottom:6px}
.askhead .who{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,226,210,.42);line-height:1.9}
.grp{margin-bottom:26px}
.grp .gb{font-family:var(--serif);font-size:16px;color:var(--cream);
  border-bottom:1px solid rgba(255,74,0,.35);padding-bottom:6px;margin-bottom:2px}
.grp .gb span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(236,226,210,.42);margin-left:8px}
.hit.go .hg{font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.28);margin-top:6px;transition:color .15s}
.hit.go:hover .hg{color:var(--pull)}
.hit .hnote{font-size:9.5px;color:rgba(236,226,210,.35);margin-top:5px;font-style:italic;
  font-family:var(--serif)}
.para.flash{animation:pflash 2.6s ease-out}
@keyframes pflash{0%,55%{background:rgba(255,74,0,.14)}100%{background:none}}

/* keep · the commonplace */
.para{position:relative}
.keepbtn{position:absolute;left:-34px;top:6px;opacity:0;transition:opacity .15s;
  background:none;border:none;color:rgba(236,226,210,.35);font-size:15px;cursor:pointer;
  font-family:var(--mono)}
.para:hover .keepbtn{opacity:1}
.keepbtn.kept{color:var(--pull);opacity:1}
#cpview{padding:34px}
#cpview h1{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 6px}
#cpview .who{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.42);margin-bottom:26px}
.cpitem{border-left:2px solid var(--pull);padding:4px 0 4px 16px;margin-bottom:24px}
.cpitem .cb{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pull)}
.cpitem .cx{font-family:var(--serif);font-weight:300;font-size:15.5px;line-height:1.75;
  color:#e7ddcb;margin-top:6px}
.cpitem .cd{margin-top:6px;font-size:9px;color:rgba(236,226,210,.3);letter-spacing:.1em}
#cpopen{margin:2px 16px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.5);cursor:pointer;padding:6px 2px}
#cpopen:hover{color:var(--cream)}
#cpopen b{color:var(--pull)}

/* course view — the studio: a course set like a book chapter, not a
   dashboard. The passage is the hero; apparatus recedes. One orange element
   at rest per viewport: the current unit's mark on the rail (hover/focus
   states may borrow the accent transiently). All selectors prefixed .crs- */
.crs-back{display:block;margin:2px 18px 14px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.45);text-decoration:none;padding:4px 0}
.crs-back:hover{color:var(--cream)}
.crs-kicker{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.38);margin:0 0 10px}

/* rail — course head: title, then labels worn lightly in one line */
.crs-course{padding:8px 18px 16px;border-bottom:1px solid rgba(236,226,210,.08)}
.crs-title{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.3;
  color:var(--cream)}
.crs-metaline{font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,226,210,.42);margin-top:9px;line-height:1.9}
.crs-shelf{margin-top:16px}
.crs-shelfbk{padding:5px 0;border-top:1px solid rgba(236,226,210,.06)}
.crs-shelfbk .t{font-family:var(--serif);font-size:12.5px;color:rgba(231,221,203,.85);
  display:block}
.crs-shelfbk .a{font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(236,226,210,.32)}
.crs-units{padding:16px 18px}
.crs-unit{padding:8px 10px 9px 12px;margin:0 -12px;cursor:pointer;
  border-left:1px solid transparent}
.crs-unit:hover{background:rgba(236,226,210,.03)}
.crs-unit.on{border-left-color:var(--pull)}
.crs-unit .n{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(236,226,210,.38);display:block}
.crs-unit .n .d{letter-spacing:.1em;color:rgba(236,226,210,.25);text-transform:none}
.crs-unit .q{font-family:var(--serif);font-size:13px;line-height:1.5;
  color:rgba(231,221,203,.8);display:block;margin-top:3px}
.crs-unit.on .q{color:var(--cream)}
.crs-others{padding:0 18px 18px}
.crs-other{display:block;font-family:var(--serif);font-size:12.5px;
  color:rgba(231,221,203,.75);text-decoration:none;padding:5px 0;
  border-top:1px solid rgba(236,226,210,.06)}
.crs-other:hover{color:var(--cream)}

/* main column — one unit on screen, a ~68ch measure */
.crs-main{overflow-y:auto}
#crsview{max-width:700px;margin:0 auto;padding:72px 44px 150px}
.crs-unithead{margin-bottom:70px}
.crs-unitline{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.35)}
.crs-unithead h1{font-family:var(--serif);font-weight:300;font-size:31px;
  line-height:1.3;margin:16px 0 0;color:var(--cream)}
.crs-uq{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.6;
  color:rgba(236,226,210,.55);margin-top:12px}

/* movements — a quiet vertical rhythm: kicker, thin rule, content */
.crs-mv{margin-bottom:62px}
.crs-mvhead{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid rgba(236,226,210,.12);padding-bottom:8px;margin-bottom:24px}
.crs-mvhead .k{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(236,226,210,.45)}
.crs-tick{background:none;border:none;padding:0 2px;line-height:1;cursor:pointer;
  font-family:var(--serif);font-size:15px;color:rgba(236,226,210,.18)}
.crs-tick:hover,.crs-tick:focus-visible{color:var(--pull)}
.crs-tick.done{color:rgba(236,226,210,.8)}

/* shared textures */
.crs-prose{font-family:var(--serif);font-weight:300;font-size:16.5px;line-height:1.85;
  color:#e7ddcb}
.crs-note{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.75;
  color:rgba(236,226,210,.45);margin-top:20px}
.crs-stub{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.75;
  color:rgba(236,226,210,.4);margin-top:14px}
.crs-prepared{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,226,210,.28);margin-top:22px;line-height:2}
.crs-rcpt{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  color:rgba(236,226,210,.22);margin-left:9px;transition:color .15s;cursor:default}
.crs-rcpt:hover,.crs-rcpt:focus{color:rgba(236,226,210,.8);outline:none}

/* encounter — the passage is the hero */
.crs-passage{margin:0 0 40px}
.crs-passage blockquote{margin:0;font-family:var(--serif);font-weight:300;
  font-size:19px;line-height:1.9;color:#ece2d2}
.crs-passage figcaption{margin-top:12px;font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(236,226,210,.38)}
.crs-inplace{margin-left:9px;color:rgba(236,226,210,.3);text-decoration:none;
  letter-spacing:.15em;white-space:nowrap}
.crs-inplace:hover,.crs-inplace:focus-visible{color:var(--pull)}

/* ask + reflect prompts */
.crs-prompt{display:flex;gap:16px;font-family:var(--serif);font-weight:300;
  font-size:16px;line-height:1.8;color:#e7ddcb;padding:9px 0}
.crs-prompt .pn{font-family:var(--mono);font-size:9px;color:rgba(236,226,210,.32);
  padding-top:7px}

/* struggle — the ladder waits; revealed rungs read as marginal notes */
.crs-rung{margin:0 0 20px;padding-left:18px;border-left:1px solid rgba(236,226,210,.16)}
.crs-rung .rl{font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(236,226,210,.3)}
.crs-rung .rb{font-family:var(--serif);font-weight:300;font-size:14.5px;
  line-height:1.75;color:rgba(231,221,203,.85);margin-top:5px}
.crs-ladderline{font-family:var(--serif);font-style:italic;font-size:13.5px;
  line-height:1.75;color:rgba(236,226,210,.5)}
.crs-reveal{background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--serif);font-style:italic;font-size:13.5px;
  color:rgba(236,226,210,.75);border-bottom:1px dotted rgba(236,226,210,.4)}
.crs-reveal:hover,.crs-reveal:focus-visible{color:var(--pull);
  border-bottom-color:var(--pull)}
.crs-ladderend{color:rgba(236,226,210,.35)}

/* articulate — claims with receipts, then the steelman */
.crs-claims{margin-top:22px}
.crs-claim{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.75;
  color:rgba(231,221,203,.9);margin-bottom:12px}
.crs-sub{margin-top:30px}
.crs-sub .sk{display:block;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(236,226,210,.35);margin-bottom:10px}
.crs-prose.sm{font-size:15px;color:rgba(231,221,203,.8)}

/* reflect — the unit ends on the question */
.crs-closing{font-family:var(--serif);font-weight:300;font-size:19.5px;
  line-height:1.75;color:var(--cream);margin-top:26px}

/* addenda — glossary, a note for the tutor: present, and receded */
.crs-adden{margin:0 0 40px}
.crs-addk{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.3);border-bottom:1px solid rgba(236,226,210,.08);
  padding-bottom:7px;margin-bottom:14px}
.crs-term{font-family:var(--serif);font-weight:300;font-size:13.5px;line-height:1.75;
  color:rgba(236,226,210,.5);margin-bottom:8px}
.crs-term .t{font-style:italic;color:rgba(231,221,203,.75)}

/* onward + plateline */
.crs-next{display:block;background:none;border:none;padding:0;margin:26px 0 0;
  cursor:pointer;text-align:left;font-family:var(--serif);font-style:italic;
  font-size:15px;line-height:1.6;color:rgba(236,226,210,.6)}
.crs-next:hover,.crs-next:focus-visible{color:var(--pull)}
.crs-plateline b{color:rgba(236,226,210,.6)}

/* courses entry on the reader rail */
#crsopen{margin:2px 16px 2px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.5);cursor:pointer;padding:6px 2px;display:block;text-decoration:none}
#crsopen:hover{color:var(--cream)}
#crsopen b{color:var(--pull)}
#crsopen[hidden]{display:none}

/* home — the wake screen becomes the front door. All selectors .home- only.
   The device boots into a calm room: brand, plate, five doors, one to come. */
.home-body{display:flex;flex-direction:column;min-height:100vh}
.home-wrap{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:56px 24px;opacity:0;transition:opacity .8s}
.home-wrap.in{opacity:1}
.home-brand{display:flex;align-items:center;gap:10px}
.home-brand b{font-size:11px;letter-spacing:.3em;color:var(--cream)}
.home-brand b i{color:var(--pull);font-style:normal}
.home-plateline{margin-top:12px;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(236,226,210,.35)}
.home-plateline b{color:rgba(236,226,210,.6)}
.home-tiles{margin-top:54px;display:grid;grid-template-columns:repeat(2,minmax(240px,310px));
  gap:14px;width:100%;max-width:660px;justify-content:center}
@media(max-width:640px){.home-tiles{grid-template-columns:minmax(240px,1fr)}}
.home-tile{display:block;border:1px solid rgba(236,226,210,.12);border-left:2px solid transparent;
  border-radius:3px;padding:22px 22px 19px;text-decoration:none;background:rgba(236,226,210,.02)}
a.home-tile:hover{border-color:rgba(236,226,210,.28);border-left-color:var(--pull);
  background:rgba(236,226,210,.045)}
.home-tile .ht{display:block;font-family:var(--serif);font-weight:400;font-size:22px;
  color:var(--cream)}
.home-tile .hs{display:block;margin-top:8px;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(236,226,210,.42);line-height:1.8}
.home-tile[hidden]{display:none}
.home-off{opacity:.35;cursor:default}
/* the way back, from the reader's rail */
.home-back{display:block;margin:8px 18px 2px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.45);text-decoration:none;padding:2px 0}
.home-back:hover{color:var(--cream)}

/* build a course — one calm page, steps stacked. All selectors .bld- only. */
.bld-body{overflow-y:auto}
.bld-wrap{max-width:640px;margin:0 auto;padding:44px 28px 120px}
.bld-back{display:inline-block;margin:14px 0 0;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.45);text-decoration:none}
.bld-back:hover{color:var(--cream)}
.bld-h1{font-family:var(--serif);font-weight:400;font-size:28px;color:var(--cream);
  margin:26px 0 6px}
.bld-lede{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.7;
  color:rgba(236,226,210,.55);margin:0 0 34px}
.bld-step{margin-bottom:34px}
.bld-kicker{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pull);margin-bottom:12px}
.bld-q{width:100%;background:none;border:none;border-bottom:1px solid rgba(236,226,210,.22);
  color:#e7ddcb;font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.6;
  padding:6px 0 10px;resize:none;outline:none}
.bld-q::placeholder{color:rgba(236,226,210,.28)}
.bld-q:focus{border-bottom-color:var(--pull)}
.bld-row{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.bld-stepper{display:flex;align-items:center;gap:10px}
.bld-stepper button{background:none;border:1px solid rgba(236,226,210,.22);
  color:rgba(236,226,210,.7);font-family:var(--mono);font-size:14px;width:30px;height:30px;
  border-radius:3px;cursor:pointer;line-height:1}
.bld-stepper button:hover{border-color:var(--pull);color:var(--cream)}
.bld-stepper span#bldn{font-family:var(--serif);font-size:20px;color:var(--cream);
  min-width:34px;text-align:center}
.bld-lbl{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.42)}
.bld-chips{display:flex;flex-wrap:wrap;gap:6px}
.bld-chips button{background:none;border:1px solid rgba(236,226,210,.16);
  color:rgba(236,226,210,.55);font-family:var(--mono);font-size:10px;padding:6px 11px;
  border-radius:14px;cursor:pointer}
.bld-chips button:hover{border-color:var(--pull);color:var(--cream)}
.bld-chips button.on{border-color:var(--pull);color:var(--cream)}
.bld-lenses{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
@media(max-width:560px){.bld-lenses{grid-template-columns:1fr}}
.bld-lenses button{background:rgba(236,226,210,.02);border:1px solid rgba(236,226,210,.14);
  border-left:2px solid transparent;border-radius:3px;padding:13px 14px;cursor:pointer;
  text-align:left;font-family:var(--mono)}
.bld-lenses button:hover{border-color:rgba(236,226,210,.3)}
.bld-lenses button.on{border-left-color:var(--pull);border-color:rgba(236,226,210,.3);
  background:rgba(236,226,210,.05)}
.bld-lenses .ln{display:block;font-family:var(--serif);font-size:15.5px;color:var(--cream)}
.bld-lenses .ls{display:block;margin-top:5px;font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(236,226,210,.4);line-height:1.6}
.bld-house{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(236,226,210,.6)}
.bld-house input{accent-color:var(--pull)}
.bld-house:hover{color:var(--cream)}
.bld-picker{margin-top:14px;border-top:1px solid rgba(236,226,210,.1)}
.bld-note{padding:10px 0 4px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.35)}
.bld-bk{display:block;padding:9px 0;border-bottom:1px solid rgba(236,226,210,.07);
  cursor:pointer}
.bld-bk:hover .bt{color:var(--cream)}
.bld-bk input{accent-color:var(--pull);margin:0 10px 0 2px;vertical-align:2px}
.bld-bk .bt{font-family:var(--serif);font-size:14.5px;color:#e7ddcb}
.bld-bk .ba{margin-left:8px;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(236,226,210,.4)}
.bld-bk .bq{display:block;margin:3px 0 0 26px;font-family:var(--serif);font-style:italic;
  font-size:12px;color:rgba(236,226,210,.45)}
.bld-units{display:flex;gap:10px}
.bld-units button{background:none;border:1px solid rgba(236,226,210,.18);
  color:rgba(236,226,210,.55);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 18px;border-radius:3px;cursor:pointer}
.bld-units button:hover{border-color:var(--pull);color:var(--cream)}
.bld-units button.on{border-color:var(--pull);color:var(--cream)}
/* Worked examples under the question box. Serif, because they are sentences
   somebody might say, not controls — and a blank box is the hardest thing on
   this page. */
.bld-eglbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(236,226,210,.34);margin:16px 0 9px}
.bld-egs{display:flex;flex-wrap:wrap;gap:8px}
.bld-egs button{background:none;border:1px solid rgba(236,226,210,.16);
  color:rgba(236,226,210,.62);font-family:var(--serif);font-size:14px;
  line-height:1.35;text-align:left;padding:8px 13px;border-radius:3px;cursor:pointer}
.bld-egs button:hover{border-color:var(--pull);color:var(--cream)}

.bld-hint{font-family:var(--serif);font-style:italic;font-size:13px;
  color:rgba(236,226,210,.45);margin:10px 0 0}
.bld-go{background:var(--pull);border:none;color:#12100d;font-family:var(--mono);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:13px 30px;
  border-radius:3px;cursor:pointer}
.bld-go:hover{background:#ff5d1a}
.bld-go:disabled{opacity:.5;cursor:default}
.bld-progress{margin-top:16px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.5)}
.bld-err{margin-top:16px;border-left:2px solid var(--pull);padding:6px 0 6px 14px}
.bld-err .be{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.7;
  color:#e7ddcb}
.bld-err .be a{color:var(--pull)}
.bld-err .bp{margin:10px 0 0;font-size:10px;line-height:1.8;color:rgba(236,226,210,.5);
  white-space:pre-wrap;overflow-x:auto}

/* The certificate on a PASS. Same plate, read at full strength: this is the
   one thing in the room that cannot be taken on trust, so it is not greyed
   down to the weight of a footnote the way the refusal copy is. */
.bld-plate{margin-top:18px;border-left:2px solid #7CB88A;padding:10px 0 10px 14px}
.bld-plate .bp{margin:0;font-size:10.5px;line-height:1.85;color:rgba(236,226,210,.8);
  white-space:pre-wrap;overflow-x:auto}
.bld-plate .bp b{color:#7CB88A;font-weight:500}
.bld-plate .bld-open{display:inline-block;margin-top:14px;color:var(--pull);
  font-size:12px;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid var(--pull)}
.bld-plate .bld-open:hover{color:#ff7a3d;border-color:#ff7a3d}

/* The mark in a header, at reading size.
   Every screen but the home used to typeset it — a 20px glyph beside `phon ·
   analog²` set in the mono face — which the brand kit forbids in as many words:
   the wordmark is always the master artwork and is never re-set in a font. One
   file obeyed and seven did not, which is the ordinary shape of a rule that
   lives four directories from the people building pages. */
.wm{display:block;width:104px;height:auto}
#rail .brand .wm,.brand .wm,.home-brand .wm{width:96px}

/* ── the master wordmark (brand kit v3, 25 Aug 2026) ──────────────────────
   The home screen carries the ARTWORK, not a typeset lockup. Brand-kit law:
   the wordmark is always the master file, never re-set in a font — so this is
   phon-master-green.svg itself, bundled in app/ui/brand/ and fetched from
   nowhere. The mark already says "with analog²", which is why the typeset
   line beside it went.

   Two accents now, in two different jobs, and they must not swap:
     PHON GREEN #C8E812  is the BRAND — the mark, and the unit's one lamp.
     --pull   #FF4A00    is the INTERFACE — the current thing, the margin
                         rule, the live receipt.
   The reading pane keeps its rule of one orange element at rest per viewport;
   the mark is not one of them, because it is not part of the reading. */
#wake img.glyph{width:min(260px,52vw);height:auto;display:block}
.home-brand{gap:0;align-items:flex-start}
.home-brand .home-mark{width:min(190px,44vw);height:auto;display:block}

/* ── the inscription ──────────────────────────────────────────────────────
   Shown once, over an already-open room. Deliberately quiet: no red, no
   badge, no countdown, nothing that reads as a demand. "not now" is styled
   as a real choice rather than a dismissal, because it is one. */
#inscribe{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(11,10,9,.86);backdrop-filter:blur(3px)}
#inscribe.on{display:flex}
.ins-sheet{width:min(460px,90vw);background:var(--night);border:1px solid rgba(236,226,210,.14);
  padding:30px 32px 26px;animation:wakein .5s ease-out both}
.ins-eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(236,226,210,.32);margin-bottom:16px}
.ins-sheet h2{font-family:var(--serif);font-weight:300;font-size:23px;line-height:1.25;
  margin:0 0 12px;color:var(--sheet)}
.ins-sheet p{font-size:12px;line-height:1.75;color:rgba(236,226,210,.55);margin:0 0 18px}
.ins-sheet p.ins-quiet{margin-top:22px;color:rgba(236,226,210,.42)}
.ins-sheet label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.36);margin-bottom:18px}
.ins-sheet input,.ins-sheet textarea{display:block;width:100%;margin-top:7px;padding:9px 11px;
  background:rgba(236,226,210,.03);border:1px solid rgba(236,226,210,.16);color:var(--cream);
  font-family:var(--mono);font-size:13px;letter-spacing:0;text-transform:none}
.ins-sheet textarea{resize:vertical;line-height:1.7;letter-spacing:.06em}
.ins-sheet input:focus,.ins-sheet textarea:focus{outline:none;border-color:var(--pull)}
.ins-msg{font-size:11px;line-height:1.6;min-height:17px;margin:-6px 0 14px;
  color:rgba(236,226,210,.5)}
.ins-msg .or{color:var(--pull)}
.ins-row{display:flex;align-items:center;gap:16px}
.ins-sheet button{background:none;border:1px solid var(--pull);color:var(--cream);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 16px;cursor:pointer}
.ins-sheet button:hover{background:rgba(255,74,0,.09)}
.ins-sheet button.ins-plain{border-color:transparent;color:rgba(236,226,210,.42);padding-left:0}
.ins-sheet button.ins-plain:hover{background:none;color:var(--cream)}
#plateline .ins-open{cursor:pointer;border-bottom:1px dotted rgba(255,74,0,.5)}

/* ── the shelf: what the books do to each other ───────────────────────────
   Sibling of the reading room, not a new visual world. The one new device is
   the argument line: a kind, a book, and the reason — because a link without
   its reason is a coincidence, and the reason is the part worth reading. */
.shf-body{overflow-y:auto}
.shf-app{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
@media(max-width:820px){.shf-app{grid-template-columns:1fr}}
.shf-back{display:block;margin:0 16px 14px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.4);text-decoration:none}
.shf-back:hover{color:var(--cream)}
.shf-railhead{margin:0 16px 10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(236,226,210,.32)}
.shf-qlist{display:flex;flex-direction:column;gap:1px;padding-bottom:12px}
.shf-q{display:block;width:100%;text-align:left;background:none;border:0;
  border-left:2px solid transparent;padding:9px 16px;cursor:pointer;font-family:var(--mono);
  color:rgba(236,226,210,.62);transition:.14s}
.shf-q:hover{background:rgba(236,226,210,.04);color:var(--cream)}
.shf-q.on{border-left-color:var(--pull);background:rgba(255,74,0,.07);color:var(--cream)}
.shf-q:focus-visible{outline:2px solid var(--pull);outline-offset:-2px}
.shf-qt{display:block;font-family:var(--serif);font-size:14px;line-height:1.3}
.shf-qn{display:block;font-size:9.5px;letter-spacing:.08em;color:rgba(236,226,210,.34);margin-top:3px}
.shf-qn b{color:var(--pull);font-weight:500}
/* the subject bands — the teacher's axis. Quiet by design: the question is
   what a person reads, the subject is only how they found it. */
.shf-band{display:flex;flex-direction:column;gap:1px}
.shf-band + .shf-band{margin-top:14px}
.shf-bandh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:0 16px 6px;padding-bottom:5px;border-bottom:1px solid rgba(236,226,210,.09);
  cursor:default}
.shf-bandl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(236,226,210,.5)}
.shf-bandn{font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  color:rgba(236,226,210,.26);white-space:nowrap}
/* a question the house asks that no book onboard reaches yet. Shown, not
   hidden — a rail that dropped them would make every unit look finished. */
.shf-q.none .shf-qt{color:rgba(236,226,210,.4)}
.shf-q.none .shf-qn{font-style:italic;letter-spacing:.02em}
/* display:flex beats [hidden]'s display:none, so say it again louder — this
   is the bug that shipped the folded questions unfolded */
/* the second axis: questions shelved in another band that also answer to
   this subject. Marked so they read as visitors, not as this band's own. */
.shf-also{display:flex;flex-direction:column;gap:1px;
  border-left:1px solid rgba(236,226,210,.12);margin-left:16px}
.shf-also[hidden]{display:none}
.shf-also .shf-q{padding-left:14px}
.shf-alsobtn{display:block;width:100%;text-align:left;background:none;border:0;
  padding:6px 16px 8px;cursor:pointer;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;color:rgba(236,226,210,.3);transition:.14s}
.shf-alsobtn:hover{color:rgba(236,226,210,.62)}
.shf-alsobtn:focus-visible{outline:2px solid var(--pull);outline-offset:-2px}
.shf-waiting{display:flex;flex-direction:column;gap:1px}
.shf-waiting[hidden]{display:none}
.shf-waitbtn{display:block;width:100%;text-align:left;background:none;border:0;
  padding:6px 16px 8px;cursor:pointer;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;color:rgba(236,226,210,.28);transition:.14s}
.shf-waitbtn:hover{color:rgba(236,226,210,.6)}
.shf-waitbtn:focus-visible{outline:2px solid var(--pull);outline-offset:-2px}
.shf-note{margin:14px 16px;padding-top:12px;border-top:1px solid rgba(236,226,210,.09);
  font-size:10px;line-height:1.7;color:rgba(236,226,210,.3);font-style:italic}

.shf-main{padding:34px clamp(18px,4vw,46px) 90px;max-width:940px}
.shf-head{margin-bottom:30px}
.shf-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,226,210,.32)}
.shf-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.6vw,34px);
  line-height:1.14;margin:8px 0 10px;color:var(--sheet);max-width:22ch}
.shf-count{font-size:11px;letter-spacing:.06em;color:rgba(236,226,210,.44)}
.shf-count b{color:var(--pull)}

.shf-books{display:flex;flex-direction:column;gap:1px;background:rgba(236,226,210,.07)}
.shf-book{background:var(--night);padding:20px clamp(14px,2.4vw,22px);transition:background .5s}
.shf-book.shf-flash{background:rgba(255,74,0,.07)}
.shf-book h2{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.2;
  margin:0;color:var(--sheet)}
.shf-by{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(236,226,210,.36);margin-top:4px}
.shf-contrib{font-size:13px;line-height:1.68;color:rgba(236,226,210,.72);margin:12px 0 0;max-width:72ch}
.shf-anchors{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.shf-anchor{font-size:9.5px;letter-spacing:.09em;color:rgba(236,226,210,.42);text-decoration:none;
  border:1px solid rgba(236,226,210,.14);border-radius:2px;padding:3px 7px}
.shf-anchor:hover{border-color:var(--pull);color:var(--cream)}

.shf-args,.shf-links{margin-top:14px;padding-top:12px;border-top:1px solid rgba(236,226,210,.08)}
.shf-argh{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.3);margin-bottom:8px}
.shf-arg{display:grid;grid-template-columns:6.6rem 1fr;gap:2px 12px;padding:6px 0;
  border-top:1px solid rgba(236,226,210,.05)}
.shf-arg:first-child{border-top:0}
@media(max-width:640px){.shf-arg{grid-template-columns:1fr}}
.shf-argk{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--pull);
  padding-top:2px}
.shf-argt,.shf-jump{font-size:12.5px;color:var(--cream);text-decoration:none}
.shf-jump{border-bottom:1px dotted rgba(255,74,0,.5)}
.shf-jump:hover{border-bottom-color:var(--pull)}
.shf-argn{grid-column:2;font-size:11.5px;line-height:1.6;color:rgba(236,226,210,.46);max-width:70ch}
@media(max-width:640px){.shf-argn{grid-column:1}}
.shf-more{margin-top:14px;background:none;border:1px solid rgba(236,226,210,.16);
  color:rgba(236,226,210,.5);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 11px;border-radius:2px;cursor:pointer}
.shf-more:hover{border-color:var(--pull);color:var(--cream)}
.shf-more:focus-visible{outline:2px solid var(--pull);outline-offset:2px}
.shf-empty{font-size:12px;line-height:1.7;color:rgba(236,226,210,.38);padding:14px 16px;max-width:46ch}
.shf-plateline{position:fixed;bottom:0;left:290px;right:0;padding:8px 34px;
  background:rgba(18,16,13,.94);backdrop-filter:blur(4px);border-top:1px solid rgba(236,226,210,.08);
  font-size:10px;letter-spacing:.06em;color:rgba(236,226,210,.32)}
.shf-plateline b{color:rgba(236,226,210,.6)}
@media(max-width:820px){.shf-plateline{left:0}}
.shf-rest-btn{margin-top:8px;background:none;border:0;color:rgba(236,226,210,.4);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  cursor:pointer;padding:4px 0}
.shf-rest-btn:hover{color:var(--pull)}
.shf-rest-btn:focus-visible{outline:2px solid var(--pull);outline-offset:2px}

/* ── choosing books, and the tray they fall into ──────────────────────────
   The shelf is already the course specification: the question is the shelf's
   question and the books are the ones a person just read about. The tray only
   asks the two things the shelf cannot know — how many weeks, and who is
   reading. */
.shf-book{position:relative}
.shf-book.picked{background:rgba(255,74,0,.05);box-shadow:inset 3px 0 0 var(--pull)}
.shf-pick{position:absolute;top:18px;right:clamp(14px,2.4vw,22px);display:flex;align-items:center;
  gap:7px;cursor:pointer;user-select:none}
.shf-pick input{position:absolute;opacity:0;width:0;height:0}
.shf-tick{width:15px;height:15px;border:1.5px solid rgba(236,226,210,.28);border-radius:2px;
  display:grid;place-items:center;transition:.14s}
.shf-tick::after{content:"";width:7px;height:3.5px;border-left:2px solid var(--night);
  border-bottom:2px solid var(--night);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.shf-pick input:checked + .shf-tick{background:var(--pull);border-color:var(--pull)}
.shf-pick input:checked + .shf-tick::after{opacity:1}
.shf-pick input:focus-visible + .shf-tick{outline:2px solid var(--pull);outline-offset:2px}
.shf-picklbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.34)}
.shf-pick:hover .shf-tick{border-color:var(--pull)}
.shf-pick:hover .shf-picklbl{color:var(--cream)}
.shf-lede{font-size:12.5px;line-height:1.75;color:rgba(236,226,210,.5);margin:14px 0 0;max-width:66ch}
.shf-lede b{color:rgba(236,226,210,.8);font-weight:400}

.shf-tray{position:fixed;left:290px;right:0;bottom:0;transform:translateY(101%);
  transition:transform .24s cubic-bezier(.22,.61,.36,1);background:#15120f;
  border-top:2px solid var(--pull);z-index:12;max-height:60vh;overflow-y:auto}
.shf-tray.on{transform:translateY(0)}
@media(max-width:820px){.shf-tray{left:0}}
.shf-tray-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(14px,2.6vw,26px);
  padding:14px clamp(14px,3vw,34px)}
.shf-tray-books{flex:1 1 16rem;min-width:0}
.shf-tray-n{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--pull)}
.shf-tray-t{font-size:11.5px;line-height:1.6;color:rgba(236,226,210,.55);margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.shf-tray-opts{display:flex;gap:14px}
.shf-tray-opts label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.34);display:grid;gap:4px}
.shf-tray-opts select{background:rgba(236,226,210,.04);border:1px solid rgba(236,226,210,.18);
  color:var(--cream);font-family:var(--mono);font-size:11.5px;padding:5px 7px;border-radius:2px;
  letter-spacing:0;text-transform:none}
.shf-tray-opts select:focus-visible{outline:2px solid var(--pull);outline-offset:1px}
.shf-build{background:var(--pull);border:0;color:#1a0d06;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:10px 16px;border-radius:2px;
  cursor:pointer;white-space:nowrap}
.shf-build:hover{filter:brightness(1.12)}
.shf-build:disabled{background:rgba(236,226,210,.12);color:rgba(236,226,210,.4);cursor:default}
.shf-build:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.shf-tray-out{padding:0 clamp(14px,3vw,34px) 16px}
/* why a lens is unavailable. Never hides the option — a teacher who reached
   for "no scripture" should learn why it cannot be applied, not watch it
   vanish. */
/* the book's own phrasing, when it differs from the house question. Near
   duplicates collapse to one id on purpose — Descartes asks it one way and
   Hume another — and this is where that stops being invisible. */
.shf-asked{font-size:10px;line-height:1.7;color:rgba(236,226,210,.4);
  margin:-6px 0 10px;font-style:italic}
.shf-asked b{color:rgba(236,226,210,.62);font-weight:400;font-family:var(--serif);
  font-style:normal;font-size:12px}
.shf-lens-why{flex-basis:100%;font-size:10px;line-height:1.6;font-style:italic;
  color:rgba(236,226,210,.42);max-width:56ch;margin-top:2px}
.shf-tray-opts select option:disabled{color:rgba(236,226,210,.3)}
.shf-note-box{border:1px solid rgba(236,226,210,.16);border-left:2px solid rgba(236,226,210,.3);
  padding:11px 13px;font-size:11.5px;line-height:1.7;color:rgba(236,226,210,.6);max-width:74ch}
.shf-note-box b{color:var(--cream);font-weight:500}
.shf-note-box a{color:var(--pull)}
.shf-note-box.shf-good{border-left-color:#7CB88A}
.shf-note-box.shf-bad{border-left-color:var(--pull)}
/* what the house could not do while building — a lens whose promise the shelf
   could not keep. Said beside the course, not instead of it. */
.shf-warn{margin:7px 0 0;font-style:italic;color:var(--pull)}
.shf-plate{margin:9px 0 0;font-size:10px;line-height:1.6;color:rgba(236,226,210,.42);
  white-space:pre-wrap;max-height:14rem;overflow:auto}

/* ── the marking point ────────────────────────────────────────────────────
   docs/STUDY-LEDGER-AND-MARKING.md §3: machine left, human right, side by
   side and never blended. The rule is kept in the layout itself — two columns
   with a rule down the middle, and no styling anywhere that turns the left
   one into a grade: no score, no bar, no total, and a verdict set in the same
   small mono the wake log uses, because that is what it is. A log line.
   All selectors .mk- only. */
.mk-app{display:grid;grid-template-columns:290px 1fr;height:100vh}
.mk-back{display:block;margin:2px 18px 14px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.4);text-decoration:none}
.mk-back:hover{color:var(--cream)}
.mk-railhead{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.3);padding:0 18px 10px}
.mk-queue{display:flex;flex-direction:column;gap:1px}
.mk-q{display:block;width:100%;text-align:left;background:none;border:0;
  border-left:2px solid transparent;padding:10px 16px;cursor:pointer;
  font-family:var(--mono);color:rgba(236,226,210,.7);transition:.14s}
.mk-q:hover{background:rgba(236,226,210,.04);color:var(--cream)}
.mk-q.on{border-left-color:var(--pull);background:rgba(255,74,0,.07);color:var(--cream)}
.mk-q:focus-visible{outline:2px solid var(--pull);outline-offset:-2px}
/* work a person has marked is work the queue is finished with */
.mk-q.done{opacity:.42}
.mk-qw{display:block;font-family:var(--serif);font-size:14px;line-height:1.3;color:var(--sheet)}
.mk-qm{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(236,226,210,.32);margin-top:3px}
.mk-qn{display:block;font-size:9.5px;letter-spacing:.06em;color:rgba(236,226,210,.44);
  margin-top:4px}
.mk-q.done .mk-qn{color:rgba(236,226,210,.34)}
/* the complaint the facilitator is owed, in the ledger's own words */
.mk-qworst{display:block;font-size:9.5px;line-height:1.55;color:rgba(255,74,0,.72);
  margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.mk-note{margin:14px 16px;padding-top:12px;border-top:1px solid rgba(236,226,210,.09);
  font-size:10px;line-height:1.7;color:rgba(236,226,210,.3);font-style:italic}
.mk-empty{font-size:12px;line-height:1.7;color:rgba(236,226,210,.38);padding:14px 16px;
  max-width:46ch}

.mk-main{overflow-y:auto}
#mkview{max-width:1040px;margin:0 auto;padding:44px clamp(18px,3vw,40px) 110px}
.mk-head{margin-bottom:26px}
.mk-eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,226,210,.32)}
.mk-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3vw,30px);
  line-height:1.14;margin:8px 0 8px;color:var(--sheet)}
.mk-lede{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.75;
  color:rgba(236,226,210,.5);max-width:58ch}
.mk-ids{font-size:9px;letter-spacing:.1em;color:rgba(236,226,210,.28)}
.mk-carry{color:rgba(236,226,210,.42);text-decoration:none;
  border-bottom:1px dotted rgba(255,74,0,.5)}
.mk-carry:hover{color:var(--pull)}
/* what the learner wrote. Set in the reading face, at reading size: it is
   prose a person is about to judge, not a field of a record. */
.mk-answer{font-family:var(--serif);font-weight:300;font-size:16.5px;line-height:1.85;
  color:rgba(236,226,210,.88);white-space:pre-wrap;max-width:70ch;
  border-left:2px solid rgba(236,226,210,.16);padding:2px 0 2px 18px;margin-bottom:34px}

.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,38px)}
.mk-split .mk-hand{border-left:1px solid rgba(236,226,210,.1);
  padding-left:clamp(20px,3vw,38px)}
@media(max-width:900px){
  .mk-split{grid-template-columns:1fr}
  .mk-split .mk-hand{border-left:0;padding-left:0;margin-top:34px;
    border-top:1px solid rgba(236,226,210,.1);padding-top:24px}
}
.mk-colk{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.3);margin-bottom:16px}
.mk-subk{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,226,210,.26);margin:22px 0 8px}
/* one check: a name, a dotted leader, a verdict, and the reason under it */
.mk-check{display:flex;flex-wrap:wrap;align-items:baseline;margin-bottom:14px}
.mk-cn{font-size:10.5px;letter-spacing:.08em;color:rgba(236,226,210,.7)}
.mk-lead{flex:1 1 2rem;min-width:1rem;border-bottom:1px dotted rgba(236,226,210,.2);
  transform:translateY(-3px);margin:0 8px}
.mk-cv{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(236,226,210,.5)}
/* the machine could stand behind it: PASS, and the strip checks' ENGAGED and
   MET, which are the same claim in the vocabulary those checks are allowed */
.mk-cv.ok{color:#7CB88A}
/* the pack says otherwise, and the pack can */
.mk-cv.no{color:var(--pull)}
/* NO MECHANICAL EVIDENCE — read this row. Amber and not the FAIL colour, on
   purpose: gates/src/strip.rs says a NOT_FOUND is "not a finding against the
   learner", and a page that painted it like a fabricated quotation would be
   grading a child's prose in CSS. */
.mk-cv.mind{color:#D8A24A}
/* nothing was checked — a fact about the course, not about the answer, so it
   sits back at the weight of the labels around it */
.mk-cv.mute{color:rgba(236,226,210,.34)}
/* a verdict this page has never heard of is shown as it arrived and ranked as
   nothing */
.mk-cv.other{color:rgba(236,226,210,.55)}
.mk-cd{flex-basis:100%;min-width:100%;font-size:11px;line-height:1.65;color:rgba(236,226,210,.42);
  margin-top:5px;max-width:52ch;word-break:break-word}
.mk-rcpt{margin-bottom:14px}
.mk-rspan{font-family:var(--serif);font-size:13.5px;line-height:1.6;
  color:rgba(236,226,210,.72);max-width:52ch}
.mk-rmeta{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,226,210,.34);margin-top:4px}
.mk-quiet{font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1.75;
  color:rgba(236,226,210,.38);max-width:52ch}
.mk-nomark{margin-top:24px;padding-top:14px;border-top:1px solid rgba(236,226,210,.08)}

/* marks already written. A mark is a person's sentence, so it is set as one. */
.mk-made{border-left:2px solid var(--pull);padding:2px 0 2px 14px;margin-bottom:18px}
.mk-madev{font-family:var(--serif);font-size:17px;color:var(--cream)}
.mk-madec{font-family:var(--serif);font-weight:300;font-size:14px;line-height:1.75;
  color:rgba(236,226,210,.78);margin-top:5px;max-width:52ch;white-space:pre-wrap}
.mk-madew{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,226,210,.32);margin-top:7px}

.mk-form{margin-top:6px;display:flex;flex-direction:column;gap:16px;max-width:44ch}
.mk-f{display:grid;gap:6px}
.mk-fl{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(236,226,210,.34)}
.mk-f input,.mk-f textarea{width:100%;background:none;border:none;
  border-bottom:1px solid rgba(236,226,210,.22);color:var(--cream);
  font-family:var(--mono);font-size:13px;line-height:1.7;padding:6px 0;resize:vertical}
.mk-f textarea{font-family:var(--serif);font-size:14.5px}
.mk-f input::placeholder,.mk-f textarea::placeholder{color:rgba(236,226,210,.26)}
.mk-f input:focus,.mk-f textarea:focus{outline:none;border-bottom-color:var(--pull)}
.mk-go{align-self:flex-start;background:var(--pull);border:none;color:#12100d;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;padding:10px 18px;border-radius:2px;cursor:pointer}
.mk-go:hover{background:#ff5d1a}
.mk-go:disabled{opacity:.5;cursor:default}
.mk-go:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.mk-said{font-family:var(--serif);font-style:italic;font-size:13px;line-height:1.7;
  color:rgba(236,226,210,.6);border-left:2px solid rgba(236,226,210,.3);
  padding-left:12px;max-width:52ch}
.mk-said[hidden]{display:none}

.mk-plateline{position:fixed;bottom:0;left:290px;right:0;padding:8px 34px;
  background:rgba(18,16,13,.94);backdrop-filter:blur(4px);
  border-top:1px solid rgba(236,226,210,.08);
  font-size:10px;letter-spacing:.06em;color:rgba(236,226,210,.32)}
.mk-plateline b{color:rgba(236,226,210,.6)}
@media(max-width:820px){.mk-plateline{left:0}}

/* ── the writing desk ─────────────────────────────────────────────────────
   docs/STUDY-LEDGER-AND-MARKING.md §6 step 3, the learner's side of the
   ledger. The rail chooses a question; the main column shows it, the passages
   it stands on, and one box.

   Nothing here ranks. There is no progress bar, no score, no tick against a
   question already answered and no colour that reads as a grade — a learner
   who can see they are "3 of 5 done" is being marked by a layout. The one
   place a verdict appears is the strip returned after a write, which reuses
   the marking point's .mk- classes unchanged so that a learner and the person
   marking them read one row under one name.
   All selectors .an- only. */
.an-app{display:grid;grid-template-columns:300px 1fr;height:100vh}
.an-back{display:block;margin:2px 18px 14px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.4);text-decoration:none}
.an-back:hover{color:var(--cream)}
.an-railhead{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.3);padding:14px 18px 8px}

.an-who{padding:0 16px 4px}
.an-who input{width:100%;box-sizing:border-box;background:rgba(236,226,210,.05);
  border:1px solid rgba(236,226,210,.14);color:var(--sheet);font-family:var(--serif);
  font-size:14px;padding:8px 10px;border-radius:2px}
.an-who input:focus{outline:none;border-color:rgba(255,74,0,.55)}
.an-whonote{font-size:9.5px;line-height:1.65;color:rgba(236,226,210,.3);
  margin-top:6px;font-style:italic}

.an-sel{width:calc(100% - 32px);margin:0 16px;box-sizing:border-box;
  background:rgba(236,226,210,.05);border:1px solid rgba(236,226,210,.14);
  color:var(--sheet);font-family:var(--mono);font-size:11px;padding:7px 8px;border-radius:2px}
.an-sel:focus{outline:none;border-color:rgba(255,74,0,.55)}

.an-units{display:flex;flex-direction:column;gap:1px;margin-top:8px}
.an-unit{display:block;width:100%;text-align:left;background:none;border:0;
  border-left:2px solid transparent;padding:8px 16px;cursor:pointer;
  font-family:var(--mono);color:rgba(236,226,210,.62);transition:.14s}
.an-unit:hover{background:rgba(236,226,210,.04);color:var(--cream)}
.an-unit.on{border-left-color:var(--pull);background:rgba(255,74,0,.07);color:var(--cream)}
.an-unit:focus-visible{outline:2px solid var(--pull);outline-offset:-2px}
.an-unit .n{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(236,226,210,.34)}
.an-unit .t{display:block;font-family:var(--serif);font-size:13px;line-height:1.3;
  color:var(--sheet);margin-top:2px}

.an-prompts{display:flex;flex-direction:column;gap:1px}
.an-p{display:block;width:100%;text-align:left;background:none;border:0;
  border-left:2px solid transparent;padding:9px 16px;cursor:pointer;transition:.14s}
.an-p:hover{background:rgba(236,226,210,.04)}
.an-p.on{border-left-color:var(--pull);background:rgba(255,74,0,.07)}
.an-p:focus-visible{outline:2px solid var(--pull);outline-offset:-2px}
.an-pk{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.34)}
.an-p.on .an-pk{color:rgba(255,74,0,.8)}
.an-pt{display:block;font-family:var(--serif);font-size:12.5px;line-height:1.5;
  color:rgba(236,226,210,.68);margin-top:3px}
.an-p.on .an-pt{color:var(--sheet)}

.an-note{margin:16px;padding-top:12px;border-top:1px solid rgba(236,226,210,.09);
  font-size:10px;line-height:1.7;color:rgba(236,226,210,.3);font-style:italic}
.an-empty{font-size:12px;line-height:1.75;color:rgba(236,226,210,.4);padding:14px 16px;
  max-width:52ch}
.an-empty code{font-family:var(--mono);font-size:10.5px;color:rgba(255,74,0,.72)}

.an-main{overflow-y:auto}
#anview{max-width:820px;margin:0 auto;padding:44px clamp(18px,3vw,40px) 140px}
.an-head{margin-bottom:30px}
.an-eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,226,210,.32)}
.an-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.4vw,26px);
  line-height:1.34;margin:10px 0 8px;color:var(--sheet);max-width:34ch}
.an-lede{font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.75;
  color:rgba(236,226,210,.5);max-width:58ch}
.an-ids{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  color:rgba(236,226,210,.26)}

.an-passages{margin-bottom:34px}
.an-q{margin:0 0 18px;padding:2px 0 2px 18px;border-left:2px solid rgba(236,226,210,.16)}
.an-qt{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.8;
  color:rgba(236,226,210,.8)}
.an-qc{font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  color:rgba(236,226,210,.3);margin-top:6px}
.an-quietnote{font-size:11px;line-height:1.75;color:rgba(236,226,210,.34);
  font-style:italic;max-width:56ch}

.an-write{margin-bottom:34px}
.an-write textarea{width:100%;box-sizing:border-box;min-height:15rem;resize:vertical;
  background:rgba(236,226,210,.04);border:1px solid rgba(236,226,210,.14);
  border-radius:2px;padding:16px 18px;color:var(--sheet);
  font-family:var(--serif);font-weight:300;font-size:16px;line-height:1.85}
.an-write textarea:focus{outline:none;border-color:rgba(255,74,0,.5);
  background:rgba(236,226,210,.055)}
.an-write textarea:disabled{opacity:.55}
.an-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:10px;flex-wrap:wrap}
/* A character count, not a target. It goes amber only at the hub's own cap,
   because that is the only number here that is a fact rather than an opinion
   about how long an answer should be. */
.an-count{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:rgba(236,226,210,.3)}
.an-count.over{color:var(--pull)}
.an-send{background:var(--pull);border:0;border-radius:2px;color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 18px;transition:.14s}
.an-send:hover:not(:disabled){filter:brightness(1.12)}
.an-send:disabled{background:rgba(236,226,210,.1);color:rgba(236,226,210,.34);cursor:default}
.an-send:focus-visible{outline:2px solid var(--sheet);outline-offset:2px}
.an-said{margin-top:12px;font-size:12.5px;line-height:1.7;max-width:60ch}
.an-said.ok{color:rgba(124,184,138,.9)}
.an-said.no{color:var(--pull)}

.an-done{border-top:1px solid rgba(236,226,210,.1);padding-top:26px}
.an-doneline{font-family:var(--serif);font-size:14.5px;line-height:1.7;
  color:rgba(236,226,210,.78);margin:8px 0 4px;max-width:60ch}
.an-strip{margin-top:22px}
.an-carry{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(236,226,210,.42);
  text-decoration:none;border-bottom:1px dotted rgba(255,74,0,.5)}
.an-carry:hover{color:var(--pull)}

@media(max-width:820px){
  .an-app{grid-template-columns:1fr;height:auto}
  #rail{border-right:0;border-bottom:1px solid rgba(236,226,210,.1)}
}
/* The desk, from the studio rail. Sits with the back link's weight rather
   than a button's: the studio is where a unit is read, and answering one of
   its questions is a step out of the page, not a call to action on it. */
.an-desklink{margin-top:18px;color:rgba(236,226,210,.45);
  border-bottom:1px dotted rgba(255,74,0,.45);display:inline-block;width:auto}
.an-desklink:hover{color:var(--pull)}

/* ── the carry ────────────────────────────────────────────────────────────
   docs/STUDY-LEDGER-AND-MARKING.md §2(b). Two faces side by side, out on the
   left and in on the right, because they are one act seen from either end and
   a facilitator on a Sunday is doing both.

   Nothing here is styled as a transfer in progress: no spinner that implies a
   connection, no progress bar, no cloud. A bundle is a file and the page
   should look like a desk with two piles on it.
   All selectors .cy- only. */
.cy-app{display:grid;grid-template-columns:290px 1fr;height:100vh}
.cy-back{display:block;margin:2px 18px 14px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.4);text-decoration:none}
.cy-back:hover{color:var(--cream)}
.cy-railhead{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.3);padding:0 18px 8px}
.cy-people{display:flex;flex-direction:column;gap:1px}
.cy-person{display:block;width:100%;text-align:left;background:none;border:0;
  border-left:2px solid transparent;padding:9px 16px;cursor:pointer;transition:.14s}
.cy-person:hover{background:rgba(236,226,210,.04)}
.cy-person.on{border-left-color:var(--pull);background:rgba(255,74,0,.07)}
.cy-person:focus-visible{outline:2px solid var(--pull);outline-offset:-2px}
.cy-pn{display:block;font-family:var(--serif);font-size:14px;color:var(--sheet)}
.cy-pm{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(236,226,210,.32);margin-top:3px}
.cy-note{margin:16px;padding-top:12px;border-top:1px solid rgba(236,226,210,.09);
  font-size:10px;line-height:1.7;color:rgba(236,226,210,.3);font-style:italic}
.cy-empty{font-size:11.5px;line-height:1.7;color:rgba(236,226,210,.38);
  padding:8px 16px;max-width:46ch}

.cy-main{overflow-y:auto}
#cyview{max-width:1180px;margin:0 auto;padding:44px clamp(18px,3vw,40px) 120px}
.cy-head{margin-bottom:34px;max-width:64ch}
.cy-eyebrow{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(236,226,210,.32)}
.cy-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.8vw,29px);
  line-height:1.2;margin:9px 0 10px;color:var(--sheet)}
.cy-lede{font-family:var(--serif);font-size:13.5px;line-height:1.8;
  color:rgba(236,226,210,.5);max-width:58ch}

.cy-two{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3.4vw,44px)}
.cy-two .cy-face:last-child{border-left:1px solid rgba(236,226,210,.1);
  padding-left:clamp(24px,3.4vw,44px)}
@media(max-width:940px){
  .cy-two{grid-template-columns:1fr}
  .cy-two .cy-face:last-child{border-left:0;padding-left:0;margin-top:38px;
    border-top:1px solid rgba(236,226,210,.1);padding-top:30px}
  .cy-app{grid-template-columns:1fr;height:auto}
}
.cy-facek{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(236,226,210,.3);margin-bottom:12px}
.cy-face h2{font-family:var(--serif);font-weight:300;font-size:17px;line-height:1.4;
  margin:0 0 10px;color:var(--sheet)}
.cy-face .cy-lede{font-size:12.5px;line-height:1.8;font-style:normal;max-width:46ch}

/* Learner on its own line, then the span and the button on the next. A name
   is the decision; the dates are a qualification of it, and a three-up row
   that wraps unpredictably reads as three equal questions. */
.cy-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;
  align-items:end;margin:20px 0 8px}
.cy-lab{display:flex;flex-direction:column;gap:5px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(236,226,210,.32)}
.cy-lab:first-child{grid-column:1 / -1}
@media(max-width:560px){
  .cy-form{grid-template-columns:1fr}
  .cy-lab:first-child{grid-column:auto}
}
.cy-lab input{background:rgba(236,226,210,.05);border:1px solid rgba(236,226,210,.14);
  border-radius:2px;color:var(--sheet);font-family:var(--serif);font-size:14px;
  padding:8px 10px;letter-spacing:normal;text-transform:none}
.cy-lab input:focus{outline:none;border-color:rgba(255,74,0,.55)}
.cy-btn{background:var(--pull);border:0;border-radius:2px;color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 16px;transition:.14s;white-space:nowrap}
.cy-btn:hover:not(:disabled){filter:brightness(1.12)}
.cy-btn:disabled{background:rgba(236,226,210,.1);color:rgba(236,226,210,.34);cursor:default}
.cy-btn:focus-visible{outline:2px solid var(--sheet);outline-offset:2px}
.cy-save{margin-top:16px}
.cy-hint{font-size:10.5px;line-height:1.7;color:rgba(236,226,210,.3);
  font-style:italic;margin-top:8px;max-width:48ch}
.cy-said{margin-top:14px;font-size:12.5px;line-height:1.7;max-width:52ch}
.cy-said.ok{color:rgba(124,184,138,.9)}
.cy-said.no{color:var(--pull)}

/* What the file holds, or claims to. Set as a plain statement of contents —
   there is nothing to rank here and nothing that is a score. */
.cy-doc{margin-top:22px;padding:16px 18px;border:1px solid rgba(236,226,210,.13);
  border-radius:2px;background:rgba(236,226,210,.03)}
.cy-docline{font-family:var(--serif);font-size:14.5px;line-height:1.6;color:var(--sheet)}
.cy-counts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  color:rgba(236,226,210,.5)}
.cy-ids{font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  color:rgba(236,226,210,.26);margin-top:8px;word-break:break-all}
.cy-warn{margin-top:10px;font-size:11.5px;line-height:1.7;color:#D8A24A;
  font-style:italic;max-width:46ch}

.cy-drop{display:block;margin-top:20px;padding:22px 18px;cursor:pointer;
  border:1px dashed rgba(236,226,210,.22);border-radius:2px;text-align:center;
  transition:.14s}
.cy-drop:hover,.cy-drop.over{border-color:rgba(255,74,0,.6);
  background:rgba(255,74,0,.05)}
.cy-dropk{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(236,226,210,.5)}
.cy-dropn{display:block;font-family:var(--serif);font-size:13px;
  color:rgba(236,226,210,.42);margin-top:7px;word-break:break-all}

/* The merge, in words. Every line is rendered even at zero — a merge that does
   not say what it LEFT ALONE is indistinguishable from an overwrite, and the
   fourth line is the one that matters most on a page where two homes' teachers
   have both written on the same child's work. */
.cy-merged{border-color:rgba(124,184,138,.3)}
.cy-merge{margin:12px 0 0;padding-left:1.1rem;list-style:none}
.cy-merge li{position:relative;font-size:12.5px;line-height:1.85;
  color:rgba(236,226,210,.72)}
.cy-merge li::before{content:"·";position:absolute;left:-.9rem;
  color:rgba(236,226,210,.34)}
.cy-merge b{color:var(--sheet);font-weight:500}
.cy-merge i{color:rgba(236,226,210,.5)}
.cy-notes{margin-top:12px;font-size:11.5px;line-height:1.75;
  color:rgba(236,226,210,.42);font-style:italic}
.cy-carry{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(236,226,210,.42);
  text-decoration:none;border-bottom:1px dotted rgba(255,74,0,.5)}
.cy-carry:hover{color:var(--pull)}
.mk-carrylink{margin:14px 18px 0;color:rgba(236,226,210,.45);
  border-bottom:1px dotted rgba(255,74,0,.45);display:inline-block;
  text-transform:none;letter-spacing:.02em;font-size:11px;line-height:1.5}
.mk-carrylink:hover{color:var(--pull)}

/* ── the course, above the unit ──────────────────────────────────────────
   `conversation` and `key_concepts` sat in every assembled course file and
   were rendered nowhere. Course-level, so above the unit; folded away after
   the first, so it introduces the shelf rather than repeating at it. */
.crs-frontis{margin:0 0 34px;padding:0 0 22px;border-bottom:1px solid rgba(236,226,210,.12)}
.crs-frontis > summary{cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(236,226,210,.42);padding:6px 0}
.crs-frontis > summary::-webkit-details-marker{display:none}
.crs-frontis > summary::before{content:"\25b8  ";color:var(--pull)}
.crs-frontis[open] > summary::before{content:"\25be  "}
.crs-frontis > summary:hover{color:var(--cream)}

.crs-convo{margin-top:4px}
.crs-edge{padding:11px 0;border-bottom:1px solid rgba(236,226,210,.10)}
.crs-edge:last-child{border-bottom:0}
.crs-edgeline{font-family:var(--serif);font-weight:300;font-size:16px;line-height:1.5;
  color:var(--cream)}
.crs-edgeline b{font-weight:400}
.crs-edgeline .rel{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pull);margin:0 10px}
.crs-edgenote{font-family:var(--serif);font-weight:300;font-size:13.5px;line-height:1.7;
  color:rgba(231,221,203,.72);margin-top:5px;max-width:70ch}

.crs-vocab{margin-top:16px}
.crs-vocab .vb{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pull);margin-bottom:7px}
.crs-vocab .vt{font-family:var(--serif);font-weight:300;font-size:13.5px;line-height:1.7;
  color:rgba(231,221,203,.72);padding-left:14px;
  border-left:1px solid rgba(236,226,210,.14);margin-bottom:7px;max-width:70ch}

/* The way home. The wordmark is a door on every page but home itself, so a
   reader who has walked answer → course → index is one click from the front
   door instead of three. Opacity only: the mark must not be recoloured. */
.wmlink{display:block;text-decoration:none;border:0;opacity:1;
        transition:opacity .12s ease}
.wmlink:hover,.wmlink:focus-visible{opacity:.72}
.wmlink:focus-visible{outline:1px solid var(--pull);outline-offset:4px}