/* ==========================================================================
   THE SPINE — main stylesheet
   --------------------------------------------------------------------------
   Design tokens
     void    #06080B  background
     bone    #F5F3EC  primary light ink / light-mode surface
     signal  #5FD0FF  primary accent — "the impulse traveling the spine"
     signal2 #2C7A9E  deeper accent, borders, secondary glow
     ember   #FF6A3D  hazard accent — sponsor / danger / heat, used sparingly
     marrow  #12161D  elevated dark surface (cards, panels)
   Type
     display : "Space Grotesk"   — big moments, vertebra labels
     body    : "Inter"           — paragraphs, forms, docs
     mono    : "JetBrains Mono"  — index tags (C1/T1/L1/S1), numerals, code
   ========================================================================== */

:root{
  --void:#06080B;
  --void-2:#0A0D12;
  --marrow:#12161D;
  --marrow-2:#181D26;
  --bone:#F5F3EC;
  --bone-dim:#B9C1CC;
  --signal:#5FD0FF;
  --signal-2:#2C7A9E;
  --ember:#FF6A3D;
  --ember-dim:#B4491F;
  --line:rgba(245,243,236,0.12);

  --bg:var(--void);
  --bg-elevated:var(--marrow);
  --bg-elevated-2:var(--marrow-2);
  --fg:var(--bone);
  --fg-dim:var(--bone-dim);
  --accent:var(--signal);
  --accent-2:var(--signal-2);
  --danger:var(--ember);
  --border:var(--line);
  --shadow:0 30px 80px -30px rgba(0,0,0,0.7);

  --font-display:"Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --topbar-h:76px;
  --radius:620px;
  --card-w:min(500px, 78vw);
  --ease-spine:cubic-bezier(.16,.84,.32,1);
  color-scheme: dark;
}

[data-theme="light"]{
  --bg:var(--bone);
  --bg-elevated:#FFFFFF;
  --bg-elevated-2:#EFEDE4;
  --fg:#10131A;
  --fg-dim:#4B5261;
  --border:rgba(16,19,26,0.12);
  --shadow:0 30px 70px -35px rgba(16,19,26,0.35);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar{ display:none; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .5s var(--ease-spine), color .5s var(--ease-spine);
}
body.docs-mode, body.no-hijack{ overflow:auto; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }
::selection{ background:var(--accent); color:var(--void); }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   0. LOADER — a 7x7 lattice settling from jittering noise into order,
      with a jittery error value counting down to exactly zero
   ========================================================================== */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--void);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease-spine), visibility .8s;
}
#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner{
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.loader-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  grid-template-rows:repeat(7, 1fr);
  gap:6px;
  width:min(190px, 48vw);
  height:min(190px, 48vw);
}
.loader-cell{
  border-radius:3px;
  background:var(--signal-2);
  opacity:.22;
  transform:translate(var(--jx), var(--jy)) rotate(var(--jr));
  animation:cellJitter .45s ease-in-out infinite alternate;
  transition:transform .75s var(--ease-spine), opacity .6s ease, background .6s ease;
}
@keyframes cellJitter{
  from{ transform:translate(var(--jx), var(--jy)) rotate(var(--jr)) scale(1); }
  to{ transform:translate(calc(var(--jx) * -0.7), calc(var(--jy) * -0.5)) rotate(calc(var(--jr) * -0.6)) scale(.82); }
}
.loader-cell.settled{
  animation:none;
  transform:translate(0,0) rotate(0deg) scale(1);
  opacity:var(--final-opacity);
  background:var(--signal);
  box-shadow:0 0 7px color-mix(in srgb, var(--signal) 55%, transparent);
}

.loader-readout{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
}
.lr-label{ font-size:11.5px; color:var(--fg-dim); }
.lr-delta{ font-size:15px; color:var(--signal); min-width:6.4ch; text-align:right; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   1. TOP BAR
   ========================================================================== */
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:2000;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px, 4vw, 48px);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  border-bottom:1px solid var(--border);
  transform:translateY(-100%);
  animation:topbarDrop .8s .1s var(--ease-spine) forwards;
}
body.loading #topbar{ animation:none; transform:translateY(-100%); }
@keyframes topbarDrop{ to{ transform:translateY(0); } }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:26px; height:26px; position:relative; }
.brand-mark svg{ width:100%; height:100%; }
.brand-mark .bm-dot{
  animation:brandPulse 2.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes brandPulse{
  0%,100%{ opacity:.4; r:2.6; }
  50%{ opacity:1; r:3.6; }
}
.brand-word{ font-family:var(--font-mono); font-size:15px; letter-spacing:.02em; }
.brand-word b{ color:var(--signal); font-weight:600; }

nav#primary-nav{
  position:relative;
  display:flex; align-items:center; gap:2px;
  padding:4px;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:100px;
}
/* an alternating sine/cosine line behind the tabs, instead of a straight
   connector — the same "wave" language as the rest of the site, just
   horizontal and much smaller */
.nav-wave{
  position:absolute; left:16px; right:16px; top:50%;
  height:14px; transform:translateY(-50%);
  z-index:0; pointer-events:none; overflow:visible;
}
.nav-wave path{ fill:none; stroke:var(--border); stroke-width:1.4; }
.nav-link{
  position:relative; z-index:1;
  padding:9px 15px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--fg-dim);
  border-radius:100px;
  transition:color .3s ease, transform .3s var(--ease-spine);
}
/* the joint marker above each tab */
.nav-link::after{
  content:"";
  position:absolute; left:50%; top:-2px;
  width:5px; height:5px; border-radius:50%;
  background:var(--border);
  transform:translateX(-50%);
  transition:background .3s ease, box-shadow .3s ease;
}
.nav-link:hover{ color:var(--fg); transform:translateY(-2px); }
.nav-link:hover::after{ background:var(--accent); box-shadow:0 0 8px var(--signal); }

.nav-link.active{ color:var(--void); }
.nav-link.active::before{
  content:""; position:absolute; inset:0; border-radius:100px;
  background:var(--accent); z-index:-1;
}
.nav-link.active::after{ background:var(--void); }

.topbar-controls{ display:flex; align-items:center; gap:14px; }

/* A single button that cycles Auto -> Light -> Dark -> Auto on each tap,
   rather than three separate buttons in a pill. The three glyphs are
   stacked on top of one another and cross-fade with a little spin as
   the mode changes; a slow dashed ring turns behind it constantly, a
   small ambient "this is a live instrument" detail. */
.theme-cycle{
  position:relative;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:visible;
  transition:border-color .3s ease, transform .3s var(--ease-spine);
}
.theme-cycle:hover{ transform:scale(1.07); border-color:var(--accent-2); }
.theme-cycle:active{ transform:scale(.93); }

.tc-ring{
  position:absolute; inset:-5px;
  border-radius:50%;
  border:1.4px dashed var(--border);
  animation:tcSpin 16s linear infinite;
  opacity:.55;
  pointer-events:none;
}
@keyframes tcSpin{ to{ transform:rotate(360deg); } }

.tc-glyph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; color:var(--fg-dim);
  opacity:0; transform:scale(.45) rotate(-50deg);
  transition:opacity .35s var(--ease-spine), transform .4s var(--ease-spine);
  pointer-events:none;
}
.theme-cycle[data-mode="auto"] .tc-auto,
.theme-cycle[data-mode="light"] .tc-light,
.theme-cycle[data-mode="dark"] .tc-dark{
  opacity:1; transform:scale(1) rotate(0deg); color:var(--accent);
}

.hamburger{
  display:none; width:38px; height:38px; position:relative;
  border-radius:10px;
}
.hamburger span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--fg);
  border-radius:2px; transition:transform .4s var(--ease-spine), opacity .3s ease, top .4s var(--ease-spine);
}
.hamburger span:nth-child(1){ top:13px; }
.hamburger span:nth-child(2){ top:18px; }
.hamburger span:nth-child(3){ top:23px; }
.hamburger.open span:nth-child(1){ top:18px; transform:rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ top:18px; transform:rotate(-45deg); }

/* ==========================================================================
   2. SPINE STAGE — one card cross-fades to the next, driven by the curve
   ========================================================================== */
#spine-stage{
  position:fixed; inset:0;
}
body.no-hijack #spine-stage{
  position:relative; inset:auto; min-height:100vh;
}

.spine-line-wrap{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent 20%, black 26%, black 74%, transparent 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, transparent 20%, black 26%, black 74%, transparent 80%, transparent 100%);
}
.spine-line-wrap svg{ display:block; height:100%; width:100%; overflow:visible; }
.spine-fill{
  stroke:var(--accent); stroke-width:2.5; fill:none;
  stroke-linecap:round; filter:drop-shadow(0 0 6px var(--signal));
  opacity:0; transition:opacity .3s ease;
}
.spine-node{
  fill:var(--accent); stroke:var(--void); stroke-width:2;
  opacity:0; transition:opacity .3s ease;
}
/* Below 640px there isn't room for a 500px-capped card to sit off-centre
   at all without going off-screen (see computeLean() in spine-engine.js,
   which stops offsetting cards at this width too) — so the curve just
   isn't shown; a curve nothing sits near to pierce would look stray. */
@media (max-width: 639px){
  .spine-line-wrap{ display:none; }
}

/* Each card sits where its nearby arc swings toward. The tag sits a
   fixed distance from centre, clear of both — always closer to the
   middle than either card gets, since cards are pushed toward the edges. */
.vertebra-tag{
  position:fixed; left:calc(50% - 190px); z-index:6;
  transform:translate(-100%, -50%);
  top:50%;
  font-family:var(--font-mono);
  text-align:right;
  opacity:0; transition:opacity .5s ease, transform .5s var(--ease-spine);
  pointer-events:none;
}
.vertebra-tag.show{ opacity:1; }
.vertebra-tag .vt-index{
  font-size:13px; color:var(--accent); letter-spacing:.08em;
}
.vertebra-tag .vt-name{
  font-size:11px; color:var(--fg-dim); letter-spacing:.14em; text-transform:uppercase; margin-top:2px;
}
.vertebra-tag .vt-nerve{
  position:absolute; right:-46px; top:50%; width:40px; height:2px;
  background:linear-gradient(to right, var(--accent), transparent);
  transform:translateY(-50%) scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-spine);
}
.vertebra-tag.show .vt-nerve{ transform:translateY(-50%) scaleX(1); }

/* side-left (the default above) puts the tag left of centre, text
   right-aligned, nerve reaching rightward toward the spine — this mirrors
   it for vertebrae whose card leans left, so the tag sits on the right. */
.vertebra-tag.side-right{
  left:auto; right:calc(50% - 190px);
  transform:translate(100%, -50%);
  text-align:left;
}
.vertebra-tag.side-right .vt-nerve{
  right:auto; left:-46px;
  background:linear-gradient(to left, var(--accent), transparent);
  transform-origin:right;
}

@media (max-width: 639px){
  .vertebra-tag{ display:none; }
}

#spine-carousel{
  position:absolute; inset:0;
}

.card{
  position:absolute;
  top:50%; left:50%;
  width:var(--card-w);
  will-change:transform, opacity;
}
.card-face{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:22px;
  padding:clamp(18px,3vw,32px);
  box-shadow:var(--shadow);
  max-height:min(58vh, 520px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.card-face::-webkit-scrollbar{ width:6px; }
.card-face::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }

.card .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  color:var(--accent); text-transform:uppercase; margin-bottom:10px;
}
.card .eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--signal);
}

/* ---- Hero (C1) ---- */
/* Opaque (matching the page background exactly, so no visible "box"
   appears) rather than transparent — the hero still reads as text
   floating free with no card panel, but now actually hides the curve
   behind it like every other card does, instead of the curve showing
   straight through. */
.hero-face{ text-align:left; background:var(--bg); border:none; box-shadow:none; padding:0; max-height:none; }
.hero-title{
  font-size:clamp(1.9rem, 5vw, 3.2rem);
  line-height:1.05;
  margin-bottom:12px;
}
.hero-title .rx{ color:var(--accent); }
.hero-sub{ font-size:clamp(.95rem,1.4vw,1.1rem); color:var(--fg-dim); max-width:52ch; margin-bottom:18px; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.scroll-hint{
  margin-top:22px; display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--fg-dim); letter-spacing:.1em; text-transform:uppercase;
}
.scroll-hint .chev{ animation:chevBounce 1.6s ease-in-out infinite; }
@keyframes chevBounce{ 0%,100%{ transform:translateY(0); opacity:.4; } 50%{ transform:translateY(6px); opacity:1; } }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:100px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.03em;
  border:1px solid var(--border);
  transition:transform .25s var(--ease-spine), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--accent); color:var(--void); border-color:var(--accent); }
.btn-primary:hover{ box-shadow:0 10px 30px -8px var(--signal); }
.btn-ghost{ background:transparent; color:var(--fg); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ember{ background:transparent; color:var(--ember); border-color:var(--ember-dim); }
.btn-ember:hover{ background:var(--ember); color:var(--void); box-shadow:0 10px 30px -8px var(--ember); }

/* ---- Project card ---- */
.project-card h2{ font-size:clamp(1.35rem,2.2vw,1.8rem); margin-bottom:8px; }
.project-tagline{ color:var(--accent); font-size:.95rem; margin-bottom:10px; }
.project-desc{ color:var(--fg-dim); margin-bottom:14px; }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  padding:5px 11px; border-radius:100px; border:1px solid var(--border); color:var(--fg-dim);
}
.status-pill{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; margin-left:10px; vertical-align:middle;
  border:1px solid var(--accent-2); color:var(--signal);
}
.status-pill.wip{ border-color:var(--ember-dim); color:var(--ember); }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- Project index (compact grid vertebra) ---- */
.index-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .index-grid{ grid-template-columns:1fr; } }
.index-tile{
  border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  background:var(--bg-elevated-2);
  transition:border-color .25s ease, transform .25s ease;
}
.index-tile:hover{ border-color:var(--accent-2); transform:translateY(-2px); }
.index-tile h3{ font-size:.95rem; margin-bottom:4px; }
.index-tile p{ font-size:.82rem; color:var(--fg-dim); margin-bottom:10px; }
.index-tile .tile-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.tile-actions .btn{ padding:6px 12px; font-size:11px; }

/* ---- Patents ---- */
.patent-item{
  border-top:1px solid var(--border); padding:12px 0; display:flex; flex-direction:column; gap:5px;
}
.patent-item:first-of-type{ border-top:none; padding-top:0; }
.patent-item h3{ font-size:1rem; }
.patent-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent); letter-spacing:.04em; }
.patent-abstract{ color:var(--fg-dim); font-size:.88rem; }
.empty-note{ color:var(--fg-dim); font-style:italic; font-size:.9rem; }

/* ---- Idea form ---- */
.field{ margin-bottom:12px; }
.field label{ display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:12px;
  padding:10px 13px; color:var(--fg); font-family:var(--font-body); font-size:.92rem;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ resize:vertical; min-height:78px; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);
}
.form-note{ font-size:.8rem; color:var(--fg-dim); margin-top:8px; }
.form-status{ margin-top:10px; font-family:var(--font-mono); font-size:.85rem; min-height:1.2em; }
.form-status.ok{ color:var(--signal); }
.form-status.err{ color:var(--ember); }

/* ---- Footer / coccyx ---- */
.footer-face{ text-align:center; }
.footer-links{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:20px 0 8px; }
.footer-links a{ font-family:var(--font-mono); font-size:.85rem; color:var(--fg-dim); }
.footer-links a:hover{ color:var(--accent); }
.footer-fine{ font-size:.78rem; color:var(--fg-dim); opacity:.7; margin-top:18px; }

/* ==========================================================================
   3. SPONSOR MODAL
   ========================================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:5000;
  background:color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  padding:24px;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  width:min(460px, 100%);
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:22px;
  padding:clamp(22px,4vw,34px);
  box-shadow:var(--shadow);
  transform:translateY(18px) scale(.97); transition:transform .35s var(--ease-spine);
  max-height:88vh; overflow-y:auto;
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
.modal-head h3{ font-size:1.25rem; }
.modal-close{ font-size:20px; line-height:1; padding:4px; color:var(--fg-dim); }
.modal-close:hover{ color:var(--ember); }
.modal-sub{ color:var(--fg-dim); font-size:.88rem; margin-bottom:20px; }

.pay-tabs{ display:flex; gap:8px; margin-bottom:18px; }
.pay-tab{
  flex:1; padding:10px; border-radius:12px; border:1px solid var(--border);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-align:center;
  color:var(--fg-dim); transition:all .25s ease;
}
.pay-tab.active{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--signal) 10%, transparent); }

.amount-row{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.amount-chip{
  padding:8px 14px; border-radius:100px; border:1px solid var(--border);
  font-family:var(--font-mono); font-size:12.5px; color:var(--fg-dim);
}
.amount-chip.active{ border-color:var(--accent); color:var(--accent); }

.pay-panel{ display:none; }
.pay-panel.active{ display:block; animation:panelIn .3s var(--ease-spine); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.upi-vpa-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; margin-bottom:16px; font-family:var(--font-mono); font-size:.85rem;
}
.copy-btn{ font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:.04em; }
.qr-wrap{ display:flex; justify-content:center; margin:14px 0; }
.qr-wrap canvas, .qr-wrap img{ border-radius:12px; border:1px solid var(--border); background:#fff; padding:10px; }
.pay-fineprint{ font-size:.78rem; color:var(--fg-dim); text-align:center; margin-top:10px; }

/* ==========================================================================
   4. DOCS PAGE (no spine, ordinary scroll)
   ========================================================================== */
body.docs-mode{ overflow-y:auto; }
.docs-shell{ max-width:760px; margin:0 auto; padding:calc(var(--topbar-h) + 56px) 24px 100px; }
.docs-back{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.05em; display:inline-flex; align-items:center; gap:6px; margin-bottom:26px; }
.docs-eyebrow{ font-family:var(--font-mono); font-size:11.5px; color:var(--fg-dim); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.docs-title{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:8px; }
.docs-desc{ color:var(--fg-dim); margin-bottom:36px; }
.docs-body{ font-size:1rem; }
.docs-body h1,.docs-body h2,.docs-body h3{ margin-top:2em; margin-bottom:.6em; }
.docs-body h1{ font-size:1.6rem; }
.docs-body h2{ font-size:1.3rem; }
.docs-body h3{ font-size:1.1rem; }
.docs-body p{ margin-bottom:1.1em; color:var(--fg); }
.docs-body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.docs-body ul,.docs-body ol{ margin:0 0 1.1em 1.4em; padding:0; }
.docs-body li{ margin-bottom:.4em; }
.docs-body code{ font-family:var(--font-mono); background:var(--bg-elevated-2); padding:.15em .4em; border-radius:5px; font-size:.9em; }
.docs-body pre{ background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:12px; padding:16px 18px; overflow-x:auto; margin-bottom:1.4em; }
.docs-body pre code{ background:none; padding:0; }
.docs-body blockquote{ border-left:3px solid var(--accent); margin:0 0 1.1em; padding:2px 0 2px 16px; color:var(--fg-dim); }
.docs-body table{ width:100%; border-collapse:collapse; margin-bottom:1.4em; font-size:.92rem; }
.docs-body th,.docs-body td{ border:1px solid var(--border); padding:8px 12px; text-align:left; }
.docs-body hr{ border:none; border-top:1px solid var(--border); margin:2em 0; }
.docs-index{ margin-top:60px; padding-top:30px; border-top:1px solid var(--border); }
.docs-index h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:14px; }
.docs-index ul{ display:flex; flex-direction:column; gap:8px; }
.docs-index a{ font-size:.92rem; }
.docs-index a:hover{ color:var(--accent); }

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  nav#primary-nav{
    position:fixed; top:var(--topbar-h); left:0; right:0; bottom:0;
    background:var(--bg); border:none; border-radius:0; padding:26px 24px;
    flex-direction:column; align-items:stretch; gap:2px;
    transform:translateX(100%); transition:transform .45s var(--ease-spine);
    z-index:1900;
  }
  .nav-wave{ display:none; }
  nav#primary-nav.open{ transform:translateX(0); }
  .nav-link{ font-size:15px; padding:16px 6px; border-bottom:1px solid var(--border); border-radius:0; }
  .nav-link::after{ display:none; }
  .nav-link.active::before{ border-radius:0; }
  .hamburger{ display:block; }
}

/* ==========================================================================
   7. REDUCED MOTION / NO-JS FALLBACK — plain stacked document flow
   ========================================================================== */
body.no-hijack{ overflow-y:auto; }
body.no-hijack .spine-line-wrap{ position:absolute; height:100%; }
body.no-hijack #spine-carousel{
  position:relative; height:auto; display:flex; flex-direction:column;
  align-items:center; gap:70px; padding:calc(var(--topbar-h) + 90px) 20px 140px;
  transform-style:flat;
}
body.no-hijack .card{
  position:relative; top:auto; left:auto; width:var(--card-w);
  transform:none !important; opacity:1 !important; filter:none !important;
}
body.no-hijack .card-face{ transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; }
}