/* ═══════════════════════════════════════════════════════════════
   SOVEREIGN OPERATORS · official site · shared layer
   Tokens vendored from the SVRN design system (command-center
   tokens.css). Base is charcoal #1F1F1F, never pure black.
   Maroon is signal only. Display face is Archivo Expanded Black,
   ALL CAPS (the "Monument" type system v2). Archivo is NEVER italic.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* surfaces */
  --bg:#1F1F1F; --bg-elevated:#2A2A2A; --bg-subtle:#353535; --bg-inset:#171717;
  --border:#3A3A3A; --border-subtle:#2F2F2F; --border-strong:#454545;
  /* foreground */
  --fg:#ECE5CB;
  --fg-primary:rgba(255,255,255,.95); --fg-muted:rgba(255,255,255,.75);
  --fg-subtle:rgba(255,255,255,.55); --fg-faint:rgba(255,255,255,.40);
  --fg-quiet:rgba(255,255,255,.25);
  /* accent · maroon signal only */
  --accent:#671F1F; --accent-bright:#943838; --accent-hover:#7A2828; --accent-deep:#541818;
  /* buttons are FLAT maroon, never gradient (locked 2026-07-26) */
  /* shadows */
  --shadow-card:0 4px 20px -4px rgba(0,0,0,.50), 0 1px 4px -1px rgba(0,0,0,.30);
  --shadow-hover:0 8px 32px -6px rgba(0,0,0,.60), 0 2px 6px -2px rgba(0,0,0,.35);
  --shadow-pop:0 24px 60px -12px rgba(0,0,0,.70), 0 4px 12px -4px rgba(0,0,0,.40);
  --display-shadow:0 1px 3px rgba(0,0,0,.3);
  /* type */
  --display:'Archivo','Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  /* motion */
  --ease:cubic-bezier(.16,.84,.34,1);
  --micro:150ms ease;
  --enter:700ms var(--ease);
  /* rhythm */
  --gut:clamp(20px,4vw,40px);
  --hdr-h:84px;
  --hdr-h-scrolled:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg-primary);
  font-family:var(--sans);font-size:14px;line-height:1.65;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;min-height:100svh;display:flex;flex-direction:column;
}
main{flex:1}
::selection{background:var(--accent);color:var(--fg)}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

a,button{outline:none}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:10px;left:10px;z-index:200;background:var(--bg-inset);color:var(--fg);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--border);border-radius:6px;text-decoration:none;
  transform:translateY(-64px);transition:transform var(--micro)}
.skip:focus-visible{transform:translateY(0)}

/* ── ambient field ─────────────────────────────────────── */
.fx{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block}

/* ── layout ────────────────────────────────────────────── */
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gut)}

/* ── type helpers ──────────────────────────────────────── */
h1,h2,h3,.display{
  font-family:var(--display);font-weight:800;color:var(--fg);
  font-variation-settings:'wdth' 125;font-stretch:125%;
  text-transform:uppercase;
  letter-spacing:.01em;text-shadow:var(--display-shadow);
  font-style:normal; /* Archivo is NEVER italic */
}
.mono{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;font-variation-settings:'wdth' 125;font-stretch:125%;
  padding:14px 28px;border-radius:8px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color var(--micro),border-color var(--micro),box-shadow var(--micro),color var(--micro),transform var(--micro);
}
.btn .arw{transition:transform var(--micro);display:inline-block}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{
  background:var(--accent);color:var(--fg);
  border-color:var(--accent);
}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-card)}
.btn-ghost{background:transparent;color:var(--fg-primary);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--bg-subtle);border-color:var(--fg-quiet);transform:translateY(-1px)}
.btn-sm{padding:10px 18px;font-size:11px}
.btn-lg{padding:17px 36px;font-size:13px}
.btn-text{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;
  font-variation-settings:'wdth' 125;font-stretch:125%;
  color:var(--fg-muted);text-decoration:none;position:relative;padding:4px 0;
  transition:color var(--micro);
}
.btn-text::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--fg-muted);transition:width 220ms var(--ease)}
.btn-text:hover{color:var(--fg)}
.btn-text:hover::after{width:100%;background:var(--fg)}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color 260ms ease,border-color 260ms ease,box-shadow 260ms ease;
}
.hdr.is-scrolled{
  background:rgba(23,23,23,.74);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:rgba(58,58,58,.65);
  box-shadow:0 8px 30px -18px rgba(0,0,0,.7);
}
.hdr-in{
  max-width:1320px;margin:0 auto;padding:0 var(--gut);
  height:var(--hdr-h);display:flex;align-items:center;gap:24px;
  transition:height 260ms ease;
}
.hdr.is-scrolled .hdr-in{height:var(--hdr-h-scrolled)}

.brand{flex:1 1 0;display:flex;align-items:center;text-decoration:none;min-width:0}
.brand img{height:22px;width:auto;transition:filter var(--micro),opacity var(--micro)}
.brand:hover img{filter:brightness(1.18)}

/* nav tabs */
.nav{display:flex;align-items:center;gap:2px}
.nav-a{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.01em;line-height:1;
  color:var(--fg-muted);text-decoration:none;padding:11px 13px;border-radius:6px;
  background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:color var(--micro);
}
.nav-a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:1px;
  background:rgba(236,229,203,.35);transform:scaleX(0);transform-origin:center;
  transition:transform 220ms var(--ease),background-color var(--micro);
}
.nav-a:hover{color:var(--fg-primary)}
.nav-a:hover::after{transform:scaleX(1)}
.nav-a.active{color:var(--fg)}
.nav-a.active::after{transform:scaleX(1);background:var(--accent-bright)}

/* dropdown */
.dd{position:relative}
.dd-btn .chev{width:9px;height:9px;transition:transform 200ms var(--ease);flex:none}
.dd.open .dd-btn .chev{transform:rotate(180deg)}
.dd.open .dd-btn{color:var(--fg-primary)}
.dd-panel{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:256px;padding:8px;border-radius:12px;
  background:rgba(42,42,42,.92);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--border);box-shadow:var(--shadow-pop);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 180ms ease,transform 220ms var(--ease),visibility 0s linear 220ms;
}
.dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dd.open .dd-panel{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;visibility:visible;transition-delay:0s}
.dd-label{display:block;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--fg-quiet);padding:8px 14px 6px}
.dd-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;
  text-decoration:none;transition:background-color var(--micro);
}
.dd-item:hover{background:rgba(255,255,255,.05)}
.dd-idx{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--fg-quiet);transition:color var(--micro)}
.dd-item:hover .dd-idx{color:var(--accent-bright)}
.dd-item .dd-name{flex:1;font-size:13px;font-weight:500;color:var(--fg-primary)}
.dd-item .dd-arw{font-family:var(--mono);font-size:11px;color:var(--accent-bright);
  opacity:0;transform:translateX(-4px);transition:opacity var(--micro),transform var(--micro)}
.dd-item:hover .dd-arw{opacity:1;transform:translateX(0)}
.dd-item.current .dd-name{color:var(--fg)}
.dd-item.current .dd-idx{color:var(--accent-bright)}

/* header right */
.hdr-cta{flex:1 1 0;display:flex;justify-content:flex-end;align-items:center;gap:14px;min-width:0}

/* burger */
.burger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:40px;height:40px;background:transparent;border:0;cursor:pointer;border-radius:6px;
}
.burger span{display:block;width:18px;height:1.5px;background:var(--fg);border-radius:1px;
  transition:transform 260ms var(--ease),opacity var(--micro)}
.burger.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger.open span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* mobile overlay */
.mnav{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  background:rgba(23,23,23,.92);
  -webkit-backdrop-filter:blur(26px) saturate(1.3);
  backdrop-filter:blur(26px) saturate(1.3);
  padding:calc(var(--hdr-h) + 28px) clamp(24px,7vw,56px) 40px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 280ms ease,visibility 0s linear 280ms;
  overflow-y:auto;
}
.mnav.open{opacity:1;pointer-events:auto;visibility:visible;transition-delay:0s}
.mn-a{
  display:flex;align-items:baseline;gap:18px;text-decoration:none;
  font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 125;
  font-stretch:125%;text-transform:uppercase;font-style:normal;
  font-size:24px;letter-spacing:.01em;color:var(--fg);
  padding:15px 2px;border-bottom:1px solid rgba(58,58,58,.5);
  opacity:0;transform:translateY(12px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease),color var(--micro);
}
.mn-a:hover,.mn-a.active{color:var(--fg)}
.mn-a .mn-idx{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fg-faint);transition:color var(--micro)}
.mn-a.active .mn-idx{color:var(--accent-bright)}
.mn-group{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--fg-quiet);margin:30px 2px 4px;
  opacity:0;transform:translateY(12px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.mn-a.mn-sub{font-size:18px;padding:13px 2px}
.mn-foot{margin-top:auto;padding-top:40px;opacity:0;transform:translateY(12px);
  transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.mn-foot .btn{width:100%;max-width:420px}
.mn-foot .mono{display:block;margin-top:18px;text-align:center}
.mnav.open .mn-a,.mnav.open .mn-group,.mnav.open .mn-foot{opacity:1;transform:translateY(0)}
.mnav.open > *:nth-child(1){transition-delay:40ms}
.mnav.open > *:nth-child(2){transition-delay:70ms}
.mnav.open > *:nth-child(3){transition-delay:100ms}
.mnav.open > *:nth-child(4){transition-delay:130ms}
.mnav.open > *:nth-child(5){transition-delay:160ms}
.mnav.open > *:nth-child(6){transition-delay:190ms}
.mnav.open > *:nth-child(7){transition-delay:220ms}
.mnav.open > *:nth-child(8){transition-delay:250ms}
.mnav.open > *:nth-child(9){transition-delay:280ms}
html.no-scroll,html.no-scroll body{overflow:hidden}

/* ═══════════════════════════════════════════════════════════════
   PAGE SHELL · crumb + centered monolith
   ═══════════════════════════════════════════════════════════════ */
.page{padding-top:calc(var(--hdr-h) + 44px)}
.crumb{display:flex;align-items:center;gap:14px}
.crumb .dot{width:7px;height:7px;background:var(--accent-bright);border-radius:1px;flex:none}
.crumb .label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg-subtle);white-space:nowrap}
.crumb .rule{flex:1;height:1px;background:rgba(236,229,203,.16)}

.monolith{
  min-height:calc(100svh - var(--hdr-h) - 220px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:72px var(--gut);
}
.sec-idx{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--fg-faint);margin-bottom:26px}
.monolith h1{font-size:clamp(34px,5.4vw,68px);line-height:1.06;letter-spacing:.005em}
.mrule{width:34px;height:2px;background:var(--accent-bright);margin:36px auto 32px}
.status{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-subtle)}
.status .pulse{width:6px;height:6px;background:var(--accent-bright);border-radius:1px;flex:none}
html.motion .status .pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{opacity:.35;box-shadow:0 0 0 rgba(148,56,56,0)}
  50%{opacity:1;box-shadow:0 0 14px rgba(148,56,56,.85)}
}

/* ═══════════════════════════════════════════════════════════════
   LISTING · training / article cards
   ═══════════════════════════════════════════════════════════════ */
.listing{width:100%;max-width:880px;margin:0 auto;padding:56px var(--gut) 104px}
.listing-head{text-align:center;margin-bottom:56px}
.listing-head h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08}
.listing-head .mrule{margin:30px auto 0}
.tcard{
  display:block;position:relative;text-decoration:none;
  background:rgba(42,42,42,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:12px;
  padding:clamp(26px,4vw,40px) clamp(24px,4.5vw,44px);
  margin-bottom:18px;
  transition:border-color var(--micro),transform var(--micro),box-shadow var(--micro),background-color var(--micro);
}
.tcard:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow-hover);background:rgba(42,42,42,.75)}
.tcard-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.tcard-idx{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--accent-bright)}
.tcard-tag{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);
  border:1px solid var(--border);border-radius:999px;padding:4px 12px}
.tcard-title{font-size:clamp(21px,2.7vw,30px);line-height:1.12;margin-bottom:12px}
.tcard-sub{font-size:15px;line-height:1.6;color:var(--fg-muted);max-width:560px;margin-bottom:22px}
.tcard-go{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;font-variation-settings:'wdth' 125;font-stretch:125%;
  color:var(--fg-subtle);transition:color var(--micro)}
.tcard-go .arw{transition:transform var(--micro);display:inline-block}
.tcard:hover .tcard-go{color:var(--fg)}
.tcard:hover .tcard-go .arw{transform:translateX(4px)}

/* ═══════════════════════════════════════════════════════════════
   HOME HERO
   ═══════════════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--hdr-h) + 40px) var(--gut) 96px;
}
.corner{position:absolute;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap}
.corner.tl{top:calc(var(--hdr-h) + 26px);left:var(--gut)}
.corner.tr{top:calc(var(--hdr-h) + 26px);right:var(--gut)}
.hero-mark{width:clamp(250px,34vw,440px)}
.hero-mark img{width:100%;height:auto;filter:drop-shadow(0 10px 44px rgba(0,0,0,.5))}
.hero .mrule{margin:44px auto 34px}
.hero .status{margin-bottom:44px}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}

/* home hero · copy-led (v2) */
.hero-kicker{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--fg-subtle);line-height:1.9;max-width:820px;margin-bottom:30px}
.hero-title{display:flex;flex-direction:column;gap:8px;
  font-size:clamp(27px,4.3vw,56px);line-height:1.1;letter-spacing:.005em;
  color:var(--fg);margin-bottom:30px}
.hero-title .sig{color:var(--accent-bright)}
.hero-sub{font-size:clamp(15px,1.6vw,17px);line-height:1.7;color:var(--fg-muted);
  max-width:620px;margin:0 auto 44px}
@media (max-width:640px){
  .hero-kicker{letter-spacing:.18em;font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL · long-form text pages
   ═══════════════════════════════════════════════════════════════ */
.legal{max-width:760px;margin:0 auto;padding:64px var(--gut) 104px}
.legal-head{margin-bottom:52px}
.legal-head h1{font-size:clamp(26px,3.4vw,40px);line-height:1.08;margin-bottom:18px}
.legal-head .updated{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-faint)}
.legal-head .updated::before{content:"";width:5px;height:5px;background:var(--accent-bright);border-radius:1px}
.legal h2{font-size:17px;line-height:1.3;margin:46px 0 14px}
.legal p{color:var(--fg-muted);margin-bottom:14px;line-height:1.75}
.legal ul{margin:0 0 14px 20px;color:var(--fg-muted)}
.legal li{margin-bottom:8px;line-height:1.7}
.legal a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(236,229,203,.35);transition:text-decoration-color var(--micro)}
.legal a:hover{text-decoration-color:var(--fg)}
.legal strong{color:var(--fg-primary);font-weight:600}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.ftr{position:relative;z-index:1;border-top:1px solid var(--border-subtle);
  background:rgba(23,23,23,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ftr-top{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:30px var(--gut)}
.ftr-brand{display:flex;align-items:center;text-decoration:none;flex:none}
.ftr-brand img{height:18px;width:auto;opacity:.9;transition:opacity var(--micro)}
.ftr-brand:hover img{opacity:1}
.ftr-nav{display:flex;align-items:center;gap:4px 22px;flex-wrap:wrap;flex:1;min-width:0}
.ftr-nav a{font-size:12px;font-weight:500;color:var(--fg-subtle);text-decoration:none;
  white-space:nowrap;transition:color var(--micro)}
.ftr-nav a:hover{color:var(--fg)}
.ftr-btm{display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;
  padding:16px var(--gut);border-top:1px solid rgba(47,47,47,.8)}
.ftr-btm img{height:15px;width:auto;opacity:.35}
.ftr-legal{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ftr-legal a{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-faint);text-decoration:none;white-space:nowrap;
  transition:color var(--micro)}
.ftr-legal a:hover{color:var(--fg)}
.ftr-in{max-width:1320px;margin:0 auto}

/* ═══════════════════════════════════════════════════════════════
   REVEAL MOTION
   ═══════════════════════════════════════════════════════════════ */
html.motion .reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--enter),transform var(--enter)}
html.motion .reveal.in{opacity:1;transform:translateY(0)}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1160px){
  .nav{display:none}
  .burger{display:flex}
}
@media (max-width:640px){
  :root{--hdr-h:72px;--hdr-h-scrolled:60px}
  .brand img{height:19px}
  .hdr-cta .btn-sm{padding:9px 14px;font-size:10px}
  .hero-mark{width:clamp(210px,62vw,320px)}
  .monolith h1{letter-spacing:.01em}
  .corner{letter-spacing:.18em}
  .ftr-top{flex-direction:column;align-items:flex-start;gap:22px}
}
@media (max-width:400px){
  .hdr-cta .btn-sm .arw{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
