/* Learning Lab teacher's guides: graph-paper ground, a coloured hero board per game (teal for Bank the Unbanked, navy for Ad Auction Live), steps as ink-bordered cards with Click / Say / Watch rows. */
:root{
  --paper:#fff7e0; --grid:#f0e4c0; --ink:#14162b; --white:#ffffff; --muted:#4a4e69;
  --pink:#ff4fa3; --mint:#3ee6b0; --sun:#ffd23f; --sky:#8fb3ff;
  --board:#22408f; --board-soft:#e7ecff;
  --warn:#b3261e; --warn-soft:#fde8e6; --ok:#0b6b4c; --ok-soft:#ddf6ec; --tip:#fff1b8;
  --display:'Bricolage Grotesque','Arial Black',system-ui,sans-serif;
  --body:'Figtree','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:light;
}
body.btu{--board:#0f4c5c;--board-soft:#dff0f2}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.55;color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
[id]{scroll-margin-top:84px}
.wrap{max-width:1000px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.label{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}
p{margin:10px 0}

.nav{position:sticky;top:0;z-index:20;background:rgba(255,247,224,.95);backdrop-filter:blur(6px);border-bottom:3px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:22px}
.logo svg{width:34px;height:34px}
.links{display:flex;gap:6px;flex-wrap:wrap}
.links a{text-decoration:none;font-weight:700;font-size:15px;padding:6px 12px;border-radius:999px;border:2px solid transparent}
.links a:hover{border-color:var(--ink);background:var(--white)}
.links a.play{background:var(--sun);border-color:var(--ink)}
@media (max-width:620px){.links a:not(.play){display:none}}

.hero{padding-block:clamp(26px,5vw,48px)}
.board{position:relative;background:var(--board);color:var(--white);border:4px solid var(--ink);border-radius:36px;box-shadow:10px 10px 0 var(--ink);padding:clamp(24px,5vw,52px);overflow:hidden}
.board::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1.5px,transparent 1.6px);background-size:22px 22px;pointer-events:none}
.board>*{position:relative}
.eyebrow{display:inline-flex;background:var(--pink);color:var(--white);border:3px solid var(--ink);border-radius:999px;padding:5px 14px;transform:rotate(-2deg)}
.hero h1{font-size:clamp(40px,7vw,84px);font-weight:800;letter-spacing:-1.5px;margin-top:16px}
.hero h1 span{color:var(--sun)}
.lead{font-size:clamp(18px,1.8vw,22px);color:#eef3ff;max-width:56ch;margin:14px 0 0}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.facts span{font-family:var(--mono);font-size:13.5px;font-weight:700;background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:10px;padding:3px 10px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:19px;text-decoration:none;border:4px solid var(--ink);border-radius:18px;padding:10px 20px;background:var(--sun);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.ghost{background:var(--white)}

section{padding-block:clamp(22px,4vw,44px)}
.head{margin-bottom:18px}
.head h2{font-size:clamp(30px,4.4vw,50px);font-weight:800}
.head p{margin:8px 0 0;max-width:62ch}
.tape{display:inline-block;border:3px solid var(--ink);padding:3px 12px;transform:rotate(-1.5deg);margin-bottom:10px;background:var(--sky)}
h3{font-size:clamp(22px,2.4vw,28px);font-weight:800;margin:28px 0 8px}

.panel{background:var(--white);border:4px solid var(--ink);border-radius:24px;box-shadow:7px 7px 0 var(--ink);padding:clamp(16px,3vw,26px);min-width:0}
.panel>:first-child{margin-top:0}
.tablewrap{overflow-x:auto;background:var(--white);border:4px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink);margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 12px;border-bottom:2px solid var(--grid);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--paper)}
td.n{font-family:var(--mono);font-weight:700;white-space:nowrap}
.fix{color:var(--ok);font-weight:700} .hurt{color:var(--warn);font-weight:700}
.formula{font-family:var(--mono);font-size:15.5px;line-height:1.7;background:var(--white);border:4px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:14px 18px;margin:14px 0;overflow-x:auto}

.rules{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:r}
.rules li{counter-increment:r;background:var(--white);border:3px solid var(--ink);border-radius:18px;padding:12px 16px 12px 58px;position:relative}
.rules li::before{content:counter(r);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--pink);color:var(--white);border:2px solid var(--ink);font-family:var(--mono);font-weight:700;display:grid;place-items:center}
.rules b{display:block}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.mini{background:var(--white);border:3px solid var(--ink);border-radius:18px;padding:14px 18px;box-shadow:4px 4px 0 var(--ink);min-width:0}
.mini h4{font-size:20px;margin-bottom:6px}
.mini p{font-size:16.5px}
.mono{font-family:var(--mono);font-size:.9em}

.steps{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.step{background:var(--white);border:4px solid var(--ink);border-radius:24px;box-shadow:7px 7px 0 var(--ink);overflow:hidden}
.step>header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;border-bottom:4px solid var(--ink);background:var(--board-soft)}
.step .no{font-family:var(--display);font-weight:800;font-size:22px;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--sun);display:grid;place-items:center;flex:none}
.step h4{font-size:clamp(20px,2.2vw,24px);flex:1;min-width:12ch}
.step .time{font-family:var(--mono);font-size:13.5px;font-weight:700;background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:2px 10px}
.rows{display:grid;grid-template-columns:120px minmax(0,1fr);margin:0}
.rows>dt,.rows>dd{margin:0;padding:10px 18px;border-bottom:2px solid var(--grid)}
.rows>dt{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding-top:13px}
.rows>dd ol,.rows>dd ul{margin:0;padding-left:20px}
.rows>dd li{margin:3px 0}
.rows>dt.say+dd{font-style:italic}
.rows>dt.watch,.rows>dt.watch+dd{background:var(--warn-soft)}
@media (max-width:620px){.rows{grid-template-columns:1fr}.rows>dt{border-bottom:0;padding-bottom:0}}
figure{margin:0;padding:16px 18px 18px}
figure img{width:100%;border:3px solid var(--ink);border-radius:14px}
figcaption{font-size:14.5px;color:var(--muted);margin-top:6px}
.k{font-family:var(--body);font-weight:800;font-size:.9em;border:2px solid var(--ink);border-radius:8px;padding:0 6px;background:var(--sun);white-space:nowrap}

.callout{border:3px solid var(--ink);border-radius:18px;padding:12px 16px;margin:14px 0}
.callout.tip{background:var(--tip)} .callout.warn{background:var(--warn-soft)} .callout.ok{background:var(--ok-soft)}
.callout>b:first-child{display:block}
.cheat{background:var(--white);border:4px solid var(--ink);border-radius:24px;box-shadow:7px 7px 0 var(--ink);padding:18px 22px}
.cheat ol{margin:0;padding-left:24px;display:grid;gap:6px}
.refs{font-size:15.5px;display:grid;gap:8px;padding-left:0;list-style:none;margin:0}
.refs li{padding-left:24px;text-indent:-24px}
.refs a{font-weight:700;word-break:break-word}
footer{border-top:3px solid var(--ink);background:var(--ink);color:var(--paper);padding-block:22px;font-size:15px;margin-top:30px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer a{color:var(--sun)}
@media print{
  body{background:#fff;font-size:11.5pt}
  .nav,.cta,.no-print{display:none!important}
  .board{background:#fff;color:#000;box-shadow:none}
  .lead{color:#000}
  .step,.panel,.mini,.tablewrap,.cheat,.formula{box-shadow:none;break-inside:avoid}
  figure img{max-height:9cm;width:auto}
}