@font-face { font-family: "Archivo"; font-weight: 400 700; font-stretch: 62% 125%; font-display: swap; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/assets/fonts/plex-mono-500-latin.woff2") format("woff2"); }

/* The Reservoir. Foundation pages are bone and grey on near-black in one narrow column.
   Two quiet accents keep a reader oriented: slate, the reservoir's water, for labels and
   file lines; and oxblood, the Foundation's own red, for the rules and the bar under each
   heading, never for text. Bright red belongs to the Chaos Insurgency and shows up only on
   its page and on the register's way in. */
:root {
  --bg: #0a0a09;
  --ink: #e6e3dc;      /* headings, 16:1 */
  --text: #cfcac1;     /* body, 12:1 */
  --muted: #a29d94;    /* secondary, 7:1 */
  --faint: #86817a;    /* small labels, 5:1 */
  --line: #262421;     /* hairlines */
  --water: #8fa9b4;    /* labels, file lines, link underlines, 7.5:1 */
  --oxblood: #7d1d15;  /* rules and heading bars only */
  --ci: #d01414;       /* Insurgency red: large type and lines */
  --ci-text: #e5483e;  /* Insurgency red for small text, 5:1 */
  --display: "Archivo", "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-color: #3a3733 var(--bg); }
body { background: var(--bg); color: var(--text); font: 17px/1.75 var(--body); -webkit-font-smoothing: antialiased; caret-color: var(--ink); }
::selection { background: var(--ink); color: var(--bg); }
a { color: var(--ink); text-decoration-thickness: 1px; text-decoration-color: var(--water); text-underline-offset: .24em; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; display: block; }
b { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip { position: absolute; left: 16px; top: -80px; z-index: 20; padding: 10px 16px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.col { width: min(640px, 100% - 32px); margin-inline: auto; }
.center { text-align: center; }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 17px/1 var(--display); font-stretch: 62%; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.brand img { width: 22px; height: 22px; }
.bar nav { display: flex; gap: 24px; }
.bar nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px/1 var(--display); font-stretch: 75%; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--ink); }

/* ---- Hero: one emblem in the dark ----
   Composed like the Insurgency's opening: a single subject in the middle, the quote in
   spaced caps under it, one small tag. forest.js draws the ring and the forest inside it.
   The vignette is neutral grey; the red one is the Insurgency's. */
.stage.night { background: radial-gradient(ellipse at 50% 40%, #1a1917 0%, var(--bg) 62%); padding: 48px 0 64px; }
.forest { display: block; width: clamp(260px, min(88vw, 100svh - 330px), 560px); aspect-ratio: 1; margin: 0 auto 36px; touch-action: pan-y; }
.spaced { font: 600 clamp(18px, 2.5vw, 30px)/1.5 var(--display); font-stretch: 62%; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); text-wrap: balance; animation: rise 1.6s ease both; }
.spaced span { display: block; }
.spaced span:first-child { color: var(--muted); }
.spaced span + span { animation: rise 1.6s ease .9s both; }
.stage.night .tag b { color: var(--water); }
@media (prefers-reduced-motion: reduce) { .spaced, .spaced span + span { animation: none; } }

/* ---- Document pages ----
   The Insurgency page's structure in Foundation colors: a notice, a rule that fades out at
   both ends (oxblood here, the Foundation's one red), and short centered text between. */
.page { padding: 88px 0 104px; text-align: center; }
.page p { max-width: 58ch; margin-inline: auto; }
.page > * + * { margin-top: 20px; }
.rule, .page > * + .sec::before { border: 0; height: 1px; margin: 56px 0; background: linear-gradient(90deg, transparent, var(--oxblood), transparent); }
.page > * + .sec::before { content: ""; display: block; }
.page > .rule { margin: 56px 0; }
.page .notice .big { color: var(--ink); }
.page .notice .small { color: var(--water); }
.sec h2 { margin-bottom: 28px; font: 600 clamp(20px, 2.8vw, 26px)/1.2 var(--display); font-stretch: 62%; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.sec h2::after { content: ""; display: block; width: 28px; height: 2px; margin: 14px auto 0; background: var(--oxblood); }
.sec h2 + .ref { margin: -14px auto 28px; }
.sec p + p { margin-top: 18px; }
.muted { color: var(--muted); }

/* Long text stays one size and one weight; the phrases the eye should land on are lifted to
   bone by color alone, so the column reads as one voice. */
.prose b { font-weight: inherit; }

.standing strong { display: block; font: 600 clamp(24px, 3.6vw, 34px)/1.2 var(--display); font-stretch: 62%; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.standing span { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }

/* Department banners, after the Ouroboros cycle's part headers: an oxblood line across, the
   title on it, the file number under it. banners.js sizes each title to the banner and fills
   its letters with their own letters streaming through them; the real title stays
   underneath, transparent, for reading and selection. The banner is wider than the text
   column; the padding above the title balances the file number below, so the line runs
   through the title's middle. */
.banners { list-style: none; display: grid; gap: 40px; }
.banner { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; width: min(880px, 100vw - 32px); min-height: clamp(150px, 22vw, 210px); margin-inline: calc((100% - min(880px, 100vw - 32px)) / 2); padding-top: 34px; text-align: center; text-decoration: none; color: var(--ink); }
.banner::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 1; height: 2px; margin-top: -1px; background: var(--oxblood); }
.banner .art { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: .88; transition: opacity .3s; }
.banner-title { position: relative; z-index: 3; margin: 0; font: 700 clamp(32px, 7vw, 88px)/.95 var(--display); font-stretch: 62.5%; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); text-wrap: balance; overflow-wrap: normal; }
.banner.is-stenciled .banner-title { color: transparent; }
.banner-title::selection { background: rgba(143, 169, 180, .3); color: transparent; }
.banner-ref { position: relative; z-index: 3; margin-top: 16px; font: 500 12px/18px var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--water); }
.page .banner-ref { max-width: none; }
a.banner:hover .art, a.banner:focus-visible .art { opacity: 1; }
a.banner:focus-visible { outline-offset: 6px; }
.banner-what { max-width: 52ch; margin: 18px auto 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

.ref { font: 500 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--water); }

/* The dam: the site's last resort. Its divider is a waterline in slate instead of oxblood. */
.page > * + .sec.dam::before { background: linear-gradient(90deg, transparent, var(--water), transparent); opacity: .6; }
.dam h2::after { background: var(--water); }

/* File pages: department files and the register */
.file-head .seal { width: 56px; height: 56px; margin: 0 auto 28px; opacity: .85; }
.file-head h1 { font: 600 clamp(34px, 6vw, 60px)/1.05 var(--display); font-stretch: 62%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.ref-line { margin-top: 14px; font: 500 12px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--water); }
.page .warn { max-width: 52ch; margin: 28px auto 0; font-size: 15px; color: var(--muted); }

.duties { display: grid; gap: 22px; }
.duties dt { font: 600 15px/1.3 var(--display); font-stretch: 75%; letter-spacing: .16em; text-transform: uppercase; color: var(--water); }
.duties dd { max-width: 58ch; margin: 4px auto 0; }

.redacted span { display: block; height: .9em; margin: 12px auto 0; background: #1f1d1b; }
.redacted span:nth-child(2) { width: 82%; }
.redacted span:nth-child(3) { width: 64%; }
.note { margin-top: 24px; text-align: center; color: var(--muted); }
.back { margin-top: 72px; text-align: center; }
.back a { display: inline-flex; align-items: center; min-height: 44px; }

.way-in { margin-top: 40px; text-align: center; }

footer { border-top: 1px solid var(--line); padding: 32px 0 48px; font-size: 13px; line-height: 1.6; color: var(--faint); text-align: center; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .bar nav { gap: 16px; }
  .bar nav a { letter-spacing: .12em; }
  .brand { font-size: 15px; letter-spacing: .14em; }
  .spaced { letter-spacing: .14em; }
  .page { padding: 64px 0 80px; }
  .rule, .page > * + .sec::before, .page > .rule { margin: 44px 0; }
  .banners { gap: 40px; }
  .banner { padding-top: 30px; }
  .banner-ref { margin-top: 12px; }
}

/* Broken access button on the register: the Insurgency's red, flickering and tearing like a
   corrupted link. It is the one piece of Insurgency color on a Foundation page. */
.broken { position: relative; display: inline-block; padding: 14px 26px; border: 1px solid var(--ci); color: var(--ci-text); background: transparent; font: 500 13px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; animation: flicker 4s steps(1) infinite; }
.broken::before, .broken::after { content: attr(data-text); position: absolute; inset: 0; display: grid; place-items: center; letter-spacing: .2em; pointer-events: none; }
.broken::before { color: #fff; clip-path: inset(10% 0 70% 0); transform: translateX(-3px); animation: tear 2.6s steps(1) infinite; }
.broken::after { color: var(--ci-text); clip-path: inset(60% 0 15% 0); transform: translateX(4px); animation: tear 3.1s steps(1) infinite reverse; }
.broken:hover { background: var(--ci); color: #fff; }  /* 5.5:1 on the red */
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: .25; } 9% { opacity: 1; } 47% { opacity: .6; } 48% { opacity: 1; } 71% { opacity: 0; } 72% { opacity: 1; } }
@keyframes tear { 0%, 100% { opacity: 0; } 10% { opacity: 1; } 14% { opacity: 0; } 55% { opacity: 1; } 58% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .broken, .broken::before, .broken::after { animation: none; } .broken::before, .broken::after { display: none; } }

/* ---- Chaos Insurgency: the unlocked source. Its own red, and the only glow on the site. ---- */
.sector-insurgency .bar { border-bottom-color: #3a0d0b; }
.bar .meta { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.bar .meta b { color: var(--ci-text); font-weight: 500; }
.stage { min-height: calc(100svh - 57px); display: grid; place-items: center; text-align: center; padding: 72px 0; }
.stage.glow { background: radial-gradient(ellipse at 50% 42%, #2a0505 0%, var(--bg) 65%); }
.stage img { width: min(680px, 100%); margin-inline: auto; animation: rise 1.6s ease both; }
.tag { margin-top: 32px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tag b { color: var(--ci-text); font-weight: 500; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage img { animation: none; } }
.doc { padding: 40px 0 120px; }
.doc > * + * { margin-top: 20px; }
.notice { text-align: center; }
.notice .small { font: 500 15px/1.4 var(--display); font-stretch: 62%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.notice .big { margin: 10px 0; font: 600 clamp(48px, 9vw, 84px)/1 var(--display); font-stretch: 62%; letter-spacing: .02em; text-transform: uppercase; color: var(--ci); }
.sector-insurgency .rule { margin: 56px 0 !important; background: linear-gradient(90deg, transparent, var(--ci), transparent); }