/* The Arduino Ladder: a Bozoma Innovation Hub programme.
   Brand tokens match bozomainnovationhub.com: plum #24182E, red #CA1F3F, gold #FFBE00
   (gold text #8A5C00). Outfit for headings and UI, Rubik for reading, IBM Plex Mono for code.
   All fonts live in assets/fonts so the site works offline from a USB stick.
   The band colours (--b0 to --b8) are the resistor colour code and are taught: do not change them. */

@font-face{font-family:"Rubik"; font-style:normal; font-weight:300 900; font-display:swap; src:url(fonts/rubik.woff2) format("woff2")}
@font-face{font-family:"Rubik"; font-style:italic; font-weight:300 900; font-display:swap; src:url(fonts/rubik-italic.woff2) format("woff2")}
@font-face{font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/outfit.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono"; font-style:normal; font-weight:600 700; font-display:swap; src:url(fonts/plex-mono-600.woff2) format("woff2")}

:root{
  /* brand constants: the same in both themes */
  --plum:#24182E; --plum-2:#3A2B47; --plum-soft:#5A4470; --plum-tint:#F4F0F6;
  --red:#CA1F3F; --red-dark:#A8172F; --gold:#FFBE00; --gold-ink:#8A5C00;
  --cta:#CA1F3F; --cta-hover:#A8172F;
  --display:"Outfit","Rubik","Segoe UI",system-ui,Arial,sans-serif;
  --text:"Rubik","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* light theme */
  --ground:#F9F9F9; --surface:#FFFFFF; --surface-2:#F4F0F6; --line:#E4DEE9; --line-soft:#EFEBF2;
  --ink:#24182E; --ink-2:#3B3343; --muted:#655C6E;
  --accent:#CA1F3F; --accent-ink:#A8172F; --accent-soft:#FDF0F2;
  --copper:#8A5C00; --copper-soft:#FFF6D9;
  --good:#17705A; --good-soft:#E3F4EE;
  --code-bg:#F6F3F8; --code-ink:#24182E;
  --b0:#2B2F31; --b1:#6B4526; --b2:#9E3325;
  --b3:#8C5417; --b4:#6E5D00; --b5:#2A6E3D;
  --b6:#1F5A8C; --b7:#5E3E8C; --b8:#454B4F;
  --bc:#CA1F3F;
  --shadow:0 1px 2px rgba(36,24,46,.05), 0 10px 28px -18px rgba(36,24,46,.28);
  --measure:66ch; --wide:1000px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#140F19; --surface:#1E1725; --surface-2:#291F31; --line:#3A2F45; --line-soft:#2C2337;
    --ink:#F3EEF6; --ink-2:#D5CCDC; --muted:#A99DB4;
    --accent:#FF6F87; --accent-ink:#FF9CAD; --accent-soft:#33141F;
    --copper:#F5BF3C; --copper-soft:#2D2313;
    --good:#5FCBA2; --good-soft:#12271F;
    --code-bg:#0F0B13; --code-ink:#EDE6F2;
    --b0:#9AA3A6; --b1:#B98452; --b2:#E2705F;
    --b3:#E0A054; --b4:#D6C24A; --b5:#5FB878;
    --b6:#7FB3E0; --b7:#B096DE; --b8:#A9B1B5;
    --bc:#FF6F87;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#140F19; --surface:#1E1725; --surface-2:#291F31; --line:#3A2F45; --line-soft:#2C2337;
  --ink:#F3EEF6; --ink-2:#D5CCDC; --muted:#A99DB4;
  --accent:#FF6F87; --accent-ink:#FF9CAD; --accent-soft:#33141F;
  --copper:#F5BF3C; --copper-soft:#2D2313;
  --good:#5FCBA2; --good-soft:#12271F;
  --code-bg:#0F0B13; --code-ink:#EDE6F2;
  --b0:#9AA3A6; --b1:#B98452; --b2:#E2705F;
  --b3:#E0A054; --b4:#D6C24A; --b5:#5FB878;
  --b6:#7FB3E0; --b7:#B096DE; --b8:#A9B1B5;
  --bc:#FF6F87;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:4.5rem}
body{
  background:var(--ground); color:var(--ink); margin:0; padding:0 1.25rem;
  font-family:var(--text); font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem); line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
img{max-width:100%}
/* keep the footer at the bottom of short pages */
body{min-height:100vh; display:flex; flex-direction:column}
body > *{flex-shrink:0}
body > .wrap{width:100%; flex-grow:1}
.wrap{max-width:var(--wide); margin:0 auto}
.col{max-width:var(--measure)}
h1,h2,h3,h4,h5,.eyebrow,.chip,th,.stepno,nav a,summary,.tag{font-family:var(--display)}
h1,h2,h3,h4,h5{margin:0; line-height:1.2; text-wrap:balance; color:var(--ink)}
p,ul,ol{margin:0}
strong{font-weight:600}
b{font-weight:600}
code{
  font-family:var(--mono); font-size:.86em;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:4px; padding:.08em .32em;
}
pre{
  margin:0; background:var(--code-bg); color:var(--code-ink);
  border:1px solid var(--line); border-left:3px solid var(--bc); border-radius:4px 10px 10px 4px; padding:1rem 1.1rem;
  overflow-x:auto; font-family:var(--mono);
  font-size:.8rem; line-height:1.7; tab-size:2;
}
pre code{background:none; border:none; padding:0; font-size:inherit; color:inherit}
.filename{font-family:var(--mono); font-size:.72rem; color:var(--muted); display:block; margin-bottom:.4rem}
.mono{font-family:var(--mono)}

/* the sticky in-page section bar on band pages */
nav[aria-label="Sections"]{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); margin:0 -1.25rem; padding:.55rem 1.25rem;
  display:flex; gap:.3rem; flex-wrap:wrap; align-items:center;
}
nav[aria-label="Sections"] a{
  font-size:.74rem; font-weight:500; letter-spacing:.02em;
  text-decoration:none; color:var(--ink-2); padding:.28rem .66rem; border-radius:99px; border:1px solid transparent;
}
nav[aria-label="Sections"] a:hover,nav[aria-label="Sections"] a:focus-visible{color:var(--ink); border-color:var(--line); background:var(--surface)}
/* on a phone the section bar is one row that scrolls sideways, so it never covers the lesson */
@media (max-width:760px){
  nav[aria-label="Sections"]{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; padding:.45rem 1rem; gap:.2rem;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav[aria-label="Sections"] a{white-space:nowrap; flex:none; background:var(--surface); border-color:var(--line)}
}
.choose + section.part,.sketchbox + section.part{margin-top:2.2rem}

.stack{display:flex; flex-direction:column; gap:1.1rem}
.stack-sm{display:flex; flex-direction:column; gap:.55rem}
.eyebrow{font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--copper)}
h1{font-size:clamp(2rem,1.45rem + 2.6vw,3.2rem); font-weight:700; letter-spacing:-.025em}
h2{font-size:clamp(1.4rem,1.18rem + .9vw,1.85rem); font-weight:600; letter-spacing:-.015em}
h3{font-size:1.16rem; font-weight:600}
h4{font-size:1.02rem; font-weight:600}
h5{font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.note{font-size:.94em; color:var(--muted)}
.sub{color:var(--ink-2)}
ul.plain{padding-left:1.15rem; display:flex; flex-direction:column; gap:.4rem}
ul.plain li::marker{color:var(--bc)}
ol.num{padding-left:1.4rem; display:flex; flex-direction:column; gap:.55rem}
ol.num li::marker{color:var(--bc); font-family:var(--display); font-weight:600}

section.part{padding:2.5rem 0; border-top:1px solid var(--line)}
.parthead{display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; margin-bottom:1rem}
.tag{
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bc); border:1px solid var(--bc); border-radius:99px; padding:.14rem .58rem; white-space:nowrap;
}
.mins{margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--muted)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.15rem 1.3rem; box-shadow:var(--shadow)}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem}

.words{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bc); border-radius:0 10px 10px 0; padding:1rem 1.2rem}
.words dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.45rem 1rem; margin:.6rem 0 0; font-size:.95em}
.words dt{font-family:var(--mono); font-size:.82em; color:var(--ink); font-weight:500; padding-top:.16rem}
.words dd{margin:0; color:var(--ink-2)}

.steps{display:flex; flex-direction:column; gap:1.1rem; counter-reset:s}
.step{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem .9rem; align-items:start}
.step::before{
  counter-increment:s; content:counter(s);
  font-family:var(--display); font-size:.82rem; font-weight:600; color:var(--bc);
  border:1.5px solid var(--bc); border-radius:50%; width:1.85rem; height:1.85rem;
  display:grid; place-items:center; margin-top:.1rem; grid-row:span 3;
}
.step .body{display:flex; flex-direction:column; gap:.5rem; min-width:0}

.see,.ifnot{border-radius:8px; padding:.65rem .9rem; font-size:.93em; line-height:1.6}
.see{background:var(--good-soft); color:var(--ink); border-left:3px solid var(--good)}
.ifnot{background:var(--copper-soft); color:var(--ink); border-left:3px solid var(--copper)}
.see b,.ifnot b{font-family:var(--display); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:.15rem; font-weight:600}
.see b{color:var(--good)}
.ifnot b{color:var(--copper)}

.callout{border-left:3px solid var(--bc); padding:.2rem 0 .2rem 1rem; display:flex; flex-direction:column; gap:.5rem}
.brief{background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius:12px; padding:1.05rem 1.2rem; display:flex; flex-direction:column; gap:.6rem}

details{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.85rem 1.1rem}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer; font-size:.8rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
details .inner{padding-top:.85rem; display:flex; flex-direction:column; gap:.7rem; font-size:.96em; color:var(--ink-2)}

.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:.9em; min-width:520px}
th{text-align:left; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
   font-weight:600; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--surface-2)}
td{padding:.7rem .9rem; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:top}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--ink)}
td code{white-space:nowrap}

figure{margin:0; display:flex; flex-direction:column; gap:.6rem}
figure svg{max-width:100%; height:auto; display:block; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.8rem}
figcaption{font-size:.9em; color:var(--muted)}
/* diagram labels were drawn for Archivo, which the site no longer ships: use the brand display face
   (a touch narrower, so every label still fits where it was placed) */
svg [font-family^="Archivo"]{font-family:var(--display)}

.tier{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.6rem 1rem; align-items:start}
.tier dt{font-family:var(--display); font-size:.72rem; font-weight:600; letter-spacing:.1em;
         text-transform:uppercase; color:var(--bc); padding-top:.3rem; white-space:nowrap}
.tier dd{margin:0; color:var(--ink-2)}

a{color:var(--accent-ink); text-underline-offset:.16em; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:3px}

/* generated wiring diagrams. A board can run to 45 columns, so the figure
   breaks out of the reading column to the full page width and, past that,
   scrolls inside itself rather than making the page scroll sideways. */
figure.wiring{
  margin:1.3rem 0 1.6rem;
  width:min(var(--wide), calc(100vw - var(--side-w, 0px) - 2.5rem));
  max-width:none;
  overflow-x:auto;
}
figure.wiring svg{padding:.9rem .8rem}
figure.wiring figcaption{
  font-size:.92rem; color:var(--muted); margin-top:.55rem;
  line-height:1.55; max-width:var(--measure);
}
@media (max-width:760px){ figure.wiring{width:calc(100vw - 2.5rem)} }


/* ---------- added for the standalone site ---------- */
/* :root[...] as well, so a band page keeps its band colour in dark mode too */
[data-band="0"],:root[data-band="0"]{--bc:var(--b0)}
[data-band="1"],:root[data-band="1"]{--bc:var(--b1)}
[data-band="2"],:root[data-band="2"]{--bc:var(--b2)}
[data-band="3"],:root[data-band="3"]{--bc:var(--b3)}
[data-band="4"],:root[data-band="4"]{--bc:var(--b4)}
[data-band="5"],:root[data-band="5"]{--bc:var(--b5)}
[data-band="6"],:root[data-band="6"]{--bc:var(--b6)}
[data-band="7"],:root[data-band="7"]{--bc:var(--b7)}
[data-band="8"],:root[data-band="8"]{--bc:var(--b8)}

.skip{position:absolute; left:-9999px; top:.5rem; background:var(--gold); color:var(--plum); font-family:var(--display); font-weight:600;
      padding:.55rem 1rem; border-radius:99px; z-index:60; text-decoration:none}
.skip:focus{left:.75rem}

/* ---------- BIH header bar: plum, white mark, the lockup, band links ---------- */
.topbar{
  margin:0 -1.25rem; padding:.7rem 1.25rem;
  display:flex; gap:.6rem 1.1rem; flex-wrap:wrap; align-items:center;
  background:var(--plum); color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .home{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:#fff; margin-right:auto; min-width:0}
.topbar .home img{width:2.1rem; height:2.1rem; flex:none; display:block}
.topbar .lock{display:flex; flex-direction:column; line-height:1.1}
.topbar .lock b{font-family:var(--display); font-size:1.08rem; font-weight:600; letter-spacing:-.005em; color:#fff}
.topbar .lock small{font-family:var(--display); font-size:.62rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.66); margin-top:.18rem}
.topbar .home:hover .lock b{color:var(--gold)}
.bandlinks{display:flex; gap:.25rem; flex-wrap:wrap; align-items:center}
.bandlinks::before{content:"Bands"; font-family:var(--display); font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-right:.3rem}
.bandlinks a{
  --dot:var(--b0);
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--mono); font-size:.76rem; font-weight:500; text-decoration:none;
  color:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:.16rem .5rem .16rem .38rem;
}
.bandlinks a::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--dot); box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.bandlinks a:nth-child(2){--dot:var(--b1)} .bandlinks a:nth-child(3){--dot:var(--b2)} .bandlinks a:nth-child(4){--dot:var(--b3)}
.bandlinks a:nth-child(5){--dot:var(--b4)} .bandlinks a:nth-child(6){--dot:var(--b5)} .bandlinks a:nth-child(7){--dot:var(--b6)}
.bandlinks a:nth-child(8){--dot:var(--b7)} .bandlinks a:nth-child(9){--dot:var(--b8)}
.bandlinks a:hover,.bandlinks a:focus-visible{color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.36)}
.bandlinks a[aria-current="page"]{color:var(--plum); background:#fff; border-color:#fff; font-weight:600}
.bandlinks a[aria-current="page"]::before{box-shadow:0 0 0 1px rgba(36,24,46,.35)}
.topbar .bih{
  font-family:var(--display); font-size:.8rem; font-weight:500; text-decoration:none; white-space:nowrap;
  color:var(--plum); background:var(--gold); border-radius:99px; padding:.34rem .85rem;
}
.topbar .bih:hover,.topbar .bih:focus-visible{background:#fff}
.topbar .bih .short{display:none}
@media (max-width:820px){
  .topbar{padding:.6rem 1rem; margin:0 -1.25rem; gap:.55rem .8rem}
  .bandlinks{order:3; width:100%}
}
@media (max-width:480px){
  .topbar .bih .long{display:none}
  .topbar .bih .short{display:inline}
  .bandlinks::before{display:none}
  .bandlinks{display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:.2rem}
  .bandlinks a{justify-content:center; gap:.22rem; padding:.2rem 0; font-size:.74rem}
  .bandlinks a::before{width:.5rem; height:.5rem}
  .hero{padding-top:2.6rem}
  .hero .eyebrow{font-size:.62rem; letter-spacing:.1em; padding:.38rem .75rem}
}

/* ---------- home page hero ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  margin:0 -1.25rem; padding:3.6rem 1.25rem 3.4rem;
  background:var(--plum); color:#fff;
}
.hero::before,.hero::after{content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); pointer-events:none}
.hero::before{width:360px; height:360px; background:var(--gold); opacity:.22; right:-80px; top:-150px}
.hero::after{width:420px; height:420px; background:var(--red); opacity:.28; left:-160px; bottom:-260px}
.hero .wrap{position:relative}
.hero .eyebrow{display:inline-flex; align-items:center; gap:.55rem; color:#fff; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2); border-radius:99px; padding:.4rem .9rem; font-size:.7rem; line-height:1.3}
.hero .eyebrow i{font-style:normal; color:var(--gold)}
.hero h1{color:#fff; font-size:clamp(2.3rem,1.6rem + 3.4vw,3.9rem)}
.hero h1 em{font-style:normal; color:var(--gold)}
.hero .sub{color:rgba(255,255,255,.86)}
.hero .note{color:rgba(255,255,255,.66)}
.hero .startbtn{box-shadow:0 8px 22px -6px rgba(202,31,63,.6)}
.hero .stripes{display:flex; gap:5px; margin-top:2.2rem; max-width:22rem}
.hero .stripes span{flex:1; height:8px; border-radius:99px; box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.hero .stripes-label{font-family:var(--display); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:.55rem}

/* ---------- BIH footer ---------- */
.bihfoot{
  margin:4rem -1.25rem 0; padding:2.8rem 1.25rem 1.6rem;
  background:var(--plum); color:rgba(255,255,255,.78); font-size:.9rem; line-height:1.6;
}
.bihfoot a{color:rgba(255,255,255,.9); text-decoration:none}
.bihfoot a:hover,.bihfoot a:focus-visible{color:#fff; text-decoration:underline}
.bihfoot .pagenote{max-width:var(--measure); color:rgba(255,255,255,.72); margin-bottom:1.8rem}
.bihfoot .pagenote + .foot-grid{border-top:1px solid rgba(255,255,255,.12); padding-top:1.9rem}
.bihfoot .pagenote code{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.14); color:#fff}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:2rem}
.foot-brand .lockup{display:inline-flex; align-items:center; gap:.7rem; color:#fff}
.foot-brand img{width:2.6rem; height:2.6rem; display:block}
.foot-brand .lockup span{font-family:var(--display); font-weight:600; font-size:1.12rem; line-height:1.15; color:#fff}
.foot-brand .lockup small{display:block; font-weight:500; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:.2rem}
.foot-brand p{margin-top:.9rem; max-width:30ch}
.bihfoot h4{font-family:var(--display); color:var(--gold); font-size:.95rem; font-weight:500; margin:.2rem 0 .7rem}
.bihfoot ul{list-style:none; padding:0; margin:0; display:grid; gap:.45rem}
.foot-bottom{display:flex; justify-content:space-between; gap:.6rem 1.2rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1.1rem; font-size:.8rem; color:rgba(255,255,255,.58)}
.foot-bottom .tagline{font-family:var(--display); color:var(--gold); letter-spacing:.02em}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1} }
@media (max-width:420px){ .foot-grid{grid-template-columns:1fr} }

.sketchbox{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bc);
  border-radius:0 10px 10px 0; padding:.9rem 1.1rem; margin:1.4rem 0 0; max-width:var(--measure);
}
.sketchbox h2{font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.sketchbox ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.3rem}
.sketchbox a{font-family:var(--mono); font-size:.74rem; text-decoration:none; word-break:break-all;
             color:var(--ink-2); border:1px solid var(--line); border-radius:6px; padding:.16rem .45rem; background:var(--ground)}
.sketchbox a:hover,.sketchbox a:focus-visible{color:var(--ink); border-color:var(--bc)}
.sketchbox p{font-size:.88em; color:var(--muted); margin-top:.6rem}
.sketchbox p a{font-family:inherit; font-size:inherit; color:var(--accent-ink); text-decoration:underline; word-break:normal}

/* ---------- project pages and the choose-your-build index ---------- */
.choose{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bc);
  border-radius:0 10px 10px 0; padding:1rem 1.15rem; margin:1.4rem 0 0; max-width:var(--measure);
}
.choose h2{font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.6rem}
.choose ul{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.choose li{display:grid; grid-template-columns:4.8rem minmax(0,1fr); gap:.7rem; align-items:baseline}
.choose a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.choose a:hover,.choose a:focus-visible{border-bottom-color:var(--bc); color:var(--bc)}
.choose .cb{font-size:.88em; color:var(--muted); display:block}
.choose > p{font-size:.88em; color:var(--muted); margin-top:.7rem}

.ptype{display:inline-block; font-family:var(--display); font-size:.62rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; border-radius:99px; padding:.16rem .5rem;
  border:1px solid; white-space:nowrap; line-height:1.2; text-align:center}
.ptype.core{color:var(--surface); background:var(--ink); border-color:var(--ink)}
.ptype.swap{color:var(--bc); border-color:var(--bc); background:transparent}
.ptype.practice{color:var(--accent); border-color:var(--accent); background:transparent}
.ptype.stretch{color:var(--copper); border-color:var(--copper); background:transparent}
.ptype.identify{color:var(--muted); border-color:var(--line); background:transparent}
.ptype.ship{color:var(--b7); border-color:var(--b7); background:transparent}
.ptype.bench{color:var(--b8); border-color:var(--b8); background:transparent}
.ptype.invent{color:var(--copper); border-color:var(--copper); background:transparent}

/* ---- three-column idea matrix ---- */
.matrix3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  margin:1.1rem 0; max-width:var(--wide)}
.matrix3 .mcol{background:var(--surface); padding:1rem 1.15rem}
.matrix3 .lbl{display:block; font-family:var(--display); font-size:.66rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem}
.matrix3 ul{margin:0; padding-left:1rem; font-family:var(--mono);
  font-size:.8rem; color:var(--ink-2); line-height:1.9}


/* ---- ship it: the evidence, put where somebody can see it ---- */
.ship{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--b7);
  border-radius:0 10px 10px 0; padding:1.3rem 1.5rem; margin:2rem 0; max-width:var(--wide);
}
.ship h2{font-family:var(--display); font-size:1.06rem; font-weight:600;
  letter-spacing:.01em; margin:0 0 .5rem; color:var(--b7)}
.ship p{margin:0 0 .7rem; max-width:var(--measure)}
.ship p:last-child{margin-bottom:0}
.ship ol{margin:.7rem 0; padding-left:1.15rem; max-width:var(--measure)}
.ship li{margin-bottom:.35rem}
.ship .cam{background:var(--surface-2); border-radius:8px; padding:.7rem .9rem; margin:.7rem 0;
  font-size:.95em; max-width:var(--measure)}
.ship code{font-size:.9em}


.projmeta{display:grid; gap:.55rem; margin:1.3rem 0 0; max-width:var(--measure);
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem; box-shadow:var(--shadow)}
.projmeta div{display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.8rem; font-size:.92em}
.projmeta dt{font-family:var(--display); font-size:.7rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); padding-top:.15rem}
.projmeta dd{margin:0; color:var(--ink-2)}
@media (max-width:480px){ .projmeta div{grid-template-columns:5.6rem minmax(0,1fr); gap:.6rem} }

/* the "which one have you got" decision block */
.which{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--copper);
  border-radius:4px 4px 10px 10px; padding:1.1rem 1.25rem; margin:1.5rem 0; max-width:var(--measure);
}
.which h4{font-family:var(--display); font-size:.74rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--copper); margin:0 0 .6rem}
.which > p{margin:0 0 .8rem}
.which .opts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:.9rem 0 .3rem}
.which .opt{background:var(--ground); padding:.85rem 1rem}
.which .opt b{display:block; font-family:var(--display); font-size:.92rem; margin-bottom:.25rem; color:var(--ink)}
.which .opt p{margin:0 0 .4rem; font-size:.9em; line-height:1.5}
.which .opt p:last-child{margin-bottom:0}
.which .go{font-family:var(--mono); font-size:.78em; color:var(--bc)}

/* a callout that must not be skimmed past */
:root{--danger:#B3122F; --danger-soft:#FDECEF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--danger:#FF7A8C; --danger-soft:#3A1520}}
:root[data-theme="dark"]{--danger:#FF7A8C; --danger-soft:#3A1520}
.callout.danger{border-left:4px solid var(--danger); background:var(--danger-soft);
  padding:.9rem 1.1rem .9rem 1.1rem; border-radius:0 10px 10px 0}
.callout.danger h5{color:var(--danger)}

.pager{display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between;
       border-top:1px solid var(--line); margin-top:3rem; padding-top:1.4rem}
.pager a{
  display:block; text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:.85rem 1.15rem; min-width:min(100%,240px); flex:1;
  box-shadow:var(--shadow);
}
.pager a:hover,.pager a:focus-visible{border-color:var(--bc)}
.pager .dir{display:block; font-family:var(--display); font-size:.68rem; font-weight:600;
            letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem}
.pager .name{font-family:var(--display); font-weight:600}
.pager .next{text-align:right}

.bandgrid{display:flex; flex-direction:column; gap:1rem}
.bandcard{
  background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--bc);
  border-radius:4px 12px 12px 4px; padding:1.15rem 1.3rem; box-shadow:var(--shadow);
  text-decoration:none; color:inherit; display:block; transition:transform .15s ease, border-color .15s ease;
}
.bandcard:hover,.bandcard:focus-visible{border-color:var(--bc); transform:translateY(-1px)}
.bandcard .row{display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.5rem}
.bandcard h3{font-size:1.15rem; font-weight:600}
.bandcard p{color:var(--ink-2); font-size:.96em}
.bandcard .go{display:inline-block; margin-top:.6rem; font-family:var(--display);
              font-size:.8rem; font-weight:600; color:var(--bc)}
.startbtn{
  display:inline-block; text-decoration:none; background:var(--cta); color:#fff;
  font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:.8rem 1.6rem; border-radius:99px; margin-top:.4rem;
  box-shadow:0 6px 18px -6px rgba(202,31,63,.5);
}
.startbtn:hover,.startbtn:focus-visible{background:var(--cta-hover); color:#fff}

@media (prefers-reduced-motion: reduce){ .bandcard{transition:none} .bandcard:hover{transform:none} }

/* ---------- print: the lesson, not the chrome ---------- */
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
    --ground:#fff; --surface:#fff; --surface-2:#F4F0F6; --line:#CFC6D6; --line-soft:#E4DEE9;
    --ink:#111; --ink-2:#222; --muted:#444;
    --accent:#A8172F; --accent-ink:#A8172F; --accent-soft:#fff;
    --copper:#6E4A00; --copper-soft:#fff; --good:#0F5A47; --good-soft:#fff;
    --code-bg:#F6F3F8; --code-ink:#111;
    --b0:#2B2F31; --b1:#6B4526; --b2:#9E3325; --b3:#8C5417; --b4:#6E5D00;
    --b5:#2A6E3D; --b6:#1F5A8C; --b7:#5E3E8C; --b8:#454B4F;
    --danger:#B3122F; --danger-soft:#fff;
    --bc:#A8172F; --shadow:none; color-scheme:light;
  }
  :root[data-band="0"]{--bc:var(--b0)} :root[data-band="1"]{--bc:var(--b1)} :root[data-band="2"]{--bc:var(--b2)} :root[data-band="3"]{--bc:var(--b3)} :root[data-band="4"]{--bc:var(--b4)} :root[data-band="5"]{--bc:var(--b5)} :root[data-band="6"]{--bc:var(--b6)} :root[data-band="7"]{--bc:var(--b7)} :root[data-band="8"]{--bc:var(--b8)}
  @page{margin:16mm 14mm}
  body{display:block; min-height:0; padding:0; font-size:10.5pt; line-height:1.5; background:#fff}
  .skip,nav[aria-label="Sections"],.bandlinks,.topbar .bih,.pager,.foot-grid,.hero .stripes,.hero .stripes-label{display:none !important}
  .topbar{background:none; color:#111; margin:0 0 6mm; padding:0 0 3mm; border-bottom:1px solid #CFC6D6}
  .topbar .home{color:#111}
  .topbar .home img{content:url(brand/logo-mark.png)}
  .topbar .lock b{color:#24182E}
  .topbar .lock small{color:#555}
  .hero{background:none; color:#111; margin:0; padding:0 0 4mm}
  .hero::before,.hero::after{display:none}
  .hero h1,.hero .sub,.hero .note{color:#111}
  .hero .eyebrow{background:none; border:none; padding:0; color:#6E4A00}
  .startbtn,.hero .startbtn{background:none; color:#A8172F; box-shadow:none; padding:0; border-radius:0}
  .hero h1 em{color:#24182E}
  .foot-bottom span:first-child::after{content:" \00B7  bozomainnovationhub.com \00B7  info@bozomainnovationhub.com"}
  .bihfoot{background:none; color:#333; margin:8mm 0 0; padding:3mm 0 0; border-top:1px solid #CFC6D6; font-size:9pt}
  .bihfoot a{color:#333}
  .bihfoot .pagenote{color:#333; border:none; padding:0; margin:0 0 2mm}
  .bihfoot .pagenote code{background:none; color:#111; border-color:#CFC6D6}
  .foot-bottom{border:none; margin:0; padding:0; color:#555}
  .foot-bottom .tagline{color:#6E4A00}
  section.part{padding:6mm 0; break-inside:auto}
  h2,h3,h4,h5,.parthead{break-after:avoid}
  pre,figure,.see,.ifnot,.callout,table,.card,.bandcard,.step{break-inside:avoid}
  figure.wiring{width:100%; overflow:visible}
  figure.wiring svg{width:100% !important; min-width:0 !important}
  .scroll{overflow:visible}
  table{min-width:0}
  pre{white-space:pre-wrap; border-left-width:2px}
  details{border-color:#CFC6D6}
  details::details-content{content-visibility:visible; display:block}
  .bandcard{border-left-width:4px}
  a{color:inherit}
}

/* ---- One section at a time (assets/pager.js) ---- */
.pg-on [hidden]{display:none !important}
nav[aria-label="Sections"] a.pg-done::after{content:"✓"; margin-left:.3em; color:var(--good); font-weight:700}
nav[aria-label="Sections"] a[aria-current="step"]{color:#fff; background:var(--plum,#24182E); border-color:var(--plum,#24182E)}
.pg-strip{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:1rem 0 0; font-family:"Outfit","Rubik",Arial,sans-serif}
.pg-meter{flex:1 1 220px; height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line-soft)}
.pg-meter span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),#FFBE00); transition:width .4s}
.pg-count{font-size:.85rem; color:var(--muted); margin:0}
.pg-mode{font:inherit; font-size:.78rem; color:var(--accent-ink); background:none; border:1px solid var(--line); border-radius:99px; padding:.3rem .8rem; cursor:pointer}
.pg-mode:hover,.pg-mode:focus-visible{border-color:var(--accent)}
.pg-foot{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2.5rem 0 1rem}
.pg-foot a{display:flex; flex-direction:column; gap:.15rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:12px; background:var(--surface);
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow); font-family:"Outfit","Rubik",Arial,sans-serif}
.pg-foot a:hover,.pg-foot a:focus-visible{border-color:var(--accent)}
.pg-foot small{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.pg-foot b{font-size:1.05rem}
.pg-foot .pg-next{text-align:right; grid-column:2; background:var(--accent); border-color:var(--accent); color:#fff}
.pg-foot .pg-next small{color:rgba(255,255,255,.8)}
@media (max-width:560px){.pg-foot{grid-template-columns:1fr}.pg-foot .pg-next{grid-column:1; order:-1}}
@media print{.pg-strip,.pg-foot{display:none !important}}
.pg-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:2rem 0 .5rem;
  font-family:"Outfit","Rubik",Arial,sans-serif}
.pg-band{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; font-weight:600}
.pg-band:hover{color:var(--accent)}
.pg-step{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-2)}
.pg-arrow{display:inline-grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); text-decoration:none; font-size:1.3rem; line-height:1}
a.pg-arrow:hover,a.pg-arrow:focus-visible{border-color:var(--accent); color:var(--accent)}
.pg-arrow.pg-off{opacity:.35}
.pg-head + section.part,.pg-head + .choose{margin-top:.5rem}
.pg-enter{animation:pg-in .35s ease-out}
@keyframes pg-in{from{opacity:0; transform:translateX(18px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.pg-enter{animation:none}}
@media print{.pg-head{display:none !important}}

/* ---- light / dark toggle (assets/theme.js) ---- */
.theme-toggle{display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; padding:0}
.theme-toggle:hover,.theme-toggle:focus-visible{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5)}
.theme-toggle svg{display:block}
@media print{.theme-toggle{display:none}}

/* ---- Section sidebar (wide screens) and drawer (phones, tablets), from assets/pager.js ---- */
html.has-side nav[aria-label="Sections"]{
  position:fixed; z-index:40; top:0; bottom:0; left:0; width:var(--side-w-real,300px);
  margin:0; padding:0 0 1.5rem; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  background:var(--surface); border-right:1px solid var(--line); border-bottom:0;
  -webkit-backdrop-filter:none; backdrop-filter:none; -webkit-mask-image:none; mask-image:none;
  counter-reset:sec;
}
html.has-side nav[aria-label="Sections"] > a{
  display:flex; align-items:center; gap:.6rem; margin:0 .7rem; padding:.5rem .7rem; border-radius:10px;
  font-size:.88rem; font-weight:500; letter-spacing:0; white-space:normal; line-height:1.3;
  color:var(--ink-2); background:none; border:1px solid transparent;
}
html.has-side nav[aria-label="Sections"] > a:not(.nav-3d)::before{
  counter-increment:sec; content:counter(sec); flex:none; display:grid; place-items:center;
  width:1.6rem; height:1.6rem; border-radius:50%; font-size:.72rem; font-weight:600;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line-soft);
}
html.has-side nav[aria-label="Sections"] > a.pg-done::before{content:"✓"; background:var(--good-soft); color:var(--good); border-color:transparent}
html.has-side nav[aria-label="Sections"] > a.pg-done::after{content:none}
html.has-side nav[aria-label="Sections"] > a:hover{background:var(--surface-2); color:var(--ink)}
html.has-side nav[aria-label="Sections"] > a[aria-current="step"]{background:var(--plum,#24182E); color:#fff; border-color:var(--plum,#24182E)}
html.has-side nav[aria-label="Sections"] > a[aria-current="step"]::before{background:#FFBE00; color:#24182E; border-color:transparent}
html.has-side nav[aria-label="Sections"] > a.nav-3d{margin:.15rem .7rem .15rem 3rem; padding:.4rem .7rem; font-size:.82rem; justify-content:flex-start}
.side-head{position:sticky; top:0; z-index:1; display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:center;
  padding:1.1rem 1.1rem .9rem; margin-bottom:.4rem; background:var(--surface); border-bottom:1px solid var(--line)}
.side-band{font-family:"Outfit","Rubik",Arial,sans-serif; font-weight:700; font-size:1rem; color:var(--ink); text-decoration:none; line-height:1.25}
.side-close{display:none; width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid var(--line); background:var(--ground); color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer}
.side-head .pg-strip{grid-column:1 / -1; margin:0; display:grid; gap:.45rem}
.side-head .pg-meter{flex:none}
.side-head .pg-count{font-size:.8rem}
.side-head .pg-mode{justify-self:start; font-size:.74rem}
.side-open{display:none}
.side-shade{display:none}

/* Wide screens: a fixed sidebar, and the page moves over to make room. */
@media (min-width:1180px){
  html.has-side{--side-w:300px}
  html.has-side body{padding-left:calc(300px + 1.25rem)}
}
/* Phones and tablets: a "Sections" bar opens the same list as a drawer. */
@media (max-width:1179.98px){
  html.has-side nav[aria-label="Sections"]{width:min(330px,88vw); transform:translateX(-105%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.3)}
  html.side-is-open nav[aria-label="Sections"]{transform:none}
  html.side-is-open .side-shade{display:block; position:fixed; inset:0; z-index:39; background:rgba(15,10,20,.45)}
  html.has-side .side-close{display:grid; place-items:center}
  html.has-side .side-open{
    display:flex; align-items:center; gap:.7rem; position:sticky; top:0; z-index:30; width:calc(100% + 2.5rem); margin:0 -1.25rem;
    padding:.6rem 1.25rem; border:0; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ground) 94%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
  .so-ico{display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:10px; background:var(--plum,#24182E); color:#fff; font-size:1.1rem; flex:none}
  .so-txt{display:flex; flex-direction:column; min-width:0; flex:1; font-family:"Outfit","Rubik",Arial,sans-serif}
  .so-txt small{font-size:.72rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
  .so-txt b{font-size:.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .so-n{font-size:.75rem; color:var(--good); font-weight:600; flex:none}
}
@media (prefers-reduced-motion:reduce){html.has-side nav[aria-label="Sections"]{transition:none}}
@media print{.side-open,.side-shade,.side-head{display:none !important} html.has-side body{padding-left:0}}
html.has-side nav[aria-label="Sections"] .side-head a.side-band{padding:0; border:0; background:none; color:var(--ink); font-size:1rem; font-weight:700; letter-spacing:0; white-space:normal}
html.has-side nav[aria-label="Sections"] .side-head a.side-band:hover{color:var(--accent)}
html.has-side nav[aria-label="Sections"] .side-head a.side-band::before,html.has-side nav[aria-label="Sections"] .side-head a.side-band::after{content:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]).has-side nav[aria-label="Sections"] > a[aria-current="step"]{background:var(--accent-soft); color:var(--ink); border-color:var(--accent)}
}
:root[data-theme="dark"].has-side nav[aria-label="Sections"] > a[aria-current="step"]{background:var(--accent-soft); color:var(--ink); border-color:var(--accent)}

/* "← IoT at BIH": the way back from a course to the site home */
.topbar .hub{order:-1; flex:none; color:rgba(255,255,255,.78); text-decoration:none; font:500 .78rem/1 "Outfit","Rubik",Arial,sans-serif;
  padding:.4rem .7rem; border-radius:99px; border:1px solid rgba(255,255,255,.22)}
.topbar .hub:hover,.topbar .hub:focus-visible{color:#fff; border-color:rgba(255,255,255,.5)}
@media (max-width:640px){.topbar .hub{order:0}}
@media print{.topbar .hub{display:none}}

/* =====================================================================
   Calm reading (Nov 2026). Less to look at, so the lesson stands out:
   smaller type, no shadows or glows, fewer borders, colour only where it
   means something. Later rules here override the ones above.
   ===================================================================== */
body{font-size:clamp(.98rem,.95rem + .12vw,1.03rem); line-height:1.66}
h1{font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem)}
h2{font-size:clamp(1.22rem,1.1rem + .45vw,1.45rem)}
h3{font-size:1.04rem}
section.part{padding:2rem 0; border-top-color:var(--line-soft)}

/* section labels ("Part 1", "Before you start") become quiet text, not pills */
.tag{border:0; padding:0; border-radius:0; font-size:.68rem; letter-spacing:.12em; color:var(--muted)}
.bandcard .tag{color:var(--bc)}
.parthead{gap:.6rem; margin-bottom:.8rem}

/* boxes: flat, hairline borders, no shadows */
.card,.bandcard,.brief,.choose,.sketchbox,.course,.path li,.pg-foot a{box-shadow:none}
.card,.course,.path li{border-color:var(--line-soft)}
.bandcard{border:1px solid var(--line-soft); border-radius:12px; padding:1rem 1.2rem; position:relative}
.bandcard::before{content:""; position:absolute; left:0; top:1.1rem; bottom:1.1rem; width:3px; border-radius:0 3px 3px 0; background:var(--bc)}
.bandcard:hover,.bandcard:focus-visible{transform:none; border-color:var(--line); background:var(--surface-2)}
.see{background:transparent; border-left-width:2px; padding:.35rem 0 .35rem .9rem; border-radius:0}
.ifnot{background:transparent; border-radius:0}

/* the hero: one calm band of colour, no glows or decorations */
.hero::before,.hero::after{display:none}
.hero h1{font-size:clamp(2rem,1.55rem + 2vw,2.9rem)}
.hero .eyebrow{background:none; border:0; padding:0}
.hero .startbtn{box-shadow:none}
.hero .stripes,.hero .stripes-label{display:none}

/* the site home */
.course::before{height:3px}
.c-board{background:transparent; color:var(--cc); border:1px solid currentColor}
.course.planned{opacity:.7}
.c-facts li{border-color:var(--line-soft)}

/* the section sidebar: plain list, one quiet highlight */
html.has-side nav[aria-label="Sections"]{background:var(--ground); border-right-color:var(--line-soft)}
.side-head{background:var(--ground); border-bottom-color:var(--line-soft)}
html.has-side nav[aria-label="Sections"] > a{padding:.42rem .7rem; font-size:.86rem; border-radius:8px; color:var(--ink-2)}
html.has-side nav[aria-label="Sections"] > a:not(.nav-3d)::before{background:none; border:0; width:1.3rem; height:auto; font-size:.74rem; color:var(--muted)}
html.has-side nav[aria-label="Sections"] > a.pg-done::before{background:none; color:var(--good)}
html.has-side nav[aria-label="Sections"] > a[aria-current="step"],
:root[data-theme="dark"].has-side nav[aria-label="Sections"] > a[aria-current="step"]{background:var(--surface-2); color:var(--ink); border-color:transparent; box-shadow:inset 3px 0 0 var(--accent)}
html.has-side nav[aria-label="Sections"] > a[aria-current="step"]::before{background:none; color:var(--accent)}
html.has-side nav[aria-label="Sections"] > a.nav-3d,
:root[data-theme="dark"].has-side nav[aria-label="Sections"] > a.nav-3d{background:none; border:0; color:var(--muted); font-size:.8rem; margin-left:2.6rem}
html.has-side nav[aria-label="Sections"] > a.nav-3d:hover{color:var(--accent)}
html.has-side nav[aria-label="Sections"] > a.nav-3d .n3{background:none; color:var(--muted)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]).has-side nav[aria-label="Sections"] > a[aria-current="step"]{background:var(--surface-2); color:var(--ink); border-color:transparent; box-shadow:inset 3px 0 0 var(--accent)}
  :root:not([data-theme="light"]).has-side nav[aria-label="Sections"] > a.nav-3d{background:none; border:0; color:var(--muted)}
}
.pg-foot .pg-next{background:var(--surface); color:var(--ink); border-color:var(--line)}
.pg-foot .pg-next small{color:var(--muted)}
.pg-foot .pg-next b{color:var(--accent-ink)}

/* Comfortable reading size (Nov 2026): lesson text at about 17–18px with roomy lines.
   Menus, labels and buttons keep their own (rem) sizes, so only the reading text grows. */
body{font-size:clamp(1.06rem,1rem + .28vw,1.15rem); line-height:1.75}
h1{font-size:clamp(1.85rem,1.45rem + 1.7vw,2.6rem)}
h2{font-size:clamp(1.3rem,1.15rem + .5vw,1.55rem)}
h3{font-size:1.1rem}
p + p{margin-top:.15em}

/* Hide / keep open the section sidebar on wide screens (pager.js) */
.side-pin{display:none; font:500 .74rem/1 "Outfit","Rubik",Arial,sans-serif; color:var(--muted); background:none;
  border:1px solid var(--line); border-radius:99px; padding:.35rem .7rem; cursor:pointer}
.side-pin:hover,.side-pin:focus-visible{color:var(--ink); border-color:var(--accent)}
.side-head{grid-template-columns:1fr auto auto}
@media (min-width:1180px){
  html.has-side .side-pin{display:inline-block}
  /* hidden: the lesson takes the full width and the "Sections" bar opens the list as a drawer */
  html.side-collapsed.has-side{--side-w:0px}
  html.side-collapsed.has-side body{padding-left:1.25rem}
  html.side-collapsed.has-side nav[aria-label="Sections"]{width:330px; transform:translateX(-105%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.25)}
  html.side-collapsed.side-is-open nav[aria-label="Sections"]{transform:none}
  html.side-collapsed.side-is-open .side-shade{display:block; position:fixed; inset:0; z-index:39; background:rgba(15,10,20,.35)}
  html.side-collapsed.has-side .side-close{display:grid; place-items:center}
  html.side-collapsed.has-side .side-open{
    display:flex; align-items:center; gap:.7rem; position:sticky; top:0; z-index:30; width:calc(100% + 2.5rem); margin:0 -1.25rem;
    padding:.55rem 1.25rem; border:0; border-bottom:1px solid var(--line-soft); background:color-mix(in srgb, var(--ground) 94%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); font:inherit; text-align:left; cursor:pointer}
  html.side-collapsed .so-ico{display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:10px; background:var(--plum,#24182E); color:#fff; font-size:1rem; flex:none}
  html.side-collapsed .so-txt{display:flex; flex-direction:column; min-width:0; flex:1; font-family:"Outfit","Rubik",Arial,sans-serif}
  html.side-collapsed .so-txt small{font-size:.72rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase}
  html.side-collapsed .so-txt b{font-size:.95rem; font-weight:600}
  html.side-collapsed .so-n{font-size:.75rem; color:var(--good); font-weight:600; flex:none}
}