/* ============================================================
   stylemod.css  ·  RETAIL // RESET  ·  Module dossier style
   A branched look for the teaching modules. Same background and
   font family as the main site, new component system.
   Themes: terminal (blue master), codex (gold), void (cosmic).
   ============================================================ */

:root{
  --acc:#3d9bff; --acc2:#36e0d0; --gold:#ffcf4d; --mag:#ff5cc8; --violet:#9d6bff;
  --text:#eef3ff; --muted:#9fb0d6; --faint:#63739c;
  --bg1:#15203a; --bg2:#0c1426; --bg3:#070b16;
  --panel:rgba(16,26,48,.62); --panel2:rgba(10,16,32,.72);
  --bd:rgba(120,170,255,.20); --bd2:rgba(120,170,255,.34);
  --foil:linear-gradient(115deg,#ff5cc8,#ffcf4d 18%,#36e0d0 38%,#3d9bff 58%,#9d6bff 78%,#ff5cc8);
  --shadow:0 24px 60px rgba(0,0,0,.45);
}
html[data-theme="codex"]{
  --acc:#ffcf4d; --acc2:#ff9d3d; --gold:#ffe79a; --mag:#ff6fae; --violet:#c89bff;
  --text:#fff4dc; --muted:#cdb587; --faint:#8a713f;
  --bg1:#2a1d05; --bg2:#1a1304; --bg3:#0c0902;
  --panel:rgba(40,28,6,.6); --panel2:rgba(26,18,4,.72);
  --bd:rgba(255,207,77,.20); --bd2:rgba(255,207,77,.34);
}
html[data-theme="void"]{
  --acc:#b06bff; --acc2:#4de0ff; --gold:#ffd35e; --mag:#ff5cc8; --violet:#b06bff;
  --text:#f1e8ff; --muted:#b6a1dc; --faint:#6f549e;
  --bg1:#1c1040; --bg2:#110827; --bg3:#07041a;
  --panel:rgba(28,16,64,.6); --panel2:rgba(17,8,39,.72);
  --bd:rgba(176,107,255,.22); --bd2:rgba(176,107,255,.36);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -8%, var(--bg1), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg3));
  background-attachment:fixed;
  min-height:100vh; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* faint sacred-geometry watermark + scanlines (same background feel) */
.geo-wm{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; display:grid; place-items:center}
.geo-wm svg{width:min(90vw,900px); height:auto}
.geo-wm .cr{fill:none; stroke:var(--acc); stroke-width:1}
.geo-wm .ln{stroke:var(--acc2); stroke-width:.8}
.geo-wm .spin{animation:spin 200s linear infinite; transform-origin:center}
.geo-wm .spin-r{animation:spin 260s linear infinite reverse; transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.scan{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px)}

/* ---------------- NAV (kept consistent with the site) ---------------- */
#nav{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:18px;
  padding:14px 22px; transition:background .25s, border-color .25s;
  border-bottom:1px solid transparent}
#nav.solid{background:rgba(7,11,22,.82); backdrop-filter:blur(14px); border-bottom-color:var(--bd)}
.nav-mark .nav-home-link{font-family:"Bungee",sans-serif; font-size:22px; color:var(--text); text-decoration:none; letter-spacing:1px}
.nav-mark .s{background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav-links{display:flex; gap:4px; flex-wrap:wrap; margin-right:auto}
.nav-links a{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.03em; color:var(--muted);
  text-decoration:none; padding:7px 10px; border-radius:8px; transition:.18s}
.nav-links a:hover{color:var(--text); background:rgba(120,170,255,.10)}
.nav-links a.cta{color:var(--text); border:1px solid var(--bd2)}
.nav-links a[aria-current]{color:var(--acc)}
.nav-controls{display:flex; align-items:center; gap:10px}
.style-dropdown{position:relative}
.style-dropdown summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted);
  border:1px solid var(--bd); border-radius:9px; padding:7px 10px}
.style-dropdown summary::-webkit-details-marker{display:none}
.style-menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--panel2); border:1px solid var(--bd2);
  border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:2px; min-width:150px; box-shadow:var(--shadow)}
.style-menu button{text-align:left; cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--muted); background:none; border:0; border-radius:7px; padding:8px 10px}
.style-menu button:hover,.style-menu button.active{color:var(--text); background:rgba(120,170,255,.12)}
.nav-themes{display:flex; gap:4px}
.nav-themes button{cursor:pointer; width:34px; height:34px; border-radius:9px; font-size:15px;
  color:var(--muted); background:none; border:1px solid var(--bd)}
.nav-themes button.active{color:var(--acc); border-color:var(--bd2)}

/* ---------------- LAYOUT ---------------- */
.wrap{position:relative; z-index:2; width:min(1080px,92vw); margin-inline:auto}
main{position:relative; z-index:2}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--acc)}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none} .spin,.spin-r{animation:none}}

/* ---------------- HERO ---------------- */
.hero{padding:150px 0 40px; text-align:center}
.hero h1{font-family:"Cinzel",serif; font-weight:800; font-size:clamp(38px,7vw,84px); line-height:1.02; letter-spacing:.01em}
.hero h1 .gt{background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent}
.thesis{max-width:760px; margin:22px auto 0; font-size:clamp(17px,2vw,21px); color:#dbe6ff}
.kicker{display:inline-block; margin-top:26px; font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted); border:1px solid var(--bd);
  border-radius:999px; padding:9px 16px}
.hero-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.btn{font-family:"IBM Plex Mono",monospace; font-size:13px; letter-spacing:.05em; text-decoration:none;
  color:var(--text); border:1px solid var(--bd2); border-radius:11px; padding:11px 18px; transition:.18s}
.btn:hover{border-color:var(--acc); box-shadow:0 0 18px rgba(61,155,255,.35)}
.btn.foil{color:#07101f; background:var(--foil); border-color:transparent; font-weight:700}

/* ---------------- INLINE SPANS (the colour-coded vocabulary) ---------------- */
.k{color:var(--acc); font-weight:600}                 /* key idea */
.hot{color:var(--mag); font-weight:600}               /* danger / the lie */
.cool{color:var(--acc2); font-weight:600}             /* the fix / the good move */
.au{color:var(--gold); font-weight:600}               /* money / value */
.dim{color:var(--muted)}
.term{border-bottom:1px dashed var(--bd2); cursor:help}
.foilw{background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700}
b,strong{color:var(--text); font-weight:700}
em{color:#cfe0ff; font-style:italic}

/* ---------------- DIAGNOSIS BAND ---------------- */
.band{margin-top:30px; padding:34px; border:1px solid var(--bd); border-radius:20px;
  background:var(--panel); box-shadow:var(--shadow); position:relative; overflow:hidden}
.band::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--foil)}
.band h2{font-family:"Cinzel",serif; font-weight:700; font-size:clamp(23px,3.2vw,34px); line-height:1.12; margin-bottom:14px}
.band p{margin-top:12px; color:#dce6ff}
.band p:first-of-type{margin-top:0}

.cascade{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:22px}
.cascade .c{border:1px solid var(--bd); border-radius:14px; padding:16px 16px 18px; background:var(--panel2)}
.cascade .c h4{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:8px}
.cascade .c p{font-size:14.5px; color:#d3deff}

/* ---------------- UNIT (collapsible) ---------------- */
.units{margin-top:44px; display:flex; flex-direction:column; gap:16px}
.unit{border:1px solid var(--bd); border-radius:18px; background:var(--panel); overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.30); transition:border-color .2s}
.unit[open]{border-color:var(--bd2)}
.unit>summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:18px; padding:20px 22px; user-select:none}
.unit>summary::-webkit-details-marker{display:none}
.unit>summary:hover{background:rgba(120,170,255,.05)}
.u-num{font-family:"Bungee",sans-serif; font-size:20px; line-height:1; color:#0a1120;
  background:var(--foil); border-radius:12px; padding:12px 12px; min-width:58px; text-align:center}
.u-head h3{font-family:"Cinzel",serif; font-weight:700; font-size:clamp(19px,2.5vw,26px); line-height:1.12}
.u-head .u-issue{margin-top:4px; font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.05em; color:var(--muted)}
.u-chev{width:34px; height:34px; border:1px solid var(--bd2); border-radius:50%; display:grid; place-items:center; color:var(--acc); transition:transform .25s}
.unit[open] .u-chev{transform:rotate(180deg)}
.u-chev::before{content:"\25BE"} /* ▾ */
.unit-body{padding:4px 22px 26px; border-top:1px solid var(--bd)}
.unit-body>.step:first-child{margin-top:20px}

/* teaching steps: a label, then real prose */
.step{margin-top:20px}
.step>.tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:3px 9px; border-radius:7px; margin-bottom:9px;
  border:1px solid var(--bd2)}
.step.issue>.tag{color:var(--mag); border-color:var(--mag)}
.step.reach>.tag{color:var(--gold); border-color:var(--gold)}
.step.works>.tag{color:var(--acc); border-color:var(--acc)}
.step.dothis>.tag{color:var(--acc2); border-color:var(--acc2)}
.step p{color:#dbe6ff; font-size:16px}
.step p+p{margin-top:10px}

/* aside (fun fact / adlib), takehome, deeper links */
.aside{margin-top:18px; padding:14px 16px 14px 44px; border-radius:12px; background:var(--panel2);
  border:1px solid var(--bd); position:relative; font-size:15px; color:#d3deff}
.aside::before{content:"\2726"; position:absolute; left:16px; top:14px; color:var(--gold)} /* ✦ */
.aside.did::before{content:"\24D8"; color:var(--acc2)} /* ⓘ */
.aside b{color:var(--gold)}

.takehome{margin-top:20px; padding:18px 20px; border-radius:14px; background:var(--panel2);
  border:1px solid var(--bd2); border-left:4px solid transparent; border-image:var(--foil) 1;}
.takehome .lab{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc2); display:block; margin-bottom:6px}
.takehome p{font-size:16.5px; color:#eaf1ff}

.deeper{margin-top:18px; font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--muted)}
.deeper b{color:var(--gold); letter-spacing:.08em}
.deeper a{color:var(--acc); text-decoration:none; border-bottom:1px solid var(--bd2)}
.deeper a:hover{color:var(--text)}

/* ---------------- VISUAL OBJECTS (my arrangements) ---------------- */
.obj{margin-top:20px; padding:18px; border:1px solid var(--bd); border-radius:14px; background:var(--panel2)}
.obj .cap{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:12px; text-align:center}

/* chain of nodes (the body-harvest signal path) */
.chain{display:flex; align-items:stretch; gap:0; flex-wrap:wrap}
.chain .node{flex:1 1 130px; min-width:130px; border:1px solid var(--bd2); border-radius:12px; padding:12px 12px;
  background:var(--panel); position:relative}
.chain .node .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--acc); letter-spacing:.1em}
.chain .node b{display:block; margin:4px 0 3px; font-size:14px}
.chain .node span{font-size:12.5px; color:var(--muted)}
.chain .arw{align-self:center; color:var(--mag); font-size:18px; padding:0 8px}
@media (max-width:720px){.chain .arw{transform:rotate(90deg); padding:6px 0}}

/* market states ladder */
.states{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.states .st{border:1px solid var(--bd); border-radius:12px; padding:12px 14px; background:var(--panel)}
.states .st .lie{color:var(--mag); font-size:13px}
.states .st .ask{color:var(--acc2); font-size:13.5px; margin-top:6px}
.states .st .name{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:6px}

/* four ledgers grid */
.ledger{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.ledger .l{border:1px solid var(--bd); border-radius:12px; padding:14px; background:var(--panel)}
.ledger .l h5{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); margin-bottom:6px}
.ledger .l p{font-size:13.5px; color:#d3deff}

/* one family lenses */
.lens{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.lens .ln{border:1px solid var(--bd); border-radius:12px; padding:14px; background:var(--panel)}
.lens .ln .role{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.lens .ln b{display:block; font-family:"Cinzel",serif; font-size:18px; margin:2px 0 4px}
.lens .ln p{font-size:13.5px; color:#d3deff}

/* svg chart holder */
.chart{margin-top:20px; border:1px solid var(--bd); border-radius:14px; background:var(--panel2); padding:12px}
.chart svg{width:100%; height:auto; display:block}

/* ---------------- CLOSE + MINI FOOTER ---------------- */
.close{margin:52px 0 10px; text-align:center}
.close h2{font-family:"Cinzel",serif; font-weight:700; font-size:clamp(22px,3vw,32px)}
.close p{max-width:640px; margin:14px auto 0; color:#dce6ff}
.next-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px}

footer.mini{position:relative; z-index:2; margin-top:46px; border-top:1px solid var(--bd);
  background:rgba(7,11,22,.55)}
footer.mini .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:16px 0}
footer.mini .disc{font-size:12px; color:var(--muted); max-width:640px}
footer.mini .disc b{color:var(--text)}
footer.mini .mk{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--faint); white-space:nowrap}
footer.mini .mk a{color:var(--acc); text-decoration:none}

@media (max-width:640px){
  .unit>summary{grid-template-columns:auto 1fr; gap:12px}
  .u-chev{display:none}
  .hero{padding-top:130px}
}

/* ============================================================================
   MODULE 01 PATCH — original centred masthead, kept compact for the dossier.
   The content page, unit order and original components above are untouched.
   ============================================================================ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"brand links controls";
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:8px clamp(12px,2vw,24px);
  transition:background .25s, border-color .25s;
  border-bottom:1px solid transparent;
}
#nav.solid{background:rgba(7,11,22,.82);backdrop-filter:blur(14px);border-bottom-color:var(--bd)}
.nav-mark{grid-area:brand;justify-self:start;white-space:nowrap}
.nav-mark .nav-home-link{font-family:"Bungee",sans-serif;font-size:18px;color:var(--text);text-decoration:none;letter-spacing:1px}
.nav-mark .s{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-links{
  grid-area:links;
  justify-self:center;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:3px;
  margin:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  line-height:1;
  letter-spacing:.02em;
  color:var(--muted);
  text-decoration:none;
  padding:6px 8px;
  border-radius:8px;
  transition:.18s;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(120,170,255,.10)}
.nav-links a.cta{color:var(--text);border:1px solid var(--bd2)}
.nav-links a[aria-current]{color:var(--acc)}
.nav-controls{grid-area:controls;justify-self:end;display:flex;align-items:center;gap:6px;white-space:nowrap}
.style-dropdown{position:relative}
.style-dropdown summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--muted);border:1px solid var(--bd);border-radius:8px;padding:6px 8px}
.style-dropdown summary::-webkit-details-marker{display:none}
.style-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--panel2);border:1px solid var(--bd2);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:150px;box-shadow:var(--shadow)}
.style-menu button{text-align:left;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);background:none;border:0;border-radius:7px;padding:8px 10px}
.style-menu button:hover,.style-menu button.active{color:var(--text);background:rgba(120,170,255,.12)}
.nav-themes{display:flex;gap:3px}
.nav-themes button{cursor:pointer;width:28px;height:28px;border-radius:8px;font-size:13px;color:var(--muted);background:none;border:1px solid var(--bd)}
.nav-themes button.active{color:var(--acc);border-color:var(--bd2)}

/* These source additions are boxes, not replacements for existing steps. */
.aside.source-extension{border-color:var(--bd2);background:linear-gradient(135deg,rgba(61,155,255,.10),var(--panel2));box-shadow:inset 3px 0 0 var(--acc)}
.aside.source-extension::before{content:"+";font-family:"IBM Plex Mono",monospace;font-weight:700;color:var(--acc2)}

@media (max-width:1080px){
  #nav{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand controls" "links links";
    gap:5px 10px;
    padding:7px 12px;
  }
  .nav-links{width:100%;justify-content:center;padding:0 0 1px}
  .nav-links a{font-size:10.5px;padding:5px 7px}
}
@media (max-width:640px){
  .nav-mark .nav-home-link{font-size:16px}
  .nav-links{justify-content:flex-start}
  .nav-themes{display:none}
}
@media (max-width:420px){.style-dropdown summary [data-style-label]{display:none}}