/* ─────────────────────────────────────────────────────────────
   HELP ME BUILD THIS — Blueprint Brutalism for Alliance
   Base tokens, type, drafting chrome
   ───────────────────────────────────────────────────────────── */

:root {
  /* Field — concrete charcoal */
  --concrete-0: #0d1013;        /* deepest, page background */
  --concrete-1: #14181c;        /* primary surface */
  --concrete-2: #1c2126;        /* raised */
  --concrete-3: #262c33;        /* panel */
  --concrete-4: #353c45;        /* hairline / chip border */

  /* Blueprint — line-work, annotations */
  --blueprint:     #6ed1ec;     /* primary annotation cyan */
  --blueprint-2:   #4aa8c4;     /* secondary */
  --blueprint-dim: #2e6477;     /* dim rules */
  --blueprint-ink: rgba(110, 209, 236, 0.08);  /* fills */

  /* Safety — the one earned accent (Alliance red) */
  --safety: #e02740;            /* slightly brighter alliance red for screen */
  --safety-deep: #b8132a;
  --safety-glow: rgba(224, 39, 64, 0.25);

  /* Paper — text */
  --paper-0: #f4f6f8;           /* hi-contrast */
  --paper-1: #d8dde2;           /* primary text */
  --paper-2: #9aa3ac;           /* secondary */
  --paper-3: #5e6770;           /* tertiary, ticks */
  --paper-4: #353c45;           /* faint */

  /* Grid */
  --grid-color: rgba(110, 209, 236, 0.045);
  --grid-color-strong: rgba(110, 209, 236, 0.10);
  --grid-size: 32px;

  /* Type */
  --f-display: 'Archivo', 'Archivo Black', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-body: 'Archivo', system-ui, sans-serif;

  /* Motion */
  --ease-draft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-draw: 1100ms;
  --dur-slow: 1600ms;
  --dur-snap: 320ms;

  /* Layout */
  --gutter: 48px;
  --col-w: 1280px;
  --section-pad: 140px;

  color-scheme: dark;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--concrete-0);
  color: var(--paper-1);
  font-family: var(--f-body);
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--safety); color: var(--paper-0); }

/* ─────────────────────────────────────────────────────────────
   The page-wide blueprint grid (parallax background)
   ───────────────────────────────────────────────────────────── */
.blueprint-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to right,  var(--grid-color) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
  will-change: transform;
}
.blueprint-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,  var(--grid-color-strong) 1px, transparent 1px) 0 0 / calc(var(--grid-size) * 8) calc(var(--grid-size) * 8),
    linear-gradient(to bottom, var(--grid-color-strong) 1px, transparent 1px) 0 0 / calc(var(--grid-size) * 8) calc(var(--grid-size) * 8);
}

/* Soft vignette over the page so deep blacks anchor the eye */
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, transparent, rgba(0,0,0,0.35) 80%),
    radial-gradient(ellipse 80% 60% at 50% 100%, transparent, rgba(0,0,0,0.35) 80%);
}

/* ─────────────────────────────────────────────────────────────
   Type system
   ───────────────────────────────────────────────────────────── */
.eyebrow, .tick-label, .coord {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.eyebrow .ink { color: var(--blueprint); }
.eyebrow .sep { color: var(--blueprint-dim); padding: 0 8px; }

.display {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 0.96;
  color: var(--paper-0);
  text-wrap: balance;
}
.display-xl { font-size: clamp(56px, 9vw, 144px); font-weight: 800; }
.display-l  { font-size: clamp(44px, 6.5vw, 96px); }
.display-m  { font-size: clamp(32px, 4vw,  64px); }
.display-s  { font-size: clamp(24px, 2.6vw, 40px); font-weight: 600; }

.lede {
  font-family: var(--f-body);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--paper-1);
  font-weight: 400;
  max-width: 56ch;
  text-wrap: pretty;
}

.body-rich {
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper-1);
  max-width: 62ch;
  text-wrap: pretty;
}
.body-rich p + p { margin-top: 1.05em; }
.body-rich strong { color: var(--paper-0); font-weight: 600; }
.body-rich em { color: var(--blueprint); font-style: normal; font-family: var(--f-mono); font-size: 0.93em; }

.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; }
.mono-md { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; }

/* ─────────────────────────────────────────────────────────────
   Drafting chrome — section frame, tick rules, corner brackets
   ───────────────────────────────────────────────────────────── */

.section {
  position: relative;
  z-index: 2;
  padding: var(--section-pad) var(--gutter);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.section--tight { min-height: auto; }

.section-inner {
  width: 100%;
  max-width: var(--col-w);
  margin: 0 auto;
  position: relative;
}

/* Section identifier strip — sits at the top of each beat */
.sheet-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--concrete-4);
  position: relative;
}
.sheet-header::after {
  /* tick marks under the rule */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 6px;
  background-image: linear-gradient(to right, var(--concrete-4) 1px, transparent 1px);
  background-size: 40px 100%;
  background-repeat: repeat-x;
  mask-image: linear-gradient(to right, #000, #000 60%, transparent);
}

.sheet-no {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--blueprint);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.sheet-no .big {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper-0);
}
.sheet-no .of { color: var(--paper-3); }

.sheet-title {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.sheet-title .ink { color: var(--blueprint); }

.sheet-coord {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--paper-3);
  text-align: right;
}

/* Corner brackets — drafting marks at the four corners of a frame */
.brackets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.brackets::before,
.brackets::after,
.brackets > i,
.brackets > i + i {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--blueprint-dim);
}
.brackets::before { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; }
.brackets::after  { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; }
.brackets > i {
  bottom: -1px; left: -1px; border-right: 0; border-top: 0; display: block;
}
.brackets > i + i { left: auto; right: -1px; border-left: 0; border-right: 1px solid var(--blueprint-dim); border-top: 0; }

/* Drafting rule — a horizontal/vertical line with ticks */
.rule-h {
  height: 1px;
  background: var(--concrete-4);
  position: relative;
}
.rule-h::after {
  content: "";
  position: absolute;
  inset: -3px 0 auto 0;
  height: 7px;
  background-image: linear-gradient(to right, var(--concrete-4) 1px, transparent 1px);
  background-size: 24px 100%;
  background-repeat: repeat-x;
}

/* Tag chip — used in lots of places */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--concrete-4);
  background: rgba(20, 24, 28, 0.6);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blueprint);
  box-shadow: 0 0 0 3px rgba(110,209,236, 0.12);
}
.tag--safety .dot { background: var(--safety); box-shadow: 0 0 0 3px var(--safety-glow); }
.tag--safety { color: var(--safety); border-color: rgba(224,39,64, 0.4); }

/* ─────────────────────────────────────────────────────────────
   Animation primitives
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms var(--ease-draft), transform 900ms var(--ease-draft);
  transition-delay: var(--rd, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Draw-in for strokes */
@keyframes draw-stroke {
  from { stroke-dashoffset: var(--dash, 1000); }
  to   { stroke-dashoffset: 0; }
}
.draw-line {
  stroke-dasharray: var(--dash, 1000);
  stroke-dashoffset: var(--dash, 1000);
}
.draw-line.is-in {
  animation: draw-stroke 1400ms var(--ease-draft) forwards;
  animation-delay: var(--rd, 0ms);
}

/* Word reveal (cinematic) */
.word-reveal .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-draft), transform 700ms var(--ease-draft);
}
.word-reveal.is-in .w {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 60ms);
}

/* Plain fade for sub-elements */
.fade { opacity: 0; transition: opacity 1000ms var(--ease-draft); transition-delay: var(--rd, 0ms); }
.fade.is-in { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   Reusable layouts
   ───────────────────────────────────────────────────────────── */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.cols-2--narrow { gap: 56px; }
@media (max-width: 880px) {
  .cols-2 { grid-template-columns: 1fr; gap: 56px; }
}

.stack { display: flex; flex-direction: column; }
.stack-8  { gap: 8px;  }
.stack-12 { gap: 12px; }
.stack-16 { gap: 16px; }
.stack-24 { gap: 24px; }
.stack-32 { gap: 32px; }
.stack-48 { gap: 48px; }

.row { display: flex; align-items: center; }
.row-8  { gap: 8px;  }
.row-16 { gap: 16px; }
.row-24 { gap: 24px; }

/* Utility */
.ink-blueprint { color: var(--blueprint); }
.ink-safety { color: var(--safety); }
.ink-paper-2 { color: var(--paper-2); }
.uppercase { text-transform: uppercase; letter-spacing: 0.12em; }

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border: 1px solid var(--concrete-4);
  background: var(--concrete-1);
  color: var(--paper-0);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 240ms, background 240ms, transform 240ms;
  position: relative;
}
.btn:hover { border-color: var(--blueprint); background: var(--concrete-2); }
.btn .arrow {
  width: 22px; height: 1px; background: currentColor; position: relative;
}
.btn .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn--safety { border-color: var(--safety); color: var(--paper-0); background: linear-gradient(180deg, rgba(224,39,64,0.18), rgba(224,39,64,0.05)); }
.btn--safety:hover { background: rgba(224,39,64, 0.28); border-color: var(--safety); }

/* ─────────────────────────────────────────────────────────────
   Scroll progress + top bar
   ───────────────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  pointer-events: none;
  mix-blend-mode: normal;
  backdrop-filter: blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
  background: linear-gradient(180deg, rgba(13,16,19,0.7), rgba(13,16,19,0));
  border-bottom: 1px solid transparent;
  transition: border-color 240ms;
}
.topbar > * { pointer-events: auto; }

.topbar.is-scrolled {
  border-bottom-color: var(--concrete-4);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-brand img { height: 22px; width: auto; }

.topbar-center {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-2);
  text-align: center;
}
.topbar-center .ink { color: var(--blueprint); }

.topbar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-2);
}
.topbar-right .now {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--safety);
}
.topbar-right .now .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--safety);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.progress-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  z-index: 51;
  background: var(--concrete-3);
}
.progress-bar > div {
  height: 100%;
  background: var(--safety);
  width: 0%;
  transition: width 120ms linear;
}