/* ============================================================
   VOIR — immersive home. Three themes (silver / gold / purple).
   Theme swaps colour tokens AND the photo set via CSS vars.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --display:"Fraunces", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  /* light institutional palette (shared across themes) — white-forward, neutral */
  --paper:#FBFBFC; --paper-2:#E7E7EC; --ink:#141018; --ink-soft:#4B3B5E;

  /* pointer parallax (set by JS, -1..1) */
  --mx:0; --my:0;

  --maxw:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── THEME TOKENS ───────────────────────────────────────── */
html[data-theme="purple"]{
  --accent:#B482E6; --accent-2:#7C4BD0; --accent-ink:#E9DCFB;
  --bg0:#000000; --bg1:#0B0414; --bg2:#1C0830; --bg3:#32125A;
  --glow:rgba(180,130,230,.42); --hairline:rgba(180,130,230,.18);
  --img-hero:url(img/purple/hero.jpg);
  --img-field:url(img/purple/field.jpg);
  --img-principles:url(img/purple/principles.jpg);
  --img-layer:url(img/purple/layer.jpg);
}
html[data-theme="gold"]{
  --accent:#D4A853; --accent-2:#B98A2E; --accent-ink:#F4E4C0;
  --bg0:#000000; --bg1:#120C05; --bg2:#241804; --bg3:#3A2A0A;
  --glow:rgba(212,168,83,.38); --hairline:rgba(212,168,83,.18);
  --img-hero:url(img/gold/hero.jpg);
  --img-field:url(img/gold/field.jpg);
  --img-principles:url(img/gold/principles.jpg);
  --img-layer:url(img/gold/layer.jpg);
}
html[data-theme="silver"]{
  --accent:#BEC4D0; --accent-2:#8A90A0; --accent-ink:#EEF1F6;
  --bg0:#000000; --bg1:#0D0F13; --bg2:#1B1F27; --bg3:#2A303B;
  --glow:rgba(190,196,208,.34); --hairline:rgba(190,196,208,.16);
  --img-hero:url(img/silver/hero.jpg);
  --img-field:url(img/silver/field.jpg);
  --img-principles:url(img/silver/principles.jpg);
  --img-layer:url(img/silver/layer.jpg);
}

html{ scroll-behavior:smooth; }
body{
  font-family:var(--serif);
  background:var(--bg0);
  color:#EDE9F2;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .8s var(--ease);
}
a{ color:inherit; text-decoration:none; }
.ital{ font-family:var(--display); font-style:italic; font-weight:400; color:var(--accent-ink); }
/* italic accents on white grounds were near-white (accent-ink) → use darker accent */
.sec--light .ital{ color:var(--accent-2); }

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(18px,4vw,40px);
  /* Apple-style: a quiet frosted bar present from the top, firming on scroll */
  background:color-mix(in srgb, var(--bg0) 34%, transparent);
  backdrop-filter:blur(11px) saturate(1.1); -webkit-backdrop-filter:blur(11px) saturate(1.1);
  border-bottom:1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
  transition:background .4s, backdrop-filter .4s, border-color .4s, padding .4s, transform .34s var(--ease);
}
.nav.scrolled{ background:color-mix(in srgb, var(--bg0) 72%, transparent); backdrop-filter:blur(20px) saturate(1.2); -webkit-backdrop-filter:blur(20px) saturate(1.2); border-bottom-color:var(--hairline); }
/* auto-hide on scroll-down, reveal on scroll-up (set by main.js) */
.nav--down{ transform:translateY(-100%); }
/* over a white section: become a clean light bar instead of a dark translucent shade */
.nav--light{ background:color-mix(in srgb,#FBFBFC 80%,transparent); border-bottom-color:rgba(20,16,24,.10); }
.nav--light .wordmark{ color:var(--ink); }
.nav--light .wordmark span{ color:var(--accent-2); }
.nav--light .nav-links a{ color:rgba(20,16,24,.72); }
.nav--light .nav-links a:hover, .nav--light .nav-links a[aria-current="page"]{ color:var(--accent-2); opacity:1; }
.nav--light .nav-signin{ color:var(--accent-2); border-color:rgba(20,16,24,.18); }
.nav--light .nav-toggle span{ background:var(--ink); }
.wordmark{ font-family:var(--display); font-weight:600; letter-spacing:.14em; font-size:17px; }
/* centered link cluster, like Apple's nav (desktop only; ≤900px is the drawer) */
@media (min-width:901px){ .nav-links{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } }
.wordmark span{ color:var(--accent); }
.nav-links{ display:flex; gap:clamp(18px,2.4vw,34px); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.nav-links a{ opacity:.74; transition:opacity .3s, color .3s; }
.nav-links a:hover{ opacity:1; color:var(--accent); }
.nav-links a[aria-current="page"]{ opacity:1; color:var(--accent); }
/* nav dropdown menus (injected by main.js) */
.nav-item{ position:relative; display:inline-flex; align-items:center; }
.nav-dropdown{ display:flex; flex-direction:column; gap:1px; }
/* desktop: full-width mega-menu that drops from the whole bar */
@media (min-width:901px){
  .nav-dropdown{ position:absolute; left:0; right:0; top:100%;
    border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
    background:color-mix(in srgb,var(--bg1) 84%,var(--bg2)); backdrop-filter:blur(24px) saturate(1.2); -webkit-backdrop-filter:blur(24px) saturate(1.2);
    padding:clamp(20px,2.4vw,34px) clamp(18px,4vw,44px);
    opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .25s var(--ease), transform .25s var(--ease);
    box-shadow:0 34px 60px -34px rgba(0,0,0,.7); z-index:54; }
  .nav-dropdown.open{ opacity:1; pointer-events:auto; transform:none; }
  .nav-mega-inner{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; }
  .nav-dropdown a{ flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:7px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; text-transform:none; opacity:.82;
    padding:11px 14px; border-radius:9px; transition:background .2s, color .2s, opacity .2s; }
  .nav-dropdown .nd-row{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
  .nav-dropdown .nd-label{ flex:1; }
  .nav-dropdown a i{ font-style:normal; opacity:.35; transition:transform .25s var(--ease), opacity .2s; }
  .nav-dropdown a:hover{ opacity:1; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
  .nav-dropdown a:hover i{ transform:translateX(4px); opacity:1; }
}
/* decorative optical-illusion tiles under each mega-menu item — render only when there is room */
.illus{ display:none; }
@media (min-width:1280px){
  .nav-dropdown a{ width:152px; }
  /* tiles are colorless + translucent: patterns are drawn in a translucent tint of the
     active theme accent over a transparent void, so they pick up whichever theme
     (silver / gold / purple) is selected and let the menu ground show through. */
  .illus{ display:block; position:relative; height:56px; border-radius:6px; overflow:hidden;
    --il-mark:color-mix(in srgb, var(--accent) 52%, transparent);
    --il-dim:color-mix(in srgb, var(--accent) 24%, transparent);
    --il-void:transparent;
    border:1px solid var(--hairline); background:color-mix(in srgb, var(--accent) 8%, transparent);
    transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
  .illus::before{ content:""; position:absolute; inset:-60%; animation:il-rot 8s linear infinite; animation-play-state:paused; }
  .nav-dropdown.open .illus::before{ animation-play-state:running; }
  .illus--drift::before{ background:repeating-radial-gradient(circle at 50% 50%, var(--il-mark) 0 2px, var(--il-void) 2px 7px); animation-name:il-rot; animation-duration:9s; }
  .illus--waves::before{ background:repeating-linear-gradient(90deg, var(--il-mark) 0 9px, var(--il-void) 9px 18px); animation-name:il-slide; animation-duration:2.8s; }
  .illus--checker::before{ background:conic-gradient(var(--il-void) 0 25%, var(--il-mark) 0 50%) 0 0 / 18px 18px; animation-name:il-slide; animation-duration:3.6s; }
  .illus--spiral::before{ background:conic-gradient(from 0deg, var(--il-void), var(--il-mark), var(--il-void), var(--il-mark), var(--il-void)); animation-name:il-rot; animation-duration:6s; }
  .illus--spokes::before{ background:repeating-conic-gradient(from 0deg, var(--il-void) 0 6deg, var(--il-mark) 6deg 12deg); animation-name:il-rot; animation-duration:12s; }
  .illus--breathe::before{ background:repeating-radial-gradient(circle, var(--il-mark) 0 1.5px, var(--il-void) 1.5px 8px); animation-name:il-breathe; animation-duration:3.4s; animation-timing-function:ease-in-out; }
  .illus--scint::before{ inset:0; background:repeating-linear-gradient(0deg, transparent 0 8px, var(--il-mark) 8px 10px), repeating-linear-gradient(90deg, transparent 0 8px, var(--il-mark) 8px 10px), var(--il-void); animation-name:il-flick; animation-duration:1.4s; animation-timing-function:steps(2,end); }
  .nav-dropdown a:hover .illus{ transform:scale(1.07); border-color:var(--accent); box-shadow:0 10px 24px -12px var(--glow);
    --il-mark:color-mix(in srgb, var(--accent) 76%, transparent); }
  .nav-dropdown a:hover .illus::before{ animation-duration:1.5s; filter:contrast(1.25) brightness(1.08); }
}
@keyframes il-rot{ to{ transform:rotate(360deg); } }
@keyframes il-slide{ to{ transform:translateX(18px); } }
@keyframes il-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.6); } }
@keyframes il-flick{ 0%,100%{ opacity:1; } 50%{ opacity:.18; } }
@media (prefers-reduced-motion:reduce){ .illus::before{ animation:none !important; } }
/* lead-grid feature cards: fixed even columns so a 4-card row never orphans (4 / 2 / 1, never 3) */
.lead-grid{ grid-template-columns:repeat(4,1fr) !important; }
@media (max-width:1080px){ .lead-grid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width:600px){ .lead-grid{ grid-template-columns:1fr !important; } }
/* mobile: in-drawer accordion (unchanged behavior) */
@media (max-width:900px){
  .nav-item{ display:block; width:100%; }
  /* drawer shows only the top-level links (Prysm · Spectrum · Ledger · Field · Contact);
     the mega-menu submenus stay hidden so the drawer is clean and starts at the top */
  .nav-dropdown{ display:none !important; }
}
/* secondary section sub-bar — sticks just below the global nav (Apple/Stripe pattern) */
.subnav{ position:sticky; top:var(--navh,52px); z-index:40; transition:top .34s var(--ease); display:flex; gap:clamp(14px,2.6vw,32px); justify-content:center; flex-wrap:wrap;
  padding:11px clamp(18px,4vw,40px);
  background:color-mix(in srgb,var(--bg0) 70%,transparent); backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid var(--hairline);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.subnav a{ color:#EDE9F2; opacity:.62; white-space:nowrap; transition:opacity .3s, color .3s; }
.subnav a:hover{ opacity:1; color:var(--accent); }
@media (max-width:900px){ .subnav{ justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; -ms-overflow-style:none; scrollbar-width:none; } .subnav::-webkit-scrollbar{ display:none; } }
/* when the nav auto-hides on scroll-down, the sub-bar rises to the top edge (no orphaned line) */
.nav-hidden .subnav{ top:0; }
/* anchored sections clear the fixed nav + sticky sub-bar when jumped to */
section[id]{ scroll-margin-top:96px; }

/* ════════ FLOATING THEME + ATMOSPHERE CONTROL (replaces the nav dots) ════════ */
.nav .theme-switch{ display:none; }   /* moved out of the top-right corner */
.theme-fab{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:60;
  width:48px; height:48px; border-radius:50%; cursor:pointer; padding:0;
  background:color-mix(in srgb,var(--bg0) 66%,transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 36px -12px rgba(0,0,0,.6); transition:transform .3s var(--ease), box-shadow .3s; }
.theme-fab:hover{ transform:scale(1.06); }
.theme-fab .dot{ width:17px; height:17px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent); transition:background .4s; }
.theme-panel{ position:fixed; right:clamp(16px,3vw,28px); bottom:calc(clamp(16px,3vw,28px) + 60px); z-index:60; width:min(290px,88vw);
  background:color-mix(in srgb,var(--bg0) 88%,transparent); backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2);
  border:1px solid var(--hairline); border-radius:16px; padding:20px;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.theme-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.theme-panel h4{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 12px; }
.theme-panel h4:not(:first-child){ margin-top:20px; }
.tp-themes{ display:flex; gap:16px; }
.tp-theme{ display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#EDE9F2; opacity:.55; transition:opacity .25s; }
.tp-theme .sw{ width:28px; height:28px; pointer-events:none; }
.tp-theme.is-active{ opacity:1; }
.tp-modes{ display:flex; flex-wrap:wrap; gap:8px; }
.tp-mode{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:7px 12px; border-radius:999px;
  border:1px solid var(--hairline); background:transparent; color:#EDE9F2; opacity:.62; cursor:pointer; transition:border-color .25s, color .25s, opacity .25s; }
.tp-mode:hover{ opacity:1; }
.tp-mode.is-active{ border-color:var(--accent); color:var(--accent); opacity:1; }
.theme-switch{ display:flex; gap:9px; align-items:center; }
.sw{ width:15px; height:15px; border-radius:50%; border:1px solid rgba(255,255,255,.35); cursor:pointer; padding:0; transition:transform .3s, box-shadow .3s; }
.sw:hover{ transform:scale(1.2); }
.sw-silver{ background:#BEC4D0; } .sw-gold{ background:#D4A853; } .sw-purple{ background:#8a52e0; }
.sw.is-active{ box-shadow:0 0 0 2px var(--bg0), 0 0 0 3.5px currentColor; transform:scale(1.15); }
.sw-silver.is-active{ color:#BEC4D0; } .sw-gold.is-active{ color:#D4A853; } .sw-purple.is-active{ color:#8a52e0; }

/* ── HERO · cinematic (static photo + point-cloud overlay) ─ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{
  position:absolute; inset:-8%; background-image:var(--img-hero);
  background-size:cover; background-position:center;
  transform:translate3d(calc(var(--mx)*-18px), calc(var(--my)*-18px),0) scale(1.06);
  transition:background-image .6s ease; animation:slowzoom 26s ease-in-out infinite alternate;
}
@keyframes slowzoom{ from{ transform:translate3d(calc(var(--mx)*-18px),calc(var(--my)*-18px),0) scale(1.06);} to{ transform:translate3d(calc(var(--mx)*-18px),calc(var(--my)*-18px),0) scale(1.14);} }
.hero-grade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--bg0) 55%,transparent) 0%, transparent 28%, color-mix(in srgb,var(--bg0) 30%,transparent) 60%, var(--bg0) 100%),
    linear-gradient(75deg, var(--bg0) 8%, color-mix(in srgb,var(--bg0) 30%,transparent) 42%, transparent 70%),
    radial-gradient(120% 80% at 80% 30%, var(--glow) 0%, transparent 55%);
}
.cloud{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; opacity:.9; }
.hero-inner{ position:relative; z-index:3; max-width:var(--maxw); width:100%; margin:0 auto; padding:0 clamp(20px,4vw,52px); }
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent); margin-bottom:26px; }
.hero-h1{
  font-family:var(--display); font-weight:400; line-height:.96;
  font-size:clamp(48px,9vw,128px); letter-spacing:-.02em; max-width:14ch;
  text-shadow:0 4px 60px rgba(0,0,0,.5);
}
.hero-thesis{ margin-top:30px; max-width:46ch; font-size:clamp(16px,1.5vw,21px); line-height:1.55; color:#D9D2E6; font-weight:300; }
.hero-cta{ margin-top:42px; display:flex; gap:16px; flex-wrap:wrap; }
.btn{ font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; padding:15px 26px; border-radius:2px; transition:all .35s var(--ease); display:inline-flex; gap:10px; align-items:center; }
.btn i{ font-style:normal; transition:transform .35s var(--ease); }
.btn:hover i{ transform:translateX(5px); }
.btn-solid{ background:var(--accent); color:#0a0710; font-weight:500; }
.btn-solid:hover{ box-shadow:0 12px 40px -8px var(--glow); transform:translateY(-2px); }
.btn-ghost{ border:1px solid rgba(255,255,255,.28); color:#fff; }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
/* ghost buttons on white grounds need a dark outline (else white-on-white) */
.sec--light .btn-ghost{ border-color:color-mix(in srgb, var(--ink) 26%, transparent); color:var(--ink); }
.sec--light .btn-ghost:hover{ border-color:var(--accent-2); color:var(--accent-2); }
/* but ghost buttons sitting on dark photo cards stay white (override the light rule) */
.duo-card .btn-ghost, .fcard .btn-ghost, .photosec .btn-ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.duo-card .btn-ghost:hover, .fcard .btn-ghost:hover, .photosec .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.scroll-hint{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint span{ width:1px; height:34px; background:linear-gradient(var(--accent),transparent); animation:drop 1.8s ease-in-out infinite; }
@keyframes drop{ 0%,100%{ opacity:.2; transform:scaleY(.4); transform-origin:top;} 50%{ opacity:1; transform:scaleY(1);} }

/* ── §1·5 IMMERSIVE · Gaussian-splat field ───────────────── */
.immersive{ position:relative; height:100svh; min-height:620px; background:radial-gradient(120% 100% at 50% 30%, var(--bg2) 0%, var(--bg0) 70%); overflow:hidden; display:flex; align-items:flex-end; }
.splat-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
.splat-grade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, var(--bg0) 0%, color-mix(in srgb,var(--bg0) 30%,transparent) 34%, transparent 60%),
            linear-gradient(0deg, var(--bg0) 0%, transparent 30%, transparent 78%, color-mix(in srgb,var(--bg0) 60%,transparent) 100%); }
.splat-loading{ position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); opacity:.8; transition:opacity .6s; }
.splat-loading span{ animation:blink 1.2s steps(3) infinite; }
@keyframes blink{ 50%{ opacity:.2; } }
.splat-loading.hide{ opacity:0; pointer-events:none; }
.immersive-overlay{ position:relative; z-index:3; max-width:var(--maxw); width:100%; margin:0 auto; padding:0 clamp(20px,4vw,52px) clamp(56px,8vw,96px); pointer-events:none; }
.immersive-overlay .sec-label{ pointer-events:auto; }
.immersive-h{ font-family:var(--display); font-weight:300; font-size:clamp(34px,6vw,84px); line-height:.98; letter-spacing:-.02em; max-width:15ch; text-shadow:0 4px 50px var(--bg0); }
.immersive-sub{ margin-top:20px; max-width:44ch; font-size:clamp(15px,1.4vw,19px); line-height:1.6; color:#D9D2E6; font-weight:300; }
.immersive-overlay .inline-link{ pointer-events:auto; margin-top:22px; }
.splat-hint{ position:absolute; z-index:3; right:clamp(20px,4vw,52px); bottom:clamp(56px,8vw,96px); font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:8px; }
.splat-hint b{ color:var(--accent); font-size:14px; animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── GENERIC SECTION ─────────────────────────────────────── */
.sec{ position:relative; padding:clamp(80px,11vw,160px) clamp(20px,4vw,52px); }
.sec--dark{ background:color-mix(in srgb, var(--bg0) 78%, transparent); color:#EDE9F2; }
/* animated atmosphere backdrop (atmosphere.mjs) sits behind everything */
.atmosphere{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; opacity:.55; }
main{ position:relative; z-index:1; }
/* reading comfort: dark sections that carry long prose / question lists get a
   calmer ground (atmosphere stays vivid behind quotes, splats, short statements) */
/* all dark sections share one opacity (above) so adjacent sections join seamlessly */
.sec--dark .read p, .sec--dark .qlist li, .sec--dark .lead, .sec--dark .split-r p{ text-shadow:0 1px 16px var(--bg0); }
.sec--light{ background:var(--paper); color:var(--ink); }
.sec-label{ font-family:var(--mono); font-size:11px; letter-spacing:.36em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.sec-label--ink{ color:var(--ink-soft); }
.sec-head{ max-width:var(--maxw); margin:0 auto clamp(40px,6vw,72px); }
.sec-head h2{ font-family:var(--display); font-weight:300; font-size:clamp(28px,4.4vw,56px); line-height:1.02; letter-spacing:-.02em; max-width:18ch; }
.sec-sub{ margin-top:16px; font-style:italic; font-family:var(--display); opacity:.82; font-size:clamp(16px,1.6vw,22px); }

/* reveal — inner content eases in, but SECTION GROUNDS stay painted opaque at
   all times. This stops the fixed .atmosphere cloud from flashing through a
   section during its scroll-in fade (the section's own opaque bg always covers
   it). Grounds never fade; only their contents do. */
[data-reveal]{ opacity:0; transition:opacity .9s var(--ease); }
[data-reveal].in{ opacity:1; }
.sec[data-reveal], section[data-reveal]{ opacity:1 !important; }

/* ── §2 LINEAGE ──────────────────────────────────────────── */
.lineage{ max-width:var(--maxw); margin:0 auto; }
.line-track{ display:flex; gap:0; flex-wrap:wrap; border-top:1px solid var(--hairline); }
.stage{ flex:1 1 160px; padding:26px 22px 26px 0; border-right:1px solid var(--hairline); position:relative; }
.stage:last-child{ border-right:0; }
.stage b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(18px,2vw,26px); margin-bottom:6px; }
.stage span{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.5; }
.stage--final{ flex:1.6 1 220px; }
.stage--final b{ color:var(--accent); font-size:clamp(22px,2.6vw,34px); }
.stage--final span{ opacity:.85; color:var(--accent-ink); }
.stage a{ display:block; transition:opacity .3s; }
.stage a:hover{ opacity:1; }
.stage a:hover b{ color:var(--accent); }

/* ── §3 PULL QUOTE ───────────────────────────────────────── */
.quoteblock{ text-align:center; }
.bigquote{ max-width:20ch; margin:0 auto; font-family:var(--display); font-weight:300; font-size:clamp(30px,5.2vw,68px); line-height:1.08; letter-spacing:-.02em; }
.bigquote em{ color:var(--accent-ink); font-style:italic; }

/* ── §4 SPLIT ────────────────────────────────────────────── */
.split{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,6vw,90px); align-items:start; }
.split-big{ font-family:var(--display); font-weight:300; font-size:clamp(28px,3.8vw,50px); line-height:1.04; letter-spacing:-.02em; }
.split-r{ padding-top:8px; }
.split-r p{ font-size:clamp(15px,1.3vw,18px); line-height:1.7; margin-bottom:18px; color:#CFC8DC; font-weight:300; }
.split-r .movement a{ color:var(--accent-ink); border-bottom:1px solid var(--hairline); }
.inline-link{ display:inline-block; margin-top:8px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid transparent; transition:border-color .3s; }
.inline-link:hover{ border-color:var(--accent); }

/* ── §5 IMAGE BREAK ──────────────────────────────────────── */
.break{ position:relative; min-height:64vh; display:flex; align-items:center; justify-content:center; background-image:var(--img-field); background-size:cover; background-position:center; background-attachment:fixed; }
.break-veil{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, transparent 0%, var(--bg0) 92%), linear-gradient(var(--bg0) 0%, transparent 18%, transparent 82%, var(--bg0) 100%); }
.break-phrase{ position:relative; z-index:2; max-width:18ch; text-align:center; font-family:var(--display); font-weight:300; font-style:italic; font-size:clamp(24px,3.6vw,46px); line-height:1.12; text-shadow:0 2px 40px var(--bg0); }

/* ── §6 PRINCIPLES (floating cards) ──────────────────────── */
.principles{ overflow:hidden; }
.principles-bg{ position:absolute; inset:-6%; background-image:var(--img-principles); background-size:cover; background-position:center; opacity:.20; transform:translate3d(calc(var(--mx)*-14px),calc(var(--my)*-14px),0) scale(1.05); }
.principles-grade{ position:absolute; inset:0; background:linear-gradient(var(--bg0),transparent 30%,transparent 70%,var(--bg0)), radial-gradient(80% 60% at 70% 40%, var(--glow) 0%, transparent 60%); }
.principles .sec-head, .float-field{ position:relative; z-index:2; }
.float-field{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
.pcard{ background:color-mix(in srgb, var(--bg1) 80%, transparent); border:1px solid var(--hairline); backdrop-filter:blur(10px); border-radius:4px; padding:30px; transition:transform .5s var(--ease), border-color .4s, box-shadow .5s; display:block; }
.pcard:hover{ border-color:var(--accent); box-shadow:0 30px 70px -30px var(--glow); transform:translateY(-6px); }
.pnum{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--accent); }
.pcard h3{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2.2vw,30px); margin:12px 0 14px; line-height:1.05; }
.pcard p{ font-size:14.5px; line-height:1.65; color:#C8C1D6; font-weight:300; }
.hot{ color:var(--accent-ink); border-bottom:1px solid var(--accent-2); }
.pcard-go{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.pcard:hover .pcard-go{ opacity:1; transform:none; }
/* asymmetric placement */
.pcard--lg{ grid-column:1 / 7; grid-row:1 / 3; }
.pcard--sm{ grid-column:8 / 13; grid-row:1; margin-top:36px; }
.pcard--narrow{ grid-column:7 / 10; grid-row:2; }
.pcard--mid{ grid-column:10 / 13; grid-row:2 / 4; }
.pcard--wide{ grid-column:1 / 7; grid-row:3; margin-top:6px; }

/* ── §7 DOMAINS (portal grid, light) ─────────────────────── */
.portal-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.portal{ background:#fff; border:1px solid var(--paper-2); border-radius:4px; padding:34px 30px 28px; min-height:230px; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s, border-color .4s; }
.portal::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--accent); transition:width .5s var(--ease); }
.portal:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(40,20,60,.35); border-color:var(--accent); }
.portal:hover::after{ width:100%; }
.portal-no{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--accent-2); }
.portal h3{ font-family:var(--display); font-weight:400; font-size:clamp(19px,1.9vw,25px); margin:14px 0 10px; line-height:1.05; color:var(--ink); }
.portal p{ font-size:14px; line-height:1.6; color:#5a5466; font-weight:300; flex:1; }
.portal-go{ margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); transition:color .3s; }
.portal:hover .portal-go{ color:var(--accent); }
.portal--feature{ grid-column:1 / -1; min-height:auto; flex-direction:row; align-items:center; gap:40px; background:linear-gradient(100deg,#fff,var(--paper)); }
.portal--feature h3{ font-size:clamp(22px,2.6vw,34px); margin:6px 0; flex:0 0 36%; }
.portal--feature p{ font-size:15px; }

/* image-band card (image top + solid text plate below — always legible) */
.portal--img{ padding:0; overflow:hidden; }
.portal--img .portal-thumb{ position:relative; height:172px; overflow:hidden; flex:0 0 auto; }
.portal--img .portal-thumb::before{ content:""; position:absolute; inset:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.03); transition:transform .6s var(--ease); }
.portal--img:hover .portal-thumb::before{ transform:scale(1.1); }
.portal--img .portal-thumb::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(10,7,16,.42)), linear-gradient(0deg, color-mix(in srgb,var(--accent) 30%, transparent), transparent 60%); }
.portal--img .portal-body{ padding:24px 28px 26px; display:flex; flex-direction:column; flex:1; }
.portal--img .portal-go{ margin-top:auto; padding-top:16px; }
/* feature variant: image band on top, full width */
.portal--feature.portal--img{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
.portal--feature.portal--img .portal-thumb{ height:210px; }
.portal--feature.portal--img h3{ flex:none; }
@media (max-width:560px){ .portal--img .portal-thumb{ height:150px; } }

/* entry card with image band (Ledger feed) */
.entry--img{ padding:0; overflow:hidden; }
.entry--img .entry-thumb{ position:relative; height:148px; overflow:hidden; }
.entry--img .entry-thumb::before{ content:""; position:absolute; inset:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.03); transition:transform .6s var(--ease); }
.entry--img:hover .entry-thumb::before{ transform:scale(1.1); }
.entry--img .entry-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(10,7,16,.4)), linear-gradient(0deg, color-mix(in srgb,var(--accent) 28%,transparent), transparent 60%); }
.entry--img .entry-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.entry--img .entry-go{ margin-top:auto; padding-top:14px; }

/* slide card with image band (Spectrum applications) */
.slide--img{ padding:0; overflow:hidden; justify-content:flex-start; }
.slide--img::before{ display:none; }
.slide--img .slide-thumb{ position:relative; height:56%; overflow:hidden; }
.slide--img .slide-thumb::before{ content:""; position:absolute; inset:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.03); transition:transform .6s var(--ease); }
.slide--img:hover .slide-thumb::before{ transform:scale(1.1); }
.slide--img .slide-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, color-mix(in srgb,var(--accent) 26%,transparent), transparent 55%); }
.slide--img .slide-body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; }

/* footer portal card with full-bleed image + scrim (small doorway) */
.foot-card--img{ position:relative; overflow:hidden; border-color:var(--hairline); }
.foot-card--img::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.04); transition:transform .5s var(--ease); }
.foot-card--img:hover::before{ transform:scale(1.11); }
.foot-card--img::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.84) 100%), linear-gradient(0deg, color-mix(in srgb,var(--accent) 24%, transparent), transparent 70%); }
.foot-card--img > b, .foot-card--img > span{ position:relative; z-index:2; }
.foot-card--img b{ color:#fff; }

/* ── §8 LAYER STACK ──────────────────────────────────────── */
.layers{ overflow:hidden; }
.layers-bg{ position:absolute; inset:-6%; background-image:var(--img-layer); background-size:cover; background-position:center; opacity:.16; transform:translate3d(calc(var(--mx)*-12px),calc(var(--my)*-12px),0) scale(1.05); }
.layers-grade{ position:absolute; inset:0; background:linear-gradient(var(--bg0),transparent 35%,transparent 65%,var(--bg0)); }
.layers .sec-head, .stack{ position:relative; z-index:2; }
.stack{ max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:10px; perspective:1200px; }
.layer{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:20px 28px; border:1px solid var(--hairline); border-radius:3px; background:color-mix(in srgb,var(--bg2) 42%, transparent); backdrop-filter:blur(6px); transition:transform .5s var(--ease), background .4s, border-color .4s; transform:translateX(calc(var(--i,0) * 14px)); }
.layer:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--bg3) 55%, transparent); transform:translateX(0) scale(1.015); }
.layer b{ font-family:var(--display); font-weight:400; font-size:clamp(18px,2vw,26px); }
.layer span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.55; text-align:right; }
.layer--final{ border-color:var(--accent-2); background:color-mix(in srgb,var(--bg3) 60%, transparent); }
.layer--final b{ color:var(--accent-ink); }

/* ── §9 SLIDE RAIL ───────────────────────────────────────── */
.rail-sec{ overflow:hidden; }
.rail{ display:flex; gap:18px; overflow-x:auto; padding:6px 4px 26px; scroll-snap-type:x mandatory; cursor:grab; -webkit-overflow-scrolling:touch; max-width:var(--maxw); margin:0 auto; }
.rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail::-webkit-scrollbar{ height:4px; } .rail::-webkit-scrollbar-thumb{ background:var(--accent-2); border-radius:4px; }
.slide{ scroll-snap-align:start; flex:0 0 clamp(220px,26vw,300px); aspect-ratio:4/5; border:1px solid var(--paper-2); border-radius:4px; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(180deg,#fff,var(--paper)); transition:transform .4s var(--ease), box-shadow .4s, border-color .4s; position:relative; }
.slide::before{ content:""; position:absolute; top:24px; left:26px; width:30px; height:30px; border:1px solid var(--accent); border-radius:50%; opacity:.5; transition:transform .5s var(--ease); }
.slide:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -26px rgba(40,20,60,.3); border-color:var(--accent); }
.slide:hover::before{ transform:scale(1.25) rotate(20deg); }
.slide b{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2.2vw,28px); color:var(--ink); line-height:1.02; }
.slide span{ margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-2); }

/* ── §10 CONVERGENCE ─────────────────────────────────────── */
.converge{ text-align:center; }
.converge .sec-head{ margin-bottom:30px; }
.conv-stage{ position:relative; max-width:1000px; margin:0 auto; aspect-ratio:1000/460; }
.conv-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.conv-lines path{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.5; stroke-dasharray:6 8; animation:flow 3s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-140; } }
.node{ position:absolute; transform:translate(-50%,-50%); width:clamp(96px,12vw,140px); height:clamp(96px,12vw,140px); border-radius:50%; border:1px solid var(--hairline); background:color-mix(in srgb,var(--bg1) 80%, transparent); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.node:hover{ border-color:var(--accent); box-shadow:0 0 40px -8px var(--glow); transform:translate(-50%,-50%) scale(1.08); }
.node b{ font-family:var(--display); font-weight:400; font-size:clamp(13px,1.4vw,18px); }
.node span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.n1{ left:12%; top:15%; } .n2{ left:50%; top:9%; } .n3{ left:88%; top:15%; }
.n4{ left:12%; top:85%; } .n5{ left:50%; top:91%; } .n6{ left:88%; top:85%; }
.node--center{ left:50%; top:50%; width:clamp(150px,20vw,220px); height:clamp(150px,20vw,220px); border-color:var(--accent); background:radial-gradient(circle, color-mix(in srgb,var(--bg3) 70%,transparent), color-mix(in srgb,var(--bg0) 80%,transparent)); box-shadow:0 0 70px -10px var(--glow); }
.node--center b{ font-size:clamp(16px,1.9vw,24px); color:var(--accent-ink); max-width:9ch; } .node--center span{ font-size:11px; }

/* ── §11 COMMUNITY ───────────────────────────────────────── */
.community{}
.comm-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,6vw,80px); align-items:center; }
.comm-lead h2{ font-family:var(--display); font-weight:300; font-size:clamp(28px,3.8vw,50px); line-height:1.04; letter-spacing:-.02em; margin-bottom:20px; color:var(--ink); }
.comm-lead p{ font-size:16px; line-height:1.7; color:#5a5466; font-weight:300; max-width:46ch; }
.comm-index{ list-style:none; border-top:1px solid var(--paper-2); }
.comm-index li{ border-bottom:1px solid var(--paper-2); }
.comm-index a{ display:flex; justify-content:space-between; align-items:center; padding:20px 4px; font-family:var(--display); font-size:clamp(18px,2vw,24px); color:var(--ink); transition:padding .35s var(--ease), color .35s; }
.comm-index a i{ font-style:normal; color:var(--accent-2); transition:transform .35s var(--ease); }
.comm-index a:hover{ padding-left:16px; color:var(--accent-2); }
.comm-index a:hover i{ transform:translateX(8px); color:var(--accent); }

/* ── §12 INSTITUTE ───────────────────────────────────────── */
.institute{ background:linear-gradient(180deg,var(--paper) 0%, var(--bg0) 55%); padding-top:clamp(80px,10vw,140px); }
.inst-quote{ max-width:22ch; margin:0 auto clamp(50px,7vw,90px); text-align:center; font-family:var(--display); font-weight:300; font-size:clamp(26px,4vw,52px); line-height:1.08; color:var(--ink); letter-spacing:-.02em; }
.portal-foot{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.foot-card{ border:1px solid var(--hairline); border-radius:4px; padding:30px 24px; min-height:140px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; background:color-mix(in srgb,var(--bg1) 60%,transparent); transition:transform .45s var(--ease), border-color .4s, box-shadow .45s; }
.foot-card:hover{ transform:translateY(-6px); border-color:var(--accent); box-shadow:0 26px 56px -28px var(--glow); }
.foot-card b{ font-family:var(--display); font-weight:400; font-size:clamp(18px,2vw,24px); color:#EDE9F2; }
.foot-card span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.foot{ max-width:var(--maxw); margin:clamp(60px,8vw,100px) auto 0; padding-top:30px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.wordmark--sm{ font-size:16px; }
.foot-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.5; }
.foot-social{ display:inline-flex; align-items:center; gap:8px; color:var(--accent-ink); opacity:.8;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  transition:opacity .25s, color .25s; }
.foot-social:hover{ opacity:1; color:var(--accent); }
.foot-social svg{ width:16px; height:16px; fill:currentColor; display:block; }
.sec--light .foot-social{ color:var(--accent-2); }

/* ── MARKS · ported motifs (animated atmosphere) ───────────
   Parallax (mouse drift) on the wrapper; rotation / scan / pulse
   on the inner svg. Everything keeps moving. */
.mark{ position:absolute; pointer-events:none; color:var(--accent); z-index:0;
  transform:translate(calc(var(--mx,0)*10px), calc(var(--my,0)*10px)); }
.mark svg{ display:block; width:100%; height:100%; transform-origin:50% 50%; }

@keyframes mk-rot{ to{ transform:rotate(360deg); } }
@keyframes mk-rotrev{ to{ transform:rotate(-360deg); } }
@keyframes mk-ants{ to{ stroke-dashoffset:-16; } }
@keyframes mk-node{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes mk-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes mk-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

/* hero HUD reticle */
.mark--hud{ width:88px; height:88px; right:clamp(20px,5vw,64px); bottom:118px; opacity:.42; z-index:3;
  transform:translate(calc(var(--mx)*20px), calc(var(--my)*20px));
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 38%,transparent)); }
.mark--hud svg{ animation:mk-rot 34s linear infinite; }

/* sacred watermark behind the pull quote */
.mark--watermark{ width:min(72vw,560px); aspect-ratio:1; left:50%; top:50%;
  transform:translate(calc(-50% + var(--mx)*16px), calc(-50% + var(--my)*16px)); opacity:.16; }
.mark--watermark svg{ animation:mk-rot 70s linear infinite; }
/* large sacred geometry drifting over the atmosphere in dark sections */
.mark--sacred-bg{ width:min(64vw,640px); aspect-ratio:1; left:50%; top:50%;
  transform:translate(calc(-50% + var(--mx)*14px), calc(-50% + var(--my)*14px)); opacity:.15; z-index:0; }
.mark--sacred-bg svg{ animation:mk-rot 110s linear infinite; }
.mark--sacred-bg.is-rev svg{ animation-direction:reverse; animation-duration:132s; }
/* keep section text above the big sacred backdrop */
.lineage-sec > .sec-head, .lineage-sec > .read, .lineage-sec > .line-track,
.work-sec > .sec-head, .work-sec > .negations, .work-sec > .read,
#converge > .imgtext, #converge > .read, #converge > .conv-stage{ position:relative; z-index:1; }
.quoteblock .bigquote{ position:relative; z-index:1; }

/* projection lattice beside The Field */
.split{ position:relative; }
.mark--field{ width:min(40vw,420px); aspect-ratio:1; right:-3%; top:50%;
  transform:translate(calc(var(--mx)*-16px), calc(-50% + var(--my)*16px)); opacity:.14; z-index:0; }
.mark--field svg{ animation:mk-rot 60s linear infinite; }
.split > .split-l, .split > .split-r{ position:relative; z-index:1; }

/* 2nd sacred — metatron behind principles */
.mark--wm2{ width:min(46vw,420px); aspect-ratio:1; right:5%; top:9%; opacity:.14; z-index:1; }
.mark--wm2 svg{ animation:mk-rotrev 90s linear infinite; }

/* pose-graph annotation — scanning */
.mark--annot{ width:150px; height:90px; right:clamp(20px,4vw,52px); top:94px; opacity:.55; z-index:3;
  transform:translate(calc(var(--mx)*-10px), calc(var(--my)*-10px));
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 34%,transparent)); }
.mark--annot svg line{ stroke-dasharray:3 3; animation:mk-ants 1.4s linear infinite; }
.mark--annot svg circle{ animation:mk-node 2.6s ease-in-out infinite; }

/* fibonacci seal on the close */
.mark--seal{ width:clamp(120px,15vw,196px); aspect-ratio:1; left:50%; top:clamp(28px,5vw,56px);
  transform:translate(calc(-50% + var(--mx)*10px), calc(var(--my)*10px)); opacity:.42; }
.mark--seal svg{ animation:mk-rot 48s linear infinite; }
.institute .inst-quote, .institute .portal-foot, .institute .foot{ position:relative; z-index:1; }

/* small illusion / art marginalia */
.mark--mini{ width:96px; height:96px; opacity:.5; z-index:3;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 30%,transparent)); }
.mark--penrose{ left:clamp(20px,4vw,52px); top:112px; }
.mark--penrose svg{ animation:mk-rot 26s linear infinite; }
.mark--vitruvian{ right:8%; bottom:8%; width:108px; height:108px; opacity:.4; }
.mark--vitruvian svg{ animation:mk-pulse 6s ease-in-out infinite; }
.mark--moebius{ width:150px; height:84px; left:clamp(20px,4vw,52px); bottom:84px; opacity:.42; z-index:2; }
.mark--moebius svg{ animation:mk-float 7s ease-in-out infinite; }

/* section-break ornaments — always rotating */
.mark-divider{ width:46px; height:46px; margin:4px auto; color:var(--accent); opacity:.55; }
.mark-divider svg{ display:block; width:100%; height:100%; transform-origin:50% 50%;
  animation:mk-rot 40s linear infinite; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 30%,transparent)); }
.mark-divider[data-mark="crosshair"] svg{ animation-duration:30s; animation-direction:reverse; }

/* tiny Basquiat signature — gentle pulse */
.mark-crown{ display:inline-block; width:26px; height:18px; color:var(--accent); opacity:.85; }
.mark-crown svg{ display:block; width:100%; height:100%; transform-origin:50% 50%; animation:mk-pulse 5s ease-in-out infinite; }

@media (max-width:900px){ .mark--field, .mark--annot, .mark--hud, .mark--wm2, .mark--mini{ display:none; } }

/* ── PRYSM page — fresh hero images + lens/refraction marks ── */
html.prysm[data-theme="purple"]{ --img-hero:url(img/prysm/purple/hero.jpg); --img-lens:url(img/prysm/purple/lens.jpg); }
html.prysm[data-theme="gold"]{   --img-hero:url(img/prysm/gold/hero.jpg);   --img-lens:url(img/prysm/gold/lens.jpg); }
html.prysm[data-theme="silver"]{ --img-hero:url(img/prysm/silver/hero.jpg); --img-lens:url(img/prysm/silver/lens.jpg); }
.lens-photo{ background:var(--img-lens) center/cover no-repeat; border:1px solid var(--hairline); border-radius:5px; min-height:340px; }
/* big ghosted lens numeral — gives each of the 7 lenses its own identity */
.lens{ position:relative; overflow:hidden; }
.lens::before{ content:attr(data-n); position:absolute; top:clamp(8px,2vw,32px); left:clamp(14px,4vw,64px); right:auto; z-index:0; pointer-events:none; font-family:var(--display); font-weight:300; font-size:clamp(90px,12vw,200px); line-height:.78; letter-spacing:-.04em; }
@media (max-width:900px){ .lens::before{ display:none; } }
.sec--dark.lens::before{ color:var(--accent); opacity:.10; }
.sec--light.lens::before{ color:var(--ink); opacity:.06; }
.lens > *{ position:relative; z-index:1; }
.qlist{ list-style:none; max-width:var(--maxw); margin:0 auto; }
.qlist li{ font-family:var(--display); font-weight:300; font-size:clamp(20px,2.6vw,34px); line-height:1.18; opacity:.74; padding:4px 0; transition:opacity .3s, color .3s; }
.sec--light .qlist li{ color:var(--ink-soft); opacity:.92; }
.qlist li:hover{ opacity:1; color:var(--accent-ink); }
.sec--light .qlist li:hover{ color:var(--accent-2); }
.qlist li.q-aff{ opacity:1; color:var(--accent-ink); }
.sec--light .qlist li.q-aff{ color:var(--ink); }
.mark--p-aperture{ width:118px; height:118px; right:7%; top:120px; opacity:.4; z-index:3;
  transform:translate(calc(var(--mx)*-16px), calc(var(--my)*-16px));
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 34%,transparent)); }
.mark--p-aperture svg{ animation:mk-rot 44s linear infinite; }
.mark--p-vesica{ width:min(64vw,540px); aspect-ratio:1; left:50%; top:50%;
  transform:translate(calc(-50% + var(--mx)*15px), calc(-50% + var(--my)*15px)); opacity:.10; }
.mark--p-vesica svg{ animation:mk-rot 80s linear infinite; }
.mark--p-lens{ width:min(36vw,380px); aspect-ratio:2/1; right:-2%; top:56%;
  transform:translate(calc(var(--mx)*-14px), calc(-50% + var(--my)*14px)); opacity:.16; z-index:0; }
.mark--p-lens svg{ animation:mk-float 8s ease-in-out infinite; }
.mark--p-einstein{ width:152px; height:152px; right:clamp(20px,4vw,52px); top:88px; opacity:.5; z-index:3;
  transform:translate(calc(var(--mx)*-10px), calc(var(--my)*-10px));
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 40%,transparent)); }
.mark--p-einstein svg{ animation:mk-rot 60s linear infinite; }
.mark--p-hyper{ width:140px; height:140px; right:6%; bottom:7%; opacity:.4; z-index:3;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 30%,transparent)); }
.mark--p-hyper svg{ animation:mk-rotrev 52s linear infinite; }
@media (max-width:900px){ .mark--p-aperture, .mark--p-lens, .mark--p-hyper, .mark--p-einstein{ display:none; } }

/* ── Verbatim-text helpers (reading column, chips, negations, principle blocks) ── */
.read{ max-width:64ch; margin:0 auto; }
.read p{ max-width:74ch; }
.read p, .lead{ font-family:var(--serif); font-weight:300; font-size:clamp(16px,1.5vw,21px); line-height:1.7; margin-bottom:1.1em; }
.sec--dark .read p, .sec--dark .lead{ color:#CFC8DC; }
.sec--light .read p, .sec--light .lead{ color:#4a4654; }
.read .em-line{ font-family:var(--display); font-style:italic; font-size:clamp(20px,2.4vw,32px); line-height:1.2; color:var(--accent-ink); margin:.6em 0; }
.sec--light .read .em-line{ color:var(--accent-2); }

.chips{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:9px 15px; border:1px solid var(--hairline); border-radius:999px; transition:border-color .3s, color .3s, transform .3s; }
.sec--light .chip{ border-color:var(--paper-2); color:var(--ink-soft); }
.chip:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.negations{ max-width:var(--maxw); margin:0 auto; list-style:none; }
.negations li{ font-family:var(--display); font-weight:300; font-size:clamp(22px,3.2vw,40px); line-height:1.12; letter-spacing:-.01em; opacity:.72; padding:6px 0; }
.negations li.is-aff{ opacity:1; color:var(--accent-ink); }

.principles-list{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pblock{ background:color-mix(in srgb, var(--bg1) 80%, transparent); border:1px solid var(--hairline); backdrop-filter:blur(10px); border-radius:4px; padding:30px 32px; transition:transform .5s var(--ease), border-color .4s, box-shadow .5s; }
.pblock:hover{ border-color:var(--accent); box-shadow:0 28px 64px -30px var(--glow); transform:translateY(-5px); }
.pblock--full{ grid-column:1 / -1; }
.pblock .pnum{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--accent); }
.pblock h3{ font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,32px); margin:10px 0 14px; line-height:1.04; }
.pblock p{ font-size:15px; line-height:1.7; color:#C8C1D6; font-weight:300; margin-bottom:.85em; max-width:64ch; }
.pblock p:last-child{ margin-bottom:0; }
.pblock p:first-of-type{ font-size:16.5px; color:#D8D1E6; }      /* lead line */
.pblock--full{ display:flex; flex-direction:column; }
.pblock--full p{ max-width:72ch; }
.pblock .p-aff{ color:var(--accent-ink); }
/* featured lead principle: wider, brighter, sets the section */
.pblock--lead{ background:color-mix(in srgb, var(--bg2) 52%, transparent); border-color:color-mix(in srgb,var(--accent) 30%,transparent); display:flex; flex-direction:column; }
.pblock--lead h3{ font-size:clamp(26px,3.2vw,42px); }
.pblock--lead p{ max-width:72ch; }
@media (max-width:900px){ .principles-list{ grid-template-columns:1fr; } }

/* ── Ambient motion in the negative space (measured) ── */
/* faint panning dot-grid + drifting aurora behind dark sections */
.amb{ position:relative; overflow:hidden; }
.amb::before{ content:""; position:absolute; inset:-2px; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--accent) 24%,transparent) 1px, transparent 0);
  background-size:32px 32px; opacity:.22; animation:amb-pan 46s linear infinite; }
.amb::after{ content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none; filter:blur(26px); opacity:.5;
  background:radial-gradient(38% 38% at 28% 32%, var(--glow), transparent 70%), radial-gradient(34% 34% at 76% 66%, var(--glow), transparent 70%);
  animation:amb-drift 30s ease-in-out infinite alternate; }
.amb > *{ position:relative; z-index:1; }
@keyframes amb-pan{ to{ background-position:64px 128px; } }
@keyframes amb-drift{ from{ transform:translate(-3%,-2%) scale(1); } to{ transform:translate(4%,3%) scale(1.12); } }

/* large slow background-mark for empty margins (light sections) */
.has-drift{ overflow:hidden; }
.mark--bg-drift{ width:min(46vw,500px); aspect-ratio:1; right:-9%; left:auto; top:50%;
  transform:translate(calc(var(--mx)*18px), calc(-50% + var(--my)*18px)); opacity:0; z-index:0;
  animation:mk-fadein 2.6s ease forwards; }
.mark--bg-drift svg{ animation:mk-rot 120s linear infinite; }
.mark--bg-ink{ color:var(--accent-2); }
@keyframes mk-fadein{ to{ opacity:.11; } }

/* marquee transition band */
.marquee{ overflow:hidden; border-block:1px solid var(--hairline); padding:clamp(14px,2vw,22px) 0; background:var(--bg0); white-space:nowrap; }
.marquee-row{ display:inline-block; will-change:transform; animation:marq 28s linear infinite; }
.marquee-row span{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(20px,3vw,42px); color:color-mix(in srgb,var(--accent-ink) 64%, transparent); padding-right:.6em; }
.marquee-row span i{ color:var(--accent); font-style:normal; margin:0 .5em; }
/* marquee variant: scrolling line overlaid on a tinted photo band */
.marquee--photo{ position:relative; padding-block:clamp(30px,4.5vw,52px); background:var(--bg0); }
.marquee--photo::before{ content:""; position:absolute; inset:0; background:var(--cimg) center/cover no-repeat; opacity:.42; }
.marquee--photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg0), color-mix(in srgb,var(--bg0) 60%,transparent) 50%, var(--bg0)); }
.marquee--photo .marquee-row{ position:relative; z-index:1; }
.marquee--photo .marquee-row span{ color:color-mix(in srgb,var(--accent-ink) 88%, transparent); }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:900px){ .mark--bg-drift{ display:none; } }

/* ── image + text alternating block (breaks up reading sections) ── */
.imgtext{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,72px); align-items:center; }
.imgtext-media{ position:relative; aspect-ratio:4/3; border-radius:6px; border:1px solid var(--hairline); overflow:hidden; }
.imgtext-media::before{ content:""; position:absolute; inset:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.03); transition:transform 1.2s var(--ease); }
.imgtext:hover .imgtext-media::before{ transform:scale(1.08); }
.imgtext-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, color-mix(in srgb,var(--accent) 22%, transparent), transparent 58%), linear-gradient(120deg, rgba(0,0,0,.25), transparent 50%); }
.imgtext--rev .imgtext-media{ order:2; }
.imgtext-body .sec-label{ margin-bottom:14px; }
.imgtext-body h2{ font-family:var(--display); font-weight:300; font-size:clamp(26px,3.4vw,46px); line-height:1.04; letter-spacing:-.02em; margin-bottom:18px; }
.sec--light .imgtext-body h2{ color:var(--ink); }
.imgtext-body p{ font-family:var(--serif); font-weight:300; font-size:clamp(15px,1.35vw,18px); line-height:1.7; margin-bottom:1em; }
.sec--dark .imgtext-body p{ color:#CFC8DC; } .sec--light .imgtext-body p{ color:#4a4654; }
.imgtext-body .em-line{ font-family:var(--display); font-style:italic; font-size:clamp(18px,2vw,26px); color:var(--accent-ink); }
.sec--light .imgtext-body .em-line{ color:var(--accent-2); }
@media (max-width:900px){ .imgtext{ grid-template-columns:1fr; gap:24px; } .imgtext--rev .imgtext-media{ order:0; } }

/* ── PHOTO BAND · text over photo, legible scrim ──────────── */
.photosec{ position:relative; min-height:clamp(460px,74vh,780px); display:flex; align-items:center; overflow:hidden; padding:clamp(64px,9vw,128px) clamp(20px,4vw,52px); }
.photosec-img{ position:absolute; inset:-6%; z-index:0; background:var(--cimg) center/cover no-repeat; transform:translate3d(calc(var(--mx)*-14px),calc(var(--my)*-14px),0) scale(1.06); }
.photosec .mark{ z-index:1; }
.photosec-veil{ position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--bg0) 4%, color-mix(in srgb,var(--bg0) 84%,transparent) 32%, color-mix(in srgb,var(--bg0) 44%,transparent) 62%, color-mix(in srgb,var(--bg0) 16%,transparent) 90%),
    linear-gradient(0deg, var(--bg0) 0%, transparent 24%, transparent 76%, color-mix(in srgb,var(--bg0) 62%,transparent) 100%),
    radial-gradient(92% 72% at 80% 36%, var(--glow) 0%, transparent 60%); }
.photosec-inner{ position:relative; z-index:2; max-width:var(--maxw); width:100%; margin:0 auto; display:flex; }
.photosec-card{ max-width:56ch; }
.photosec-card .sec-label{ margin-bottom:14px; }
.photosec-card h2{ font-family:var(--display); font-weight:300; font-size:clamp(28px,4.2vw,56px); line-height:1.02; letter-spacing:-.02em; margin-bottom:18px; text-shadow:0 2px 34px var(--bg0); }
.photosec-card p{ font-family:var(--serif); font-weight:300; font-size:clamp(15px,1.4vw,19px); line-height:1.7; color:#D9D2E6; margin-bottom:1em; text-shadow:0 1px 18px var(--bg0); }
.photosec-card .em-line{ font-family:var(--display); font-style:italic; font-size:clamp(19px,2.2vw,30px); line-height:1.2; color:var(--accent-ink); }
.photosec-card .read{ max-width:none; margin:0; }
.photosec-card .qlist, .photosec-card .negations{ max-width:none; margin:0; }
.photosec-card .qlist li{ text-shadow:0 1px 16px var(--bg0); }
/* dark side on the right */
.photosec--right .photosec-veil{
  background:
    linear-gradient(260deg, var(--bg0) 4%, color-mix(in srgb,var(--bg0) 80%,transparent) 32%, color-mix(in srgb,var(--bg0) 28%,transparent) 60%, transparent 88%),
    linear-gradient(0deg, var(--bg0) 0%, transparent 24%, transparent 78%, color-mix(in srgb,var(--bg0) 58%,transparent) 100%),
    radial-gradient(92% 72% at 20% 36%, var(--glow) 0%, transparent 60%); }
.photosec--right .photosec-inner{ justify-content:flex-end; }
/* centered statement over photo (pull quote) */
.photosec--center{ text-align:center; }
.photosec--center .photosec-veil{
  background:
    linear-gradient(0deg, var(--bg0) 0%, color-mix(in srgb,var(--bg0) 40%,transparent) 28%, color-mix(in srgb,var(--bg0) 40%,transparent) 72%, var(--bg0) 100%),
    radial-gradient(72% 72% at 50% 50%, color-mix(in srgb,var(--bg0) 32%,transparent), color-mix(in srgb,var(--bg0) 90%,transparent) 92%); }
.photosec--center .photosec-inner{ justify-content:center; }
.photosec--center .photosec-card{ max-width:24ch; }
.photosec--center .bigquote{ text-shadow:0 2px 40px var(--bg0); }

/* ── SIDE FIGURE · list / prose beside a tall photo panel ─── */
.sidefig{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:0.82fr 1.18fr; gap:clamp(28px,5vw,72px); align-items:center; }
.sidefig--rev{ grid-template-columns:1.18fr 0.82fr; }
.sidefig--tall{ align-items:stretch; }
.sidefig--tall .sidefig-media{ aspect-ratio:auto; height:100%; min-height:clamp(420px,50vw,620px); }
.sidefig-media{ position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; border:1px solid var(--hairline); }
.sidefig--rev .sidefig-media{ order:2; }
.sidefig-media::before{ content:""; position:absolute; inset:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.04); transition:transform 1.3s var(--ease); }
.sidefig:hover .sidefig-media::before{ transform:scale(1.09); }
.sidefig-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 48%, color-mix(in srgb,var(--bg0) 52%,transparent)), linear-gradient(0deg, color-mix(in srgb,var(--accent) 20%,transparent), transparent 60%); }
.sidefig-body .sec-label{ margin-bottom:16px; }
.sidefig-body h2{ font-family:var(--display); font-weight:300; font-size:clamp(26px,3.6vw,48px); line-height:1.03; letter-spacing:-.02em; margin-bottom:18px; }
.sec--light .sidefig-body h2{ color:var(--ink); }
.sidefig-body .sec-sub{ margin-bottom:22px; }
.sidefig-body .qlist, .sidefig-body .chips, .sidefig-body .negations, .sidefig-body .read{ margin:0; max-width:none; }
.sidefig-body .qlist li{ font-size:clamp(18px,2vw,27px); }
.sidefig-body .negations li{ font-size:clamp(20px,2.4vw,31px); }
@media (max-width:900px){
  .sidefig, .sidefig--rev{ grid-template-columns:1fr; gap:24px; }
  .sidefig--rev .sidefig-media{ order:0; }
  .photosec{ min-height:0; }
  .photosec--right .photosec-inner{ justify-content:flex-start; }
}

/* ════════════ SPECTRUM page ════════════ */
html.spectrum[data-theme="purple"]{ --img-hero:url(img/spectrum/purple/hero.jpg); --img-band:url(img/spectrum/purple/band.jpg); }
html.spectrum[data-theme="gold"]{   --img-hero:url(img/spectrum/gold/hero.jpg);   --img-band:url(img/spectrum/gold/band.jpg); }
html.spectrum[data-theme="silver"]{ --img-hero:url(img/spectrum/silver/hero.jpg); --img-band:url(img/spectrum/silver/band.jpg); }

/* ink-on-white mark variants */
.mark--wm-ink{ color:var(--accent-2); }
.mark--field-ink{ color:var(--accent-2); opacity:.12; }
.mark--hyper2{ width:128px; height:128px; right:6%; bottom:9%; opacity:.4; z-index:3; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 30%,transparent)); }
.mark--hyper2 svg{ animation:mk-rotrev 52s linear infinite; }

/* §2 particle field */
.spectrum-field{ position:relative; min-height:86svh; display:flex; align-items:flex-end; overflow:hidden; background:radial-gradient(120% 100% at 50% 25%, var(--bg2) 0%, var(--bg0) 72%); }
#spectrumfx{ position:absolute; inset:0; width:100%; height:100%; z-index:1; display:block; }
.field-grade{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(0deg, var(--bg0) 0%, transparent 34%, transparent 80%, color-mix(in srgb,var(--bg0) 60%,transparent) 100%); }
.field-overlay{ position:relative; z-index:3; max-width:var(--maxw); width:100%; margin:0 auto; padding:0 clamp(20px,4vw,52px) clamp(54px,8vw,92px); }

/* §3 bento */
.bento{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.bento-cell{ grid-column:span 6; background:#fff; border:1px solid var(--paper-2); border-radius:4px; padding:28px; transition:transform .4s var(--ease), box-shadow .4s; }
.bento-cell:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(40,20,60,.28); }
.bento-cell--lg{ grid-column:span 6; grid-row:span 2; }
.bento-cell--wide{ grid-column:span 12; }
.b-no{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--accent-2); }
.bento-cell h3{ font-family:var(--display); font-weight:400; font-size:clamp(18px,2vw,26px); margin:10px 0 8px; color:var(--ink); }
.bento-cell p{ font-size:14px; line-height:1.6; color:#4a4654; font-weight:300; }
.bento-cell--lg h3{ font-size:clamp(24px,3vw,38px); }

/* §4 before/after */
.ba-sec .ba{ position:relative; max-width:980px; margin:0 auto; aspect-ratio:16/9; border:1px solid var(--hairline); border-radius:5px; overflow:hidden; cursor:ew-resize; user-select:none; }
.ba-before, .ba-after{ position:absolute; inset:0; background:var(--img-band) center/cover no-repeat; }
.ba-before{ filter:grayscale(1) brightness(.62) contrast(.92); }
.ba-after{ filter:saturate(1.25) brightness(1.05); clip-path:inset(0 0 0 50%); }
.ba-after::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 70% 30%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 60%); mix-blend-mode:screen; }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent); z-index:4; box-shadow:0 0 16px var(--glow); }
.ba-handle span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; border:1px solid var(--accent); background:color-mix(in srgb,var(--bg0) 60%,transparent); backdrop-filter:blur(4px); }
.ba-handle span::before{ content:"⟷"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:13px; }
.ba-tag{ position:absolute; bottom:14px; z-index:4; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:#fff; opacity:.8; }
.ba-tag--l{ left:16px; } .ba-tag--r{ right:16px; }

/* §5 tabs */
.tabs{ max-width:var(--maxw); margin:0 auto; }
.tab-bar{ display:flex; gap:6px; border-bottom:1px solid var(--paper-2); margin-bottom:28px; flex-wrap:wrap; }
.tab{ appearance:none; background:none; border:0; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); padding:12px 18px; border-bottom:2px solid transparent; transition:color .3s, border-color .3s; }
.tab:hover{ color:var(--accent-2); }
.tab.on{ color:var(--ink); border-bottom-color:var(--accent); }
.tab-panel{ display:none; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.tab-panel.on{ display:grid; animation:fadein .5s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.tab-viz{ aspect-ratio:4/3; border-radius:4px; border:1px solid var(--paper-2); background:var(--img-band) center/cover no-repeat; }
.var-surface{ filter:grayscale(.5) contrast(1.5) brightness(.9); }
.var-light{ filter:brightness(1.35) saturate(1.3) hue-rotate(18deg); }
.var-camera{ transform:scale(1.12) rotate(-3deg); }
.var-motion{ filter:blur(2px) brightness(1.05); transform:skewX(-5deg) scale(1.06); }
.tab-copy h3{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2.4vw,30px); color:var(--ink); margin-bottom:12px; }
.tab-copy p{ font-size:15px; line-height:1.7; color:#5a5466; font-weight:300; }

/* §6 explorer */
.explore-wrap{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.explore-sample{ aspect-ratio:16/10; border-radius:5px; border:1px solid var(--hairline); background:var(--img-band) center/cover no-repeat; transition:filter .12s linear, transform .12s linear; }
.explore-ctl input[type=range]{ width:100%; accent-color:var(--accent); }
.explore-read{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent); margin:14px 0; }
.explore-ctl p{ font-size:15px; line-height:1.7; color:#CFC8DC; font-weight:300; }

/* §7 stat cards */
.stat-row{ max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,5vw,64px); }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat b{ font-family:var(--display); font-weight:300; font-size:clamp(40px,6vw,84px); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.stat span{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); }
.stat--arrow{ font-size:clamp(28px,4vw,52px); color:var(--accent); }
.fewshot-note{ max-width:60ch; margin:clamp(34px,5vw,56px) auto 0; font-size:clamp(15px,1.4vw,19px); line-height:1.7; color:#5a5466; font-weight:300; }

/* §9 capability matrix */
.matrix{ max-width:var(--maxw); margin:0 auto; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--paper-2); border-left:1px solid var(--paper-2); }
.matrix li{ border-right:1px solid var(--paper-2); border-bottom:1px solid var(--paper-2); padding:22px 20px; font-family:var(--display); font-size:clamp(15px,1.5vw,19px); color:var(--ink); position:relative; transition:background .3s; }
.matrix li::before{ content:"+"; font-family:var(--mono); color:var(--accent-2); margin-right:10px; }
.matrix li:hover{ background:#fff; }

/* §10 accordion */
.accordion{ max-width:780px; margin:0 auto; }
.accordion details{ border-bottom:1px solid var(--paper-2); }
.accordion summary{ cursor:pointer; list-style:none; padding:22px 4px; font-family:var(--display); font-size:clamp(17px,1.9vw,23px); color:var(--ink); display:flex; justify-content:space-between; align-items:center; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; color:var(--accent-2); font-family:var(--mono); transition:transform .3s; }
.accordion details[open] summary::after{ transform:rotate(45deg); }
.accordion p{ padding:0 4px 22px; font-size:15px; line-height:1.7; color:#4a4654; font-weight:300; max-width:62ch; }

.foot-card--cta{ background:var(--accent); border-color:var(--accent); }
.foot-card--cta b{ color:#0a0710; } .foot-card--cta span{ color:rgba(10,7,16,.7); }

@media (max-width:900px){
  .bento-cell, .bento-cell--lg, .bento-cell--wide{ grid-column:span 12; grid-row:auto; }
  .tab-panel.on, .explore-wrap{ grid-template-columns:1fr; }
  .matrix{ grid-template-columns:1fr 1fr; }
  .mark--hyper2{ display:none; }
}
@media (max-width:560px){ .matrix{ grid-template-columns:1fr; } }

/* ════════════ LEDGER page ════════════ */
html.ledger[data-theme="purple"]{ --img-hero:url(img/ledger/purple/hero.jpg); }
html.ledger[data-theme="gold"]{   --img-hero:url(img/ledger/gold/hero.jpg); }
html.ledger[data-theme="silver"]{ --img-hero:url(img/ledger/silver/hero.jpg); }
.feed-filter{ display:flex; flex-wrap:wrap; gap:8px; max-width:var(--maxw); margin:0 auto clamp(24px,3vw,40px); }
.fbtn{ appearance:none; background:none; border:1px solid var(--paper-2); border-radius:999px; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 15px; color:var(--ink-soft); transition:all .3s; }
.fbtn:hover{ color:var(--accent); border-color:var(--accent); }
.fbtn.on{ background:var(--accent); color:#0a0710; border-color:var(--accent); }
.feed{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.entry{ background:#fff; border:1px solid var(--paper-2); border-radius:4px; padding:26px; display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.entry:hover{ transform:translateY(-5px); border-color:var(--accent); box-shadow:0 26px 56px -30px rgba(40,20,60,.3); }
.entry-meta{ display:flex; gap:8px; margin-bottom:12px; align-items:center; }
.entry-type{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#0a0710; background:var(--accent); padding:3px 8px; border-radius:3px; }
.entry-cat{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); }
.entry h3{ font-family:var(--display); font-weight:400; font-size:clamp(19px,2vw,25px); margin-bottom:10px; line-height:1.05; color:var(--ink); }
.entry p{ font-size:14px; line-height:1.6; color:#5a5466; font-weight:300; flex:1; margin-bottom:12px; }
.entry-go{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2); }
.entry.hide{ display:none; }
.signals{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(30px,5vw,70px); }
.sig{ border-top:1px solid var(--hairline); padding:20px 0; display:flex; gap:18px; }
.sig b{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent); white-space:nowrap; padding-top:4px; }
.sig span{ font-family:var(--display); font-weight:300; font-size:clamp(16px,1.7vw,21px); line-height:1.3; }
@media (max-width:900px){ .feed{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .signals{ grid-template-columns:1fr; } }
@media (max-width:560px){ .feed{ grid-template-columns:1fr; } }

/* ════════════ CORRESPONDENCE page ════════════ */
html.correspondence[data-theme="purple"]{ --img-hero:url(img/correspondence/purple/hero.jpg); }
html.correspondence[data-theme="gold"]{   --img-hero:url(img/correspondence/gold/hero.jpg); }
html.correspondence[data-theme="silver"]{ --img-hero:url(img/correspondence/silver/hero.jpg); }
.cform{ max-width:760px; margin:0 auto; display:grid; gap:20px; }
.cfield{ display:flex; flex-direction:column; gap:8px; }
.cfield label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.cfield input, .cfield select, .cfield textarea{ background:color-mix(in srgb,var(--bg1) 60%,transparent); border:1px solid var(--hairline); border-radius:3px; padding:14px 16px; color:#EDE9F2; font-family:var(--serif); font-size:16px; transition:border-color .3s; }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus{ border-color:var(--accent); }
.cfield input[aria-invalid="true"], .cfield textarea[aria-invalid="true"]{ border-color:#d9694e; }
.cnote.err{ color:#d9694e; }
.cfield textarea{ min-height:140px; resize:vertical; }
.cform-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cbtn{ justify-self:start; font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:16px 32px; background:var(--accent); color:#0a0710; border:0; border-radius:2px; cursor:pointer; transition:transform .3s, box-shadow .3s; }
.cbtn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px var(--glow); }
.cnote{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--accent); margin-top:8px; min-height:1.2em; }
@media (max-width:700px){ .cform-row{ grid-template-columns:1fr; } }

/* ── ARTICLE PAGES · /field/<slug>/ + /ledger/<slug>/ ─────── */
.art-hero{ position:relative; min-height:66svh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:clamp(44px,7vw,84px); }
.art-hero-img{ position:absolute; inset:-6%; z-index:0; background:var(--cimg) center/cover no-repeat;
  transform:translate3d(calc(var(--mx)*-16px),calc(var(--my)*-16px),0) scale(1.06); animation:slowzoom 28s ease-in-out infinite alternate; }
.art-hero-veil{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, var(--bg0) 1%, color-mix(in srgb,var(--bg0) 48%,transparent) 40%, color-mix(in srgb,var(--bg0) 16%,transparent) 74%),
    linear-gradient(90deg, color-mix(in srgb,var(--bg0) 78%,transparent) 0%, color-mix(in srgb,var(--bg0) 34%,transparent) 46%, transparent 70%),
    radial-gradient(100% 80% at 78% 24%, var(--glow) 0%, transparent 56%); }
.art-hero .cloud{ z-index:2; }
.art-hero-inner{ position:relative; z-index:3; max-width:var(--maxw); width:100%; margin:0 auto; padding:0 clamp(20px,4vw,52px); }
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.crumb a{ opacity:.82; transition:opacity .3s,color .3s; } .crumb a:hover{ color:var(--accent-ink); opacity:1; } .crumb > span{ opacity:.4; }
.crumb .crumb-here{ opacity:.7; }
.art-h1{ font-family:var(--display); font-weight:400; font-size:clamp(38px,6.4vw,86px); line-height:.99; letter-spacing:-.02em; max-width:17ch; text-shadow:0 4px 50px rgba(0,0,0,.5); }
.art-dek{ margin-top:22px; max-width:56ch; font-family:var(--serif); font-weight:300; font-size:clamp(16px,1.5vw,21px); line-height:1.6; color:#D9D2E6; }
.art-meta{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; }
.art-meta span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--hairline); padding:7px 13px; border-radius:999px; }

/* ════════ OPENING VARIANTS — so pages don't all start the same ════════ */
/* PRYSM · centered, symmetric — "a prism reveals" */
.hero--center{ align-items:center; }
.hero--center .hero-inner{ text-align:center; max-width:1000px; }
.hero--center .hero-h1{ margin:0 auto; max-width:18ch; }
.hero--center .hero-thesis{ margin-left:auto; margin-right:auto; }
.hero--center .hero-cta{ justify-content:center; }
.hero--center .hero-grade{ background:
  radial-gradient(120% 92% at 50% 44%, transparent 0%, color-mix(in srgb,var(--bg0) 40%,transparent) 62%, var(--bg0) 100%),
  linear-gradient(180deg, color-mix(in srgb,var(--bg0) 52%,transparent) 0%, transparent 30%, var(--bg0) 100%); }

/* SPECTRUM · text anchored bottom-left + an instrument readout strip */
.hero--lowbar{ align-items:flex-end; padding-bottom:clamp(64px,9vw,120px); }
.hero-readout{ position:absolute; left:0; right:0; bottom:0; z-index:3; border-top:1px solid var(--hairline);
  background:color-mix(in srgb,var(--bg0) 60%,transparent); backdrop-filter:blur(6px); }
.hero-readout-row{ max-width:var(--maxw); margin:0 auto; padding:13px clamp(20px,4vw,52px); display:flex; gap:clamp(12px,2.4vw,34px); flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.hero-readout-row span{ opacity:.66; }

/* LEDGER · masthead — top rule above the kicker, bottom-left */
.hero--editorial{ align-items:flex-end; }
.hero--editorial .hero-inner{ border-top:1px solid var(--hairline); padding-top:clamp(20px,3vw,34px); }
.hero--editorial .hero-h1{ font-size:clamp(40px,7.6vw,108px); }

/* CORRESPONDENCE · quiet, centered, bottom-anchored */
.hero--quiet{ align-items:flex-end; }
.hero--quiet .hero-inner{ text-align:center; max-width:800px; }
.hero--quiet .hero-h1{ margin:0 auto; max-width:16ch; }
.hero--quiet .hero-thesis{ margin:24px auto 0; }
.hero--quiet .hero-cta{ justify-content:center; }
/* bottom-aligned heroes: keep the CTA clear of the scroll hint at the bottom */
.hero--quiet .hero-inner, .hero--editorial .hero-inner{ padding-bottom:clamp(82px,10vw,124px); }

/* FIELD DOMAINS · grand centered, taller */
.art-hero--center{ align-items:center; min-height:80svh; text-align:center; }
.art-hero--center .art-hero-inner{ display:flex; flex-direction:column; align-items:center; }
.art-hero--center .crumb{ justify-content:center; }
.art-hero--center .art-h1{ max-width:20ch; }
.art-hero--center .art-dek{ max-width:60ch; }
.art-hero--center .art-meta{ justify-content:center; }
.art-hero--center .art-hero-veil{ background:
  radial-gradient(110% 82% at 50% 42%, transparent 0%, color-mix(in srgb,var(--bg0) 42%,transparent) 58%, var(--bg0) 100%),
  linear-gradient(180deg, color-mix(in srgb,var(--bg0) 46%,transparent), transparent 34%, var(--bg0)); }

/* ESSAYS · compact, type-forward opening */
.art-hero--compact{ min-height:52svh; padding-bottom:clamp(36px,5vw,64px); }
.art-hero--compact .art-h1{ font-size:clamp(40px,7vw,94px); max-width:20ch; }
.art-hero--compact .art-dek{ max-width:52ch; }

/* article reading rhythm */
.art-lead{ max-width:var(--maxw); margin:0 auto; }
.art-lead .lead{ font-family:var(--display); font-weight:300; font-size:clamp(22px,2.6vw,34px); line-height:1.22; letter-spacing:-.01em; max-width:24ch; }
.sec--dark .art-lead .lead{ color:var(--accent-ink); } .sec--light .art-lead .lead{ color:var(--accent-2); }
/* related cross-links (reuses portal-foot grid; supports 2-up rows) */
.related .sec-label{ max-width:var(--maxw); margin:0 auto 22px; }

/* convergence diagram on a white ground */
.sec--light .conv-lines path{ stroke:var(--accent-2); opacity:.55; }
.sec--light .node{ background:#fff; border-color:var(--paper-2); box-shadow:0 18px 40px -26px rgba(40,20,60,.3); }
.sec--light .node b{ color:var(--ink); }
.sec--light .node:hover{ box-shadow:0 0 40px -8px var(--glow); }
.sec--light .node--center{ background:radial-gradient(circle, #fff, var(--paper)); border-color:var(--accent); }
.sec--light .node--center b{ color:var(--accent-2); }

/* ── CLEAN SECTION GROUNDS (white-forward; Apple black accent) ─
   sec--black is fully opaque so the smoky atmosphere never bleeds through. */
.sec--black{ background:#0a0a0c; color:#EDE9F2; }
.sec--black .sec-head h2, .sec--black h2{ color:#fff; }
.sec--black .sec-label{ color:var(--accent); }
/* split-card adapts to its section ground */
.sec--light .splitcard{ background:#fff; border-color:var(--paper-2); box-shadow:0 44px 90px -55px rgba(40,20,60,.26); }
.sec--light .splitcard-text h2{ color:var(--ink); }
.sec--light .splitcard-text p{ color:#4a4654; }
.sec--black .splitcard{ background:#101013; border-color:rgba(255,255,255,.1); }
/* keep inline-styled lead lines readable when a section flips to white */
.sec--light .lead{ color:var(--accent-2) !important; }
.sec--black .lead{ color:var(--accent-ink) !important; }
.sec--black .read p, .sec--black .qlist li, .sec--black .sidefig-body p{ color:#C8C1D6; }
.sec--black .sidefig-body h2, .sec--black h2{ color:#fff; }

/* ── ESSAY READING LAYOUT (long-form: white body, black text, figures) ─ */
.essay-sec{ background:#fff; color:#1a1620; padding:clamp(36px,5vw,72px) clamp(20px,4vw,40px) clamp(56px,8vw,110px); }
.essay{ max-width:720px; margin:0 auto; }
.essay > p{ font-family:var(--serif); font-weight:300; font-size:clamp(17px,1.45vw,21px); line-height:1.74; color:#1c1822; margin:0 0 1.15em; }
.essay > p:first-of-type{ font-size:clamp(19px,1.7vw,24px); line-height:1.6; color:#0f0c14; }
.essay h2{ font-family:var(--display); font-weight:400; font-size:clamp(23px,2.7vw,34px); line-height:1.08; letter-spacing:-.015em; color:var(--ink); margin:1.7em 0 .55em; }
.essay blockquote{ margin:1.5em 0; padding:4px 0 4px 24px; border-left:2px solid var(--accent); font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(21px,2.5vw,30px); line-height:1.22; color:var(--accent-2); }
.essay blockquote p{ margin:0; }
.essay a{ color:var(--accent-2); border-bottom:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent); }
.essay-fig{ position:relative; width:min(1000px,94vw); margin-left:50%; transform:translateX(-50%); aspect-ratio:16/9; border-radius:10px; overflow:hidden; margin-top:clamp(30px,4vw,56px); margin-bottom:clamp(30px,4vw,56px); border:1px solid var(--paper-2); }
.essay-fig::before{ content:""; position:absolute; inset:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.02); transition:transform 1.1s var(--ease); }
.essay-fig:hover::before{ transform:scale(1.06); }
.essay-fig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 18px 14px; background:linear-gradient(0deg, rgba(8,4,14,.66), transparent); color:rgba(255,255,255,.9); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; }
.essay-end{ max-width:720px; margin:clamp(28px,4vw,48px) auto 0; padding-top:24px; border-top:1px solid var(--paper-2); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); }

/* ── INNER-PAGE TEXT+PHOTO → CLEAN CARDS (edge-to-edge photo + panel)
   Home doesn't use .imgtext/.sidefig anymore, so this only restyles the
   inner pages — clean white tiles on the new white grounds (NVIDIA/Apple). */
.imgtext, .sidefig, .sidefig--rev, .sidefig--tall{ align-items:stretch; gap:0; border:1px solid var(--hairline); border-radius:14px; overflow:hidden; }
.sec--light .imgtext, .sec--light .sidefig, .sec--light .sidefig--rev, .sec--light .sidefig--tall{ background:#fff; border-color:var(--paper-2); box-shadow:0 40px 80px -52px rgba(40,20,60,.22); }
.sec--dark .imgtext, .sec--dark .sidefig, .sec--black .imgtext, .sec--black .sidefig{ background:color-mix(in srgb,var(--bg1) 60%,transparent); box-shadow:0 44px 96px -58px var(--glow); }
.imgtext-media, .sidefig-media{ aspect-ratio:auto; border:0; border-radius:0; min-height:clamp(300px,34vw,520px); }
.sidefig--tall .sidefig-media{ min-height:0; }
.imgtext-body, .sidefig-body{ padding:clamp(26px,3vw,54px); display:flex; flex-direction:column; justify-content:center; }
@media (max-width:900px){ .imgtext-media, .sidefig-media{ min-height:clamp(240px,52vw,340px); } }

/* ── FEATURE-CARD SLIDER (NVIDIA-style big sliding cards) ─── */
.fcard-rail{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 22px; max-width:var(--maxw); margin:0 auto; cursor:grab; -webkit-overflow-scrolling:touch; }
.fcard-rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.fcard-rail::-webkit-scrollbar{ height:5px; } .fcard-rail::-webkit-scrollbar-thumb{ background:var(--accent-2); border-radius:5px; }
.fcard{ flex:0 0 clamp(290px,38vw,420px); scroll-snap-align:start; position:relative; min-height:clamp(400px,44vw,540px); border-radius:14px; overflow:hidden; border:1px solid var(--hairline); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,2.6vw,38px); }
.fcard::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.04); transition:transform .9s var(--ease); }
.fcard:hover::before{ transform:scale(1.1); }
.fcard::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.3) 58%, transparent 86%), linear-gradient(0deg, color-mix(in srgb,var(--accent) 22%,transparent), transparent 55%); }
.fcard > *{ position:relative; z-index:2; }
.fcard .sec-label{ margin-bottom:10px; color:var(--accent); }
.fcard h3{ font-family:var(--display); font-weight:300; font-size:clamp(22px,2.5vw,32px); line-height:1.05; letter-spacing:-.01em; color:#fff; margin-bottom:10px; }
.fcard p{ font-family:var(--serif); font-weight:300; font-size:15px; line-height:1.6; color:#D9D2E6; margin-bottom:16px; max-width:32ch; }
.fcard .inline-link{ color:var(--accent-ink); }

/* Lead feature rail — NVIDIA layout (summary + horizontal cards), Apple card design, medium */
.lead-sec{ position:relative; padding:clamp(40px,6vw,84px) clamp(20px,4vw,52px); }
.lead-head{ max-width:var(--maxw); margin:0 auto clamp(26px,3.4vw,40px); }
.lead-head h2{ font-family:var(--display); font-weight:300; font-size:clamp(26px,3.2vw,44px); line-height:1.04; letter-spacing:-.02em; margin:.16em 0 .34em; }
.lead-head .sec-sub{ max-width:62ch; margin:0; }
.lead-grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(16px,1.6vw,22px); }
.lead-grid .fcard{ flex:none; min-height:clamp(300px,27vw,372px); }
.lead-grid .fcard .inline-link{ color:var(--accent-ink); font-family:var(--mono); font-size:13px; }

/* Apple-style full-bleed photo band that carries a short paragraph + buttons */
.photosec-card .hero-cta{ justify-content:center; margin-top:20px; }
.photosec--right .photosec-card .hero-cta{ justify-content:flex-start; }
.photosec.bandwide .photosec-card{ max-width:54ch; }
.photosec.bandwide .photosec-card p{ font-family:var(--serif); font-weight:300; font-size:clamp(15px,1.4vw,19px); line-height:1.62; color:#D9D2E6; margin-bottom:0; }
.photosec.bandwide .photosec-card .chips{ justify-content:flex-start; }

/* ── HERO SLIDER (NVIDIA-style cycling photo) ─────────────── */
.hero-dots{ position:absolute; z-index:4; bottom:26px; right:clamp(20px,5vw,64px); display:flex; gap:9px; align-items:center; }
.hero-dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:transparent; cursor:pointer; transition:width .4s var(--ease), background .3s, border-color .3s; }
.hero-dots button.on{ width:26px; border-radius:6px; background:var(--accent); border-color:var(--accent); }
.hero-bg{ transition:opacity 1.9s var(--ease); }
.hero-bg--b{ opacity:0; }

/* ── TESLA-STYLE 30/70 SPLIT CARD (text+buttons | motion) ─── */
.splitcard-sec{ position:relative; padding:clamp(40px,6vw,84px) clamp(20px,4vw,52px); }
.splitcard{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:40% 60%; gap:clamp(20px,2.4vw,36px); align-items:stretch;
  border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:color-mix(in srgb,var(--bg1) 72%, transparent); box-shadow:0 50px 110px -60px var(--glow); }
/* reversed: 3D world on the left, text on the right (alternate the rhythm) */
.splitcard--rev{ grid-template-columns:60% 40%; }
.splitcard--rev .splitcard-text{ order:2; } .splitcard--rev .splitcard-media{ order:1; }
.splitcard-text{ padding:clamp(28px,3.4vw,52px); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.splitcard-text .sec-label{ margin:0; }
.splitcard-text h2{ font-family:var(--display); font-weight:300; font-size:clamp(26px,3.2vw,44px); line-height:1.04; letter-spacing:-.02em; }
.splitcard-text p{ font-family:var(--serif); font-weight:300; font-size:clamp(15px,1.35vw,18px); line-height:1.6; color:#CFC8DC; max-width:42ch; }
.splitcard-text .hero-cta{ margin-top:10px; }
.splitcard-media{ position:relative; min-height:clamp(340px,38vw,520px); }
/* inset the viewer inside a small frame; keep the corner radius tiny so the rounded clip
   never shaves the viewer's own top-right control buttons (they sit within ~10px of the corner) */
.splitcard-media .world3d{ position:absolute; inset:14px; max-width:none; height:auto; border:1px solid var(--hairline); border-radius:4px; box-shadow:none; aspect-ratio:auto; overflow:hidden; }
.splitcard-media .world3d iframe{ border-radius:4px; }
@media (max-width:860px){ .splitcard, .splitcard--rev{ grid-template-columns:1fr; } .splitcard-media{ min-height:320px; }
  .splitcard--rev .splitcard-text, .splitcard--rev .splitcard-media{ order:0; } }

/* ── TWO WIDE CARDS (Tesla lower band) ────────────────────── */
.duo{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.duo-card{ position:relative; min-height:clamp(300px,30vw,420px); border-radius:10px; overflow:hidden; border:1px solid var(--hairline); display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(26px,3vw,44px); }
.duo-card::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--cimg) center/cover no-repeat; transform:scale(1.03); transition:transform .8s var(--ease); }
.duo-card:hover::before{ transform:scale(1.09); }
.duo-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.4) 45%, transparent 80%), linear-gradient(0deg, color-mix(in srgb,var(--accent) 24%,transparent), transparent 60%); }
.duo-card > *{ position:relative; z-index:2; }
.duo-card .sec-label{ margin-bottom:10px; }
.duo-card h3{ font-family:var(--display); font-weight:300; font-size:clamp(22px,2.6vw,34px); line-height:1.05; letter-spacing:-.02em; color:#fff; margin-bottom:10px; max-width:18ch; }
.duo-card p{ font-family:var(--serif); font-weight:300; font-size:15px; line-height:1.6; color:#D9D2E6; max-width:38ch; margin-bottom:16px; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }

/* ── GRID→RAIL converters (visible horizontal sliders) ────── */
.feed--rail{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 20px; max-width:var(--maxw); margin:0 auto; cursor:grab; -webkit-overflow-scrolling:touch; }
.feed--rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.feed--rail::-webkit-scrollbar{ height:4px; } .feed--rail::-webkit-scrollbar-thumb{ background:var(--accent-2); border-radius:4px; }
.feed--rail > .entry{ flex:0 0 clamp(258px,30vw,338px); scroll-snap-align:start; }
.portal-grid--rail{ display:flex !important; grid-template-columns:none !important; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 20px; cursor:grab; -webkit-overflow-scrolling:touch; }
.portal-grid--rail.dragging{ cursor:grabbing; scroll-snap-type:none; }
.portal-grid--rail::-webkit-scrollbar{ height:4px; } .portal-grid--rail::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:4px; }
.portal-grid--rail > .portal{ flex:0 0 clamp(280px,33vw,360px); scroll-snap-align:start; grid-column:auto !important; }
.portal-grid--rail > .portal--feature{ flex-direction:column; align-items:stretch; }

/* ── INTERACTIVE 3D WORLDS (World Labs splat embeds, lazy) ── */
.world3d-sec{ position:relative; padding:clamp(44px,7vw,104px) clamp(20px,4vw,52px); }
.world3d-sec .sec-label{ max-width:1060px; margin:0 auto 16px; }
.world3d{ position:relative; max-width:1060px; margin:0 auto; aspect-ratio:16/10; border:1px solid var(--hairline); border-radius:4px; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 30%, var(--bg2), var(--bg0)); box-shadow:0 44px 100px -54px var(--glow); }
.world3d iframe{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; display:block; }
.world3d::before{ content:"resolving world…"; position:absolute; z-index:0; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); opacity:.7; }
.world3d::after{ content:"drag to explore ◓"; position:absolute; z-index:2; left:16px; bottom:14px; pointer-events:none;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  background:color-mix(in srgb,var(--bg0) 58%,transparent); padding:6px 11px; border:1px solid var(--hairline); border-radius:999px;
  opacity:0; transition:opacity .6s var(--ease); }
.world3d.loaded::after{ opacity:.92; }
@media (max-width:700px){ .world3d{ aspect-ratio:4/3; } }
/* prod profile: split-card world slot shown as a still image instead of the live embed */
.world3d--still{ background:var(--cimg) center/cover no-repeat !important; box-shadow:none; }
.world3d--still::before, .world3d--still::after{ display:none !important; }
.world3d--still iframe{ display:none !important; }

/* ── FOOTER LEDGER RAIL (recommended, sliding) ────────────── */
.rail-foot{ max-width:var(--maxw); margin:clamp(30px,4vw,52px) auto 0; }
.rail-foot .sec-label{ margin-bottom:16px; }
.rail-foot .rail{ padding-bottom:18px; }
.rail-foot .slide{ background:linear-gradient(180deg, color-mix(in srgb,var(--bg2) 50%,transparent), color-mix(in srgb,var(--bg1) 70%,transparent)); border-color:var(--hairline); }
.rail-foot .slide b{ color:#EDE9F2; } .rail-foot .slide span{ color:var(--accent); }

/* ── RESEARCH CORPUS (Ledger · 88 papers) ─────────────────── */
.rfilter{ max-width:var(--maxw); margin:0 auto clamp(28px,4vw,44px); display:flex; flex-wrap:wrap; gap:9px; }
.rfilter .fbtn{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--hairline); border-radius:999px; background:transparent; color:inherit; cursor:pointer; transition:border-color .3s,color .3s,background .3s; }
.sec--light .rfilter .fbtn{ color:var(--ink-soft); border-color:var(--paper-2); }
.rfilter .fbtn:hover{ border-color:var(--accent); color:var(--accent); }
.rfilter .fbtn.on{ background:var(--accent); color:#0a0710; border-color:var(--accent); }
.rcount{ max-width:var(--maxw); margin:0 auto 18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); opacity:.7; }
.rgrid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.rcard{ display:block; color:inherit; border:1px solid var(--hairline); border-radius:5px; padding:24px 26px 22px; background:color-mix(in srgb,var(--bg1) 50%,transparent); transition:border-color .4s, transform .4s var(--ease), box-shadow .4s; }
a.rcard{ cursor:pointer; }
a.rcard .rcard-go{ display:inline-block; margin-top:4px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); transition:color .3s; }
a.rcard:hover .rcard-go{ color:var(--accent); }
/* research-paper essay: figures, references, inline citations */
#pBody h3{ font-family:var(--display); font-weight:400; font-size:clamp(19px,2vw,26px); color:var(--ink); margin:1.3em 0 .4em; }
.read figure.pfig{ max-width:none; margin:clamp(28px,4vw,46px) 0; }
.read figure.pfig .pfig-img{ aspect-ratio:16/9; background:var(--cimg) center/cover no-repeat; border-radius:8px; border:1px solid var(--paper-2); }
.read figure.pfig figcaption{ margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; line-height:1.5; color:#6a6576; }
sup.cite{ line-height:0; }
sup.cite a{ color:var(--accent-2); font-size:.72em; font-family:var(--mono); padding:0 1px; }
.refs{ margin:14px 0 0; padding-left:22px; }
.refs li{ font-family:var(--serif); font-weight:300; font-size:13.5px; line-height:1.55; color:#54505e; margin-bottom:11px; }
.refs li a{ color:var(--accent-2); word-break:break-word; border-bottom:1px solid var(--hairline); }
.refs li a:hover{ color:var(--accent); }
.sec--light .rcard{ background:#fff; border-color:var(--paper-2); }
.rcard:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:0 24px 50px -30px var(--glow); }
.rcard-top{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:12px; }
.rcard-dom{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.rcard-date{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--accent-2); opacity:.8; white-space:nowrap; }
.rcard h3{ font-family:var(--display); font-weight:400; font-size:clamp(18px,1.9vw,23px); line-height:1.12; letter-spacing:-.01em; margin-bottom:10px; }
.sec--light .rcard h3{ color:var(--ink); }
.rcard p{ font-family:var(--serif); font-weight:300; font-size:14.5px; line-height:1.62; margin-bottom:14px; }
.sec--dark .rcard p{ color:#C8C1D6; } .sec--light .rcard p{ color:#54505e; }
.rcard-methods{ display:flex; flex-wrap:wrap; gap:6px; }
.rcard-methods span{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; padding:4px 9px; border:1px solid var(--hairline); border-radius:999px; opacity:.72; }
.sec--light .rcard-methods span{ border-color:var(--paper-2); }
.rsearch{ display:block; width:100%; max-width:var(--maxw); margin:0 auto 16px; background:transparent;
  border:1px solid var(--paper-2); border-radius:6px; padding:13px 16px; font-family:var(--mono);
  font-size:13px; letter-spacing:.03em; color:var(--ink); }
.rsearch::placeholder{ color:var(--ink-soft); opacity:.65; }
.rsearch:focus{ border-color:var(--accent-2); }
.rempty{ font-family:var(--display); font-style:italic; color:var(--ink-soft); padding:18px 2px; }
/* perf: skip rendering off-screen corpus cards (88 of them) until near view */
.rcard{ content-visibility:auto; contain-intrinsic-size:0 360px; }
@media (max-width:760px){ .rgrid{ grid-template-columns:1fr; } }

/* ── LISTEN · read-aloud control on research-corpus notes ─── */
.listen-bar{ max-width:64ch; margin:0 auto 20px; display:flex; align-items:center; gap:10px; }
.listen-btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.07em; color:var(--accent-2);
  background:color-mix(in srgb,var(--accent) 9%,transparent); border:1px solid var(--hairline);
  border-radius:999px; padding:9px 17px; transition:background .2s,border-color .2s,color .2s; }
.listen-btn:hover{ background:color-mix(in srgb,var(--accent) 17%,transparent); border-color:var(--accent); color:var(--ink); }
.listen-btn .listen-ico{ font-size:11px; line-height:1; }
.listen-btn.is-playing{ color:var(--ink); border-color:var(--accent); }
.listen-stop{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; cursor:pointer;
  font-family:var(--mono); font-size:10px; color:var(--ink-soft); background:transparent;
  border:1px solid var(--hairline); border-radius:999px; transition:border-color .2s,color .2s; }
.listen-stop:hover{ border-color:var(--accent); color:var(--ink); }
@media (prefers-reduced-motion:reduce){ .listen-btn{ transition:none; } }

/* ══ UX PANEL FIXES ══════════════════════════════════════════ */
/* skip link (a11y — WCAG 2.4.1) */
.skip-link{ position:fixed; top:-60px; left:12px; z-index:100; background:var(--accent); color:#0a0710;
  padding:10px 16px; border-radius:4px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; transition:top .2s; }
.skip-link:focus{ top:12px; }
/* visible keyboard focus everywhere (was missing; form had outline:none) */
:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; border-radius:2px; }
.sec--light :focus-visible, .cform :focus-visible{ outline-color:var(--accent-2); }
/* accent labels fail contrast on the warm-white ground → use the darker accent */
.sec--light .sec-label{ color:var(--accent-2); }
/* theme dots: keep 15px visual, expand the click target to ≥24px (WCAG 2.5.8) */
.sw{ position:relative; }
.sw::after{ content:""; position:absolute; inset:-5px; border-radius:50%; }
/* mobile menu button (hidden on desktop) */
.nav-toggle{ display:none; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:900px){
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center;
    background:none; border:0; cursor:pointer; z-index:51; padding:0; }
  .nav-toggle span{ display:block; width:22px; height:1.6px; background:#fff; transition:transform .3s var(--ease), opacity .25s; }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
  .nav-links{
    /* explicit viewport height + top/right (NOT inset:bottom) so the nav's backdrop-filter
       containing block can never clip the drawer to the bar's height (Safari) */
    position:fixed; top:0; right:0; left:auto; bottom:auto; height:100vh; height:100dvh;
    width:min(82vw,330px); flex-direction:column; justify-content:flex-start; align-items:flex-start;
    gap:22px; padding:96px 32px 40px; font-size:16px; letter-spacing:.1em; overflow-y:auto;
    background:color-mix(in srgb,var(--bg1) 96%,#000);
    border-left:1px solid var(--hairline); transform:translateX(101%); transition:transform .42s var(--ease); z-index:50;
  }
  .nav.open .nav-links{ transform:translateX(0); }
  .nav-links a{ opacity:1; }
  .split, .comm-grid{ grid-template-columns:1fr; }
  .split, .comm-grid{ grid-template-columns:1fr; }
  .portal-grid{ grid-template-columns:1fr 1fr; }
  .portal--feature{ flex-direction:column; align-items:flex-start; gap:14px; }
  .portal--feature h3{ flex:none; }
  .float-field{ display:flex; flex-direction:column; }
  .pcard{ margin:0 !important; }
  .portal-foot{ grid-template-columns:1fr 1fr; }
  .break{ background-attachment:scroll; }
}
@media (max-width:560px){
  .portal-grid, .portal-foot{ grid-template-columns:1fr; }
  .node{ width:84px; height:84px; } .node--center{ width:130px; height:130px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ── COOKIE / STORAGE CONSENT NOTICE (injected by main.js) ─── */
.cookie-bar{ position:fixed; left:50%; bottom:20px; transform:translate(-50%,150%); z-index:120;
  width:min(700px, calc(100vw - 28px)); display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 16px 14px 22px; border:1px solid var(--hairline); border-radius:16px;
  background:color-mix(in srgb, var(--bg1) 86%, var(--bg2)); backdrop-filter:blur(22px) saturate(1.2); -webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:0 30px 64px -30px rgba(0,0,0,.72); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.cookie-bar.show{ transform:translate(-50%,0); opacity:1; }
.cookie-text{ flex:1 1 320px; margin:0; font-family:var(--serif); font-weight:300; font-size:13.5px; line-height:1.55; color:#CFC8DC; }
.cookie-text a{ color:var(--accent); border-bottom:1px solid var(--hairline); }
.cookie-text a:hover{ color:var(--accent-ink); }
.cookie-actions{ display:flex; gap:10px; flex:0 0 auto; }
.cookie-btn{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; cursor:pointer;
  padding:9px 17px; border-radius:999px; border:1px solid var(--hairline); background:transparent; color:#CFC8DC;
  transition:background .2s, border-color .2s, color .2s, filter .2s; }
.cookie-accept{ background:var(--accent); color:#140e22; border-color:var(--accent); }
.cookie-accept:hover{ filter:brightness(1.09); }
.cookie-decline:hover{ border-color:var(--accent); color:#fff; }
@media (max-width:560px){ .cookie-bar{ left:0; right:0; bottom:0; width:auto; border-radius:14px 14px 0 0; border-left:0; border-right:0; border-bottom:0; transform:translateY(110%); } .cookie-bar.show{ transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .cookie-bar{ transition:opacity .3s; } }

/* ════════ AUTH · sign-in, signed-in shell, account, feed, admin ════════ */
.nav-signin{ color:var(--accent-ink); border:1px solid var(--hairline); border-radius:999px; padding:6px 15px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; transition:background .2s,border-color .2s,color .2s; }
.nav-signin:hover{ background:color-mix(in srgb,var(--accent) 16%,transparent); border-color:var(--accent); color:#fff; }
.muted{ color:var(--bone-faint,#9a93ac); font-family:var(--serif); font-weight:300; }

/* sign-in card */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 20px 80px; position:relative; z-index:1; }
.auth-card{ width:min(440px,100%); text-align:center; padding:clamp(30px,4vw,46px); border:1px solid var(--hairline); border-radius:18px;
  background:color-mix(in srgb,var(--bg1) 80%,var(--bg2)); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); box-shadow:0 40px 90px -50px var(--glow); }
.auth-h1{ font-family:var(--display); font-weight:300; font-size:clamp(34px,5vw,52px); line-height:1; margin:10px 0 14px; }
.auth-sub{ font-family:var(--serif); font-weight:300; font-size:15px; line-height:1.6; color:#CFC8DC; max-width:34ch; margin:0 auto 24px; }
.auth-apple{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; cursor:pointer;
  background:#fff; color:#0a0612; border:none; border-radius:12px; padding:14px 22px; font-family:var(--mono); font-size:14px; letter-spacing:.02em;
  transition:opacity .2s, transform .2s var(--ease); }
.auth-apple:hover:not([disabled]){ transform:translateY(-1px); }
.auth-apple[disabled]{ opacity:.55; cursor:progress; }
.auth-apple svg{ width:18px; height:18px; fill:#0a0612; }
.auth-msg{ color:#ff8e8e; font-size:12.5px; min-height:1em; margin:12px 0 0; }
.auth-fine{ font-family:var(--serif); font-weight:300; font-size:12px; color:var(--bone-faint,#8f88a3); line-height:1.5; margin:16px auto 0; max-width:34ch; }
.auth-fine a{ color:var(--accent); border-bottom:1px solid var(--hairline); }
.auth-loading{ min-height:100vh; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); opacity:.7; }

/* signed-in shell top nav */
.signed-nav{ position:sticky; top:0; z-index:60; border-bottom:1px solid var(--hairline);
  background:color-mix(in srgb,var(--bg0) 82%,var(--bg1)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.signed-nav-inner{ max-width:var(--maxw); margin:0 auto; padding:14px clamp(18px,4vw,40px); display:flex; align-items:center; gap:22px; }
.signed-tabs{ display:flex; gap:22px; align-items:center; }
.signed-tabs a{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim,#b9b1c9); padding:6px 0; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.signed-tabs a:hover{ color:#fff; }
.signed-tabs a[aria-current="page"]{ color:#fff; border-bottom-color:var(--accent); }
.signed-id{ margin-left:auto; display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--bone-faint,#8f88a3); }
.signed-out{ cursor:pointer; background:transparent; border:1px solid var(--hairline); border-radius:999px; padding:7px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim,#b9b1c9); transition:border-color .2s,color .2s; }
.signed-out:hover{ border-color:var(--accent); color:#fff; }
.signed-body{ max-width:920px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(18px,4vw,40px) 160px; position:relative; z-index:1; }
.signed-h1{ font-family:var(--display); font-weight:300; font-size:clamp(30px,4.4vw,48px); line-height:1.04; margin:8px 0 30px; }

/* account */
.account-card{ display:flex; align-items:center; gap:20px; padding:24px; border:1px solid var(--hairline); border-radius:16px; background:color-mix(in srgb,var(--bg1) 60%,transparent); }
.account-av{ width:64px; height:64px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; }
.account-av--mono{ font-family:var(--display); font-size:26px; color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 22%,transparent); }
.account-id b{ font-family:var(--display); font-weight:400; font-size:22px; display:block; }
.account-id span{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--accent-2); }
.account-id p{ font-family:var(--serif); font-weight:300; color:#CFC8DC; margin-top:8px; }
.account-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
@media (max-width:640px){ .account-grid{ grid-template-columns:1fr; } }
.account-tile{ display:block; padding:20px; border:1px solid var(--hairline); border-radius:12px; background:color-mix(in srgb,var(--bg1) 45%,transparent); transition:border-color .25s,transform .25s var(--ease); }
.account-tile:hover{ border-color:var(--accent); transform:translateY(-3px); }
.account-tile b{ font-family:var(--display); font-weight:400; font-size:17px; display:block; }
.account-tile span{ font-family:var(--serif); font-weight:300; font-size:13px; color:#a99fbe; }

/* feed */
.feed-list{ display:flex; flex-direction:column; gap:14px; }
.feed-item{ padding:18px 20px; border:1px solid var(--hairline); border-radius:12px; background:color-mix(in srgb,var(--bg1) 45%,transparent); }
.feed-who{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-bottom:6px; }
.feed-item p{ font-family:var(--serif); font-weight:300; line-height:1.6; color:#e7e2f0; }

/* admin */
.admin-body{ max-width:var(--maxw); }
.admin-layout{ display:grid; grid-template-columns:200px 1fr; gap:28px; }
@media (max-width:760px){ .admin-layout{ grid-template-columns:1fr; } }
.admin-side ul{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.admin-side button{ width:100%; text-align:left; cursor:pointer; background:transparent; border:0; border-radius:8px; padding:9px 12px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--bone-dim,#b9b1c9); transition:background .2s,color .2s; }
.admin-side button:hover{ color:#fff; background:color-mix(in srgb,var(--accent) 10%,transparent); }
.admin-side button.is-active{ color:#fff; background:color-mix(in srgb,var(--accent) 18%,transparent); }
.admin-h1{ font-family:var(--display); font-weight:300; font-size:clamp(26px,3.4vw,40px); margin:0 0 22px; }
.admin-kv{ border:1px solid var(--hairline); border-radius:12px; overflow:hidden; }
.admin-kv-row{ display:flex; gap:16px; padding:11px 16px; border-bottom:1px solid var(--hairline); font-family:var(--mono); font-size:12.5px; }
.admin-kv-row:last-child{ border-bottom:0; }
.admin-kv-k{ flex:0 0 200px; color:var(--accent-2); letter-spacing:.04em; }
.admin-kv-v{ color:#e7e2f0; word-break:break-word; }
.admin-pre{ font-family:var(--mono); font-size:12px; color:#e7e2f0; white-space:pre-wrap; word-break:break-word; padding:16px; border:1px solid var(--hairline); border-radius:12px; }

/* explore people results */
.explore-people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:14px; }
.person{ display:block; padding:14px 16px; border:1px solid var(--hairline); border-radius:12px; background:color-mix(in srgb,var(--bg1) 45%,transparent); transition:border-color .2s,transform .2s var(--ease); }
.person:hover{ border-color:var(--accent); transform:translateY(-2px); }
.person b{ font-family:var(--display); font-weight:400; font-size:15px; display:block; }
.person span{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--accent-2); }

/* ════════ MOBILE POLISH ════════ */
@media (max-width:760px){
  /* convergence: keep the circular diagram — give the stage square room and shrink the
     circles so the center no longer covers the node above (Language) or below it */
  .conv-stage{ aspect-ratio:1/1; max-width:360px; }
  .node{ width:clamp(74px,21vw,98px); height:clamp(74px,21vw,98px); }
  .node b{ font-size:clamp(11px,3vw,13px); }
  .node span{ font-size:8px; letter-spacing:.1em; }
  .node--center{ width:clamp(104px,30vw,150px); height:clamp(104px,30vw,150px); }
  .node--center b{ font-size:clamp(13px,3.6vw,16px); }
  /* signed-in shell: tab row wraps to its own scrollable line so 6+ tabs never crowd */
  .signed-nav-inner{ flex-wrap:wrap; gap:10px 16px; padding:12px 16px; }
  .signed-tabs{ order:3; width:100%; gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; }
  .signed-tabs::-webkit-scrollbar{ display:none; }
}