/* SovereigntyBox — homepage-only styles (index.html). Loaded AFTER site.css. */
/* Shared tokens/nav/footer/concierge/gateway/etc. live in site.css — edit there, not here. */

/* ============ LAYOUT (homepage grid: content + 250px news rail) ============ */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(36px,3.6vw,64px);align-items:start;position:relative}
.main-col{overflow:hidden}
/* homepage hero override — site.css .hero (72svh, padding-top:120px) is the sub-page hero */
.hero{min-height:100svh;padding-top:64px}
.hero-art{position:absolute;left:min(44%,560px);top:110px;width:min(52%,680px);z-index:0;pointer-events:none;
  opacity:.8;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.12) 78%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.12) 78%)}
@media (min-width:1500px){.hero-art{left:auto;right:240px;top:150px;width:min(44%,820px)}}
@media (min-width:2100px){.hero-art{right:260px;width:min(40%,900px)}}
.hero-art img{display:block;width:100%;height:auto}
[data-theme="light"] .hero-art{mix-blend-mode:normal}
.hero-art .art-light{display:none}
[data-theme="light"] .hero-art .art-dark{display:none}
[data-theme="light"] .hero-art .art-light{display:block}
.hero > *:not(.hero-art):not(.hero-meta){position:relative;z-index:1}
.hero-meta{z-index:1}
@media (max-width:900px){.hero-art{left:auto;right:0;width:78%;top:180px;opacity:.5}}
/* flag-on-rock sketch, balancing the negative space lower-right of the hero.
   WARNING: the combined max-width:1499px + max-height:820px rule MUST remain the
   LAST .hero-flag rule in the cascade (extreme-zoom fix) — never reorder below
   another .hero-flag rule. */
.hero-flag{position:absolute;top:calc(100svh - 400px);right:calc(250px + clamp(36px,3.6vw,64px) + 3%);width:min(39%,520px);z-index:0;pointer-events:none;
  opacity:.55;mix-blend-mode:screen}
.hero-flag img{display:block;width:100%;height:auto}
.hero-flag .flag-light{display:none}
[data-theme="light"] .hero-flag{mix-blend-mode:normal;opacity:1}
[data-theme="light"] .hero-flag .flag-dark{display:none}
[data-theme="light"] .hero-flag .flag-light{display:block}
@media (min-width:1500px){.hero-flag{top:max(calc(100svh - 260px),680px);width:min(34%,468px)}}
@media (min-width:2100px){.hero-flag{top:max(calc(100svh - 320px),780px);width:min(29%,468px)}}
@media (max-width:1499px){.hero-flag{top:max(calc(100svh - 360px),740px);width:min(42%,442px)}}
@media (max-width:900px){
  .hero-flag{top:calc(100svh - 220px);right:4%;width:min(57%,390px);opacity:.4}
  [data-theme="light"] .hero-flag{opacity:.36}
}
@media (max-width:1499px) and (max-height:820px){.hero-flag{top:calc(110px + min(52%,680px) * 0.601 + 140px)}}
.cta-block{align-items:center;margin-top:clamp(26px,3vw,40px)}
.cta-note{font:400 12px/1.6 'IBM Plex Mono',monospace;color:var(--fg-dim);max-width:34ch}
.hero-meta{position:absolute;bottom:28px;left:0;display:flex;gap:26px;font:500 10.5px 'IBM Plex Mono',monospace;
  letter-spacing:.16em;color:var(--fg-faint)}

/* ============ §01 PROOF PANELS ============ */
.proofs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--hair)}
.proof{padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:18px;min-height:340px}
.proof + .proof{border-left:2px solid var(--hair)}
.proof .p-tag{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}
.proof h3{font:600 clamp(21px,1.9vw,28px)/1.15 'Archivo',sans-serif;letter-spacing:-.02em;border-left:6px solid var(--accent);padding-left:16px}
.proof p{font-size:18px;line-height:1.65;color:var(--fg-dim)}
.proof .p-foot{margin-top:auto;border-top:2px solid var(--hair);padding-top:14px;
  font:500 10.5px/1.6 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--fg-dim)}
/* brain-unplugged sketch atop the kill-switch card */
.proof-art{display:block;width:min(75%,358px);height:auto;margin:0 auto 6px;
  opacity:.85;mix-blend-mode:screen}
.proof-art.art-light{display:none}
[data-theme="light"] .proof-art{mix-blend-mode:normal;opacity:1}
[data-theme="light"] .proof-art.art-dark{display:none}
[data-theme="light"] .proof-art.art-light{display:block}

/* ============ §02 PULL-QUOTE ============ */
.position{border-left:4px solid var(--accent);padding-left:clamp(22px,3vw,48px);max-width:1050px}
.position blockquote{font:600 clamp(28px,3.6vw,54px)/1.12 'Archivo',sans-serif;letter-spacing:-.028em;margin-bottom:26px}
.position p{font-size:clamp(18.5px,1.5vw,21.5px);line-height:1.65;color:var(--fg-dim);max-width:60ch}

/* ============ §05 CHAINS ============ */
.chain-block{margin-top:clamp(36px,4vw,56px)}
.chain-label{font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.18em;color:var(--fg-faint);
  text-transform:uppercase;margin-bottom:16px}
.chain{display:flex;align-items:stretch;padding-bottom:52px}
.node{position:relative;flex:1;border:2px solid var(--hair);padding:18px 12px;text-align:center;
  font:500 10.5px/1.5 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);
  transition:border-color .25s,background-color .25s;cursor:default;background:transparent}
.node:hover,.node:focus-visible{border-color:var(--fg);background:var(--bg-raise)}
.node:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.node .cap{position:absolute;top:calc(100% + 12px);left:0;right:0;font:400 10px/1.5 'IBM Plex Mono',monospace;
  letter-spacing:.04em;text-transform:none;color:var(--fg-dim);opacity:0;transition:opacity .25s;pointer-events:none}
.node:hover .cap,.node:focus-visible .cap{opacity:1}
.node.external{border-style:dashed;color:var(--fg-dim)}
.node.local{border-color:var(--fg)}
.link{width:clamp(18px,2.4vw,40px);align-self:center;height:2px;background:var(--hair);flex:none}

/* FIG. 03-B — exploded server (js/exploded-server.js), inline in the FIG. 03-A frame.
   Hidden unless body.exploded-on is set by the module (kill switch / fallbacks). */
#exploded-wrap{display:none;position:relative;margin:-6px 0 10px}
body.exploded-on #exploded-wrap{display:block}
body.exploded-on .schem-frame .schem,
body.exploded-on .schem-frame .sf-tag{display:none}
#exploded-stage{position:relative;width:100%;height:min(560px,64vh);overflow:hidden;background:var(--bg)}
#exploded-stage canvas{display:block;width:100% !important;height:100% !important}
.x-tag-head{position:absolute;top:10px;left:0;font:500 9.5px 'IBM Plex Mono',monospace;
  letter-spacing:.18em;color:var(--fg-faint);z-index:2}
#exploded-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.x-label{position:absolute;top:0;left:0;display:flex;align-items:center;gap:8px;
  opacity:0;transition:opacity .35s ease;will-change:transform}
.x-label.in{opacity:1}
.x-label .x-tag{font:500 9px 'IBM Plex Mono',monospace;letter-spacing:.12em;white-space:nowrap;
  background:var(--bg);border:1.5px solid var(--fg);padding:4px 7px;color:var(--fg)}
.x-label .x-leader{width:22px;height:1px;background:var(--fg-faint)}

/* ============ SIGNAL RAIL (desktop right column) ============ */
.rail{position:sticky;top:72px;height:calc(100svh - 72px);border-left:2px solid var(--hair);
  padding:28px 0 28px 24px;display:flex;flex-direction:column;gap:18px;min-height:480px}
.rail-rule{height:2px;background:var(--hair)}
.ticker{flex:1;min-height:140px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
.ticker-track{will-change:transform}
html.anim .ticker-track{animation:tick 92s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateY(-50%)}}

/* mobile in-flow signal section */
.signal-mobile{display:none}

/* ============ CLOSING ============ */
.closing h2{font-size:clamp(36px,5vw,80px);margin-bottom:28px;max-width:14ch}
.closing .body-copy{margin-bottom:36px}

/* ============ RESPONSIVE (homepage-only selectors) ============ */
@media (max-width:1120px){
  .layout{grid-template-columns:1fr}
  .rail{display:none}
  .signal-mobile{display:block;border-top:2px solid var(--hair)}
  .signal-mobile .sm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.18em;margin-bottom:8px}
  .signal-mobile .rail-clock{margin:6px 0 18px}
  .signal-mobile .sig-list{max-height:420px;overflow-y:auto;border-top:2px solid var(--hair);padding-right:6px}
  .signal-mobile .persp{margin-top:28px}
}
@media (max-width:900px){
  .proofs{grid-template-columns:1fr}
  .proof + .proof{border-left:none;border-top:2px solid var(--hair)}
}
@media (max-width:640px){
  .hero{padding-top:84px;min-height:0}
  .chain{flex-direction:column;padding-bottom:0}
  .link{width:1px;height:26px;margin:0 auto}
  .node{padding:14px 10px}
  .node .cap{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none !important}
  .ticker{overflow-y:auto}
}

/* ============ §02 COST CHART (position section) ============ */
.costchart{margin-top:clamp(36px,4.5vw,64px);border:2px solid var(--hair);padding:clamp(18px,2.2vw,30px);max-width:1050px}
.cc-head{font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:var(--fg-faint);margin-bottom:18px}
.cc-row{display:grid;grid-template-columns:minmax(180px,260px) 1fr auto;gap:14px;align-items:center;padding:9px 0;border-top:2px solid var(--hair-soft)}
.cc-row:first-of-type{border-top:none}
.cc-label{font:600 14px/1.2 'Archivo',sans-serif;color:var(--fg);display:flex;flex-direction:column;gap:3px}
.cc-sub{font:400 9px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--fg-faint)}
.cc-track{display:block;height:16px;background:var(--bg-raise);border:2px solid var(--hair-soft)}
.cc-bar{display:block;height:100%;background:var(--fg-dim)}
.cc-own .cc-bar{background:var(--accent)}
.cc-own .cc-val{color:var(--accent)}
.cc-budget{background:var(--sev-econ)}
.cc-val{font:600 15px 'IBM Plex Mono',monospace;color:var(--fg);text-align:right;min-width:76px}
.cc-note{margin-top:16px;font:400 10.5px/1.7 'IBM Plex Mono',monospace;letter-spacing:.04em;color:var(--fg-dim);max-width:76ch}
@media (max-width:640px){
  .cc-row{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 12px}
  .cc-track{grid-column:1 / -1;grid-row:2}
}