@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62.5..125,400..800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   FANTOM DEFENSE — BASE
   assets/css/base.css
   --------------------------------------------------------------------------
   Reset, document defaults, container, 12-col grid, type primitives,
   motion + focus policy. Consumes tokens.css. Loaded second.

   Canon §9 rules enforced here and everywhere downstream:
     · ZERO border-radius. Sharp corners. No exceptions.
     · No box-shadows.
     · No gradients except the film scrims defined in tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;          /* canon: zero radius, system-wide */
  border-style: solid;
  border-width: 0;
  border-color: var(--rule);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
  -moz-tab-size: 2;
  tab-size: 2;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, pre, fieldset, legend {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object, picture {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  margin: 0;
}

button, [type='button'], [type='submit'], [type='reset'], summary {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: inherit;
}

input, textarea {
  appearance: none;
  -webkit-appearance: none;
}

input::-webkit-search-cancel-button,
input::-webkit-search-decoration {
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

th {
  font-weight: inherit;
  text-align: left;
}

hr {
  border: 0;
  height: var(--hairline-w);
  background: var(--rule);
  margin: 0;
}

fieldset {
  border: 0;
}

address {
  font-style: normal;
}

sup, sub {
  font-size: 0.62em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* --------------------------------------------------------------------------
   2. DOCUMENT
   -------------------------------------------------------------------------- */

html,
body {
  background-color: var(--ink);
}

body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--t-17);
  font-weight: var(--wght-regular);
  font-stretch: var(--wdth-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-normal);
  color: var(--fg);
  background-color: var(--bg);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Locks page scroll while the drawer / search overlay is open.
   Toggled by assets/js/site.js. */
body.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. CONTAINER + 12-COL GRID
   --------------------------------------------------------------------------
   .container  max content width 1600px, 24px gutters (canon §9)
   .grid       12 columns, 24px gap
   .c-N        span N of 12 (desktop)
   .cs-N       start at column N
   .c-md-N     span N at <=1024px      .c-sm-N   span N at <=767px
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--flush {
  padding-inline: 0;
  max-width: var(--container-max);
}

.container--narrow {
  max-width: calc(1080px + (var(--gutter) * 2));
}

.container--text {
  max-width: calc(760px + (var(--gutter) * 2));
}

/* Break a child out of the container to full viewport width. */
.u-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid--tight { gap: var(--bento-gap); }
.grid--rows-tight { row-gap: var(--s-5); }

.c-1  { grid-column-end: span 1;  }
.c-2  { grid-column-end: span 2;  }
.c-3  { grid-column-end: span 3;  }
.c-4  { grid-column-end: span 4;  }
.c-5  { grid-column-end: span 5;  }
.c-6  { grid-column-end: span 6;  }
.c-7  { grid-column-end: span 7;  }
.c-8  { grid-column-end: span 8;  }
.c-9  { grid-column-end: span 9;  }
.c-10 { grid-column-end: span 10; }
.c-11 { grid-column-end: span 11; }
.c-12 { grid-column-end: span 12; }

.cs-1  { grid-column-start: 1;  }
.cs-2  { grid-column-start: 2;  }
.cs-3  { grid-column-start: 3;  }
.cs-4  { grid-column-start: 4;  }
.cs-5  { grid-column-start: 5;  }
.cs-6  { grid-column-start: 6;  }
.cs-7  { grid-column-start: 7;  }
.cs-8  { grid-column-start: 8;  }
.cs-9  { grid-column-start: 9;  }
.cs-10 { grid-column-start: 10; }
.cs-11 { grid-column-start: 11; }
.cs-12 { grid-column-start: 12; }

@media (max-width: 1024px) {
  .c-md-1  { grid-column-end: span 1;  }
  .c-md-2  { grid-column-end: span 2;  }
  .c-md-3  { grid-column-end: span 3;  }
  .c-md-4  { grid-column-end: span 4;  }
  .c-md-5  { grid-column-end: span 5;  }
  .c-md-6  { grid-column-end: span 6;  }
  .c-md-7  { grid-column-end: span 7;  }
  .c-md-8  { grid-column-end: span 8;  }
  .c-md-9  { grid-column-end: span 9;  }
  .c-md-10 { grid-column-end: span 10; }
  .c-md-11 { grid-column-end: span 11; }
  .c-md-12 { grid-column-end: span 12; }
  .cs-md-1 { grid-column-start: 1; }
  .cs-md-7 { grid-column-start: 7; }
}

@media (max-width: 767px) {
  /* Below 768 every grid child fills the row unless told otherwise. */
  .grid > * { grid-column: 1 / -1; }
  .c-sm-6  { grid-column-end: span 6;  }
  .c-sm-12 { grid-column-end: span 12; }
  .cs-sm-1 { grid-column-start: 1; }
}

/* --------------------------------------------------------------------------
   4. TYPE PRIMITIVES
   --------------------------------------------------------------------------
   Canon §9 scale: 11 / 13 / 15 / 17 / 21 / 28 / 40 / 64 / 96 / 140.
   Display type is Archivo heavy + slightly EXPANDED (wdth 112), uppercase,
   leading 0.92, tracking -0.02em. Mono is JetBrains Mono, ALWAYS uppercase,
   ALWAYS +0.12em, 11–13px.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.display, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-display);
  font-weight: var(--wght-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
  color: var(--fg);
}

/* --- Display: the hero-class headline. Uppercase, heavy, expanded. ------ */
.display {
  font-size: var(--t-96);
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  text-transform: uppercase;
}

.display--xl { font-size: var(--t-140); }
.display--lg { font-size: var(--t-96);  }
.display--md { font-size: var(--t-64);  }

/* --- Headings ----------------------------------------------------------- */
h1, .h1 {
  font-size: var(--t-64);
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  text-transform: uppercase;
}

h2, .h2 {
  font-size: var(--t-40);
  font-weight: var(--wght-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h3, .h3 {
  font-size: var(--t-28);
  font-weight: var(--wght-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h4, .h4 {
  font-size: var(--t-21);
  font-weight: var(--wght-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h5, .h5 {
  font-size: var(--t-17);
  font-weight: var(--wght-semi);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-normal);
}

/* Uppercase modifier for any heading that needs the military register. */
.is-caps {
  text-transform: uppercase;
  letter-spacing: var(--tr-hero);
  font-weight: var(--wght-heavy);
  font-stretch: var(--wdth-wide);
}

/* --- Body --------------------------------------------------------------- */
p { text-wrap: pretty; }

.lede {
  font-size: var(--t-21);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-snug);
  color: var(--fg);
  max-width: 62ch;
}

.body   { font-size: var(--t-17); line-height: var(--lh-body); max-width: 68ch; }
.body-s { font-size: var(--t-15); line-height: var(--lh-body); max-width: 68ch; }
.muted  { color: var(--fg-muted); }
.faint  { color: var(--fg-faint); }

.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.6em; }
.prose > :first-child { margin-top: 0; }
.prose strong { font-weight: var(--wght-semi); }
.prose em { font-style: italic; }
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: var(--hairline-w);
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--tx-fast);
}
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 0; }
.prose ul > li,
.prose ol > li {
  position: relative;
  padding-left: var(--s-5);
  margin-top: 0.5em;
}
.prose ul > li::before {
  content: '+';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--fg-muted);
}
.prose ol { counter-reset: prose-ol; }
.prose ol > li::before {
  counter-increment: prose-ol;
  content: counter(prose-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: var(--tr-mono);
  color: var(--fg-muted);
}

/* --- Mono --------------------------------------------------------------- */
.mono,
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-weight: var(--wght-regular);
  font-size: var(--t-13);
  line-height: var(--lh-mono);
  letter-spacing: var(--tr-mono);
  font-variant-ligatures: none;
}

.mono-11 { font-size: var(--t-11); }
.mono-15 { font-size: var(--t-15); }

/* THE EYEBROW. Mono, uppercase, +0.12em. Sits above every section heading,
   above hero headlines, and labels every spec block. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--wght-medium);
  font-size: var(--t-11);
  line-height: var(--lh-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.eyebrow--fg    { color: var(--fg); }
.eyebrow--ember { color: var(--ember); }   /* live/armed contexts only */
.eyebrow--13    { font-size: var(--t-13); }

/* Eyebrow with a leading hairline tick — used for numbered/indexed labels. */
.eyebrow--tick {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow--tick::before {
  content: '';
  width: 18px;
  height: var(--hairline-w);
  background: var(--rule-strong);
  flex: none;
}

/* A designation string: WRAITH. Always mono, always uppercase.
   Per RULE ZERO, no type designation is used — see ARSENAL_CANON.md. */
.designation {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--wght-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Numerals in tables and stats align. */
.tabular,
.spec-table,
.stat-row {
  font-variant-numeric: tabular-nums;
}

/* --- Utilities ---------------------------------------------------------- */
.u-caps      { text-transform: uppercase; }
.u-ember     { color: var(--ember); }
.u-hud       { color: var(--hud); }
.u-nowrap    { white-space: nowrap; }
.u-balance   { text-wrap: balance; }
.u-center    { text-align: center; }
.u-right     { text-align: right; }
.u-maxw-none { max-width: none; }

.u-stack > * + *      { margin-top: var(--stack); }
.u-stack-sm > * + *   { margin-top: var(--s-3); }
.u-stack-lg > * + *   { margin-top: var(--s-7); }

.u-hide { display: none !important; }
@media (max-width: 1024px) { .u-hide-md { display: none !important; } }
@media (max-width: 767px)  { .u-hide-sm { display: none !important; } }
@media (min-width: 768px)  { .u-only-sm { display: none !important; } }

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. FOCUS  — ember ring, everywhere, keyboard only.
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: var(--focus-ring) solid var(--ember);
  outline-offset: var(--focus-offset);
}

/* Media and full-bleed interactive blocks take an inset ring so the ring is
   never clipped by an overflow:hidden ancestor. */
a:focus-visible > img,
a:focus-visible > video {
  outline: none;
}

.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  background: var(--ember);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-13);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--tx-fast);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. MOTION POLICY
   --------------------------------------------------------------------------
   Durations already collapse to 1ms in tokens.css under reduced-motion.
   This block additionally kills parallax/looping decoration and forces every
   scroll-reveal to its resting state so no content is ever hidden.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   7. PRINT — spec sheets get printed and taken into meetings.
   -------------------------------------------------------------------------- */

@media print {
  html, body { background: #fff; color: #000; }
  .nav, .mega, .search-overlay, .drawer, .footer, .hero__media, video {
    display: none !important;
  }
  .section { padding-block: 12mm; }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-family: var(--font-mono);
    font-size: 9pt;
  }
}