/* ==========================================================================
   RIONAI.top — ORION Four-Layer Architecture
   Concept: architecture / depth. Deep-space blue, stacked planes, orbital rings.
   Palette (locked): #060A14 / #0C1424 / #1B2740 / #E2E8F2 / #8A96AD
                     amber #F2A33C · slate blue #4C6EA8
   Fonts (locked): Space Grotesk (300/400/500/700) + Spline Sans Mono
   ========================================================================== */

:root{
  --bg:        #060A14;
  --bg-2:      #080D1A;
  --panel:     #0C1424;
  --panel-2:   #0F1A2E;
  --line:      #1B2740;
  --line-soft: #131D33;
  --ink:       #E2E8F2;
  --muted:     #8A96AD;
  --muted-2:   #66718A;
  --amber:     #F2A33C;
  --amber-2:   #FFC978;
  --slate:     #4C6EA8;
  --slate-2:   #7E9CD0;
  --maxw:      1280px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-2:    cubic-bezier(.34,1.02,.36,1);
  --sans:      "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:      "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:var(--muted);
  background-color:var(--bg);
  /* starfield dots + soft amber/blue orb glows + SVG noise — never flat */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23E2E8F2'%3E%3Ccircle cx='14' cy='22' r='.9' opacity='.45'/%3E%3Ccircle cx='78' cy='54' r='.7' opacity='.30'/%3E%3Ccircle cx='150' cy='18' r='1' opacity='.40'/%3E%3Ccircle cx='196' cy='88' r='.7' opacity='.28'/%3E%3Ccircle cx='44' cy='120' r='.8' opacity='.34'/%3E%3Ccircle cx='120' cy='140' r='1' opacity='.42'/%3E%3Ccircle cx='188' cy='176' r='.7' opacity='.26'/%3E%3Ccircle cx='30' cy='196' r='.9' opacity='.38'/%3E%3Ccircle cx='96' cy='204' r='.6' opacity='.24'/%3E%3Ccircle cx='166' cy='118' r='.8' opacity='.32'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    radial-gradient(1200px 700px at 82% -8%, rgba(76,110,168,.20), transparent 60%),
    radial-gradient(900px 560px at 4% 8%, rgba(242,163,60,.08), transparent 58%),
    radial-gradient(1000px 640px at 50% 118%, rgba(76,110,168,.14), transparent 62%),
    linear-gradient(180deg, #05080F 0%, #060A14 40%, #070C18 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--amber-2); text-decoration:none; transition:color .26s var(--ease); }
a:hover{ color:#fff; }

h1,h2,h3,h4{
  font-family:var(--sans);
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.12;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2.3rem,5vw,4rem); font-weight:500; }
h2{ font-size:clamp(1.65rem,3vw,2.4rem); }
h3{ font-size:1.16rem; letter-spacing:-.01em; line-height:1.25; }
p{ margin:0 0 1.1em; }
strong{ color:var(--ink); font-weight:500; }

::selection{ background:var(--amber); color:#060A14; }

/* ---- skip + focus ---- */
.skip{
  position:absolute; left:-999px; top:0; z-index:120;
  background:var(--amber); color:#060A14; padding:12px 20px; font-weight:500;
  border-radius:0 0 4px 0;
}
.skip:focus{ left:0; top:0; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:3px; }

.wrap{ width:min(100% - 48px, var(--maxw)); margin-inline:auto; }
.wrap-narrow{ width:min(100% - 48px, 860px); margin-inline:auto; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:60;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(6,10,20,.94), rgba(6,10,20,.74));
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.topbar-in{
  display:flex; align-items:center; gap:26px;
  min-height:70px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:6px; }
.brand svg{ flex:none; }
.brand-txt b{
  display:block; font-weight:700; color:var(--ink);
  font-size:1.02rem; letter-spacing:.16em;
}
.brand-txt span{
  display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-2); margin-top:2px;
}
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
.nav a{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:8px 14px; border-radius:5px;
  font-size:.86rem; color:var(--muted); letter-spacing:.01em;
  transition:background .26s var(--ease), color .26s var(--ease);
}
.nav a:hover, .nav a:focus-visible{ color:var(--ink); background:rgba(76,110,168,.14); }
.nav a.is-active{ color:var(--amber-2); }
.nav a iconify-icon{ color:var(--muted-2); }
.nav a:hover iconify-icon{ color:var(--amber); }

.topbar-cta{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:9px 18px; margin-left:10px;
  border:1px solid var(--amber); border-radius:5px;
  color:var(--amber-2); font-size:.84rem; font-weight:500;
  transition:background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.topbar-cta:hover, .topbar-cta:focus-visible{
  background:var(--amber); color:#060A14; transform:translateY(-2px);
}

.nav-toggle{
  display:none; margin-left:auto; align-items:center; justify-content:center;
  width:46px; height:46px; background:none; border:1px solid var(--line);
  border-radius:6px; color:var(--ink); cursor:pointer;
}

/* ==========================================================================
   ORBITAL RINGS (decorative)
   ========================================================================== */
.rings{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.rings i{
  position:absolute; border-radius:50%;
  border:1px solid rgba(76,110,168,.18);
}
.rings i.a{ width:760px; height:760px; right:-220px; top:-260px; border-color:rgba(242,163,60,.14); }
.rings i.b{ width:1120px; height:1120px; right:-400px; top:-440px; }
.rings i.c{ width:520px; height:520px; left:-200px; bottom:-240px; border-color:rgba(242,163,60,.10); }
.rings i.d{
  width:1120px; height:1120px; right:-400px; top:-440px;
  border-style:dashed; border-color:rgba(76,110,168,.14);
  animation:spin 120s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   HERO — asymmetric, overlapping
   ========================================================================== */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero-in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:30px; align-items:start;
  padding:74px 0 64px;
}
.hero-copy{ max-width:34ch; position:relative; z-index:3; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--amber);
  border:1px solid rgba(242,163,60,.30); border-radius:100px;
  padding:8px 16px; margin-bottom:28px;
  background:rgba(242,163,60,.05);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 4px rgba(242,163,60,.16);
}
.hero h1{ margin-bottom:24px; }
.hero h1 em{ font-style:normal; color:var(--amber); }
.hero .lede{ font-size:1.12rem; color:var(--muted); max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:.9rem; font-weight:500;
  padding:13px 24px; min-height:46px; border-radius:5px;
  border:1px solid var(--amber); color:var(--amber-2); background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  cursor:pointer;
}
.btn:hover, .btn:focus-visible{ background:var(--amber); color:#060A14; transform:translateY(-2px); }
.btn.ghost{ border-color:var(--line); color:var(--muted); }
.btn.ghost:hover, .btn.ghost:focus-visible{
  border-color:var(--slate-2); color:var(--slate-2); background:rgba(76,110,168,.12);
}

.hero-media{
  position:relative; margin-top:-130px; z-index:1;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  background:var(--panel);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.95);
}
.hero-media img{ width:100%; filter:saturate(.72) contrast(1.05) brightness(.82); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,10,20,.35), rgba(6,10,20,.72)),
    radial-gradient(600px 300px at 70% 10%, rgba(242,163,60,.16), transparent 60%);
}
.hero-media .tag{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber-2);
}

/* spec strip under hero */
.spec{
  position:relative; z-index:2; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(12,20,36,.55), transparent);
}
.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.spec-cell{
  padding:26px 28px; border-left:1px solid var(--line-soft);
}
.spec-cell:first-child{ border-left:none; padding-left:0; }
.spec-cell .k{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2); display:block; margin-bottom:10px;
}
.spec-cell .v{ font-family:var(--mono); font-size:.94rem; color:var(--amber-2); }
.spec-cell:nth-child(2n) .v{ color:var(--slate-2); }

/* ==========================================================================
   ARCHITECTURE DIAGRAM — stacked four-layer planes
   ========================================================================== */
.arch{
  position:relative; z-index:2;
  min-height:520px; display:flex; align-items:center; justify-content:center;
}
.arch-stage{
  position:relative; width:100%; max-width:420px; height:420px;
  perspective:1600px; perspective-origin:38% 30%;
}
.arch-stack{
  position:absolute; left:0; top:170px; width:340px; height:158px;
  transform-style:preserve-3d;
  transform:rotateX(17deg) rotateZ(-9deg);
}
.arch-plane{
  position:absolute; inset:0;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(15,26,46,.96), rgba(9,15,29,.96));
  box-shadow:0 40px 60px -34px rgba(0,0,0,.92), inset 0 1px 0 rgba(226,232,242,.05);
  padding:16px 20px;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
}
.arch-plane .ph{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber);
}
.arch-plane .ph b{ font-weight:500; }
.arch-plane .pn{
  display:block; margin-top:10px; font-size:1.02rem; font-weight:500;
  color:var(--ink); letter-spacing:-.01em;
}
.arch-plane .pd{
  margin-top:7px; font-size:.76rem; color:var(--muted-2); font-family:var(--mono);
  letter-spacing:.02em;
}
.arch-plane .dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber); flex:none;
  box-shadow:0 0 0 4px rgba(242,163,60,.14);
}
/* per-layer colour */
.arch-plane.l2, .arch-plane.l4{ }
.arch-plane.l2 .ph, .arch-plane.l3 .ph, .arch-plane.l4 .ph{ color:var(--slate-2); }
.arch-plane.l2 .dot, .arch-plane.l4 .dot{ background:var(--slate-2); box-shadow:0 0 0 4px rgba(126,156,208,.16); }
.arch-plane.l3 .dot{ background:var(--amber); box-shadow:0 0 0 4px rgba(242,163,60,.14); }

/* depth: L01 front, L04 recedes */
.arch-plane.l1{ transform:translate3d(0,0,46px); }
.arch-plane.l2{ transform:translate3d(0,-54px,-2px); }
.arch-plane.l3{ transform:translate3d(0,-108px,-50px); }
.arch-plane.l4{ transform:translate3d(0,-162px,-98px); }
.arch-plane.l1{ border-color:rgba(242,163,60,.36); }
.arch-plane.l1::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:radial-gradient(340px 160px at 12% 0%, rgba(242,163,60,.12), transparent 62%);
}
/* node grid detail inside the front plane */
.arch-plane .nodes{
  display:grid; grid-template-columns:repeat(9,1fr); gap:4px; margin-top:16px;
}
.arch-plane .nodes i{ height:6px; border-radius:2px; background:rgba(76,110,168,.28); }
.arch-plane .nodes i.on{ background:rgba(242,163,60,.66); }
.arch-plane .nodes i.s{ background:rgba(76,110,168,.6); }

/* orbital ring behind the stack */
.arch-orbit{
  position:absolute; left:50%; top:44%; width:360px; height:360px;
  transform:translate(-50%,-50%) rotateX(64deg);
  border-radius:50%; border:1px solid rgba(76,110,168,.24);
}
.arch-orbit::before{
  content:""; position:absolute; inset:34px; border-radius:50%;
  border:1px dashed rgba(242,163,60,.18);
}
.arch-orbit::after{
  content:""; position:absolute; top:-5px; left:50%; width:9px; height:9px;
  border-radius:50%; background:var(--amber); transform:translateX(-50%);
  box-shadow:0 0 16px 3px rgba(242,163,60,.5);
}

/* ==========================================================================
   LAYER BANDS — full-width, one per layer
   ========================================================================== */
.band{
  position:relative; border-bottom:1px solid var(--line-soft);
  padding:78px 0; overflow:hidden;
}
.band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 420px at 88% 6%, rgba(76,110,168,.10), transparent 62%);
}
.band.acc-amber::before{ background:radial-gradient(760px 420px at 10% 0%, rgba(242,163,60,.09), transparent 62%); }
.band-in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:60px; align-items:center;
}
.band.rev .band-in{ direction:rtl; }
.band.rev .band-in > *{ direction:ltr; }
.band-code{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--amber); margin-bottom:16px;
  display:flex; align-items:center; gap:12px;
}
.band.acc-slate .band-code{ color:var(--slate-2); }
.band-code::after{
  content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent);
}
.band h2{ margin-bottom:18px; }
.band-tagline{
  font-family:var(--mono); font-size:.84rem; color:var(--slate-2);
  margin:-6px 0 18px; letter-spacing:.02em;
}
.band p{ font-size:1rem; }
.band-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }

.band-media{
  position:relative; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:var(--panel);
}
.band-media img{ width:100%; filter:saturate(.7) contrast(1.06) brightness(.86); }
.band-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,10,20,.22), rgba(6,10,20,.62));
}
.band-media .cap{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* layer index number, oversized, offset */
.band-idx{
  font-family:var(--mono); font-size:clamp(4rem,9vw,7.5rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(242,163,60,.30);
  letter-spacing:-.04em; margin-bottom:8px;
}
.band.acc-slate .band-idx{ -webkit-text-stroke-color:rgba(126,156,208,.32); }

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.card{
  border:1px solid var(--line); border-radius:10px; padding:26px;
  background:linear-gradient(160deg, rgba(15,26,46,.7), rgba(9,15,29,.72));
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.card:hover{ border-color:rgba(242,163,60,.4); transform:translateY(-3px); }
.card iconify-icon{ font-size:26px; color:var(--amber); }
.card:nth-child(2n) iconify-icon{ color:var(--slate-2); }
.card h3{ margin:14px 0 8px; }
.card p{ font-size:.9rem; margin:0; color:var(--muted-2); }

/* layer roster (at-a-glance) */
.roster{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.roster-row{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:22px; align-items:center;
  background:var(--bg-2); padding:24px 26px;
  transition:background .3s var(--ease);
}
.roster-row:hover{ background:var(--panel); }
.roster-row .rc{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--amber); }
.roster-row:nth-child(2n) .rc{ color:var(--slate-2); }
.roster-row h3{ margin:0 0 5px; font-size:1.06rem; }
.roster-row p{ margin:0; font-size:.86rem; color:var(--muted-2); }
.roster-row .go{
  font-family:var(--mono); font-size:.72rem; color:var(--muted-2);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transition:color .3s var(--ease);
}
.roster-row:hover .go{ color:var(--amber); }

/* section framing */
.sect{ position:relative; padding:82px 0; border-bottom:1px solid var(--line-soft); }
.sect-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:52px; align-items:end; margin-bottom:48px;
}
.sect-head .num{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber);
}
.sect-head h2{ margin-top:14px; }
.sect-head p{ margin:0; color:var(--muted); }

/* editorial split */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.split.rev .split-media{ order:2; }
.split-media{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.split-media img{ width:100%; filter:saturate(.7) contrast(1.05) brightness(.86); }
.split-media figcaption{
  position:absolute; left:16px; bottom:14px; font-family:var(--mono);
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  z-index:2;
}
.split-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,10,20,.2), rgba(6,10,20,.6));
}

/* callout */
.callout{
  position:relative; margin:34px 0; padding:26px 30px;
  border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:0 10px 10px 0;
  background:linear-gradient(90deg, rgba(242,163,60,.09), transparent 72%);
}
.callout p{ margin:0; color:var(--ink); font-size:1.06rem; }
.callout .src{
  display:block; margin-top:12px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
}

/* inline cross-network link (in prose) */
.xlink{
  color:var(--amber-2); border-bottom:1px solid rgba(242,163,60,.4);
  transition:border-color .26s var(--ease), color .26s var(--ease);
}
.xlink:hover{ color:#fff; border-bottom-color:#fff; }

/* ==========================================================================
   CROSS-NETWORK
   ========================================================================== */
.net{ position:relative; padding:82px 0; border-bottom:1px solid var(--line-soft); }
.net-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.net-card{
  display:block; border:1px solid var(--line); border-radius:10px;
  padding:26px; background:linear-gradient(160deg, rgba(15,26,46,.7), rgba(9,15,29,.7));
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.net-card:hover, .net-card:focus-visible{
  border-color:var(--amber); transform:translateY(-3px); background:var(--panel-2);
}
.net-card .dom{ font-family:var(--mono); font-size:.72rem; color:var(--slate-2); letter-spacing:.04em; }
.net-card h3{ margin:12px 0 8px; font-size:1.04rem; color:var(--ink); }
.net-card p{ margin:0; font-size:.87rem; color:var(--muted-2); }
.net-card .go{
  margin-top:16px; font-size:.78rem; color:var(--amber);
  display:inline-flex; align-items:center; gap:7px;
}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.article-hero{ position:relative; overflow:hidden; padding:60px 0 46px; border-bottom:1px solid var(--line); }
.crumbs{
  font-family:var(--mono); font-size:.72rem; color:var(--muted-2);
  letter-spacing:.06em; margin-bottom:24px; display:flex; gap:10px; flex-wrap:wrap;
}
.crumbs a{ color:var(--muted-2); }
.crumbs a:hover{ color:var(--amber); }
.article-hero h1{ max-width:24ch; }
.article-hero .lede{ font-size:1.1rem; max-width:64ch; color:var(--muted); }
.byline{
  display:flex; flex-wrap:wrap; gap:24px; margin-top:28px;
  font-family:var(--mono); font-size:.76rem; color:var(--muted-2);
}
.byline b{ color:var(--muted); font-weight:400; }

.article-body{
  display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:66px;
  padding:62px 0 84px;
}
.prose{ max-width:70ch; }
.prose h2{
  margin-top:2.2em; padding-top:.3em; font-size:clamp(1.5rem,2.6vw,2rem);
}
.prose h3{ margin-top:1.9em; color:var(--amber-2); font-size:1.12rem; }
.prose p{ color:var(--muted); }
.prose ul{ padding-left:20px; margin:0 0 1.3em; }
.prose li{ margin-bottom:.55em; }
.prose img{ border:1px solid var(--line); border-radius:10px; margin:30px 0; }
.prose figure{ margin:34px 0; }
.prose figure img{ margin:0; }
.prose figcaption{
  font-family:var(--mono); font-size:.72rem; color:var(--muted-2);
  margin-top:12px; letter-spacing:.02em;
}
.prose blockquote{
  margin:32px 0; padding:4px 0 4px 26px; border-left:3px solid var(--amber);
  font-size:1.2rem; color:var(--ink); font-style:normal; font-weight:300;
  line-height:1.5;
}
.prose blockquote cite{
  display:block; margin-top:12px; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-style:normal;
}
.prose .layer-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); margin-bottom:6px;
}
.prose .layer-tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--amber);
}
.prose h2 + .layer-tag{ margin-top:2.2em; }

/* sticky aside */
.aside-inner{ position:sticky; top:96px; }
.aside h4{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:16px;
}
.toc{ list-style:none; padding:0; margin:0 0 30px; }
.toc li{ border-top:1px solid var(--line-soft); }
.toc li:last-child{ border-bottom:1px solid var(--line-soft); }
.toc a{
  display:flex; gap:12px; align-items:flex-start; padding:12px 0;
  font-size:.86rem; color:var(--muted);
}
.toc a:hover{ color:var(--amber-2); }
.toc .n{ font-family:var(--mono); font-size:.7rem; color:var(--slate-2); padding-top:3px; }
.factbox{ border:1px solid var(--line); border-radius:10px; padding:20px; background:var(--bg-2); }
.factbox dl{ margin:0; }
.factbox dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); margin-top:15px;
}
.factbox dt:first-child{ margin-top:0; }
.factbox dd{ margin:5px 0 0; font-size:.88rem; color:var(--ink); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ position:relative; padding:62px 0 42px; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:48px; }
.foot h4{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:16px;
}
.foot ul{ list-style:none; padding:0; margin:0; }
.foot li{ margin-bottom:11px; font-size:.86rem; }
.foot a{ color:var(--muted); }
.foot a:hover{ color:var(--amber-2); }
.foot .blurb{ font-size:.88rem; color:var(--muted-2); max-width:46ch; }
.foot .brand{ margin-bottom:16px; }
.foot-base{
  margin-top:46px; padding-top:24px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; color:var(--muted-2);
}
.disclaimer{
  margin-top:22px; padding:16px 20px; border:1px solid var(--line-soft);
  border-radius:8px; font-size:.78rem; color:var(--muted-2);
  background:rgba(12,20,36,.5);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .article-body{ grid-template-columns:1fr; gap:44px; }
  .aside-inner{ position:static; }
  .hero-in{ grid-template-columns:1fr; gap:0; }
  .hero-copy{ max-width:none; }
  .hero-media{ margin-top:34px; }
  .arch{ min-height:420px; }
}
@media (max-width:900px){
  .nav{
    position:fixed; inset:70px 0 auto 0; margin:0; padding:14px 20px 20px;
    background:rgba(6,10,20,.98); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:4px;
    transform:translateY(-140%); transition:transform .38s var(--ease); z-index:59;
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ justify-content:flex-start; }
  .nav-toggle{ display:inline-flex; }
  .topbar-cta{ display:none; }
  .band-in{ grid-template-columns:1fr; gap:34px; }
  .band.rev .band-in{ direction:ltr; }
  .band.rev .band-media{ order:2; }
  .sect-head{ grid-template-columns:1fr; gap:16px; align-items:start; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .split.rev .split-media{ order:0; }
  .net-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .spec-grid{ grid-template-columns:1fr 1fr; }
  .spec-cell{ border-left:none; border-top:1px solid var(--line-soft); padding:20px 0; }
  .spec-cell:nth-child(-n+2){ border-top:none; }
  .spec-cell:first-child, .spec-cell:nth-child(3){ padding-left:0; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .wrap, .wrap-narrow{ width:min(100% - 34px, var(--maxw)); }
  .hero-in{ padding:52px 0 48px; }
  .band{ padding:56px 0; }
  .sect, .net{ padding:58px 0; }
  .cards{ grid-template-columns:1fr; }
  .roster-row{ grid-template-columns:64px minmax(0,1fr); gap:16px; padding:20px; }
  .roster-row .go{ display:none; }
  .arch-stage{ height:360px; max-width:340px; }
  .arch-stack{ width:270px; height:132px; top:150px; }
  .arch-plane .pn{ font-size:.9rem; }
  .arch-plane .pd{ display:none; }
  .arch-plane .nodes{ display:none; }
  .band-idx{ font-size:4rem; }
  .foot-base{ flex-direction:column; }
}

/* ==========================================================================
   REDUCED MOTION — no transforms on the stack, no animations
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .arch-stack{ transform:none; }
  .arch-plane{ transform:none !important; position:relative !important; inset:auto !important; }
  .arch-stack{
    position:static; width:100%; max-width:340px; height:auto;
    display:flex; flex-direction:column; gap:10px; margin-inline:auto;
  }
  .arch-stage{ height:auto; perspective:none; display:flex; align-items:center; }
  .arch-orbit{ display:none; }
  .arch-plane{ box-shadow:0 18px 40px -26px rgba(0,0,0,.9); }
}