/* ==========================================================================
   Design tokens — single source of truth.
   Every page imports this file. Do not duplicate these custom properties
   anywhere else — that duplication caused the numerals-inherit-mono bug
   four separate times during prototyping.
   ========================================================================== */

:root {
  /* ---- color ---- */
  --paper:          #F7F6F3; /* page ground */
  --surface:        #FCFBF8; /* elevated/raised surface — cards, live artifacts */
  --panel:          #EFEDE8; /* sunken panel — footer/spec sections */
  --rule:           #DCD9D3; /* hairlines, inactive connectors, dividers */
  --muted:          #6B6F76; /* secondary text on paper/surface */
  --muted-on-panel: #4B4F55; /* secondary text on --panel — plain --muted fails AA there */
  --ink:            #14161A; /* primary text */
  --accent:         #0F5257; /* figures, chosen option, active/live markers only */

  /* ---- type families ---- */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'Fragment Mono', ui-monospace, monospace;

  /* ---- layout ---- */
  --measure: 36rem;      /* ~62-66ch at 18px body */
  --gutter:  clamp(1.5rem, 5vw, 6rem);
  --wrap-max: 74rem;

  /* ---- motion ---- */
  --ease-breath: cubic-bezier(.22,.7,.24,1);
  --dur-reveal: 720ms;
  --dur-pulse: 2600ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.58;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* belt-and-suspenders: wide content must scroll in its own container, never the page */
}
img, svg { max-width: 100%; display: block; }

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- type scale (BUILD-BRIEF table) ---------- */

.label {
  font-family: var(--mono);
  font-size: .6875rem;      /* 11px */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.label-on-panel { color: var(--muted-on-panel); }

/* numerals never inherit the mono face — always Archivo, tabular */
.num {
  font-family: var(--display);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .04em;
}

.display-xl {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 7.2vw, 4.75rem); /* 48–76px */
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0;
}
.display-l {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem); /* 24–34px */
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0;
}
.key-statement {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.40;
  letter-spacing: -.01em;
  max-width: var(--measure);
  margin: 0 0 2rem;
}
.lead {
  font-size: 1.3125rem; /* 21px */
  line-height: 1.5;
  font-weight: 400;
  max-width: var(--measure);
  margin: 0;
}
p { max-width: var(--measure); margin: 0 0 1.1em; }
.small {
  font-size: .9375rem; /* 15px */
  line-height: 1.55;
  color: var(--muted);
}

a { color: var(--ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a.accent-link { color: var(--accent); }

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

/* ---------- reveal-on-scroll: the "breathe in" pattern ----------
   Applied via reveal.js (IntersectionObserver). Default state hidden+offset,
   .in state settles. Kept understated: short travel, generous duration. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease-breath),
              transform var(--dur-reveal) var(--ease-breath);
}
.reveal.in { opacity: 1; transform: none; }

.hairline.reveal-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms var(--ease-breath);
  opacity: 1;
}
.hairline.reveal-line.in { transform: scaleX(1); }

/* ---------- pulse: reserved for live/active state only ----------
   One quiet signal, not decoration — a countdown in its final window,
   a toggle's active side, a "live" dot. Never more than one per view. */
@keyframes pulse-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.pulse {
  animation: pulse-breathe var(--dur-pulse) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .hairline.reveal-line {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .pulse { animation: none !important; }
}