:root{
  /* Parchment and midnight ink, with brass and distinct elemental hues.
     Both themes use the same semantic colors and readable surfaces. */
  --ground:#F2EDE3;
  --surface:#FFFCF5;
  --surface-2:#E8E0D1;
  --ink:#202F35;
  --ink-soft:#526168;
  --ink-faint:#626960;
  --rule:#DCD3C2;
  --rule-firm:#BCB29C;
  --accent:#176577;
  --accent-lift:#124D5A;
  --accent-wash:#DBE9E7;
  --ember:#9C1F3C;
  --ember-wash:#F4DDE3;
  --air:#8C5A10;
  --water:#176577;
  --earth:#4C7130;
  --fire:#A83A1C;
  --gold:#89621F;
  --spirit:#6B4A8C;
  --shadow:rgba(20,26,29,.12);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0C1922;
    --surface:#132630;
    --surface-2:#203642;
    --ink:#F2EBDD;
    --ink-soft:#B6C5C9;
    --ink-faint:#98ACB4;
    --rule:#2A414C;
    --rule-firm:#48616A;
    --accent:#78C6D2;
    --accent-lift:#A6E1E6;
    --accent-wash:#163641;
    --ember:#F18E9B;
    --ember-wash:#2E141C;
    --air:#E9BA68;
    --water:#78C6D2;
    --earth:#A7C986;
    --fire:#F19B74;
    --gold:#DDB878;
    --spirit:#C5ADE5;
    --shadow:rgba(0,0,0,.46);
  }
}
:root[data-theme="dark"]{
  --ground:#0C1922;
  --surface:#132630;
  --surface-2:#203642;
  --ink:#F2EBDD;
  --ink-soft:#B6C5C9;
  --ink-faint:#98ACB4;
  --rule:#2A414C;
  --rule-firm:#48616A;
  --accent:#78C6D2;
  --accent-lift:#A6E1E6;
  --accent-wash:#163641;
  --ember:#F18E9B;
  --ember-wash:#2E141C;
  --air:#E9BA68;
  --water:#78C6D2;
  --earth:#A7C986;
  --fire:#F19B74;
  --gold:#DDB878;
  --spirit:#C5ADE5;
  --shadow:rgba(0,0,0,.46);
}

*{box-sizing:border-box}

.realm-prologue{--realm-color:var(--gold)}
.realm-air{--realm-color:var(--air)}
.realm-water{--realm-color:var(--water)}
.realm-earth{--realm-color:var(--earth)}
.realm-fire{--realm-color:var(--fire)}
.realm-spirit{--realm-color:var(--spirit)}
.realm-war{--realm-color:var(--ember)}

body{
  margin:0;
  background:
    radial-gradient(circle at 5% 4%,color-mix(in srgb,var(--air) 11%,transparent),transparent 30rem),
    radial-gradient(circle at 96% 12%,color-mix(in srgb,var(--fire) 10%,transparent),transparent 28rem),
    radial-gradient(circle at 12% 68%,color-mix(in srgb,var(--water) 7%,transparent),transparent 34rem),
    radial-gradient(circle at 88% 82%,color-mix(in srgb,var(--earth) 7%,transparent),transparent 36rem),
    var(--ground);
  color:var(--ink);
  font-family:Spectral,Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--air),var(--water),var(--earth),var(--fire));
  z-index:60;transform:scaleX(0);transform-origin:left center;
  animation:reading-progress linear both;
  animation-timeline:scroll(root);
}
@keyframes reading-progress{to{transform:scaleX(1)}}
@supports not (animation-timeline:scroll()){
  .progress{display:none}
}

/* ---------- shell ---------- */
.shell{
  display:block;
  max-width:1120px;
  margin:0 auto;
}

/* ---------- rail ---------- */
.rail{
  border-right:1px solid var(--rule);
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--air),var(--water),var(--earth),var(--fire)) 1;
  padding:38px 26px 60px 24px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  backdrop-filter:blur(18px);
}
.rail-brand{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:1.02rem;line-height:1.25;
  letter-spacing:-.01em;margin-bottom:4px;
}
.rail-brand a{color:var(--ink);text-decoration:none}
.rail-sub{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:30px;
}

.realms{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:1px}
.realm{
  display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:10px;
  padding:7px 8px;border-radius:3px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-faint);
}
.realm .glyph{font-size:.9rem;line-height:1;color:var(--rule-firm)}
.realm .state{font-size:.66rem;letter-spacing:.1em}
.realm.live{
  background:color-mix(in srgb,var(--realm-color,var(--accent)) 10%,transparent);
  color:var(--realm-color,var(--accent));
  border-left:2px solid var(--realm-color,var(--accent));
}
.realm.live .glyph{color:var(--realm-color,var(--accent));font-size:1rem}
.realm.live .state{color:var(--realm-color,var(--accent))}

.rail h3{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--rule);
}
.toc{list-style:none;margin:0;padding:0}
.toc > li{margin-bottom:3px}
.toc details > summary{
  list-style:none;cursor:pointer;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:.83rem;font-weight:600;color:var(--ink);
  padding:5px 4px;border-radius:3px;display:flex;gap:7px;align-items:baseline;
}
.toc details > summary::-webkit-details-marker{display:none}
.toc details > summary::before{
  content:"›";color:var(--ink-faint);font-size:.85rem;
  transition:transform .15s ease;display:inline-block;
}
.toc details[open] > summary::before{transform:rotate(90deg)}
.toc details > summary:hover{background:var(--surface-2)}
.toc ul{list-style:none;margin:2px 0 10px;padding:0 0 0 15px;
  border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:1px}
.toc ul a{
  display:block;padding:3px 6px;border-radius:3px;
  font-size:.79rem;line-height:1.4;color:var(--ink-soft);text-decoration:none;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:500;
}
.toc ul a:hover{color:var(--accent);background:var(--surface-2)}
.toc ul a.here{color:var(--accent);background:var(--accent-wash)}

.rail-foot{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.06em;color:var(--ink-faint);line-height:1.7;
}

/* ---------- main ---------- */
main{padding:0 0 140px;min-width:0}
:root{--measure:944px;--content-gutter:44px}
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding:0}

.masthead{
  min-height:500px;max-width:var(--measure);margin:20px auto 0;padding:86px var(--content-gutter) 58px;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--rule));border-radius:20px;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--ground);box-shadow:0 30px 80px color-mix(in srgb,var(--shadow) 78%,transparent);
}
.masthead-art{
  position:absolute;inset:-2%;z-index:-2;width:104%;height:104%;display:block;
  object-fit:cover;object-position:center 42%;transform:scale(1.02);
}
.masthead::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(242,237,227,.97) 0%,rgba(242,237,227,.9) 44%,rgba(242,237,227,.32) 72%,rgba(12,25,34,.22) 100%),
    linear-gradient(0deg,rgba(242,237,227,.9),transparent 62%);
}
.masthead::after{
  content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--air),var(--water),var(--earth),var(--fire));
}
.masthead > :not(.masthead-art){position:relative;z-index:1}
.masthead .eyebrow{
  align-self:flex-start;padding:7px 11px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--rule));
  border-radius:999px;background:color-mix(in srgb,var(--surface) 78%,transparent);
  box-shadow:0 6px 20px color-mix(in srgb,var(--shadow) 40%,transparent);backdrop-filter:blur(8px);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;
}
.masthead h1{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:clamp(2.3rem,5.4vw,3.5rem);line-height:1.02;
  letter-spacing:-.028em;margin:0 0 20px;text-wrap:balance;max-width:16ch;
}
.masthead p{font-size:1.09rem;color:var(--ink-soft);margin:0;max-width:56ch}
.masthead .status{
  margin-top:26px;display:inline-flex;align-items:center;gap:9px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--rule-firm);
  padding:6px 12px;border-radius:2px;
}
.status .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

:root[data-theme="dark"] .masthead{background:var(--ground)}
:root[data-theme="dark"] .masthead::before{
  background:
    linear-gradient(90deg,rgba(12,25,34,.96) 0%,rgba(12,25,34,.86) 43%,rgba(12,25,34,.3) 72%,rgba(12,25,34,.62) 100%),
    linear-gradient(0deg,rgba(12,25,34,.88),transparent 58%);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .masthead{background:var(--ground)}
  :root:not([data-theme="light"]) .masthead::before{
    background:
      linear-gradient(90deg,rgba(12,25,34,.96) 0%,rgba(12,25,34,.86) 43%,rgba(12,25,34,.3) 72%,rgba(12,25,34,.62) 100%),
      linear-gradient(0deg,rgba(12,25,34,.88),transparent 58%);
  }
}

@media (prefers-reduced-motion:no-preference){
  .masthead-art{animation:realm-scene-drift 18s cubic-bezier(.45,0,.55,1) infinite alternate}
}
@keyframes realm-scene-drift{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.075) translate3d(-.65%,0,0)}
}

/* book divider */
.book{
  padding:74px var(--content-gutter) 34px;max-width:var(--measure);margin:28px auto 0;position:relative;overflow:hidden;
  border-top:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 38%,var(--rule));
  border-bottom:1px solid var(--rule);
  background:
    radial-gradient(circle at 88% 50%,color-mix(in srgb,var(--realm-color,var(--accent)) 17%,transparent),transparent 13rem),
    linear-gradient(115deg,color-mix(in srgb,var(--realm-color,var(--accent)) 13%,transparent),transparent 58%);
}
.book::after{
  content:"◈";position:absolute;right:46px;top:50%;transform:translateY(-50%);
  font:400 7rem/1 "Spectral",Georgia,serif;color:var(--realm-color,var(--accent));opacity:.17;
}
.book.realm-air::after{content:"◌"}.book.realm-water::after{content:"≈"}
.book.realm-earth::after{content:"◇"}.book.realm-fire::after{content:"△"}
.book.realm-spirit::after{content:"✦"}.book.realm-war::after{content:"×"}
.book .marker{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--realm-color,var(--accent));display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.book .marker::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--realm-color,var(--accent)) 35%,var(--rule))}
.book h2{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.08;
  letter-spacing:-.022em;margin:0;text-wrap:balance;
}

/* lesson head */
.lesson-head{
  min-height:210px;max-width:var(--measure);margin:26px auto 0;padding:58px var(--content-gutter) 32px;position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  border-top:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 44%,var(--rule));
  border-bottom:1px solid var(--rule);background:var(--surface-2);
}
.lesson-head::before{
  content:"";position:absolute;z-index:1;left:var(--content-gutter);top:38px;width:42px;height:2px;
  background:linear-gradient(90deg,var(--realm-color,var(--accent)),transparent);
}
.lesson-head::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 88%,transparent) 38%,color-mix(in srgb,var(--ground) 18%,transparent) 70%,color-mix(in srgb,var(--ground) 8%,transparent) 100%);
}
.lesson-art{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  filter:saturate(1.04) contrast(1.08);
}
.lesson-head > :not(.lesson-art){position:relative;z-index:2}
.lesson-head .num{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--realm-color,var(--accent));margin-bottom:12px;padding-top:4px;
}
.lesson-head h2{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:clamp(1.75rem,4.2vw,2.5rem);line-height:1.06;
  letter-spacing:-.026em;margin:0;text-wrap:balance;
}

h3{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1.62rem;line-height:1.24;letter-spacing:-.016em;
  margin:56px 0 16px;text-wrap:balance;scroll-margin-top:24px;
}
h4{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1.24rem;line-height:1.3;letter-spacing:-.01em;
  margin:36px 0 11px;color:var(--ink);
}

/* Title markers. Every content heading carries its realm's colour: a rule
   under the section heads, a diamond beside the subheads. Direct children of
   .wrap only, so headings inside callouts — which already carry a chip — are
   left alone. */
.wrap > h3{position:relative;padding-bottom:13px}
.wrap > h3::after{
  content:"";position:absolute;left:0;bottom:0;
  width:2.7em;height:3px;border-radius:2px;
  background:var(--realm-color,var(--accent));
}
.wrap > h4{position:relative;padding-left:19px}
.wrap > h4::before{
  content:"";position:absolute;left:0;top:.46em;
  width:7px;height:7px;border-radius:1px;transform:rotate(45deg);
  background:var(--realm-color,var(--accent));
}

p{margin:0 0 21px}

/* Prose measure. The container stays wide so tables and figures keep their
   room; running text is held to a readable line instead. */
:root{--prose:37em}
.wrap > p,.wrap > ul,.wrap > ol,
.callout > p,.good-news > p{max-width:var(--prose)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-lift)}
strong{font-weight:600}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--rule);margin:56px 0}

ul,ol{margin:0 0 19px;padding-left:1.25em}
li{margin-bottom:8px}
li::marker{color:var(--ink-faint)}

code{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.845em;background:var(--surface-2);
  padding:.14em .38em;border-radius:3px;
  border:1px solid var(--rule);
}

/* figures / code blocks */
.figure{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.875rem;line-height:1.64;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:4px;padding:19px 21px;margin:0 0 22px;
  overflow-x:auto;white-space:pre;color:var(--ink);
  box-shadow:0 1px 2px var(--shadow);
}
.figure.plain{background:var(--surface-2);box-shadow:none}

/* tables */
.tablewrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--rule);
  border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.97rem;
  font-variant-numeric:tabular-nums}
th,td{padding:10px 15px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);line-height:1.55}
th{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;white-space:nowrap;
  background:var(--surface-2);
}
tbody tr:last-child td{border-bottom:none}
td code{font-size:.8em}

/* ---------- shared storefront component ---------- */
.storefront-overview{max-width:var(--measure);padding:62px 0 0}
.storefront-intro{max-width:none;margin:0 0 25px}
.storefront-intro h3{margin:7px 0 10px}
.section-kicker{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.storefront-warning{
  margin:20px 0 0;padding:15px 18px;border-left:3px solid var(--ember);
  background:var(--ember-wash);color:var(--ink-soft);border-radius:0 5px 5px 0;
}

.product-page{
  min-height:0;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rule);border-radius:10px;background:var(--surface);
  box-shadow:0 22px 55px color-mix(in srgb,var(--shadow) 56%,transparent);
}
.store-bar{
  position:relative;display:flex;align-items:center;gap:16px;min-height:64px;
  padding:14px 50px 14px 18px;color:#EDE8D9;background:#0B2722;border-bottom:1px solid rgba(255,255,255,.12);
}
.store-mark{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  font-size:.88rem;letter-spacing:.01em;white-space:nowrap;
}
.store-mark::before{
  content:"◇";display:inline-grid;place-items:center;width:26px;height:26px;margin-right:9px;
  color:#0B2722;background:#E8B64F;border-radius:50%;vertical-align:middle;
}
.store-nav{margin-left:auto;font-size:.7rem;color:#B8C9C2;white-space:nowrap}
.store-nav b{
  display:inline-grid;place-items:center;width:19px;height:19px;margin-left:3px;
  color:#0B2722;background:#E8B64F;border-radius:50%;font-size:.64rem;
}
.cache-policy{
  display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-style:normal;
  font-size:.66rem;line-height:1.35;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);
}
.part-number{
  position:absolute;z-index:3;right:9px;top:9px;display:grid;place-items:center;
  width:22px;height:22px;border-radius:50%;background:var(--gold);color:#17211D;
  font:600 .64rem/1 "JetBrains Mono",ui-monospace,monospace;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent);
}
.asset-bundle{
  position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;
  grid-template-areas:"label files policy";gap:8px 16px;min-height:64px;padding:12px 50px 12px 18px;
  border-top:1px solid color-mix(in srgb,var(--accent) 24%,var(--rule));
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),color-mix(in srgb,var(--gold) 7%,var(--surface)));
}
.asset-bundle-label{
  grid-area:label;font:600 .66rem/1.35 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.asset-bundle strong{
  grid-area:files;display:flex;align-items:center;gap:7px;
  font:700 1.02rem/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.02em;
}
.asset-bundle strong span:first-child{color:var(--accent)}
.asset-bundle strong span:last-child{color:var(--ember)}
.asset-bundle strong .asset-plus{color:var(--gold)}
.asset-bundle .cache-policy{grid-area:policy;text-align:right;color:var(--ink-soft)}
.asset-bundle .part-number{top:50%;transform:translateY(-50%)}
.product-shell{
  display:grid;grid-template-columns:minmax(160px,.5fr) minmax(0,1.5fr);
  gap:18px;padding:18px;flex:1;background:color-mix(in srgb,var(--ground) 56%,var(--surface));
}
.product-gallery{
  position:relative;min-height:420px;margin:0;overflow:hidden;
  border:1px solid var(--rule);border-radius:7px;background:var(--surface-2);
}
.product-gallery::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(5,21,18,.82),transparent 44%)}
.product-gallery img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.product-gallery figcaption{
  position:absolute;z-index:2;left:14px;right:14px;bottom:14px;
  display:flex;align-items:end;justify-content:space-between;gap:12px;color:#F1EAD8;
}
.product-gallery figcaption b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.82rem;font-weight:600}
.product-gallery figcaption .cache-policy{color:#BFD1C8;text-align:right;max-width:22ch}
.product-buy{display:flex;flex-direction:column;gap:10px;min-width:0}
.product-overline{
  margin:1px 0 -2px;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--earth);
}
.product-details,.product-review,.product-price,.product-stock,.product-cart{
  position:relative;border:1px solid var(--rule);border-radius:7px;background:var(--surface);padding:12px 42px 12px 13px;
}
.course-storefront .product-details h3{
  margin:6px 0 5px;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.42rem;line-height:1.06;letter-spacing:-.025em;color:var(--ink);
}
.course-storefront .product-details p{margin:0;font-size:.78rem;line-height:1.48;color:var(--ink-soft)}
.product-review{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 8px}
.product-review .stars{color:#D69A2D;font-size:.72rem;letter-spacing:.04em}
.product-review b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.83rem;color:var(--ink)}
.product-review > span:not(.stars):not(.part-number){font-size:.7rem;color:var(--ink-soft)}
.product-review .cache-policy{grid-column:1/-1}
.product-facts{display:grid;grid-template-columns:.72fr 1.28fr;gap:10px}
.product-price strong{
  display:block;margin-top:6px;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:1.55rem;line-height:1;color:var(--ink);
}
.product-stock > span:not(.part-number){display:block;margin-top:7px;font-size:.74rem;color:var(--earth)}
.product-stock i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:var(--earth);box-shadow:0 0 0 3px color-mix(in srgb,var(--earth) 15%,transparent)}
.product-stock b{display:block;margin-top:2px;font-size:.76rem;color:var(--ink)}
.product-cart{margin-top:auto;padding:9px 42px 9px 9px;background:var(--ember-wash);border-color:color-mix(in srgb,var(--ember) 28%,var(--rule))}
.cart-button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;
  border-radius:5px;background:var(--ink);color:var(--ground);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;font-size:.82rem;
}
.cart-button b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;color:#17211D;background:#E8B64F;font-size:.7rem}
.product-cart .cache-policy{margin:7px 3px 0;color:var(--ember)}

/* Sits on the same measure as the prose around it. It used to break out
   of the wrap padding, which made it the only element on the page that
   did not line up with the text. */
.storefront-study{
  margin:24px 0 26px;
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(380px,.94fr);
  gap:18px;align-items:stretch;
}
.course-storefront.compact .product-gallery{min-height:400px}
.course-storefront.compact .product-shell{padding:14px;gap:14px}
.course-storefront.compact .store-nav{display:none}
.stale-panel{
  min-width:0;padding:20px 18px 16px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--rule));
  border-radius:10px;background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:0 22px 55px color-mix(in srgb,var(--shadow) 42%,transparent);
}
.stale-panel h4{margin:5px 0 6px;font-size:1.22rem}
.stale-panel > p{margin:0 0 14px;color:var(--ink-soft);font-size:.88rem}
.stale-panel .tablewrap{margin:0}
.stale-panel table{font-size:.72rem}
.stale-panel th,.stale-panel td{padding:7px 8px;line-height:1.35}
.stale-panel th{font-size:.64rem;white-space:normal}

/* narrative */
.saga{
  margin:0 0 26px;padding:0 0 0 22px;border-left:2px solid var(--rule-firm);
  font-style:italic;color:var(--ink-soft);font-size:1.05rem;line-height:1.72;
  max-width:640px;
}
.saga p{margin:0 0 14px}
.saga p:last-child{margin:0}
.book .saga{margin-top:22px}

/* technique plate */
.technique{
  --technique-color:var(--accent);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr;grid-template-areas:"tag" "name" "gloss";row-gap:3px;
  margin:24px 0 38px;padding:19px 24px 19px 78px;
  background:
    radial-gradient(circle at 94% 10%,color-mix(in srgb,var(--technique-color) 18%,transparent),transparent 12rem),
    linear-gradient(115deg,color-mix(in srgb,var(--technique-color) 16%,var(--surface)),var(--surface) 68%);
  border:1px solid color-mix(in srgb,var(--technique-color) 42%,var(--rule));
  border-left:4px solid var(--technique-color);border-radius:8px;
  box-shadow:0 16px 36px color-mix(in srgb,var(--shadow) 38%,transparent),inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent);
}
.technique::before{
  content:"✦";position:absolute;left:22px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  color:var(--technique-color);background:color-mix(in srgb,var(--technique-color) 12%,var(--ground));
  border:1px solid color-mix(in srgb,var(--technique-color) 58%,var(--rule));
  box-shadow:0 0 0 7px color-mix(in srgb,var(--technique-color) 7%,transparent);
}
.technique::after{
  content:"";position:absolute;right:-24px;bottom:-36px;width:130px;height:130px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--technique-color) 16%,transparent);pointer-events:none;
}
.technique .tag{
  grid-area:tag;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--technique-color);white-space:nowrap;
}
.technique .name{
  grid-area:name;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:1.28rem;line-height:1.18;color:var(--ink);
}
.technique .gloss{grid-area:gloss;color:var(--ink-soft);font-style:italic;font-size:.95rem}
.technique.none .name{color:var(--ink-soft)}

.lesson-head[class*="realm-"] + .wrap .technique{
  --technique-color:var(--realm-color,var(--accent));
}

.definition-callout{
  margin:25px 0 30px;padding:18px 20px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--rule));border-left:4px solid var(--accent);border-radius:6px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),var(--surface));
  box-shadow:0 12px 28px color-mix(in srgb,var(--shadow) 28%,transparent);
  font-size:1.03rem;line-height:1.65;color:var(--ink-soft);
}
.definition-callout strong{color:var(--ink)}
.term-highlight{
  display:inline-block;padding:.04em .42em;border-radius:4px;
  background:color-mix(in srgb,var(--ember) 17%,var(--surface));color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ember) 42%,var(--rule));
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
}
.danger-highlight{
  padding:.08em .28em;border-radius:3px;
  background:color-mix(in srgb,var(--ember) 18%,var(--surface));color:var(--ink);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  font-weight:600;
}
/* problem / solution / good-news callouts.
   Ember carries the failure, earth carries the fix. Both tokens are
   redefined for dark, so the colour-mix panels follow the theme. */
.callout{
  margin:30px 0;padding:22px 24px;
  border:1px solid var(--rule);border-left:4px solid var(--rule-firm);border-radius:6px;
  background:var(--surface);
  box-shadow:0 12px 28px color-mix(in srgb,var(--shadow) 22%,transparent);
}
.callout > :first-child{margin-top:0}
.callout > :last-child{margin-bottom:0}
.callout h4{margin:22px 0 12px}
.callout > h4:first-child{margin-top:0}
/* The chip labels the whole panel, so only the leading h4 carries it —
   a callout with several sub-headings is labelled once, not once each. */
.callout > h4:first-child::before,
.callout > .callout-label{
  display:inline-block;margin-right:.62em;vertical-align:.14em;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-weight:500;letter-spacing:.13em;
  padding:.3em .62em;border-radius:3px;
}
.callout > h4:first-child::before{font-size:.6em}
/* Standalone label, for a panel that opens with prose rather than a heading. */
.callout > .callout-label{font-size:.68rem;margin:0 0 14px;display:block;width:max-content}

.callout.problem{
  border-color:color-mix(in srgb,var(--ember) 28%,var(--rule));
  border-left-color:var(--ember);
  background:linear-gradient(112deg,color-mix(in srgb,var(--ember) 9%,var(--surface)),var(--surface) 62%);
}
.callout.problem h4{color:var(--ember)}
.callout.problem > h4:first-child::before{content:"PROBLEM"}
.callout.problem > h4:first-child::before,
.callout.problem > .callout-label{
  color:var(--ember);
  background:color-mix(in srgb,var(--ember) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ember) 38%,var(--rule));
}

.callout.solution{
  border-color:color-mix(in srgb,var(--earth) 30%,var(--rule));
  border-left-color:var(--earth);
  background:linear-gradient(112deg,color-mix(in srgb,var(--earth) 9%,var(--surface)),var(--surface) 62%);
}
.callout.solution h4{color:var(--earth)}
.callout.solution > h4:first-child::before{content:"SOLUTION"}
.callout.solution > h4:first-child::before,
.callout.solution > .callout-label{
  color:var(--earth);
  background:color-mix(in srgb,var(--earth) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--earth) 38%,var(--rule));
}

.good-news{
  margin:40px 0 26px;padding:22px 24px;
  border:1px solid color-mix(in srgb,var(--earth) 30%,var(--rule));
  border-left:4px solid var(--earth);border-radius:6px;
  background:linear-gradient(112deg,color-mix(in srgb,var(--earth) 10%,var(--surface)),var(--surface) 62%);
  box-shadow:0 12px 28px color-mix(in srgb,var(--shadow) 22%,transparent);
}
.good-news > :first-child{margin-top:0}
.good-news > :last-child{margin-bottom:0}
.good-news h3{margin:0 0 12px;color:var(--earth)}
.good-news h3::before{
  content:"GOOD NEWS";display:inline-block;margin-right:.62em;vertical-align:.16em;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.5em;font-weight:500;letter-spacing:.13em;
  padding:.32em .64em;border-radius:3px;color:var(--earth);
  background:color-mix(in srgb,var(--earth) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--earth) 38%,var(--rule));
}

/* flow diagrams — reading and writing techniques.
   Colours come from tokens so both themes work; solid arrows are in the
   request path, dashed ones happen after the caller has been answered. */
.flow{
  margin:26px 0 32px;padding:22px 20px 16px;
  background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  overflow-x:auto;
}
.flow svg{display:block;width:100%;min-width:420px;max-width:620px;height:auto;margin:0 auto}
.flow .bx{fill:var(--surface-2);stroke:var(--rule-firm);stroke-width:1.4}
.flow .bx-src{fill:color-mix(in srgb,var(--realm-color,var(--accent)) 12%,var(--surface-2))}
.flow .tx{
  fill:var(--ink);font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:13.5px;font-weight:600;text-anchor:middle;
}
.flow .ar{stroke:var(--realm-color,var(--accent));stroke-width:1.7;fill:none}
.flow .ar-late{stroke-dasharray:5 4;opacity:.72}
.flow .ar-dim{stroke:var(--rule-firm);stroke-width:1.5;stroke-dasharray:4 4;fill:none}
.flow .n{
  fill:var(--realm-color,var(--accent));font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11.5px;font-weight:500;
}
.flow .nt{
  fill:var(--ink-faint);font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.04em;
}
.flow .ll{stroke:var(--rule-firm);stroke-width:1.1;stroke-dasharray:3 5}
.flow .ar-ret{stroke:var(--rule-firm);stroke-width:1.4;stroke-dasharray:4 4;fill:none}
.flow .hd{fill:var(--surface-2);stroke:var(--rule-firm);stroke-width:1.4}
.flow .hd-src{fill:color-mix(in srgb,var(--realm-color,var(--accent)) 12%,var(--surface-2))}
.flow figcaption{
  margin-top:14px;text-align:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);
}

.home-prologue{margin-top:76px}

/* forge */
.forge{
  margin:34px 0;padding:20px 22px;
  background:var(--ember-wash);border-left:3px solid var(--ember);
  border-radius:0 4px 4px 0;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fire) 12%,transparent);
}
.forge .label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin-bottom:11px;
}
.forge p{font-style:italic;color:var(--ink-soft);margin:0 0 13px;font-size:1.01rem}
.forge p:last-child{margin:0}

/* the trial — L12 has no technique */
.trial{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:22px 0 34px;padding:16px 20px;
  background:var(--ember-wash);border-left:3px solid var(--ember);
  border-radius:0 3px 3px 0;
}
.trial-tag{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);white-space:nowrap;
}
.trial-line{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1.06rem;color:var(--ink);
}

/* stop-and-think prompt */
.attempt{
  margin:26px 0;padding:13px 20px;text-align:center;
  border-top:1px solid var(--rule-firm);border-bottom:1px solid var(--rule-firm);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* forge callback in L12 */
.forge.recall{margin:26px 0;padding:16px 22px}
.forge.recall p{font-size:.97rem}

/* the closing narrative */
.saga.finale{
  border-left:2px solid var(--accent);padding-left:24px;
  font-size:1.08rem;
}
.saga.finale{max-width:640px}
.saga.finale p:last-child{color:var(--ink);font-style:normal}

/* misconception */
.myth{
  margin:26px 0;padding:19px 22px;background:var(--surface);
  border:1px solid var(--rule);border-top:2px solid var(--ember);border-radius:3px;
}
.myth .label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember);margin-bottom:11px;
}
.myth .claim{
  font-style:italic;font-size:1.08rem;color:var(--ink);
  margin:0 0 13px;padding-left:14px;border-left:2px solid var(--rule-firm);
}
.myth p:last-child{margin:0}

/* aside / cross-reference */
.aside{
  margin:24px 0;padding:14px 18px;background:var(--surface-2);
  border-radius:3px;font-size:.95rem;color:var(--ink-soft);
}
.aside p{margin:0 0 11px}
.aside p:last-child{margin:0}
.aside strong{color:var(--ink)}

/* Keystone teaching box. Its restrained tint follows the active book. */
.keystone{
  margin:32px 0;padding:24px 26px;text-align:center;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--realm-color,var(--accent)) 12%,var(--surface)),
    color-mix(in srgb,var(--realm-color,var(--accent)) 5%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 38%,var(--rule-firm));
  border-left:4px solid var(--realm-color,var(--accent));
  border-radius:4px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--shadow) 26%,transparent);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1.24rem;line-height:1.35;letter-spacing:-.014em;
  color:var(--ink);text-wrap:balance;
}

/* placeholder */
.placeholder{
  margin:26px 0;padding:15px 18px;border:1px dashed var(--rule-firm);
  border-radius:3px;background:transparent;
}
.placeholder .label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:8px;
}
.placeholder p{margin:0;font-size:.94rem;color:var(--ink-soft);font-style:italic}

/* Bloom filters — an early defense against cache penetration */
.bloom-panel,#l14-bloom{scroll-margin-top:132px}
.bloom-panel{
  margin:32px 0;padding:24px 26px 22px;border:1px solid color-mix(in srgb,var(--earth) 42%,var(--rule));
  border-radius:8px;background:
    radial-gradient(circle at 94% 10%,color-mix(in srgb,var(--earth) 14%,transparent),transparent 13rem),
    linear-gradient(120deg,color-mix(in srgb,var(--earth) 9%,var(--surface)),var(--surface) 72%);
  box-shadow:0 18px 42px color-mix(in srgb,var(--shadow) 34%,transparent);
}
.bloom-panel h3{margin:7px 0 14px;font-size:1.4rem}
.bloom-panel > p{max-width:var(--prose);margin:0 0 17px;color:var(--ink-soft)}
.bloom-panel > p:last-child{margin-bottom:0}
.bloom-verdicts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:21px 0}
.bloom-verdict{
  min-width:0;padding:15px 16px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);
}
.bloom-verdict span{
  display:block;margin-bottom:7px;font:600 .67rem/1.35 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;
}
.bloom-verdict strong{display:block;font-size:.91rem;line-height:1.45;color:var(--ink)}
.bloom-verdict.absent{border-left:4px solid var(--earth)}
.bloom-verdict.absent span{color:var(--earth)}
.bloom-verdict.maybe{border-left:4px solid var(--gold)}
.bloom-verdict.maybe span{color:color-mix(in srgb,var(--gold) 76%,var(--ink))}
.bloom-example{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin:20px 0;padding:14px 16px;border-radius:6px;background:var(--surface-2);
  font:500 .76rem/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--ink-soft);
}
.bloom-example code{color:var(--accent)}
.bloom-example strong{color:var(--earth)}

/* collapsible optional reads */
.opt{
  border:1px solid var(--rule);border-radius:4px;background:var(--surface);
  margin:0 0 10px;overflow:hidden;
}
.opt > summary{
  list-style:none;cursor:pointer;padding:13px 17px;
  display:flex;align-items:center;gap:12px;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1rem;color:var(--ink);
}
.opt > summary::-webkit-details-marker{display:none}
.opt > summary::before{
  content:"+";font-family:"JetBrains Mono",ui-monospace,monospace;
  color:var(--accent);font-size:.95rem;width:11px;flex:none;
}
.opt[open] > summary::before{content:"–"}
.opt > summary:hover{background:var(--surface-2)}
.opt > summary .flag{
  margin-left:auto;flex:none;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400;
}
.opt .body{padding:2px 17px 6px;border-top:1px solid var(--rule)}
.opt .body > *:first-child{margin-top:16px}
.opt.legacy > summary .flag{color:var(--ember)}
.opt.legacy > summary::before{color:var(--ember)}

/* in-the-wild note */
.wild{
  margin:20px 0 18px!important;padding:13px 16px;
  background:var(--surface-2);border-radius:3px;
  font-size:.91rem;line-height:1.6;color:var(--ink-soft);
}
.wild-tag{
  display:block;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:6px;
}
.opt.legacy .wild{background:var(--ember-wash)}
.opt.legacy .wild-tag{color:var(--ember)}
.wild strong{color:var(--ink)}
.opt-intro{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin:26px 0 12px;
}

/* exercise */
.exercise{
  margin:30px 0 0;padding:22px 24px;
  background:var(--surface);border:1px solid var(--rule-firm);border-radius:4px;
}
.exercise .label{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:13px;
}
.exercise ol{margin:0;padding-left:1.2em}
.exercise li:last-child{margin-bottom:0}
.exercise > p:last-child{margin-bottom:0}

.lesson-end{
  max-width:var(--measure);margin:64px auto 0;padding:26px 0 0;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.lesson-end a{color:var(--accent);text-decoration:none}
.lesson-end a:hover{text-decoration:underline}
.lesson-end .muted{color:var(--ink-faint)}

.tail{
  max-width:var(--measure);margin:90px auto 0;padding:34px 0 0;border-top:1px solid var(--rule);
  color:var(--ink-faint);font-size:.92rem;
}
.tail strong{color:var(--ink-soft)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.mobile-nav{display:none}

@media (max-width:940px){
  .shell{grid-template-columns:1fr}
  .rail{display:none}
  .mobile-nav{
    display:block;position:sticky;top:0;z-index:40;
    background:var(--ground);border-bottom:1px solid var(--rule);
  }
  .mobile-nav > summary{
    list-style:none;cursor:pointer;padding:14px 24px;
    display:flex;align-items:center;gap:10px;
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
  }
  .mobile-nav > summary::-webkit-details-marker{display:none}
  .mobile-nav > summary::before{content:"☰";color:var(--accent)}
  .mobile-nav .inner{padding:4px 24px 24px;max-height:66vh;overflow-y:auto}
  .mobile-nav .mobile-theme-toggle{margin-top:18px}
  .masthead{min-height:390px;margin:0;padding:48px 24px 36px;border-left:0;border-right:0;border-radius:0}
  .masthead-art{object-position:58% center}
  .wrap,.book,.lesson-head{padding-left:24px;padding-right:24px}
  .storefront-intro{margin-left:0;margin-right:0}
  .book,.lesson-head{margin-left:0;margin-right:0}
  .lesson-end,.tail{margin-left:0;margin-right:0;padding-left:24px;padding-right:24px}
  .book{padding-top:56px}
  .storefront-study{grid-template-columns:1fr}
  .stale-panel{order:2}
  body{font-size:17.2px}
}

@media (max-width:620px){
  .masthead{min-height:400px}
  .masthead::before{
    background:linear-gradient(0deg,color-mix(in srgb,var(--ground) 96%,transparent),color-mix(in srgb,var(--ground) 78%,transparent));
  }
  .masthead h1{font-size:clamp(2rem,10vw,2.75rem);overflow-wrap:anywhere}
  .book::after{right:22px;font-size:4.5rem}
  .lesson-head::before{left:24px}
  .lesson-head{min-height:190px;padding-top:54px;padding-bottom:26px}
  .lesson-head::after{background:linear-gradient(90deg,color-mix(in srgb,var(--ground) 94%,transparent),color-mix(in srgb,var(--ground) 12%,transparent))}
  .technique{padding:18px 16px 18px 64px}
  .technique::before{left:16px;width:32px;height:32px}
  .keystone{margin:30px 0;padding:22px 20px;font-size:1.12rem}
  .bloom-panel{padding:20px 17px}
  .bloom-verdicts{grid-template-columns:1fr}
  .storefront-overview{padding-top:42px}
  .product-shell{grid-template-columns:1fr;padding:12px}
  .product-gallery,.course-storefront.compact .product-gallery{min-height:270px}
  .store-nav{display:none}
  .store-bar{padding-right:46px}
  .asset-bundle{grid-template-columns:auto 1fr;grid-template-areas:"label files" "policy policy";padding-right:46px}
  .asset-bundle .cache-policy{text-align:left}
  .stale-panel{padding:17px 12px 12px}
  .stale-panel table{font-size:.68rem}
  .stale-panel th,.stale-panel td{padding:7px 6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   Standalone site additions — not present in the artifact build
   ============================================================ */

/* ---------- shared course header ---------- */
.course-top{
  position:relative;z-index:50;
  border-top:3px solid transparent;border-bottom:1px solid var(--rule);
  border-image:linear-gradient(90deg,var(--air),var(--water),var(--earth),var(--fire)) 1;
  background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(18px);
}
.course-top-in{
  width:100%;max-width:var(--measure);height:72px;margin:0 auto;
  display:flex;align-items:center;gap:22px;
}
.course-brand{
  display:flex;align-items:center;gap:11px;min-width:max-content;
  color:var(--ink);text-decoration:none;
}
.course-brand > span:last-child{display:flex;flex-direction:column;gap:2px}
.course-brand b{font:700 .95rem/1.15 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.012em}
.course-brand small{
  font:500 .66rem/1.3 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
}
.course-crest{
  width:36px;height:36px;display:grid;place-items:center;flex:none;padding:4px;
  border:1px solid color-mix(in srgb,var(--gold) 56%,var(--rule));border-radius:50%;
  background:var(--surface);box-shadow:inset 0 0 0 2px var(--ground);
}
.course-crest svg{width:100%;height:100%;display:block;overflow:visible}
.course-crest .crest-track{fill:none;stroke:var(--rule-firm);stroke-width:1}
.course-crest [class^="crest-"]:not(.crest-track):not(.crest-diamond):not(.crest-core){fill:none;stroke-width:4;stroke-linecap:round}
.course-crest .crest-air{stroke:var(--air)}
.course-crest .crest-water{stroke:var(--water)}
.course-crest .crest-earth{stroke:var(--earth)}
.course-crest .crest-fire{stroke:var(--fire)}
.course-crest .crest-diamond{fill:color-mix(in srgb,var(--gold) 12%,transparent);stroke:var(--gold);stroke-width:1.5}
.course-crest .crest-core{fill:var(--gold)}
.course-books{
  margin-left:auto;display:flex;align-items:center;gap:2px;
  font:500 .66rem/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;
}
.course-books a{padding:9px 7px;border-radius:3px;color:var(--ink-faint);text-decoration:none}
.course-books a:hover{color:var(--accent);background:var(--surface-2)}
.course-books a[aria-current="page"]{color:var(--accent);background:var(--accent-wash)}
.course-theme-toggle{margin:0;flex:none}

/* ---------- shared course footer ---------- */
.course-footer{
  width:100%;max-width:var(--measure);margin:90px auto 0;
  border-top:1px solid var(--rule);padding:28px 0 0;
}
.course-footer-nav{display:grid;grid-template-columns:1fr minmax(180px,.7fr) 1fr;gap:12px;align-items:stretch}
.course-step,.course-map-link{
  min-height:76px;padding:15px 17px;display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--rule);border-radius:5px;background:var(--surface);
  color:var(--ink);text-decoration:none;
}
.course-step:hover,.course-map-link:hover{border-color:var(--accent);color:var(--accent)}
.course-step small,.course-map-link small{
  margin-bottom:6px;font:500 .66rem/1.2 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
}
.course-step b,.course-map-link b{font:600 .86rem/1.25 "Bricolage Grotesque",system-ui,sans-serif}
.course-step.next{text-align:right;align-items:flex-end}
.course-map-link{text-align:center;align-items:center}
.course-step.is-empty{visibility:hidden}
.course-footer-meta{
  margin-top:26px;padding:22px 0 0;border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font:500 .67rem/1.4 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
}
.course-footer-meta span{margin-right:auto}
.course-footer-meta a{color:var(--ink-soft);text-decoration:none}
.course-footer-meta a:hover{color:var(--accent)}

@media (max-width:940px){
  .course-top-in{height:64px;padding:0 24px}
  .course-books{display:none}
  .course-footer{padding-left:24px;padding-right:24px}
}
@media (max-width:620px){
  .course-brand small{max-width:20ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .course-theme-toggle [data-theme-label]{display:none}
  .course-theme-toggle{padding:7px 9px}
  .course-footer-nav{grid-template-columns:1fr 1fr}
  .course-map-link{grid-column:1/-1;grid-row:2}
  .course-step.is-empty{display:none}
  .course-footer-meta{align-items:flex-start;flex-direction:column;gap:10px}
  .course-footer-meta span{margin-right:0}
}

/* theme toggle */
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:22px;padding:7px 11px;
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--rule-firm);border-radius:3px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;
  cursor:pointer;transition:border-color .15s ease,color .15s ease;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle:active{transform:translateY(1px)}
.theme-toggle .icon{font-size:.85rem;line-height:1}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:inline}
:root[data-theme="dark"] .theme-toggle .sun{display:inline}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .sun{display:inline}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none}
}

/* skip link — keyboard accessibility */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--ground);
  padding:10px 16px;border-radius:0 0 3px 0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{left:0}

/* back to top */
.totop{
  position:fixed;right:26px;bottom:26px;z-index:50;
  width:40px;height:40px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--ink-soft);
  border:1px solid var(--rule-firm);
  cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .2s ease,color .15s ease,border-color .15s ease;
  font-size:1rem;line-height:1;
}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{color:var(--accent);border-color:var(--accent)}

@media print{
  .rail,.mobile-nav,.progress,.totop,.theme-toggle,.skip{display:none!important}
  .shell{display:block;max-width:none}
  .wrap,.book,.lesson-head,.masthead{padding-left:0;padding-right:0}
  .opt[open] .body,.opt .body{display:block!important}
  .opt > summary::before{content:""}
  body{font-size:11pt;background:#fff;color:#000}
  a{text-decoration:none;color:#000}
  .figure,.tablewrap{break-inside:avoid}
  h3,h4{break-after:avoid}
}

/* ============================================================
   Lesson card + sticky rail
   Generated by js/lesson-card.js. The card sits under the
   technique badge; once it scrolls away the same contents list
   returns as a rail in the right margin.
   ============================================================ */

.lesson-card{
  --card-color:var(--realm-color,var(--accent));
  margin:0 0 40px;padding:22px 26px 24px;
  border:1px solid color-mix(in srgb,var(--card-color) 26%,var(--rule));
  border-radius:8px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--card-color) 7%,var(--surface)),var(--surface) 62%);
  box-shadow:0 10px 26px color-mix(in srgb,var(--shadow) 24%,transparent);
}

.lc-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:12px;
}

.lc-eyebrow{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--card-color,var(--accent));
}

.lc-meta{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;letter-spacing:.06em;color:var(--ink-faint);
}

.lc-contents{
  margin:0;padding:0;list-style:none;
  counter-reset:lc;
  columns:2;column-gap:34px;
}
.lc-contents li{
  counter-increment:lc;margin:0 0 7px;
  break-inside:avoid;
  display:flex;gap:9px;align-items:baseline;
  font-size:.94rem;line-height:1.4;
}
.lc-contents li::before{
  content:counter(lc,decimal-leading-zero);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;color:var(--ink-faint);flex:none;
}
.lc-contents a{color:var(--ink-soft);text-decoration:none}
.lc-contents a:hover{color:var(--card-color);text-decoration:underline}

.lc-objectives{
  margin-top:20px;padding-top:17px;
  border-top:1px solid color-mix(in srgb,var(--card-color) 18%,var(--rule));
}
.lc-objectives ul{margin:9px 0 0;padding:0;list-style:none}
.lc-objectives li{
  position:relative;padding-left:19px;margin-bottom:5px;
  font-size:.94rem;line-height:1.5;color:var(--ink-soft);
}
.lc-objectives li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--card-color) 55%,transparent);
}

.lc-deps{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  margin-top:18px;padding-top:15px;
  border-top:1px solid color-mix(in srgb,var(--card-color) 18%,var(--rule));
}
.lc-dep{display:inline-flex;align-items:baseline;gap:8px;font-size:.9rem}
.lc-dep-tag{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
}
.lc-dep a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--card-color) 40%,transparent)}
.lc-dep a:hover{color:var(--card-color)}
.lc-dep-feeds .lc-count{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;padding:1px 6px;border-radius:20px;
  color:var(--ember);background:var(--ember-wash);
}

/* ---------- the rail ---------- */

.lesson-rail{
  position:fixed;z-index:40;
  top:104px;width:214px;
  right:max(16px,calc((100vw - 944px) / 2 - 254px));
  max-height:calc(100vh - 168px);overflow-y:auto;
  padding:16px 16px 18px;
  border:1px solid var(--rule);
  border-left:3px solid var(--realm-color,var(--accent));
  border-radius:7px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(6px);
  box-shadow:0 14px 34px color-mix(in srgb,var(--shadow) 30%,transparent);
  opacity:0;transform:translateX(10px);
  transition:opacity .26s ease,transform .26s ease;
  scrollbar-width:thin;
}
.lesson-rail.show{opacity:1;transform:none}

.lr-title{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:.83rem;font-weight:600;line-height:1.3;color:var(--ink);
  margin:7px 0 11px;padding-bottom:10px;
  border-bottom:1px solid var(--rule);
}

.lr-contents{margin:0;padding:0;list-style:none;counter-reset:lr}
.lr-contents li{counter-increment:lr;margin:0 0 3px}
.lr-contents a{
  display:flex;gap:8px;align-items:baseline;
  padding:4px 7px;border-radius:4px;
  font-size:.79rem;line-height:1.35;color:var(--ink-faint);text-decoration:none;
  border-left:2px solid transparent;
}
.lr-contents a::before{
  content:counter(lr,decimal-leading-zero);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.67rem;opacity:.72;flex:none;
}
.lr-contents a:hover{color:var(--ink-soft);background:color-mix(in srgb,var(--realm-color,var(--accent)) 7%,transparent)}
.lr-contents a.here{
  color:var(--ink);font-weight:600;
  border-left-color:var(--realm-color,var(--accent));
  background:color-mix(in srgb,var(--realm-color,var(--accent)) 11%,transparent);
}

/* Not enough room beside the text — the inline card already did this job. */
@media (max-width:1499px){
  .lesson-rail{display:none}
}

@media (max-width:640px){
  .lesson-card{padding:18px 18px 20px}
  .lc-contents{columns:1}
}

@media (prefers-reduced-motion:reduce){
  .lesson-rail{transition:none}
}

/* ============================================================
   Course structure: lesson navigation, continuity and ledger
   ============================================================ */

.course-top{position:sticky;top:0}
.lesson-head{scroll-margin-top:92px}
.lesson-book-intro{min-height:0;margin-top:16px;padding-top:16px;padding-bottom:0;border-top:0;background:transparent}
.lesson-book-intro::after,.lesson-book-intro h2,.lesson-book-intro .saga{display:none}
.lesson-book-intro .marker{margin:0;font-size:.62rem}
.lesson-book-intro + .lesson-head{margin-top:10px}

.course-lesson-menu{position:relative}
.course-lesson-menu > summary{
  list-style:none;cursor:pointer;padding:9px 10px;border-radius:3px;color:var(--ink);
}
.course-lesson-menu > summary::-webkit-details-marker{display:none}
.course-lesson-menu > summary::after{content:" ▾";color:var(--accent)}
.course-lesson-menu[open] > summary{background:var(--accent-wash);color:var(--accent)}
.course-lesson-menu > .lesson-nav-groups{
  position:absolute;z-index:90;right:0;top:calc(100% + 10px);width:min(620px,calc(100vw - 32px));
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;
  padding:20px;border:1px solid var(--rule-firm);border-radius:8px;
  background:var(--surface);box-shadow:0 20px 50px var(--shadow);
  text-align:left;
}
.lesson-nav-book{
  margin-bottom:7px;font:500 .62rem/1.3 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--realm-color,var(--accent));
}
.lesson-nav-group ul{list-style:none;margin:0;padding:0}
.lesson-nav-group a{
  display:block;padding:5px 7px!important;border-left:2px solid transparent;border-radius:2px!important;
  font-size:.72rem;line-height:1.35;text-transform:none;letter-spacing:0;color:var(--ink-soft)!important;
}
.lesson-nav-group a:hover,.lesson-nav-group a.here{
  color:var(--ink)!important;border-left-color:var(--accent);background:var(--accent-wash)!important;
}
.mobile-nav .lesson-nav-groups{display:grid;gap:20px}
.mobile-nav .lesson-nav-group a{padding:7px 9px!important}
.mobile-techniques{display:block;margin-top:20px;padding:12px;border:1px solid var(--rule);color:var(--accent);text-decoration:none}

.lc-bridge{
  margin-top:20px;padding:17px 18px;border-left:3px solid var(--card-color);
  background:color-mix(in srgb,var(--card-color) 8%,var(--surface-2));
}
.lc-bridge p{margin:7px 0 0;font-size:.96rem;line-height:1.55;color:var(--ink-soft)}
.lc-bridge .lc-deps{margin-top:12px;padding-top:12px}
.lc-feeds{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px}
.lc-feeds a{
  padding:4px 8px;border:1px solid color-mix(in srgb,var(--card-color) 36%,var(--rule));border-radius:20px;
  color:var(--ink-soft);font-size:.79rem;text-decoration:none;
}
.lc-feeds a:hover{color:var(--card-color);border-color:var(--card-color)}

.xref{
  position:relative;color:var(--realm-color,var(--accent));font-weight:600;text-decoration:none;
  border-bottom:2px solid color-mix(in srgb,var(--realm-color,var(--accent)) 45%,transparent);
}
.xref:hover{border-bottom-color:var(--realm-color,var(--accent))}
.xref::after{
  content:attr(data-xref-preview);position:absolute;z-index:100;left:50%;bottom:calc(100% + 10px);
  width:min(320px,78vw);padding:11px 13px;border:1px solid var(--rule-firm);border-left:3px solid var(--realm-color,var(--accent));
  border-radius:5px;background:var(--surface);box-shadow:0 14px 36px var(--shadow);color:var(--ink);
  font:400 .82rem/1.45 "Spectral",Georgia,serif;text-align:left;
  opacity:0;visibility:hidden;transform:translate(-50%,5px);transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;
}
.xref:hover::after,.xref:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}

.lesson-compact-toc{display:none}
@media (max-width:1499px){
  .lesson-rail{display:none!important}
  .lesson-compact-toc{
    display:block;position:sticky;z-index:35;top:72px;margin:0 0 32px;
    border:1px solid var(--rule);border-left:3px solid var(--realm-color,var(--accent));
    border-radius:4px;background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(12px);
  }
  .lesson-compact-toc > summary{
    list-style:none;cursor:pointer;padding:11px 14px;font:500 .68rem/1.3 "JetBrains Mono",ui-monospace,monospace;
    letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  }
  .lesson-compact-toc > summary::-webkit-details-marker{display:none}
  .lesson-compact-toc > summary::after{content:" ▾";color:var(--realm-color,var(--accent))}
  .lesson-compact-toc .lc-contents{columns:1;max-height:52vh;overflow:auto;padding:5px 16px 14px}
}

.lesson-end{display:block;padding-top:0;border-top:0}
.lesson-carry{
  padding:26px 28px;border:1px solid color-mix(in srgb,var(--realm-color,var(--accent)) 38%,var(--rule));
  border-left:4px solid var(--realm-color,var(--accent));border-radius:7px;
  background:color-mix(in srgb,var(--realm-color,var(--accent)) 7%,var(--surface));
  font-family:"Spectral",Georgia,serif;text-transform:none;letter-spacing:0;
}
.lesson-carry h3{margin:7px 0 12px;font-size:1.45rem}
.lesson-carry ul{margin:0;padding-left:20px;color:var(--ink-soft);font-size:1rem;line-height:1.55}
.lesson-step-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-top:18px}
.lesson-step{
  padding:13px 15px;border:1px solid var(--rule);border-radius:4px;color:var(--ink-soft)!important;text-decoration:none!important;text-align:center;
}
.lesson-step.previous{text-align:left}.lesson-step.next{text-align:right}.lesson-step:hover{color:var(--realm-color,var(--accent))!important;border-color:var(--realm-color,var(--accent))}

.resume-course{
  display:flex;flex-direction:column;gap:3px;padding:10px 14px;border:1px solid var(--gold);border-radius:4px;
  color:var(--ink);text-decoration:none;background:color-mix(in srgb,var(--gold) 10%,var(--surface));
}
.resume-course small{font:500 .58rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.lesson-complete::after{content:" ✓";color:var(--earth)}

.technique-index-hero{margin-top:24px}
.technique-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:34px 0 70px}
.technique-index-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:18px 20px;
  border:1px solid var(--rule);border-left:3px solid var(--realm-color,var(--accent));border-radius:6px;
  background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:0 8px 20px color-mix(in srgb,var(--shadow) 18%,transparent);
}
.technique-index-card:hover{transform:translateY(-2px);border-color:var(--realm-color,var(--accent));box-shadow:0 14px 30px color-mix(in srgb,var(--shadow) 26%,transparent)}
.technique-number{font:500 .68rem/1 "JetBrains Mono",ui-monospace,monospace;color:var(--realm-color,var(--accent))}
.technique-index-card b{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.04rem}
.technique-index-card small{display:block;margin-top:5px;color:var(--ink-soft);font-size:.86rem;line-height:1.4}
.technique-arrow{color:var(--realm-color,var(--accent));font-size:1.2rem}

/* ============================================================
   Progressive learning map
   ============================================================ */

.journey-map-trigger{
  appearance:none;border:0;background:transparent;color:var(--ink-faint);cursor:pointer;
  padding:9px 7px;border-radius:3px;font:500 .66rem/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.journey-map-trigger:hover{color:var(--accent);background:var(--accent-wash)}
.mobile-nav .journey-map-trigger{width:100%;margin:0 0 14px;padding:12px;text-align:left;border:1px solid var(--rule);color:var(--accent)}
.top-end .journey-map-trigger{margin-left:8px}

.journey-map-fab{
  position:fixed;z-index:54;right:22px;bottom:84px;display:flex;align-items:center;gap:9px;
  padding:9px 13px 9px 9px;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--rule));border-radius:30px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);
  box-shadow:0 12px 34px color-mix(in srgb,var(--shadow) 44%,transparent);color:var(--ink);cursor:pointer;
  font:600 .72rem/1 "Bricolage Grotesque",system-ui,sans-serif;
}
.journey-map-fab:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.journey-map-fab svg{width:28px;height:28px;fill:none;stroke:var(--rule-firm);stroke-width:1.2}
.journey-map-fab svg path:nth-of-type(1){stroke:var(--air)}
.journey-map-fab svg path:nth-of-type(2){stroke:var(--water)}
.journey-map-fab svg path:nth-of-type(3){stroke:var(--earth)}
.journey-map-fab svg path:nth-of-type(4){stroke:var(--fire)}
.journey-map-fab svg path:nth-of-type(5){stroke:var(--gold)}
.journey-map-fab svg circle:last-child{fill:var(--gold);stroke:none}

.journey-map-modal{
  width:min(1080px,calc(100% - 32px));max-height:min(90vh,900px);padding:0;
  border:1px solid var(--rule-firm);border-radius:10px;background:var(--surface);color:var(--ink);
  box-shadow:0 36px 100px rgba(0,0,0,.38);overflow:auto;
}
.journey-map-modal::backdrop{background:color-mix(in srgb,var(--ground) 34%,rgba(0,0,0,.72));backdrop-filter:blur(5px)}
.journey-map-shell{padding:30px}
.journey-map-header{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.journey-map-kicker{
  display:block;margin-bottom:7px;font:500 .65rem/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}
.journey-map-header h2{margin:0;font:700 clamp(1.8rem,4vw,2.6rem)/1.05 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em}
.journey-map-header p{margin:9px 0 0;color:var(--ink-soft);font-size:.95rem;line-height:1.5}
.journey-map-close{
  appearance:none;border:1px solid var(--rule);border-radius:4px;background:var(--surface-2);color:var(--ink-soft);cursor:pointer;
  padding:9px 12px;font:500 .65rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
}
.journey-map-close:hover{color:var(--ember);border-color:var(--ember)}

.journey-map-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin:20px 0 18px}
.journey-map-progress > span{font:500 .66rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.journey-map-track{height:5px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.journey-map-track span{display:block;height:100%;background:linear-gradient(90deg,var(--air),var(--water),var(--earth),var(--fire));border-radius:inherit}

.journey-stage-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;margin:0 0 24px;padding:0}
.journey-stage-rail::before{content:"";position:absolute;left:6%;right:6%;top:17px;height:1px;background:var(--rule-firm)}
.journey-stage-rail li{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--ink-faint)}
.journey-stage-dot{
  display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--rule-firm);border-radius:50%;
  background:var(--surface);font:500 .68rem/1 "JetBrains Mono",ui-monospace,monospace;
}
.journey-stage-rail b{display:block;font:600 .77rem/1.15 "Bricolage Grotesque",system-ui,sans-serif;color:inherit}
.journey-stage-rail small{display:block;margin-top:3px;font-size:.68rem;line-height:1.2;color:inherit}
.journey-stage-rail .is-complete{color:var(--earth)}
.journey-stage-rail .is-complete .journey-stage-dot{background:color-mix(in srgb,var(--earth) 14%,var(--surface));border-color:var(--earth)}
.journey-stage-rail .is-current{color:var(--accent)}
.journey-stage-rail .is-current .journey-stage-dot{background:var(--accent);border-color:var(--accent);color:var(--surface);box-shadow:0 0 0 5px var(--accent-wash)}

.journey-map-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:24px;align-items:start}
.journey-map-path{display:flex;flex-direction:column;gap:16px;min-width:0}
.journey-map-group{--group-color:var(--accent);position:relative;padding:14px 15px 15px;border-left:3px solid var(--group-color);background:color-mix(in srgb,var(--group-color) 5%,var(--ground))}
.journey-map-group.stage-0{--group-color:var(--gold)}
.journey-map-group.stage-1{--group-color:var(--water)}
.journey-map-group.stage-2{--group-color:var(--spirit)}
.journey-map-group.stage-3{--group-color:var(--ember)}
.journey-map-group-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
.journey-map-group-head b{font:600 .82rem/1.2 "Bricolage Grotesque",system-ui,sans-serif;color:var(--group-color)}
.journey-map-group-head span{font:500 .6rem/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.journey-map-nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.journey-node{
  --node-color:var(--accent);appearance:none;display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;position:relative;
  min-width:0;padding:10px 10px 11px;border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--ink);cursor:pointer;text-align:left;
}
.journey-node.realm-prologue{--node-color:var(--gold)}.journey-node.realm-air{--node-color:var(--air)}.journey-node.realm-water{--node-color:var(--water)}
.journey-node.realm-earth{--node-color:var(--earth)}.journey-node.realm-fire{--node-color:var(--fire)}.journey-node.realm-spirit{--node-color:var(--spirit)}.journey-node.realm-war{--node-color:var(--ember)}
.journey-node-number{font:500 .62rem/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--node-color)}
.journey-node b{display:block;font:600 .78rem/1.2 "Bricolage Grotesque",system-ui,sans-serif}
.journey-node small{display:block;margin-top:3px;color:var(--ink-faint);font-size:.68rem;line-height:1.25}
.journey-node-state{grid-column:2;font:500 .56rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint)}
.journey-node.is-mastered{border-left:3px solid var(--node-color);background:color-mix(in srgb,var(--node-color) 6%,var(--surface))}
.journey-node.is-current{border-color:var(--node-color);box-shadow:inset 0 0 0 1px var(--node-color);background:color-mix(in srgb,var(--node-color) 11%,var(--surface))}
.journey-node.is-ahead{opacity:1}
.journey-node:hover,.journey-node.is-selected{opacity:1;border-color:var(--node-color);transform:translateY(-1px)}
.journey-node.is-selected{box-shadow:0 0 0 3px color-mix(in srgb,var(--node-color) 20%,transparent)}
.journey-node.is-source::after,.journey-node.is-destination::after{
  position:absolute;right:7px;bottom:7px;padding:2px 5px;border-radius:10px;background:var(--surface-2);
  font:500 .52rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
}
.journey-node.is-source::after{content:"builds from";color:var(--water)}
.journey-node.is-destination::after{content:"leads to";color:var(--earth)}

.journey-map-detail{
  position:sticky;top:0;padding:22px;border:1px solid var(--rule);border-top:4px solid var(--accent);border-radius:7px;
  background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--accent) 5%,var(--surface-2)));
  box-shadow:0 16px 36px color-mix(in srgb,var(--shadow) 30%,transparent);
}
.journey-detail-status{display:inline-block;font:500 .61rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--realm-color,var(--accent))}
.journey-detail-number{margin:11px 0 5px;color:var(--ink-faint);font:500 .64rem/1.35 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.journey-map-detail h3{margin:0 0 20px;font-size:1.65rem;color:var(--ink)}
.journey-map-detail section{margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--rule)}
.journey-map-detail h4{margin:0 0 5px;font-size:.88rem;color:var(--ink)}
.journey-map-detail p{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.5}
.journey-helped{padding:13px 14px!important;border:0!important;border-left:3px solid var(--earth)!important;background:color-mix(in srgb,var(--earth) 7%,var(--surface))}
.journey-relations > h4{margin-bottom:10px}
.journey-relation-row{display:grid;grid-template-columns:76px 1fr;gap:10px;margin:8px 0;align-items:start}
.journey-relation-row > span{font:500 .58rem/1.6 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.journey-relation-row > div{display:flex;flex-wrap:wrap;gap:5px}
.journey-relation-row a{padding:3px 7px;border:1px solid var(--rule);border-radius:20px;color:var(--accent);font-size:.72rem;line-height:1.25;text-decoration:none}
.journey-relation-row a:hover{border-color:var(--accent)}
.journey-relation-row em{color:var(--ink-faint);font-size:.8rem}
.journey-open-lesson{display:block;padding:10px 12px;border-radius:4px;background:var(--ink);color:var(--surface);font:600 .78rem/1.2 "Bricolage Grotesque",system-ui,sans-serif;text-align:center;text-decoration:none}
.journey-open-lesson:hover{background:var(--accent)}

@media (max-width:820px){
  .journey-map-shell{padding:22px}
  .journey-map-body{grid-template-columns:1fr}
  .journey-map-detail{position:relative}
  .journey-stage-rail{grid-template-columns:repeat(2,1fr);row-gap:14px}
  .journey-stage-rail::before{display:none}
}
@media (max-width:540px){
  .journey-map-modal{width:calc(100% - 16px);max-height:94vh}
  .journey-map-shell{padding:17px}
  .journey-map-header p{display:none}
  .journey-map-header h2{font-size:1.7rem}
  .journey-map-progress{grid-template-columns:1fr;gap:8px}
  .journey-stage-rail li{justify-content:flex-start}
  .journey-map-nodes{grid-template-columns:1fr}
  .journey-map-fab{right:14px;bottom:72px;padding-right:9px}
  .journey-map-fab span{display:none}
}

@media (max-width:940px){
  .course-top{top:0}
  .mobile-nav{top:64px}
  .lesson-compact-toc{top:64px}
  .lesson-book-intro{padding-left:24px;padding-right:24px}
}
@media (max-width:700px){
  .lesson-step-nav{grid-template-columns:1fr 1fr}.lesson-step.map{grid-column:1/-1;grid-row:2}
  .technique-index-grid{grid-template-columns:1fr}
}

/* ============================================================
   Diagnostic lists. The lead-in is a reading, not just a bold
   phrase, so it carries the severity it describes.
   ============================================================ */
.signal-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.signal-list li{
  position:relative;margin:0;padding:12px 16px 12px 18px;
  border-radius:7px;line-height:1.6;
  background:color-mix(in srgb,var(--signal,var(--accent)) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--signal,var(--accent)) 26%,var(--rule));
  border-left:3px solid var(--signal,var(--accent));
}
.signal-list li > strong:first-child{
  display:inline-block;margin-right:7px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.66rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--signal,var(--accent));
  padding:3px 8px;border-radius:4px;vertical-align:2px;
  background:color-mix(in srgb,var(--signal,var(--accent)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--signal,var(--accent)) 32%,transparent);
}
.signal-good{--signal:var(--earth)}
.signal-warn{--signal:var(--fire)}
.signal-alarm{--signal:var(--ember)}

/* A term at the moment it is defined. Every lesson introduces its
   vocabulary this way, so the marker is the same everywhere. */
strong.term{
  color:var(--accent);
  box-shadow:inset 0 -0.42em 0 color-mix(in srgb,var(--accent) 14%,transparent);
  padding:0 .12em;border-radius:2px;
}
:root[data-theme="dark"] strong.term{
  box-shadow:inset 0 -0.42em 0 color-mix(in srgb,var(--accent) 22%,transparent);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) strong.term{
    box-shadow:inset 0 -0.42em 0 color-mix(in srgb,var(--accent) 22%,transparent);
  }
}

@media (max-width:820px){
  .signal-list li{padding:11px 13px 11px 15px}
  .signal-list li > strong:first-child{display:block;margin:0 0 6px;width:fit-content}
}


/* ============================================================
   Illustrated field guide: editorial titles, brass details,
   and deliberate surface contrast shared by all course pages.
   ============================================================ */
body{
  background:
    radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--gold) 12%,transparent),transparent 42rem),
    radial-gradient(ellipse at 100% 15rem,color-mix(in srgb,var(--water) 13%,transparent),transparent 48rem),
    var(--ground);
}
::selection{background:var(--gold);color:var(--ground)}
.course-top{
  border-top:0;border-image:none;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 35%,var(--rule));
  box-shadow:0 4px 24px color-mix(in srgb,var(--shadow) 22%,transparent);
}
.course-brand b{font-size:1.04rem}
.course-brand small{color:var(--gold);letter-spacing:.18em}
.course-crest{width:42px;height:42px;background:var(--ground)}
.theme-toggle,.course-lesson-menu > summary{border-radius:7px}
.course-books > a,.course-books > .journey-map-trigger{color:var(--ink-soft)}
.lesson-book-intro{margin-top:26px}
.lesson-book-intro .marker{letter-spacing:.18em;color:var(--realm-color)}
.lesson-head{
  min-height:300px;padding-top:70px;padding-bottom:38px;
  border:1px solid color-mix(in srgb,var(--realm-color) 44%,var(--rule));
  border-radius:16px;
  box-shadow:0 18px 40px color-mix(in srgb,var(--shadow) 28%,transparent);
}
.lesson-head::before{
  top:28px;width:54px;height:3px;
  background:var(--realm-color);box-shadow:62px 0 0 color-mix(in srgb,var(--realm-color) 24%,transparent);
}
.lesson-head::after{
  background:
    linear-gradient(0deg,color-mix(in srgb,var(--ground) 94%,transparent),transparent 85%),
    linear-gradient(90deg,var(--ground),color-mix(in srgb,var(--ground) 83%,transparent) 42%,color-mix(in srgb,var(--ground) 8%,transparent));
}
.lesson-head h2{
  font-family:Spectral,Georgia,serif;font-weight:600;
  font-size:clamp(2.25rem,4.6vw,3.35rem);line-height:1.12;letter-spacing:-.035em;max-width:24ch;
}
.lesson-head .num{
  align-self:flex-start;padding:5px 10px;margin-bottom:16px;
  border:1px solid color-mix(in srgb,var(--realm-color) 46%,var(--rule));border-radius:4px;
  background:color-mix(in srgb,var(--ground) 88%,transparent);letter-spacing:.15em;
}
.book:not(.lesson-book-intro){border-radius:14px 14px 0 0}
.book h2,.masthead h1{font-family:Spectral,Georgia,serif;font-weight:600}
.technique{border-radius:12px;margin-top:22px;margin-bottom:22px;box-shadow:none}
.technique .name{font-family:Spectral,Georgia,serif;font-size:1.5rem;font-weight:600}
.lesson-card{
  padding:28px;border-radius:14px;
  background:linear-gradient(130deg,color-mix(in srgb,var(--card-color) 6%,var(--surface)),var(--surface) 65%);
  box-shadow:0 14px 32px color-mix(in srgb,var(--shadow) 20%,transparent);
}
.lc-top{padding-bottom:15px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.lc-eyebrow{font-size:.7rem;letter-spacing:.12em}
.lc-contents{column-gap:24px}
.lc-contents li{padding:5px 0;margin-bottom:4px}
.lc-contents li::before{color:var(--card-color);font-size:.7rem}
.lc-contents a{color:var(--ink);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:.88rem;line-height:1.45}
.lc-bridge{border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--card-color) 6%,var(--ground))}
.lc-feeds{padding-top:16px;border-top:1px solid var(--rule)}
.lesson-compact-toc{border-radius:8px;box-shadow:0 5px 14px color-mix(in srgb,var(--shadow) 20%,transparent)}
.wrap > h3{margin-top:60px;padding-bottom:16px;font-size:1.72rem}
.wrap > h3::after{width:100%;height:1px;background:linear-gradient(90deg,var(--realm-color,var(--gold)) 0 54px,var(--rule) 54px 100%)}
.figure,.tablewrap{border-radius:10px;box-shadow:0 6px 20px color-mix(in srgb,var(--shadow) 15%,transparent)}
.figure{padding:24px;border-top:2px solid color-mix(in srgb,var(--realm-color,var(--accent)) 65%,var(--rule))}
th{color:var(--ink-soft);background:color-mix(in srgb,var(--realm-color,var(--gold)) 7%,var(--surface-2))}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 28%,transparent)}
.callout,.good-news,.keystone,.definition-callout,.bloom-panel{border-radius:10px}
.lesson-carry{
  padding:30px;border-radius:14px;border-left-width:1px;border-top:3px solid var(--realm-color,var(--gold));
  background:linear-gradient(120deg,color-mix(in srgb,var(--realm-color,var(--gold)) 10%,var(--surface)),var(--surface));
}
.lesson-carry h3{font-family:Spectral,Georgia,serif;font-size:1.85rem}
.lesson-step{background:var(--surface);border-radius:8px}
.lesson-step.next{background:var(--realm-color,var(--accent));color:var(--ground)!important;border-color:transparent}
.lesson-step.next:hover{color:var(--ground)!important;filter:brightness(1.08)}
.technique-index-card{border-radius:12px;padding:24px;background:linear-gradient(120deg,color-mix(in srgb,var(--realm-color) 8%,var(--surface)),var(--surface))}
.technique-number{padding:10px;border:1px solid var(--rule);border-radius:50%}
.journey-map-modal{border-radius:16px}
.journey-node,.journey-map-group{border-radius:8px}
.journey-map-fab{border-color:var(--gold);background:var(--surface)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media (min-width:760px){
  .technique{grid-template-columns:auto 1fr;grid-template-areas:"tag gloss" "name gloss";column-gap:28px}
  .technique .gloss{align-self:center;justify-self:end;border-left:1px solid var(--rule);padding-left:24px;max-width:38ch}
  .lesson-card{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .lesson-card > .lc-top,.lesson-card > .lc-feeds{grid-column:1/-1}
  .lesson-card > .lc-contents{grid-column:1;grid-row:2/4;columns:1;border-right:1px solid var(--rule);padding-right:24px}
  .lesson-card > .lc-bridge{grid-column:2;margin-top:0;padding:14px 18px}
  .lesson-card > .lc-objectives{grid-column:2;margin-top:16px;padding-top:16px}
}
@media (max-width:940px){
  .lesson-head{margin-left:20px;margin-right:20px;min-height:270px}
  .lesson-head::before{left:24px}
}
@media (max-width:620px){
  .lesson-head{margin-left:12px;margin-right:12px;padding:60px 20px 26px;min-height:260px;border-radius:12px}
  .lesson-head h2{font-size:2.15rem;max-width:19ch}
  .lesson-head::before{left:20px}
  .lesson-head::after{background:linear-gradient(90deg,color-mix(in srgb,var(--ground) 94%,transparent),color-mix(in srgb,var(--ground) 55%,transparent)),linear-gradient(0deg,var(--ground),transparent)}
  .lesson-card{padding:20px}
  .technique .name{font-size:1.35rem}
  .wrap > h3{font-size:1.48rem}
  .lesson-carry{padding:24px 20px}
}
@media print{
  body{background:white;color:black}
  .lesson-head,.lesson-card,.technique,.lesson-carry{box-shadow:none}
}

/* Narrow screens use the linked lesson itself instead of hover previews. */
@media (max-width:620px){.xref::after{display:none}}


/* One navigation row follows the takeaways on standalone lessons. */
.lesson-page .course-footer{margin-top:36px;padding-top:0;border-top:0}
.lesson-page .course-footer-meta{margin-top:0}
.lesson-step.previous{grid-column:1;grid-row:1}
.lesson-step.map{grid-column:2;grid-row:1}
.lesson-step.next{grid-column:3;grid-row:1}
@media (max-width:700px){
  .lesson-step.next{grid-column:2}
  .lesson-step.map{grid-column:1/-1;grid-row:2}
}