/* FMX 430 · weekly lesson pages — shares the class-page design system */
@font-face{
  font-family:'ABC Diatype';
  src:url('/fonts/ABCDiatype-Regular.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
:root{
  --font-display:'ABC Diatype','Helvetica Neue',Arial,sans-serif;
  --font-body:'ABC Diatype','Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --bg:#F3F6F8;
  --bg-raise:#FFFFFF;
  --bg-inset:#E8EDF1;
  --ink:#18222E;
  --ink-soft:#4A5A69;
  --ink-faint:#7C8B99;
  --line:#D3DCE3;
  --accent:#0E7F90;
  --accent-soft:rgba(14,127,144,.10);
  --amber:#B26A10;
  --amber-soft:rgba(201,122,24,.12);
  --shadow:0 1px 2px rgba(24,34,46,.06),0 8px 24px rgba(24,34,46,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#08090B; --bg-raise:#101216; --bg-inset:#0C0E11;
    --ink:#EDEDE8; --ink-soft:#9BA1A3; --ink-faint:#565D61;
    --line:#1E2226; --accent:#4CD9EA; --accent-soft:rgba(76,217,234,.10);
    --amber:#E8BA50; --amber-soft:rgba(232,186,80,.12);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#08090B; --bg-raise:#101216; --bg-inset:#0C0E11;
  --ink:#EDEDE8; --ink-soft:#9BA1A3; --ink-faint:#565D61;
  --line:#1E2226; --accent:#4CD9EA; --accent-soft:rgba(76,217,234,.10);
  --amber:#E8BA50; --amber-soft:rgba(232,186,80,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#F3F6F8; --bg-raise:#FFFFFF; --bg-inset:#E8EDF1;
  --ink:#18222E; --ink-soft:#4A5A69; --ink-faint:#7C8B99;
  --line:#D3DCE3; --accent:#0E7F90; --accent-soft:rgba(14,127,144,.10);
  --amber:#B26A10; --amber-soft:rgba(201,122,24,.12);
  --shadow:0 1px 2px rgba(24,34,46,.06),0 8px 24px rgba(24,34,46,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-synthesis:none;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.skip-link{
  position:absolute;left:28px;top:0;z-index:20;
  transform:translateY(-150%);
  background:var(--accent);color:var(--bg);
  padding:10px 14px;border-radius:999px;
  text-decoration:none;
}
.skip-link:focus{transform:translateY(16px)}
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;text-wrap:balance}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,
button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
code{
  font-family:var(--font-mono);font-size:.86em;background:var(--bg-inset);
  border:1px solid var(--line);border-radius:4px;padding:.08em .35em;white-space:nowrap;
}
pre{
  background:var(--bg-inset);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;overflow-x:auto;font-size:.82rem;line-height:1.55;
  font-family:var(--font-mono);
}
pre code{background:none;border:none;padding:0;white-space:pre}

/* ---------- page chrome ---------- */
.crumbs{
  max-width:880px;margin:0 auto;padding:18px 28px 0;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;color:var(--ink-faint);
}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .theme{
  margin-left:auto;background:none;border:1px solid var(--line);border-radius:99px;
  color:var(--ink-soft);cursor:pointer;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;
}
.crumbs .theme:hover{border-color:var(--accent);color:var(--accent)}

header.lesson{
  max-width:880px;margin:0 auto;padding:34px 28px 8px;
  border-bottom:1px solid var(--line);
}
.wk-eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;
}
.wk-eyebrow .dim{color:var(--ink-faint)}
h1.wk-title{
  font-size:clamp(2rem,5.5vw,3.2rem);line-height:1.05;margin:0 0 14px;
}
.due{
  display:inline-block;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);border-radius:99px;
  padding:3px 10px;margin-left:10px;vertical-align:6px;
}
.wk-lede{color:var(--ink-soft);max-width:62ch;margin:0 0 22px;font-size:1.02rem}
.wk-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;padding:0 0 22px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);
}
.wk-meta b{color:var(--ink-soft);font-weight:600}

main.lesson{max-width:880px;margin:0 auto;padding:10px 28px 60px}
h2.block{
  display:flex;align-items:baseline;gap:14px;
  font-size:clamp(1.3rem,2.6vw,1.7rem);margin:2.6em 0 .5em;
}
h2.block .clock{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
h2.block .clock.amber{color:var(--amber)}
h3{font-size:1.08rem;margin:1.8em 0 .5em}
h3.rule{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border-top:1px solid var(--line);padding-top:14px;
}
p{max-width:68ch}
ul,ol{max-width:70ch;padding-left:1.2em}
li{margin:.35em 0}
li::marker{color:var(--accent)}
.lede{color:var(--ink-soft)}

/* objectives strip */
.objectives{
  background:var(--bg-raise);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:18px 22px;margin:22px 0;
}
.objectives b.lbl{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px;font-weight:600;
}
.objectives ul{margin:0;font-size:.93rem;color:var(--ink-soft)}

/* numbered lab steps */
.steps{counter-reset:s;list-style:none;padding:0;max-width:74ch}
.steps li{counter-increment:s;position:relative;padding:0 0 20px 46px;margin:0}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  font-family:var(--font-mono);font-size:.72rem;color:var(--accent);
  border:1px solid var(--line);background:var(--bg-raise);border-radius:6px;
  padding:4px 6px;font-variant-numeric:tabular-nums;
}
.steps li b{display:block;margin-bottom:2px}
.steps li p{font-size:.92rem;color:var(--ink-soft);margin:2px 0 0}
.steps li pre{margin:8px 0 0}

/* AI lab prompt blocks */
.prompt{
  border:1px solid var(--line);border-left:3px solid var(--amber);
  background:var(--bg-raise);border-radius:0 10px 10px 0;box-shadow:var(--shadow);
  padding:14px 18px;margin:16px 0;max-width:74ch;
}
.prompt b.lbl{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);display:block;margin-bottom:6px;font-weight:600;
}
.prompt .q{
  font-family:var(--font-mono);font-size:.84rem;line-height:1.6;
  background:var(--amber-soft);border-radius:8px;padding:10px 14px;
  white-space:pre-wrap;
}
.prompt p{font-size:.9rem;color:var(--ink-soft);margin:.6em 0 0}

/* verification checklist */
.verify{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--bg-raise);border-radius:0 10px 10px 0;box-shadow:var(--shadow);
  padding:16px 20px;margin:20px 0;max-width:74ch;
}
.verify b.lbl{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:8px;font-weight:600;
}
.verify ul{list-style:none;padding:0;margin:0;font-size:.92rem;color:var(--ink-soft)}
.verify li{padding-left:26px;position:relative}
.verify li::before{
  content:"☐";position:absolute;left:2px;top:0;color:var(--accent);
}

/* callouts (shared with class page) */
.callout{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--bg-raise);border-radius:0 10px 10px 0;
  padding:16px 20px;margin:20px 0;max-width:74ch;box-shadow:var(--shadow);
}
.callout.amber{border-left-color:var(--amber)}
.callout b.lbl{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:4px;font-weight:600;
}
.callout.amber b.lbl{color:var(--amber)}
.callout p{font-size:.93rem;margin:.3em 0}

/* homework / deliverables table */
table{border-collapse:collapse;width:100%;font-size:.92rem}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg-raise);margin:18px 0}
th{
  text-align:left;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:600;
  padding:12px 16px;border-bottom:1px solid var(--line);
}
td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}

/* prev / next footer nav */
nav.wknav{
  max-width:880px;margin:0 auto;padding:0 28px;
  display:flex;gap:14px;border-top:1px solid var(--line);
}
nav.wknav a{
  flex:1;display:block;text-decoration:none;color:var(--ink);
  padding:20px 4px 26px;
}
nav.wknav a:hover .t{color:var(--accent)}
nav.wknav .dir{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:3px;
}
nav.wknav .t{font-size:.95rem}
nav.wknav a.next{text-align:right}
nav.wknav [aria-disabled="true"]{visibility:hidden}

footer.lesson{
  border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-faint);
  max-width:880px;margin:0 auto;padding:22px 28px 40px;
}
footer.lesson a{color:var(--ink-soft)}

@media(max-width:600px){
  .crumbs,header.lesson,main.lesson,nav.wknav,footer.lesson{padding-left:18px;padding-right:18px}
}