:root{
  --orange:#E87722; --orange-deep:#C05C10; --amber:#F5B32F;
  --brown:#6B4423; --brown-deep:#4A2E14; --brown-dark:#33261A;
  --bg:#FAF8F5; --card:#FFFFFF; --line:#E8E0D5; --soft:#F4EDE3;
  --ink:#2E2A25; --muted:#7A6A58; --green:#2F7D32; --red:#C62828;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:132px}
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;font-weight:400;line-height:1.6}
h1,h2,h3,h4{font-weight:600;color:var(--brown-dark)}

#progressBar{position:fixed;top:0;left:0;height:3px;background:var(--orange);width:0%;z-index:300;transition:width .1s}

nav.legacy{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1150px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.2rem;gap:1rem}
.nav-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.nav-logo img{height:42px}
.nav-logo span{font-weight:600;font-size:1.05rem;color:var(--brown-dark)}
.nav-logo span em{font-style:normal;color:var(--orange)}
.nav-links{display:flex;gap:.2rem;flex-wrap:wrap;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:500;padding:.45rem .8rem;border-radius:6px;font-size:.9rem}
.nav-links a:hover{background:var(--soft)}
#scoreChip{background:var(--brown-dark);color:#fff;font-weight:500;border-radius:6px;padding:.4rem .85rem;font-size:.82rem;white-space:nowrap}

.hero{background:linear-gradient(135deg,#33261A 0%,#4A2E14 70%,#5C3A1C 100%);color:#F4EDE3;padding:3.2rem 1.2rem 2.8rem}
.hero-inner{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1.3fr .7fr;gap:2.4rem;align-items:center}
.hero h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.2;margin:.6rem 0 1rem;font-weight:600}
.hero h1 .hl{color:var(--amber)}
.hero .crumb{font-size:.85rem;color:#D9C6AE}
.hero .crumb a{color:var(--amber);text-decoration:none;font-weight:500}
.hero p{font-size:1rem;max-width:38rem;color:#EDE3D4}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.3rem}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(245,179,47,.45);border-radius:6px;padding:.35rem .8rem;font-weight:500;font-size:.83rem}
.hero-img{border-radius:10px;overflow:hidden;box-shadow:0 14px 32px rgba(0,0,0,.3)}
.hero-img img{width:100%;display:block}

.page{max-width:1150px;margin:0 auto;padding:0 1.2rem}
section.block{padding:2.6rem 0 1rem}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2rem;box-shadow:0 2px 10px rgba(74,46,20,.05)}
.howto{border-left:4px solid var(--orange)}
.howto h2{margin-bottom:1rem;font-size:1.35rem}
.howto p{margin-bottom:.9rem}
.howto .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin:1.3rem 0 .4rem}
.howto .step{background:var(--soft);border-radius:8px;padding:1rem;text-align:center;border-bottom:3px solid var(--orange)}
.howto .step .ic{display:none}
.howto .step b{display:block;font-size:.86rem;color:var(--brown-deep);font-weight:500}
a.mail{color:var(--orange-deep);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(192,92,16,.35)}

.trail{margin-top:2.2rem}
.trail h2{text-align:center;font-size:1.6rem;margin-bottom:.4rem}
.trail .sub{text-align:center;max-width:40rem;margin:0 auto 1.8rem;color:var(--muted)}
.trail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem}
.signpost{position:relative;display:block;text-decoration:none;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem 1.1rem 4.1rem;transition:.18s;box-shadow:0 2px 8px rgba(74,46,20,.05)}
.signpost:hover{border-color:var(--orange);box-shadow:0 6px 18px rgba(74,46,20,.12);transform:translateY(-2px)}
.signpost .num{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:2.3rem;height:2.3rem;border-radius:50%;
  background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.05rem}
.signpost b{display:block;font-size:1rem;line-height:1.3;font-weight:600;color:var(--brown-dark)}
.signpost small{display:block;margin-top:.25rem;font-weight:400;color:var(--muted);font-size:.8rem;line-height:1.45}

.course-sec{margin-top:2.8rem;scroll-margin-top:132px}
.sec-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem;border-bottom:2px solid var(--line);padding-bottom:.9rem}
.sec-head .n{flex-shrink:0;width:2.9rem;height:2.9rem;border-radius:8px;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.35rem}
.sec-head h2{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.sub-sec{margin:1.9rem 0 0}
.sub-sec h3{font-size:1.12rem;color:var(--brown-deep);margin-bottom:.7rem;padding-left:.8rem;border-left:3px solid var(--orange)}
.sub-sec h4{font-size:.98rem;color:var(--orange-deep);margin:1.1rem 0 .4rem;font-weight:600}
.course-sec p{margin-bottom:.9rem}
.course-sec ul{margin:.2rem 0 1rem 1.4rem}
.course-sec li{margin-bottom:.45rem}
.note{background:var(--soft);border-left:3px solid var(--orange);border-radius:0 8px 8px 0;padding:.85rem 1.1rem;margin:.9rem 0;font-weight:500;font-size:.95rem}

.figrow{display:grid;gap:1rem;margin:1.4rem 0}
.figrow.cols2{grid-template-columns:repeat(2,1fr)}
.figrow.cols3{grid-template-columns:repeat(3,1fr)}
.figrow.cols4{grid-template-columns:repeat(4,1fr)}
figure.fig{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem;margin:1.4rem 0;position:relative;box-shadow:0 2px 8px rgba(74,46,20,.05)}
.figrow figure.fig{margin:0}
/* Never upscale a source image past its own pixel width — that is what made the
   older low-resolution figures look soft. Small images sit centred at their true
   size on the figure plate; large images still fill the column. */
figure.fig img{max-width:100%;width:auto;height:auto;border-radius:6px;display:block;
  margin:0 auto;cursor:zoom-in}
figure.fig.fill img{width:100%}
figure.fig .tag{position:absolute;top:1rem;left:1rem;background:var(--brown-dark);color:#fff;
  font-weight:500;font-size:.72rem;letter-spacing:.04em;padding:.2rem .6rem;border-radius:4px;z-index:2;opacity:.92}
figure.fig figcaption{padding:.7rem .4rem .2rem;font-size:.88rem;line-height:1.55;color:var(--muted)}
figure.fig figcaption b{color:var(--brown-deep);font-weight:600}
.figcap-block{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:8px;
  padding:1rem 1.2rem;font-size:.9rem;line-height:1.55;color:var(--muted);margin:-0.4rem 0 1.4rem}
.figcap-block b{color:var(--brown-deep)}

.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem;margin:1.4rem 0}
table.spans{border-collapse:collapse;width:100%;font-size:.85rem;min-width:640px}
table.spans th{background:var(--brown-dark);color:#fff;padding:.5rem .6rem;font-weight:500}
table.spans td{border:1px solid var(--line);padding:.4rem .6rem;text-align:center}
table.spans tr:nth-child(even) td{background:var(--bg)}
table.spans td.dim{font-weight:600;background:var(--soft)}
.table-notes{font-size:.8rem;color:var(--muted);margin-top:.6rem;line-height:1.6}

.video-card{background:var(--brown-dark);border-radius:12px;padding:1.2rem;margin:2rem 0}
.video-card h3{color:#fff;margin:.2rem 0 .9rem;text-align:center;font-size:1.05rem;font-weight:500}
.video-frame{position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000;display:block}
.video-poster img{width:100%;height:100%;object-fit:cover;opacity:.85;display:block}
.video-poster:hover img{opacity:1}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:50px;background:var(--orange);border-radius:12px}
.play-btn::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.video-poster:hover .play-btn{background:var(--orange-deep)}
.video-fallback{text-align:center;margin-top:.8rem;font-size:.85rem}
.video-fallback a{color:var(--amber);text-decoration:none;font-weight:500}

.quiz{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:12px;
  padding:1.8rem;margin:2.4rem 0;position:relative;box-shadow:0 2px 10px rgba(74,46,20,.06)}
.quiz::before{content:"QUIZ";position:absolute;top:-13px;left:24px;background:var(--orange);color:#fff;
  font-weight:600;font-size:.72rem;letter-spacing:.08em;padding:.25rem .8rem;border-radius:4px}
.quiz h3{margin-bottom:.3rem;font-size:1.15rem}
.quiz .qmeta{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem}
.qitem{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:1.1rem 1.2rem;margin-bottom:1rem}
.qitem .qq{font-weight:600;margin-bottom:.7rem;line-height:1.5;color:var(--brown-dark)}
.qopt{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .8rem;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:#fff;margin-bottom:.45rem;transition:.12s;font-weight:400;line-height:1.45;font-size:.95rem}
.qopt:hover{border-color:var(--orange);background:#FDF6EE}
.qopt .dot{flex-shrink:0;width:1.05rem;height:1.05rem;border-radius:50%;border:2px solid #C9BBA8;margin-top:.2rem}
.qopt.sel-right{background:#EDF6EE;border-color:var(--green)}
.qopt.sel-right .dot{border-color:var(--green);background:var(--green)}
.qopt.sel-wrong{background:#FBEDEC;border-color:var(--red)}
.qopt.sel-wrong .dot{border-color:var(--red);background:var(--red)}
.qopt.reveal-right{border-color:var(--green);background:#EDF6EE}
.qopt.locked{pointer-events:none;opacity:.92}
.qfeedback{font-weight:600;margin-top:.5rem;display:none;font-size:.9rem}
.qfeedback.ok{color:var(--green);display:block}
.qfeedback.no{color:var(--red);display:block}
.qexplain{display:none;background:var(--soft);border-left:3px solid var(--amber);border-radius:0 6px 6px 0;
  padding:.6rem .9rem;margin-top:.55rem;font-size:.88rem;line-height:1.55;color:var(--muted)}
.qexplain.show{display:block}
.quiz-result{display:none;margin-top:1.2rem;background:var(--brown-dark);color:#F4EDE3;border-radius:8px;padding:1rem 1.3rem;
  font-weight:500;align-items:center;gap:1rem;font-size:.95rem}
.quiz-result.show{display:flex;flex-wrap:wrap}
.quiz-result .pct{font-weight:600;font-size:1.6rem;color:var(--amber)}
.quiz-btns{margin-top:1rem;display:flex;gap:.7rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:500;
  padding:.7rem 1.4rem;border-radius:8px;font-size:.95rem;transition:.15s;border:none;cursor:pointer;font-family:'Poppins',sans-serif}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-deep)}
.btn-ghost{background:#fff;color:var(--brown-deep);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-deep)}

#finalResults .card{border-top:4px solid var(--orange);text-align:center;padding:2.6rem 2rem}
#finalScoreRing{width:180px;height:180px;margin:1.2rem auto}
.ring-label{font-weight:600;font-size:2rem;fill:var(--brown-dark);font-family:'Poppins',sans-serif}
.ring-sub{font-weight:500;font-size:.6rem;fill:var(--muted);letter-spacing:.12em;font-family:'Poppins',sans-serif}
#finalTitle{font-size:1.35rem;margin-top:.6rem}
#finalMsg{max-width:34rem;margin:.6rem auto 0;color:var(--muted)}
.sec-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin:1.6rem 0 .4rem;text-align:left}
.sb{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;border-bottom:3px solid #C9BBA8}
.sb.done-good{border-bottom-color:var(--green)}
.sb.done-mid{border-bottom-color:var(--amber)}
.sb.done-low{border-bottom-color:var(--red)}
.sb b{display:block;font-size:.74rem;color:var(--muted);font-weight:500}
.sb span{font-weight:600;font-size:1.05rem;color:var(--brown-dark)}
.cert-note{background:var(--soft);border-radius:8px;padding:1rem 1.3rem;margin-top:1.6rem;font-size:.92rem;text-align:left}

details.disc{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.5rem;margin:2rem 0}
details.disc summary{font-weight:600;color:var(--brown-deep);cursor:pointer;font-size:.98rem}
details.disc p{margin-top:.9rem;font-size:.88rem;color:var(--muted)}

#lightbox{position:fixed;inset:0;background:rgba(30,22,12,.93);display:none;align-items:center;justify-content:center;z-index:500;padding:2rem;cursor:zoom-out}
#lightbox.show{display:flex}
#lightbox img{max-width:100%;max-height:82vh;border-radius:6px}
#lightbox figcaption{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:#fff;max-width:80%;text-align:center;font-size:.9rem;background:rgba(0,0,0,.5);padding:.5rem 1rem;border-radius:6px}

#tracker{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;gap:.45rem}
#tracker a{width:10px;height:10px;border-radius:50%;background:#D6C9B6;display:block;transition:.2s;position:relative}
#tracker a.active{background:var(--orange);transform:scale(1.3)}
#tracker a:hover::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);
  background:var(--brown-dark);color:#fff;font-size:.72rem;font-weight:500;padding:.25rem .6rem;border-radius:4px;white-space:nowrap}

footer.legacy{background:var(--brown-dark);color:#D9C6AE;text-align:center;padding:2.2rem 1.2rem;font-size:.88rem;margin-top:3rem}
footer.legacy a{color:var(--amber);text-decoration:none}


@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-img{display:none}
  .howto .steps{grid-template-columns:repeat(2,1fr)}
  .figrow.cols2,.figrow.cols3,.figrow.cols4{grid-template-columns:1fr}
  #tracker{display:none}
}

/* compact multi-column course index */
.index-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:12px;padding:1.8rem 2rem;box-shadow:0 2px 10px rgba(74,46,20,.05)}
.index-card h2{text-align:left;font-size:1.35rem;margin-bottom:.3rem}
.index-card .sub{text-align:left;margin:0 0 1.2rem;max-width:none}
.index-cols{columns:3 240px;column-gap:2rem}
.index-item{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;color:var(--ink);font-size:.92rem;
  font-weight:500;padding:.34rem 0;break-inside:avoid;border-bottom:1px dashed var(--line)}
.index-item:hover{color:var(--orange-deep)}
.index-item .inum{flex-shrink:0;min-width:1.5rem;height:1.5rem;border-radius:5px;background:var(--soft);color:var(--brown-deep);
  display:inline-flex;align-items:center;justify-content:center;font-size:.76rem;font-weight:600}
.index-item:hover .inum{background:var(--orange);color:#fff}
.index-group{break-inside:avoid;margin-bottom:1rem}
.index-group .index-item{border-bottom:none;padding-bottom:.2rem}
.index-sub{display:block;text-decoration:none;color:var(--muted);font-size:.83rem;line-height:1.35;
  padding:.24rem 0 .24rem 1.35rem;border-left:2px solid var(--line);margin-left:.72rem;
  transition:color .15s,border-color .15s}
.index-sub.d2{padding-left:2.25rem;font-size:.79rem}
.index-sub:hover{color:var(--orange-deep);border-left-color:var(--orange)}
.sub-sec[id]{scroll-margin-top:120px}

/* certificate form */
.cert-form{margin-top:1.6rem;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:1.4rem 1.5rem;text-align:left;display:none}
.cert-form.show{display:block}
.cert-form h3{font-size:1.05rem;margin-bottom:.3rem;color:var(--brown-deep)}
.cert-form p{font-size:.88rem;color:var(--muted);margin-bottom: .9rem}
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.cert-grid input{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:8px;font-family:'Poppins',sans-serif;font-size:.92rem;background:#fff}
.cert-grid input:focus{outline:none;border-color:var(--orange)}
.cert-actions{margin-top:1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.cert-msg{font-size:.85rem;font-weight:500}
.cert-msg.ok{color:var(--green)} .cert-msg.err{color:var(--red)}
@media(max-width:640px){.cert-grid{grid-template-columns:1fr}}

/* ============================================================
   Code-built figures — charts and tables rebuilt in HTML/SVG so
   they stay razor sharp at any zoom level and reflow on mobile.
   ============================================================ */
figure.chart{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:1.1rem 1.1rem .8rem;margin:1.4rem 0;box-shadow:0 2px 8px rgba(74,46,20,.05)}
figure.chart svg{display:block;width:100%;height:auto;overflow:visible}
figure.chart .chart-note{font-size:.78rem;color:var(--muted);margin-top:.5rem;text-align:right;letter-spacing:.02em}
figure.chart figcaption{padding:.8rem .4rem .2rem;font-size:.88rem;line-height:1.55;color:var(--muted)}
figure.chart figcaption b{color:var(--brown-deep);font-weight:600}

.chart-axis{font:500 13px 'Poppins',sans-serif;fill:var(--muted)}
.chart-axis-title{font:600 15px 'Poppins',sans-serif;fill:var(--brown-deep)}
.chart-grid{stroke:#E8E0D5;stroke-width:1}
.chart-rule{stroke:#B9A992;stroke-width:1.4}
.chart-bar{fill:#4472C4}
.chart-label{font:600 13px 'Poppins',sans-serif}

/* legend for the multi-series chart */
.chart-legend{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;margin-top:.6rem;
  font-size:.85rem;color:var(--brown-deep);font-weight:500}
.chart-legend span{display:inline-flex;align-items:center;gap:.45rem}
.chart-legend i{width:26px;height:3px;border-radius:2px;display:inline-block}

/* pie chart legend */
.pie-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:1.8rem;align-items:center;
  max-width:760px;margin:0 auto}
.pie-wrap svg{max-width:420px;margin:0 auto}
.pie-key{list-style:none;margin:0;padding:0;font-size:.9rem}
.pie-key li{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;border-bottom:1px dashed var(--line)}
.pie-key li:last-child{border-bottom:none}
.pie-key i{width:14px;height:14px;border-radius:4px;flex:none}
.pie-key b{margin-left:auto;color:var(--brown-deep);font-weight:600}

/* real data tables (replacing tables that used to be flat images) */
.datawrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:0;margin:1.4rem 0;box-shadow:0 2px 8px rgba(74,46,20,.05);-webkit-overflow-scrolling:touch}
table.data{border-collapse:collapse;width:100%;font-size:.87rem;line-height:1.5}
table.data caption{caption-side:top;text-align:left;padding:.9rem 1.1rem .2rem;font-weight:600;
  color:var(--brown-dark);font-size:.95rem}
table.data thead th{background:var(--brown-dark);color:#fff;font-weight:500;text-align:left;
  padding:.65rem .8rem;vertical-align:bottom;border-right:1px solid rgba(255,255,255,.14)}
table.data thead th:last-child{border-right:none}
table.data thead th.c,table.data td.c{text-align:center}
table.data th.sub{background:var(--brown);font-size:.82rem}
table.data tbody th{background:var(--soft);color:var(--brown-deep);font-weight:600;text-align:left;
  padding:.6rem .8rem;border:1px solid var(--line);vertical-align:top}
table.data td{border:1px solid var(--line);padding:.6rem .8rem;vertical-align:top}
table.data tbody tr:nth-child(even) td{background:#FCFAF7}
table.data td em{font-style:italic}
table.data .unit{font-size:.78rem;color:var(--muted);font-weight:400;display:block}
.data-note{font-size:.8rem;color:var(--muted);padding:.7rem 1.1rem 1rem;line-height:1.6}
.data-note sup{color:var(--orange-deep)}
.scroll-hint{display:none;font-size:.76rem;color:var(--muted);padding:0 1.1rem .8rem}
@media (max-width:700px){
  .scroll-hint{display:block}
  .pie-wrap{grid-template-columns:1fr}
  table.data{font-size:.82rem}
}

table.data td.nw{white-space:nowrap}

/* ============================================================
   Shared site chrome — the same nav, gradient buttons and
   footer used on the home, about, links and contact pages, so
   a course page never feels like a different website.
   ============================================================ */
:root{
  --o-1:#F9B233; --o-2:#F08A1D; --o-3:#E87722; --o-4:#C9540E;
  --grad:linear-gradient(135deg,var(--o-1) 0%,var(--o-3) 55%,var(--o-4) 100%);
  --brown-ink:#231A11;
  --max:1180px;
  --shadow-m:0 14px 34px rgba(51,38,26,.12);
}

/* ---------- buttons: the orange gradient ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.85rem 1.8rem;border-radius:999px;border:none;cursor:pointer;text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,filter .2s;overflow:hidden;isolation:isolate}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(232,119,34,.34)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .25s;
  background:linear-gradient(135deg,var(--o-2) 0%,var(--o-4) 100%)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,119,34,.44);background:var(--grad)}
.btn-primary:hover::after{opacity:1}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--brown-dark);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--o-3);color:var(--o-4);transform:translateY(-2px)}
.btn-sm{padding:.6rem 1.25rem;font-size:.86rem}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- nav ---------- */
nav.site{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.86);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(235,227,216,.9);transition:box-shadow .25s,background .25s}
nav.site.scrolled{box-shadow:0 6px 24px rgba(51,38,26,.09);background:#fff}
nav.site::after{content:"";display:block;height:3px;background:var(--grad)}
nav.site .nav-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem 1.3rem}
nav.site .nav-logo img{height:48px;display:block}
nav.site .nav-links{display:flex;align-items:center;gap:.15rem;flex-wrap:nowrap}
nav.site .nav-links a{position:relative;text-decoration:none;color:var(--ink);font-weight:500;font-size:.92rem;
  padding:.5rem .9rem;border-radius:8px;transition:color .18s;background:none}
nav.site .nav-links a::before{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.28rem;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
nav.site .nav-links a:hover{color:var(--o-4);background:none}
nav.site .nav-links a:hover::before{transform:scaleX(1)}
nav.site .nav-links a.active{color:var(--o-4);font-weight:600}
nav.site .nav-links a.active::before{transform:scaleX(1)}
nav.site .nav-links .btn{margin-left:.5rem}
nav.site .nav-links .btn::before{display:none}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;border-radius:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--brown-dark);border-radius:2px;margin:5px 0;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + .5rem);left:0;min-width:290px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-m);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.2s;max-height:70vh;overflow:auto;z-index:5}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:.5rem .75rem;font-size:.86rem;border-radius:8px;font-weight:400}
.drop a::before{display:none}
.drop a:hover{background:var(--soft);color:var(--o-4)}

/* ---------- the course progress strip that sits under the nav ---------- */
.coursebar{position:sticky;top:66px;z-index:150;background:var(--brown-dark);color:#EADFD1}
.coursebar-inner{max-width:var(--max);margin:0 auto;padding:.5rem 1.3rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;flex-wrap:wrap}
.coursebar .cb-title{font-size:.86rem;font-weight:500;color:#F2E7D9;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw}
.coursebar .cb-links{display:flex;align-items:center;gap:.35rem}
.coursebar .cb-links a{color:#D9C6AE;text-decoration:none;font-size:.82rem;font-weight:500;
  padding:.32rem .7rem;border-radius:999px;transition:.18s;border:1px solid rgba(255,255,255,.16)}
.coursebar .cb-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.coursebar #scoreChip{background:var(--grad);color:#fff;font-weight:600;border-radius:999px;
  padding:.34rem .9rem;font-size:.8rem;white-space:nowrap;box-shadow:0 4px 12px rgba(232,119,34,.35)}

/* ---------- footer ---------- */
.grain{height:4px;background:var(--grad)}
footer.site{background:var(--brown-ink);color:#B7A68F;padding:3.4rem 0 2rem;font-size:.9rem;margin-top:3rem}
.foot-grid{max-width:var(--max);margin:0 auto;padding:0 1.3rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.2rem}
.foot-grid h4{color:#fff;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.foot-grid a{color:#B7A68F;text-decoration:none;display:block;padding:.22rem 0;font-size:.87rem;transition:.18s}
.foot-grid a:hover{color:var(--o-1);transform:translateX(3px)}
.foot-brand img{height:52px;margin-bottom:1rem}
.foot-brand p{font-size:.86rem;line-height:1.65;color:#A6957E;max-width:24rem}
.foot-bar{max-width:var(--max);margin:2.6rem auto 0;padding:1.5rem 1.3rem 0;border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:#9A8A75}
@media(min-width:761px){.foot-bar{padding-right:6rem}}
.foot-bar a{color:var(--o-1);text-decoration:none}
.foot-bar a:hover{text-decoration:underline}

@media(max-width:980px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:760px){
  .nav-toggle{display:block}
  nav.site .nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:1rem 1.3rem 1.6rem;border-top:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.14);
    transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;
    transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .22s;
    max-height:calc(100vh - 90px);overflow:auto;z-index:210}
  nav.site .nav-links.open{transform:translateY(0);opacity:1;pointer-events:auto;visibility:visible}
  nav.site .nav-links a{padding:.75rem .4rem;border-bottom:1px solid var(--soft)}
  nav.site .nav-links a::before{display:none}
  nav.site .nav-links .btn{margin:.8rem 0 0}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    max-height:none;padding:0 0 .4rem .8rem;min-width:0}
  .drop a{font-size:.84rem;padding:.5rem .4rem}
  .coursebar .cb-title{display:none}
  .coursebar-inner{justify-content:center}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ---------- disclaimer block ---------- */
.disclaimer{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--brown);
  border-radius:10px;padding:1.1rem 1.3rem;margin:1.6rem 0;font-size:.86rem;line-height:1.6;color:var(--muted)}
.disclaimer h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brown-deep);margin-bottom:.5rem}
.disclaimer p+p{margin-top:.7rem}

/* ---------- a sub-heading inside a section's prose ----------
   The original WordPress export glued these headings onto the front of the
   paragraph that followed them ("VariabilityWood is a natural material…"),
   so they were invisible as headings. They are now separated out and set
   in the same orange as the sub-section headings. */
h4.sub-head{font-size:1rem;color:var(--orange-deep);margin:1.7rem 0 .5rem;font-weight:600;line-height:1.35}
h4.sub-head:first-child{margin-top:0}

/* ---------- reference lists ----------
   The import ran whole bibliographies together into single paragraphs.
   They are now one entry per line, with a hanging indent so each entry
   reads as its own item. */
ul.refs{list-style:none;margin:.9rem 0 0;padding:0}
ul.refs li{font-size:.9rem;line-height:1.55;color:var(--ink);padding-left:1.6rem;text-indent:-1.6rem;margin-bottom:.6rem}
ul.refs li::before{content:none}