/* ==========================================================================
   Capital Hart — reset, typography, layout primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: transparent;
  color: var(--ink-400);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--ink-050);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; }
h4 { font-size: var(--t-h4); letter-spacing: -0.012em; line-height: 1.3; }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

strong, b { color: var(--ink-200); font-weight: 600; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }

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

hr { border: 0; border-top: 1px solid var(--hair); margin: var(--s-7) 0; }

::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 2px solid var(--red-lit);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Numbers are engineering, not decoration. */
.num, .mono, table, input, .tabular {
  font-variant-numeric: tabular-nums;
}
.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'ss01' 1;
}

/* --- layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--measure-narrow); }
.wrap--wide   { max-width: 84rem; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section + .section { border-top: 1px solid var(--hair-soft); }

/* The homepage carries the most sections, so it gets more air between them. */
.page-home .section { padding-block: calc(var(--section-y) * 1.2); }
.page-home .section-head { margin-bottom: var(--s-9); }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-200%);
  background: var(--red); color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-weight: 600; font-size: var(--t-small);
  z-index: 200;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- eyebrow: the small hairline-flagged section label ---------------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none;
  color: var(--ink-600);
  margin-bottom: var(--s-4);
}
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--red);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-400);
  max-width: 46ch;
  text-wrap: pretty;
}

.section-head { max-width: 42rem; margin-bottom: var(--s-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }

/* --- scroll reveal ---------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* No-JS safety: the document ships with class="no-js" and main.js removes it.
   If the script never loads, nothing is ever hidden. */
.no-js .reveal { opacity: 1; transform: none; }

/* First paint only: main.js settles every element with transitions off. */
.reveal-init .reveal { transition: none !important; }

/* --- utilities -------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }
.muted  { color: var(--ink-600); }
.small  { font-size: var(--t-small); }
.micro  { font-size: var(--t-micro); }
.stack > * + * { margin-top: var(--s-4); }

/* ==========================================================================
   Atmosphere — the living background
   One fixed layer behind everything. Orbs are plain radial gradients (no
   blur filter) so the whole thing animates on the compositor: transform and
   scale only, never paint.
   ========================================================================== */

.atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--navy-950);
}

.atmos__field { position: absolute; inset: 0; }

.orb {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--c) 0%, transparent 72%);
  opacity: calc(var(--o) * var(--atmos-strength));
  will-change: transform;
  /* `scale` is its own property, so this breathes without fighting the
     translate that JS writes to `transform`. */
  animation: orb-breathe 19s var(--ease-io) infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes orb-breathe {
  from { scale: 0.92; }
  to   { scale: 1.14; }
}

.atmos__grid {
  position: absolute;
  inset: -30% -15%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 0%, transparent 82%);
          mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, #000 0%, transparent 82%);
  will-change: transform;
}

/* --- cursor light on the grid (assets/js/grid-light.js) ------------------
   The lines brighten inside a soft radius around the pointer, and the cell
   the pointer sits in gets a crisp outline that snaps from cell to cell. */
.atmos__grid {
  --mx: -9999px;
  --my: -9999px;
  --cell: 76px;
  --grid-lit: 0;
}
.atmos__grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: inherit;
  -webkit-mask-image: radial-gradient(300px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 100%);
          mask-image: radial-gradient(300px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.45) 40%, transparent 100%);
  opacity: var(--grid-lit);
  transition: opacity 0.35s var(--ease-io);
  pointer-events: none;
}
.atmos__cell {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--cell) + 1px);
  height: calc(var(--cell) + 1px);
  border: 1px solid rgba(244, 89, 95, 0.95);
  background: rgba(206, 24, 31, 0.08);
  box-shadow:
    0 0 0 1px rgba(244, 89, 95, 0.18),
    0 0 28px rgba(206, 24, 31, 0.45),
    inset 0 0 26px rgba(206, 24, 31, 0.22);
  opacity: var(--grid-lit);
  transition: transform 140ms var(--ease), opacity 0.35s var(--ease-io);
  will-change: transform;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; scale: 1; }
  .atmos__cell { transition: opacity 0.35s var(--ease-io); }
}

/* The atmosphere shows through the page, so the document itself is clear. */
html { background: var(--navy-950); }

/* Lighter footprint on phones: same look, far less compositor memory. */
@media (max-width: 700px) {
  .orb {
    width: calc(var(--s) * 0.62);
    height: calc(var(--s) * 0.62);
    margin-left: calc(var(--s) * -0.31);
    margin-top: calc(var(--s) * -0.31);
  }
  .atmos__grid { background-size: 56px 56px; }
}