/* 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 */

  --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; }