*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0D0F14;--bg2:#161B24;--bg3:#1E2433;--gold:#C8A45A;--gold-rgb:200,164,90;--gold-dim:#8A6E37;--teal:#4EC9B0;--teal-rgb:78,201,176;--teal-dim:#2C7A6A;--text:#E8E4DC;--text-dim:#A8A49C;--border:rgba(var(--gold-rgb),0.2);--danger:#C85A5A;--nav-bg:rgba(13,15,20,.92);--modal-bg:#161B24;--input-bg:#1E2433;--skills-bg:#161B24;--card-shadow:0 8px 26px -16px rgba(0,0,0,.6);--card-shadow-hover:0 16px 40px -16px rgba(0,0,0,.7)}
body.light-mode{--bg:#ecdfc6;--bg2:#fbf5e8;--bg3:#f2e7d1;--gold:#9a6b3f;--gold-rgb:154,107,63;--gold-dim:#bb9468;--teal:#2f7d5e;--teal-rgb:47,125,94;--teal-dim:#5f9d83;--text:#3a3027;--text-dim:#6a5b44;--border:rgba(120,90,50,0.2);--danger:#a83b32;--nav-bg:rgba(19,17,24,0.94);--modal-bg:#fbf5e8;--input-bg:#f2e7d1;--skills-bg:#f4ebd7;--card-shadow:0 10px 30px -16px rgba(90,60,25,.35);--card-shadow-hover:0 20px 44px -18px rgba(90,60,25,.5)}
body.light-mode .btn-ghost{border-color:rgba(var(--gold-rgb),.5);color:var(--gold)}
body.light-mode .btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.08)}
body.light-mode .mobile-nav-item{color:var(--text-dim)}
body.light-mode .btn-primary{background:var(--gold);color:#fbf5e8;box-shadow:0 2px 14px rgba(var(--gold-rgb),.35)}
body.light-mode .hub-bg{background:radial-gradient(ellipse 70% 60% at 80% 50%,rgba(var(--teal-rgb),.1),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 60%,rgba(var(--gold-rgb),.12),transparent 55%)}
body.light-mode .hub-pattern{opacity:.04;}body.light-mode .hub-pattern,body.light-mode .hero-pattern{display:block;opacity:.055;background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(var(--gold-rgb),1) 39px,rgba(var(--gold-rgb),1) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(var(--gold-rgb),1) 39px,rgba(var(--gold-rgb),1) 40px)}
body.light-mode .skills-wrap{background:var(--skills-bg)}
body.light-mode .modal{background:var(--modal-bg)}
body.light-mode .mf input,body.light-mode .mf textarea,body.light-mode .mf select{background:var(--input-bg)}
body.light-mode .mobile-drawer{background:rgba(247,242,230,.99)}
body.light-mode .feat-item{background:var(--bg3)}
body.light-mode .sbw{background:rgba(120,90,50,.14)}
body.light-mode .ptag{background:rgba(120,90,50,.07);border-color:rgba(120,90,50,.18)}
body.light-mode .world-num{color:rgba(var(--gold-rgb),.28)}
body.light-mode .world-card:hover .world-num{color:rgba(var(--gold-rgb),.45)}
body.light-mode .note-inner::before{background:radial-gradient(circle,rgba(var(--gold-rgb),.07),transparent 70%)}
body.light-mode ::-webkit-scrollbar-track{background:var(--bg)}
body.light-mode ::-webkit-scrollbar-thumb{background:var(--gold-dim)}
/* ══ NIGHT ANCHORS (warm-celestial) ══
   nav, footer & .night-panel reset accent tokens to the night palette so all
   child components recolor automatically — keeps teal(logic)+gold(depth) intact. */
nav,footer,.night-panel{
  --bg2:#1f1c28;--bg3:#272232;
  --text:#ece6da;--text-dim:#a8a2b2;
  --gold:#cba65b;--gold-rgb:203,166,91;--gold-dim:#8a6e37;
  --teal:#54cdb4;--teal-rgb:84,205,180;--teal-dim:#2C7A6A;
  --border:rgba(203,166,91,.18);
}
footer{background:#13111a;color:var(--text)}
/* Starfield night panels (body-scoped so it beats single-class component backgrounds) */
body .night-panel{
  position:relative;background-color:#13111a;color:var(--text);overflow:hidden;
  background-image:
    radial-gradient(1.4px 1.4px at 16% 22%,rgba(255,248,228,.95),transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 13%,rgba(255,248,228,.7),transparent 60%),
    radial-gradient(1px 1px at 41% 58%,rgba(255,248,228,.55),transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 44%,rgba(255,248,228,.8),transparent 60%),
    radial-gradient(1px 1px at 28% 80%,rgba(255,248,228,.5),transparent 60%),
    radial-gradient(1px 1px at 90% 74%,rgba(255,248,228,.6),transparent 60%),
    radial-gradient(1.6px 1.6px at 54% 34%,rgba(203,166,91,.85),transparent 60%),
    radial-gradient(1px 1px at 74% 88%,rgba(203,166,91,.6),transparent 60%);
  background-repeat:no-repeat;
}
body .night-panel::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 80% 10%,rgba(84,205,180,.07),transparent 60%),radial-gradient(ellipse 60% 50% at 12% 90%,rgba(203,166,91,.08),transparent 60%)}
.night-panel>*{position:relative;z-index:1}
/* Card elevation — surfaces lift off the page */
.status-card,.world-card,.book-teaser-inner,.note-inner,.recent-inner,.pc,.vc,.stat,.mission-card{box-shadow:var(--card-shadow)}
.world-card,.book-teaser-inner,.pc,.vc,.stat{transition:border-color .35s,transform .35s,box-shadow .35s}
.world-card:hover,.book-teaser-inner:hover,.pc:hover,.vc:hover,.stat:hover{box-shadow:var(--card-shadow-hover)}
/* ICON BUTTONS — theme toggle + admin lock. Hand-drawn inline SVGs, not
   emoji, so they pick up the theme tokens via currentColor. */
.icon-btn{width:2.1rem;height:2.1rem;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border);border-radius:50%;color:var(--text-dim);font-size:.85rem;cursor:pointer;transition:border-color .2s,color .2s}
.icon-btn:hover,.icon-btn:focus-visible{border-color:var(--gold);color:var(--gold)}
.icon-btn svg{display:block}
.icon-btn .icon-sun,.icon-btn .icon-unlocked{display:none}
.icon-btn.is-dark .icon-moon{display:none}
.icon-btn.is-dark .icon-sun{display:block}
.icon-btn.is-unlocked .icon-locked{display:none}
.icon-btn.is-unlocked .icon-unlocked{display:block}
/* text+emoji admin button in the mobile drawer footer — a different usage
   than the circular icon-only .icon-btn in the header */
.lock-btn{background:none;border:1px solid var(--border);border-radius:4px;color:var(--text-dim);font-size:.85rem;cursor:pointer;padding:.35rem .6rem;transition:all .2s}
.lock-btn:hover{border-color:var(--gold);color:var(--gold)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Lato',sans-serif;font-weight:300;line-height:1.7;overflow-x:hidden}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px}
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.4rem 4rem;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
/* Global light-mode nav — parchment header on every page. Per-page rules
   (home/about/library/etc.) carry higher specificity and still override this. */
body.light-mode nav{
  --text:#3a3027;--text-dim:#7a6a52;--border:rgba(120,90,50,.22);
  background:rgba(244,234,211,.97);border-bottom-color:rgba(120,90,50,.18);
}
body.light-mode nav .nav-logo{color:var(--gold)}
body.light-mode nav .nav-center a{color:#7a6a52}
body.light-mode nav .nav-center a:hover,
body.light-mode nav .nav-center a.active{color:var(--gold)}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;letter-spacing:.1em;color:var(--gold);cursor:pointer;text-shadow:0 0 20px rgba(var(--gold-rgb),.3);text-decoration:none}
.nav-center{display:flex;gap:2rem;list-style:none}
.nav-center a{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#908C86;cursor:pointer;position:relative;padding-bottom:4px;transition:color .25s;text-decoration:none}
.nav-center a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}
.nav-center a:hover,.nav-center a.active{color:var(--gold)}
.nav-center a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:.8rem}
.admin-badge{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);background:rgba(var(--teal-rgb),.1);border:1px solid var(--teal-dim);padding:.25rem .7rem;border-radius:3px;display:none}
.admin-badge.visible{display:block}
/* admin-only Scriptorium nav entry (injected by init.js) */
.nav-scriptorium{display:none}
body.is-admin .nav-scriptorium{display:block}
.nav-center .nav-scriptorium a{color:var(--gold)}
.nav-center .nav-scriptorium a::after{background:var(--gold)}
/* .mobile-nav-item{display:block} (below) beats the hide rule above at
   equal specificity by source order — pin it back down here. */
.mobile-drawer .nav-scriptorium{display:none}
body.is-admin .mobile-drawer .nav-scriptorium{display:block}
/* HAMBURGER */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:none;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:border-color .2s;flex-shrink:0}
.hamburger:hover{border-color:var(--gold)}
.hamburger span{display:block;height:1px;background:var(--text-dim);border-radius:1px;transition:all .35s cubic-bezier(.4,0,.2,1);transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);background:var(--gold)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);background:var(--gold)}
.mobile-drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;background:rgba(13,15,20,.98);backdrop-filter:blur(24px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6rem 2rem 3rem;transform:translateY(-100%);transition:transform .45s cubic-bezier(.4,0,.2,1);pointer-events:none;gap:0}
.mobile-drawer.open{transform:translateY(0);pointer-events:all}
.mobile-nav-item{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,7vw,3rem);font-weight:300;color:var(--text-dim);cursor:pointer;padding:.4rem 2rem;transition:color .2s;position:relative;letter-spacing:.02em;text-align:center;text-decoration:none;display:block}
.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--gold)}
.mobile-nav-item::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:1px;background:var(--gold);transition:width .3s}
.mobile-nav-item:hover::after{width:60%}
.mobile-drawer-footer{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%}
.mobile-drawer-links{display:flex;gap:2rem}
.mobile-drawer-links a{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color .2s}
.mobile-drawer-links a:hover{color:var(--teal)}
main{display:block;padding-top:80px;min-height:100vh;position:relative;z-index:1}
.section-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem;display:flex;align-items:center;gap:1rem}
.section-label::after{content:'';display:block;height:1px;width:60px;background:var(--teal-dim)}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.5rem);font-weight:300;line-height:1.15;margin-bottom:2.5rem}
.section-title em{font-style:italic;color:var(--gold)}
.page-hero{padding:6rem 4rem 5rem;max-width:1200px;margin:0 auto;border-bottom:1px solid var(--border)}
.page-hero-sub{font-size:1.05rem;color:var(--text-dim);max-width:580px;margin-top:-.5rem}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2.2rem;background:var(--gold);color:#0D0F14;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;border-radius:3px;border:none;cursor:pointer;transition:opacity .2s,transform .2s,box-shadow .2s;text-decoration:none;font-weight:500;box-shadow:0 2px 12px rgba(var(--gold-rgb),.25)}
.btn-primary:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 4px 20px rgba(var(--gold-rgb),.35)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2.2rem;border:1px solid rgba(var(--gold-rgb),.5);color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;border-radius:3px;background:transparent;cursor:pointer;transition:border-color .2s,color .2s,transform .2s,background .2s;text-decoration:none}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.08);transform:translateY(-2px)}
.btn-sm{padding:.4rem 1rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;border-radius:3px;border:1px solid var(--border);color:var(--text-dim);background:transparent;cursor:pointer;transition:all .2s}
.btn-sm:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm.danger:hover{border-color:var(--danger);color:var(--danger)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;will-change:opacity,transform}
.reveal.visible{opacity:1;transform:translateY(0)}
/* ── SITE FOOTER ── expanded sitemap across all pages ── */
footer{
  position:relative;z-index:1;
  border-top:1px solid var(--border);margin-top:5rem;
  padding:3.6rem 4rem 1.8rem;
  font-family:'JetBrains Mono',monospace;color:var(--text-dim);
}
.footer-grid{
  display:grid;grid-template-columns:minmax(240px,1.3fr) 2fr;
  gap:2.8rem 2rem;max-width:1200px;margin:0 auto;
}
.footer-brand{display:flex;flex-direction:column;gap:1.1rem;max-width:360px}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:500;letter-spacing:.04em;color:var(--gold);text-decoration:none;line-height:1}
.footer-tagline{font-family:'Lato',sans-serif;font-size:.82rem;line-height:1.65;letter-spacing:0;color:var(--text-dim);margin:0;max-width:300px}
.footer-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.footer-col{display:flex;flex-direction:column;gap:.65rem}
.footer-col-title{font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 .25rem}
.footer-col a{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.07em;color:var(--text-dim);text-decoration:none;cursor:pointer;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-base{
  max-width:1200px;margin:2.6rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  font-size:.6rem;letter-spacing:.12em;color:var(--text-dim);
}
.footer-base-meta{letter-spacing:.26em;text-transform:uppercase;opacity:.65}
/* legacy single-row link list (still used by deck pages if any remain) */
.footer-links{display:flex;gap:2rem}
.footer-links a,.footer-links span{color:var(--text-dim);text-decoration:none;cursor:pointer;transition:color .2s}
.footer-links a:hover,.footer-links span:hover{color:var(--gold)}
.admin-only{display:none!important}.is-admin .admin-only{display:inline-flex!important}
.admin-only.blk{display:none!important}.is-admin .admin-only.blk{display:block!important}
.non-admin-only{display:block}.is-admin .non-admin-only{display:none!important}
.toast{position:fixed;top:5rem;right:1.5rem;padding:.8rem 1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;color:var(--text);z-index:1000;opacity:0;transform:translateY(-10px);transition:all .3s;pointer-events:none}
.toast.visible{opacity:1;transform:translateY(0)}.toast.success{border-color:var(--teal-dim);color:var(--teal)}.toast.error{border-color:var(--danger);color:var(--danger)}
.loading-spinner{display:inline-block;width:32px;height:32px;vertical-align:middle;margin-right:.4rem;position:relative}
.loading-spinner::before{content:'';display:block;width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
/* Constellation loader SVG injected via JS */
.const-loader{display:inline-flex;align-items:center;gap:.8rem;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.const-loader svg .star-pulse{animation:starPulse 1.4s ease-in-out infinite}
.const-loader svg .star-pulse:nth-child(2){animation-delay:.2s}
.const-loader svg .star-pulse:nth-child(3){animation-delay:.4s}
.const-loader svg .star-pulse:nth-child(4){animation-delay:.6s}
.const-loader svg .star-pulse:nth-child(5){animation-delay:.8s}
.const-loader svg .orbit-ring{animation:orbitSpin 2.2s linear infinite;transform-origin:32px 32px}
.const-loader svg .orbit-ring-2{animation:orbitSpin 3.5s linear infinite reverse;transform-origin:32px 32px}
@keyframes starPulse{0%,100%{opacity:.25;r:1.5}50%{opacity:1;r:2.8}}
@keyframes rainbowFadeOut{
  0%  {--teal:#f472b6;--gold:#f472b6;--teal-dim:#c44d90;--gold-dim:#c44d90}
  100%{--teal:#4EC9B0;--gold:#C8A45A;--teal-dim:#2C7A6A;--gold-dim:#8A6E37}
}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
/* HOME */
#hero{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;padding:6rem 4rem 4rem}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 80% 50%,rgba(var(--teal-rgb),.06),transparent 60%),radial-gradient(ellipse 50% 50% at 20% 60%,rgba(var(--gold-rgb),.07),transparent 55%)}
.hero-pattern{position:absolute;inset:0;opacity:.045;background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,var(--teal) 39px,var(--teal) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,var(--teal) 39px,var(--teal) 40px)}
.hero-content{position:relative;z-index:2;max-width:900px;text-align:center}
.hero-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.25em;color:var(--teal);text-transform:uppercase;margin-bottom:1.5rem}
.hero-name{font-family:'Cormorant Garamond',serif;font-size:clamp(3.5rem,8vw,7.5rem);font-weight:300;line-height:1;margin-bottom:1.2rem}
.hero-name em{font-style:italic;color:var(--gold)}
.hero-tagline{font-size:1.05rem;color:var(--text-dim);max-width:560px;margin:0 auto 2.5rem}
.hero-pills{display:inline-flex;gap:1px;margin-bottom:3rem}
.pill{padding:.45rem 1.4rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.pill.tech{background:rgba(var(--teal-rgb),.1);border:1px solid var(--teal-dim);color:var(--teal);border-radius:4px 0 0 4px}
.pill.design{background:rgba(var(--gold-rgb),.1);border:1px solid var(--gold-dim);color:var(--gold);border-radius:0 4px 4px 0}
.hero-cta{display:inline-flex;gap:1rem}
.scroll-hint{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.2em;color:var(--text-dim)}
.scroll-line{width:1px;height:48px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollPulse 2s infinite}
.preview-section{padding:6rem 4rem;max-width:1200px;margin:0 auto;border-top:1px solid var(--border)}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem}
.pc{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:2rem;cursor:pointer;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.pc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .4s}
.pc:hover{border-color:var(--gold);transform:translateY(-4px)}.pc:hover::after{transform:scaleX(1)}
.pc-icon{font-size:1.5rem;margin-bottom:1rem;display:block}
.pc-title{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;color:var(--text);margin-bottom:.5rem}
.pc-desc{font-size:.88rem;color:var(--text-dim);line-height:1.6}
.pc-link{display:inline-block;margin-top:1.2rem;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);transition:color .2s}
.pc:hover .pc-link{color:var(--gold)}
/* HOME — REDESIGNED HUB */
.hub-hero{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:5rem;padding:7rem 5rem 5rem;max-width:1400px;margin:0 auto;position:relative}
.hub-bg{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 65% 55% at 75% 45%,rgba(var(--teal-rgb),.055),transparent 60%),radial-gradient(ellipse 50% 50% at 18% 65%,rgba(var(--gold-rgb),.065),transparent 55%)}
.hub-pattern{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.038;background-image:repeating-linear-gradient(0deg,transparent,transparent 39px,var(--teal) 39px,var(--teal) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,var(--teal) 39px,var(--teal) 40px)}
.hub-hero-left{position:relative;z-index:2}
.hub-welcome{font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,1.4vw,1.3rem);font-weight:300;font-style:italic;color:var(--text-dim);letter-spacing:.08em;margin-bottom:1.2rem;opacity:0;animation:fadeUp .8s .15s forwards}
.hub-headline{font-family:'Cormorant Garamond',serif;font-size:clamp(3rem,5.5vw,6rem);font-weight:300;line-height:1.05;margin-bottom:1.8rem;opacity:0;animation:fadeUp .9s .3s forwards}
.hub-headline em{font-style:italic;color:var(--gold)}
.hub-name{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);margin-bottom:2rem;display:flex;align-items:center;gap:.8rem;opacity:0;animation:fadeUp .9s .5s forwards}
.hub-name::before{content:'';display:block;width:32px;height:1px;background:var(--teal-dim)}
.hub-bio{font-size:1.05rem;color:var(--text-dim);line-height:1.85;max-width:520px;margin-bottom:2.5rem;opacity:0;animation:fadeUp .9s .65s forwards}
.hub-bio strong{color:var(--text);font-weight:400}
.hub-cta{display:flex;gap:1rem;flex-wrap:wrap;opacity:0;animation:fadeUp .9s .8s forwards}
.hub-hero-right{position:relative;z-index:2;opacity:0;animation:fadeUp 1s .5s forwards}
.status-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:2rem;position:relative;overflow:hidden}
.status-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--teal),var(--gold))}
.status-header{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--teal);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem}
.status-dot{width:6px;height:6px;background:var(--teal);border-radius:50%;animation:pulse 2.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.status-items{display:flex;flex-direction:column;gap:0}
.status-item{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 0;border-bottom:1px solid rgba(var(--gold-rgb),.1)}
.status-item:last-child{border-bottom:none;padding-bottom:0}
.si-label{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);min-width:72px;margin-top:.2rem;flex-shrink:0}
.si-value{font-size:.9rem;color:var(--text);line-height:1.5}
.si-value em{font-style:italic;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:1rem}
.si-pill{display:inline-block;padding:.15rem .6rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;border:1px solid var(--teal-dim);color:var(--teal);background:rgba(var(--teal-rgb),.08);margin-left:.3rem}
.si-pill.gold{border-color:var(--gold-dim);color:var(--gold);background:rgba(var(--gold-rgb),.08)}
/* WORLDS */
.worlds-section{max-width:1200px;margin:0 auto;padding:5rem 4rem 2rem;border-top:1px solid var(--border)}
.worlds-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:3.5rem;flex-wrap:wrap;gap:1rem}
.worlds-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:1.5rem}
.world-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:2.5rem;cursor:pointer;position:relative;overflow:hidden;transition:border-color .35s,transform .35s;text-decoration:none;color:var(--text);display:block}
.world-card:hover{border-color:var(--gold);transform:translateY(-5px)}
.world-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .45s}
.world-card:hover::after{transform:scaleX(1)}
.world-card.span2{grid-column:span 2}
.world-num{font-family:'Cormorant Garamond',serif;font-size:5rem;font-weight:300;line-height:1;color:rgba(var(--gold-rgb),.22);position:absolute;top:1rem;right:1.5rem;pointer-events:none;transition:color .35s}
.world-card:hover .world-num{color:rgba(var(--gold-rgb),.38)}
.world-icon{font-size:1.4rem;margin-bottom:1rem;display:block}
.world-tag{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem}
.world-tag.gold{color:var(--gold)}
.world-title{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:300;line-height:1.15;color:var(--text);margin-bottom:.8rem}
.world-title em{font-style:italic;color:var(--gold)}
.world-desc{font-size:.9rem;color:var(--text-dim);line-height:1.7;max-width:460px;margin-bottom:1.5rem}
.world-link{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);transition:color .2s;display:inline-flex;align-items:center;gap:.4rem}
.world-card:hover .world-link{color:var(--gold)}
/* NOTE */
.note-section{max-width:1200px;margin:0 auto;padding:4rem 4rem 5rem}
.note-inner{background:var(--bg2);border:1px solid var(--border);border-left:2px solid var(--gold);border-radius:0 10px 10px 0;padding:3rem 3.5rem;position:relative;overflow:hidden}
.note-inner::before{content:'';position:absolute;top:0;right:0;width:200px;height:200px;background:radial-gradient(circle,rgba(var(--gold-rgb),.04),transparent 70%);pointer-events:none}
.note-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.note-text{font-family:'Cormorant Garamond',serif;font-size:clamp(1.25rem,2vw,1.55rem);font-weight:300;font-style:italic;line-height:1.75;color:var(--text-dim);max-width:780px}
.note-text strong{color:var(--text);font-style:normal;font-weight:400}
.note-sig{margin-top:1.5rem;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
/* DUAL IDENTITY */
.dual-bar{display:flex;align-items:stretch;gap:0;margin:2rem 0 2.5rem;max-width:480px}
.dual-half{flex:1;padding:.7rem 1.2rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:.55rem}
.dual-half.left{background:rgba(var(--teal-rgb),.07);border:1px solid var(--teal-dim);border-right:none;border-radius:4px 0 0 4px;color:var(--teal)}
.dual-half.right{background:rgba(var(--gold-rgb),.07);border:1px solid var(--gold-dim);border-radius:0 4px 4px 0;color:var(--gold)}
.dual-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.dual-half.left .dual-dot{background:var(--teal)}
.dual-half.right .dual-dot{background:var(--gold)}
/* BOOK TEASER */
.book-teaser{max-width:1200px;margin:0 auto;padding:0 4rem 1rem;text-decoration:none;color:var(--text);display:block}
.book-teaser-inner{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:2.5rem 3rem;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3rem;position:relative;overflow:hidden;cursor:pointer;transition:border-color .3s,transform .3s}
.book-teaser-inner:hover{border-color:var(--gold);transform:translateY(-3px)}
.book-teaser-inner::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--gold),var(--gold-dim))}
.book-teaser-inner::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 90% 50%,rgba(var(--gold-rgb),.04),transparent 70%);pointer-events:none}
.bt-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;display:flex;align-items:center;gap:.6rem}
.bt-eyebrow::before{content:'✦';font-size:.55rem}
.bt-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.4rem,2.5vw,2rem);font-weight:300;font-style:italic;color:var(--text);line-height:1.2;margin-bottom:.6rem}
.bt-desc{font-size:.88rem;color:var(--text-dim);line-height:1.65;max-width:560px}
.bt-cta{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.bt-cta-arrow{font-size:1.4rem;color:var(--gold-dim)}
/* RECENTLY ADDED */
.recent-strip{max-width:1200px;margin:0 auto;padding:1.5rem 4rem 2rem}
.recent-inner{display:flex;align-items:center;gap:1.5rem;padding:1.2rem 1.8rem;background:var(--bg2);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap}
.recent-label{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;flex-shrink:0}
.recent-dot{width:4px;height:4px;border-radius:50%;background:var(--teal);flex-shrink:0}
.recent-source{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;padding:.2rem .65rem;border-radius:3px;flex-shrink:0}
.recent-source.lib{border:1px solid var(--gold-dim);color:var(--gold);background:rgba(var(--gold-rgb),.08)}
.recent-source.lab{border:1px solid var(--teal-dim);color:var(--teal);background:rgba(var(--teal-rgb),.08)}
.recent-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-date{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:var(--text-dim);white-space:nowrap;margin-left:auto}
.recent-link{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);cursor:pointer;white-space:nowrap;transition:color .2s}
.recent-link:hover{color:var(--gold)}
.status-admin-bar{display:flex;justify-content:flex-end;margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(var(--gold-rgb),.1)}
/* CONNECT STRIP */
.connect-strip{max-width:1200px;margin:0 auto;padding:2rem 4rem 5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.connect-text{font-size:1rem;color:var(--text-dim)}
.connect-text strong{color:var(--text);font-weight:400}
.connect-btns{display:flex;gap:1rem}
/* ABOUT */
.about-section{max-width:1200px;margin:0 auto;padding:5rem 4rem;border-bottom:1px solid var(--border)}
.about-grid{display:flex;flex-direction:column;gap:2.5rem}
.about-lower{display:grid;grid-template-columns:1fr 320px;gap:3.5rem;align-items:start}
.about-text p{color:var(--text-dim);margin-bottom:1.2rem;font-size:1.02rem}
.about-text p strong{color:var(--text);font-weight:400}
.pull-quote{border-left:2px solid var(--gold);padding-left:1.5rem;margin:2rem 0;font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-style:italic;color:var(--gold);line-height:1.5}
.stats-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;overflow:visible;position:relative;z-index:200}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:1.8rem 1.5rem;position:relative;overflow:visible;transition:border-color .3s,transform .3s;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
.stat:hover{border-color:var(--gold);transform:translateY(-3px)}
.stat::before{content:'';position:absolute;top:0;left:0;width:3px;height:calc(100% - 0px);border-radius:3px 0 0 3px}
.stat.g::before{background:var(--gold)}.stat.t::before{background:var(--teal)}
.stat-num{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:300;line-height:1;color:var(--gold)}
.stat.t .stat-num{color:var(--teal)}
.stat-lbl{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);line-height:1.4;margin-top:.35rem}
.vision-section{max-width:1200px;margin:0 auto;padding:5rem 4rem;border-bottom:1px solid var(--border)}
.vision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.vc{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:2rem;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.vc:hover{border-color:var(--gold);transform:translateY(-4px)}
.vc::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gold)}
.vc.t::before{background:var(--teal)}
.vc-icon{font-size:1.6rem;margin-bottom:1rem;display:block}
.vc-title{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:400;color:var(--text);margin-bottom:.6rem}
.vc-desc{font-size:.86rem;color:var(--text-dim);line-height:1.65}
.vision-note{margin-top:3rem;padding:1.5rem 2rem;background:rgba(var(--gold-rgb),.05);border:1px solid var(--border);border-left:2px solid var(--gold);border-radius:0 6px 6px 0;font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-style:italic;color:var(--text-dim);line-height:1.65}
.vision-note strong{color:var(--gold);font-style:normal;font-weight:400}
.skills-wrap{background:var(--bg2);padding:6rem 0}
.skills-inner{max-width:1200px;margin:0 auto;padding:0 4rem}
.skills-cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem}
.scol-lbl{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:2rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.scol-lbl.tech{color:var(--teal)}.scol-lbl.design{color:var(--gold)}
.skill-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.skill-name{font-size:.9rem;color:var(--text)}
.sbw{width:160px;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.sb{height:100%;border-radius:2px;width:0;transition:width 1.2s cubic-bezier(.17,.67,.35,1)}
.sb.tech{background:linear-gradient(90deg,var(--teal-dim),var(--teal))}.sb.design{background:linear-gradient(90deg,var(--gold-dim),var(--gold))}
.skill-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.5rem}
.stag{padding:.3rem .9rem;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.1em;border-radius:3px;border:1px solid}
.stag.tech{border-color:var(--teal-dim);color:var(--teal);background:rgba(var(--teal-rgb),.05)}
.stag.design{border-color:var(--gold-dim);color:var(--gold);background:rgba(var(--gold-rgb),.05)}
/* PROJECTS */
/* PROJECTS */
.proj-outer{max-width:1200px;margin:0 auto;padding:3rem 4rem 6rem}
.proj-featured{background:var(--bg2);border:1px solid rgba(var(--gold-rgb),.3);border-radius:12px;overflow:hidden;margin-bottom:4rem;position:relative;isolation:isolate}
.proj-featured::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--teal))}
.proj-featured-banner{height:160px;position:relative;overflow:hidden}
.proj-featured-banner svg{position:absolute;inset:0;width:100%;height:100%}
.proj-featured-badge{position:absolute;top:1rem;left:1.4rem;font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:rgba(13,15,20,.8);border:1px solid rgba(var(--gold-rgb),.3);padding:.25rem .6rem;border-radius:2px}
.proj-featured-body{padding:2.5rem 3rem 3rem;display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:start}
.proj-featured-body--full{grid-template-columns:1fr}
.proj-featured-right{display:flex;flex-direction:column;gap:1rem;align-self:stretch}
.proj-featured-title{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:300;line-height:1.1;margin-bottom:1rem}
.proj-featured-title em{font-style:italic;color:var(--gold)}
.proj-featured-desc{font-size:.95rem;color:var(--text-dim);line-height:1.75;margin-bottom:1.8rem}
.proj-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem}
.proj-link-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.45rem 1rem;border-radius:3px;text-decoration:none;transition:all .2s;border:1px solid}
.proj-link-btn.github{color:var(--text-dim);border-color:var(--border)}.proj-link-btn.github:hover{color:var(--text);border-color:var(--text-dim)}
.proj-link-btn.figma{color:#A78BFA;border-color:rgba(167,139,250,.3)}.proj-link-btn.figma:hover{background:rgba(167,139,250,.08)}
.proj-link-btn.demo{color:var(--teal);border-color:rgba(var(--teal-rgb),.3)}.proj-link-btn.demo:hover{background:rgba(var(--teal-rgb),.08)}
.proj-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.ptag{padding:.25rem .7rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:var(--text-dim)}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.feat-item{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem;background:var(--bg3);border-radius:6px;border:1px solid var(--border)}
.fi{font-size:1.1rem;flex-shrink:0;margin-top:.1rem}
.fi-lbl{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.25rem}
.fi-desc{font-size:.84rem;color:var(--text-dim);line-height:1.5}
.filter-bar{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:3rem}
.fb{padding:.4rem 1.1rem;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;border-radius:3px;border:1px solid var(--border);color:var(--text-dim);background:transparent;cursor:pointer;transition:all .2s}
.fb:hover,.fb.active{border-color:var(--gold);color:var(--gold);background:rgba(var(--gold-rgb),.08)}
.proj-grid{display:flex;flex-direction:column;gap:1.2rem}
.pcard{background:var(--bg2);border-radius:8px;overflow:hidden;transition:transform .25s,box-shadow .25s;display:grid;grid-template-columns:200px 1fr 200px;box-shadow:0 2px 12px rgba(0,0,0,.25);min-height:130px}
.pcard:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.pcard-banner{position:relative;overflow:hidden;min-height:130px}
.pcard-banner svg,.pcard-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard-cat{position:absolute;bottom:.6rem;left:.8rem;font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;padding:.15rem .4rem;border-radius:2px;border:1px solid;z-index:2}
.pcard-body{padding:1.4rem 2rem;display:flex;flex-direction:column;justify-content:center}
.pcard-title{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:400;color:var(--text);margin-bottom:.3rem;line-height:1.2}
.pcard-subtitle{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.6rem}
.pcard-desc{font-size:.87rem;color:var(--text-dim);line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-side{padding:1.4rem 1.6rem 1.4rem 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:.8rem;min-width:180px}
.pcard-tags{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end}
.pcard-links{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.pcard-admin{display:flex;gap:.4rem}
@media(max-width:700px){.pcard{grid-template-columns:1fr}.pcard-banner{height:80px}.pcard-side{align-items:flex-start;padding:0 1.2rem 1.2rem}}

.builder-card-inner{display:flex;gap:0;align-items:stretch;height:100%;padding-right:80px}
.builder-card-content{flex:1;display:flex;flex-direction:column}
.builder-highlight{width:220px;flex-shrink:0;margin:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:opacity .3s;align-self:flex-start}
.builder-highlight-banner{height:110px;position:relative;flex-shrink:0}
.builder-highlight-banner svg{position:absolute;inset:0;width:100%;height:100%}
.builder-highlight-body{padding:1.1rem 1.2rem;flex:1;display:flex;flex-direction:column}
.builder-highlight-label{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem}
.builder-highlight-title{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:var(--text);line-height:1.25;margin-bottom:.5rem}
.builder-highlight-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.8rem}
.builder-highlight-links{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto}
.builder-highlight-link{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;padding:.2rem .5rem;border:1px solid var(--border);border-radius:2px;transition:all .2s}
.builder-highlight-link:hover{color:var(--teal);border-color:rgba(var(--teal-rgb),.4)}
@media(max-width:768px){
  .builder-card-inner{display:block}
  .builder-highlight{
    width:100%;margin:1rem 0 0;
    border:1px solid var(--border);border-radius:8px;
    flex-direction:row!important;
    max-height:80px;
  }
  .builder-highlight-banner{
    width:100px;height:auto;flex-shrink:0;
  }
  .builder-highlight-body{
    padding:.7rem 1rem;flex-direction:row;
    align-items:center;flex-wrap:wrap;gap:.4rem;
  }
  .builder-highlight-label{margin-bottom:0;margin-right:.5rem}
  .builder-highlight-tags{margin-bottom:0}
  .builder-highlight-links{margin-top:0}
}


/* ABOUT PHOTO */



/* STAT TOOLTIPS */
.stat{position:relative}
.stat-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:.7rem 1rem;width:220px;font-size:.78rem;color:var(--text-dim);line-height:1.55;opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;text-align:left}
.stat-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border)}
.stat:hover .stat-tooltip{opacity:1}

/* MISSION CARD */
.mission-card{background:var(--bg2);border:1px solid rgba(var(--gold-rgb),.25);border-radius:10px;padding:2.5rem 3rem;position:relative;overflow:hidden;margin-top:1rem}
.mission-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),rgba(var(--teal-rgb),.6))}
.mission-card-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.mission-card-eyebrow::before{content:'♡';font-size:.9rem}
.mission-card-title{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:300;line-height:1.2;margin-bottom:1.2rem}
.mission-card-title em{font-style:italic;color:var(--gold)}
.mission-card-text{font-size:.95rem;color:var(--text-dim);line-height:1.8;max-width:740px}
.mission-card-text + .mission-card-text{margin-top:.9rem}

/* ABOUT PHOTO */
.about-photo-wrap{position:relative;width:100%;min-height:540px;display:flex;align-items:center;justify-content:center;margin-bottom:2.5rem}
.about-void-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.about-photo-frame{position:relative;z-index:1;display:inline-block;padding:12px;overflow:visible}
.about-photo{display:block;width:500px;max-width:100%;height:500px;object-fit:cover;object-position:center 15%;border-radius:8px;border:1px solid var(--border)}
.about-photo-corner{position:absolute;width:18px;height:18px;border-color:var(--gold);border-style:solid;opacity:.75;z-index:2}
.about-photo-corner.tl{top:0;left:0;border-width:2px 0 0 2px;border-radius:3px 0 0 0}
.about-photo-corner.tr{top:0;right:0;border-width:2px 2px 0 0;border-radius:0 3px 0 0}
.about-photo-corner.bl{bottom:0;left:0;border-width:0 0 2px 2px;border-radius:0 0 0 3px}
.about-photo-corner.br{bottom:0;right:0;border-width:0 2px 2px 0;border-radius:0 0 3px 0}

.contact-pills{display:flex;flex-direction:column;gap:.6rem;margin-top:2rem}
.cpill{display:flex;align-items:center;gap:.8rem;padding:.65rem 1rem;background:var(--bg2);border:1px solid var(--border);border-radius:6px;text-decoration:none;transition:border-color .25s,transform .25s;min-width:0}
.cpill:hover{border-color:var(--gold);transform:translateX(3px)}
.cpill-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cpill-icon.li{background:rgba(10,102,194,.15);border:1px solid rgba(10,102,194,.3);color:#4A9FD5}
.cpill-icon.gh{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text)}
.cpill-icon.ig{background:rgba(225,48,108,.1);border:1px solid rgba(225,48,108,.25);color:#E1306C}
.cpill-icon.dc{background:rgba(88,101,242,.12);border:1px solid rgba(88,101,242,.3);color:#7289DA}
.cpill-icon.em{background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.25);color:var(--gold)}
.cpill-label{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);width:64px;flex-shrink:0}
.cpill-val{font-size:.85rem;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.contact-socials{margin-top:2.5rem;display:flex;flex-direction:column;gap:.75rem;border-top:1px solid var(--border);padding-top:2rem}
.csocial-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.csocial-row-2 .cpill{flex:1 1 calc(50% - .375rem)}
.csocial-row-3 .cpill{flex:1 1 calc(33.333% - .5rem)}
/* .contact-center caps at 680px, so even a tablet viewport only ever gives
   the 3-pill row ~550px to share — not enough room for icon+label+value at
   a third width each. Stack every pill full-width below desktop instead of
   letting the value text truncate into illegibility. */
@media(max-width:900px){
  .csocial-row-2 .cpill,
  .csocial-row-3 .cpill{flex:1 1 100%}
}

@keyframes rainbowCycle{
  0%  {--teal:#ff6b6b;--gold:#ff6b6b;--teal-dim:#cc4444;--gold-dim:#cc4444}
  12% {--teal:#ff9f43;--gold:#ff9f43;--teal-dim:#cc7a28;--gold-dim:#cc7a28}
  24% {--teal:#ffd32a;--gold:#ffd32a;--teal-dim:#ccaa00;--gold-dim:#ccaa00}
  36% {--teal:#0be881;--gold:#0be881;--teal-dim:#09b864;--gold-dim:#09b864}
  48% {--teal:#67e8f9;--gold:#67e8f9;--teal-dim:#3abcd4;--gold-dim:#3abcd4}
  60% {--teal:#a78bfa;--gold:#a78bfa;--teal-dim:#7c5cd4;--gold-dim:#7c5cd4}
  72% {--teal:#f472b6;--gold:#f472b6;--teal-dim:#c44d90;--gold-dim:#c44d90}
  84% {--teal:#4EC9B0;--gold:#C8A45A;--teal-dim:#2C7A6A;--gold-dim:#8A6E37}
  100%{--teal:#4EC9B0;--gold:#C8A45A;--teal-dim:#2C7A6A;--gold-dim:#8A6E37}
}

/* LIBRARY */
.lib-outer{max-width:1200px;margin:0 auto;padding:3rem 4rem 2.5rem}
.lib-tabs{display:flex;margin-bottom:3rem;border-bottom:1px solid var(--border)}
.lib-tab{padding:.8rem 2rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s}
.lib-tab:hover{color:var(--text)}.lib-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.lib-panel{display:none}.lib-panel.active{display:block}
.lib-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.lib-section-header h2{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300}
.books-grid{display:flex;flex-direction:column;gap:1.6rem}
.book-card{display:flex;flex-direction:row;align-items:flex-start;gap:1.8rem;cursor:pointer;transition:transform .25s}
.book-card:hover{transform:translateX(4px)}
.book-card:hover .book-spine{box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(var(--gold-rgb),.35)}
.book-spine{position:relative;border-radius:4px 8px 8px 4px;overflow:hidden;aspect-ratio:2/3;width:clamp(130px,20vw,210px);flex:none;box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .3s}
.book-spine::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:rgba(0,0,0,.3);z-index:3}
.book-spine::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 50%,rgba(0,0,0,.2) 100%);z-index:3}
.book-spine-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.book-spine-svg{position:absolute;inset:0;z-index:1;opacity:.55}
.book-spine-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem 1rem 1.2rem 1.3rem}
.book-spine-title{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;color:rgba(255,255,255,.95);line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.book-status-badge{position:absolute;top:.7rem;right:.7rem;z-index:4;font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .45rem;border-radius:2px;border:1px solid}

/* ── Cover focal-point picker — click/drag a cover preview to choose what
   stays centered when it's cropped to fit its 2:3 slot. ── */
.cover-focal-box{position:relative;width:120px;height:180px;border-radius:4px;overflow:hidden;border:1px solid var(--border);cursor:crosshair;touch-action:none}
.cover-focal-box img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.focal-picker{cursor:crosshair;touch-action:none}
.focal-marker{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.book-status-badge.in_progress{background:rgba(var(--gold-rgb),.12);border-color:rgba(var(--gold-rgb),.35);color:rgba(var(--gold-rgb),.9)}
.book-status-badge.complete{background:rgba(var(--teal-rgb),.1);border-color:rgba(var(--teal-rgb),.3);color:rgba(var(--teal-rgb),.9)}
.book-status-badge.draft{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.4)}
.book-foot{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6rem}
.book-foot-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:400;color:var(--text);line-height:1.25}
.book-foot-meta{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);display:flex;align-items:center;gap:.8rem}
.book-foot-status{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;border-radius:2px;padding:.15rem .5rem;border:1px solid}
.book-foot-status.complete{color:var(--teal);border-color:rgba(var(--teal-rgb),.35);background:rgba(var(--teal-rgb),.08)}
.book-foot-status.in_progress{color:var(--gold);border-color:rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.08)}
.book-foot-status.draft{color:var(--text-dim);border-color:var(--border)}
.book-foot-desc{font-family:'Lato',sans-serif;font-size:.92rem;line-height:1.65;color:var(--text-dim);max-width:680px;margin:0}
.book-foot-admin{margin-top:.2rem}
@media(max-width:640px){
  .book-card{flex-direction:column;align-items:flex-start}
  .book-spine{width:100%;max-width:220px}
}
.book-desc{font-size:.86rem;color:var(--text-dim);line-height:1.6;flex:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.book-meta{display:flex;align-items:center;justify-content:space-between}
.book-ch-count{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.book-detail-header{padding:3rem 4rem 3rem;max-width:1050px;margin:0 auto;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.back-btn{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;transition:color .2s;display:flex;align-items:center;gap:.5rem;margin-bottom:1.8rem;background:none;border:none}
.back-btn:hover{color:var(--gold)}
.book-detail-hero{display:flex;gap:3.2rem;align-items:center;width:100%}
.book-detail-side{width:300px;flex:none;display:flex;flex-direction:column;gap:1.4rem}
.book-detail-cover{width:100%;box-shadow:0 30px 70px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.book-detail-info{flex:1;min-width:0;padding-top:.6rem;display:flex;flex-direction:column;max-width:640px}
.book-detail-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:300;color:var(--text);margin-bottom:.8rem}
.book-detail-desc{font-size:1.05rem;line-height:1.7;color:var(--text-dim);margin-bottom:1.8rem}
.book-buy-box{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;background:rgba(var(--gold-rgb),.05);padding:1.2rem 1.4rem}
.book-buy-box-label{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:.8rem}
.book-buy-box .book-buy-row{flex-direction:column}
.book-buy-box .book-buy-btn{justify-content:center}
.book-detail-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
@media(max-width:760px){
  .book-detail-hero{flex-direction:column;align-items:flex-start;gap:1.8rem}
  .book-detail-side{width:220px}
  .book-detail-info{max-width:none}
}
.book-detail-layout{max-width:1200px;margin:0 auto;padding:3rem 4rem;display:grid;grid-template-columns:240px 1fr;gap:3rem;align-items:start;min-height:calc(100vh - 280px)}
#chMain{display:flex;flex-direction:column}
#chReader{flex:1;display:flex;flex-direction:column}
.ch-sidebar{position:sticky;top:100px}
.ch-sidebar-title{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--border)}
.ch-list{list-style:none;display:flex;flex-direction:column;gap:.3rem;margin-bottom:1.2rem}
.ch-item{position:relative;padding:.65rem .9rem;border-radius:4px;cursor:pointer;font-size:.85rem;color:var(--text-dim);transition:all .2s;border:1px solid transparent}
.is-admin .ch-item{padding-right:3rem}
.ch-reorder{position:absolute;top:50%;right:.45rem;transform:translateY(-50%);display:none;gap:.15rem}
.is-admin .ch-item .ch-reorder{display:inline-flex}
.ch-move{width:1.3rem;height:1.3rem;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-size:.7rem;line-height:1;cursor:pointer;transition:all .15s}
.ch-move:hover:not(:disabled){color:var(--gold);border-color:var(--gold-dim)}
.ch-move:disabled{opacity:.3;cursor:default}
.import-preview{max-height:300px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:.6rem .8rem;background:rgba(0,0,0,.15)}
.import-status{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.05em;color:var(--text-dim);margin-bottom:.6rem}
.import-ch-row{display:flex;align-items:center;gap:.6rem;padding:.3rem 0}
.import-ch-idx{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--gold-dim);width:1.4rem;text-align:right;flex-shrink:0}
.import-ch-title{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:.4rem .6rem;color:var(--text);font-family:'Lato',sans-serif;font-size:.85rem;outline:none}
.import-ch-title:focus{border-color:var(--gold-dim)}
.import-ch-words{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--text-dim);flex-shrink:0;white-space:nowrap}
.import-ch-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.4rem}
.import-ch-bulk{display:flex;gap:.3rem;flex-shrink:0}
.import-ch-pub{flex-shrink:0}
.ch-item:hover{background:var(--bg3);color:var(--text)}.ch-item.active{background:var(--bg3);color:var(--gold);border-color:var(--border)}
.ch-num-lbl{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);display:block;margin-bottom:.15rem}
.ch-item.active .ch-num-lbl{color:var(--gold-dim)}
.ch-draft-pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.3);color:var(--gold);border-radius:3px;padding:.1rem .35rem;margin-left:.5rem;vertical-align:middle}
.ch-toggle-wrap{display:flex;align-items:center;gap:.75rem;user-select:none}
.ch-toggle-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ch-toggle-track{position:relative;width:40px;height:22px;border-radius:11px;background:var(--bg3);border:1px solid var(--border);transition:all .25s;flex-shrink:0;cursor:pointer}
.ch-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--text-dim);transition:all .25s;pointer-events:none}
.ch-toggle-track.on{background:rgba(var(--teal-rgb),.15);border-color:var(--teal)}
.ch-toggle-track.on .ch-toggle-thumb{left:21px;background:var(--teal)}
.ch-toggle-lbl{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);transition:color .2s;white-space:nowrap}
.ch-toggle-lbl.on{color:var(--teal)}
.ch-display{display:none}.ch-display.active{display:block}
.ch-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem}
.ch-title-h{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;line-height:1.15;margin-bottom:2rem}
.ch-body{font-size:1.05rem;line-height:1.9;color:var(--text-dim);max-width:680px}.ch-body *{color:inherit!important;background:transparent!important;font-family:inherit}
.ch-body p{margin-bottom:1.4rem}
.ch-body h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:300;color:var(--gold);margin:2.5rem 0 1rem}
.ch-action-bar{display:flex;gap:.8rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.8rem}
.article-card{background:var(--bg2);border-radius:8px;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.article-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.article-card-banner{height:130px;flex-shrink:0;background-size:cover;background-position:center;border-bottom:1px solid var(--border)}
.article-card-body{padding:1.3rem 1.4rem 1.4rem;flex:1;display:flex;flex-direction:column;border-top:none}
.article-card-body::before{content:'';display:block;width:32px;height:1px;background:var(--gold);opacity:.5;margin-bottom:1rem}
.article-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;color:var(--text);margin-bottom:.7rem;line-height:1.2}
.article-preview{font-size:.87rem;color:var(--text-dim);line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1rem}
.article-footer{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;color:var(--text-dim);display:flex;align-items:center;justify-content:space-between;padding-top:.8rem;border-top:1px solid var(--border)}
.article-card-actions{display:flex;gap:.5rem;margin-top:.8rem}
.reader-header{padding:3rem 4rem;max-width:1200px;margin:0 auto;border-bottom:1px solid var(--border)}
.reader-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.1;margin-bottom:1rem}
.reader-meta{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim)}
.reader-body{max-width:860px;margin:3rem auto;padding:0 3rem;font-size:1.08rem;line-height:2;color:var(--text);font-family:'Lato',sans-serif;font-weight:300}.reader-body *{color:inherit!important;background:transparent!important}
.reader-body p{margin-bottom:1.6rem}
.reader-body h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:300;color:var(--gold);margin:3rem 0 1.2rem;font-style:italic}
.reader-body h4{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:400;color:var(--text);margin:2rem 0 .8rem;letter-spacing:.04em}
.reader-body blockquote{border-left:2px solid var(--gold);padding:.8rem 1.5rem;margin:2rem 0;color:var(--text-dim);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.15rem}
.reader-loading{text-align:center;padding:4rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
/* CELESTIAL PROGRESS */
.celestial-tracker{position:sticky;top:72px;z-index:50;background:rgba(13,15,20,.97);border-top:1px solid rgba(var(--gold-rgb),.1);border-bottom:1px solid rgba(var(--gold-rgb),.2);padding:1.1rem 4rem;display:flex;align-items:center;gap:2rem}
.celestial-constellation{flex:1;position:relative;height:32px;display:flex;align-items:center}
.constellation-line{position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(var(--gold-rgb),.15);transform:translateY(-50%)}
.constellation-fill{position:absolute;top:50%;left:0;height:1px;background:linear-gradient(to right,#4EC9B0,var(--gold));transform:translateY(-50%);transition:width .6s cubic-bezier(.4,0,.2,1)}
.star-dots{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;width:100%;min-width:0}
.star-dot{width:9px;height:9px;border-radius:50%;background:#1E2433;border:1px solid rgba(var(--gold-rgb),.3);cursor:pointer;transition:all .3s;flex-shrink:0;position:relative}
.star-dot:hover{border-color:var(--gold);transform:scale(1.35)}
.star-dot.done{background:#8A6E37;border-color:#C8A45A}
.star-dot.current{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(var(--gold-rgb),.7),0 0 20px rgba(var(--gold-rgb),.25);transform:scale(1.5)}
.star-dot.current::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(var(--gold-rgb),.35);animation:starPulse 2s ease-in-out infinite}
@keyframes starPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.6);opacity:0}}
.star-dot-tooltip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#161B24;border:1px solid rgba(var(--gold-rgb),.25);border-radius:4px;padding:.35rem .7rem;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.1em;white-space:nowrap;color:#E8E4DC;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
.star-dot:hover .star-dot-tooltip{opacity:1}
.celestial-meta{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#908C86;white-space:nowrap;text-align:right;line-height:1.9;flex-shrink:0}
.celestial-meta strong{color:var(--gold);font-weight:400}
/* CH NAV */
.ch-nav{display:flex;align-items:center;justify-content:space-between;max-width:680px;margin:0 auto;padding:2rem 4rem 4rem;gap:1rem;flex-wrap:wrap}
.ch-nav-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.6rem;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.ch-nav-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.ch-nav-btn:disabled{opacity:.25;cursor:default}
.ch-nav-center{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.ch-nav-glyph{font-size:1.2rem;color:var(--gold);opacity:.6}
.ch-nav-label{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
/* PAGE NAV within chapter */
.page-nav{display:flex;align-items:center;justify-content:space-between;max-width:680px;margin:0 auto;padding:1.2rem 4rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:0;background:var(--bg)}
.page-nav-btn{background:none;border:none;color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .2s;padding:.3rem 0;display:flex;align-items:center;gap:.4rem}
.page-nav-btn:hover:not(:disabled){color:var(--gold)}
.page-nav-btn:disabled{opacity:.2;cursor:default}
.page-nav-info{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);text-align:center;line-height:1.8}
.page-nav-info strong{color:var(--gold);font-weight:400}
@media(max-width:768px){.ch-nav,.reader-admin-bar,.page-nav{padding-left:1.5rem;padding-right:1.5rem}}
.empty-state{text-align:center;padding:5rem 2rem;color:var(--text-dim);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.empty-icon{font-size:2rem;margin-bottom:.5rem;opacity:.35}
.empty-state h3{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--text);margin-bottom:.5rem}
.empty-state p{font-size:.9rem;max-width:380px;margin:0 auto .5rem}
/* LAB */
.lab-outer{max-width:1200px;margin:0 auto;padding:3rem 4rem 6rem}
.lab-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.lab-filters{display:flex;gap:.6rem;flex-wrap:wrap}
.lab-fb{padding:.35rem .9rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;border-radius:3px;border:1px solid var(--border);color:var(--text-dim);background:transparent;cursor:pointer;transition:all .2s}
.lab-fb:hover,.lab-fb.active{border-color:var(--teal);color:var(--teal);background:rgba(var(--teal-rgb),.06)}
.lab-grid{display:flex;flex-direction:column;gap:1.5rem}
.lab-card{background:var(--bg2);border-radius:8px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(0,0,0,.25);cursor:default}
.lab-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.lab-card-banner{position:relative;height:90px;overflow:hidden;flex-shrink:0}
.lab-card-banner svg{position:absolute;inset:0;width:100%;height:100%}
.lab-card-body{padding:1.2rem 1.4rem 1.4rem;flex:1;display:flex;flex-direction:column}
.lab-badge{display:inline-block;padding:.2rem .55rem;font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.15em;text-transform:uppercase;border-radius:2px;margin-bottom:.8rem;border:1px solid;align-self:flex-start}
.lab-badge.design{border-color:rgba(var(--teal-rgb),.3);color:var(--teal);background:rgba(var(--teal-rgb),.08)}
.lab-badge.idea{border-color:rgba(var(--gold-rgb),.3);color:var(--gold);background:rgba(var(--gold-rgb),.08)}
.lab-badge.research{border-color:rgba(180,120,200,.3);color:#C87FD5;background:rgba(180,120,200,.08)}
.lab-badge.experiment{border-color:rgba(90,180,200,.3);color:#5AB4C8;background:rgba(90,180,200,.08)}
.lab-badge.other{border-color:var(--border);color:var(--text-dim);background:transparent}
.lab-card-title{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:400;color:var(--text);margin-bottom:.6rem;line-height:1.2}
.lab-card-desc{font-size:.87rem;color:var(--text-dim);line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:1rem}
.lab-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:.8rem;border-top:1px solid var(--border)}
.lab-card-date{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;color:var(--text-dim)}
.lab-card-actions{display:flex;gap:.5rem}
.lab-link-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);text-decoration:none;padding:.3rem .6rem;border:1px solid rgba(var(--teal-rgb),.3);border-radius:3px;transition:all .2s;margin-bottom:.8rem;align-self:flex-start}
.lab-link-btn:hover{background:rgba(var(--teal-rgb),.08);border-color:var(--teal)}
/* CONTACT */
.contact-center{max-width:680px;margin:0 auto;padding:4rem 4rem 2rem}

.contact-sub{color:var(--text-dim);font-size:.98rem;margin-bottom:2rem;line-height:1.75}
.contact-links{display:flex;flex-direction:column;gap:1rem}
.contact-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;text-align:left}
.cl{display:flex;align-items:center;gap:1.2rem;padding:1.2rem 1.5rem;background:var(--bg2);border:1px solid var(--border);border-radius:6px;text-decoration:none;transition:border-color .3s,transform .3s}
.cl:hover{border-color:var(--gold);transform:translateX(4px)}
.cl-arrow{color:var(--border);transition:color .3s}
.cl:hover .cl-arrow{color:var(--gold)}
.cl-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;flex-shrink:0}
.cl-icon.li{background:rgba(10,102,194,.15);border:1px solid rgba(10,102,194,.3);color:#4A9FD5}
.cl-icon.gh{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text)}
.cl-icon.ig{background:rgba(225,48,108,.1);border:1px solid rgba(225,48,108,.25);color:#E1306C}
.cl-icon.dc{background:rgba(88,101,242,.12);border:1px solid rgba(88,101,242,.3);color:#7289DA}
.cl-icon.em{background:rgba(var(--gold-rgb),.1);border:1px solid rgba(var(--gold-rgb),.25);color:var(--gold)}
.cl-text{flex:1}
.cl-lbl{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.15rem}
.cl-val{font-size:.9rem;color:var(--text)}
.fg{margin-bottom:1.2rem}
.fg label{display:block;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.5rem}
.fg input,.fg textarea,.fg select{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:.85rem 1rem;color:var(--text);font-family:'Lato',sans-serif;font-size:.9rem;outline:none;transition:border-color .25s;appearance:none}
.fg input:focus,.fg textarea:focus{border-color:var(--gold)}
.fg textarea{resize:vertical;min-height:130px}
.fg select option{background:var(--bg2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-submit{width:100%;padding:1rem;background:var(--gold);color:var(--bg);border:none;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:opacity .2s,transform .2s;margin-top:.5rem}
.form-submit:hover{opacity:.85;transform:translateY(-2px)}
.form-success{display:none;text-align:center;padding:3.5rem 2.5rem;border:1px solid var(--teal-dim);border-radius:8px;background:rgba(var(--teal-rgb),.04);position:relative;overflow:hidden}
.form-success-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-style:italic;color:var(--text);margin-bottom:.6rem;position:relative;z-index:1}
.form-success-sub{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:2rem;position:relative;z-index:1}
.form-success-note{color:var(--text-dim);font-size:.92rem;line-height:1.7;position:relative;z-index:1;max-width:340px;margin:0 auto}
.form-success-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.35}
/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:200;display:grid;place-items:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;will-change:opacity}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:2.5rem;width:100%;max-width:660px;max-height:90vh;overflow-y:auto;overflow-x:hidden;position:relative;contain:layout style;transform:translateZ(0)}
.ch-modal-wide{max-width:min(92vw,1100px);width:100%}
.ch-editor-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-bottom:1.5rem;min-height:480px}
.ch-editor-pane{display:flex;flex-direction:column;border-right:1px solid var(--border)}
.ch-preview-pane{display:flex;flex-direction:column;background:var(--bg);overflow-y:auto}
.ch-editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem;background:var(--bg3);border-bottom:1px solid var(--border);min-height:36px}
.ch-toolbar-label{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.ch-tb-btn{background:none;border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-size:.72rem;padding:.2rem .5rem;cursor:pointer;transition:all .15s;font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
.ch-tb-btn:hover{border-color:var(--gold);color:var(--gold)}
.ch-tb-paste{padding:.2rem .7rem;border-color:rgba(var(--teal-rgb),.3);color:var(--teal);font-size:.6rem;letter-spacing:.1em}
.ch-tb-paste:hover{border-color:var(--teal);color:var(--teal)}
.ch-editor-area{flex:1;background:var(--bg2);border:none;resize:none;padding:1.2rem;color:var(--text);font-family:'Lato',sans-serif;font-size:.92rem;line-height:1.8;outline:none;min-height:420px}
.ch-editor-footer{display:flex;justify-content:space-between;padding:.4rem .8rem;background:var(--bg3);border-top:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.ch-preview-body{font-size:.95rem!important}
@media(max-width:768px){.ch-editor-wrap{grid-template-columns:1fr}.ch-preview-pane{display:none}.ch-modal-wide{padding:1.5rem}}
.modal-title{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;margin-bottom:1.5rem;color:var(--text)}
.modal-close{position:absolute;top:1.2rem;right:1.5rem;background:none;border:none;color:var(--text-dim);font-size:1.1rem;cursor:pointer;transition:color .2s;padding:.3rem}
.modal-close:hover{color:var(--gold)}
.mf{margin-bottom:1.2rem}
.mf label{display:block;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.5rem}
.mf input,.mf textarea,.mf select{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:.85rem 1rem;color:var(--text);font-family:'Lato',sans-serif;font-size:.9rem;outline:none;transition:border-color .25s;appearance:none;resize:vertical}
.mf input:focus,.mf textarea:focus{border-color:var(--gold)}
.mf textarea{min-height:200px;line-height:1.7}
.mf select option{background:var(--bg2)}
.mf .hint{font-size:.76rem;color:var(--text-dim);margin-top:.4rem;line-height:1.5}
.modal-actions{display:flex;gap:1rem;margin-top:1.5rem}
.color-swatches{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}
.swatch{width:32px;height:32px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all .2s}
.swatch.selected,.swatch:hover{border-color:var(--gold);transform:scale(1.1)}
.login-error{display:none;color:var(--danger);font-family:'JetBrains Mono',monospace;font-size:.68rem;margin-top:.5rem}
.login-error.visible{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:.5}50%{opacity:1}}
.ha .hero-eyebrow{opacity:0;animation:fadeUp .8s .2s forwards}
.ha .hero-name{opacity:0;animation:fadeUp .9s .4s forwards}
.ha .hero-tagline{opacity:0;animation:fadeUp .9s .6s forwards}
.ha .hero-pills{opacity:0;animation:fadeUp .9s .8s forwards}
.ha .hero-cta{opacity:0;animation:fadeUp .9s 1s forwards}
.ha .scroll-hint{opacity:0;animation:fadeUp .9s 1.4s forwards}
@media(max-width:1024px){.hub-hero{grid-template-columns:1fr;gap:3rem;padding:7rem 2rem 4rem}.hub-hero-right{max-width:500px}}
@media(max-width:960px){.feat-card,.about-lower,.skills-cols,.contact-links-grid,.preview-grid,.vision-grid{grid-template-columns:1fr}.about-grid{gap:2rem}.contact-info{position:static}.form-row{grid-template-columns:1fr}.book-detail-layout{grid-template-columns:1fr}.ch-sidebar{position:static}}
@media(max-width:768px){
  nav{padding:1rem 1.5rem}
  .nav-center{display:none}
  .hamburger{display:flex}
  .admin-badge{position:relative;z-index:1;display:none!important}
  .page-hero,.about-section,.skills-inner,.feat-section,.proj-section,.preview-section,.contact-wrap,.vision-section,.lib-outer,.lab-outer,.book-detail-header,.book-detail-layout,.reader-header,.reader-body,.reader-actions{padding-left:1.5rem;padding-right:1.5rem}
  #hero,footer{padding-left:1.5rem;padding-right:1.5rem}
  footer{padding-top:2.6rem;padding-bottom:1.6rem}
  .footer-grid{grid-template-columns:1fr;gap:2.2rem}
  .footer-nav{grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem}
  .footer-base{flex-direction:column;gap:.6rem;align-items:flex-start}
  .worlds-grid{grid-template-columns:1fr}.world-card.span2{grid-column:span 1}
  .worlds-section,.note-section,.connect-strip,.book-teaser,.recent-strip{padding-left:1.5rem;padding-right:1.5rem}
  .hub-hero{padding:6rem 1.5rem 3rem}
  .book-teaser-inner{grid-template-columns:1fr}.bt-cta{flex-direction:row;align-items:center}
}
  

/* ══════════════════════════════════════════
   FOCUS READER OVERLAY (Marginalia — distraction-free scroll)
   ══════════════════════════════════════════ */

#readerOverlay{
  position:fixed;inset:0;z-index:9998;
  background:var(--bg);
  display:none;flex-direction:column;
  overflow:hidden;
}
body.reader-locked nav,
body.reader-locked footer,
body.reader-locked .ask-fab,
body.reader-locked #askFab,
body.reader-locked #shootingStarCanvas,
body.reader-locked .hub-bg,
body.reader-locked .hub-pattern,
body.reader-locked .konami-overlay{
  display:none!important;
}
#readerOverlay.active{display:flex;opacity:0;transition:opacity .22s ease}
#readerOverlay.active.ro-shown{opacity:1}
body.reader-locked{overflow:hidden}

/* Progress bar */
.ro-progress{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:rgba(var(--gold-rgb),.12);z-index:2;pointer-events:none;
}
.ro-progress-fill{height:100%;background:var(--gold);transition:width .4s ease;width:0%}

/* Top bar */
.ro-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.8rem;
  border-bottom:1px solid rgba(var(--gold-rgb),.1);
  flex-shrink:0;z-index:1;
}
.ro-topbar-title{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;
}
.ro-topbar-center{
  display:flex;align-items:center;gap:.7rem;
  flex:1;justify-content:center;min-width:0;padding:0 1rem;
}
.ro-chapter-select{
  background:none;border:1px solid var(--border);border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.06em;color:var(--text-dim);
  padding:.3rem 1.6rem .3rem .6rem;cursor:pointer;max-width:18rem;
  text-overflow:ellipsis;transition:all .2s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a7a63' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;
}
.ro-chapter-select:hover{border-color:var(--gold);color:var(--gold)}
.ro-font-btns{display:flex;align-items:center;gap:.2rem}
.ro-font-btn{
  background:none;border:1px solid transparent;border-radius:20px;
  cursor:pointer;font-family:'JetBrains Mono',monospace;
  color:var(--text-dim);padding:.2rem .5rem;transition:all .15s;
  font-size:.68rem;letter-spacing:.05em;
}
.ro-font-btn:hover{color:var(--gold);border-color:rgba(var(--gold-rgb),.3)}
.ro-exit-btn{
  background:none;border:1px solid var(--border);border-radius:3px;
  cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
  padding:.35rem .9rem;transition:all .2s;flex-shrink:0;
}
.ro-exit-btn:hover{border-color:var(--gold);color:var(--gold)}

/* Theme tokens — sepia (default) / light / dark */
#readerOverlay{
  --ro-bg:#f3e9d6; --ro-surface:#efe2c9;
  --ro-text:#3a3027; --ro-dim:#8a7a63; --ro-accent:#9a6b3f;
  --ro-rule:rgba(120,90,50,.18); --ro-fs:1.18rem;
}
#readerOverlay.ro-theme-sepia{
  --ro-bg:#f3e9d6; --ro-surface:#efe2c9;
  --ro-text:#3a3027; --ro-dim:#8a7a63; --ro-accent:#9a6b3f;
  --ro-rule:rgba(120,90,50,.18);
}
#readerOverlay.ro-theme-light{
  --ro-bg:#fcfbf8; --ro-surface:#f4f2ec;
  --ro-text:#2a2a2a; --ro-dim:#8a8a8a; --ro-accent:#9a6b3f;
  --ro-rule:rgba(0,0,0,.1);
}
#readerOverlay.ro-theme-dark{
  --ro-bg:#15131a; --ro-surface:#1d1a24;
  --ro-text:#d8d2e0; --ro-dim:#8a8398; --ro-accent:#c8a45a;
  --ro-rule:rgba(200,164,90,.16);
}
#readerOverlay{background:var(--ro-bg)}

/* Font size presets (applied to overlay) */
#readerOverlay.ro-font-sm{--ro-fs:1.02rem}
#readerOverlay.ro-font-md{--ro-fs:1.18rem}
#readerOverlay.ro-font-lg{--ro-fs:1.34rem}
#readerOverlay.ro-font-xl{--ro-fs:1.52rem}

/* Top bar uses themed colors */
#readerOverlay .ro-topbar{border-bottom-color:var(--ro-rule)}
#readerOverlay .ro-topbar-title{color:var(--ro-dim)}
#readerOverlay .ro-chapter-select{color:var(--ro-dim);border-color:var(--ro-rule)}
#readerOverlay .ro-chapter-select:hover{color:var(--ro-accent);border-color:var(--ro-accent)}
#readerOverlay .ro-font-btn{color:var(--ro-dim)}
#readerOverlay .ro-font-btn:hover{color:var(--ro-accent);border-color:var(--ro-rule)}
#readerOverlay .ro-exit-btn{color:var(--ro-dim);border-color:var(--ro-rule)}
#readerOverlay .ro-exit-btn:hover{color:var(--ro-accent);border-color:var(--ro-accent)}
#readerOverlay .ro-progress{background:var(--ro-rule)}
#readerOverlay .ro-progress-fill{background:var(--ro-accent)}

.ro-topbar-right{display:flex;align-items:center;gap:.9rem}
.ro-theme-btns{display:flex;align-items:center;gap:.15rem}
.ro-theme-btn{
  background:none;border:1px solid transparent;border-radius:50%;
  cursor:pointer;font-size:.85rem;line-height:1;
  width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;
  color:var(--ro-dim);transition:all .15s;
}
.ro-theme-btn:hover{color:var(--ro-accent)}
.ro-theme-btn.active{color:var(--ro-accent);border-color:var(--ro-rule)}

/* Scrolling reading column */
.ro-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  background:var(--ro-bg);
}
.ro-scroll-inner{
  max-width:clamp(40rem,62vw,64rem);margin:0 auto;
  padding:4rem 2.4rem 8rem;
}
.ro-loading{
  text-align:center;color:var(--ro-dim);padding:6rem 0;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;
}

/* Article block */
.ro-chapter{margin-bottom:4.5rem;scroll-margin-top:2rem}
.ro-ch-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--ro-accent);opacity:.85;margin-bottom:.8rem;
}
.ro-ch-title{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;
  color:var(--ro-text);margin-bottom:2rem;
}
.ro-ch-body{
  font-family:'Lora','Cormorant Garamond',Georgia,serif;
  font-size:var(--ro-fs);line-height:1.8;
  color:var(--ro-text);
}
.ro-ch-body p{margin:0 0 1.4em}
.ro-ch-body p:first-of-type::first-letter{
  font-family:'Cormorant Garamond',serif;
  float:left;font-size:3.4em;line-height:.78;
  padding:.05em .12em 0 0;color:var(--ro-accent);font-weight:500;
}
.ro-ch-body h3{
  font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;
  font-size:1.5em;color:var(--ro-accent);margin:2.2rem 0 1rem;
}
.ro-ch-body h4{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ro-dim);margin:1.8rem 0 .7rem;
}
.ro-ch-body blockquote{
  border-left:2px solid var(--ro-accent);
  padding:.3rem 0 .3rem 1.4rem;margin:1.8rem 0;
  color:var(--ro-dim);font-style:italic;
}
.ro-ch-body em{font-style:italic}
.ro-ch-body strong{font-weight:600}
.ro-ch-body a{color:var(--ro-accent);text-decoration:underline;text-underline-offset:2px}
.ro-ch-body img{max-width:100%;height:auto;display:block;margin:2rem auto;border-radius:4px}
.ro-ch-body ul,.ro-ch-body ol{margin:0 0 1.4em 1.4em}
.ro-ch-body li{margin-bottom:.5em}
.ro-ch-body hr{border:none;text-align:center;margin:2.5rem 0}
.ro-ch-body hr::before{content:'✦ ✦ ✦';color:var(--ro-accent);opacity:.5;letter-spacing:.6em}
.ro-end{
  text-align:center;color:var(--ro-accent);opacity:.5;
  font-size:1.2rem;padding:2rem 0 4rem;
}

@media(max-width:768px){
  .ro-topbar{padding:.7rem 1rem}
  .ro-topbar-title{display:none}
  .ro-topbar-center{padding:0 .5rem;justify-content:flex-start}
  .ro-chapter-select{max-width:42vw}
  .ro-topbar-right{gap:.5rem}
  .ro-scroll-inner{padding:2.5rem 1.4rem 6rem}
}

/* ── NEWSLETTER ── */
.newsletter-section{
  margin-top:5rem;padding-top:4rem;
  border-top:1px solid var(--border);
}
.newsletter-label{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
  margin-bottom:1rem;
}
.newsletter-title{
  font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;color:var(--text);margin-bottom:.8rem;line-height:1.2;
}
.newsletter-sub{
  font-size:.92rem;color:var(--text-dim);line-height:1.7;
  max-width:480px;margin-bottom:2rem;
}
.newsletter-form{display:flex;gap:.6rem;flex-wrap:wrap}
.newsletter-input{
  flex:1;min-width:220px;
  background:var(--bg3);border:1px solid var(--border);border-radius:3px;
  padding:.75rem 1rem;color:var(--text);
  font-family:'Lato',sans-serif;font-size:.9rem;outline:none;
  transition:border-color .2s;
}
.newsletter-input::placeholder{color:var(--text-dim);opacity:.5}
.newsletter-input:focus{border-color:rgba(var(--gold-rgb),.4)}
.newsletter-submit{
  background:none;border:1px solid rgba(var(--gold-rgb),.4);border-radius:3px;
  color:var(--gold);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.75rem 1.4rem;transition:all .2s;white-space:nowrap;
}
.newsletter-submit:hover{background:rgba(var(--gold-rgb),.08);border-color:var(--gold)}
.newsletter-success{
  display:none;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.12em;color:var(--teal);padding:.6rem 0;
}

/* Footer teaser */
.footer-newsletter{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;
  margin-top:.4rem;
  font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.12em;color:var(--text-dim);
}
.footer-newsletter-label{white-space:nowrap;text-transform:uppercase}
.footer-newsletter-input{
  background:transparent;border:none;border-bottom:1px solid var(--border);
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.1em;padding:.2rem .3rem;outline:none;width:180px;
  transition:border-color .2s;
}
.footer-newsletter-input::placeholder{color:var(--text-dim);opacity:.4}
.footer-newsletter-input:focus{border-color:rgba(var(--gold-rgb),.5)}
.footer-newsletter-btn{
  background:none;border:none;cursor:pointer;color:var(--gold);
  font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.2rem .4rem;
  transition:opacity .2s;
}
.footer-newsletter-btn:hover{opacity:.7}
.footer-newsletter-success{
  color:var(--teal);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;display:none;
}
@media(max-width:768px){
  .footer-newsletter{gap:.4rem}
  .footer-newsletter-input{width:140px}
}

/* ── BOOK PROMO PAGE (blurb, buy links, excerpt, reviews, launch note) ── */
.book-promo{max-width:1050px;margin:0 auto;padding:2.5rem 4rem 5rem}
.book-promo-blurb{font-size:1.05rem;line-height:1.7;color:var(--text-dim);max-width:640px;margin-bottom:1.8rem}
.book-buy-row{display:flex;flex-wrap:wrap;gap:.7rem}
.book-buy-btn{
  font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bg);background:var(--gold);border:1px solid var(--gold);border-radius:4px;
  padding:.9rem 2rem;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;
  box-shadow:0 6px 18px -6px rgba(var(--gold-rgb),.5);
}
.book-buy-btn:hover{opacity:.88;transform:translateY(-1px)}
.book-promo-section{padding:2.2rem 0;border-top:1px solid var(--border)}
.book-promo-section:first-of-type{border-top:none;padding-top:0}
.book-promo-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;max-width:760px;margin-left:auto;margin-right:auto}
.book-prose{font-family:'Cormorant Garamond',serif;font-size:1.15rem;line-height:1.75;color:var(--text);max-width:760px;margin-left:auto;margin-right:auto}
.book-prose p{margin:0 0 1.2em}
.book-prose p:first-of-type::first-letter{font-size:2.6em;line-height:.75;float:left;padding:.03em .1em 0 0;color:var(--gold);font-weight:500}
.book-prose blockquote{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.2rem;margin:1.4rem 0;color:var(--text-dim);font-style:italic}
/* Excerpts get pasted in from Word/Google Docs and often carry a baked-in
   literal color:#000 (and sometimes background-color) on every span —
   invisible in light mode, black-on-black in dark mode. The container's
   own color never overrides that, since inline styles win over inherited
   ones. Force it here so pasted content can't break legibility regardless
   of what color it arrived with. */
.book-prose *,
.book-review-quote *{color:inherit !important;background-color:transparent !important}
.book-reviews{display:flex;flex-direction:column;gap:1.4rem;max-width:760px;margin-left:auto;margin-right:auto}
.book-review-quote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;line-height:1.6;color:var(--text);border-left:2px solid rgba(var(--gold-rgb),.4);padding-left:1.2rem}
.book-review-source{display:block;margin-top:.5rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-style:normal}
@media(max-width:768px){.book-promo{padding:2rem 1.5rem 3rem}}

/* ── SERIES ── */
.series-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap;
}
.series-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.55rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:.4rem;
}
.series-title{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  font-weight:300;color:var(--text);margin-bottom:.3rem;
}
.series-meta{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.1em;color:var(--text-dim);
}
.book-series-num{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.1em;color:var(--gold);
}

/* ── SERIES BAND ── */
.series-band{margin-bottom:1.5rem}
.book-status-badge{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.5rem;
  letter-spacing:.12em;text-transform:uppercase;border-radius:2px;
  padding:.15rem .5rem;margin-bottom:.35rem;
}
.book-status-badge.complete{
  border:1px solid rgba(var(--teal-rgb),.3);color:var(--teal);background:rgba(var(--teal-rgb),.06);
}
.book-status-badge.draft{
  border:1px solid var(--border);color:var(--text-dim);
}
.book-card-placeholder{
  opacity:.25;cursor:default;pointer-events:none;
}
.book-spine-placeholder{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg3);border:1px dashed var(--border);
}

/* Status badge overlay on book spine */
.book-spine-status{
  position:absolute;top:.5rem;left:.5rem;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:.45rem;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:2px;padding:.15rem .45rem;
  backdrop-filter:blur(4px);
}
.book-spine-status.complete{
  background:rgba(var(--teal-rgb),.2);border:1px solid rgba(var(--teal-rgb),.4);color:var(--teal);
}
.book-spine-status.in_progress{
  background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.3);color:var(--gold);
}

/* ── ARTICLE TAG FILTER PILLS ── */
.tag-filter-pill{
  background:none;border:1px solid var(--border);border-radius:20px;
  cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);
  padding:.3rem .85rem;transition:all .18s;
}
.tag-filter-pill:hover{border-color:var(--gold);color:var(--gold)}
.tag-filter-pill.active{
  border-color:var(--gold);color:var(--gold);
  background:rgba(var(--gold-rgb),.08);
}

/* ══════════════════════════════════════════════════════
   ASK JUZTCLEB
   ══════════════════════════════════════════════════════ */

/* Nav trigger */
.ask-fab{
  position:fixed;bottom:2rem;right:2rem;z-index:8999;
  display:flex;align-items:center;justify-content:center;gap:0;
  background:var(--bg2);border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:50%;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  width:50px;height:50px;
  box-shadow:0 2px 16px rgba(0,0,0,.6),0 0 0 1px rgba(var(--gold-rgb),.0);
  transition:width .3s ease, height .15s ease, border-radius .3s ease, border-color .2s, background .2s, padding .3s;
  overflow:hidden;padding:0;
}
.ask-fab:hover{
  width:170px;height:50px;border-radius:25px;
  padding:0 1.1rem 0 .6rem;justify-content:flex-start;gap:.6rem;
  border-color:var(--gold);background:var(--bg2);
}
.ask-fab svg{flex-shrink:0;display:block;width:28px;height:28px;min-width:0}
.ask-fab-label{white-space:nowrap;overflow:hidden;max-width:0;transition:max-width .3s ease;opacity:0;transition:opacity .2s .1s}
.ask-fab:hover .ask-fab-label{max-width:120px;opacity:1}

/* Explosion — FAB bursts outward when clicked */
@keyframes askFabExplode{
  0%  {transform:scale(1);opacity:1}
  40% {transform:scale(1.4);opacity:.6;border-radius:50%}
  60% {transform:scale(.95);opacity:.9}
  100%{transform:scale(1);opacity:1}
}
.ask-fab-exploding{
  animation:askFabExplode .35s ease forwards;
}

/* Panel slides up from FAB position */
.ask-panel{
  position:absolute;bottom:5.5rem;right:1.5rem;
  width:min(620px,92vw);
  transform:scale(0.85) translateY(20px);
  transform-origin:bottom right;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  opacity:0;transition:opacity .25s, transform .25s cubic-bezier(.34,1.4,.64,1);
}
#askOverlay.active .ask-panel{
  opacity:1;transform:scale(1) translateY(0);
}

/* Inline search */
.inline-search-wrap{
  position:relative;display:flex;align-items:center;
}
.inline-search{
  background:var(--bg3);border:1px solid var(--border);border-radius:20px;
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.08em;outline:none;
  padding:.35rem 2rem .35rem .85rem;width:160px;
  transition:all .2s;
}
.inline-search:focus{border-color:rgba(var(--gold-rgb),.4);width:220px}
.inline-search::placeholder{color:var(--text-dim);opacity:.5}
.inline-search-icon{
  position:absolute;right:.7rem;color:var(--text-dim);
  font-size:.85rem;pointer-events:none;opacity:.5;
}

/* Overlay */
#askOverlay{
  position:fixed;inset:0;z-index:9000;
  display:none;
  pointer-events:none;
}
#askOverlay.active{display:block;pointer-events:all}
.ask-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s;
}
#askOverlay.active .ask-backdrop{opacity:1}
/* ask-panel styles moved to FAB section above */

/* Header */
.ask-header{
  display:flex;align-items:center;gap:.6rem;
  padding:.9rem 1.2rem;
  border-bottom:1px solid var(--border);
}
.ask-header-icon{color:var(--gold);font-size:.8rem}
.ask-header-title{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--text);
  flex:1;
}
.ask-close{
  background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-size:.85rem;padding:.2rem;
  transition:color .15s;
}
.ask-close:hover{color:var(--text)}

/* Input */
.ask-input-wrap{
  display:flex;align-items:center;
  padding:.7rem 1.2rem;
  border-bottom:1px solid var(--border);
  gap:.5rem;
}
.ask-input{
  flex:1;background:none;border:none;outline:none;
  color:var(--text);font-family:'Lato',sans-serif;font-size:.95rem;
}
.ask-input::placeholder{color:var(--text-dim);opacity:.5}
.ask-shortcut{
  font-family:'JetBrains Mono',monospace;font-size:.55rem;
  letter-spacing:.08em;color:var(--text-dim);opacity:.4;
  border:1px solid var(--border);border-radius:3px;padding:.15rem .4rem;
  flex-shrink:0;
}

/* Chat messages */
.ask-messages{
  height:320px;overflow-y:auto;padding:.8rem 1rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.ask-welcome{
  font-family:'Lato',sans-serif;font-size:.85rem;
  color:var(--text-dim);line-height:1.6;text-align:center;
  padding:1.5rem .5rem;
}
.ask-msg{
  max-width:88%;padding:.65rem .95rem;border-radius:12px;
  font-family:'Lato',sans-serif;font-size:.88rem;line-height:1.6;
  word-break:break-word;
}
.ask-msg-user{
  background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.2);
  color:var(--text);align-self:flex-end;border-radius:12px 12px 3px 12px;
}
.ask-msg-bot{
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text);align-self:flex-start;border-radius:12px 12px 12px 3px;
}
.ask-result-links{
  margin-top:.6rem;display:flex;flex-direction:column;gap:.3rem;
}
.ask-result-link{
  display:flex;align-items:center;gap:.5rem;
  font-size:.78rem;color:var(--teal);text-decoration:none;
  transition:opacity .15s;
}
.ask-result-link:hover{opacity:.7}
.ask-result-tag{
  font-family:'JetBrains Mono',monospace;font-size:.48rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(var(--teal-rgb),.25);
  border-radius:2px;padding:.1rem .35rem;flex-shrink:0;
}
.ask-typing{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.1em;color:var(--gold);animation:pulse 1.5s infinite;
}

/* Input row */
.ask-input-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-top:1px solid var(--border);
}
.ask-send-btn{
  background:var(--gold);border:none;border-radius:50%;
  cursor:pointer;color:var(--bg);font-size:1rem;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:opacity .15s;
}
.ask-send-btn:hover{opacity:.8}

/* Footer */
.ask-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 1.2rem;
  border-top:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:.52rem;
  letter-spacing:.08em;color:var(--text-dim);opacity:.5;
}

/* Prevent body scroll when open */
body.ask-open{overflow:hidden}

/* ══════════════════════════════════════════════════════
   LAB REDESIGN — Showcase Tiles
   ══════════════════════════════════════════════════════ */

.lab-outer{ max-width:1200px;margin:0 auto;padding:0 4rem 6rem }

.lab-tile{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:2rem 2.5rem;margin-bottom:1.5rem;
  transition:border-color .2s;
}
.lab-tile:hover{ border-color:rgba(var(--gold-rgb),.2) }
.lab-tile-expanded{ border-color:rgba(var(--gold-rgb),.35) }

.lab-tile-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1rem;flex-wrap:wrap;
}
.lab-tile-meta{ display:flex;align-items:center;gap:.6rem;flex-wrap:wrap }

.lab-cat-badge{
  font-family:'JetBrains Mono',monospace;font-size:.52rem;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid;border-radius:3px;padding:.15rem .55rem;
}
.lab-status-badge{
  font-family:'JetBrains Mono',monospace;font-size:.5rem;
  letter-spacing:.12em;text-transform:uppercase;
  border-radius:3px;padding:.15rem .5rem;
}
.lab-status-active{ color:var(--teal);background:rgba(var(--teal-rgb),.08);border:1px solid rgba(var(--teal-rgb),.2) }
.lab-status-brewing{ color:var(--gold);background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.2) }
.lab-status-archived{ color:var(--text-dim);background:rgba(255,255,255,.04);border:1px solid var(--border) }

.lab-tile-actions{ display:flex;align-items:center;gap:.6rem }

.lab-launch-btn{
  display:flex;align-items:center;gap:.4rem;
  background:rgba(var(--gold-rgb),.08);border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:3px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  padding:.4rem 1rem;transition:all .2s;
}
.lab-launch-btn:hover{ background:rgba(var(--gold-rgb),.15);border-color:var(--gold) }

.lab-ext-link{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  color:var(--text-dim);text-decoration:none;
  border:1px solid var(--border);border-radius:3px;
  padding:.35rem .6rem;transition:all .15s;
}
.lab-ext-link:hover{ color:var(--text);border-color:rgba(255,255,255,.2) }

.lab-share-btn{
  background:none;border:1px solid var(--border);border-radius:3px;
  cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.55rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  padding:.3rem .6rem;transition:all .15s;
}
.lab-share-btn:hover{ color:var(--teal);border-color:rgba(var(--teal-rgb),.4) }

.lab-edit-btn,.lab-del-btn{
  background:none;border:1px solid var(--border);border-radius:3px;
  cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.55rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  padding:.3rem .6rem;transition:all .15s;
}
.lab-edit-btn:hover{ border-color:var(--gold);color:var(--gold) }
.lab-del-btn:hover{ border-color:var(--danger,#e06c75);color:var(--danger,#e06c75) }

.lab-tile-title{
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;
  font-weight:300;color:var(--text);margin-bottom:.6rem;line-height:1.2;
}
.lab-tile-desc{
  font-size:.9rem;color:var(--text-dim);line-height:1.7;
  max-width:680px;margin-bottom:.8rem;
}
.lab-tags{ display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem }
.lab-tag{
  font-family:'JetBrains Mono',monospace;font-size:.5rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:2px;padding:.12rem .45rem;
}

/* Embed panel */
.lab-embed-panel{
  margin-top:1.5rem;
  border-top:1px solid var(--border);
  padding-top:1.5rem;
}
.lab-embed-inner iframe{
  width:100%;border:none;border-radius:8px;
  background:var(--bg3);display:block;
  height:520px;
}

@media(max-width:768px){
  .lab-outer{ padding:0 1.5rem 4rem }
  .lab-tile{ padding:1.5rem }
  .lab-tile-header{ gap:.6rem }
}

/* Lab link on project cards */
.proj-link-btn.lab{
  color:var(--teal);border-color:rgba(var(--teal-rgb),.3);background:rgba(var(--teal-rgb),.06);
}
.proj-link-btn.lab:hover{background:rgba(var(--teal-rgb),.12);border-color:var(--teal)}

/* ── PROJECT CARD HIGHLIGHTS ── */
.pcard-highlights{
  display:flex;flex-direction:column;gap:.5rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--border);
  margin-bottom:.6rem;
}
.pcard-highlight{display:flex;flex-direction:column;gap:.1rem}
.ph-label{
  font-family:'JetBrains Mono',monospace;font-size:.48rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);opacity:.6;
}
.ph-value{
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;
  font-weight:400;color:var(--text);line-height:1.2;
}

/* ── FEATURED PROJECT HIGHLIGHTS ── */
/* ── PROJECT STAT BAR ── */
.proj-featured-statbar{
  display:flex;align-items:center;gap:0;
  border-top:1px solid rgba(var(--gold-rgb),.15);
  background:rgba(var(--gold-rgb),.04);
  padding:0 2.5rem;
}
.proj-featured-statbar-label{
  font-family:'Cormorant Garamond',serif;font-size:1rem;
  font-weight:300;font-style:italic;
  letter-spacing:.05em;
  color:var(--gold);opacity:.7;
  padding:1.2rem 2rem 1.2rem 0;
  border-right:1px solid rgba(var(--gold-rgb),.15);
  margin-right:2rem;white-space:nowrap;flex-shrink:0;
}
.pfh-stat{
  display:flex;flex-direction:column;gap:.2rem;
  padding:1rem 2rem;flex:1;text-align:center;
  border-right:1px solid rgba(255,255,255,.05);
}
.pfh-stat:last-child{border-right:none}
.pfh-stat-value{
  font-family:'Cormorant Garamond',serif;font-size:1.8rem;
  font-weight:300;color:var(--text);line-height:1;
  letter-spacing:-.02em;
}
.pfh-stat-value em{font-style:normal;color:var(--gold)}
.pfh-stat-label{
  font-family:'JetBrains Mono',monospace;font-size:.5rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);opacity:.5;
}

/* ══════════════════════════════════════════════════════
   QUILL RTE — Dark theme override
   ══════════════════════════════════════════════════════ */
.quill-editor-wrap{
  border-radius:4px;overflow:hidden;
  border:1px solid var(--border);
}
.quill-editor-wrap .ql-toolbar{
  background:var(--bg3);
  border:none;border-bottom:1px solid var(--border);
  padding:.4rem .6rem;
}
.quill-editor-wrap .ql-container{
  background:var(--bg3);border:none;
  font-family:'Lato',sans-serif;font-size:.9rem;color:var(--text);
  min-height:180px;
}
.quill-editor-wrap .ql-editor{
  min-height:180px;padding:1rem;line-height:1.7;color:var(--text);
}
.quill-editor-wrap .ql-editor.ql-blank::before{
  color:var(--text-dim);opacity:.4;font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;
}
/* Toolbar buttons */
.ql-snow .ql-stroke{ stroke:var(--text-dim) }
.ql-snow .ql-fill{ fill:var(--text-dim) }
.ql-snow .ql-picker{ color:var(--text-dim) }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:var(--gold)}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--gold)}
.ql-snow .ql-picker-options{
  background:var(--bg3);border:1px solid var(--border);border-radius:4px;
}
.ql-snow .ql-picker-item:hover,.ql-snow .ql-picker-item.ql-selected{color:var(--gold)}
/* Rendered content inside editor */
.ql-editor h1,.ql-editor h2,.ql-editor h3{
  font-family:'Cormorant Garamond',serif;font-weight:300;color:var(--text);margin:.8rem 0 .4rem;
}
.ql-editor p{margin-bottom:.6rem}
.ql-editor blockquote{
  border-left:3px solid var(--gold);margin:.6rem 0;padding:.4rem 1rem;
  color:var(--text-dim);font-style:italic;
}
.ql-editor code,.ql-editor pre{
  background:rgba(255,255,255,.06);border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:.82rem;
}

/* ══════════════════════════════════════════════════════════
   HUB HOMEPAGE — the prototype's exact palette (aged-paper light,
   near-black dark), not the site's generic teal/gold tokens. Flat
   background, no ambient glow or texture — those belonged to the
   old, much longer celestial page.
   ══════════════════════════════════════════════════════════ */
body[data-page="home"],
body[data-page="about"],
body[data-page="contact"]{
  position:relative;
  --hub-paper:#f2ead9; --hub-paper-2:#e8dec2; --hub-paper-3:#d9cead;
  --hub-ink:#2b2620; --hub-ink-dim:#5a5140; --hub-rule:#c3b795; --hub-gold:#7d5f34;
  background:var(--hub-paper) !important;
}
body[data-page="home"]:not(.light-mode),
body[data-page="about"]:not(.light-mode),
body[data-page="contact"]:not(.light-mode){
  --hub-paper:#17140f; --hub-paper-2:#221e19; --hub-paper-3:#2d2822;
  --hub-ink:#ece3d0; --hub-ink-dim:#b7ab90; --hub-rule:#453f37; --hub-gold:#c8a45a;
}
body[data-page="home"] main,
body[data-page="about"] main,
body[data-page="contact"] main{
  /* the global main{padding-top:80px} exists to clear the OLD nav{position:
     fixed} header other pages still use; these three switched to a
     position:sticky .site-head instead, which already occupies its own
     space in normal flow — the extra clearance just pushed content down
     by 80px on top of that, throwing off 100svh-based full-height math
     (e.g. the home hero's bottom-anchored scroll cue landing off-screen). */
  position:relative; z-index:1; padding-top:0;
}
body[data-page="home"] .hub-bg, body[data-page="home"] .hub-pattern,
body[data-page="about"] .hub-bg, body[data-page="about"] .hub-pattern,
body[data-page="contact"] .hub-bg, body[data-page="contact"] .hub-pattern{display:none !important}
.home-sky{display:none}

/* ══════════════════════════════════════════════════════════
   CONTACT — same flat paper as the rest of the hub, no dusk
   gradient or starfield. Existing form/socials/newsletter
   markup, just recolored onto --hub-* tokens.
   ══════════════════════════════════════════════════════════ */
body[data-page="contact"] .section-label{color:var(--hub-gold)}
body[data-page="contact"] .section-label::after{background:var(--hub-rule)}
body[data-page="contact"] .section-title{color:var(--hub-ink)}
body[data-page="contact"] .section-title em{color:var(--hub-gold)}
body[data-page="contact"] .contact-sub{color:var(--hub-ink-dim)}
body[data-page="contact"] .fg label{color:var(--hub-ink-dim)}
body[data-page="contact"] .fg input,
body[data-page="contact"] .fg textarea,
body[data-page="contact"] .fg select{background:var(--hub-paper-2); border-color:var(--hub-rule); color:var(--hub-ink)}
body[data-page="contact"] .fg input:focus,
body[data-page="contact"] .fg textarea:focus{border-color:var(--hub-gold)}
body[data-page="contact"] .fg select option{background:var(--hub-paper-2)}
body[data-page="contact"] .form-submit{background:var(--hub-gold); color:var(--hub-paper)}
body[data-page="contact"] .form-success{border-color:var(--hub-rule); background:var(--hub-paper-2)}
body[data-page="contact"] .form-success-title{color:var(--hub-ink)}
body[data-page="contact"] .form-success-sub{color:var(--hub-gold)}
body[data-page="contact"] .form-success-note{color:var(--hub-ink-dim)}
body[data-page="contact"] .contact-socials{border-top-color:var(--hub-rule)}
body[data-page="contact"] .cpill{background:var(--hub-paper-2); border-color:var(--hub-rule)}
body[data-page="contact"] .cpill:hover{border-color:var(--hub-gold)}
body[data-page="contact"] .cpill-label{color:var(--hub-ink-dim)}
body[data-page="contact"] .cpill-val{color:var(--hub-ink)}
body[data-page="contact"] .newsletter-section{border-top-color:var(--hub-rule)}
body[data-page="contact"] .newsletter-label{color:var(--hub-gold)}
body[data-page="contact"] .newsletter-title{color:var(--hub-ink)}
body[data-page="contact"] .newsletter-sub{color:var(--hub-ink-dim)}
body[data-page="contact"] .newsletter-input{background:var(--hub-paper-2); border-color:var(--hub-rule); color:var(--hub-ink)}
body[data-page="contact"] .newsletter-input::placeholder{color:var(--hub-ink-dim); opacity:.6}
body[data-page="contact"] .newsletter-submit{color:var(--hub-gold); border-color:var(--hub-rule)}
body[data-page="contact"] .newsletter-submit:hover{background:rgba(0,0,0,.03); border-color:var(--hub-gold)}
body[data-page="contact"] .newsletter-success{color:var(--hub-gold)}

/* ══════════════════════════════════════════════════════════
   HUB HERO + THREE DOORS — the minimal hub homepage
   ══════════════════════════════════════════════════════════ */
body[data-page="home"]{
  --ring-op-1:.22; --ring-op-2:.17; --ring-op-3:.13; --ring-op-4:.09;
  --be-bg:#121212; --be-bg-2:#1c1c1c; --be-flame:#5c8fc0; --be-text:#ccd6e3; --be-text-dim:#8896ab;
  --mg-bg:#e6e2d5; --mg-bg-2:#dbd7c8; --mg-ink:#201e1a; --mg-ink-dim:#63594c; --mg-accent:#8c2b26;
  --fg-bg:#e7ece7; --fg-bg-2:#d7e0d8; --fg-ink:#1c2321; --fg-ink-dim:#57645f; --fg-accent:#3d6b5f;
}
body[data-page="home"].light-mode{
  --ring-op-1:.13; --ring-op-2:.10; --ring-op-3:.08; --ring-op-4:.055;
}

/* ── hub's own minimal header/footer, shared by every hub page (home,
   about, contact) — no nav-link list; Home's logo is the only way back
   to the doors, deliberately keeping these pages quiet satellites of it ── */
.site-head{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.8rem; backdrop-filter:blur(6px); border-bottom:1px solid var(--hub-rule);
}
body.light-mode .site-head{background:rgba(251,245,232,.9)}
body:not(.light-mode) .site-head{background:rgba(22,27,36,.85)}
.site-head-mark{font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:600; text-decoration:none; color:var(--hub-ink); letter-spacing:.02em}
.site-head-controls{display:flex; align-items:center; gap:.6rem}
.admin-link{display:inline-flex}
.admin-link[hidden]{display:none}
.site-foot{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:1rem; max-width:960px; margin:0 auto; padding:2.4rem 2rem 2.8rem;
  /* !important: the generic `body.light-mode footer{background:#e8dcbf}` rule
     (further down the file) outranks a plain .site-foot on specificity alone */
  background:var(--hub-paper) !important; border-top:1px solid var(--hub-rule); overflow:hidden;
}
.site-foot-mark{font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--hub-ink-dim)}
.site-foot-links{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap}
.site-foot-links a{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hub-ink-dim); text-decoration:none; transition:color .2s;
}
.site-foot-links a:hover,
.site-foot-links a:focus-visible{color:var(--hub-gold)}
.footer-base-meta{
  font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hub-ink-dim); opacity:.65;
}

/* ── hero: faint broken rings (each a circle with one gap via
   stroke-dasharray, rotated further than the last) read as a loose
   spiral rather than plain concentric circles ── */
/* Full-viewport hero so it's unmistakably the page's focal point on load,
   on every device — the doors sit below the fold until you scroll (or on
   mobile/tablet, until you get a hint that there's more). */
body[data-page="home"] .hero{
  position:relative; z-index:1; max-width:760px; margin:0 auto; padding:2rem;
  text-align:center; min-height:calc(100svh - 4.5rem);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
body[data-page="home"] .hero-orbits{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-52%);
  width:min(640px,84vw); height:min(640px,84vw); z-index:0; pointer-events:none; overflow:visible;
}
/* A flat 760px cap (and rings tuned to match) reads fine up to ordinary
   laptop widths, but on an actual large desktop monitor it stops growing
   altogether while the viewport keeps getting wider — the hero reads as a
   small, fixed-size island adrift in a sea of margin instead of using the
   screen. min-width, not a vw-based fluid formula: below this threshold
   the fixed 760px/640px above already fits comfortably, so there's no
   need (or safe way, for an absolutely-sized element like the rings) to
   shrink it — vw-scaling the rings down would just make them tiny on
   narrow/mobile screens instead. */
@media(min-width:1440px){
  body[data-page="home"] .hero{max-width:min(1200px,66vw)}
  body[data-page="home"] .hero-orbits{width:min(1040px,52vw); height:min(1040px,52vw)}
  body[data-page="home"] .hero-divider{max-width:min(600px,34vw)}
}
body[data-page="home"] .hero-orbits circle{fill:none; stroke:var(--hub-gold); stroke-width:1; transition:opacity .4s ease}
/* click-to-ignite easter egg — briefly flare the rings, then settle back */
body[data-page="home"] .hero-orbits.ignited circle{animation:hubRingIgnite 2.2s ease-out}
@keyframes hubRingIgnite{
  0%{opacity:1; stroke-width:1}
  15%{opacity:1; stroke-width:1.8; filter:drop-shadow(0 0 6px var(--hub-gold))}
  100%{opacity:1; stroke-width:1; filter:none}
}
/* the rings pass directly behind the copy — rather than punch a hole in
   them (which just deletes them there), give the text a tight
   background-colored halo so glyphs stay crisp wherever a line crosses */
body[data-page="home"] .hero-eyebrow,
body[data-page="home"] .hero h1,
body[data-page="home"] .hero p,
body[data-page="home"] .hero-cta{
  position:relative; text-shadow:0 0 4px var(--hub-paper), 0 0 4px var(--hub-paper), 0 0 10px var(--hub-paper);
}
body[data-page="home"] .hero-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:clamp(.68rem,.5vw,.85rem); letter-spacing:.32em; text-transform:uppercase;
  color:var(--hub-gold); margin:0 0 1.6rem;
}
body[data-page="home"] .hero-eyebrow::before,
body[data-page="home"] .hero-eyebrow::after{content:'✦'; margin:0 .8rem; opacity:.6}
body[data-page="home"] .hero h1{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(2.2rem,4.6vw,5.4rem);
  line-height:1.15; margin:0 0 1.3rem; text-wrap:balance; color:var(--hub-ink);
}
body[data-page="home"] .hero p{font-size:clamp(1.08rem,1.15vw,1.45rem); line-height:1.75; color:var(--hub-ink); max-width:680px; margin:0 auto 2.2rem}
body[data-page="home"] .hero-ctas{display:flex; justify-content:center; gap:2.4rem; flex-wrap:wrap}
body[data-page="home"] .hero-cta{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--hub-ink); padding-bottom:.3rem; border-bottom:1px solid var(--hub-rule);
  transition:color .2s,border-color .2s;
}
body[data-page="home"] .hero-cta:hover,
body[data-page="home"] .hero-cta:focus-visible{color:var(--hub-gold); border-color:var(--hub-gold)}
body[data-page="home"] p.hero-hint{
  text-align:center; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--hub-ink-dim); margin:4.5rem 0 0; position:relative; z-index:1;
}
/* ── scroll cue · a slow, deliberate bob (not a twitchy bounce), inviting
   a click/tap down to the doors rather than demanding a full scroll.
   Fixed to the hero panel's own bottom-center (absolute, not a flex item
   in the copy stack) so it stays put regardless of how tall the copy
   above it happens to be, instead of drifting with it. */
body[data-page="home"] .hero-scroll-cue{
  position:absolute; left:50%; bottom:3rem; z-index:1;
  width:2.1rem; height:2.1rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--hub-ink-dim);
  border:1px solid var(--hub-rule); text-decoration:none;
  animation:heroScrollCueBob 2.6s ease-in-out infinite;
  transition:color .2s, border-color .2s;
}
body[data-page="home"] .hero-scroll-cue:hover,
body[data-page="home"] .hero-scroll-cue:focus-visible{color:var(--hub-gold); border-color:var(--hub-gold)}
@keyframes heroScrollCueBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(5px)}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .hero-scroll-cue{animation:none}
}
/* ── the beat between hero and doors ── */
body[data-page="home"] .hero-divider{
  position:relative; z-index:1; max-width:min(460px,30vw); margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; gap:1.2rem; color:var(--hub-gold);
  height:4.5rem;
}
body[data-page="home"] .hero-divider span{flex:1; height:1px; background:var(--hub-rule)}
body[data-page="home"] .hero-divider i{font-style:normal; font-size:1rem; opacity:.75}

/* ── three doors ── */
body[data-page="home"] .worlds{
  position:relative; z-index:1; display:flex;
  height:78vh; min-height:480px; max-height:720px;
  scroll-margin-top:4.5rem; border-bottom:1px solid var(--hub-rule);
}
body[data-page="home"] .world{
  position:relative; flex:1; overflow:hidden; background:var(--hub-paper-2); border-right:1px solid var(--hub-rule);
  cursor:pointer; text-decoration:none; display:block; transition:flex 650ms cubic-bezier(.19,.84,.32,1);
}
body[data-page="home"] .world:last-child{border-right:none}
/* .is-active is set by JS with a short hover-intent delay (see hub-doors.js)
   — a quick pass across all three panels no longer triggers a resize on
   each one, only a deliberate pause does. :focus-within stays on raw CSS
   for keyboard users. */
body[data-page="home"] .world.is-active,
body[data-page="home"] .world:focus-within,
body[data-page="home"] .world.is-awake{flex:2.5}
body[data-page="home"] .worlds:has(.world.is-active) .world:not(.is-active),
body[data-page="home"] .worlds:has(.world:focus-within) .world:not(:focus-within){flex:.72}
body[data-page="home"] .world-scrim{position:absolute; inset:0; opacity:0; transition:opacity 650ms ease}
body[data-page="home"] .world.is-active .world-scrim,
body[data-page="home"] .world:focus-within .world-scrim,
body[data-page="home"] .world.is-awake .world-scrim{opacity:1}
body[data-page="home"] .world-dormant{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition:opacity 450ms ease;
}
body[data-page="home"] .world.is-active .world-dormant,
body[data-page="home"] .world:focus-within .world-dormant,
body[data-page="home"] .world.is-awake .world-dormant{opacity:0; pointer-events:none}
/* sits below the (independently-centered) vertical label — "Marginalia"
   set vertically at .72rem/.32em tracking runs close to 9.5rem tall, so
   this needs real clearance below center, not the 1rem gap a flex layout
   would give two stacked siblings */
body[data-page="home"] .world-dormant-peek{
  position:absolute; top:calc(50% + 5.5rem); left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.1em; color:var(--hub-ink-dim);
}

/* ── the label ──
   .world-dormant-label (mono, small) and .world-title (per-door display
   font) are the same word, stacked in the same spot and cross-faded — both
   share one rotate+move animation (dormant: centered, vertical; awake:
   top-left, horizontal, larger) so it reads as a single label turning
   rather than two independent texts. Kept as top-level siblings, not
   descendants of .world-dormant/.world-awake — a parent's opacity:0 hides
   a child outright regardless of the child's own opacity, which would
   silently break the cross-fade if either lived inside those wrappers. */
body[data-page="home"] .world-dormant-label,
body[data-page="home"] .world-title{
  position:absolute; top:50%; left:50%; z-index:2; margin:0; white-space:nowrap; pointer-events:none;
  transform:translate(-50%,-50%) rotate(-90deg);
  transition:transform 650ms cubic-bezier(.19,.84,.32,1), top 650ms cubic-bezier(.19,.84,.32,1),
             left 650ms cubic-bezier(.19,.84,.32,1), font-size 650ms cubic-bezier(.19,.84,.32,1),
             opacity 400ms ease;
}
body[data-page="home"] .world-dormant-label{
  font-family:'JetBrains Mono',monospace; font-weight:500; font-size:.72rem; letter-spacing:.32em;
  color:var(--hub-ink); opacity:1;
}
body[data-page="home"] .world-title{font-size:.72rem; line-height:1.05; opacity:0; text-wrap:balance}
body[data-page="home"] .world.is-active .world-dormant-label,
body[data-page="home"] .world:focus-within .world-dormant-label,
body[data-page="home"] .world.is-awake .world-dormant-label,
body[data-page="home"] .world.is-active .world-title,
body[data-page="home"] .world:focus-within .world-title,
body[data-page="home"] .world.is-awake .world-title{
  top:2.3rem; left:2.2rem; transform:translate(0,0) rotate(0deg);
}
body[data-page="home"] .world.is-active .world-dormant-label,
body[data-page="home"] .world:focus-within .world-dormant-label,
body[data-page="home"] .world.is-awake .world-dormant-label{opacity:0}
body[data-page="home"] .world.is-active .world-title,
body[data-page="home"] .world:focus-within .world-title,
body[data-page="home"] .world.is-awake .world-title{opacity:1}

body[data-page="home"] .world-awake{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:2.4rem 2.2rem; opacity:0; transform:translateY(10px);
  transition:opacity 450ms ease 80ms, transform 450ms ease 80ms;
}
body[data-page="home"] .world.is-active .world-awake,
body[data-page="home"] .world:focus-within .world-awake,
body[data-page="home"] .world.is-awake .world-awake{opacity:1; transform:translateY(0)}
body[data-page="home"] .world-eyebrow{font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; margin:0 0 .9rem}
body[data-page="home"] .world-tagline{margin:0 0 1.6rem; line-height:1.6; max-width:32ch}
body[data-page="home"] .world-enter{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.5rem; padding-bottom:.25rem; border-bottom:1px solid currentColor; width:fit-content;
}

/* Library — the flame + Hades door art (not the book cover photo itself,
   which already lives on the book's own page), plus a corner-bracket frame. */
body[data-page="home"] .world-lib .world-scrim{background-color:var(--be-bg); background-image:linear-gradient(180deg,var(--be-bg) 0%,var(--be-bg-2) 100%)}
body[data-page="home"] .cover-art{
  position:absolute; left:50%; bottom:0; width:auto; height:86%; aspect-ratio:565/850; transform:translateX(-50%);
  background-image:url('/images/library-door-art.png');
  background-size:contain; background-repeat:no-repeat; background-position:bottom center;
  opacity:0; transition:opacity 600ms ease;
}
body[data-page="home"] .world.is-active .cover-art,
body[data-page="home"] .world:focus-within .cover-art,
body[data-page="home"] .world.is-awake .cover-art{opacity:1}
body[data-page="home"] .world-lib .world-frame{position:absolute; inset:1rem; z-index:1; pointer-events:none; opacity:0; transition:opacity 500ms ease 150ms}
body[data-page="home"] .world.is-active.world-lib .world-frame,
body[data-page="home"] .world.world-lib:focus-within .world-frame,
body[data-page="home"] .world.is-awake.world-lib .world-frame{opacity:.55}
body[data-page="home"] .world-lib .world-frame::before,
body[data-page="home"] .world-lib .world-frame::after{content:''; position:absolute; width:1.6rem; height:1.6rem; border-color:var(--be-flame); border-style:solid; border-width:0}
body[data-page="home"] .world-lib .world-frame::before{top:0; left:0; border-top-width:1.5px; border-left-width:1.5px}
body[data-page="home"] .world-lib .world-frame::after{bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px}
body[data-page="home"] .world-lib .world-eyebrow{color:var(--be-text)}
body[data-page="home"] .world-lib .world-title{font-family:'Fraunces',serif; font-weight:600; color:var(--be-text); text-shadow:0 2px 10px rgba(0,0,0,.6)}
body[data-page="home"] .world.is-active.world-lib .world-title,
body[data-page="home"] .world.world-lib:focus-within .world-title,
body[data-page="home"] .world.is-awake.world-lib .world-title{font-size:clamp(1.5rem,3vw,2.1rem)}
body[data-page="home"] .world-lib .world-tagline{font-family:'Lora',serif; font-style:italic; font-size:1.05rem; color:var(--be-text-dim); text-shadow:0 1px 8px rgba(0,0,0,.5)}
body[data-page="home"] .world-lib .world-enter{color:var(--be-text)}

/* Marginalia */
body[data-page="home"] .world-mg .world-scrim{
  background:repeating-linear-gradient(180deg,rgba(32,30,26,.05) 0 1px,transparent 1px 34px), linear-gradient(180deg,var(--mg-bg) 0%,var(--mg-bg-2) 100%);
}
body[data-page="home"] .world-mg .world-eyebrow{color:var(--mg-accent)}
body[data-page="home"] .world-mg .world-title{font-family:'Playfair Display',serif; font-weight:800; color:var(--mg-ink)}
body[data-page="home"] .world.is-active.world-mg .world-title,
body[data-page="home"] .world.world-mg:focus-within .world-title,
body[data-page="home"] .world.is-awake.world-mg .world-title{font-size:clamp(1.6rem,3.2vw,2.3rem)}
body[data-page="home"] .world-mg .world-tagline{font-family:'PT Serif',serif; font-size:1.02rem; color:var(--mg-ink-dim)}
body[data-page="home"] .world-mg .world-enter{color:var(--mg-ink)}

/* Forge */
body[data-page="home"] .world-fg .world-scrim{
  background:
    linear-gradient(135deg,rgba(61,107,95,.12) 0%,transparent 45%),
    repeating-linear-gradient(0deg,rgba(61,107,95,.07) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,rgba(61,107,95,.07) 0 1px,transparent 1px 28px),
    linear-gradient(180deg,var(--fg-bg) 0%,var(--fg-bg-2) 100%);
}
body[data-page="home"] .world-fg .world-eyebrow{color:var(--fg-accent)}
body[data-page="home"] .world-fg .world-title{font-family:'IBM Plex Sans',sans-serif; font-weight:600; color:var(--fg-ink)}
body[data-page="home"] .world.is-active.world-fg .world-title,
body[data-page="home"] .world.world-fg:focus-within .world-title,
body[data-page="home"] .world.is-awake.world-fg .world-title{font-size:clamp(1.5rem,3vw,2.1rem)}
body[data-page="home"] .world-fg .world-tagline{font-family:'IBM Plex Sans',sans-serif; font-size:1rem; color:var(--fg-ink-dim)}
body[data-page="home"] .world-fg .world-enter{color:var(--fg-ink)}

/* Stacked/scroll-driven layout for phones AND tablets — matched by width
   for narrow windows, and by (hover:none) so touch tablets get it
   regardless of width, since they can't hover to wake a panel. Dormant
   strips stay compact (tall enough for the rotated vertical label); the
   awake panel grows to a real majority of the viewport instead of holding
   the same fixed height as dormant, so it reads as the same kind of
   "arrival" moment hover gives on desktop, just scroll-triggered.
   Height is a hard SNAP, not a transition — animating it fights the
   user's own scroll gesture: as a panel collapses out from under them
   mid-scroll, the ~450px it gives back yanks the rest of the page up
   underneath the pointer, which can skip right past the next panel's
   trigger line before the wheel gesture even finishes. Content (rotation/
   opacity/fonts) still animates smoothly; only this dimension doesn't. */
@media(max-width:1024px), (hover:none){
  body[data-page="home"] .worlds{flex-direction:column; height:auto; max-height:none}
  body[data-page="home"] .world{
    border-right:none; border-bottom:1px solid var(--hub-rule);
    height:170px; flex:none !important;
  }
  body[data-page="home"] .world.is-active,
  body[data-page="home"] .world:focus-within,
  body[data-page="home"] .world.is-awake{height:min(72vh,620px)}
  body[data-page="home"] .world:last-child{border-bottom:none}
  /* tighter tracking so "Marginalia" (the longest label) clears a 170px
     strip when rotated vertical — the desktop letter-spacing (.32em) needs
     a much taller panel to run without clipping */
  body[data-page="home"] .world-dormant-label{letter-spacing:.16em; font-size:.68rem}
  body[data-page="home"] .world-dormant-peek{position:absolute; bottom:.9rem; right:1.1rem}
  body[data-page="home"] .world-awake{padding:1.8rem}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .world,
  body[data-page="home"] .world-scrim,
  body[data-page="home"] .world-dormant,
  body[data-page="home"] .world-dormant-label,
  body[data-page="home"] .world-title,
  body[data-page="home"] .world-awake,
  body[data-page="home"] .world-frame,
  body[data-page="home"] .cover-art{transition:none; animation:none}
}

/* ══ Shared .section/.sec-* layout — Marginalia's Latest Writing and
   Forge's relocated ledger/instruments/colophon sections ══ */
body[data-page="marginalia"] .section,
body[data-page="projects"] .section{max-width:1280px;margin:0 auto;padding:3rem 4rem}
body[data-page="marginalia"] .sec-head,
body[data-page="projects"] .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2.6rem;flex-wrap:wrap}
body[data-page="marginalia"] .sec-title,
body[data-page="projects"] .sec-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2rem,3.4vw,3rem);line-height:1.1;color:var(--text)}
body[data-page="marginalia"] .sec-title em,
body[data-page="projects"] .sec-title em{font-style:italic;color:var(--gold)}
body[data-page="marginalia"] .sec-note,
body[data-page="projects"] .sec-note{font-family:'Lato',sans-serif;font-size:.92rem;color:var(--text-dim);max-width:320px;text-align:right;line-height:1.7}

/* ══ BOOK — the Blue Ember centerpiece: cover-forward, not a small cover
   thumbnail beside a wall of text. Deliberately always night (looks better
   as a permanent dark plate than following the page theme, same call as
   the shelf-band and door art). Two doors out: buy/read the book itself
   (the shelf's product page) and go deeper into the series world. ══ */
body[data-page="library"] .book-wrap{display:block;max-width:1100px;margin:0 auto;padding:0 2rem}
body[data-page="library"] .book-plate{position:relative;border:1px solid rgba(111,168,224,.32);border-radius:8px;overflow:hidden;background:linear-gradient(135deg,rgba(20,24,40,.72),rgba(10,12,22,.78));padding:3rem;display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center;box-shadow:0 30px 70px -34px rgba(0,0,0,.7);transition:border-color .35s}
body[data-page="library"] .book-plate:hover{border-color:rgba(111,168,224,.5)}
body[data-page="library"] .book-plate::before{content:'';position:absolute;inset:9px;border:1px solid rgba(111,168,224,.18);border-radius:5px;pointer-events:none}
body[data-page="library"] .book-eyebrow{font-family:var(--font-label);font-weight:700;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#8fc0f4;margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
body[data-page="library"] .book-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,3.6vw,3.4rem);color:#f1ead9;line-height:1.05;letter-spacing:0;margin-bottom:.5rem}
body[data-page="library"] .book-sub{font-family:var(--font-label);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#5e95dd;margin-bottom:1.2rem}
body[data-page="library"] .book-desc{font-family:var(--font-body);color:#c4bcd0;font-size:1.05rem;line-height:1.75;max-width:520px;margin-bottom:1.3rem}
body[data-page="library"] .book-desc strong{color:#e9e2d4;font-weight:700}
body[data-page="library"] .book-desc em{font-style:italic;color:#8fc0f4}
body[data-page="library"] .book-count{font-family:var(--font-label);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8fc0f4;margin-bottom:1.4rem}
body[data-page="library"] .book-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
body[data-page="library"] .book-cta-primary{display:inline-block;text-decoration:none;font-family:var(--font-label);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#0c0f18;background:#8fc0f4;border-radius:4px;padding:.85rem 1.5rem;transition:background .25s,transform .25s}
body[data-page="library"] .book-cta-primary:hover{background:#b7d8fb;transform:translateY(-2px)}

/* ══ EMBERS — soft blue motes rising behind the Blue Ember teaser ══ */
body[data-page="library"] .book-plate.ember{position:relative;overflow:hidden}
body[data-page="library"] .book-plate.ember>*:not(.book-embers){position:relative;z-index:1}
body[data-page="library"] .book-embers{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body[data-page="library"] .book-embers::after{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;background:radial-gradient(120% 90% at 50% 120%,rgba(111,168,224,.22),rgba(111,168,224,.06) 45%,transparent 70%)}
body[data-page="library"] .bspark{position:absolute;bottom:-6%;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,rgba(180,214,255,.95),rgba(111,168,224,.55) 55%,transparent 75%);box-shadow:0 0 8px rgba(143,192,244,.7);opacity:0;animation:bookEmberRise 9s linear infinite}
body[data-page="library"] .bspark:nth-child(1){left:12%;animation-duration:8.5s;animation-delay:0s}
body[data-page="library"] .bspark:nth-child(2){left:24%;animation-duration:11s;animation-delay:1.6s;width:3px;height:3px}
body[data-page="library"] .bspark:nth-child(3){left:38%;animation-duration:9.8s;animation-delay:3.2s}
body[data-page="library"] .bspark:nth-child(4){left:52%;animation-duration:12.5s;animation-delay:.8s;width:4px;height:4px}
body[data-page="library"] .bspark:nth-child(5){left:66%;animation-duration:8.8s;animation-delay:4.4s;width:3px;height:3px}
body[data-page="library"] .bspark:nth-child(6){left:78%;animation-duration:10.6s;animation-delay:2.4s}
body[data-page="library"] .bspark:nth-child(7){left:88%;animation-duration:13s;animation-delay:5.5s;width:4px;height:4px}
@keyframes bookEmberRise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.9}
  70%{opacity:.7}
  100%{transform:translateY(-340px) translateX(14px);opacity:0}
}

body[data-page="library"] .be-book-card>*:not(.book-embers){position:relative;z-index:1}
body[data-page="library"] .lib-shelf-band .book-embers{z-index:1}
body[data-page="library"] .lib-shelf-band .lib-shelf-hint{z-index:2}
body[data-page="library"] .lib-shelf-band .bspark{width:8px!important;height:8px!important}
body[data-page="library"] .lib-shelf-band .bspark:nth-child(even){width:5px!important;height:5px!important}
body[data-page="library"] .lib-shelf-band .book-embers::after{height:80%}
body[data-page="library"].light-mode .lib-shelf-band .book-embers::after{background:radial-gradient(120% 90% at 50% 120%,rgba(30,90,170,.32),rgba(30,90,170,.1) 45%,transparent 70%)}
body[data-page="library"].light-mode .lib-shelf-band .bspark{background:radial-gradient(circle,rgba(70,140,230,1),rgba(30,90,180,.75) 55%,transparent 75%);box-shadow:0 0 10px rgba(30,100,200,.75)}
@media (prefers-reduced-motion: reduce){
  body[data-page="library"] .bspark{animation:none;opacity:0}
}

/* ══ LATEST WRITING — newest essays (always night: it lives in the dusk band) ══ */
body[data-page="home"] .latest .legend{color:#9aa8d6}
body[data-page="home"] .latest .sec-title{color:#f1ead9}
body[data-page="home"] .latest .sec-title em{color:#d8b56a}
body[data-page="home"] .latest .sec-note{color:#cdc5d6}
body[data-page="marginalia"] .writing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
body[data-page="marginalia"] .writing-card{display:flex;flex-direction:column;border:1px solid rgba(216,181,106,.2);border-radius:6px;padding:1.6rem 1.6rem 1.4rem;background:linear-gradient(135deg,rgba(30,26,46,.72),rgba(18,15,28,.78));backdrop-filter:blur(3px);text-decoration:none;color:inherit;transition:transform .3s,border-color .3s,box-shadow .3s;box-shadow:0 22px 50px -30px rgba(0,0,0,.7)}
body[data-page="marginalia"] .writing-card:hover{transform:translateY(-4px);border-color:rgba(216,181,106,.5);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
body[data-page="marginalia"] .wc-tag{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#5fcaa9;margin-bottom:.7rem}
body[data-page="marginalia"] .wc-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.5rem;line-height:1.2;color:#f1ead9;margin-bottom:.6rem}
body[data-page="marginalia"] .wc-preview{font-family:'Lato',sans-serif;font-size:.88rem;line-height:1.7;color:#cdc5d6;margin-bottom:1.1rem}
body[data-page="marginalia"] .wc-meta{margin-top:auto;display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:#9aa8d6;opacity:.85}

/* ══ BOOK COVER — large, cover-forward; a plain gradient + the title
   stands in until a cover is supplied (js/library.js clears the text once
   a real cover_image loads) ══ */
body[data-page="library"] .book-cover{
  position:relative;border-radius:6px;overflow:hidden;aspect-ratio:2/3;width:100%;
  background:linear-gradient(135deg,#0D1226,#1A2456);box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem;
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:#dceafb;
}

/* ── responsive ── */
@media(max-width:1040px){
  body[data-page="marginalia"] .writing-cards{grid-template-columns:1fr}
}
@media(max-width:900px){
  body[data-page="library"] .book-plate{grid-template-columns:1fr;gap:2rem}
  body[data-page="library"] .book-cover{max-width:280px;margin:0 auto}
}
@media(max-width:768px){
  body[data-page="home"] .hero,
  body[data-page="home"] .section,
  body[data-page="home"] .divider{padding-left:1.5rem;padding-right:1.5rem}
}

/* ══════════════════════════════════════════════════════════════════
   ABOUT — "Plate II · The Cartographer"
   Flat themed page (parchment ☀ / night 🌙, flips with toggle).
   ══════════════════════════════════════════════════════════════════ */
body[data-page="about"]{position:relative}
body[data-page="about"] main{position:relative;z-index:1}

/* map-legend helpers */
body[data-page="about"] .legend{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--iron,#46506e)}
body[data-page="about"] .coord{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;color:var(--text-dim);opacity:.85}
body[data-page="about"]:not(.light-mode) .legend{color:#9aa8d6}

/* drop the grid (no place on a codex plate) */
body[data-page="about"] .hub-pattern{display:none !important}
/* soft colored wash behind the leaf — flips per theme, sits under the cards */
body[data-page="about"] .hub-bg{z-index:0;opacity:1}
body[data-page="about"].light-mode .hub-bg{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(var(--gold-rgb),.20), transparent 55%),
    linear-gradient(180deg, rgba(var(--gold-rgb),.10) 0%, transparent 34%, rgba(var(--teal-rgb),.07) 100%);
}
body[data-page="about"]:not(.light-mode) .hub-bg{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(86,98,168,.42), transparent 58%),
    linear-gradient(180deg, rgba(40,48,92,.55) 0%, rgba(20,22,40,.30) 46%, rgba(var(--gold-rgb),.10) 100%);
}

/* ══════════════════════════════════════════════════════════
   ABOUT — same paper/ink palette and type pairing as the hub
   homepage (Cormorant Garamond + JetBrains Mono over --hub-*
   tokens), no invented metaphor system: plain section labels,
   a photo, prose, a timeline, and the real goals behind it.
   ══════════════════════════════════════════════════════════ */
body[data-page="about"] .about-hero{
  max-width:1040px; margin:0 auto; padding:5rem 2rem 3.5rem;
  display:grid; grid-template-columns:1.3fr .9fr; gap:3.5rem; align-items:center;
}
body[data-page="about"] .hero-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--hub-gold); margin:0 0 1.2rem;
}
body[data-page="about"] .about-hero h1{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(1.9rem,3.6vw,2.7rem);
  line-height:1.2; margin:0 0 1.2rem; text-wrap:balance; color:var(--hub-ink);
}
body[data-page="about"] .about-lede{font-size:1.02rem; line-height:1.75; color:var(--hub-ink-dim); margin:0 0 1.6rem}
body[data-page="about"] .about-tags{display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem}
body[data-page="about"] .about-tag{
  font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hub-ink-dim); border:1px solid var(--hub-rule); border-radius:3px; padding:.4rem .8rem;
}
body[data-page="about"] .hero-ctas{display:flex; gap:2rem; flex-wrap:wrap}
body[data-page="about"] .hero-cta{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--hub-ink); padding-bottom:.3rem; border-bottom:1px solid var(--hub-rule);
  transition:color .2s,border-color .2s;
}
body[data-page="about"] .hero-cta:hover,
body[data-page="about"] .hero-cta:focus-visible{color:var(--hub-gold); border-color:var(--hub-gold)}
/* photo.jpg is a square (512x512) source — match that aspect exactly so
   nothing gets cropped; forcing a taller 4:5 box cut off the top of his
   head on mobile once the hero collapsed to one column. */
body[data-page="about"] .about-photo{
  position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--hub-rule);
  /* a generic .about-photo{width:500px;height:500px} rule elsewhere on the
     site otherwise wins the cascade on both properties and defeats
     aspect-ratio entirely (it only applies when a dimension is auto) */
  width:100%; height:auto; aspect-ratio:1/1;
  max-width:340px; margin:0 auto;
}
body[data-page="about"] .about-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.95) contrast(1.02)}
@media(min-width:901px){
  body[data-page="about"] .about-photo{max-width:none; margin:0}
}

/* ── section label — the one recurring structural device, plain and small ── */
body[data-page="about"] .about-section{max-width:720px; margin:0 auto; padding:4rem 2rem}
body[data-page="about"] .about-section-wide{max-width:900px}
body[data-page="about"] .rule-top{border-top:1px solid var(--hub-rule)}
body[data-page="about"] .about-label{
  font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--hub-gold); margin:0 0 2rem;
}

/* ── background prose ── */
body[data-page="about"] .prose{max-width:720px; margin:0 auto; padding:0 2rem 3.5rem}
body[data-page="about"] .prose p{font-size:1.02rem; line-height:1.85; color:var(--hub-ink-dim); margin-bottom:1.3rem}
body[data-page="about"] .prose p:last-child{margin-bottom:0}
body[data-page="about"] .prose strong{color:var(--hub-ink); font-weight:600}
body[data-page="about"] .pull-quote{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; font-size:1.4rem; line-height:1.5;
  color:var(--hub-gold); border-left:2px solid var(--hub-gold); padding:.3rem 0 .3rem 1.4rem; margin:1.8rem 0;
}
body[data-page="projects"] .ledger{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:6px;padding:1.8rem 1.8rem;background:rgba(255,250,238,.5)}
body[data-page="projects"]:not(.light-mode) .ledger{background:rgba(34,28,46,.5);border-color:rgba(216,181,106,.18)}
body[data-page="projects"] .led-item{position:relative;flex:1;display:flex;align-items:center;padding:.6rem 0;border-top:1px solid var(--border);cursor:default}
body[data-page="projects"] .led-item:first-of-type{border-top:none}
body[data-page="projects"] .led-num{font-family:'Cormorant Garamond',serif;font-size:1.7rem;font-weight:400;color:var(--teal);line-height:1;margin-right:.7rem}
body[data-page="projects"] .led-item.depth .led-num{color:var(--gold)}
body[data-page="projects"] .led-lbl{font-family:'Lato',sans-serif;font-size:.92rem;color:var(--text)}
body[data-page="projects"] .led-tip{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:.7rem .85rem;font-family:'Lato',sans-serif;font-size:.78rem;line-height:1.55;color:var(--text-dim);box-shadow:0 12px 30px -16px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .22s,transform .22s,visibility .22s;z-index:5;pointer-events:none}
body[data-page="projects"] .led-item:hover .led-tip{opacity:1;visibility:visible;transform:translateY(0)}

/* ── timeline ──
   Dot is centered on the rail line: line sits at left:4px (1px wide, so its
   center is at 4.5px from the list's own left edge); the list's own
   padding-left (1.5rem = 24px) is where each .tl-item's box starts, so the
   dot's `left` (measured from THAT edge) has to be -25px, not the -24px +
   translateX(-4.5px) combo this had before — that stacked to -28.5px and
   put the dot noticeably left of the line instead of on it. */
body[data-page="about"] .timeline{list-style:none;margin:0;padding:0 0 0 1.5rem;position:relative}
body[data-page="about"] .timeline::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,var(--hub-rule) 12%,var(--hub-rule) 88%,transparent)}
body[data-page="about"] .tl-item{position:relative;padding:0 0 2.2rem 1.8rem}
body[data-page="about"] .tl-item:last-child{padding-bottom:0}
body[data-page="about"] .tl-dot{position:absolute;left:-25px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--hub-gold)}
body[data-page="about"] .tl-item.next .tl-dot{background:none;border:1.5px solid var(--hub-gold)}
body[data-page="about"] .tl-year{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hub-gold);display:block;margin-bottom:.35rem}
body[data-page="about"] .tl-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.35rem;line-height:1.2;color:var(--hub-ink);margin-bottom:.35rem}
body[data-page="about"] .tl-body{font-size:.92rem;line-height:1.7;color:var(--hub-ink-dim)}

/* ── what's next — three quiet columns, not cards, for rhythm against the
   single-column prose/timeline above and below it ── */
body[data-page="about"] .goals{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
body[data-page="about"] .goal-item{padding-top:1.4rem;border-top:1px solid var(--hub-rule)}
body[data-page="about"] .goal-title{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:500;line-height:1.15;margin-bottom:.6rem;color:var(--hub-ink)}
body[data-page="about"] .goal-desc{font-size:.9rem;color:var(--hub-ink-dim);line-height:1.7}
@media(max-width:768px){
  body[data-page="about"] .goals{grid-template-columns:1fr;gap:1.8rem}
}

/* ── the reason — a full-bleed tonal band (like the doors row), not a
   bordered card, so the page gets one deliberate beat of visual rest
   instead of reading as one continuous column of paragraphs ── */
body[data-page="about"] .mission{background:var(--hub-paper-2); border-top:1px solid var(--hub-rule); border-bottom:1px solid var(--hub-rule)}
body[data-page="about"] .mission .about-section{padding-top:4rem; padding-bottom:4rem}
body[data-page="about"] .mission-title{
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(1.5rem,2.6vw,1.9rem);line-height:1.25;
  color:var(--hub-ink);margin-bottom:1.2rem;text-wrap:balance;
}
body[data-page="about"] .prose-text{font-size:1.02rem;color:var(--hub-ink-dim);line-height:1.85;margin-bottom:1.3rem}
body[data-page="about"] .prose-text:last-child{margin-bottom:0}

/* ── THE INSTRUMENTS · two ink columns ── */
body[data-page="projects"] .skills-cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
body[data-page="projects"] .scol-lbl{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.4rem;padding-bottom:.7rem;border-bottom:1px solid var(--border)}
body[data-page="projects"] .scol-lbl.logic{color:var(--teal)}
body[data-page="projects"] .scol-lbl.logic::before{content:'// ';opacity:.6}
body[data-page="projects"] .scol-lbl.depth{color:var(--gold)}
body[data-page="projects"] .scol-lbl.depth::before{content:'✦ ';opacity:.7}
body[data-page="projects"] .skill-row{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
body[data-page="projects"] .skill-name{font-family:'Lato',sans-serif;font-size:.88rem;color:var(--text);width:170px;flex-shrink:0}
body[data-page="projects"] .sbw{flex:1;height:5px;border-radius:3px;background:rgba(var(--gold-rgb),.12);overflow:hidden}
body[data-page="projects"] .sb{height:100%;width:0;border-radius:3px;transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
body[data-page="projects"] .sb.logic{background:linear-gradient(90deg,var(--teal-dim),var(--teal))}
body[data-page="projects"] .sb.depth{background:linear-gradient(90deg,var(--gold-dim),var(--gold))}
body[data-page="projects"] .skill-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
body[data-page="projects"] .stag{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:.3rem .7rem;border:1px solid transparent}
body[data-page="projects"] .stag.logic{color:var(--teal);border-color:rgba(var(--teal-rgb),.3);background:rgba(var(--teal-rgb),.08)}
body[data-page="projects"] .stag.depth{color:var(--gold);border-color:rgba(var(--gold-rgb),.3);background:rgba(var(--gold-rgb),.08)}

/* ── OFF THE CLOCK · colophon marginalia ── */

/* ── responsive ── */
@media(max-width:900px){
  body[data-page="about"] .about-hero{grid-template-columns:1fr;gap:2rem;padding-top:3.5rem}
}

/* ═══ FORGE · forge.calebthede.com ═══
   Matches the identity the hub's own "Three Doors" homepage already
   committed to for this world (--fg-* tokens, body[data-page="home"]) —
   muted forest/pine green (--fg-accent:#3d6b5f) with IBM Plex Sans
   throughout, rather than inventing a separate palette (the mistake made
   on the first Marginalia pass). Secondary accent is a warm copper/rust —
   an actual forge's own second material, iron warmed by fire, pairing
   against the cool green. Light mode reuses the hub's exact values; dark
   mode is my own extension, same hue brightened for a near-black ground.
   Clean-cut and technical: a faint blueprint grid instead of a soft
   painterly wash, sharp corner-bracket registration marks on every card
   (extending the .ph-corner mark already used on banner images to the
   cards themselves), no invented "Atlas/Chart" plate language. */
body[data-page="projects"]{
  --bg:#0f1412; --bg2:#1a211d; --bg3:#252e28;
  --text:#e2e8e3; --text-dim:#8fa096;
  --teal:#5cad8f; --teal-rgb:92,173,143; --teal-dim:#3d6b5f;
  --gold:#d98a5c; --gold-rgb:217,138,92; --gold-dim:#a8623a;
  --border:rgba(92,173,143,.26);
  --nav-bg:rgba(15,20,18,.92); --modal-bg:#1a211d; --input-bg:#252e28; --skills-bg:#1a211d;
  --font-display:'IBM Plex Sans',sans-serif; --font-body:'IBM Plex Sans',sans-serif; --font-label:'IBM Plex Mono',monospace;
  position:relative; background:var(--bg) !important;
}
body[data-page="projects"].light-mode{
  --bg:#e7ece7; --bg2:#d7e0d8; --bg3:#c7d3c8;
  --text:#1c2321; --text-dim:#57645f;
  --teal:#3d6b5f; --teal-rgb:61,107,95; --teal-dim:#6b998a;
  --gold:#a8623a; --gold-rgb:168,98,58; --gold-dim:#c98f68;
  --border:rgba(61,107,95,.22);
  --nav-bg:rgba(231,236,231,.96); --modal-bg:#d7e0d8; --input-bg:#c7d3c8; --skills-bg:#d7e0d8;
  background:var(--bg) !important;
}
body[data-page="projects"] main{position:relative; z-index:1; background-color:var(--bg);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(var(--teal-rgb),.08) 31px, rgba(var(--teal-rgb),.08) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(var(--teal-rgb),.08) 31px, rgba(var(--teal-rgb),.08) 32px);
}
body[data-page="projects"] .legend{font-family:var(--font-label); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim)}
body[data-page="projects"] .hub-pattern,
body[data-page="projects"] .hub-bg{display:none !important}
body[data-page="projects"] footer{
  --bg2:#1a211d; --text:#e2e8e3; --text-dim:#8fa096;
  --gold:#d98a5c; --gold-rgb:217,138,92; --teal:#5cad8f; --teal-rgb:92,173,143;
  --border:rgba(92,173,143,.18);
  background:var(--bg2) !important; border-top:1px solid var(--border); margin-top:0;
}
body[data-page="projects"].light-mode footer{
  --bg2:#d7e0d8; --text:#1c2321; --text-dim:#57645f;
  --gold:#a8623a; --gold-rgb:168,98,58; --teal:#3d6b5f; --teal-rgb:61,107,95;
  --border:rgba(61,107,95,.16);
  background:var(--bg2) !important; border-top:1px solid var(--border);
}

/* ── shared site chrome — same fix as Library/Marginalia ── */
body[data-page="projects"] .modal-title{font-family:var(--font-display); font-weight:700}
body[data-page="projects"] .mf label{font-family:var(--font-label)}
body[data-page="projects"] .mf input,
body[data-page="projects"] .mf textarea,
body[data-page="projects"] .mf select{font-family:var(--font-body)}
body[data-page="projects"] .btn-primary,
body[data-page="projects"] .btn-ghost,
body[data-page="projects"] .btn-sm,
body[data-page="projects"] .admin-badge,
body[data-page="projects"] .toast{font-family:var(--font-label)}

/* ── bespoke header (same pattern as Library/Marginalia) ── */
body[data-page="projects"] .lib-head{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem; background:var(--nav-bg); backdrop-filter:blur(7px);
  border-bottom:1px solid var(--border);
}
body[data-page="projects"] .lib-head-mark{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; min-width:0}
body[data-page="projects"] .lib-head-hub{font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--text-dim); text-decoration:none; transition:color .2s; white-space:nowrap}
body[data-page="projects"] .lib-head-hub:hover{color:var(--teal)}
body[data-page="projects"] .lib-head-sep{color:var(--border); font-size:1rem}
body[data-page="projects"] .lib-head-crumb-current{font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--teal); white-space:nowrap}
body[data-page="projects"] .lib-head-controls{display:flex; align-items:center; gap:.6rem}
body[data-page="projects"] .admin-link{
  font-family:var(--font-label); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); text-decoration:none; border:1px solid var(--border); border-radius:3px; padding:.4rem .7rem;
  transition:border-color .2s;
}
body[data-page="projects"] .admin-link:hover{border-color:var(--teal)}
@media(max-width:480px){
  body[data-page="projects"] .lib-head{padding:1rem 1.2rem; gap:.6rem}
  body[data-page="projects"] .lib-head-hub{font-size:1.05rem}
  body[data-page="projects"] .lib-head-crumb-current{font-size:.95rem}
}

/* ── hero · editorial text block + dictionary legend card ── */
body[data-page="projects"] .atlas-hero{max-width:1180px;margin:0 auto;padding:5rem 4rem 1rem;display:grid;grid-template-columns:1.32fr .68fr;gap:3.4rem;align-items:center}
body[data-page="projects"] .atlas-headline{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.2rem,3.8vw,3.2rem);line-height:1.1;letter-spacing:-.01em;color:var(--text);margin:0 0 1.1rem}
body[data-page="projects"] .atlas-headline em{font-style:italic;color:var(--teal)}
body[data-page="projects"] .atlas-lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:1.4rem;line-height:1.55;color:var(--text-dim);margin:0 0 1.1rem;max-width:560px}
body[data-page="projects"] .atlas-body{font-family:'Lato',sans-serif;font-size:1rem;color:var(--text-dim);max-width:540px;line-height:1.85;margin:0 0 1.6rem}
body[data-page="projects"] .atlas-body strong{color:var(--text);font-weight:700}
body[data-page="projects"] .ink-tags{display:flex;flex-wrap:wrap;gap:.7rem}
body[data-page="projects"] .ink{display:inline-flex;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .9rem;border-radius:3px;border:1px solid transparent}
body[data-page="projects"] .ink .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
body[data-page="projects"] .ink.logic{background:rgba(var(--teal-rgb),.1);border-color:rgba(var(--teal-rgb),.3);color:var(--teal)}
body[data-page="projects"] .ink.logic .dot{background:var(--teal)}
body[data-page="projects"] .ink.depth{background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.3);color:var(--gold)}
body[data-page="projects"] .ink.depth .dot{background:var(--gold)}

/* legend card (right of hero) — a dictionary plate that doubles as a live tally */
body[data-page="projects"] .atlas-legend{position:relative;border:1px solid var(--border);border-radius:6px;padding:1.6rem 1.7rem;background:rgba(255,250,238,.55);box-shadow:0 18px 50px -28px rgba(80,55,20,.55)}
body[data-page="projects"]:not(.light-mode) .atlas-legend{background:rgba(34,28,46,.5);border-color:rgba(216,181,106,.22);box-shadow:0 18px 50px -28px rgba(0,0,0,.7)}
body[data-page="projects"] .atlas-legend::before{content:'';position:absolute;inset:7px;border:1px solid rgba(var(--gold-rgb),.18);border-radius:4px;pointer-events:none}
body[data-page="projects"] .alc-cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}
body[data-page="projects"] .alc-cap .t{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--gold)}
body[data-page="projects"] .alc-cap .coord{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;color:var(--text-dim);opacity:.85}
body[data-page="projects"] .alc-def{font-family:'Lato',sans-serif;font-size:.86rem;line-height:1.6;color:var(--text-dim);margin:0 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
body[data-page="projects"] .alc-def .pos{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--teal);margin-right:.35rem}
body[data-page="projects"] .alc-row{display:flex;justify-content:space-between;align-items:baseline;padding:.4rem 0}
body[data-page="projects"] .alc-row .k{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
body[data-page="projects"] .alc-row .v{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--text);line-height:1}
body[data-page="projects"] .alc-row.prog .v{color:var(--teal)}
body[data-page="projects"] .alc-row.ship .v{color:var(--gold)}

body[data-page="projects"] .atlas-admin-bar{max-width:1180px;margin:1.4rem auto 0;padding:0 4rem;display:flex;justify-content:flex-end}

/* ── codex flourish divider (group headers) ── */
body[data-page="projects"] .divider{max-width:1180px;margin:0 auto;padding:2.4rem 4rem 1.4rem;display:flex;align-items:center;gap:1.2rem;color:var(--text-dim)}
body[data-page="projects"] .divider .legend{white-space:nowrap}
body[data-page="projects"] .divider .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.5),transparent)}
body[data-page="projects"] .divider .count{font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.12em;color:var(--text-dim);opacity:.7;white-space:nowrap}

/* ── group + grid ── */
body[data-page="projects"] .atlas-group{max-width:1180px;margin:0 auto;padding:.4rem 4rem}
body[data-page="projects"] .atlas-featured{max-width:1180px;margin:0 auto;padding:.4rem 4rem}
/* the regular list is a spec-sheet manifest — stacked rows, not a card
   grid — so it reads like a build log and scans faster once there's more
   than a handful of entries. The featured project below is the one
   deliberate exception, kept as a card so it still stands apart. */
body[data-page="projects"] .atlas-grid{display:flex; flex-direction:column}
body[data-page="projects"] .apl-row{
  display:grid; grid-template-columns:60px 1fr 200px; gap:1.6rem; align-items:start;
  padding:1.5rem 0; border-top:1px solid var(--border); position:relative;
}
body[data-page="projects"] .atlas-group .apl-row:last-child{border-bottom:1px solid var(--border)}
body[data-page="projects"] .apl-row:hover{background:rgba(var(--teal-rgb),.05)}
body[data-page="projects"] .apl-row-thumb{
  width:56px; height:56px; border-radius:4px; background-color:var(--bg3); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--border);
  font-family:var(--font-label); font-size:.85rem; font-weight:500; color:var(--teal);
}
body[data-page="projects"] .apl-row-main{min-width:0}
body[data-page="projects"] .apl-row-head{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.25rem}
body[data-page="projects"] .apl-row-title{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--text); margin:0}
body[data-page="projects"] .apl-row-sub{font-family:var(--font-label); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin:0 0 .6rem}
body[data-page="projects"] .apl-row-desc{font-family:var(--font-body); font-size:.9rem; line-height:1.65; color:var(--text-dim); margin-bottom:.7rem; max-width:640px}
body[data-page="projects"] .apl-row-desc p{margin-bottom:.5rem}
body[data-page="projects"] .apl-row-desc p:last-child{margin-bottom:0}
body[data-page="projects"] .apl-row-side{display:flex; flex-direction:column; align-items:flex-end; gap:.8rem; text-align:right}
body[data-page="projects"] .apl-row-side .apl-stats{border-top:none; padding:0; margin:0; justify-content:flex-end}
body[data-page="projects"] .apl-row-side .apl-stat{align-items:flex-end}
body[data-page="projects"] .apl-row-side .apl-foot{justify-content:flex-end}
/* the fixed 200px side column crowds the description and wraps the stats
   badly well before phone width — a 768px tablet was already cramped.
   Same stacked treatment as mobile, just triggered much earlier. */
@media(max-width:1080px){
  body[data-page="projects"] .apl-row{grid-template-columns:52px 1fr; row-gap:.9rem}
  body[data-page="projects"] .apl-row-side{grid-column:1 / -1; align-items:flex-start; text-align:left; flex-direction:row; flex-wrap:wrap; gap:1.6rem}
  body[data-page="projects"] .apl-row-side .apl-stats,
  body[data-page="projects"] .apl-row-side .apl-foot{justify-content:flex-start}
}
@media(max-width:760px){
  body[data-page="projects"] .apl-row{grid-template-columns:44px 1fr}
  body[data-page="projects"] .apl-row-thumb{width:40px; height:40px; font-size:.68rem}
  body[data-page="projects"] .apl-row-side{flex-direction:column}
}

/* ── project plate (card) — an atlas plate, like the About page ── */
body[data-page="projects"] .apl{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:6px;background:rgba(252,247,235,.84);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s;box-shadow:0 14px 40px -26px rgba(80,55,20,.45);min-height:248px}
body[data-page="projects"] .apl:hover{transform:translateY(-5px);border-color:var(--teal);box-shadow:0 26px 56px -28px rgba(20,60,70,.5)}
body[data-page="projects"]:not(.light-mode) .apl{background:rgba(34,28,46,.9);border-color:rgba(216,181,106,.22)}

/* banner — only rendered when a real image exists; always fits via cover */
body[data-page="projects"] .apl-fig{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg3);border-bottom:1px solid var(--border)}
body[data-page="projects"] .apl-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body[data-page="projects"] .apl-fig .ph-corner{position:absolute;width:13px;height:13px;border:1.5px solid var(--gold);opacity:.7;z-index:3;pointer-events:none}
body[data-page="projects"] .apl-fig .ph-corner.tl{top:8px;left:8px;border-right:none;border-bottom:none}
body[data-page="projects"] .apl-fig .ph-corner.tr{top:8px;right:8px;border-left:none;border-bottom:none}
body[data-page="projects"] .apl-fig .ph-corner.bl{bottom:8px;left:8px;border-right:none;border-top:none}
body[data-page="projects"] .apl-fig .ph-corner.br{bottom:8px;right:8px;border-left:none;border-top:none}

/* status pill (overlaid on banner cards) */
body[data-page="projects"] .apl-status{position:absolute;top:.7rem;left:.7rem;z-index:4;display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .55rem;border-radius:3px;border:1px solid;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body[data-page="projects"] .apl-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
body[data-page="projects"] .apl-status.st-prog{color:#5fd6bd;border-color:rgba(78,201,176,.5);background:rgba(8,18,22,.5)}
body[data-page="projects"] .apl-status.st-prog .apl-dot{animation:atlasPulse 2.2s infinite}
body[data-page="projects"] .apl-status.st-ship{color:#e6c479;border-color:rgba(216,181,106,.5);background:rgba(22,16,8,.5)}
body[data-page="projects"] .apl-status.st-arch{color:#aab2d0;border-color:rgba(140,148,184,.4);background:rgba(14,14,24,.5)}
@keyframes atlasPulse{0%{box-shadow:0 0 0 0 rgba(95,214,189,.55)}70%{box-shadow:0 0 0 6px rgba(95,214,189,0)}100%{box-shadow:0 0 0 0 rgba(95,214,189,0)}}

/* status chip (inline, on text-led plates with no banner) */
body[data-page="projects"] .apl-chip{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;padding:.3rem .6rem;border-radius:20px;border:1px solid;margin-bottom:.9rem}
body[data-page="projects"] .apl-chip.st-prog{color:var(--teal);border-color:rgba(var(--teal-rgb),.4);background:rgba(var(--teal-rgb),.08)}
body[data-page="projects"] .apl-chip.st-prog .apl-dot{animation:atlasPulse 2.2s infinite}
body[data-page="projects"] .apl-chip.st-ship{color:var(--gold);border-color:rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.08)}
body[data-page="projects"] .apl-chip.st-arch{color:var(--text-dim);border-color:var(--border);background:rgba(130,130,160,.08)}

/* corner glyph — a small charted asterism, like the About plates (text-led only) */
body[data-page="projects"] .apl-glyph{position:absolute;top:1.3rem;right:1.4rem;width:58px;height:46px;opacity:.85;pointer-events:none;z-index:1}
body[data-page="projects"] .apl-glyph line{stroke:var(--gold-dim);stroke-width:1;opacity:.7}
body[data-page="projects"] .apl-glyph circle{fill:var(--gold)}
body[data-page="projects"] .apl.st-prog .apl-glyph line{stroke:var(--teal-dim)}
body[data-page="projects"] .apl.st-prog .apl-glyph circle{fill:var(--teal)}
body[data-page="projects"] .apl.has-banner .apl-glyph{display:none}

/* card body + engraved inner rule */
body[data-page="projects"] .apl-body{position:relative;padding:1.6rem 1.7rem 1.4rem;display:flex;flex-direction:column;flex:1}
body[data-page="projects"] .apl.no-banner .apl-body{padding-top:2rem}
body[data-page="projects"] .apl-body::before{content:'';position:absolute;inset:7px;border:1px solid rgba(var(--gold-rgb),.13);border-radius:4px;pointer-events:none}
body[data-page="projects"] .apl-no{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--iron,#46506e);margin:0 0 .8rem}
body[data-page="projects"]:not(.light-mode) .apl-no{color:#9aa8d6}
body[data-page="projects"] .apl-no.feat-no{color:var(--gold)}
body[data-page="projects"] .apl-greek{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin:0 0 .5rem}
body[data-page="projects"] .apl-title{font-family:'Cormorant Garamond',serif;font-size:1.65rem;font-weight:300;line-height:1.12;color:var(--text);margin:0 0 .35rem}
body[data-page="projects"] .apl-title em{font-style:italic;color:var(--gold)}
body[data-page="projects"] .apl-sub{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin:0 0 .85rem}
body[data-page="projects"] .apl-desc{font-family:'Lato',sans-serif;font-size:.9rem;color:var(--text-dim);line-height:1.7;margin-bottom:1rem;position:relative;max-height:9.2em;overflow:hidden}
body[data-page="projects"] .apl-desc p{margin-bottom:.55rem}
body[data-page="projects"] .apl-desc p:last-child{margin-bottom:0}
body[data-page="projects"] .apl-desc::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.2em;background:linear-gradient(transparent,rgba(252,247,235,.97));pointer-events:none}
body[data-page="projects"]:not(.light-mode) .apl-desc::after{background:linear-gradient(transparent,rgba(34,28,46,.97))}
body[data-page="projects"] .apl-desc--full{max-height:none}
body[data-page="projects"] .apl-desc--full::after{display:none}

/* inline highlight stats */
body[data-page="projects"] .apl-stats{display:flex;gap:1.6rem;flex-wrap:wrap;padding:.85rem 0 .2rem;margin-bottom:.9rem;border-top:1px solid var(--border)}
body[data-page="projects"] .apl-stat{display:flex;flex-direction:column;gap:.18rem}
body[data-page="projects"] .apl-stat .v{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--text);line-height:1}
body[data-page="projects"] .apl-stat .v em{font-style:normal;color:var(--teal)}
body[data-page="projects"] .apl-stat .l{font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);opacity:.7}

/* tags */
body[data-page="projects"] .apl-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}

/* footer links pinned to bottom */
body[data-page="projects"] .apl-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
body[data-page="projects"] .apl-link{display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:.45rem .85rem;border-radius:3px;text-decoration:none;border:1px solid;transition:all .2s}
body[data-page="projects"] .apl-link.github{color:var(--text-dim);border-color:var(--border)}
body[data-page="projects"] .apl-link.github:hover{color:var(--text);border-color:var(--text-dim)}
body[data-page="projects"] .apl-link.demo{color:var(--teal);border-color:rgba(var(--teal-rgb),.35)}
body[data-page="projects"] .apl-link.demo:hover{background:rgba(var(--teal-rgb),.1)}
body[data-page="projects"] .apl-link.other{color:var(--gold);border-color:rgba(var(--gold-rgb),.35)}
body[data-page="projects"] .apl-link.other:hover{background:rgba(var(--gold-rgb),.1)}
body[data-page="projects"] .apl-link.edit{color:var(--text-dim);border-color:var(--border)}
body[data-page="projects"] .apl-link.edit:hover{color:var(--teal);border-color:var(--teal)}
body[data-page="projects"] .apl-admin{display:inline-flex;gap:.5rem}

/* ── featured flagship plate ── */
body[data-page="projects"] .apl.feat{border-color:rgba(var(--gold-rgb),.32);box-shadow:0 20px 50px -28px rgba(80,55,20,.5)}
body[data-page="projects"] .apl.feat:hover{border-color:var(--gold);box-shadow:0 28px 60px -30px rgba(80,55,20,.6)}
body[data-page="projects"]:not(.light-mode) .apl.feat{border-color:rgba(216,181,106,.4)}
body[data-page="projects"] .apl.feat.has-banner{flex-direction:row}
body[data-page="projects"] .apl.feat.has-banner .apl-fig{aspect-ratio:auto;width:44%;flex-shrink:0;border-bottom:none;border-right:1px solid var(--border)}
body[data-page="projects"] .apl.feat .apl-body{padding:2.6rem 2.8rem}
body[data-page="projects"] .apl.feat.no-banner .apl-body{padding-top:2.8rem}
body[data-page="projects"] .apl.feat .apl-title{font-size:2.3rem}
body[data-page="projects"] .apl.feat .apl-glyph{width:76px;height:60px;top:2rem;right:2.2rem}
body[data-page="projects"] .apl.feat .apl-desc{font-size:.96rem;line-height:1.8}

/* ── responsive ── */
@media(max-width:980px){
  body[data-page="projects"] .atlas-hero{grid-template-columns:1fr;gap:2rem}
  body[data-page="projects"] .atlas-legend{max-width:420px}
}
@media(max-width:860px){
  body[data-page="projects"] .apl.feat.has-banner{flex-direction:column}
  body[data-page="projects"] .apl.feat.has-banner .apl-fig{width:100%;aspect-ratio:16/9;border-right:none;border-bottom:1px solid var(--border)}
  body[data-page="projects"] .apl.feat .apl-body{padding:1.8rem 1.8rem 1.5rem}
  body[data-page="projects"] .apl.feat .apl-title{font-size:1.8rem}
}
@media(max-width:768px){
  body[data-page="projects"] .atlas-hero,
  body[data-page="projects"] .atlas-admin-bar,
  body[data-page="projects"] .divider,
  body[data-page="projects"] .atlas-group,
  body[data-page="projects"] .atlas-featured{padding-left:1.5rem;padding-right:1.5rem}
  body[data-page="projects"] .atlas-hero{padding-top:4.5rem}
}

/* ── font sweep: everything below was still hardcoded to the hub's
   Cormorant/Lato/JetBrains system (this whole section was borrowing
   About's leftover celestial-codex styling) — repointed to Forge's own
   IBM Plex tokens. Declared after the rules above so it wins the cascade
   without needing !important anywhere. ── */
body[data-page="projects"] .sec-title,
body[data-page="projects"] .atlas-headline,
body[data-page="projects"] .apl-title,
body[data-page="projects"] .apl-stat .v,
body[data-page="projects"] .led-num,
body[data-page="projects"] .alc-cap .t,
body[data-page="projects"] .alc-def .pos,
body[data-page="projects"] .alc-row .v{font-family:var(--font-display); font-style:normal}
body[data-page="projects"] .sec-note,
body[data-page="projects"] .led-lbl,
body[data-page="projects"] .led-tip,
body[data-page="projects"] .skill-name,
body[data-page="projects"] .atlas-body,
body[data-page="projects"] .atlas-lead,
body[data-page="projects"] .apl-desc,
body[data-page="projects"] .alc-def{font-family:var(--font-body); font-style:normal}
body[data-page="projects"] .scol-lbl,
body[data-page="projects"] .stag,
body[data-page="projects"] .ink,
body[data-page="projects"] .alc-cap .coord,
body[data-page="projects"] .alc-row .k,
body[data-page="projects"] .divider .count,
body[data-page="projects"] .apl-status,
body[data-page="projects"] .apl-chip,
body[data-page="projects"] .apl-no,
body[data-page="projects"] .apl-greek,
body[data-page="projects"] .apl-sub,
body[data-page="projects"] .apl-stat .l,
body[data-page="projects"] .apl-link{font-family:var(--font-label)}
body[data-page="projects"] .ptag{font-family:var(--font-label); background:rgba(var(--teal-rgb),.08); border-color:rgba(var(--teal-rgb),.25); color:var(--text-dim)}
body[data-page="projects"] .atlas-headline{font-weight:700}
body[data-page="projects"] .apl-title{font-weight:600}

/* several card/panel backgrounds were hardcoded warm-parchment or
   celestial-purple rgba values, inherited from About/the old sitewide
   theme, instead of the page's own tokens — they'd have kept showing
   cream/purple tints against Forge's new green-tinted ground regardless
   of theme. */
body[data-page="projects"] .apl,
body[data-page="projects"] .atlas-legend,
body[data-page="projects"] .ledger,
body[data-page="projects"]:not(.light-mode) .apl,
body[data-page="projects"]:not(.light-mode) .atlas-legend,
body[data-page="projects"]:not(.light-mode) .ledger,
body[data-page="projects"] .apl-desc::after,
body[data-page="projects"]:not(.light-mode) .apl-desc::after{background:linear-gradient(transparent,var(--bg2))}

/* clean-cut corner-bracket registration marks (extending the .ph-corner
   mark already used on banner images) to every card, not just ones with a
   photo — the "technical drawing" signature carried through consistently.
   Two opposite corners only, like a real blueprint's registration marks. */
body[data-page="projects"] .apl::before{
  content:''; position:absolute; top:8px; left:8px; width:13px; height:13px;
  border:1.5px solid var(--teal); border-right:none; border-bottom:none; opacity:.75; z-index:5; pointer-events:none;
}
body[data-page="projects"] .apl::after{
  content:''; position:absolute; bottom:8px; right:8px; width:13px; height:13px;
  border:1.5px solid var(--teal); border-left:none; border-top:none; opacity:.75; z-index:5; pointer-events:none;
}

/* ═══ ORBIT · public lab, charted (read-only) ═══ */
body[data-page="lab"]{position:relative}
body[data-page="lab"] main{position:relative;z-index:1}
body[data-page="lab"] .legend{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--iron,#46506e)}
body[data-page="lab"]:not(.light-mode) .legend{color:#9aa8d6}
body[data-page="lab"] .hub-pattern{display:none !important}
body[data-page="lab"] .hub-bg{z-index:-1;opacity:1}
body[data-page="lab"].light-mode .hub-bg{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(var(--teal-rgb),.16), transparent 55%),
    linear-gradient(180deg, rgba(var(--teal-rgb),.08) 0%, transparent 40%, rgba(var(--gold-rgb),.06) 100%);
}
body[data-page="lab"]:not(.light-mode) .hub-bg{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(86,98,168,.40), transparent 58%),
    linear-gradient(180deg, rgba(40,48,92,.52) 0%, rgba(20,22,40,.28) 46%, rgba(var(--teal-rgb),.09) 100%);
}
body[data-page="lab"] nav{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
body[data-page="lab"].light-mode nav{--text:#3a3027;--text-dim:#7a6a52;--border:rgba(120,90,50,.22);background:rgba(244,234,211,.97);border-bottom-color:rgba(120,90,50,.18)}
body[data-page="lab"].light-mode nav .nav-center a{color:#7a6a52}
body[data-page="lab"].light-mode nav .nav-center a:hover,
body[data-page="lab"].light-mode nav .nav-center a.active{color:var(--gold)}
body[data-page="lab"]:not(.light-mode) nav{background:rgba(20,16,28,.9)}

/* ── hero · editorial block + orbit legend ── */
body[data-page="lab"] .orbit-hero{max-width:1180px;margin:0 auto;padding:8.5rem 4rem 1rem;display:grid;grid-template-columns:1.32fr .68fr;gap:3.4rem;align-items:center}
body[data-page="lab"] .plate-mark{display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem}
body[data-page="lab"] .plate-mark .rule{height:1px;width:46px;background:var(--teal)}
body[data-page="lab"] .plate-mark .legend{color:var(--teal)}
body[data-page="lab"] .orbit-headline{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.2rem,3.8vw,3.2rem);line-height:1.1;letter-spacing:-.01em;color:var(--text);margin:0 0 1.1rem}
body[data-page="lab"] .orbit-headline em{font-style:italic;color:var(--teal)}
body[data-page="lab"] .orbit-lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:1.4rem;line-height:1.55;color:var(--text-dim);margin:0 0 1.1rem;max-width:560px}
body[data-page="lab"] .orbit-body{font-family:'Lato',sans-serif;font-size:1rem;color:var(--text-dim);max-width:540px;line-height:1.85;margin:0 0 1.6rem}
body[data-page="lab"] .orbit-body strong{color:var(--text);font-weight:700}
body[data-page="lab"] .ink-tags{display:flex;flex-wrap:wrap;gap:.7rem}
body[data-page="lab"] .ink{display:inline-flex;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .9rem;border-radius:3px;border:1px solid transparent}
body[data-page="lab"] .ink .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
body[data-page="lab"] .ink.logic{background:rgba(var(--teal-rgb),.1);border-color:rgba(var(--teal-rgb),.3);color:var(--teal)}
body[data-page="lab"] .ink.logic .dot{background:var(--teal)}
body[data-page="lab"] .ink.depth{background:rgba(var(--gold-rgb),.1);border-color:rgba(var(--gold-rgb),.3);color:var(--gold)}
body[data-page="lab"] .ink.depth .dot{background:var(--gold)}

/* orbit legend card — dictionary plate + live tally */
body[data-page="lab"] .orbit-legend{position:relative;border:1px solid var(--border);border-radius:6px;padding:1.6rem 1.7rem;background:rgba(255,250,238,.55);box-shadow:0 18px 50px -28px rgba(80,55,20,.55)}
body[data-page="lab"]:not(.light-mode) .orbit-legend{background:rgba(34,28,46,.5);border-color:rgba(216,181,106,.22);box-shadow:0 18px 50px -28px rgba(0,0,0,.7)}
body[data-page="lab"] .orbit-legend::before{content:'';position:absolute;inset:7px;border:1px solid rgba(var(--gold-rgb),.18);border-radius:4px;pointer-events:none}
body[data-page="lab"] .olc-cap{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6rem}
body[data-page="lab"] .olc-cap .t{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--gold)}
body[data-page="lab"] .olc-cap .coord{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;color:var(--text-dim);opacity:.85}
body[data-page="lab"] .olc-def{font-family:'Lato',sans-serif;font-size:.86rem;line-height:1.6;color:var(--text-dim);margin:0 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
body[data-page="lab"] .olc-def .pos{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--teal);margin-right:.35rem}
body[data-page="lab"] .olc-row{display:flex;justify-content:space-between;align-items:baseline;padding:.4rem 0}
body[data-page="lab"] .olc-row .k{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
body[data-page="lab"] .olc-row .v{font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--text);line-height:1}
body[data-page="lab"] .olc-row.built .v{color:var(--teal)}
body[data-page="lab"] .olc-row.finds .v{color:var(--gold)}

/* ── flourish divider (group headers) ── */
body[data-page="lab"] .divider{max-width:1180px;margin:0 auto;padding:2.4rem 4rem 1.4rem;display:flex;align-items:center;gap:1.2rem;color:var(--text-dim)}
body[data-page="lab"] .divider .legend{white-space:nowrap}
body[data-page="lab"] .divider .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.5),transparent)}
body[data-page="lab"] .divider .count{font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.12em;color:var(--text-dim);opacity:.7;white-space:nowrap}
body[data-page="lab"] .divider .star{color:var(--gold);font-size:.8rem;position:relative}
body[data-page="lab"] .divider .star::before,
body[data-page="lab"] .divider .star::after{content:'◆';position:absolute;top:50%;transform:translateY(-50%);font-size:.34rem;color:var(--gold);opacity:.55}
body[data-page="lab"] .divider .star::before{right:calc(100% + .55rem)}
body[data-page="lab"] .divider .star::after{left:calc(100% + .55rem)}

/* ── group + grid ── */
body[data-page="lab"] .orbit-group{max-width:1180px;margin:0 auto;padding:.4rem 4rem}
body[data-page="lab"] .orbit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.6rem;align-items:stretch}

/* ── orbit plate (card) ── */
body[data-page="lab"] .orb{position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:6px;background:rgba(252,247,235,.84);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s;box-shadow:0 14px 40px -26px rgba(80,55,20,.45);min-height:230px}
body[data-page="lab"] .orb::after{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--orb-accent,var(--teal));opacity:.7}
body[data-page="lab"] .orb:hover{transform:translateY(-5px);border-color:var(--orb-accent,var(--teal));box-shadow:0 26px 56px -28px rgba(20,40,70,.5)}
body[data-page="lab"]:not(.light-mode) .orb{background:rgba(34,28,46,.9);border-color:rgba(216,181,106,.22)}

/* orbital glyph — concentric orbits + a moon, accent-tinted, spins on hover */
body[data-page="lab"] .orb-glyph{position:absolute;top:1.3rem;right:1.4rem;width:62px;height:50px;color:var(--orb-accent,var(--teal));opacity:.85;pointer-events:none;z-index:1}
body[data-page="lab"] .orb-glyph .ring{fill:none;stroke:currentColor;stroke-width:1;opacity:.5}
body[data-page="lab"] .orb-glyph .core{fill:currentColor}
body[data-page="lab"] .orb-glyph .moon{fill:currentColor;opacity:.85;transform-box:fill-box;transform-origin:32px 25px}
body[data-page="lab"] .orb:hover .orb-glyph .spin{animation:orbSpin 6s linear infinite;transform-origin:32px 25px}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body[data-page="lab"] .orb:hover .orb-glyph .spin{animation:none}}

body[data-page="lab"] .orb-body{position:relative;padding:1.6rem 1.7rem 1.4rem 1.9rem;display:flex;flex-direction:column;flex:1}
body[data-page="lab"] .orb-body::before{content:'';position:absolute;inset:7px;border:1px solid rgba(var(--gold-rgb),.13);border-radius:4px;pointer-events:none}
body[data-page="lab"] .orb-top{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;flex-wrap:wrap;padding-right:4rem}
body[data-page="lab"] .orb-kind{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orb-accent,var(--teal));margin:0}
body[data-page="lab"] .orb-chip{display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;padding:.26rem .55rem;border-radius:20px;border:1px solid}
body[data-page="lab"] .orb-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
body[data-page="lab"] .orb-chip.st-active{color:var(--teal);border-color:rgba(var(--teal-rgb),.4);background:rgba(var(--teal-rgb),.08)}
body[data-page="lab"] .orb-chip.st-active .orb-dot{animation:atlasPulse 2.2s infinite}
body[data-page="lab"] .orb-chip.st-brewing{color:var(--gold);border-color:rgba(var(--gold-rgb),.4);background:rgba(var(--gold-rgb),.08)}
body[data-page="lab"] .orb-chip.st-archived{color:var(--text-dim);border-color:var(--border);background:rgba(130,130,160,.08)}
body[data-page="lab"] .orb-no{font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;color:var(--iron,#46506e);margin:0 0 .55rem}
body[data-page="lab"]:not(.light-mode) .orb-no{color:#9aa8d6}
body[data-page="lab"] .orb-title{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;line-height:1.12;color:var(--text);margin:0 0 .5rem;max-width:88%}
body[data-page="lab"] .orb-desc{font-family:'Lato',sans-serif;font-size:.9rem;color:var(--text-dim);line-height:1.7;margin-bottom:1rem;position:relative;max-height:7.4em;overflow:hidden}
body[data-page="lab"] .orb-desc p{margin-bottom:.5rem}
body[data-page="lab"] .orb-desc p:last-child{margin-bottom:0}
body[data-page="lab"] .orb-desc::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2em;background:linear-gradient(transparent,rgba(252,247,235,.97));pointer-events:none}
body[data-page="lab"]:not(.light-mode) .orb-desc::after{background:linear-gradient(transparent,rgba(34,28,46,.97))}

/* topic tags (multi, accent-colored per topic) */
body[data-page="lab"] .orb-topics{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
body[data-page="lab"] .orb-topic{font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .6rem;border-radius:3px;border:1px solid;color:var(--tc,var(--text-dim));border-color:color-mix(in srgb,var(--tc,var(--text-dim)) 38%,transparent);background:color-mix(in srgb,var(--tc,var(--text-dim)) 9%,transparent)}

/* footer actions */
body[data-page="lab"] .orb-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
body[data-page="lab"] .orb-link{display:inline-flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:.45rem .85rem;border-radius:3px;text-decoration:none;border:1px solid;background:none;cursor:pointer;transition:all .2s}
body[data-page="lab"] .orb-link.launch{color:var(--orb-accent,var(--teal));border-color:color-mix(in srgb,var(--orb-accent,var(--teal)) 40%,transparent)}
body[data-page="lab"] .orb-link.launch:hover{background:color-mix(in srgb,var(--orb-accent,var(--teal)) 12%,transparent)}
body[data-page="lab"] .orb-link.visit{color:var(--gold);border-color:rgba(var(--gold-rgb),.4)}
body[data-page="lab"] .orb-link.visit:hover{background:rgba(var(--gold-rgb),.1)}
body[data-page="lab"] .orb-link.ghost{color:var(--text-dim);border-color:var(--border)}
body[data-page="lab"] .orb-link.ghost:hover{color:var(--text);border-color:var(--text-dim)}
body[data-page="lab"] .orb-link.edit{color:var(--text-dim);border-color:var(--border)}
body[data-page="lab"] .orb-link.edit:hover{color:var(--teal);border-color:var(--teal)}

/* inline embed panel (iframe launch) */
body[data-page="lab"] .orb-embed-panel{margin-top:1.1rem;border-top:1px solid var(--border);padding-top:1.1rem}
body[data-page="lab"] .orb-embed-inner iframe{width:100%;height:500px;border:0;border-radius:6px;background:#0D0F14}
body[data-page="lab"] .orb.orb-expanded{grid-column:1/-1}

/* admin manage bar */
body[data-page="lab"] .orbit-admin-bar{max-width:1180px;margin:1.4rem auto 0;padding:0 4rem;display:flex;justify-content:flex-end}

/* empty state wrapper */
body[data-page="lab"] #orbitRoot .empty-state{max-width:1180px;margin:2rem auto;padding:0 4rem}

@media(max-width:980px){
  body[data-page="lab"] .orbit-hero{grid-template-columns:1fr;gap:2rem}
  body[data-page="lab"] .orbit-legend{max-width:420px}
}
@media(max-width:768px){
  body[data-page="lab"] .orbit-hero,
  body[data-page="lab"] .orbit-admin-bar,
  body[data-page="lab"] .divider,
  body[data-page="lab"] .orbit-group{padding-left:1.5rem;padding-right:1.5rem}
  body[data-page="lab"] .orbit-hero{padding-top:7rem}
  body[data-page="lab"] .orbit-grid{grid-template-columns:1fr}
}

/* Marginalia (article page) · drop the grid, keep the celestial wash —
   same background treatment as About / Forge / Orbit. */
body[data-page="marginalia"]{position:relative}
body[data-page="marginalia"] main{position:relative;z-index:1}
body[data-page="marginalia"] .hub-pattern{display:none !important}
body[data-page="marginalia"] .hub-bg{z-index:-1;opacity:1}

/* ═══ LIBRARY · library.calebthede.com ═══
   Its own identity, not a recolored hub page: a "descent through myth"
   archive built around the same flame-blue the home door already teases —
   dark at night, an aged-paper-with-blue-flame-ink read in light mode
   (real light/dark support, not forced to one).
   Reuses --gold/--gold-rgb/--teal/--teal-rgb as the actual variable names
   (existing shared rules — .book-card, .book-promo, .legend, etc. — already
   read colors from them) rather than renaming every rule to bespoke
   --lib-* tokens; it's the same trick the old per-page nav overrides
   already used, just applied to the whole page instead of one element. */
body[data-page="library"]{
  --bg:#121212; --bg2:#1c1c1c; --bg3:#242424;
  --text:#ccd6e3; --text-dim:#8896ab;
  --gold:#6fa8e0; --gold-rgb:111,168,224; --gold-dim:#3d6488;
  --teal:#c9a562; --teal-rgb:201,165,98; --teal-dim:#8a7548;
  --border:rgba(111,168,224,.22);
  --nav-bg:rgba(9,9,9,.92); --modal-bg:#1c1c1c; --input-bg:#242424; --skills-bg:#1c1c1c;
  /* an old reading room, not the hub's Cormorant/Lato/JetBrains system:
     Fraunces for headlines (real old-book character), Lora for long-form
     body text, Courier Prime for labels — a card-catalog typewriter feel
     instead of the site-wide mono. Loaded per-page (see library*.html
     <head>), not shared with the hub. */
  --font-display:'Fraunces',serif; --font-body:'Lora',serif; --font-label:'Courier Prime',monospace;
  background:var(--bg) !important;
}
/* Light mode borrows Hades' own gray stone, not a warm parchment wash —
   the dramatic "dark figure glowing out of black" reading is a dark-mode
   thing specifically; in daylight it's a quieter gray archive, same blue
   flame accent carried through (darkened here for contrast on a light
   ground; the glowing pastel version only works against near-black). */
body[data-page="library"].light-mode{
  --bg:#e6e4df; --bg2:#dad7d0; --bg3:#cac6bc;
  --text:#26251f; --text-dim:#615d53;
  --gold:#2f5a82; --gold-rgb:47,90,130; --gold-dim:#7597b3;
  --teal:#8a5a2e; --teal-rgb:138,90,46; --teal-dim:#b3814f;
  --border:rgba(47,90,130,.2);
  --nav-bg:rgba(230,228,223,.92); --modal-bg:#dad7d0; --input-bg:#cac6bc; --skills-bg:#dad7d0;
  background:var(--bg) !important;
}
body[data-page="library"] main{background:var(--bg)}
body[data-page="library"] footer{
  --bg2:#1c1c1c; --text:#ccd6e3; --text-dim:#8896ab;
  --gold:#6fa8e0; --gold-rgb:111,168,224; --teal:#c9a562; --teal-rgb:201,165,98;
  --border:rgba(111,168,224,.18);
  background:var(--bg2) !important; border-top:1px solid var(--border);
  /* the global footer{margin-top:5rem} assumes it's clearing generic page
     content — on the home page here it stacked on top of the shelf-band's
     own margin, leaving a much bigger dead gap than intended. */
  margin-top:0;
}
body[data-page="library"].light-mode footer{
  --bg2:#dad7d0; --text:#26251f; --text-dim:#615d53;
  --gold:#2f5a82; --gold-rgb:47,90,130; --teal:#8a5a2e; --teal-rgb:138,90,46;
  --border:rgba(47,90,130,.16);
  background:var(--bg2) !important; border-top:1px solid var(--border);
}
body[data-page="library"] .legend{font-family:var(--font-label);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim)}
/* the site-wide grid-line texture (.hub-pattern) and glow blobs (.hub-bg)
   are keyed off the literal .light-mode class, independent of the color
   tokens above — without this override they can still show through
   (wrong pattern colors) regardless of which Library palette is active. */
body[data-page="library"] .hub-bg,
body[data-page="library"] .hub-pattern{display:none !important}

/* ── shared site chrome (login modal, buttons, badges, toasts) still used
   its own hardcoded fonts (JetBrains Mono / Cormorant Garamond) here —
   invisible until one popped up next to the new Fraunces/Courier Prime
   type and read as a different site. Repointed to the same tokens. ── */
body[data-page="library"] .modal-title{font-family:var(--font-display)}
body[data-page="library"] .mf label{font-family:var(--font-label)}
body[data-page="library"] .mf input,
body[data-page="library"] .mf textarea,
body[data-page="library"] .mf select{font-family:var(--font-body)}
body[data-page="library"] .btn-primary,
body[data-page="library"] .btn-ghost,
body[data-page="library"] .btn-sm,
body[data-page="library"] .admin-badge,
body[data-page="library"] .toast{font-family:var(--font-label)}

/* The shelf's book grid and the book detail view are older, unscoped
   shared classes from before Library had its own type system — same gap
   as above, just missed on the first pass since these live on the shelf
   page rather than the homepage. Without this, the shelf (one of the most
   visited Library pages) still looked like the old site. */
body[data-page="library"] .book-foot-title,
body[data-page="library"] .book-spine-title,
body[data-page="library"] .book-detail-title,
body[data-page="library"] .lib-section-header h2,
body[data-page="library"] .series-title{font-family:var(--font-display)}
body[data-page="library"] .book-foot-meta,
body[data-page="library"] .book-foot-status,
body[data-page="library"] .book-status-badge,
body[data-page="library"] .book-ch-count,
body[data-page="library"] .back-btn,
body[data-page="library"] .book-buy-box-label,
body[data-page="library"] .series-eyebrow,
body[data-page="library"] .series-meta,
body[data-page="library"] .book-series-num,
body[data-page="library"] .inline-search{font-family:var(--font-label)}
body[data-page="library"] .book-foot-desc,
body[data-page="library"] .book-detail-desc{font-family:var(--font-body)}
body[data-page="library"] .book-buy-box-label{font-size:.68rem; letter-spacing:.14em}

/* the book-detail page follows the page theme (unlike the always-dark
   teaser/book-card), so this uses tokens rather than hardcoded colors */
body[data-page="library"] .book-world-link{
  display:inline-block; margin:0 0 1.4rem; font-family:var(--font-label); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--border); padding-bottom:2px; transition:color .2s, border-color .2s;
}
body[data-page="library"] .book-world-link:hover{color:var(--text); border-color:var(--gold)}
body[data-page="library"] .lib-world-cta{text-align:center; margin:2.5rem 0}

/* ── bespoke header — a wordmark + one way back to the hub, not the
   generic multi-link nav the other legacy pages still share. Each crumb
   is its own link (hub vs. Library's own home are different places),
   with room for a plain trailing crumb (e.g. "Shelf") on pages beneath it. */
body[data-page="library"] .lib-head{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem; background:var(--nav-bg); backdrop-filter:blur(7px);
  border-bottom:1px solid var(--border);
}
body[data-page="library"] .lib-head-mark{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; min-width:0}
body[data-page="library"] .lib-head-hub,
body[data-page="library"] .lib-head-name,
body[data-page="library"] .lib-head-crumb-current{white-space:nowrap}
body[data-page="library"] .lib-head-hub{font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--text-dim); text-decoration:none; transition:color .2s}
body[data-page="library"] .lib-head-hub:hover{color:var(--gold)}
body[data-page="library"] .lib-head-sep{color:var(--border); font-size:1rem}
body[data-page="library"] .lib-head-name{font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:.02em; color:var(--gold); text-decoration:none; transition:opacity .2s}
a.lib-head-name:hover{opacity:.75}
body[data-page="library"] .lib-head-crumb-current{font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:.02em; color:var(--text-dim)}
body[data-page="library"] .lib-head-controls{display:flex; align-items:center; gap:.6rem}
body[data-page="library"] .admin-link{
  font-family:var(--font-label); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); text-decoration:none; border:1px solid var(--border); border-radius:3px; padding:.4rem .7rem;
  transition:border-color .2s;
}
body[data-page="library"] .admin-link:hover{border-color:var(--gold)}

/* ── hero · the flame/Cerberus art, large, not a small teaser ── */
body[data-page="library"] .lib-hero-book{
  position:relative; max-width:1280px; margin:0 auto; padding:5rem 4rem 3rem;
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; overflow:hidden;
}
body[data-page="library"] .lib-hero-art{
  /* width:100% not justify-self:center — the <img> inside is
     position:absolute (needed so object-fit can crop it to the aspect
     box), which takes it out of normal flow entirely; with nothing left
     contributing intrinsic size, a shrink-to-fit box (justify-self:center)
     collapses to 0×0 instead of sizing from its grid column. */
  position:relative; width:100%; max-width:380px; aspect-ratio:565/850; margin:0 auto;
}
body[data-page="library"] .lib-hero-art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom center;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
body[data-page="library"] .lib-hero-art::before{
  content:''; position:absolute; left:50%; bottom:6%; width:140%; height:60%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(111,168,224,.22), transparent 70%); pointer-events:none;
}
body[data-page="library"] .lib-headline{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.08;letter-spacing:-.01em;color:var(--text);margin:0 0 1.1rem;text-wrap:balance}
body[data-page="library"] .lib-headline em{font-style:italic;color:var(--gold)}
body[data-page="library"] .lib-lead{font-family:var(--font-body);font-style:italic;font-weight:400;font-size:1.25rem;line-height:1.6;color:var(--text-dim);margin:0 0 1.7rem;max-width:520px;text-wrap:pretty}
body[data-page="library"] .lib-lead em{font-style:italic;color:var(--gold)}
/* hero footer stats / cross-link */
body[data-page="library"] .lib-hero-stats{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
body[data-page="library"] .lhs{display:inline-flex;align-items:baseline;gap:.55rem;text-decoration:none}
body[data-page="library"] .lhs-v{font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--gold)}
body[data-page="library"] .lhs-k{font-family:var(--font-label);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
body[data-page="library"] .lhs-sep{width:1px;height:24px;background:var(--border)}
body[data-page="library"] .lhs-link{transition:opacity .2s}
body[data-page="library"] .lhs-link:hover{opacity:.7}
body[data-page="library"] .lib-outer{padding-top:1.5rem; max-width:1280px; margin:0 auto; padding-left:4rem; padding-right:4rem}
/* the shelf page has no hero above it, just the sticky header */
body[data-page="library"] .lib-outer-shelf{padding-top:4.5rem}

/* ── the shelf band · a wide silhouette bridging the teaser and the real
   shelf page — a real link, not an in-page scroll. Individual spines
   brighten under the cursor like you're pulling one partway off the
   shelf; one stays a touch brighter at rest as a quiet hint it's
   interactive, not just decoration. Dark by default (spine colors were
   tuned to sit on a near-black ground); light mode keeps the same stone
   tone as the rest of the page chrome and darkens the spines to match,
   rather than trying to lighten art that was never drawn for it. ── */
body[data-page="library"] .lib-shelf-band{
  position:relative; display:block; width:100%; height:260px; margin:2.5rem 0; overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#0c0c0c,#161616);
  cursor:pointer;
}
body[data-page="library"].light-mode .lib-shelf-band{
  background:linear-gradient(180deg,#e6e4df,#d2cec3);
}
/* direct-child selector only — the hint's own arrow icon lives inside
   .lib-shelf-hint and must not inherit this absolute full-bleed sizing */
body[data-page="library"] .lib-shelf-band > svg{position:absolute; bottom:0; left:0; width:100%; height:100%}
body[data-page="library"] .lib-shelf-band > svg > g{transition:filter .2s ease}
body[data-page="library"].light-mode .lib-shelf-band > svg > g{filter:brightness(.5) saturate(1.15)}
body[data-page="library"] .lib-shelf-band > svg > g > rect{
  transition:filter .2s ease, transform .2s ease;
  transform-box:fill-box; transform-origin:bottom center;
}
body[data-page="library"] .lib-shelf-band > svg > g > rect.featured{filter:brightness(1.35)}
body[data-page="library"] .lib-shelf-band:hover > svg > g > rect{filter:brightness(.55)}
body[data-page="library"] .lib-shelf-band:hover > svg > g > rect.featured{filter:brightness(.75)}
body[data-page="library"] .lib-shelf-band > svg > g > rect:hover{filter:brightness(1.7) !important; transform:scaleY(1.09)}
@media(prefers-reduced-motion:reduce){
  body[data-page="library"] .lib-shelf-band > svg > g > rect{transition:none}
}
/* ── the hint reads as a label ON the band, not a caption floating near
   it — same idea as a button's own text, sized and weighted to match. ── */
body[data-page="library"] .lib-shelf-hint{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
  display:flex; align-items:center; gap:.6rem; pointer-events:none;
  font-family:var(--font-label); font-weight:700; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:#f1ead9; text-shadow:0 2px 12px rgba(0,0,0,.6);
  padding:.9rem 1.6rem; border:1px solid rgba(241,234,217,.4); border-radius:30px;
  background:rgba(0,0,0,.28); backdrop-filter:blur(2px);
  transition:border-color .25s, background .25s;
}
body[data-page="library"] .lib-shelf-band:hover .lib-shelf-hint{border-color:#f1ead9; background:rgba(0,0,0,.4)}
body[data-page="library"] .lib-shelf-hint svg{width:14px; height:14px; flex-shrink:0}
body[data-page="library"].light-mode .lib-shelf-hint{
  color:#26251f; text-shadow:0 1px 4px rgba(255,255,255,.5);
  border-color:rgba(38,37,31,.3); background:rgba(255,255,255,.42);
}
body[data-page="library"].light-mode .lib-shelf-band:hover .lib-shelf-hint{border-color:#26251f; background:rgba(255,255,255,.6)}

/* Books grid/card intentionally left at the shared base styling (spine
   with its info beside it, always visible) — an earlier pass here tried a
   spine-only shelf with the info hidden until hover, which didn't fit;
   "the shelf" now lives in the clickable band above instead. */

/* ── COMING SOON placeholder · legible on the midnight band ── */
body[data-page="library"] .book-card-placeholder{opacity:1;cursor:default;pointer-events:none}
body[data-page="library"] .book-spine-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:var(--bg3);border:1px dashed var(--border)}
body[data-page="library"] .book-spine-placeholder .ph-glyph{font-size:1.1rem;color:var(--text-dim);opacity:.6}
body[data-page="library"] .book-spine-placeholder .ph-num{font-family:var(--font-label);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);opacity:.7}
body[data-page="library"] .book-card-placeholder .ph-soon{display:inline-block;font-family:var(--font-label);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border);border-radius:20px;padding:.22rem .7rem;margin-top:.15rem}

@media(max-width:900px){
  body[data-page="library"] .lib-hero-book{grid-template-columns:1fr; padding-top:6.5rem; text-align:center}
  body[data-page="library"] .lib-hero-art{order:-1; max-width:260px}
  body[data-page="library"] .lib-lead{margin-left:auto; margin-right:auto}
  body[data-page="library"] .lib-hero-stats{justify-content:center}
}
@media(max-width:768px){
  body[data-page="library"] .lib-outer{padding-left:1.5rem; padding-right:1.5rem}
}
@media(max-width:480px){
  body[data-page="library"] .lib-shelf-hint{font-size:.62rem; letter-spacing:.06em; padding:.65rem 1rem; gap:.4rem; white-space:nowrap}
  body[data-page="library"] .lib-head{padding:1rem 1.2rem; gap:.6rem}
  body[data-page="library"] .lib-head-hub{font-size:1.05rem}
  body[data-page="library"] .lib-head-name,
  body[data-page="library"] .lib-head-crumb-current{font-size:.95rem}
}

/* ── BLUE EMBER · library.calebthede.com/blue-ember ──
   The series' own room off the Library: sells Book 1 to a stranger,
   rewards a finished reader with the world and the characters. Every
   fact here comes from the content package Caleb supplied — nothing on
   this page is invented copy. Spoiler tiers (js/blue-ember.js) hide
   entries and sections above the reader's self-declared progress; a
   hidden thing never gets a name, a teaser, or a locked-card silhouette,
   it's just absent. ── */
body[data-page="library"] .be-root{max-width:1100px; margin:0 auto; padding:3rem 2rem 5rem}

body[data-page="library"] .be-hero{text-align:center; max-width:640px; margin:0 auto 3.5rem}
body[data-page="library"] .be-eyebrow{font-family:var(--font-label); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:.6rem}
body[data-page="library"] .be-hero-title{font-family:var(--font-display); font-weight:600; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--text); margin-bottom:1.3rem}
body[data-page="library"] .be-hero-line{font-family:var(--font-body); font-style:italic; font-size:1.2rem; line-height:1.6; color:var(--text-dim); margin-bottom:2rem; text-wrap:pretty}
/* bespoke segmented control — not a native <select>, so the "how much do
   you want to see" choice reads as part of the page's own design rather
   than the browser's default form chrome. */
body[data-page="library"] .be-progress-control{display:flex; flex-direction:column; align-items:center; gap:.6rem}
body[data-page="library"] .be-progress-label{font-family:var(--font-label); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim)}
body[data-page="library"] .be-progress-pills{display:inline-flex; gap:.4rem; flex-wrap:wrap; justify-content:center}
body[data-page="library"] .be-progress-pill{font-family:var(--font-label); font-weight:700; font-size:.68rem; letter-spacing:.04em; padding:.55rem 1.1rem; border-radius:20px; border:1px solid var(--border); background:var(--bg2); color:var(--text-dim); cursor:pointer; transition:all .2s}
body[data-page="library"] .be-progress-pill:hover{border-color:var(--gold); color:var(--text)}
/* color:var(--bg), not a hardcoded dark value — --gold flips from a light
   blue (dark mode) to a dark navy (light mode), so the active pill's text
   needs to flip with it. var(--bg) is already the opposite-extreme token
   in both themes, so it stays legible without a second set of overrides. */
body[data-page="library"] .be-progress-pill.active{background:var(--gold); border-color:var(--gold); color:var(--bg)}

/* ── the book card: same always-dark treatment as the homepage teaser ──
   Every color in here is a hardcoded light value, not a theme token — the
   card ignores light/dark mode by design, so pulling var(--teal)/var(--gold)
   in here would go dark-on-dark the moment light mode darkens those tokens.
   (.be-eyebrow up above is the theme-following version for the hero;
   .be-book-eyebrow below is this card's own, deliberately separate, copy.) */
body[data-page="library"] .be-book-card{position:relative; border:1px solid rgba(111,168,224,.32); border-radius:8px; overflow:hidden; background:linear-gradient(135deg,rgba(20,24,40,.72),rgba(10,12,22,.78)); padding:2.6rem; display:grid; grid-template-columns:.7fr 1.3fr; gap:2.4rem; align-items:center; box-shadow:0 30px 70px -34px rgba(0,0,0,.7); margin-bottom:4rem}
body[data-page="library"] .be-book-cover{border-radius:6px; aspect-ratio:2/3; width:100%; max-width:220px; background-size:cover; background-position:center; box-shadow:0 20px 45px -22px rgba(0,0,0,.7)}
body[data-page="library"] .be-book-eyebrow{font-family:var(--font-label); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#8fc0f4; margin-bottom:.7rem}
body[data-page="library"] .be-book-title{font-family:var(--font-display); font-weight:600; font-size:clamp(1.8rem,3vw,2.4rem); color:#f1ead9; line-height:1.1; margin-bottom:.7rem}
body[data-page="library"] .be-book-desc{font-family:var(--font-body); color:#c4bcd0; font-size:1rem; line-height:1.7; margin-bottom:1.3rem; max-width:480px}
body[data-page="library"] .be-buy-row{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
body[data-page="library"] .be-buy-btn{display:inline-block; text-decoration:none; font-family:var(--font-label); font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#0c0f18; background:#8fc0f4; border-radius:4px; padding:.75rem 1.3rem; transition:background .25s}
body[data-page="library"] .be-buy-btn:hover{background:#b7d8fb}
body[data-page="library"] .be-buy-soon{font-family:var(--font-label); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:#8896ab}

body[data-page="library"] .be-section-block{margin-bottom:3.5rem}
body[data-page="library"] .be-section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; gap:1rem}
body[data-page="library"] .be-h2{font-family:var(--font-display); font-weight:600; font-size:1.6rem; color:var(--text); margin:0 0 1.4rem}
body[data-page="library"] .be-section-head .be-h2{margin-bottom:0}
body[data-page="library"] .be-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.1rem}

body[data-page="library"] .be-card{
  display:block; width:100%; position:relative; text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:1.3rem 1.4rem;
  transition:border-color .25s, transform .25s;
}
body[data-page="library"] .be-card:hover{border-color:var(--gold); transform:translateY(-3px)}
body[data-page="library"] .be-card-name{font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--text); margin:0 0 .2rem}
body[data-page="library"] .be-card-role{font-family:var(--font-label); font-weight:700; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); margin:0 0 .6rem}
body[data-page="library"] .be-card-summary{font-family:var(--font-body); font-size:.88rem; line-height:1.55; color:var(--text-dim); margin:0}
body[data-page="library"] .be-badge{display:inline-block; font-family:var(--font-label); font-weight:700; font-size:.64rem; letter-spacing:.04em; text-transform:uppercase; border-radius:20px; padding:.22rem .65rem; margin:0 .35rem .5rem 0}
body[data-page="library"] .be-badge-draft{color:var(--teal); border:1px solid rgba(var(--teal-rgb),.4)}
body[data-page="library"] .be-badge-approved{color:#7fbf8f; border:1px solid rgba(127,191,143,.4)}
body[data-page="library"] .be-badge-tier{color:var(--gold); border:1px solid var(--border)}
body[data-page="library"] .be-badge-book{color:var(--text-dim); border:1px solid var(--border)}

/* ── entry detail modal ── */
body[data-page="library"] .be-detail-modal{max-width:640px; max-height:82vh; overflow-y:auto}
body[data-page="library"] .be-admin-bar{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--border)}
body[data-page="library"] .be-detail-kind{font-family:var(--font-label); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0 0 .4rem}
body[data-page="library"] .be-detail-name{font-family:var(--font-display); font-weight:600; font-size:2rem; color:var(--text); margin:0 0 .3rem}
body[data-page="library"] .be-detail-role{font-family:var(--font-body); font-style:italic; color:var(--text-dim); margin:0 0 1.2rem}
body[data-page="library"] .be-quote{margin:0 0 1rem; padding:.2rem 0 .2rem 1.1rem; border-left:2px solid var(--gold); font-family:var(--font-body); font-style:italic; font-size:1.05rem; line-height:1.6; color:var(--text)}
body[data-page="library"] .be-quote cite{display:block; margin-top:.4rem; font-family:var(--font-label); font-style:normal; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim)}
body[data-page="library"] .be-rels{display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.4rem}
body[data-page="library"] .be-rel{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; font-family:var(--font-body); font-size:.9rem}
body[data-page="library"] .be-rel-label{font-family:var(--font-label); font-weight:700; font-size:.72rem; letter-spacing:.02em; text-transform:uppercase; color:var(--teal)}
body[data-page="library"] .be-rel-link{background:none; border:none; padding:0; font:inherit; font-weight:700; color:var(--gold); cursor:pointer; text-decoration:underline}
body[data-page="library"] .be-rel-note{color:var(--text-dim); font-size:.85rem}
body[data-page="library"] .be-section{margin-bottom:1.6rem}
body[data-page="library"] .be-section-heading{font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--gold); margin:0 0 .7rem}
body[data-page="library"] .be-section-body{font-family:var(--font-body); font-size:.98rem; line-height:1.75; color:var(--text)}
body[data-page="library"] .be-section-body h3{font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--text); margin:1.2rem 0 .6rem}
body[data-page="library"] .be-section-body h3:first-child{margin-top:0}
body[data-page="library"] .be-section-body h4{font-family:var(--font-label); font-weight:700; font-size:.85rem; letter-spacing:.02em; text-transform:uppercase; color:var(--teal); margin:1.2rem 0 .6rem}
body[data-page="library"] .be-section-body p{margin:0 0 .9rem}
body[data-page="library"] .be-section-body ul{margin:0 0 .9rem; padding-left:1.2rem}
body[data-page="library"] .be-section-body li{margin-bottom:.4rem}
body[data-page="library"] .be-hidden-notice{font-family:var(--font-label); font-size:.8rem; letter-spacing:.02em; color:var(--text-dim); border-top:1px dashed var(--border); padding-top:1rem; margin-top:1rem}

/* entry creation/editing lives in the Scriptorium now (compose.html), not
   on the public page — so there's no editor-modal CSS here to maintain. */
@media(max-width:640px){
  body[data-page="library"] .be-book-card{grid-template-columns:1fr}
  body[data-page="library"] .be-book-cover{max-width:180px; margin:0 auto}
}

/* ═══ MARGINALIA · marginalia.calebthede.com ═══
   Matches the identity the hub's own "Three Doors" homepage already
   committed to for this world (--mg-* tokens, body[data-page="home"]) —
   oxblood/brick-red ink (--mg-accent:#8c2b26) on warm parchment, Playfair
   Display + PT Serif — rather than inventing a separate palette. Light
   mode reuses those exact values; dark mode is my own extension in the
   same spirit (the same red, brightened, on a near-black ground — same
   "accent glows at night, sits dark by day" logic as Library's blue
   flame). Bespoke header (same classes as Library — a shared naming
   convention, not a Library-specific thing), no invented "Codex/Chart"
   plate language, no cross-link back to Library (the hub's three-doors
   nav covers that now). */
body[data-page="marginalia"]{
  --bg:#120f0d; --bg2:#221c19; --bg3:#352c26;
  --text:#efe6d9; --text-dim:#b3a292;
  --teal:#e2756c; --teal-rgb:226,117,108; --teal-dim:#8c2b26;
  --gold:#dfb875; --gold-rgb:223,184,117; --gold-dim:#a67f3d;
  --border:rgba(226,117,108,.3);
  --nav-bg:rgba(18,15,13,.92); --modal-bg:#221c19; --input-bg:#352c26; --skills-bg:#221c19;
  /* Playfair Display + PT Serif — the same pairing the hub's own
     Marginalia door already uses — plus a monospace for labels. */
  --font-display:'Playfair Display',serif; --font-body:'PT Serif',serif; --font-label:'IBM Plex Mono',monospace;
  background:var(--bg) !important;
}
body[data-page="marginalia"].light-mode{
  --bg:#ece3cc; --bg2:#e0d3af; --bg3:#cfbd8e;
  --text:#211d16; --text-dim:#5c5040;
  --teal:#8c2b26; --teal-rgb:140,43,38; --teal-dim:#b5615c;
  --gold:#8a6423; --gold-rgb:138,100,35; --gold-dim:#c9a562;
  --border:rgba(140,43,38,.28);
  --nav-bg:rgba(236,227,204,.96); --modal-bg:#e0d3af; --input-bg:#cfbd8e; --skills-bg:#e0d3af;
  background:var(--bg) !important;
}
/* the page reads as an actual sheet of paper, not a flat digital color:
   faint ruled lines (real notebook spacing) plus a fine noise grain
   (SVG feTurbulence, no image asset) under everything, and the same
   continuous red margin rule a real notebook has down the left. */
body[data-page="marginalia"] main{
  background-color:var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to bottom, transparent, transparent 31px, rgba(var(--teal-rgb),.09) 31px, rgba(var(--teal-rgb),.09) 32px);
  position:relative;
}
body[data-page="marginalia"] main::before{
  content:''; position:absolute; top:0; bottom:0; left:2.5rem; width:1px;
  background:rgba(var(--teal-rgb),.4); pointer-events:none; z-index:0;
}
@media(max-width:640px){
  body[data-page="marginalia"] main::before{left:1.2rem}
}
body[data-page="marginalia"] footer{
  --bg2:#221c19; --text:#efe6d9; --text-dim:#b3a292;
  --gold:#dfb875; --gold-rgb:223,184,117; --teal:#e2756c; --teal-rgb:226,117,108;
  --border:rgba(226,117,108,.18);
  background:var(--bg2) !important; border-top:1px solid var(--border);
  /* overrides the global footer{margin-top:5rem} — it left a dead,
     untextured gap between main's ruled-paper background and the footer
     (same issue Library had with its shelf-band). */
  margin-top:0;
}
body[data-page="marginalia"].light-mode footer{
  --bg2:#e0d3af; --text:#211d16; --text-dim:#5c5040;
  --gold:#8a6423; --gold-rgb:138,100,35; --teal:#8c2b26; --teal-rgb:140,43,38;
  --border:rgba(140,43,38,.16);
  background:var(--bg2) !important; border-top:1px solid var(--border);
}
body[data-page="marginalia"] .hub-bg,
body[data-page="marginalia"] .hub-pattern{display:none !important}
body[data-page="marginalia"] .legend{font-family:var(--font-label);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim)}

/* ── shared site chrome — same gap Library had: the login modal, buttons,
   badges and toasts default to the hub's fonts unless repointed here. ── */
body[data-page="marginalia"] .modal-title{font-family:var(--font-display)}
body[data-page="marginalia"] .mf label{font-family:var(--font-label)}
body[data-page="marginalia"] .mf input,
body[data-page="marginalia"] .mf textarea,
body[data-page="marginalia"] .mf select{font-family:var(--font-body)}
body[data-page="marginalia"] .btn-primary,
body[data-page="marginalia"] .btn-ghost,
body[data-page="marginalia"] .btn-sm,
body[data-page="marginalia"] .admin-badge,
body[data-page="marginalia"] .toast{font-family:var(--font-label)}

/* ── bespoke header (same pattern/classes as Library) ── */
body[data-page="marginalia"] .lib-head{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem; background:var(--nav-bg); backdrop-filter:blur(7px);
  border-bottom:1px solid var(--border);
}
body[data-page="marginalia"] .lib-head-mark{display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; min-width:0}
body[data-page="marginalia"] .lib-head-hub{font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--text-dim); text-decoration:none; transition:color .2s; white-space:nowrap}
body[data-page="marginalia"] .lib-head-hub:hover{color:var(--teal)}
body[data-page="marginalia"] .lib-head-sep{color:var(--border); font-size:1rem}
body[data-page="marginalia"] .lib-head-crumb-current{font-family:var(--font-display); font-weight:600; font-size:1.1rem; letter-spacing:.02em; color:var(--teal); white-space:nowrap}
body[data-page="marginalia"] .lib-head-controls{display:flex; align-items:center; gap:.6rem}
body[data-page="marginalia"] .admin-link{
  font-family:var(--font-label); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); text-decoration:none; border:1px solid var(--border); border-radius:3px; padding:.4rem .7rem;
  transition:border-color .2s;
}
body[data-page="marginalia"] .admin-link:hover{border-color:var(--teal)}

/* ── hero: single column, no art asset here (unlike Library's Hades
   illustration) — text carries it, sized generously instead ── */
body[data-page="marginalia"] .lib-hero-book{max-width:940px; margin:0 auto; padding:5rem 4rem 2rem}
body[data-page="marginalia"] .lib-headline{font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem,5vw,4rem); line-height:1.06; letter-spacing:-.01em; color:var(--text); margin:0 0 1.2rem; text-wrap:balance}
body[data-page="marginalia"] .lib-headline em{font-style:italic; color:var(--teal)}
body[data-page="marginalia"] .lib-lead{font-family:var(--font-body); font-weight:400; font-size:1.15rem; line-height:1.65; color:var(--text-dim); margin:0 0 1.7rem; max-width:560px; text-wrap:pretty}
body[data-page="marginalia"] .lib-lead em{font-style:italic; color:var(--teal)}
body[data-page="marginalia"] .lib-hero-stats{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap}
body[data-page="marginalia"] .lhs{display:inline-flex; align-items:baseline; gap:.55rem; text-decoration:none}
body[data-page="marginalia"] .lhs-v{font-family:var(--font-display); font-size:1.7rem; line-height:1; color:var(--teal)}
body[data-page="marginalia"] .lhs-k{font-family:var(--font-label); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim)}
body[data-page="marginalia"] .lib-outer{padding-top:1.5rem}

/* ── article grid + cards: index cards, not the celestial/constellation
   banner art the rest of the (pre-redesign) site still generates for
   these — wrong universe entirely for a notebook. A colored tab reads as
   the card's own label; the dog-eared corner and the thin margin rule
   repeat the two notebook signifiers from the page itself, at a smaller
   scale, so every card feels like a page torn out of the same notebook. ── */
body[data-page="marginalia"] .lib-section-header h2{font-family:var(--font-display); font-weight:600}
body[data-page="marginalia"] .inline-search{font-family:var(--font-label)}
body[data-page="marginalia"] .tag-filter-pill{font-family:var(--font-label)}
body[data-page="marginalia"] .article-card{
  background:var(--bg2); border:1px solid var(--border); border-radius:3px;
  box-shadow:0 3px 12px rgba(0,0,0,.14); position:relative;
}
body[data-page="marginalia"] .article-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.2)}
body[data-page="marginalia"] .article-card::before{
  content:''; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 18px 18px 0;
  border-color:transparent var(--bg3) transparent transparent;
  filter:drop-shadow(-1px 1px 1px rgba(0,0,0,.18));
}
body[data-page="marginalia"] .article-card::after{
  content:''; position:absolute; top:0; bottom:0; left:2.1rem; width:1px;
  background:rgba(var(--teal-rgb),.3);
}
body[data-page="marginalia"] .article-card-tab{
  display:inline-block; margin:1.1rem 0 0 1.5rem; position:relative; z-index:1;
  font-family:var(--font-label); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bg); background:var(--teal); padding:.28rem .65rem; border-radius:2px;
}
body[data-page="marginalia"] .article-card-body{padding:.8rem 1.5rem 1.4rem 2.7rem}
body[data-page="marginalia"] .article-title{font-family:var(--font-display); font-weight:600; color:var(--text)}
body[data-page="marginalia"] .article-preview{font-family:var(--font-body)}
body[data-page="marginalia"] .article-footer{font-family:var(--font-label)}

/* the "Latest writing" strip above the grid is a leftover from the old
   homepage (see loadLatestWriting) — never re-themed since, and it had
   its own dark-purple hardcoded colors. Given the same tab/margin-line/
   dog-ear treatment as the main grid below so it reads as the same
   notebook, not a different, older component sitting on top of it. */
body[data-page="marginalia"] .writing-card{
  background:var(--bg2); border:1px solid var(--border); border-radius:4px;
  box-shadow:0 3px 12px rgba(0,0,0,.14); backdrop-filter:none;
  position:relative; padding:0; overflow:visible;
}
body[data-page="marginalia"] .writing-card:hover{border-color:var(--teal); box-shadow:0 8px 22px rgba(0,0,0,.2); transform:translateY(-4px)}
body[data-page="marginalia"] .writing-card::before{
  content:''; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 18px 18px 0;
  border-color:transparent var(--bg3) transparent transparent;
  filter:drop-shadow(-1px 1px 1px rgba(0,0,0,.18));
}
body[data-page="marginalia"] .writing-card::after{
  content:''; position:absolute; top:0; bottom:0; left:2.1rem; width:1px;
  background:rgba(var(--teal-rgb),.3);
}
body[data-page="marginalia"] .wc-tag{
  margin:0 0 1rem; font-family:var(--font-label); font-weight:500; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bg); background:var(--teal); padding:.85rem 1.5rem .5rem 2.7rem; border-radius:3px 3px 0 0;
}
body[data-page="marginalia"] .wc-title{font-family:var(--font-display); font-weight:600; color:var(--text); padding:0 1.5rem 0 2.7rem}
body[data-page="marginalia"] .wc-preview{font-family:var(--font-body); color:var(--text-dim); padding:0 1.5rem 0 2.7rem; flex:1}
body[data-page="marginalia"] .wc-meta{font-family:var(--font-label); color:var(--text-dim); padding:0 1.5rem 1.3rem 2.7rem; margin-top:auto}

/* ── reader (focus) view ── */
body[data-page="marginalia"] .back-btn{font-family:var(--font-label)}
body[data-page="marginalia"] .reader-title{font-family:var(--font-display); font-weight:600}
body[data-page="marginalia"] .reader-meta{font-family:var(--font-label)}
body[data-page="marginalia"] .reader-body{font-family:var(--font-body); font-weight:400}
body[data-page="marginalia"] .reader-body h3,
body[data-page="marginalia"] .reader-body h4{font-family:var(--font-display); color:var(--teal)}
body[data-page="marginalia"] .reader-body blockquote{font-family:var(--font-display); color:var(--text-dim)}

@media(max-width:768px){
  body[data-page="marginalia"] .lib-outer{padding-left:1.5rem; padding-right:1.5rem}
  body[data-page="marginalia"] .lib-hero-book{padding:4rem 1.5rem 1.5rem}
}
@media(max-width:480px){
  body[data-page="marginalia"] .lib-head{padding:1rem 1.2rem; gap:.6rem}
  body[data-page="marginalia"] .lib-head-hub{font-size:1.05rem}
  body[data-page="marginalia"] .lib-head-crumb-current{font-size:.95rem}
}

/* ═══ THE SCRIPTORIUM · unified compose page (admin) ═══ */
body[data-page="compose"]{overflow-x:hidden}
body[data-page="compose"] .hub-pattern{display:none !important}
body[data-page="compose"] .hub-bg{z-index:-1;opacity:1}
body[data-page="compose"].light-mode .hub-bg{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(var(--gold-rgb),.18), transparent 55%),
    linear-gradient(180deg, rgba(var(--gold-rgb),.09) 0%, transparent 34%, rgba(var(--teal-rgb),.06) 100%);
}
body[data-page="compose"]:not(.light-mode) .hub-bg{
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(86,98,168,.40), transparent 58%),
    linear-gradient(180deg, rgba(40,48,92,.52) 0%, rgba(20,22,40,.28) 46%, rgba(var(--gold-rgb),.09) 100%);
}
body[data-page="compose"] .compose-main{max-width:1280px;margin:0 auto;padding:6.5rem 2rem 5rem;position:relative;z-index:1}

/* sealed state */
body[data-page="compose"] .compose-gate{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem}
body[data-page="compose"] .cg-mark{font-size:2.4rem;color:var(--gold);opacity:.8}
body[data-page="compose"] .cg-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(1.8rem,4vw,2.8rem);color:var(--text);margin:0}
body[data-page="compose"] .cg-sub{color:var(--text-dim);max-width:34ch;margin:0 0 .6rem}

/* ── shared field utilities (used by book panel + overlays) ── */
body[data-page="compose"] .cf{display:flex;flex-direction:column;gap:.3rem}
body[data-page="compose"] .cf label{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
body[data-page="compose"] .cf-hint{text-transform:none;letter-spacing:0;opacity:.6;font-size:.92em}
body[data-page="compose"] .cf input,body[data-page="compose"] .cf select,body[data-page="compose"] .cf textarea{font-family:'Lato',sans-serif;font-size:.9rem;color:var(--text);background:rgba(var(--gold-rgb),.04);border:1px solid var(--border);border-radius:6px;padding:.5rem .7rem;outline:none;transition:border-color .2s}
body[data-page="compose"] .cf input:focus,body[data-page="compose"] .cf select:focus,body[data-page="compose"] .cf textarea:focus{border-color:rgba(var(--gold-rgb),.6)}
body[data-page="compose"] .cf-upload{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .9rem;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;color:var(--teal);border:1px solid rgba(var(--teal-rgb),.4);border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .2s}
body[data-page="compose"] .cf-upload:hover{background:rgba(var(--teal-rgb),.1)}
body[data-page="compose"] .cf-toggle{display:flex;align-items:center;gap:.55rem;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-dim);cursor:pointer}
body[data-page="compose"] .cf-toggle input{width:auto}
body[data-page="compose"] .compose-body-label{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin:0 0 .5rem}
body[data-page="compose"] .rail-status{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--teal);min-height:1em;align-self:center}
body[data-page="compose"] .scr-muted{color:var(--text-dim);opacity:.8;font-style:italic;font-size:.88rem;margin:.4rem 0}
body[data-page="compose"] .ri-live{color:var(--teal);font-style:normal;font-weight:500}
body[data-page="compose"] .ri-sched{color:var(--gold);font-style:normal}
body[data-page="compose"] .ri-draft{color:var(--text-dim);font-style:normal;opacity:.8}

/* ── workspace shell + tab bar ── */
body[data-page="compose"] .scriptorium{max-width:1320px;margin:0 auto;padding:6.5rem 2rem 5rem;position:relative;z-index:1}
body[data-page="compose"] .scr-head{margin-bottom:1.6rem;border-bottom:1px solid var(--border);padding-bottom:1.1rem}
body[data-page="compose"] .scr-workspaces{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
body[data-page="compose"] .scr-ws{position:relative;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.04em;padding:.45rem .95rem;border-radius:7px 7px 0 0;border:1px solid transparent;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s}
body[data-page="compose"] .scr-ws:hover:not(:disabled){color:var(--text)}
body[data-page="compose"] .scr-ws.active{color:var(--gold);border-color:var(--border);border-bottom-color:transparent;background:rgba(var(--gold-rgb),.06)}
body[data-page="compose"] .scr-ws:disabled{opacity:.45;cursor:not-allowed}
body[data-page="compose"] .scr-soon{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(var(--teal-rgb),.4);border-radius:4px;padding:.05rem .25rem;margin-left:.35rem;vertical-align:middle}

/* ── books: two-pane layout ── */
body[data-page="compose"] .scr-books{display:grid;grid-template-columns:296px 1fr;gap:2rem;align-items:start}

/* left: library browser */
body[data-page="compose"] .scr-browser{position:sticky;top:6rem;border:1px solid var(--border);border-radius:12px;background:rgba(var(--gold-rgb),.035);padding:1rem;max-height:calc(100vh - 8rem);display:flex;flex-direction:column}
body[data-page="compose"] .scr-browser-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}
body[data-page="compose"] .scr-browser-title{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
body[data-page="compose"] .scr-browser-acts{display:flex;gap:.35rem}
body[data-page="compose"] .scr-booklist{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;padding-right:.2rem}
body[data-page="compose"] .scr-series-grp{display:flex;flex-direction:column;gap:.3rem}
body[data-page="compose"] .scr-series-lbl{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.4rem}
body[data-page="compose"] .scr-series-tot{color:var(--text-dim);opacity:.7}
body[data-page="compose"] .scr-series-edit{margin-left:auto;background:none;border:0;color:var(--text-dim);cursor:pointer;font-size:.75rem;line-height:1;padding:0 .2rem;opacity:.6;transition:all .15s}
body[data-page="compose"] .scr-series-edit:hover{color:var(--gold);opacity:1}
body[data-page="compose"] .scr-bk-row{display:flex;align-items:center;gap:.65rem;text-align:left;width:100%;background:transparent;border:1px solid transparent;border-radius:8px;padding:.5rem;cursor:pointer;transition:all .15s}
body[data-page="compose"] .scr-bk-row:hover{background:rgba(var(--gold-rgb),.08);border-color:var(--border)}
body[data-page="compose"] .scr-bk-row.active{background:rgba(var(--gold-rgb),.12);border-color:rgba(var(--gold-rgb),.5)}
body[data-page="compose"] .scr-bk-cover{flex:none;width:34px;height:48px;border-radius:4px;background-size:cover;background-position:center;border:1px solid var(--border)}
body[data-page="compose"] .scr-bk-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
body[data-page="compose"] .scr-bk-title{font-family:'Cormorant Garamond',serif;font-size:1.02rem;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="compose"] .scr-bk-sub{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}

/* mini buttons */
body[data-page="compose"] .scr-mini{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.05em;padding:.35rem .6rem;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;transition:all .15s;white-space:nowrap}
body[data-page="compose"] .scr-mini:hover:not(:disabled){color:var(--text);border-color:rgba(var(--gold-rgb),.5);background:rgba(var(--gold-rgb),.06)}
body[data-page="compose"] .scr-mini.gold{color:var(--gold);border-color:rgba(var(--gold-rgb),.5)}
body[data-page="compose"] .scr-mini.gold:hover{background:rgba(var(--gold-rgb),.12)}
body[data-page="compose"] .scr-mini.danger{color:#c2554a;border-color:rgba(194,85,74,.4)}
body[data-page="compose"] .scr-mini.danger:hover{background:rgba(194,85,74,.12);color:#c2554a}
body[data-page="compose"] .scr-mini:disabled{opacity:.35;cursor:not-allowed}

/* right: detail */
body[data-page="compose"] .scr-detail{min-width:0}
body[data-page="compose"] .scr-detail-empty{min-height:42vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-dim);font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-style:italic;border:1px dashed var(--border);border-radius:12px}

/* book header */
body[data-page="compose"] .scr-bookhead{display:flex;gap:1.6rem;align-items:flex-start;margin-bottom:2rem}
body[data-page="compose"] .scr-cover{flex:none;width:150px;display:flex;flex-direction:column;gap:.5rem;align-items:center}
body[data-page="compose"] .scr-cover-prev{position:relative;width:150px;height:212px;border-radius:8px;border:1px solid var(--border);background:rgba(var(--gold-rgb),.05);overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Cormorant Garamond',serif;font-size:2.4rem;text-shadow:0 1px 6px rgba(0,0,0,.4)}
body[data-page="compose"] .scr-cover-prev img{width:100%;height:100%;object-fit:cover;display:block}
body[data-page="compose"] .scr-cover-clear{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.06em;color:var(--text-dim);background:none;border:0;cursor:pointer;text-decoration:underline}
body[data-page="compose"] .scr-cover-clear:hover{color:#c2554a}
/* Essays: wider landscape banner instead of a portrait cover */
body[data-page="compose"] .scr-cover-wide{width:240px}
body[data-page="compose"] .scr-cover-wide .scr-cover-prev{width:240px;height:135px}
body[data-page="compose"] .scr-art-summary{margin-top:.4rem;font-size:.85rem}
body[data-page="compose"] .scr-bookfields{flex:1;min-width:0;display:flex;flex-direction:column;gap:.9rem}
body[data-page="compose"] .scr-title-input{width:100%;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.6rem,3.2vw,2.4rem);color:var(--text);background:transparent;border:0;border-bottom:1px solid var(--border);padding:.1rem 0 .5rem;outline:none}
body[data-page="compose"] .scr-title-input::placeholder{color:var(--text-dim);opacity:.5}
body[data-page="compose"] .scr-sub-input{width:100%;font-family:'Lato',sans-serif;font-size:.95rem;color:var(--text-dim);background:transparent;border:0;border-bottom:1px solid var(--border);padding:.3rem 0;outline:none}
body[data-page="compose"] .scr-sub-input::placeholder{color:var(--text-dim);opacity:.5}
body[data-page="compose"] .scr-desc-input{width:100%;font-family:'Lato',sans-serif;font-size:.92rem;line-height:1.55;color:var(--text);background:rgba(var(--gold-rgb),.04);border:1px solid var(--border);border-radius:6px;padding:.6rem .7rem;outline:none;resize:vertical}
body[data-page="compose"] .scr-desc-input:focus{border-color:rgba(var(--gold-rgb),.6)}
body[data-page="compose"] .scr-fieldrow{display:flex;gap:.9rem;flex-wrap:wrap}
body[data-page="compose"] .scr-fieldrow .cf-sm{flex:1;min-width:120px}
body[data-page="compose"] .scr-bookhead-acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.3rem}

/* section heads (chapters) */
body[data-page="compose"] .scr-section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:1.3rem;margin-bottom:1rem}
body[data-page="compose"] .scr-section-head h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.4rem;color:var(--text);margin:0}
body[data-page="compose"] .scr-section-acts{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── overlays (series / confirm) ── */
body[data-page="compose"] .scr-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:4vh 1.2rem;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);overflow-y:auto}
body[data-page="compose"] .scr-overlay.open{display:flex}
body[data-page="compose"] .scr-sheet{position:relative;width:100%;max-width:620px;background:var(--bg2,var(--bg));border:1px solid var(--border);border-radius:14px;padding:2rem 2rem 1.6rem;box-shadow:0 30px 80px rgba(0,0,0,.45)}
body[data-page="compose"] .scr-sheet-wide{max-width:1000px}
body[data-page="compose"] .scr-sheet-title{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:1.8rem;color:var(--text);margin:0 0 .3rem}
body[data-page="compose"] .scr-sheet-sub{color:var(--text-dim);font-size:.88rem;line-height:1.55;margin:0 0 1.2rem}
body[data-page="compose"] .scr-sheet-acts{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem}

/* repeatable rows — retailer links / reviews */
body[data-page="compose"] .scr-rows{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.8rem}
body[data-page="compose"] .scr-row{display:flex;align-items:flex-start;gap:.6rem}
body[data-page="compose"] .scr-row input,
body[data-page="compose"] .scr-row textarea{flex:1;min-width:0;background:rgba(var(--gold-rgb),.04);border:1px solid var(--border);border-radius:6px;padding:.55rem .7rem;color:var(--text);font-family:'Lato',sans-serif;font-size:.85rem;outline:none;resize:vertical}
body[data-page="compose"] .scr-row input:focus,
body[data-page="compose"] .scr-row textarea:focus{border-color:rgba(var(--gold-rgb),.6)}
body[data-page="compose"] .scr-row-remove{flex:none;width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text-dim);cursor:pointer;transition:all .15s}
body[data-page="compose"] .scr-row-remove:hover{color:var(--danger,#e06c75);border-color:rgba(224,108,117,.5)}

/* confirm-modal danger button */
body[data-page="compose"] .btn-primary.danger{background:#c2554a !important;border-color:#c2554a !important;color:#fbf5e8 !important}

/* ── full-screen writer ── */
body[data-page="compose"] .scr-write{position:fixed;inset:0;z-index:210;display:none;flex-direction:column;background:var(--bg2,var(--bg))}
body[data-page="compose"] .scr-write.open{display:flex}
body[data-page="compose"] .scr-write-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.3rem;border-bottom:1px solid var(--border);background:rgba(var(--gold-rgb),.06);flex-wrap:wrap;flex:none}
body[data-page="compose"] .scr-write-meta{display:flex;flex-direction:column;min-width:0;gap:.1rem}
body[data-page="compose"] .scr-write-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
body[data-page="compose"] .scr-write-title{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--text);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="compose"] .scr-write-acts{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
body[data-page="compose"] .scr-write-canvas{flex:1;min-height:0;overflow-y:auto;padding:1.6rem 1.4rem 3rem;display:flex;justify-content:center}
body[data-page="compose"] .scr-write-canvas #scrCkBody{width:100%;max-width:840px}
body[data-page="compose"] .scr-write .ck.ck-content{min-height:62vh}
body[data-page="compose"] .scr-write .ck.ck-sticky-panel__content{border-radius:8px 8px 0 0}

/* ── CKEditor 5 skinned to the codex ── */
body[data-page="compose"] .ck.ck-editor{--ck-color-base-background:transparent;--ck-color-base-border:var(--border);--ck-border-radius:8px;--ck-color-text:var(--text)}
body[data-page="compose"] .ck.ck-toolbar{background:rgba(var(--gold-rgb),.05) !important;border-color:var(--border) !important;border-radius:8px 8px 0 0 !important}
body[data-page="compose"] .ck.ck-button,body[data-page="compose"] .ck.ck-button .ck-icon{color:var(--text) !important}
body[data-page="compose"] .ck.ck-button:hover{background:rgba(var(--gold-rgb),.12) !important}
body[data-page="compose"] .ck.ck-button.ck-on{background:rgba(var(--teal-rgb),.18) !important;color:var(--teal) !important}
body[data-page="compose"] .ck.ck-content{background:rgba(var(--gold-rgb),.03) !important;border-color:var(--border) !important;border-radius:0 0 8px 8px !important;min-height:46vh;font-family:'Cormorant Garamond',serif;font-size:1.18rem;line-height:1.75;color:var(--text);padding:1.4rem 1.6rem !important}
body[data-page="compose"] .ck.ck-content h1,body[data-page="compose"] .ck.ck-content h2,body[data-page="compose"] .ck.ck-content h3{font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--text)}
body[data-page="compose"] .ck.ck-content a{color:var(--teal)}
body[data-page="compose"] .ck.ck-content blockquote{border-left:3px solid rgba(var(--gold-rgb),.5);color:var(--text-dim);font-style:italic}
body[data-page="compose"] .ck-powered-by{display:none !important}

@media(max-width:900px){
  body[data-page="compose"] .scr-books{grid-template-columns:1fr}
  body[data-page="compose"] .scr-browser{position:static;max-height:none}
  body[data-page="compose"] .scr-booklist{max-height:40vh}
  body[data-page="compose"] .scr-bookhead{flex-direction:column;align-items:stretch}
  body[data-page="compose"] .scr-cover{align-self:flex-start}
}

/* Scriptorium uses the native cursor (it's an editor) — beat the custom-cursor hiding */
body[data-page="compose"].has-custom-cursor #cursor,
body[data-page="compose"].has-custom-cursor #cursorRing{display:none !important}
body[data-page="compose"].has-custom-cursor,
body[data-page="compose"].has-custom-cursor *{cursor:auto !important}
body[data-page="compose"].has-custom-cursor a,
body[data-page="compose"].has-custom-cursor button,
body[data-page="compose"].has-custom-cursor label,
body[data-page="compose"].has-custom-cursor select,
body[data-page="compose"].has-custom-cursor [onclick],
body[data-page="compose"].has-custom-cursor .scr-ws,
body[data-page="compose"].has-custom-cursor .scr-mini,
body[data-page="compose"].has-custom-cursor .scr-bk-row,
body[data-page="compose"].has-custom-cursor .scr-row-remove,
body[data-page="compose"].has-custom-cursor .ck-button{cursor:pointer !important}
body[data-page="compose"].has-custom-cursor input,
body[data-page="compose"].has-custom-cursor textarea,
body[data-page="compose"].has-custom-cursor .scr-title-input,
body[data-page="compose"].has-custom-cursor .scr-desc-input,
body[data-page="compose"].has-custom-cursor .ck-content{cursor:text !important}

/* ══════════════════════════════════════════════════════════════════════════
   THE BLUE EMBER TAROT — hidden deck (peeking cards + draw overlay)
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --tarot-navy:#0c1326; --tarot-navy2:#121b36; --tarot-edge:rgba(216,181,106,.55); --tarot-blue:#6fa8e0; }

/* ── Peeking cards: tucked off-screen, slide out on hover ── */
.tarot-peeks{position:fixed;inset:0;pointer-events:none;z-index:120}
/* Three card-backs stacked + fanned in the corner. Hover spreads them. */
/* 3 card-backs CLUSTERED into a fan (like a held hand), poking out from the
   right edge, up high. They all share one anchor and fan via rotation — not
   spread vertically. Hover opens the fan and slides it further in. */
.tarot-peek{position:fixed;right:0;top:34%;pointer-events:auto;width:74px;height:116px;padding:0;border:none;background:none;cursor:pointer;
  transform-origin:right center;filter:drop-shadow(-6px 8px 22px rgba(0,0,0,.5));transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s}
.tarot-peek .tarot-face--back{width:74px;height:116px;border-radius:9px}
.tarot-peek--1{transform:translateX(52%) rotate(-13deg);z-index:1}
.tarot-peek--2{transform:translateX(52%) rotate(0deg);z-index:2}
.tarot-peek--3{transform:translateX(52%) rotate(13deg);z-index:3}
.tarot-peeks:hover .tarot-peek--1{transform:translateX(16%) rotate(-19deg)}
.tarot-peeks:hover .tarot-peek--2{transform:translateX(10%) rotate(0deg) scale(1.04)}
.tarot-peeks:hover .tarot-peek--3{transform:translateX(16%) rotate(19deg)}
.tarot-peek:focus-visible{outline:none;filter:drop-shadow(-6px 10px 26px rgba(111,168,224,.6))}
@media (max-width:760px){
  .tarot-peek{top:30%;width:50px;height:80px}
  .tarot-peek .tarot-face--back{width:50px;height:80px}
  .tarot-peek--1{transform:translateX(56%) rotate(-11deg)}
  .tarot-peek--2{transform:translateX(56%) rotate(0deg)}
  .tarot-peek--3{transform:translateX(56%) rotate(11deg)}
  .tarot-peeks:hover .tarot-peek--1{transform:translateX(20%) rotate(-15deg)}
  .tarot-peeks:hover .tarot-peek--2{transform:translateX(14%) rotate(0deg)}
  .tarot-peeks:hover .tarot-peek--3{transform:translateX(20%) rotate(15deg)}
}

/* ── Card faces (shared by peek, back, and front) ── */
.tarot-card{position:relative;width:200px;height:312px;perspective:1100px}
.tarot-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.tarot-card.flipped .tarot-card-inner{transform:rotateY(180deg)}
.tarot-card.instant .tarot-card-inner{transition:none}
.tarot-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,var(--tarot-navy2),var(--tarot-navy));border:1px solid var(--tarot-edge);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 36px rgba(8,12,26,.7)}
.tarot-face--front{transform:rotateY(180deg);display:flex;flex-direction:column}

/* card back — emblem + ring watermark */
.tarot-face--back{display:flex;align-items:center;justify-content:center}
.tarot-face--back .tarot-emblem{width:54%;height:auto;opacity:.85}
.tarot-back-ring{position:absolute;inset:10px;border-radius:9px;border:1px solid rgba(216,181,106,.35);
  box-shadow:inset 0 0 0 4px rgba(12,19,38,.6), inset 0 0 0 5px rgba(216,181,106,.12)}
.tarot-face--back::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 50% 40%, rgba(111,168,224,.16), transparent 60%)}

/* corners */
.tarot-corner{position:absolute;z-index:2;font-family:'JetBrains Mono',monospace;color:#d8b56a;font-size:.7rem;letter-spacing:.05em}
.tarot-corner.tl{top:9px;left:11px}
.tarot-corner.br{bottom:9px;right:11px;transform:rotate(180deg)}
.tarot-pip{font-size:.95rem}

/* art area */
.tarot-art{flex:1;display:flex;align-items:center;justify-content:center;position:relative;margin:8px 8px 0}
.tarot-art--procedural{background:radial-gradient(circle at 50% 60%, rgba(47,95,176,.22), transparent 70%)}
.tarot-art img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* full-bleed generated art — the painted card frame becomes the card edge */
.tarot-face--img{padding:0;background:#0b1124}
.tarot-art--full{position:absolute;inset:0;margin:0;flex:none}
.tarot-art--full img{width:100%;height:100%;object-fit:cover;border-radius:0;display:block}
.tarot-face--img.is-reversed .tarot-art--full img{transform:rotate(180deg)}
.tarot-peek .tarot-face--img{border-radius:9px}
.tarot-emblem{width:62%;height:auto;display:block}
.tarot-emblem.rev{transform:rotate(180deg)}
.tarot-emblem .tarot-flame{filter:drop-shadow(0 0 10px rgba(111,168,224,.6))}

/* name bar */
.tarot-namebar{padding:10px 12px 14px;text-align:center;border-top:1px solid rgba(216,181,106,.22);
  background:linear-gradient(180deg, transparent, rgba(8,12,26,.55))}
.tarot-name{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:1.18rem;color:#f1ead9;line-height:1.1}
.tarot-sub{display:block;margin-top:3px;font-family:'JetBrains Mono',monospace;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa8d6}
.tarot-rev-tag{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;
  font-size:.46rem;letter-spacing:.16em;text-transform:uppercase;color:#e0a0a0;border:1px solid rgba(224,160,160,.4);border-radius:20px;padding:2px 8px;background:rgba(40,16,20,.5)}
.tarot-face--front.is-reversed .tarot-namebar .tarot-name{color:#f0d8d0}

/* ── Overlay ── */
.tarot-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%, rgba(20,28,56,.92), rgba(6,9,18,.96));
  backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .35s, visibility .35s;padding:2rem 1rem;overflow-y:auto}
.tarot-overlay.visible{opacity:1;visibility:visible}
.tarot-modal{position:relative;max-width:920px;width:100%;text-align:center;padding:1.5rem 1rem 2.5rem;margin:auto}
.tarot-close{position:absolute;top:-.4rem;right:.2rem;background:none;border:none;color:#9aa8d6;font-size:1.3rem;cursor:pointer;transition:color .2s;line-height:1}
.tarot-close:hover{color:#f1ead9}
.tarot-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:#5fcaa9;margin-bottom:.6rem}
.tarot-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);color:#f1ead9;margin:0 0 .4rem}
.tarot-title em{color:#8fc0f4;font-style:italic}
.tarot-lede{font-family:'Lato',sans-serif;color:#cdc5d6;font-size:.92rem;max-width:520px;margin:0 auto 1.6rem}
.tarot-modes{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.8rem}
.tarot-mode-btn{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#cdc5d6;
  background:rgba(30,26,46,.5);border:1px solid rgba(216,181,106,.28);border-radius:24px;padding:.55rem 1.1rem;cursor:pointer;transition:all .25s}
.tarot-mode-btn:hover{border-color:rgba(216,181,106,.55);color:#f1ead9}
.tarot-mode-btn.active{background:rgba(216,181,106,.14);border-color:#d8b56a;color:#f1ead9}

.tarot-stage{display:flex;justify-content:center;align-items:flex-start;gap:1.6rem;flex-wrap:wrap;min-height:312px}
.tarot-stage--spread .tarot-card{width:168px;height:262px}
.tarot-slot{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.tarot-slot-label{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#d8b56a}

.tarot-readout{max-width:680px;margin:1.8rem auto 0;opacity:0;transform:translateY(10px);transition:opacity .5s, transform .5s}
.tarot-readout.show{opacity:1;transform:none}
.tarot-meaning{text-align:left;padding:1rem 0;border-top:1px solid rgba(216,181,106,.18)}
.tarot-meaning:first-child{border-top:none}
.tarot-pos{display:block;font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:#5fcaa9;margin-bottom:.3rem}
.tarot-meaning h4{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;color:#f1ead9;margin:0 0 .4rem}
.tarot-meaning h4 em{color:#8fc0f4;font-style:italic;font-size:1rem}
.tarot-meaning p{font-family:'Lato',sans-serif;color:#cdc5d6;font-size:.95rem;line-height:1.65;margin:0}
.tarot-again{margin-top:1.6rem;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#d8b56a;background:none;border:1px solid rgba(216,181,106,.45);border-radius:24px;padding:.6rem 1.4rem;cursor:pointer;transition:all .25s}
.tarot-again:hover{background:rgba(216,181,106,.1);border-color:#d8b56a;color:#f1ead9}

/* emblem flame flicker on card backs/peeks */
@keyframes tarotFlicker{0%,100%{opacity:.85;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.04)}}
.tarot-face--back .tarot-flame{animation:tarotFlicker 3.5s ease-in-out infinite;transform-origin:60px 138px}

@media (prefers-reduced-motion: reduce){
  .tarot-card-inner{transition:none}
  .tarot-face--back .tarot-flame{animation:none}
  .tarot-peek{transition:none}
}

/* ── Global reduced-motion guard ──
   Honors the OS "reduce motion" setting: kills ambient/decorative
   animation site-wide while keeping content visible (reveal elements
   are forced to their final state instead of fading in). */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
  .home-sky,.shoot,.hub-pattern{display:none !important}
  .hub-bg::after{animation:none !important}
}

/* ════════════════════════════════════════════════════════════
   THEME POLISH + AMBIENT STARFIELD
   ════════════════════════════════════════════════════════════ */

/* Light mode gets warm depth + a consistent field across every page,
   instead of a single flat tan. (Library's Blue Ember gradient overrides this.) */
body.light-mode{
  background:
    radial-gradient(ellipse 100% 60% at 50% -5%, #f6eed9 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(var(--teal-rgb),.07), transparent 60%),
    linear-gradient(180deg, #efe4cb 0%, #e8dabd 100%);
  background-attachment:fixed;
}

/* Footer in light mode: parchment on normal pages (readable dark text). */
body.light-mode footer{background:#e8dcbf;border-top:1px solid var(--border);
  --text:#3a3027;--text-dim:#5c4d34;--gold:#7e5526;--gold-rgb:126,85,38;}
/* a quiet rainbow pride star by the colophon */
footer{overflow:hidden}
.footer-base-meta::before{
  content:'✦';display:inline-block;margin-right:.5em;transform-origin:center;
  font-size:1.4rem;line-height:1;vertical-align:-.32em;
  background:linear-gradient(90deg,#e0564f,#e8902a,#e6cf2f,#3fb56f,#4ea0e0,#9a6fe0,#e0564f);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:prideStarPulse 4s ease-in-out infinite, prideStarShift 9s linear infinite;
}

/* About star-chart tooltip: dark glass in dark mode, parchment in light. */
body.light-mode .star-dot{background:var(--bg3)}
body.light-mode .star-dot-tooltip{background:var(--bg2);color:var(--text);border-color:var(--border)}

/* A quiet celestial pride star — rainbow ink on the same glyph the site uses everywhere. */
.pride-star{
  background:linear-gradient(90deg,#e0564f,#e8902a,#e6cf2f,#3fb56f,#4ea0e0,#9a6fe0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:.95em;margin-left:.35em;letter-spacing:0;
}
@keyframes prideStarPulse{0%,100%{transform:scale(.92);opacity:.78}50%{transform:scale(1.22);opacity:1}}
/* cycles the rainbow by sliding the gradient — no filter (which breaks text-clip). */
@keyframes prideStarShift{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ── Ambient starfield · dark mode, every page ──
   Painted into the existing .hub-bg layer (already present site-wide and
   correctly behind content), so no markup changes are needed. Gives the
   inner pages the same night-sky atmosphere as the home page. */
body:not(.light-mode) .hub-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  animation:starTwinkle 7s ease-in-out infinite;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 12%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1px 1px at 17% 28%, rgba(220,234,251,.55), transparent 100%),
    radial-gradient(1.6px 1.6px at 24% 9%, rgba(255,247,224,.8), transparent 100%),
    radial-gradient(1px 1px at 33% 22%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.2px 1.2px at 41% 14%, rgba(200,229,255,.7), transparent 100%),
    radial-gradient(1px 1px at 49% 31%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.5px 1.5px at 57% 8%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1px 1px at 64% 24%, rgba(220,234,251,.55), transparent 100%),
    radial-gradient(1.3px 1.3px at 72% 16%, rgba(255,247,224,.75), transparent 100%),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 88% 11%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1px 1px at 94% 26%, rgba(200,229,255,.6), transparent 100%),
    radial-gradient(1px 1px at 6% 46%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.3px 1.3px at 14% 62%, rgba(220,234,251,.6), transparent 100%),
    radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.5px 1.5px at 31% 54%, rgba(255,247,224,.7), transparent 100%),
    radial-gradient(1px 1px at 39% 71%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.2px 1.2px at 47% 88%, rgba(200,229,255,.6), transparent 100%),
    radial-gradient(1px 1px at 55% 58%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.4px 1.4px at 63% 82%, rgba(255,255,255,.75), transparent 100%),
    radial-gradient(1px 1px at 71% 49%, rgba(220,234,251,.55), transparent 100%),
    radial-gradient(1.3px 1.3px at 79% 67%, rgba(255,247,224,.65), transparent 100%),
    radial-gradient(1px 1px at 87% 84%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 93% 55%, rgba(255,255,255,.8), transparent 100%),
    radial-gradient(1px 1px at 3% 90%, rgba(200,229,255,.5), transparent 100%),
    radial-gradient(1.2px 1.2px at 35% 38%, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 68% 40%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.3px 1.3px at 12% 96%, rgba(255,247,224,.6), transparent 100%);
}
@keyframes starTwinkle{0%,100%{opacity:.55}50%{opacity:1}}

/* ── Light mode atmosphere · a custom antique "Hades" star chart faded into the page ──
   Anchored to the document (not the viewport) so it SCROLLS WITH THE PAGE — the chart
   unrolls top-to-bottom as you scroll. Multiply-blended so it reads as aged ink on the
   parchment, behind all content. */
body.light-mode:not([data-page="library"]):not([data-page="about"]):not([data-page="contact"]):not([data-page="marginalia"]):not([data-page="projects"]) main::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url(/media/star-chart-hades.jpg);
  background-size:cover;background-position:top center;background-repeat:no-repeat;
  mix-blend-mode:multiply;opacity:.08;
}
/* On home the page eases into a dark dusk lower down, so fade the chart out in the
   tan upper section before the dark arrives (no hard cut-off). */
body[data-page="home"].light-mode main::before{
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 50%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 22%, transparent 50%);
}
/* About/Contact are flat paper, no watermark — that celestial texture belongs
   to home and the older full-nav pages, not these quieter satellite pages. */
body.light-mode:not([data-page="home"]) .hub-bg{opacity:1}

/* ── Easter egg: ignite the Pisces constellation (homepage hero) ──
   A gentle glow that ripples out from Alrescha: the cords brighten, the stars
   give a soft twinkle (staggered, not a balloon), and the knot flares quietly. */
.pisces-art{cursor:pointer}
@keyframes piscesStrandGlow{40%{stroke:#e8c87e;filter:drop-shadow(0 0 2.5px var(--gold))}}
.pisces-art.ignited .strand{animation:piscesStrandGlow 1.5s ease}
.pisces-art.ignited .circlet-line{animation:piscesStrandGlow 1.5s ease .25s}
/* renamed so it does NOT clobber the base @keyframes piscesTwinkle (the steady
   blink). Ignite = a quick blink then a bright flare — no scaling/ballooning. */
@keyframes piscesIgniteStar{0%,100%{opacity:1;filter:none}30%{opacity:.5}58%{opacity:1;filter:drop-shadow(0 0 5px #fff) brightness(1.8)}}
.pisces-art.ignited .star{animation:piscesIgniteStar 1.4s ease}
.pisces-art.ignited .star.major{animation-delay:.04s}
.pisces-art.ignited .star.minor{animation-delay:.28s}
@keyframes piscesGlow{0%,100%{opacity:.4;transform:scale(1)}45%{opacity:.95;transform:scale(1.4)}}
.pisces-art.ignited .glow{animation:piscesGlow 1.5s ease;transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:reduce){.pisces-art.ignited .strand,.pisces-art.ignited .circlet-line,.pisces-art.ignited .star,.pisces-art.ignited .glow{animation:none}}

/* ══ LIBRARY EMBER FIELD — sparks drifting up the whole viewport on every
   Library page. Fixed, click-through, and kept sparse so it reads as
   atmosphere rather than a screensaver. Injected by js/library.js. ══ */
body[data-page="library"] .lib-ember-field{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
body[data-page="library"] .lib-ember-field i{position:absolute;bottom:-2vh;width:4px;height:4px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(190,220,255,.95),rgba(111,168,224,.6) 55%,transparent 75%);box-shadow:0 0 9px rgba(143,192,244,.75);
  animation:libEmberDrift linear infinite}
body[data-page="library"].light-mode .lib-ember-field i{
  background:radial-gradient(circle,rgba(70,140,230,1),rgba(30,90,180,.75) 55%,transparent 75%);box-shadow:0 0 10px rgba(30,100,200,.7)}
body[data-page="library"] .lib-ember-field i:nth-child(3n){width:6px;height:6px}
body[data-page="library"] .lib-ember-field i:nth-child(4n){width:3px;height:3px}
@keyframes libEmberDrift{
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:.85}
  75%{opacity:.5}
  100%{transform:translate(var(--dx,20px),-108vh);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  body[data-page="library"] .lib-ember-field{display:none}
}

/* Shelf: bigger covers so a long blurb doesn't dwarf them, and the blurb
   keeps the line breaks it was written with (they were being collapsed). */
body[data-page="library"] .book-card .book-spine{width:clamp(200px,35vw,420px)}
body[data-page="library"] .book-foot-desc,
body[data-page="library"] .book-detail-desc{white-space:pre-line}
body[data-page="library"] .book-foot-desc{max-width:780px}
@media(max-width:640px){
  body[data-page="library"] .book-card .book-spine{width:100%;max-width:260px}
}

/* Shelf type scale: sized to sit beside the larger covers. */
body[data-page="library"] .book-foot-title{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.15;font-weight:600}
body[data-page="library"] .book-foot-meta{font-size:.8rem;letter-spacing:.12em;gap:1rem}
body[data-page="library"] .book-foot-status{font-size:.7rem;padding:.25rem .65rem}
body[data-page="library"] .book-foot-desc{font-size:.92rem;line-height:1.58}
body[data-page="library"] .series-eyebrow{font-size:.76rem;letter-spacing:.2em}
body[data-page="library"] .series-title{font-size:clamp(1.7rem,3vw,2.2rem);font-weight:600}
body[data-page="library"] .series-meta{font-size:.76rem}
body[data-page="library"] .book-series-num{font-size:.8rem;letter-spacing:.12em}

/* Book detail: companion link sits left-aligned under the blurb */
body[data-page="library"] .lib-world-cta-book{text-align:left;margin:0 0 1.6rem}

/* Shelf plank: each book on the list rests on a thin shelf line. */
body[data-page="library"] .books-grid{gap:0}
body[data-page="library"] .book-card{position:relative;padding-bottom:2.2rem;margin-bottom:2.2rem}
body[data-page="library"] .book-card::after{content:'';position:absolute;left:-1rem;right:-1rem;bottom:0;height:9px;border-radius:2px;
  background:linear-gradient(180deg,var(--border),color-mix(in srgb,var(--border) 55%,transparent));
  box-shadow:0 8px 14px -6px rgba(0,0,0,.45)}
body[data-page="library"] .book-card:last-child{margin-bottom:0}

/* Bookshelf page heading: bigger, and closer to the header */
body[data-page="library"] .lib-outer-shelf{padding-top:2.5rem}
body[data-page="library"] .lib-outer-shelf .lib-section-header h2{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:600;line-height:1.1}
body[data-page="library"] .lib-outer-shelf .lib-section-header{margin-bottom:2.2rem}

/* Consistent breathing room under the sticky header on Library, Marginalia
   and Forge: the hero starts 2.5rem into main instead of 5rem. */
body[data-page="library"] .lib-hero-book{padding-top:2.5rem}
body[data-page="marginalia"] .lib-hero-book{padding-top:2.5rem}
body[data-page="projects"] .atlas-hero{padding-top:2.5rem}
@media(max-width:1080px){
  body[data-page="library"] .lib-hero-book{padding-top:2.5rem}
  body[data-page="projects"] .atlas-hero{padding-top:2.5rem}
}