/* Generated by ghost/tools/build-ghost.js from the single-file course.
   Do not edit: edit the course, or add rules in theme.css. */

:root{
  --paper:#f5f6f3; --surface:#ffffff; --surface-2:#eceee8;
  --ink:#191c1a; --body:#2e332f; --muted:#6d746e;
  --rule:#d9dcd4; --rule-soft:#e6e8e2;
  --accent:#b34a26; --accent-soft:#f3e2da; --accent-ink:#8f3a1c;
  --term-ink:#12150f; --term-text:#dfe4d8; --term-dim:#8d9a86; --term-green:#7fb069;
  --shadow:0 1px 2px rgba(25,28,26,.05), 0 8px 24px -12px rgba(25,28,26,.18);
  --lock:#9aa196;
  --ok:#3f7d4a;
}
:root[data-track="terminal"]{ --accent:#2c6a5c; --accent-soft:#dde9e5; --accent-ink:#22564a; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111411; --surface:#181c18; --surface-2:#20241f;
    --ink:#eef0ea; --body:#c9cfc6; --muted:#8b9389;
    --rule:#2c312b; --rule-soft:#232821;
    --accent:#e08258; --accent-soft:#33231b; --accent-ink:#f0a37f;
    --term-ink:#0c0f0a; --term-text:#dfe4d8; --term-dim:#7d8a76; --term-green:#8fc47a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --lock:#5f665c;
    --ok:#7fb08a;
  }
  :root:not([data-theme="light"])[data-track="terminal"]{ --accent:#63b39f; --accent-soft:#16261f; --accent-ink:#84c9b6; }
}
:root[data-theme="dark"]{
  --paper:#111411; --surface:#181c18; --surface-2:#20241f;
  --ink:#eef0ea; --body:#c9cfc6; --muted:#8b9389;
  --rule:#2c312b; --rule-soft:#232821;
  --accent:#e08258; --accent-soft:#33231b; --accent-ink:#f0a37f;
  --term-ink:#0c0f0a; --term-text:#dfe4d8; --term-dim:#7d8a76; --term-green:#8fc47a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --lock:#5f665c;
  --ok:#7fb08a;
}
:root[data-theme="dark"][data-track="terminal"]{ --accent:#63b39f; --accent-soft:#16261f; --accent-ink:#84c9b6; }

*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--body);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.65; margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.ui{font-family:Archivo,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3{color:var(--ink); text-wrap:balance; line-height:1.12; margin:0}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
code{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:.86em; background:var(--surface-2); padding:.12em .34em; border-radius:3px; overflow-wrap:break-word}
hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}

.skip-link{
  position:absolute; left:.5rem; top:-4rem; z-index:60; background:var(--accent); color:#fff;
  font-family:Archivo,sans-serif; font-size:.9rem; font-weight:600; padding:.6rem 1rem; border-radius:0 0 7px 7px;
  text-decoration:none; transition:top .15s ease;
}
.skip-link:focus{top:0}

/* ---------- chrome ---------- */
.masthead{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule);
}
.masthead-in{max-width:1120px; margin:0 auto; padding:.7rem 1.5rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap}
.wordmark{
  font-family:Archivo,sans-serif; font-weight:800; font-size:.95rem; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:.55rem; white-space:nowrap;
}
.wordmark .glyph{
  width:22px; height:22px; border-radius:5px; background:var(--accent); flex:none;
  display:grid; place-items:center; color:#fff; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700;
  transition:background .25s ease;
}
nav.main{margin-left:auto; display:flex; gap:1.4rem; align-items:center}
nav.main a{
  font-family:Archivo,sans-serif; font-size:.82rem; font-weight:500; color:var(--muted);
  text-decoration:none; letter-spacing:.01em;
}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--ink)}
.theme-btn{
  background:none; border:1px solid var(--rule); color:var(--muted); cursor:pointer;
  width:30px; height:30px; border-radius:6px; display:grid; place-items:center; font-size:.8rem; padding:0;
}
.theme-btn:hover{color:var(--ink); border-color:var(--muted)}
@media(max-width:560px){
  .masthead-in{padding:.55rem .9rem; gap:.6rem}
  nav.main{gap:.9rem; margin-left:auto}
  .wordmark{font-size:.82rem}
}
@media(max-width:400px){
  .wordmark .label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}

main{max-width:1120px; margin:0 auto; padding:0 1.5rem 5rem}
@media(max-width:560px){ main{padding:0 .9rem 3.5rem} }
main:focus{outline:none}
.wrap{max-width:none}

noscript .noscript-note{
  max-width:68ch; margin:3rem auto; padding:1.2rem 1.4rem; border:1px solid var(--accent);
  background:var(--accent-soft); border-radius:8px; font-size:1rem;
}

/* ---------- home ---------- */
.hero{padding:4.5rem 0 3rem; border-bottom:1px solid var(--rule)}
.hero .kicker{
  font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 1.4rem;
}
.hero h1{
  font-size:clamp(2.2rem,6.2vw,4.4rem); font-weight:800; letter-spacing:-.035em; max-width:16ch;
}
.hero h1 em{font-style:normal; color:var(--accent); transition:color .25s ease}
.hero p.lede{font-size:1.22rem; max-width:56ch; margin:1.5rem 0 0; color:var(--body)}
.hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:2.2rem}
.btn{
  font-family:Archivo,sans-serif; font-weight:600; font-size:.92rem; text-decoration:none;
  padding:.7rem 1.3rem; border-radius:7px; display:inline-block; border:1px solid transparent; cursor:pointer;
}
.btn-solid{background:var(--accent); color:#fff}
.btn-solid:hover{background:var(--accent-ink)}
.btn-ghost{border-color:var(--rule); color:var(--ink); background:none}
.btn-ghost:hover{border-color:var(--muted)}

.tracks{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:0; margin:3.5rem 0 0; border-top:1px solid var(--rule)}
.track-card{padding:2rem 2rem 2.2rem; border-bottom:1px solid var(--rule)}
.track-card + .track-card{border-left:1px solid var(--rule)}
.track-card h3{font-size:1.12rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.6rem}
.track-card p{margin:0; font-size:.98rem; color:var(--muted)}
.track-card .tag{
  font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:1rem;
}
@media(max-width:640px){ .track-card + .track-card{border-left:0} .track-card{padding:1.6rem 0 1.8rem} }

.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:4rem 0 1.5rem; flex-wrap:wrap}
.sec-head h2{font-size:1.6rem; font-weight:700; letter-spacing:-.02em}
.sec-head a{font-family:Archivo,sans-serif; font-size:.85rem; font-weight:500; text-decoration:none}
.sec-head a:hover{text-decoration:underline}

.resume{
  margin:2.5rem 0 0; padding:1.1rem 1.3rem; border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:8px; background:var(--surface); display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap;
}
.resume .lbl{
  font-family:"JetBrains Mono",monospace; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-ink);
}
.resume a{font-family:Archivo,sans-serif; font-weight:600; font-size:.98rem; text-decoration:none}
.resume a:hover{text-decoration:underline}
.resume .prog{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--muted)}

/* ---------- module list ---------- */
ol.syllabus{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
ol.syllabus li{border-bottom:1px solid var(--rule-soft)}
.mod-row{
  display:grid; grid-template-columns:3.2rem 1fr auto; gap:1.2rem; align-items:baseline;
  padding:1.05rem .4rem; text-decoration:none; color:inherit;
}
@media(max-width:560px){
  .mod-row{grid-template-columns:2.4rem 1fr; gap:.7rem}
  .mod-row .mod-meta{grid-column:2; padding-top:.35rem}
}
a.mod-row:hover{background:var(--surface-2)}
.mod-num{
  font-family:"JetBrains Mono",monospace; font-size:.78rem; color:var(--muted);
  font-variant-numeric:tabular-nums; padding-top:.15rem;
}
.mod-title{font-family:Archivo,sans-serif; font-weight:600; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em}
.mod-desc{display:block; font-size:.95rem; color:var(--muted); margin:.25rem 0 0; max-width:62ch}
.mod-meta{
  font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--muted);
  white-space:nowrap; font-variant-numeric:tabular-nums; padding-top:.2rem;
}
.mod-row.locked{cursor:default}
.mod-row.locked .mod-title{color:var(--lock)}
.mod-row.locked .mod-desc{color:var(--lock)}
.badge{
  font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule); color:var(--muted); padding:.12em .45em; border-radius:3px; margin-left:.6rem;
  vertical-align:.12em; white-space:nowrap; display:inline-block;
}
.badge-deep{border-color:var(--accent); color:var(--accent-ink)}
.badge-done{border-color:var(--ok); color:var(--ok)}
.note-strip{
  background:var(--surface-2); border-left:3px solid var(--rule); padding:1rem 1.2rem;
  font-size:.94rem; color:var(--muted); margin:1.8rem 0 0;
}

/* ---------- lesson ---------- */
.lesson-layout{display:grid; grid-template-columns:1fr; gap:0}
@media(min-width:1000px){ .lesson-layout{grid-template-columns:210px 1fr; gap:3.5rem} }
aside.rail{display:none}
@media(min-width:1000px){
  aside.rail{display:block; padding-top:3.2rem}
  .rail-in{position:sticky; top:5rem; max-height:calc(100vh - 7rem); overflow-y:auto}
}
.rail h4{
  font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin:0 0 .9rem;
}
.rail ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem}
/* grid applies to the row itself only, never to the text spans inside it */
.rail li > a,
.rail li > .rail-locked{
  font-family:Archivo,sans-serif; font-size:.82rem; text-decoration:none; display:grid;
  grid-template-columns:1.7rem 1fr; gap:.2rem; line-height:1.35; align-items:baseline;
}
.rail li > a{color:var(--muted)}
.rail li > a:hover{color:var(--ink)}
.rail li > a[aria-current="true"]{color:var(--accent-ink); font-weight:600}
.rail li > .rail-locked{color:var(--lock)}
.rail .n{font-family:"JetBrains Mono",monospace; font-size:.7rem; font-variant-numeric:tabular-nums; color:inherit}
.rail .t{color:inherit; overflow-wrap:break-word}
.rail li > a .t.done::after{content:" ✓"; color:var(--ok)}

.lesson{max-width:68ch; padding-top:3.2rem; min-width:0}
.crumb{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--ink)}
.lesson h1{font-size:clamp(1.8rem,4.4vw,2.9rem); font-weight:800; letter-spacing:-.03em}
.lesson h1:focus{outline:none}
.standfirst{font-size:1.15rem; color:var(--muted); margin:1.1rem 0 0; max-width:58ch}

.switch{display:flex; gap:.35rem; margin:2rem 0 0; padding:.28rem; background:var(--surface-2); border-radius:9px; width:fit-content; max-width:100%; flex-wrap:wrap}
.switch button{
  font-family:Archivo,sans-serif; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:.5rem 1rem; border-radius:7px; border:1px solid transparent; background:none; color:var(--muted);
}
.switch button[aria-pressed="true"]{background:var(--surface); color:var(--ink); border-color:var(--rule); box-shadow:var(--shadow)}
.switch-hint{font-size:.88rem; color:var(--muted); margin:.75rem 0 0}

.lesson h2{font-size:1.42rem; font-weight:700; letter-spacing:-.02em; margin:3rem 0 .9rem; padding-top:.2rem}
.lesson h3{font-size:1.08rem; font-weight:700; letter-spacing:-.01em; margin:2.1rem 0 .7rem}
.lesson p{margin:1rem 0}
.lesson ul,.lesson ol{margin:1rem 0; padding-left:1.35rem; display:flex; flex-direction:column; gap:.42rem}
.lesson li{padding-left:.2rem}
.lesson ul{list-style:none; padding-left:1.1rem}
.lesson ul > li{position:relative}
.lesson ul > li::before{
  content:""; position:absolute; left:-.95rem; top:.72em; width:5px; height:1px; background:var(--accent);
}
.lesson strong{color:var(--ink); font-weight:600}

/* ---------- the fixed teaching frame ---------- */
.frame{
  border:1px solid var(--rule); border-radius:9px; background:var(--surface);
  padding:1.2rem 1.35rem; margin:2rem 0; box-shadow:var(--shadow);
}
.frame h2{font-size:.68rem; font-family:"JetBrains Mono",monospace; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 .8rem; font-weight:400}
.frame + .frame{margin-top:1.1rem}
.frame dl{margin:0; display:grid; grid-template-columns:8.5rem 1fr; gap:.55rem 1rem; font-size:.96rem}
@media(max-width:560px){ .frame dl{grid-template-columns:1fr; gap:.15rem} .frame dd{margin-bottom:.7rem} }
.frame dt{
  font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding-top:.32em;
}
.frame dd{margin:0; color:var(--body)}
.frame ul{margin:.2rem 0; padding-left:1.1rem; list-style:none; display:flex; flex-direction:column; gap:.35rem}
.frame ul > li{position:relative}
.frame ul > li::before{content:""; position:absolute; left:-.95rem; top:.72em; width:5px; height:1px; background:var(--accent)}
.frame.done-frame{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.done-btn{
  font-family:Archivo,sans-serif; font-size:.85rem; font-weight:600; cursor:pointer; background:none;
  border:1px solid var(--rule); color:var(--ink); padding:.5rem 1rem; border-radius:7px;
}
.done-btn[aria-pressed="true"]{border-color:var(--ok); color:var(--ok)}
.done-note{font-size:.88rem; color:var(--muted); margin:0}

/* three kinds of block you paste */
.cmd,.say,.out{margin:1.5rem 0; border-radius:8px; overflow:hidden; position:relative}
.cmd{background:var(--term-ink); border:1px solid var(--term-ink)}
.cmd .cmd-bar{
  font-family:"JetBrains Mono",monospace; font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--term-dim); padding:.55rem .95rem .1rem; padding-right:5.5rem;
}
.cmd pre{
  margin:0; padding:.5rem .95rem 1rem; overflow-x:auto;
  font-family:"JetBrains Mono",monospace; font-size:.83rem; line-height:1.7; color:var(--term-text);
}
.cmd pre .p{color:var(--term-green); user-select:none}
.cmd pre .c{color:var(--term-dim)}

.say{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--accent); box-shadow:var(--shadow)}
.say .say-bar{
  font-family:"JetBrains Mono",monospace; font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); padding:.7rem 1.1rem .15rem; padding-right:5.5rem;
}
.say pre{
  margin:0; padding:.35rem 1.1rem 1rem; overflow-x:auto; white-space:pre-wrap;
  font-family:"JetBrains Mono",monospace; font-size:.84rem; line-height:1.65; color:var(--ink);
}
.out{background:var(--surface-2); border:1px solid var(--rule-soft)}
.out .out-bar{
  font-family:"JetBrains Mono",monospace; font-size:.63rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); padding:.6rem 1rem .1rem;
}
.out pre{
  margin:0; padding:.35rem 1rem .9rem; overflow-x:auto;
  font-family:"JetBrains Mono",monospace; font-size:.79rem; line-height:1.6; color:var(--muted);
}

.copy-btn{
  position:absolute; top:.4rem; right:.45rem; z-index:2; cursor:pointer;
  font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.3em .6em; border-radius:5px; border:1px solid var(--rule); background:var(--surface); color:var(--muted);
}
.cmd .copy-btn{border-color:#3a4136; background:#1b1f19; color:var(--term-dim)}
.copy-btn:hover{color:var(--ink)}
.cmd .copy-btn:hover{color:var(--term-text)}
.copy-btn[data-state="done"]{color:var(--ok); border-color:var(--ok)}

/* ---------- wireframe sketches ---------- */
.wireframe{margin:1.8rem 0; border:1px solid var(--rule); border-radius:8px; background:var(--surface); padding:1rem 1rem .4rem}
.wireframe svg{display:block; width:100%; height:auto; max-width:640px; margin:0 auto}
.wireframe figcaption{
  font-size:.86rem; color:var(--muted); margin:.8rem 0 .6rem; text-align:center; line-height:1.5;
}
.wf-panel{fill:var(--surface-2); stroke:var(--rule); stroke-width:1}
.wf-line{stroke:var(--rule); stroke-width:1}
.wf-bar{fill:var(--rule-soft)}
.wf-mark{fill:none; stroke:var(--accent); stroke-width:1.6}
.wf-t{fill:var(--muted); font-family:Archivo,sans-serif; font-size:9px}
.wf-t-key{fill:var(--accent-ink); font-family:Archivo,sans-serif; font-size:9px; font-weight:700}
/* the diff signs carry the meaning without relying on colour, so make them big */
.wf-sign{fill:var(--accent-ink); font-family:"JetBrains Mono",monospace; font-size:14px; font-weight:700}

.callout{border:1px solid var(--rule); border-radius:8px; padding:1.15rem 1.3rem; margin:1.8rem 0; background:var(--surface)}
.callout .lbl{
  font-family:"JetBrains Mono",monospace; font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent-ink); display:block; margin-bottom:.45rem;
}
.callout p:first-of-type{margin-top:0}
.callout p:last-child{margin-bottom:0}
.callout.warn{border-color:var(--accent); background:var(--accent-soft)}
.callout.warn .lbl{color:var(--accent-ink)}

table.compare{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.94rem; font-family:Archivo,sans-serif}
table.compare th{
  text-align:left; font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:400; padding:.5rem .8rem .5rem 0; border-bottom:1px solid var(--rule);
}
table.compare td{padding:.7rem .8rem .7rem 0; border-bottom:1px solid var(--rule-soft); vertical-align:top}
table.compare td:first-child{color:var(--muted)}
.tbl-scroll{overflow-x:auto; max-width:100%}

.pager{display:flex; justify-content:space-between; gap:1rem; margin:4rem 0 0; padding-top:1.6rem; border-top:1px solid var(--rule); flex-wrap:wrap}
.pager a{font-family:Archivo,sans-serif; font-size:.9rem; font-weight:600; text-decoration:none; max-width:45%}
.pager .lbl{display:block; font-family:"JetBrains Mono",monospace; font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:.2rem}

/* ---------- about / footer ---------- */
.page-head{padding:3.5rem 0 0; max-width:68ch}
.page-head h1{font-size:clamp(1.8rem,4.6vw,3rem); font-weight:800; letter-spacing:-.03em}
.page-head h1:focus{outline:none}
.page-head p{font-size:1.15rem; color:var(--muted); max-width:58ch}
.prose{max-width:68ch}
.prose h2{font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin:2.6rem 0 .8rem}
.prose h3{font-size:1.05rem; font-weight:700; margin:1.8rem 0 .6rem}
.prose p{margin:1rem 0}
.prose ul{margin:1rem 0; padding-left:1.1rem; list-style:none; display:flex; flex-direction:column; gap:.42rem}
.prose ul > li{position:relative}
.prose ul > li::before{content:""; position:absolute; left:-.95rem; top:.72em; width:5px; height:1px; background:var(--accent)}

footer.site{border-top:1px solid var(--rule); margin-top:4rem; background:var(--surface)}
.foot-in{max-width:1120px; margin:0 auto; padding:2.6rem 1.5rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem}
footer.site h5{
  font-family:"JetBrains Mono",monospace; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:400; margin:0 0 .8rem;
}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem}
footer.site a{font-family:Archivo,sans-serif; font-size:.86rem; color:var(--body); text-decoration:none}
footer.site a:hover{color:var(--accent-ink)}
.colophon{max-width:1120px; margin:0 auto; padding:0 1.5rem 2.6rem; font-size:.8rem; color:var(--muted)}
.colophon p{margin:.4rem 0}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---- module search (typed filter on the module list) ---- */
.mod-search{margin:2rem 0 0}
.mod-search label{display:block; font-family:Archivo,sans-serif; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.mod-search input{
  width:100%; max-width:26rem; padding:.6rem .8rem; font:inherit; font-size:.95rem;
  color:var(--ink); background:var(--surface); border:1px solid var(--rule); border-radius:6px;
}
.mod-search input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mod-count{font-family:Archivo,sans-serif; font-size:.82rem; color:var(--muted); margin:.6rem 0 0}
li[hidden]{display:none !important}

/* ---- downloads ---- */
.dl-list{list-style:none; padding:0; margin:2.5rem 0 0; display:flex; flex-direction:column; gap:1.1rem}
.dl-item{border:1px solid var(--rule); border-radius:10px; padding:1.3rem 1.4rem; background:var(--surface)}
.dl-item h3{margin:0 0 .3rem; font-size:1.05rem}
.dl-item .dl-meta{font-family:Archivo,sans-serif; font-size:.78rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .7rem}
.dl-item p{margin:.5rem 0}
.dl-item ul{margin:.5rem 0 .9rem; padding-left:1.1rem}
.dl-btn{
  font-family:Archivo,sans-serif; font-size:.9rem; padding:.55rem 1rem; cursor:pointer;
  border-radius:6px; border:1px solid var(--accent); background:var(--accent-soft);
  color:var(--accent-ink);
}
.dl-btn:hover{background:var(--accent); color:var(--paper)}
.dl-inline{margin:.6rem 0 0}
.dl-inline .dl-btn{font-size:.82rem; padding:.4rem .75rem}

/* ---- print: the lesson, nothing else ---- */
@media print{
  .masthead,.rail,.pager,.done-frame,.copy-btn,footer.site,.skip-link,.switch,.mod-search{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .lesson-layout{display:block}
  .lesson{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.8em; word-break:break-all}
  .cmd,.say,.out,table{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
}