/* ----------------------------------------------------------------------------
   KneeSchool stylesheet.

   The design system is MyKneeScore's, ported from SportsHealing/mykneescore at
   commit 4ce92e0: its tokens, its two typefaces, its pill controls, its card
   shapes and its dark green chrome. The token names are theirs too, so a rule
   can be compared line for line against advanced/assets/advanced.css in that
   repository.

   One rule of theirs is adopted as well as their colours: no colour literal
   appears outside the :root block below. Their house style check calls that
   their highest value CSS rule, and KneeSchool's site check now enforces it
   here. See docs/decisions/012-mykneescore-design-system.md.
   ------------------------------------------------------------------------- */

/* ---------- tokens ---------- */
:root{
  --green-deep:#0e2b22;
  --green-ink:#16382d;
  --green-soft:#23503f;
  --sage:#7c9284;
  --gold:#b58f47;
  --gold-pale:#e6d5ac;
  --ivory:#faf7ef;
  --paper:#f3efe3;
  --text:#22312a;
  --muted:#45564c;
  --line:rgba(22,56,45,.16);
  --line-pale:rgba(230,213,172,.25);
  --warn:#8c4a2f;
  --white:#fff;

  /* A darker gold for small text on a light background. MyKneeScore sets its
     eyebrows in --gold, which on --ivory is about 3.2:1 and below the 4.5:1
     that WCAG AA asks for body sized text. This site carries the same labels
     on pages written for school age readers, so small gold text on light uses
     this value and everything else uses theirs. */
  --gold-ink:#8a6a2f;

  /* RGB triplets, so an alpha variant needs no second copy of the colour.
     Their convention, kept. */
  --ivory-rgb:250,247,239;
  --gold-rgb:181,143,71;
  --gold-pale-rgb:230,213,172;
  --green-ink-rgb:22,56,45;

  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --measure:66ch;
  --pad:clamp(1.15rem,4vw,3.25rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--green-ink)}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.12;letter-spacing:0;margin:0;color:var(--green-ink)}
h1{font-size:clamp(2.2rem,1.6rem + 2.8vw,3.8rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,1.5rem + 1.8vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem)}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

section[id],footer[id],div[id]{scroll-margin-top:5.5rem}
h1,h2,h3,p,li,a{overflow-wrap:break-word}
.wrap{width:min(1080px,92%);margin-inline:auto}
.band{padding:clamp(3rem,7vw,5rem) 0}
.band + .band{border-top:1px solid var(--line)}
.paper{background:var(--paper);border-block:1px solid var(--line)}
.dark{background:var(--green-deep);color:var(--ivory)}
.dark + .dark{border-top-color:var(--line-pale)}
.dark h1{color:var(--ivory)}
.dark h2,.dark h3,.dark h4{color:var(--gold-pale)}
.lede{max-width:var(--measure);color:var(--muted)}
.dark .lede{color:rgba(var(--ivory-rgb),.85)}
.eyebrow{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.dark .eyebrow{color:var(--gold)}

/* ---------- header ---------- */
/* The work in progress notice, above the ribbon on every page. Asked for by the
   client on 12 October 2026 so every produced page could be made visible while
   still telling a visitor what they are looking at. It uses --warn rather than
   the gold, because this is a caution rather than a label, and it is not sticky:
   it should be read once at the top rather than following the reader down a
   page it has nothing further to say about. */
.build-notice{background:var(--warn);color:var(--white);font-size:.84rem;
  line-height:1.45;padding:.6rem 0}
.build-notice strong{color:var(--white);letter-spacing:.02em;
  text-transform:uppercase;font-size:.78rem;margin-right:.25rem}
.build-notice a{color:var(--white);text-decoration:underline;
  text-underline-offset:2px;white-space:nowrap}
.build-notice a:hover{text-decoration-thickness:2px}
@media (max-width:640px){
  .build-notice{font-size:.8rem;padding:.55rem 0}
}

.site-head{background:var(--green-deep);color:var(--ivory);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line-pale)}
.head-in{display:flex;align-items:center;gap:1.5rem;min-height:3.9rem;flex-wrap:wrap}
.brand{font-family:var(--body);font-size:1.55rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--ivory);margin-right:auto;white-space:nowrap}
.brand b{font-weight:700}
.brand span{color:var(--gold-pale);font-weight:700}
.nav > ul{display:flex;gap:clamp(.9rem,2.5vw,2rem);list-style:none;margin:0;padding:0;align-items:center}
.nav a{text-decoration:none;font-size:1.05rem;color:var(--ivory);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .2s}
.nav .top{display:flex;align-items:center;white-space:nowrap}
.nav .top:hover,.has-menu:focus-within > .top{border-bottom-color:var(--gold)}
.caret{display:inline-block;width:.34rem;height:.34rem;margin-left:.5rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}

/* The dropdowns carry no JavaScript. They open on hover and, because the
   trigger is a real link, on keyboard focus as well: tabbing to it puts focus
   inside the item, which reveals the menu and lets the next tab enter it. */
.has-menu{position:relative;padding:1.1rem 0}
.menu{display:none;position:absolute;top:100%;left:-1rem;z-index:30;min-width:15.5rem;
  list-style:none;margin:0;padding:.5rem 0;background:var(--green-ink);
  border:1px solid var(--line-pale);border-radius:12px;
  box-shadow:0 14px 30px rgba(var(--green-ink-rgb),.35)}
.has-menu:hover > .menu,.has-menu:focus-within > .menu{display:block}
.menu a{display:block;padding:.5rem 1.25rem;font-size:.95rem;line-height:1.35;border-bottom:0;color:rgba(var(--ivory-rgb),.9)}
.menu a:hover{background:rgba(var(--gold-rgb),.16);color:var(--gold-pale)}
.menu a:focus-visible{outline-offset:-2px}

.nav .start-link{color:var(--green-deep);background:var(--gold-pale);padding:.45rem 1rem;
  border-radius:999px;font-weight:600;border-bottom:none;white-space:nowrap}
.nav .start-link:hover{background:var(--white);border-bottom:none}

.nav-toggle{position:absolute;opacity:0;width:1px;height:1px}
.burger{display:none;font-family:var(--body);font-size:.92rem;font-weight:600;color:var(--green-deep);
  background:var(--gold-pale);border:1px solid transparent;border-radius:999px;padding:.4rem 1rem;cursor:pointer}
.burger:hover{background:var(--white)}

@media (max-width:980px){
  .brand{font-size:1.35rem}
  .nav a{font-size:.95rem}
}
@media (max-width:860px){
  .burger{display:inline-block;margin-left:auto}
  .brand{margin-right:0}
  .nav{flex-basis:100%;display:none;padding-bottom:1rem}
  .nav > ul{flex-direction:column;gap:0;align-items:stretch}
  .nav > ul > li{border-top:1px solid var(--line-pale)}
  .has-menu{padding:0}
  .nav .top{padding:.8rem 0;font-size:1.05rem;color:var(--gold-pale)}
  .nav .start-link{display:inline-block;margin:.8rem 0}
  .caret{display:none}
  /* On a phone there is no hover, so every menu is simply open. */
  .menu{display:block;position:static;min-width:0;border:0;border-radius:0;box-shadow:none;
    background:none;padding:0 0 .7rem}
  .menu a{padding:.45rem 0 .45rem 1rem;font-size:1rem}
  .menu a:hover{background:none}
  .nav-toggle:checked ~ .nav{display:block}
  .nav-toggle:focus-visible ~ .burger{outline:3px solid var(--gold);outline-offset:3px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:1rem;text-decoration:none;
  border-radius:999px;padding:.85rem 1.7rem;cursor:pointer;border:1px solid transparent;
  background:var(--gold);color:var(--green-deep);transition:transform .15s,background .2s,border-color .2s,color .2s}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--gold-pale)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:rgba(var(--ivory-rgb),.45)}
.btn.ghost:hover{background:transparent;border-color:var(--gold-pale);color:var(--gold-pale)}
.btn.green{background:var(--green-ink);color:var(--gold-pale);border-color:transparent}
.btn.green:hover{background:var(--green-soft)}
.btn.sm{padding:.55rem 1.1rem;font-size:.92rem}

/* ---------- hero ---------- */
.hero{background:radial-gradient(1100px 500px at 85% -10%,rgba(var(--gold-rgb),.15),transparent 60%),var(--green-deep);
  color:var(--ivory);padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,7vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4.5vw,4rem);align-items:start}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{color:var(--ivory);max-width:18em;margin-top:.6rem}
.hero h1 em{font-style:italic;color:var(--gold-pale)}
.hero p{max-width:34ch;color:rgba(var(--ivory-rgb),.88);margin-top:1.2rem;font-size:clamp(1.05rem,1rem + .4vw,1.22rem)}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;align-items:center}

/* ---------- depth dial ---------- */
.dial{border:1px solid var(--line-pale);border-radius:16px;padding:clamp(1.2rem,2.6vw,1.9rem);background:var(--green-ink);position:relative}
.dial-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line-pale);padding-bottom:.8rem;margin-bottom:1.1rem}
.dial-head h2{font-size:1.5rem;color:var(--gold-pale)}
.dial-head small{font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.dial input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.dial-tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin-bottom:1.2rem}
.dial-tabs label{
  display:block;text-align:center;cursor:pointer;font-size:clamp(.72rem,1.05vw,.82rem);line-height:1.2;
  padding:.5rem .3rem;border:1px solid var(--line-pale);border-radius:999px;
  color:rgba(var(--ivory-rgb),.72);transition:background .15s,border-color .15s,color .15s;
}
.dial-tabs label:hover{border-color:var(--gold);color:var(--ivory)}
.dial-panel{display:none}
.dial-panel h3{font-size:1.15rem;color:var(--gold-pale);margin-bottom:.5rem}
.dial-panel p{color:rgba(var(--ivory-rgb),.88);font-size:1.02rem;margin:0;max-width:62ch}
/* .hero p caps the hero sub copy at 34ch. The dial sits inside .hero, so the cap
   would otherwise inherit into the panels and leave them half filled once the
   hero stacks to one column. */
#d0:checked ~ .dial-tabs label[for=d0],
#d1:checked ~ .dial-tabs label[for=d1],
#d2:checked ~ .dial-tabs label[for=d2],
#d3:checked ~ .dial-tabs label[for=d3],
#d4:checked ~ .dial-tabs label[for=d4],
#d5:checked ~ .dial-tabs label[for=d5],
#d6:checked ~ .dial-tabs label[for=d6]{background:var(--gold-pale);border-color:var(--gold-pale);color:var(--green-deep);font-weight:600}
#d0:checked ~ .dial-body .p0,
#d1:checked ~ .dial-body .p1,
#d2:checked ~ .dial-body .p2,
#d3:checked ~ .dial-body .p3,
#d4:checked ~ .dial-body .p4,
#d5:checked ~ .dial-body .p5,
#d6:checked ~ .dial-body .p6{display:block}
#d0:focus-visible ~ .dial-tabs label[for=d0],
#d1:focus-visible ~ .dial-tabs label[for=d1],
#d2:focus-visible ~ .dial-tabs label[for=d2],
#d3:focus-visible ~ .dial-tabs label[for=d3],
#d4:focus-visible ~ .dial-tabs label[for=d4],
#d5:focus-visible ~ .dial-tabs label[for=d5],
#d6:focus-visible ~ .dial-tabs label[for=d6]{outline:3px solid var(--gold);outline-offset:2px}
.dial-body{min-height:12.5rem}
@media (max-width:560px){
  .dial-tabs{grid-template-columns:repeat(4,1fr);gap:.35rem}
  .dial-body{min-height:15.5rem}
}

/* ---------- section heading ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1rem,3vw,3rem);align-items:end;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.sec-head h2{margin-bottom:0}
.sec-head p{margin-top:.9rem;color:var(--muted)}
.dark .sec-head p{color:rgba(var(--ivory-rgb),.85)}
@media (max-width:760px){.sec-head{grid-template-columns:1fr;align-items:start;gap:1rem}}

/* ---------- spiral steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);counter-reset:s}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:1.6rem 1.5rem}
.step h3{margin-bottom:.5rem}
.step h3::before{counter-increment:s;content:counter(s);font-family:var(--display);font-size:2.2rem;font-weight:600;
  color:var(--gold);display:block;line-height:1;margin-bottom:.6rem}
.step p{color:var(--muted);font-size:.98rem}

/* ---------- levels ladder ---------- */
.level{display:grid;grid-template-columns:12rem minmax(0,1fr) 9rem;gap:clamp(1rem,3vw,2.5rem);align-items:start;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:14px;
  padding:1.3rem 1.5rem;margin-bottom:.9rem;transition:border-color .2s,box-shadow .2s}
.level:last-child{margin-bottom:0}
.level:hover{border-left-color:var(--gold)}
.level h3{font-size:1.3rem}
.level .who{color:var(--gold-ink);font-size:.92rem;margin-top:.3rem}
.level p{color:var(--muted);font-size:1rem;margin:0}
.level a{font-size:.95rem;text-decoration:none;font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:2px;white-space:nowrap}
.level a:hover{color:var(--gold-ink)}
.depth{display:flex;gap:3px;margin-top:.85rem}
.depth i{display:block;height:6px;flex:1;border-radius:999px;background:var(--paper)}
.depth i.on{background:var(--sage)}
@media (max-width:820px){
  .level{grid-template-columns:1fr;gap:.7rem}
  .level .go{margin-top:.4rem}
}

.dark .level{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale);border-left-color:var(--gold)}
.dark .level h3{color:var(--gold-pale)}
.dark .level p{color:rgba(var(--ivory-rgb),.8)}
.dark .level .who{color:var(--gold)}
.dark .level a{color:var(--gold-pale)}
.dark .level a:hover{color:var(--ivory)}
.dark .depth i{background:rgba(var(--ivory-rgb),.16)}
.dark .depth i.on{background:var(--gold)}

/* ---------- encyclopaedia columns ---------- */
#encyclopaedia{background:var(--green-ink)}
.col-list{columns:4 12rem;column-gap:clamp(1.4rem,3vw,2.5rem);list-style:none;margin:0;padding:0}
.col-list li{margin:0 0 .45rem;break-inside:avoid}
.col-list a{text-decoration:none;color:rgba(var(--ivory-rgb),.85);font-size:1rem}
.col-list a:hover{color:var(--gold-pale);text-decoration:underline;text-underline-offset:3px}
.sub-head{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);padding-bottom:.6rem;border-bottom:1px solid var(--line-pale);margin:0 0 .9rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr));gap:clamp(1.4rem,3vw,2.5rem)}
.col h3{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);padding-bottom:.6rem;border-bottom:1px solid var(--line-pale);margin-bottom:.7rem}
.col ul{list-style:none;margin:0;padding:0}
.col li{margin:0 0 .45rem}
.col a{text-decoration:none;color:rgba(var(--ivory-rgb),.85);font-size:1rem}
.col a:hover{color:var(--gold-pale);text-decoration:underline;text-underline-offset:3px}

/* ---------- holistic ---------- */
.holistic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
@media (max-width:820px){.holistic{grid-template-columns:1fr}}
.factors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:620px){.factors{grid-template-columns:1fr}}
.factors li{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:1.1rem 1.2rem}
.factors h3{font-size:1.05rem;margin-bottom:.3rem}
.factors p{font-size:.98rem;color:var(--muted);margin:0}

/* ---------- tools ---------- */
.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.tool{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;
  padding:1.3rem 1.3rem 1.2rem;transition:transform .15s,box-shadow .15s}
.tool:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--green-ink-rgb),.08)}
.tool h3{font-size:1.2rem;margin-bottom:.45rem}
.tool p{font-size:.98rem;color:var(--muted);margin-bottom:.8rem}
.tool a{font-size:.95rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}

/* ---------- chapter grid ---------- */
.chapters{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem}
.chapter{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;
  padding:1.25rem 1.3rem;transition:transform .15s,box-shadow .15s}
.chapter:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--green-ink-rgb),.08)}
.chapter .num{display:block;font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.3rem}
.chapter h3{font-size:1.14rem;margin-bottom:.4rem}
.chapter p{font-size:.98rem;color:var(--muted);margin:0}
.dark .chapter{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale);border-top-color:var(--gold)}
.dark .chapter h3{color:var(--gold-pale)}
.dark .chapter .num{color:var(--gold)}
.dark .chapter p{color:rgba(var(--ivory-rgb),.8)}

/* ---------- rules panel ---------- */
.rules{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.5rem;max-width:var(--measure)}
.rules ul{list-style:none;margin:0;padding:0}
.rules li{position:relative;margin:0 0 .75rem;padding-left:1.3rem;font-size:.98rem;color:var(--muted)}
.rules li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.rules li:last-child{margin-bottom:0}
.rules b{font-family:var(--body);font-weight:600;color:var(--green-ink)}
.dark .rules{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale)}
.dark .rules li{color:rgba(var(--ivory-rgb),.82)}
.dark .rules b{color:var(--gold-pale)}

/* ---------- note panel ---------- */
.note{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:clamp(1rem,2.4vw,1.4rem);
  max-width:var(--measure);font-size:.97rem;color:var(--muted)}
.note p{margin-bottom:.7rem}
.dark .note{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale);color:rgba(var(--ivory-rgb),.82)}

/* ---------- mapping tables ---------- */
.table-scroll{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.dark .table-scroll{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale)}
.map-title{font-family:var(--display);font-size:1.3rem;font-weight:500;margin:0 0 .9rem}
.map{width:100%;border-collapse:collapse;font-size:.92rem;min-width:44rem}
.map th{text-align:left;font-family:var(--body);font-weight:600;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:0 1.2rem .55rem 0;vertical-align:bottom}
.map td{padding:.75rem 1.2rem .75rem 0;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.map td:first-child{color:var(--text);font-weight:600;width:22%}
.map tr:last-child td{border-bottom:0}
.dark .map th{color:var(--gold);border-bottom-color:var(--line-pale)}
.dark .map td{color:rgba(var(--ivory-rgb),.8);border-bottom-color:var(--line-pale)}
.dark .map td:first-child{color:var(--gold-pale)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:760px){
  .map{min-width:0}
  .map thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .map tr{display:block;border-bottom:1px solid var(--line);padding:1.1rem 0}
  .map tr:last-child{border-bottom:0}
  .map td{display:block;width:auto;border:0;padding:0 0 .6rem}
  .map td:first-child{width:auto}
  .map td:last-child{padding-bottom:0}
  .map td::before{content:attr(data-label);display:block;font-family:var(--body);font-size:.72rem;
    font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
  .dark .map tr{border-bottom-color:var(--line-pale)}
  .dark .map td::before{color:var(--gold)}
}

/* ---------- four step pipeline ---------- */
.steps.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps.four{grid-template-columns:1fr}}
.dark .step{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale);border-top-color:var(--gold)}
.dark .step h3{color:var(--gold-pale)}
.dark .step p{color:rgba(var(--ivory-rgb),.82)}
#standards{background:var(--green-ink)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.stack{margin-top:clamp(2.4rem,5vw,3.4rem)}

/* ---------- CTA ---------- */
.cta{background:radial-gradient(900px 400px at 15% -20%,rgba(var(--gold-rgb),.16),transparent 60%),var(--green-soft);
  color:var(--ivory);padding:clamp(2.5rem,5vw,4rem) 0}
.cta-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:760px){.cta-in{grid-template-columns:1fr}}
.cta h2{color:var(--gold-pale)}
.cta p{color:rgba(var(--ivory-rgb),.85);margin-top:.8rem;max-width:48ch}

/* ---------- footer ---------- */
.site-foot{background:var(--green-deep);color:rgba(var(--ivory-rgb),.75);padding:2.2rem 0;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line-pale)}
.foot-grid h3{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.7rem}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:.4rem}
.foot-grid a{text-decoration:none;color:var(--gold-pale)}
.foot-grid a:hover{text-decoration:underline;text-underline-offset:3px}
.legal{padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;font-size:.85rem;color:rgba(var(--ivory-rgb),.6)}
.legal p{max-width:60ch}
.legal a{color:var(--gold-pale)}

/* ================================================================
   page types added for the multi page build
   ================================================================ */

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.06em;color:rgba(var(--ivory-rgb),.7);margin:0 0 1.1rem}
.crumb a{text-decoration:none;color:var(--gold-pale);border-bottom:1px solid transparent}
.crumb a:hover{border-bottom-color:var(--gold)}
.crumb span{padding:0 .45rem;opacity:.5}

/* ---------- page hero ---------- */
.page-hero{background:radial-gradient(1100px 500px at 85% -10%,rgba(var(--gold-rgb),.15),transparent 60%),var(--green-deep);
  color:var(--ivory);padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(2.6rem,6vw,4rem)}
.page-hero h1{color:var(--ivory);max-width:22em}
.page-hero h1 em{font-style:italic;color:var(--gold-pale)}
.page-hero .who{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:.8rem 0 0}
.page-hero .lede{color:rgba(var(--ivory-rgb),.88);margin-top:1.1rem;font-size:clamp(1.05rem,1rem + .4vw,1.22rem)}
.page-hero .depth{max-width:26rem;margin-top:1.5rem}
.page-hero .depth i{background:rgba(var(--ivory-rgb),.16)}
.page-hero .depth i.on{background:var(--gold)}
.hero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:end}
@media (max-width:820px){.hero-split{grid-template-columns:1fr;align-items:start;gap:1.6rem}}
.rung{font-size:.85rem;color:rgba(var(--ivory-rgb),.6);margin:.6rem 0 0}

/* ---------- what you will cover ---------- */
.cover{list-style:none;margin:0;padding:0;columns:2 15rem;column-gap:clamp(1.4rem,3vw,2.5rem)}
.cover li{margin:0 0 .6rem;padding-left:1.3rem;position:relative;break-inside:avoid;color:var(--muted);font-size:1rem}
.cover li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.dark .cover li{color:rgba(var(--ivory-rgb),.82)}

/* ---------- start here card ---------- */
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
@media (max-width:760px){.start{grid-template-columns:1fr}}
.start > div{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;
  padding:1.4rem 1.4rem 1.3rem}
.start h3{font-size:1.2rem;margin-bottom:.45rem}
.start .kicker{font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 .5rem}
.start p{font-size:.99rem;color:var(--muted);margin-bottom:.9rem}
.start a{font-size:.95rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.start a:hover{color:var(--gold-ink)}

/* ---------- topic grid ---------- */
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.topic{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:14px;padding:1.2rem 1.3rem}
.topic .num{display:block;font-family:var(--body);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin-bottom:.3rem}
.topic h3{font-size:1.12rem;margin-bottom:.5rem}
.topic ul{list-style:none;margin:0;padding:0}
.topic li{margin:0 0 .35rem;font-size:.97rem;display:flex;gap:.3rem;align-items:baseline}
.topic a{text-decoration:none;color:var(--muted);border-bottom:1px solid transparent}
.topic a:hover{color:var(--green-ink);border-bottom-color:var(--gold)}
.topic .soon{color:var(--muted);opacity:.72}
.dark .topic{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale);border-left-color:var(--gold)}
.dark .topic h3{color:var(--gold-pale)}
.dark .topic .num{color:var(--gold)}
.dark .topic a{color:rgba(var(--ivory-rgb),.8)}
.dark .topic a:hover{color:var(--ivory)}
.dark .topic .soon{color:rgba(var(--ivory-rgb),.6)}

/* ---------- adjacent levels ---------- */
.adjacent{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:620px){.adjacent{grid-template-columns:1fr}}
.adjacent a,.adjacent div{background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.3rem;text-decoration:none;display:block;transition:transform .15s,box-shadow .15s,border-color .15s}
.adjacent a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--green-ink-rgb),.08);border-color:var(--gold)}
.adjacent .dir{display:block;font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.35rem}
.adjacent .name{font-family:var(--display);font-size:1.25rem;font-weight:500;color:var(--green-ink);display:block}
.adjacent .none{color:var(--muted);opacity:.6}
.adjacent .next{text-align:right}

/* ---------- article ---------- */
.prose{max-width:var(--measure)}
.prose h3{margin:0 0 .7rem}
.prose h4{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-ink);margin:1.6rem 0 .5rem}
.prose p{color:var(--muted)}
.prose ul{margin:0 0 1rem;padding-left:0;list-style:none}
.prose li{position:relative;margin-bottom:.5rem;padding-left:1.3rem;color:var(--muted)}
.prose li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.dark .prose p,.dark .prose li{color:rgba(var(--ivory-rgb),.85)}
.dark .prose h4{color:var(--gold)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:clamp(1.6rem,4vw,3rem);align-items:start}

/* ---------- status note ---------- */
/* The default is the light variant, and a dark context switches it. It used to
   be the other way round, which left the note on the Anatomy Academy index as
   near invisible ivory text on an ivory band: the one page that carried a status
   note outside a dark section, and nothing marked it. Defaulting to light makes
   the common case the safe one. */
.status{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:clamp(.9rem,2.2vw,1.2rem);font-size:.92rem;color:var(--muted);max-width:var(--measure);margin-top:1.6rem}
.status b{display:block;font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:.3rem}
.dark .status,.page-hero .status,.status-dark{background:rgba(var(--ivory-rgb),.06);
  border-color:var(--line-pale);color:rgba(var(--ivory-rgb),.82)}
.dark .status b,.page-hero .status b,.status-dark b{color:var(--gold-pale)}

/* ---------- key learning points ---------- */
.klp{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;
  padding:1.3rem 1.4rem;max-width:var(--measure)}
.klp ul{list-style:none;margin:0;padding:0}
.klp li{position:relative;margin:0 0 .6rem;padding-left:1.3rem;color:var(--muted);font-size:1rem}
.klp li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.klp li:last-child{margin-bottom:0}
.dark .klp{background:rgba(var(--ivory-rgb),.06);border-color:var(--line-pale);border-top-color:var(--gold)}
.dark .klp li{color:rgba(var(--ivory-rgb),.85)}

/* ---------- references ---------- */
.refs{max-width:var(--measure);font-size:.95rem}
.refs ol{margin:0;padding-left:1.4rem}
.refs li{margin-bottom:.6rem;color:var(--muted)}
.dark .refs li{color:rgba(var(--ivory-rgb),.8)}

/* ---------- article dial sits on ivory ---------- */
.dial-on-light{background:var(--green-deep);border-color:transparent}
.dial-on-light .dial-panel p{font-size:1.04rem}
.dial-on-light .dial-body{min-height:15rem}
@media (max-width:560px){.dial-on-light .dial-body{min-height:20rem}}

/* ---------- safety notice ---------- */
.safety{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.4rem;
  margin-top:clamp(2.4rem,5vw,3.4rem);font-size:.92rem;color:var(--muted);max-width:66ch}
.safety b{font-family:var(--body);font-weight:600;color:var(--green-ink)}

/* ---------- article dial carrying full tier blocks ---------- */
/* A pipeline article puts a whole tier block inside each panel, so the body
   cannot have a fixed height. Only one panel shows at a time, so a tall panel
   costs nothing. */
.dial-article .dial-body{min-height:0}
.dial-article .dial-panel h4{font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:1.6rem 0 .6rem}
.dial-article .dial-panel h4:first-child{margin-top:0}
.dial-article .dial-panel p{margin-bottom:.9rem;max-width:64ch}
.dial-article .dial-panel ul{margin:0 0 1rem;padding-left:0;list-style:none;max-width:64ch}
.dial-article .dial-panel li{position:relative;padding-left:1.3rem;color:rgba(var(--ivory-rgb),.85);margin-bottom:.45rem}
.dial-article .dial-panel li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.dial-article .dial-panel .klp{background:rgba(var(--ivory-rgb),.06);border:1px solid var(--line-pale);
  border-top:3px solid var(--gold);border-radius:12px;padding:1.1rem 1.2rem;margin:1.3rem 0}
.dial-article .dial-panel .klp ul{padding-left:0;list-style:none;margin-bottom:0}
.dial-article .dial-panel .faq p{margin-bottom:.7rem}
.dial-article .dial-panel .faq b{color:var(--gold-pale);font-weight:600}
.dial-article .dial-panel .closer{border-top:1px solid var(--line-pale);padding-top:.9rem;
  margin-top:1.2rem;color:var(--gold-pale);font-size:.97rem}

/* ---------- explore further ---------- */
.explore{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.6rem;
  list-style:none;margin:0;padding:0}
.explore li{background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.95rem;display:flex;gap:.5rem;align-items:baseline;
  transition:border-color .2s,background .2s}
.explore li:hover{border-color:var(--gold);background:var(--paper)}
.explore .pid{color:var(--gold-ink);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.explore a{text-decoration:none;font-weight:600;border-bottom:0}
.explore .pending{color:var(--muted);opacity:.75}
/* page numbers in a topic list: the number is the architecture's own id, so it
   earns its place as a label rather than as decoration */
.topic .pid{color:var(--gold-ink);font-size:.78rem;font-weight:700;display:inline-block;min-width:3.2rem;
  font-variant-numeric:tabular-nums}
.dark .topic .pid{color:var(--gold)}