/* Wargame Nexus — "night operations" identity.
   Single committed dark look: deep navy-black like a darkened ops room, steel greys for text,
   one signal-amber accent (the colour of a red-filtered map light / cockpit warning).
   Archivo Expanded for display, Hanken Grotesk for reading, JetBrains Mono for data labels. */
:root{
  --bg:#070c12; --bg-2:#0c141d; --panel:#111b26; --line:#1f2c3a; --line-2:#2c3d4f;
  --fg:#e8edf2; --fg-2:#a9b6c3; --fg-3:#6f8193;
  --amber:#f2a93b; --amber-2:#ffcf7d; --amber-ink:#1a1206;
  --red:#ff6b5e; --cyan:#62c7e8; --green:#6fd39a;
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:4px; --max:1200px;
  /* aliases used by inline diagrams */
  --ink:var(--fg); --rule:var(--line-2); --muted:var(--fg-3); --friend:var(--cyan); --friend-fill:rgba(98,199,232,.1);
  --hostile:var(--red); --hostile-fill:rgba(255,107,94,.1); --neutral:var(--green); --neutral-fill:rgba(111,211,154,.1);
  --unknown:var(--amber); --unknown-fill:rgba(242,169,59,.12); --sheet:var(--panel); --grid:var(--line);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber)}
::selection{background:var(--amber);color:var(--amber-ink)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.02;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.6rem,7.4vw,6rem);font-stretch:125%;letter-spacing:-.02em;text-transform:uppercase}
h2{font-size:clamp(2rem,4.6vw,3.6rem);font-stretch:118%;letter-spacing:-.015em;text-transform:uppercase}
h3{font-size:1.3rem;font-weight:600;letter-spacing:-.005em;line-height:1.2}
p{margin:0}
.prose{max-width:62ch;display:grid;gap:1rem;color:var(--fg-2)}
.prose strong,.prose h3{color:var(--fg)}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);display:inline-flex;align-items:center;gap:.6rem}
.label::before{content:"";width:18px;height:1px;background:currentColor}
.muted{color:var(--fg-3)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--amber-ink);padding:.6rem 1rem;z-index:50}
.skip:focus{left:16px}

/* ---------- header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .3s,border-color .3s;border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px)}
header.site.solid,body:not(.has-hero) header.site{background:rgba(7,12,18,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:.7rem;color:var(--fg);text-decoration:none}
.brand svg{color:var(--amber)}
.nav{display:flex;gap:2rem;align-items:center}
.nav a{font-size:.92rem;font-weight:500;color:var(--fg-2);text-decoration:none;position:relative;padding-block:.4rem}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--amber);transition:right .25s ease}
.nav a:hover{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a.cta{background:var(--amber);color:var(--amber-ink);padding:.6rem 1.1rem;border-radius:var(--radius);font-weight:600}
.nav a.cta::after{display:none}
.nav a.cta:hover{background:var(--amber-2)}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--fg);font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.55rem .8rem;border-radius:var(--radius);cursor:pointer}
main{padding-top:0}
body:not(.has-hero) main{padding-top:72px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--body);font-weight:600;font-size:.95rem;text-decoration:none;padding:.95rem 1.4rem;border-radius:var(--radius);border:1px solid var(--amber);background:var(--amber);color:var(--amber-ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{background:var(--amber-2);border-color:var(--amber-2);transform:translateY(-1px)}
.btn::after{content:"→";transition:transform .2s}
.btn:hover::after{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--fg);background:rgba(255,255,255,.04)}
.actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- cinematic hero ---------- */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-top:72px}
.hero .media{position:absolute;inset:0;z-index:-2}
.hero .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:drift 24s ease-in-out infinite alternate}
.hero .media canvas{width:100%;height:100%;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(7,12,18,.55) 0%,rgba(7,12,18,.25) 35%,rgba(7,12,18,.85) 78%,var(--bg) 100%),
  linear-gradient(90deg,rgba(7,12,18,.85) 0%,rgba(7,12,18,.2) 70%)}
.hero .wrap{width:100%;padding-block:4rem 4.5rem}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--fg-2);max-width:46ch;margin-top:1.6rem}
.hero .credit{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:1rem;font-family:var(--mono);font-size:.62rem;color:var(--fg-3);max-width:40ch;text-align:right}
.hero.short{min-height:min(62vh,560px)}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}

/* ---------- stat strip ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:2rem 1.5rem 2rem 0;display:grid;gap:.4rem;border-right:1px solid var(--line)}
.stat + .stat{padding-left:1.5rem}
.stat:last-child{border-right:0}
.stat b{font-family:var(--display);font-stretch:125%;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1}
.stat span{font-size:.88rem;color:var(--fg-3);max-width:28ch}

/* ---------- sections ---------- */
section{padding-block:clamp(4.5rem,9vw,8rem);position:relative}
section.alt{background:var(--bg-2)}
.sec-head{display:grid;gap:1rem;margin-bottom:3rem;max-width:60rem}
.sec-head .prose{margin-top:.4rem}
.page-head{padding-block:clamp(4rem,9vw,7rem) clamp(2rem,5vw,3.5rem);display:grid;gap:1.2rem;position:relative}
.page-head .lede{font-size:1.25rem;color:var(--fg-2);max-width:55ch}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.split.top{align-items:start}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;display:grid;gap:.9rem;align-content:start;transition:border-color .25s,transform .25s,background .25s}
.panel p{color:var(--fg-2)}
.panel ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem;color:var(--fg-2)}
a.panel{text-decoration:none;color:var(--fg)}
a.panel:hover{border-color:var(--amber);transform:translateY(-3px);background:#14202d}
a.panel .more{font-family:var(--mono);font-size:.75rem;color:var(--amber);letter-spacing:.12em;text-transform:uppercase;margin-top:.4rem}
.idx{font-family:var(--mono);font-size:.75rem;color:var(--fg-3);letter-spacing:.12em}

/* domain cards: photo bleeds to the card edge */
.panel.domain{padding:0 0 1.8rem;overflow:hidden}
.panel.domain .photo{border:0;border-radius:0;margin-bottom:.4rem}
.panel.domain .photo figcaption{font-size:.58rem}
.panel.domain > :not(.photo){margin-inline:1.6rem}

/* image card */
.photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--panel);aspect-ratio:4/3;margin:0;max-width:100%}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.photo:hover img{transform:scale(1.03)}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem .8rem;font-family:var(--mono);font-size:.64rem;color:var(--fg-2);background:linear-gradient(transparent,rgba(7,12,18,.9))}
.photo.tall{aspect-ratio:4/5}
.photo .fallback{width:100%;height:100%}

blockquote{margin:0;padding:2rem 0 0;border-top:1px solid var(--amber);font-family:var(--display);font-stretch:110%;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.3;color:var(--fg);font-weight:500}
blockquote cite{display:block;margin-top:1.2rem;font-family:var(--mono);font-size:.72rem;font-style:normal;color:var(--fg-3);letter-spacing:.06em}

.pillars{display:grid;gap:1.4rem}
.pillar{display:grid;grid-template-columns:52px minmax(0,1fr);gap:1.1rem;align-items:start}
.pillar p{color:var(--fg-2)}
.pillar strong{color:var(--fg)}

/* APP-6 frames, reworked for dark */
.frame{width:44px;height:30px;display:grid;place-items:center;font-family:var(--mono);font-size:.68rem;font-weight:500;border:1.5px solid;border-radius:2px}
.f-friend{border-color:var(--cyan);color:var(--cyan);background:rgba(98,199,232,.08)}
.f-hostile{border-color:var(--red);color:var(--red);background:rgba(255,107,94,.08);transform:rotate(45deg) scale(.78);width:32px;height:32px}
.f-hostile b{transform:rotate(-45deg);font-weight:500}
.f-neutral{border-color:var(--green);color:var(--green);background:rgba(111,211,154,.08);width:32px;height:32px}
.f-unknown{border-color:var(--amber);color:var(--amber);background:rgba(242,169,59,.08);border-radius:50%;width:34px;height:34px}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid;border-left:1px solid var(--line-2)}
.timeline li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2rem;padding:1.6rem 0 1.6rem 2rem;position:relative}
.timeline li::before{content:"";position:absolute;left:-5px;top:2.15rem;width:9px;height:9px;background:var(--bg);border:2px solid var(--amber);border-radius:50%}
.timeline .yr{font-family:var(--display);font-stretch:125%;font-weight:700;font-size:1.7rem;color:var(--amber);font-variant-numeric:tabular-nums;line-height:1.2}
.timeline h3{margin-bottom:.4rem}
.timeline p{color:var(--fg-2);max-width:62ch}

.adj{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;margin-top:1.25rem}
.adj div{border-top:2px solid var(--amber);padding-top:1rem;display:grid;gap:.5rem;align-content:start}
.adj strong{font-family:var(--display);font-stretch:118%;font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.adj p{font-size:.95rem;color:var(--fg-2)}

/* rigour */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:1.4rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px minmax(0,1fr);gap:1.1rem}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--amber);border:1px solid var(--line-2);height:34px;display:grid;place-items:center;border-radius:2px}
.steps strong{font-family:var(--display);font-stretch:110%;font-size:1.15rem;display:block;line-height:1.25;margin-bottom:.2rem}
.steps p{font-size:.97rem;color:var(--fg-2)}
.checker{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;display:grid;gap:1rem;min-width:0;position:sticky;top:96px}
.checker label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.8rem;align-items:start;cursor:pointer;font-size:.97rem;color:var(--fg-2)}
.checker input{width:18px;height:18px;margin-top:.25rem;accent-color:var(--amber)}
.score{display:flex;align-items:center;gap:1rem;padding-top:1.2rem;border-top:1px solid var(--line);flex-wrap:wrap}
.meter{flex:1 1 160px;height:6px;background:var(--line);position:relative;border-radius:3px;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--red);transition:width .35s ease,background .35s}
.verdict{font-family:var(--mono);font-size:.8rem;color:var(--fg)}
.pit > div{display:grid;gap:.6rem;align-content:start;padding:1.8rem;border:1px solid var(--line);border-radius:var(--radius)}
.pit p{color:var(--fg-2)}

/* medical chain */
.chain{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.chain svg{min-width:720px;width:100%;height:auto;display:block}
.triage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.25rem}
.triage div{padding:1.2rem;border-radius:var(--radius);display:grid;gap:.4rem;align-content:start;background:var(--panel);border:1px solid var(--line);border-top:3px solid}
.triage b{font-family:var(--display);font-stretch:125%;font-size:1.6rem}
.triage span{font-size:.92rem;color:var(--fg-2)}
.t1{border-top-color:var(--red)!important}.t1 b{color:var(--red)}
.t2{border-top-color:var(--amber)!important}.t2 b{color:var(--amber)}
.t3{border-top-color:var(--green)!important}.t3 b{color:var(--green)}
.t4{border-top-color:var(--fg-3)!important}.t4 b{color:var(--fg-3)}

/* game card */
.card{background:linear-gradient(160deg,#16222f,#0d151e);border:1px solid var(--line-2);border-radius:var(--radius);padding:2.2rem;display:grid;gap:1.2rem;position:relative;overflow:hidden}
.card::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border:1px solid var(--line-2);transform:rotate(30deg)}
.card h3{font-family:var(--display);font-stretch:125%;font-size:2.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--amber)}
.card dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem 1.4rem;font-family:var(--mono);font-size:.8rem}
.card dt{color:var(--fg-3)}
.card dd{margin:0;color:var(--fg)}

/* news */
.news article{display:grid;grid-template-columns:170px minmax(0,1fr);gap:2rem;padding-block:2rem;border-bottom:1px solid var(--line)}
.news time{font-family:var(--mono);font-size:.78rem;color:var(--amber);padding-top:.3rem;letter-spacing:.08em}
.news h3{margin-bottom:.6rem;font-size:1.5rem}
.news .prose{gap:.7rem}

.reading{list-style:none;margin:0;padding:0;display:grid}
.reading li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line);color:var(--fg-2)}
.reading strong{color:var(--fg)}
.reading span{font-family:var(--mono);font-size:.75rem;color:var(--fg-3);white-space:nowrap}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.shot{margin:0;display:grid;gap:.6rem;align-content:start;min-width:0}
.shot.wide{grid-column:span 2;grid-row:span 2;grid-template-rows:minmax(0,1fr) auto}
.shot img,.shot .ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--line);border-radius:var(--radius);max-width:100%}
.shot.wide img,.shot.wide .ph{aspect-ratio:auto;height:100%;min-height:260px}
.shot .ph{display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#162434,transparent 60%),repeating-linear-gradient(135deg,var(--panel) 0 14px,#0e1822 14px 15px)}
.shot .ph .label{background:var(--bg);padding:.45rem .8rem;border:1px dashed var(--line-2);border-radius:2px}
.shot .ph .label::before{display:none}
.shot figcaption{font-family:var(--mono);font-size:.72rem;color:var(--fg-3)}

/* forms */
form.f{display:grid;gap:1.2rem}
.field{display:grid;gap:.45rem}
.field label{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3)}
.field input,.field select,.field textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line-2);padding:.85rem .95rem;width:100%;border-radius:var(--radius);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);outline:none}
.field textarea{min-height:150px;resize:vertical}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--fg-2)}
.check input{margin-top:.3rem;accent-color:var(--amber)}
.hp{position:absolute;left:-9999px}
.inline-form{display:flex;gap:.7rem;flex-wrap:wrap}
.inline-form input{flex:1 1 240px;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line-2);padding:.95rem 1rem;min-width:0;border-radius:var(--radius)}
.signup-band{padding-block:clamp(3rem,7vw,6rem)}
.signup{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.5rem;align-items:center;background:
  radial-gradient(ellipse at 100% 0%,rgba(242,169,59,.16),transparent 55%),var(--panel)}
.signup p{color:var(--fg-2)}

/* social */
.social{display:flex;gap:.6rem;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .85rem;border:1px solid var(--line-2);border-radius:var(--radius);color:var(--fg-2);text-decoration:none;font-size:.85rem;transition:border-color .2s,color .2s}
.social a:hover{border-color:var(--amber);color:var(--fg)}
.feeds .grid3{align-items:start}
.feed-card{gap:1.1rem}
.feed-head{display:flex;align-items:center;gap:.7rem;color:var(--amber)}
.feed-head h3{color:var(--fg)}
.feed-card .btn{justify-self:start}
.fb-wrap{background:var(--bg);border:1px solid var(--line);min-height:200px;overflow:hidden;border-radius:var(--radius)}

/* footer */
footer.site{border-top:1px solid var(--line);padding-block:3.5rem 2.5rem;background:var(--bg)}
footer.site .top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2.5rem;margin-bottom:2.5rem}
footer.site h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 1rem;font-weight:500}
footer.site nav{display:grid;gap:.55rem}
footer.site nav a{color:var(--fg-2);text-decoration:none;font-size:.95rem}
footer.site nav a:hover{color:var(--amber)}
footer.site .legal{border-top:1px solid var(--line);padding-top:1.5rem;display:grid;gap:.6rem;font-size:.78rem;color:var(--fg-3)}

/* reveal: content is visible at rest; motion is progressive */
@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  @keyframes rise{from{opacity:.55;transform:translateY(18px)}to{opacity:1;transform:none}}
}

@media (max-width:900px){
  .split,.signup,footer.site .top{grid-template-columns:minmax(0,1fr)}
  .grid2,.grid3{grid-template-columns:minmax(0,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-right:0;border-bottom:1px solid var(--line);padding:1.5rem 0!important}
  .adj,.triage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline li,.news article{grid-template-columns:minmax(0,1fr);gap:.4rem}
  .checker{position:static}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(7,12,18,.97);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.5rem max(20px,env(safe-area-inset-right,0px)) 1.2rem max(20px,env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a{padding-block:1rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav a.cta{margin-top:1rem;text-align:center;justify-content:center;border:0}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .credit{left:max(20px,env(safe-area-inset-left,0px));text-align:left}
}
@media (max-width:520px){
  .adj,.triage,.row2,.stats .wrap{grid-template-columns:minmax(0,1fr)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .shot.wide{grid-column:auto;grid-row:auto}
  .shot.wide img,.shot.wide .ph{aspect-ratio:4/3;height:auto;min-height:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}