/* 21 Oct 2026: the green Codex look for every older page template on www (answers, understand, library,
   watch, books, concepts, patterns, hubs, legal and the rest). Loaded last, after each page's own styles.
   The page layouts stay as they were; colours, type, header and footer follow green.css. */
:root{
  --bg:#FFFFFF!important;--ink:#17201B!important;--soft:#56645C!important;--line:#D8DED9!important;--copper:#1D3B2C!important;
  --card:#F2F4F1!important;--btn:#1D3B2C!important;--btnink:#FFFFFF!important;--deep:#13271D!important;
  --ground:#FFFFFF!important;--ground-2:#FFFFFF!important;--parch:#FFFFFF!important;--parch-2:#FFFFFF!important;
  --parch-ink:#17201B!important;--parch-soft:#3B4842!important;--gold:#1D3B2C!important;--gold-2:#13271D!important;
  --gold-soft:#56645C!important;--oxblood:#1D3B2C!important;--rule:#D8DED9!important;--rule-gold:#D8DED9!important;
  --ivory:#17201B!important;--ivory-soft:#56645C!important;
}
html{background:#FFFFFF}
body.lg{background-color:#FFFFFF!important;
  background-image:radial-gradient(ellipse 70% 420px at 80% 0,rgba(29,59,44,.08),rgba(29,59,44,0) 70%),url("threads.svg")!important;
  background-repeat:no-repeat,repeat!important;background-size:100% 100%,1200px 600px!important;background-attachment:scroll!important;
  color:var(--ink);font-family:var(--serif)!important;cursor:auto!important;overflow-x:hidden}
body.lg *{cursor:inherit}
body.lg a,body.lg button,body.lg summary,body.lg label,body.lg [role=button],body.lg input[type=submit]{cursor:pointer!important}
body.lg input[type=text],body.lg input[type=email],body.lg textarea{cursor:text!important}
.grain,.spine,#cursorSigil,.cursor,.cursor-ring{display:none!important}
body.lg h1,body.lg h2,body.lg h3,body.lg h4{font-family:var(--serif)!important;color:var(--deep);font-weight:500;text-wrap:balance}
body.lg .kicker,body.lg .eyebrow{font-family:var(--sans)!important;font-weight:600;color:var(--slate)!important;letter-spacing:.14em}
body.lg .kicker a,body.lg .eyebrow a{color:inherit!important}
body.lg main a:not(.btn):not(.btn2):not(.abtn){color:var(--green)}
body.lg .byline,body.lg .meta,body.lg .note,body.lg .howmade{font-family:var(--sans)}
body.lg .btn,body.lg .btn2,body.lg .abtn,body.lg a.button,body.lg button.btn{background:var(--green)!important;color:#FFFFFF!important;border-color:var(--green)!important;
  border-radius:4px!important;font-family:var(--sans)!important;font-weight:600;text-decoration:none!important;box-shadow:none!important}
body.lg .btn:hover,body.lg .btn2:hover,body.lg .abtn:hover{background:var(--deep)!important;border-color:var(--deep)!important}
body.lg .cta,body.lg .atlas,body.lg .card{border-radius:4px}
body.lg img{max-width:100%;height:auto}
body.lg pre,body.lg table{max-width:100%;overflow-x:auto}
/* the green header and footer, restated so no older rule leaks into them */
header.site{position:sticky!important;top:0;z-index:40;background:#FFFFFF!important;border:0;border-bottom:1px solid var(--rule)!important;margin:0!important;padding:0!important;max-width:none!important;width:auto!important;backdrop-filter:none!important;box-shadow:none!important}
header.site a.codexbar{display:block!important;text-align:center;padding:10px 16px!important;font-family:var(--sans)!important;font-size:15px!important;line-height:1.4;color:#DCE4DE!important;background:var(--deep)!important;text-decoration:none!important;border:0!important;margin:0!important;letter-spacing:0;text-transform:none}
header.site a.codexbar b{font-weight:600;letter-spacing:.08em;color:#FFFFFF}
header.site .bar{max-width:1160px!important;margin:0 auto!important;padding:14px 28px!important;display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;background:transparent!important;border:0!important;position:static!important;height:auto!important}
header.site .mark{display:inline-flex!important;align-items:center;gap:11px;text-decoration:none!important;color:var(--green)!important;border:0!important}
header.site .mark img{width:40px;height:40px;flex:none;display:block;margin:0}
header.site .brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
header.site .brand-name{font-family:var(--serif)!important;font-weight:500;font-size:21px;letter-spacing:.005em;color:var(--green);white-space:nowrap;text-transform:none}
header.site .brand-sub{font-family:var(--sans)!important;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-top:2px;white-space:nowrap}
header.site nav.top{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 24px;font-family:var(--sans)!important;font-size:15.5px;font-weight:500;max-width:none!important;margin:0!important;padding:0!important;color:var(--ink)}
header.site nav.top a{color:var(--ink)!important;text-decoration:none!important;margin:0!important;padding:0;border:0;font-size:inherit;letter-spacing:0;text-transform:none;background:none}
header.site nav.top a:hover{color:var(--green)!important;text-decoration:underline!important;text-underline-offset:4px}
header.site nav.top a.btn{color:#FFFFFF!important;background:var(--green)!important;padding:13px 24px!important;border-radius:4px;min-height:48px;display:inline-flex;align-items:center;font-weight:600;font-size:16px}
header.site nav.top a.btn:hover{background:var(--deep)!important;text-decoration:none!important}

@media (max-width:600px){header.site nav.top a.btn{display:none!important}}
@media (max-width:420px){
  header.site .bar{padding:12px 16px!important;gap:10px 12px}
  header.site .mark{gap:8px}
  header.site .mark img{width:34px;height:34px}
  header.site .brand-name{font-size:17px}
  header.site .brand-sub{font-size:10px;letter-spacing:.14em}
}
footer.site{display:block!important;background:var(--deep)!important;color:#C9D4CC!important;padding:56px 0 44px!important;margin:0!important;border:0!important;max-width:none!important;text-align:center;font-family:var(--sans)!important;font-size:15.5px!important;line-height:1.6;font-style:normal;opacity:1!important}
footer.site .wrap{max-width:760px!important;margin:0 auto!important;padding:0 28px!important;background:none!important;border:0!important}
footer.site .seal{display:block;width:64px;height:64px;margin:0 auto 18px}
footer.site .colophon{font-family:var(--serif)!important;font-size:17px!important;line-height:1.65;color:#DCE4DE!important;max-width:600px;margin:0 auto 22px!important;font-style:normal}
footer.site .fnav{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin:0 auto 24px!important;max-width:760px}
footer.site a{color:#FFFFFF!important;text-decoration:none!important;border:0!important}
footer.site a:hover{text-decoration:underline!important}
footer.site .folio{font-family:var(--serif)!important;font-size:16px;letter-spacing:.02em;color:#B9C6BD!important;text-transform:none}
@media (max-width:600px){footer.site .wrap{padding:0 20px!important}footer.site .fnav{gap:16px 22px}footer.site .fnav a{padding:4px 0}}
/* the short line each older page carried at its foot, kept as written */
footer.mini{display:block;margin:48px 0 0!important;padding:22px 0 0!important;border:0;border-top:1px solid var(--rule)!important;background:none!important;font-family:var(--sans)!important;font-size:16px!important;line-height:1.6;color:var(--body)!important;text-align:left;max-width:none}
footer.mini a{color:var(--green)!important}
html{scroll-padding-top:150px}
/* the older dark templates set the text on a framed parchment card; in the green look it is the white page itself */
body.lg main.wrap,body.lg .wrap.page,body.lg .page{box-shadow:none!important}
body.lg main.wrap::before,body.lg .page::before{display:none!important}
body.lg main,body.lg section,body.lg article{overflow-wrap:break-word}
body.lg .abtn{display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:13px 24px!important;font-size:16px!important;line-height:1.3;letter-spacing:.01em!important;text-transform:none!important}
body.lg .atlas{background:var(--panel)!important;border:1px solid var(--rule)!important;border-radius:4px}
body.lg section>canvas,body.lg .dark-passage canvas{display:none!important} /* the old gold star field */
body.lg .atlas{padding:22px 24px!important}
footer.site .wrap{box-shadow:none!important;position:static!important}
footer.site .wrap::before,footer.site .wrap::after{display:none!important}
body.lg .btn,body.lg .btn2,body.lg .abtn{text-transform:none!important;letter-spacing:.01em!important;font-size:16px!important}
body.lg svg.sig,body.lg .sigil-wrap{display:none!important} /* the old compass mark */
footer.site .colophon{display:block!important;letter-spacing:0!important;justify-content:normal!important;text-transform:none!important}
footer.mini{letter-spacing:0!important;text-transform:none!important}
body.lg .wrap{box-shadow:none!important}
body.lg .wrap::before{display:none!important}

/* 21 Oct: episode listen links sit apart */
.listen-hub .plat{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px}
.listen-hub audio{width:100%}


/* 21 Oct 2026 (Michael): on phones the menu sits behind a three-line button at the right of the name. */
.navbtn{display:none}
@media (max-width:760px){
  header.site .navbtn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;margin-left:auto;background:transparent;border:1px solid rgba(29,59,44,.25);border-radius:4px;cursor:pointer}
  header.site .navbtn span{display:block;height:2px;width:100%;background:#1D3B2C;border-radius:2px;transition:transform .2s,opacity .2s}
  header.site.navopen .navbtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.site.navopen .navbtn span:nth-child(2){opacity:0}
  header.site.navopen .navbtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.site nav.top.collapse{display:none!important}
  header.site.navopen nav.top.collapse{display:flex!important;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0;padding:6px 0 4px;border-top:1px solid rgba(29,59,44,.14);font-size:17px}
  header.site.navopen nav.top.collapse a{display:block!important;padding:13px 2px!important;border-bottom:1px solid rgba(29,59,44,.10)!important}
  header.site.navopen nav.top.collapse a.btn{display:flex!important;justify-content:center;margin-top:12px!important;border-bottom:0!important}
}
@media (prefers-reduced-motion:reduce){header.site .navbtn span{transition:none}}