/* ==========================================================================
   BELLR — reset + bold typography
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  overflow-x: clip;
  background: var(--bone);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
code, pre { font-family: var(--font-mono); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--brass); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: .8rem 1.25rem; background: var(--ink); color: var(--brass);
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- micro type ---------------------------------------------------------- */
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.led {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: currentColor;
}
.led--open   { background: var(--green); }
.led--closed { background: var(--coral); }
.led--pre    { background: var(--blue); }

/* ---- the block system ---------------------------------------------------
   Every section is a full-bleed colour field. The inner wrapper is what
   holds the measure, so colour always runs edge to edge.                   */
.block { position: relative; z-index: 1; background: var(--bg); color: var(--fg); }
.block__in {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--block-y) var(--gutter);
}
.block + .block { border-top: 4px solid var(--ink); }
.on-ink + .block, .block + .on-ink,
.on-blue + .block, .block + .on-blue,
.on-coral + .block, .block + .on-coral { border-top-color: var(--ink); }

/* section eyebrow: a fat bar, not a hairline */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: .45rem .9rem;
  background: var(--fg); color: var(--bg);
  margin-bottom: 1.75rem;
}

.block__title { font-size: var(--fs-h2); max-width: 15ch; }
.block__lede {
  margin-top: 1.5rem; max-width: 38ch;
  font-size: var(--fs-lede); line-height: 1.4; color: var(--fg-muted);
  font-weight: 500;
}
.block__head { margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.block__head--split {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  gap: 2rem 4rem; align-items: end;
}
@media (max-width: 880px) { .block__head--split { grid-template-columns: 1fr; align-items: start; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* The dye field behind everything.
   These rules were missing, so the canvas sat in normal flow at its attribute
   size — the script sets that from clientWidth times the pixel ratio, so an
   unstyled canvas measured its 300px default, doubled it, and rendered as a
   600px block instead of filling the viewport. */
.backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}