/* APOC — The Resistance
   1983 enterprise workstation, lights down: warm charcoal panels, hard bevels,
   navy title bars, nothing rounded, nothing soft. The greys are pulled from the
   stone in the brand plates so the artwork sits in the page instead of on it.
   The only colour that breaks the office is the ember orange. Boring on purpose,
   so the orange lands.

   Motion and the sigil treatment live in effects.css. */

:root {
  --paper:      #1a1714;   /* desktop — warm charcoal, the stone in shadow */
  --panel:      #24201c;   /* window body */
  --panel-2:    #2b2621;
  --chrome:     #332d27;   /* button face */
  --bevel-hi:   #4e463c;
  --bevel-lo:   #0d0b09;
  --rule:       #080706;

  --ink:        #ece5d9;   /* warm off-white, not pure */
  --ink-dim:    #b4a897;
  --ink-faint:  #837767;

  --navy:       #15171f;   /* title bars — blue pulled down into the charcoal */
  --navy-2:     #1e2433;

  --ember:      #fe5900;   /* on charcoal the true orange reads clean */
  --ember-hot:  #ff6a1a;   /* glows and sigils */

  /* The drop palette, pulled straight off the pixel art: the teal of the city
     behind her, the purple of the jacket, the pink of the bow. Scoped to the
     announcement — the rest of the site stays ember, so the drop reads as a
     different transmission rather than a redesign. */
  --teal:       #2ee6e0;
  --teal-deep:  #0e6b73;
  --purple:     #a35cf0;
  --purple-deep:#3b1a63;
  --pink:       #ff5fa8;
  --night:      #170f2b;   /* purple-shifted panel ground */

  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --wrap: 74rem;
  --gutter: clamp(1rem, 3vw, 2rem);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ember); text-underline-offset: 2px; }
a:hover { background: var(--ember); color: #180700; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 46rem; }

/* ================= bevels: the whole visual language ================= */

.win {
  background: var(--panel);
  border: 1px solid var(--rule);
  box-shadow:
    inset 1px 1px 0 var(--bevel-hi),
    inset -1px -1px 0 var(--bevel-lo),
    3px 3px 0 rgba(0, 0, 0, 0.45);
}

.win-bar {
  background: linear-gradient(90deg, var(--navy), var(--navy-2));
  color: #cfc6b7;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.win-bar .dots { margin-left: auto; display: flex; gap: 3px; }
.win-bar .dots i {
  width: 11px; height: 11px;
  background: var(--chrome);
  border: 1px solid var(--rule);
  box-shadow: inset 1px 1px 0 var(--bevel-hi);
  display: block;
}
.win-body { padding: clamp(1.1rem, 2.5vw, 2rem); }

.inset {
  background: #15120f;
  border: 1px solid var(--rule);
  box-shadow: inset 1px 1px 0 var(--bevel-lo), inset -1px -1px 0 var(--bevel-hi);
  padding: 1rem;
}

/* ================= chrome: menu bar ================= */

.site-header {
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo);
  position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 2.9rem; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.brand:hover { background: none; color: var(--ink); }
.brand img { width: 20px; height: 20px; }
.brand-text { display: flex; align-items: baseline; gap: 0.5rem; }
.brand-parent { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; }
.brand-unit {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-faint);
}

.site-nav { display: flex; gap: 0.15rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  padding: 0.3rem 0.6rem;
}
.site-nav a:hover { background: var(--navy-2); color: #fff; }
.site-nav a[aria-current="page"] { background: var(--panel-2); box-shadow: inset 1px 1px 0 var(--bevel-lo); }

/* ================= buttons ================= */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--chrome);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  border: 1px solid var(--rule);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
}
.btn:hover { background: #3e372f; color: var(--ink); }
.btn:active { box-shadow: inset 1px 1px 0 var(--bevel-lo); transform: translate(1px, 1px); }
.btn-primary { background: var(--ember); color: #180700; border-color: #a03700; }
.btn-primary:hover { background: #ff7a33; color: #180700; }
.site-nav .btn { padding: 0.35rem 0.8rem; }

/* ================= type ================= */

h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; }
h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0 0 0.9rem; }
h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 0 0 0.7rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; font-weight: 600; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.05rem; color: var(--ink-dim); }

.label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 0.75rem; display: block;
}
.label-hot { color: var(--ember); }

main { display: block; padding: clamp(1.25rem, 3vw, 2.25rem) 0 0; }
section { padding: 0 0 clamp(1.25rem, 3vw, 2.25rem); }
.page-head { padding: clamp(1.25rem, 3vw, 2rem) 0 1.25rem; }

/* ================= hero ================= */

.hero { padding: clamp(1.25rem, 3vw, 2.25rem) 0; }
.hero-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.35fr 1fr; align-items: stretch; } }
.hero h1 { max-width: 16ch; }
.hero-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-plate { position: relative; overflow: hidden; min-height: 15rem; flex: 1 1 auto; }
/* a viewer window is title bar + image, nothing else */
.win:has(> .hero-plate) { display: flex; flex-direction: column; }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; }
.hero-shell { display: flex; flex-direction: column; }
.hero-shell .win-body { flex: 1; display: flex; flex-direction: column; }

/* ================= spec table ================= */

.spec { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.76rem; }
.spec th, .spec td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid #38322b; }
.spec th { color: var(--ink-faint); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; width: 12rem; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec td b { color: var(--ember); font-weight: 700; }

/* ================= panels grid ================= */

.grid-3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.sigil { width: 42px; height: 42px; margin-bottom: 1rem; }

/* ================= command rows ================= */

.cmd-row {
  display: grid; gap: 0.4rem 1.5rem; grid-template-columns: 1fr;
  padding: 0.9rem 0; border-bottom: 1px solid #38322b;
}
@media (min-width: 46rem) { .cmd-row { grid-template-columns: 13rem 1fr; } }
.cmd-row:last-child { border-bottom: 0; }
.cmd-name { font-family: var(--mono); font-weight: 600; color: var(--ember); margin: 0; font-size: 0.85rem; }
.cmd-row p { margin: 0 0 0.4rem; color: var(--ink-dim); }
.cmd-row p:last-child { margin: 0; }
.limit { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); }
.limit::before { content: "LIMITS: "; color: var(--ember); }

/* ================= lists ================= */

ul, ol { padding-left: 1.15rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }
.plain { list-style: none; padding-left: 0; }
.plain li { padding-left: 1.6rem; position: relative; }
.plain li::before { content: "\25B8"; position: absolute; left: 0; color: var(--ember); font-family: var(--mono); }
.no li::before { content: "\00d7"; color: var(--ink-faint); }

/* ================= qa ================= */

.qa { padding: 1.1rem 0; border-bottom: 1px solid #38322b; }
.qa:last-of-type { border-bottom: 0; }
.qa h2 { font-size: 1rem; margin-bottom: 0.4rem; }
.qa p { color: var(--ink-dim); margin: 0; }

/* ================= socials ================= */

.socials { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .socials { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.social {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.85rem 1rem; text-decoration: none; color: var(--ink);
  background: var(--chrome); border: 1px solid var(--rule);
  box-shadow: inset 1px 1px 0 var(--bevel-hi), inset -1px -1px 0 var(--bevel-lo);
}
.social:hover { background: var(--ember); color: #180700; }
.social:hover .social-handle { color: rgba(255,255,255,0.8); }
.social-name { font-family: var(--mono); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.social-handle { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }

/* ================= split ================= */

.split { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 17rem; } }
figure { margin: 0; }

/* ================= footer / status bar ================= */

.site-footer { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.footer-cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .footer-cols { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-links { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-links a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-dim); text-decoration: none;
}
.footer-links a:hover { background: var(--navy-2); color: #fff; }

.statusbar {
  background: var(--chrome);
  border-top: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--bevel-hi);
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim);
}
.statusbar .wrap { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.statusbar span {
  border: 1px solid var(--bevel-lo);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.35);
  padding: 0.15rem 0.6rem;
}
.statusbar span:first-child { flex: 1; }

@media (max-width: 40rem) {
  .site-nav { width: 100%; margin-left: 0; }
  .win-body { padding: 1rem; }
}

/* ================= telemetry readout ================= */

.stats { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 34rem) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 54rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { background: #15120f; padding: 1rem 1.1rem; }
.stat b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ember);
  letter-spacing: -0.02em;
}
.stat span {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}
.stat.muted b { color: var(--ink); }
.footnote { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint); margin: 0.9rem 0 0; }

/* ================= the drop: teal + purple =================
   One announcement, three surfaces — the always-on bar, the first-visit panel,
   and the block on the home page. All three share this palette and the hard
   pixel edges of the art, so they read as one transmission cutting across the
   ember chrome. */

/* ---------- the static bar: never dismissible, on every page ---------- */

.alertbar {
  background: linear-gradient(90deg, var(--purple-deep) 0%, #2a1a5e 45%, var(--teal-deep) 100%);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 rgba(46,230,224,0.45), inset 0 -1px 0 var(--bevel-lo);
}
.alertbar .wrap {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding-top: 0.45rem; padding-bottom: 0.45rem;
}
.alertbar-thumb {
  width: 22px; height: 22px; flex: none;
  image-rendering: pixelated;
  border: 1px solid var(--teal-deep);
  box-shadow: 0 0 6px rgba(163,92,240,0.6);
  object-fit: cover; object-position: 50% 18%;
}
.alertbar-tag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--teal); color: #06232a;
  padding: 0.15rem 0.5rem; border: 1px solid #0b4f55; flex: none;
}
.alertbar p {
  margin: 0; flex: 1 1 18rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: #e6dcff;
}
.alertbar a {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); text-decoration: none; flex: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.alertbar a:hover { background: var(--teal); color: #06232a; }

/* ---------- shared neon shell ---------- */

/* Windows carrying the drop swap the navy title bar for the purple→teal one and
   trade the black drop shadow for a glow. Everything else about the window —
   bevels, dots, padding — is untouched. */
.neon {
  background: var(--night);
  box-shadow:
    inset 1px 1px 0 rgba(163,92,240,0.5),
    inset -1px -1px 0 var(--bevel-lo),
    3px 3px 0 rgba(46,230,224,0.18);
}
.neon > .win-bar {
  background: linear-gradient(90deg, var(--purple-deep), #2a1a5e 55%, var(--teal-deep));
  color: #b9f6f3;
  box-shadow: inset 0 1px 0 rgba(46,230,224,0.3);
}
.neon .label-hot { color: var(--teal); }
.neon a { color: var(--teal); }
.neon a:hover { background: var(--teal); color: #06232a; }
/* Order matters: these two selectors have equal specificity and a primary
   button carries both classes, so the primary rules must come last. */
.neon .btn { background: #241546; color: #e6dcff; border-color: #0d0718; }
.neon .btn:hover { background: #331d61; color: #fff; }
.neon .btn-primary {
  background: var(--purple); color: #180029; border-color: #5e2a95;
}
.neon .btn-primary:hover { background: #b878ff; color: #180029; }
.neon .footnote { color: #8f83b5; }

#drop { scroll-margin-top: 6.5rem; }
.drop-h { max-width: 24ch; font-size: clamp(1.4rem, 3vw, 2.1rem); }

/* ---------- the art ---------- */

/* Pixel art, so scale it with hard edges — smoothing it is the one thing that
   would make it look cheap. The frame is a teal rule with a purple bloom. */
.plate {
  position: relative;
  border: 1px solid var(--teal-deep);
  box-shadow: 0 0 0 1px rgba(46,230,224,0.25), 0 0 22px rgba(163,92,240,0.35);
  background: #0b0718;
  overflow: hidden;
}
.plate img {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;
}
/* the same CRT wash the hero plate wears, tinted to the drop palette */
.plate::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.14) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 45%, transparent 55%, rgba(23,15,43,0.55));
}

/* ---------- stay tuned ---------- */

.drop-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 52rem) { .drop-grid { grid-template-columns: 22rem 1fr; align-items: start; } }

.soon { display: flex; flex-direction: column; }
.soon p { color: #cdc2ea; }
.soon-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.25rem 0 1.25rem; }

.soon-warn {
  margin: auto 0 0; padding: 0.85rem 1rem;
  background: #0f0a1f;
  border: 1px solid #2a1a4d;
  border-left: 3px solid var(--pink);
  font-size: 0.92rem;
  color: #cdc2ea !important;
}
.soon-warn strong { color: var(--pink); }

/* ---------- the pledge ---------- */

/* The number is the loudest thing in the panel on purpose: it is the only
   promise on the page that costs us something, so it should be the hardest one
   to claim we never made. */
.pledge {
  display: grid; gap: 1px; margin-top: 1.5rem;
  background: #2a1a4d; border: 1px solid #2a1a4d;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) { .pledge { grid-template-columns: 14rem 1fr; } }

.pledge-num {
  background: linear-gradient(160deg, var(--purple-deep), #0f0a1f 70%);
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; justify-content: center;
}
.pledge-num b {
  display: block;
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal);
  text-shadow: 0 0 18px rgba(46,230,224,0.45);
}
.pledge-num span {
  display: block; margin-top: 0.6rem;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #b9a8e0;
}

.pledge-terms { background: #0f0a1f; padding: 1.25rem; }
.pledge-terms li { color: #cdc2ea; }
.pledge-terms li strong { color: var(--ink); }
.pledge-terms .plain li::before { color: var(--teal); }

.hot { color: var(--teal); }

/* ---------- crisis lines ---------- */

.crisis {
  margin-top: 1.5rem; padding: 1rem;
  background: #0f0a1f;
  border: 1px solid #2a1a4d;
  box-shadow: inset 1px 1px 0 var(--bevel-lo), inset -1px -1px 0 rgba(163,92,240,0.3);
}
.crisis-row {
  display: grid; gap: 0.15rem; align-items: baseline;
  padding: 0.5rem 0; border-bottom: 1px solid #2a1a4d;
  text-decoration: none; color: var(--ink);
}
/* Two columns once there is room; stacked below that, so the number is never
   squeezed into a hyphenated mess on a phone. */
@media (min-width: 40rem) {
  .crisis-row { grid-template-columns: minmax(0, 14rem) 1fr; gap: 0.15rem 1.25rem; }
}
.crisis-row:last-child { border-bottom: 0; }
.crisis-row:hover { background: var(--teal); color: #06232a; }
.crisis-row:hover .crisis-what { color: #06232a; }
.crisis-num {
  font-family: var(--mono); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.crisis-what { font-family: var(--mono); font-size: 0.72rem; color: #8f83b5; }

/* ---------- first-visit panel =================
   Shown once per browser by the inline script in the page footer. Hidden with
   the `hidden` attribute, so with JavaScript off it never appears at all — and
   everything it says also lives in the bar above and the panel on the home
   page, so nothing here is the only copy of anything. */

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.modal-shade { position: absolute; inset: 0; background: rgba(10,6,20,0.85); }
.modal-win {
  position: relative; width: min(30rem, 100%);
  max-height: calc(100vh - 2 * var(--gutter)); overflow-y: auto;
  box-shadow:
    inset 1px 1px 0 rgba(163,92,240,0.5),
    inset -1px -1px 0 var(--bevel-lo),
    0 0 40px rgba(46,230,224,0.22),
    6px 6px 0 rgba(0,0,0,0.6);
}
.modal-win > .win-bar { position: sticky; top: 0; z-index: 2; }
/* The art sits flush under the title bar: banner first, words second. */
.modal-win .plate { border-width: 0 0 1px; box-shadow: none; }
.modal-win .plate img { max-height: 15rem; object-fit: cover; object-position: 50% 22%; }
.modal-win h2 { font-size: clamp(1.2rem, 3vw, 1.55rem); max-width: 22ch; }
/* The two-column crisis row keys off the viewport, but the panel is narrow at
   every viewport — so inside it, always stack. */
.modal-win .crisis-row { grid-template-columns: 1fr; }
.modal-win p { color: #cdc2ea; }
.modal-warn { color: var(--ink) !important; }
.modal-warn strong { color: var(--pink); }
.modal-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.modal-actions .btn { font-family: var(--mono); cursor: pointer; }
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .modal-win { animation: boot 0.2s steps(3) backwards; }
}