:root{color-scheme:light dark}
img{max-width:100%}

  :root{
    --paper:#F1F4EE;
    --grid:#DDE4DA;
    --surface:#FFFFFF;
    --surface-2:#E9EEE5;
    --ink:#16212A;
    --ink-soft:#54646E;
    --ink-faint:#8A979E;
    --rule:#CFD8CC;
    --rule-soft:#E2E8DE;
    --raspberry:#C51A4A;
    --wire-red:#BF3A2B;
    --wire-yellow:#B8830A;
    --wire-green:#2F7D50;
    --wire-blue:#2A6BA8;
    --term:#16212A;
    --slab:'Zilla Slab', Georgia, serif;
    --sans:'Source Sans 3', system-ui, -apple-system, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#10171A;
      --grid:#1A2429;
      --surface:#161F24;
      --surface-2:#1B262B;
      --ink:#E3E9E4;
      --ink-soft:#9FAEB2;
      --ink-faint:#6C7C82;
      --rule:#2A363B;
      --rule-soft:#212C31;
      --raspberry:#FF5A7E;
      --wire-red:#E8705F;
      --wire-yellow:#DFAA3A;
      --wire-green:#5CBA82;
      --wire-blue:#6AA6DF;
      --term:#E3E9E4;
    }
  }
  :root[data-theme="dark"]{
    --paper:#10171A;
    --grid:#1A2429;
    --surface:#161F24;
    --surface-2:#1B262B;
    --ink:#E3E9E4;
    --ink-soft:#9FAEB2;
    --ink-faint:#6C7C82;
    --rule:#2A363B;
    --rule-soft:#212C31;
    --raspberry:#FF5A7E;
    --wire-red:#E8705F;
    --wire-yellow:#DFAA3A;
    --wire-green:#5CBA82;
    --wire-blue:#6AA6DF;
    --term:#E3E9E4;
  }

  *{box-sizing:border-box}
  body{
    background:var(--paper);
    background-image:
      repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 22px);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16.5px;
    line-height:1.62;
    margin:0;
    padding:0 20px 96px;
  }
  .wrap{max-width:920px;margin:0 auto}
  .col{max-width:68ch}

  /* ---- masthead ---- */
  header.mast{
    padding:64px 0 34px;
    border-bottom:2px solid var(--ink);
    margin-bottom:0;
  }
  .kicker{
    font-family:var(--mono);font-size:11.5px;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--raspberry);
    margin:0 0 18px;
  }
  h1{
    font-family:var(--slab);font-weight:700;font-size:clamp(38px,6.4vw,62px);
    line-height:1.02;letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance;
  }
  .standfirst{
    font-size:19px;color:var(--ink-soft);max-width:56ch;margin:0 0 26px;
  }
  .facts{
    display:flex;flex-wrap:wrap;gap:0;
    border-top:1px solid var(--rule);
    font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-faint);
  }
  .facts div{padding:12px 22px 0 0;margin-right:22px;border-right:1px solid var(--rule-soft)}
  .facts div:last-child{border-right:0}
  .facts b{display:block;font-family:var(--sans);font-size:15px;font-weight:600;
    letter-spacing:0;text-transform:none;color:var(--ink);margin-top:2px}

  /* ---- generic sections ---- */
  section{padding:52px 0 0}
  h2{
    font-family:var(--slab);font-weight:600;font-size:29px;line-height:1.15;
    letter-spacing:-.01em;margin:0 0 6px;text-wrap:balance;
  }
  h2 .num{
    font-family:var(--mono);font-size:12px;font-weight:700;color:var(--raspberry);
    display:block;letter-spacing:.18em;margin-bottom:9px;text-transform:uppercase;
  }
  .lede{color:var(--ink-soft);font-size:17px;margin:0 0 26px;max-width:64ch}
  h3{font-family:var(--slab);font-weight:600;font-size:19px;margin:32px 0 8px}
  p{margin:0 0 15px}
  a{color:var(--raspberry)}
  strong{font-weight:600}
  em{font-style:italic}

  /* ---- the rules ---- */
  ol.rules{list-style:none;margin:0;padding:0;display:grid;gap:2px;
    border:1px solid var(--rule);background:var(--rule)}
  ol.rules li{background:var(--surface);padding:18px 22px;display:flex;gap:18px;align-items:baseline}
  ol.rules .r{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--raspberry);
    flex:0 0 auto;padding-top:2px}
  ol.rules b{font-family:var(--slab);font-weight:600;font-size:18px;display:block;margin-bottom:2px}
  ol.rules span.why{color:var(--ink-soft);font-size:15.5px}

  /* ---- arc ---- */
  .arc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 8px}
  .arc .t{border-top:5px solid var(--w);padding:14px 0 0}
  .arc .t .lab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--w)}
  .arc .t .nm{font-family:var(--slab);font-weight:600;font-size:17.5px;margin:5px 0 4px;line-height:1.2}
  .arc .t .ds{font-size:14.5px;color:var(--ink-soft);line-height:1.45}
  @media(max-width:720px){.arc{grid-template-columns:repeat(2,1fr)}}

  /* ---- term blocks ---- */
  .term{border-left:5px solid var(--w);padding:0 0 0 22px;margin:44px 0 0}
  .term-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
  .term-head .wire{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--w)}
  .term-head h3{font-family:var(--slab);font-weight:700;font-size:25px;margin:0;letter-spacing:-.01em}
  .term-goal{color:var(--ink-soft);margin:0 0 18px;font-size:16px}

  table{border-collapse:collapse;width:100%;font-size:15px}
  table.sessions{margin-bottom:6px}
  table.sessions th{
    font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-faint);text-align:left;
    padding:0 12px 8px 0;border-bottom:1px solid var(--rule);
  }
  table.sessions td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
  table.sessions tr{break-inside:avoid}
  table.sessions td.n{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--w);
    width:38px;padding-top:13px;font-variant-numeric:tabular-nums}
  table.sessions td.ttl{font-weight:600;width:30%}
  table.sessions td.bld{width:36%;color:var(--ink)}
  table.sessions td.idea{color:var(--ink-soft);font-size:14.5px}
  tr.demo td{background:var(--surface-2)}
  tr.demo td.ttl{color:var(--w)}
  .tablescroll{overflow-x:auto}
  @media(max-width:700px){
    table.sessions td.ttl,table.sessions td.bld{width:auto}
    table.sessions td.idea{display:none}
    table.sessions th.idea{display:none}
  }

  /* ---- generic card grid ---- */
  .cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .card{background:var(--surface);border:1px solid var(--rule);padding:18px 20px}
  .card h4{font-family:var(--slab);font-weight:600;font-size:17px;margin:0 0 6px}
  .card p{font-size:15px;color:var(--ink-soft);margin:0}
  .card .tag{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--raspberry);display:block;margin-bottom:8px}

  /* ---- split table (teach / self-read) ---- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid var(--rule);background:var(--rule)}
  .split>div{background:var(--surface);padding:20px 22px}
  .split h4{font-family:var(--slab);font-weight:700;font-size:18px;margin:0 0 3px}
  .split .sub{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
  .split ul{margin:0;padding-left:18px}
  .split li{margin-bottom:7px;font-size:15px}
  @media(max-width:640px){.split{grid-template-columns:1fr}}

  /* ---- buy table ---- */
  table.buy th{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:0 14px 8px 0;
    border-bottom:1px solid var(--rule)}
  table.buy td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;font-size:15px}
  table.buy tr{break-inside:avoid}
  table.buy td.item{font-weight:600;width:31%}
  table.buy td.item small{display:block;font-weight:400;color:var(--ink-faint);font-size:13px;
    font-family:var(--sans);margin-top:2px}
  table.buy td.when{width:88px}
  .when-pill{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;white-space:nowrap}
  .w-now{color:var(--wire-red)} .w-soon{color:var(--wire-yellow)}
  .w-later{color:var(--wire-blue)} .w-free{color:var(--wire-green)}
  table.buy td.why{color:var(--ink-soft);font-size:14.5px}

  /* ---- code ---- */
  pre{
    background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--wire-green);
    padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.65;
    margin:0 0 16px;
  }
  pre .c{color:var(--ink-faint)}
  code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;
    border-radius:2px}
  pre code{background:none;padding:0;font-size:inherit}

  /* ---- timeline (session one) ---- */
  ol.clock{list-style:none;margin:0;padding:0}
  ol.clock li{display:grid;grid-template-columns:74px 1fr;gap:18px;padding:13px 0;
    border-bottom:1px solid var(--rule-soft);break-inside:avoid}
  ol.clock .t{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--raspberry);
    padding-top:3px;font-variant-numeric:tabular-nums}
  ol.clock b{font-family:var(--slab);font-weight:600;font-size:17px;display:block;margin-bottom:2px}
  ol.clock p{margin:0;font-size:15px;color:var(--ink-soft)}

  /* ---- pinout ---- */
  .pinout{background:var(--surface);border:1px solid var(--rule);padding:20px;overflow-x:auto}
  table.pins{font-family:var(--mono);font-size:12px;width:100%;min-width:420px;
    font-variant-numeric:tabular-nums}
  table.pins td{padding:3px 6px;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
  table.pins td.pn{background:var(--surface-2);text-align:center;font-weight:700;width:34px;color:var(--ink-soft)}
  table.pins td.l{text-align:right} table.pins td.r{text-align:left}
  .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 5px;vertical-align:1px}
  .d-pwr{background:var(--wire-red)} .d-33{background:var(--wire-yellow)}
  .d-gnd{background:var(--ink-faint)} .d-io{background:var(--wire-green)}
  .pinkey{font-family:var(--mono);font-size:11px;color:var(--ink-soft);margin-top:14px;
    display:flex;gap:18px;flex-wrap:wrap}

  .note{border-left:3px solid var(--raspberry);padding:2px 0 2px 18px;margin:26px 0;
    color:var(--ink-soft);font-size:15.5px}
  .note b{color:var(--ink);font-family:var(--slab);font-weight:600}

  hr.big{border:0;border-top:2px solid var(--ink);margin:60px 0 0}

  footer{padding:44px 0 0;color:var(--ink-faint);font-size:14px;font-family:var(--mono)}

  /* ---- print ---- */
  @media print{
    body{background:#fff;background-image:none;color:#000;font-size:10.5pt;padding:0}
    .wrap{max-width:none}
    header.mast{padding-top:0}
    section{padding-top:26px;break-inside:auto}
    h2,h3{break-after:avoid}
    .term{break-inside:avoid-page}
    .term-t2,.term-t3,.term-t4{break-before:page}
    .sec-print,.sec-one,.sec-pins{break-before:page}
    .card,.split>div,pre,.pinout{border-color:#bbb}
    tr.demo td{background:#f0f0f0}
    a{color:#000;text-decoration:none}
    footer{break-before:avoid}
  }

/* ---- site chrome (added when the artifact became a site) ---- */
.sitenav{
  position:sticky; top:0; z-index:50;
  margin:0 -20px 26px;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.sitenav .inner{
  max-width:1100px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
}
.sitenav .brand{
  font-family:var(--slab); font-weight:700; font-size:15px;
  color:var(--ink); text-decoration:none; letter-spacing:-0.01em;
}
.sitenav .brand span{color:var(--raspberry)}
.sitenav nav{margin-left:auto; display:flex; gap:16px; flex-wrap:wrap}
.sitenav nav a{
  font-family:var(--sans); font-size:13px; color:var(--ink-soft);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px;
}
.sitenav nav a:hover{color:var(--raspberry); border-bottom-color:var(--raspberry)}
.sitenav nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--raspberry)}

/* syllabus rows that have a written lesson page */
table.sessions td.n a{
  color:var(--raspberry); font-weight:700; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--raspberry) 40%, transparent);
}
table.sessions td.n a:hover{border-bottom-color:var(--raspberry)}
tr.ready td.ttl::after{
  content:"sheet"; font-family:var(--sans); font-size:9px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--raspberry); vertical-align:super;
  margin-left:6px; opacity:.8;
}

/* ---- lesson sheet ---- */
.sheet{max-width:820px}
.sheet .lessonhead{border-bottom:2px solid var(--ink); padding-bottom:18px; margin-bottom:30px}
.sheet .lessonhead .crumb{
  font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 10px;
}
.sheet .lessonhead .crumb a{color:var(--raspberry); text-decoration:none}
.sheet .lessonhead h1{font-family:var(--slab); font-size:clamp(30px,5vw,46px); line-height:1.05; margin:0 0 12px}
.sheet .lessonhead .sub{font-family:var(--sans); font-size:17px; color:var(--ink-soft); max-width:60ch; margin:0}
.strip{
  display:flex; gap:26px; flex-wrap:wrap; margin:22px 0 0;
  font-family:var(--sans); font-size:12px; color:var(--ink-faint);
}
.strip b{display:block; font-size:14px; color:var(--ink); font-weight:600; margin-top:2px}
.beat{border-left:2px solid var(--rule); padding:0 0 2px 20px; margin:0 0 26px; position:relative}
.beat > .clock{
  position:absolute; left:-2px; top:0; width:2px; height:26px; background:var(--raspberry);
}
.beat h3{font-family:var(--slab); font-size:20px; margin:0 0 4px}
.beat .mins{
  font-family:var(--mono); font-size:11px; color:var(--raspberry);
  letter-spacing:.04em; margin:0 0 8px;
}
.beat p{font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 10px}
.beat p.say{color:var(--ink); font-style:italic}
pre.term{
  background:var(--term); color:var(--paper); font-family:var(--mono); font-size:13px;
  line-height:1.65; padding:16px 18px; border-radius:5px; overflow-x:auto; margin:0 0 12px;
}
pre.term .c{color:#8FB3A0}
.callout{
  background:var(--surface); border:1px solid var(--rule-soft); border-left:3px solid var(--raspberry);
  padding:14px 18px; border-radius:0 4px 4px 0; margin:0 0 26px;
  font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--ink-soft);
}
.callout b{color:var(--ink)}
.checklist{list-style:none; padding:0; margin:0; font-family:var(--sans); font-size:15px}
.checklist li{padding:9px 0 9px 30px; border-bottom:1px solid var(--rule-soft); position:relative; color:var(--ink-soft)}
.checklist li::before{
  content:""; position:absolute; left:0; top:12px; width:14px; height:14px;
  border:1.5px solid var(--rule); border-radius:3px;
}
.nextprev{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--rule); margin-top:44px; padding-top:18px;
  font-family:var(--sans); font-size:14px;
}
.nextprev a{color:var(--raspberry); text-decoration:none}
.nextprev span{color:var(--ink-faint)}
@media print{ .sitenav{display:none} }