/* ==========================================================================
   SiteRisk — marketing landing
   Field-manual / technical-document aesthetic.

   ── Typography ──────────────────────────────────────────────────────────────
   Display: GT Sectra (Grilli Type, commercial). Uncomment the @font-face
   blocks below and drop the licensed .woff2 files into /assets/fonts/ once
   licensed. Until then the page falls back to Fraunces via Google Fonts.

   @font-face {
     font-family: 'GT Sectra';
     src: url('/assets/fonts/GT-Sectra-Regular.woff2') format('woff2');
     font-weight: 400; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: 'GT Sectra';
     src: url('/assets/fonts/GT-Sectra-Regular-Italic.woff2') format('woff2');
     font-weight: 400; font-style: italic; font-display: swap;
   }
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;     /* clear the sticky top bar on anchor jumps */
}
img, svg { display: block; max-width: 100%; }
button, a, input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input  { font: inherit; color: inherit; background: transparent; border: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }


/* ---------- Tokens ---------- */
:root {
  /* Paper side */
  --ink:           #14181f;
  --ink-2:         #2b323d;
  --mute:          #6c6757;
  --mute-2:        #948f7e;
  --rule:          #d4cdba;
  --rule-strong:   #a89f88;
  --paper:         #f1ece0;
  --paper-2:       #ebe4d3;
  --paper-3:       #e1d9c3;

  /* Panel side — warm near-black per BRAND.md ("one accent, no second
     brand color"). The SiteRisk logo is rendered in navy (#1a3a64) and
     yellow (#f4d97a) within the logo asset itself; those colors do not
     propagate to surfaces, decoration, or text. */
  --panel:         #161b25;   /* dark surface — warm near-black */
  --panel-rule:    rgba(255, 255, 255, 0.07);
  --panel-rule-2:  rgba(255, 255, 255, 0.18);
  --panel-ink:     #e8e3d4;   /* primary text on panel */
  --panel-mute:    #8a8e9a;   /* muted text on panel — 5.3:1 vs panel (AA) */
  --panel-mute-2:  #6a6e7a;   /* non-text UI on panel — 3.5:1 (WCAG 1.4.11) */

  /* Signal — hazard amber, used only on active state and brand-required interaction */
  --amber:         #e8821a;
  --amber-warm:    #f49a3a;
  --amber-deep:    #8a4a06;   /* AA pass on amber-soft (5.45:1) and on paper (6.1:1) */
  --amber-soft:    rgba(232, 130, 26, 0.12);
  --amber-glow:    rgba(232, 130, 26, 0.32);

  /* Type families — per BRAND.md.
     Display: GT Sectra (Grilli Type, commercial). License + self-host
              via @font-face below. Fraunces is the dev-preview fallback
              until the licensed files are in place.
     Body:    IBM Plex Sans (free, BRAND.md-defensible). Söhne is the
              production upgrade when commercial body type is licensed.
     Mono:    IBM Plex Mono (BRAND.md-recommended). */
  --serif: 'GT Sectra', 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --fs-micro:    0.6875rem;   /* 11px */
  --fs-mono-sm:  0.75rem;     /* 12px */
  --fs-mono:     0.8125rem;   /* 13px */
  --fs-sm:       0.875rem;    /* 14px */
  --fs-body-sm:  0.9375rem;   /* 15px */
  --fs-body:     1.0625rem;   /* 17px */
  --fs-md:       1.1875rem;   /* 19px */
  --fs-lg:       1.375rem;    /* 22px */
  --fs-h3:       clamp(1.5rem, 2.4vw, 2rem);      /* 24 → 32 */
  --fs-h2:       clamp(1.75rem, 3.4vw, 2.5rem);   /* 28 → 40 */
  --fs-h1:       clamp(2rem, 4.6vw, 3.25rem);     /* 32 → 52 */
  --fs-display:  clamp(2.75rem, 7vw, 5.5rem);     /* 44 → 88 */
  --fs-temp:     clamp(3rem, 7vw, 4.25rem);       /* compare temp */

  /* Line height */
  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* Spacing scale */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.25rem;   /* 20 */
  --s-6:  1.5rem;    /* 24 */
  --s-7:  1.75rem;   /* 28 */
  --s-8:  2rem;      /* 32 */
  --s-10: 2.5rem;    /* 40 */
  --s-12: 3rem;      /* 48 */
  --s-14: 3.5rem;    /* 56 */
  --s-16: 4rem;      /* 64 */
  --s-20: 5rem;      /* 80 */
  --s-section: clamp(4rem, 9vw, 7rem);

  /* Layout */
  --container: 1200px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --t-fast: 160ms;
  --t-press: 80ms;
  --ease: ease-out;

  /* Z-index scale */
  --z-bar: 50;
  --z-skip: 100;
  --z-grain: 200;
}


/* ---------- Screen-reader-only utility ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(calc(-100% - var(--s-6)));
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus {
  transform: translateY(0);
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}


/* ---------- Base ---------- */
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "tnum", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle paper grain — fixed, no animation, no blend on motion. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}

::selection      { background: var(--ink); color: var(--paper); }
::-moz-selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


/* ---------- Primitives ---------- */
.kicker {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-10);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.kicker__sec  { color: var(--ink); font-weight: 500; letter-spacing: 0.12em; }
.kicker__name { letter-spacing: 0.22em; }

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.display__em { font-style: normal; font-weight: 600; }

.lede {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 14;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  max-width: 36em;
  margin-top: var(--s-6);
  text-wrap: pretty;
}


/* ---------- CTA button (hero) ---------- */
.cta { margin-top: var(--s-10); }
.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-6);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-press) var(--ease);
}
.cta__btn:hover         { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.cta__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cta__btn:active        { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--paper); transform: translateY(1px); }
.cta__arrow { font-family: var(--sans); font-size: var(--fs-body); }

.hero__pilot {
  margin-top: var(--s-6);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--mute);
  max-width: 36em;
  text-wrap: pretty;
}


/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding:
    var(--s-3)
    max(var(--pad), env(safe-area-inset-right))
    var(--s-3)
    max(var(--pad), env(safe-area-inset-left));
  padding-top: max(var(--s-3), env(safe-area-inset-top));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-6);
  align-items: center;
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.topbar__brand:hover         { opacity: 0.78; }
.topbar__brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.topbar__logo { height: 44px; width: auto; display: block; }
@media (min-width: 720px) { .topbar__logo { height: 56px; } }

.topbar__sub {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: "opsz" 16;
  /* font-size: var(--fs-sm); */
  font-size: 1rem;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__meta {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
@media (max-width: 720px) {
  .topbar__sub { display: none; }
  .topbar__inner { grid-template-columns: 1fr auto; }
}


/* ---------- Hero ---------- */
.hero {
  padding: var(--s-section) 0;
  border-bottom: 1px solid var(--rule);
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--s-10), 6vw, var(--s-20));
  align-items: start;
}
@media (min-width: 920px) {
  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
}
/* ---------- Mockup ---------- */
.mock {
  position: relative;
  padding: var(--s-6);
  background: var(--panel);
  color: var(--panel-ink);
  border-top: 3px solid var(--panel-mute-2);
  box-shadow:
    0 10px 15px -3px rgba(20, 24, 31, 0.18),
    0 4px 6px -4px rgba(20, 24, 31, 0.14);
  /* Sans is the default inside the mock; mono is added explicitly to
     numeric / identifier elements (haz codes, sparklines, cycle value,
     caption value, signal dd). */
  font-family: var(--sans);
  font-feature-settings: "tnum";
  /* Page renders statically per BRAND.md ("calm by default").
     Only the top border participates in the activation moment. */
  animation: panelActivate 400ms var(--ease) 1650ms forwards;
}
.mock::before,
.mock::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--panel-mute-2);
  pointer-events: none;
}
.mock::before { top:    0; left:  0; border-right: 0; border-bottom: 0; }
.mock::after  { bottom: 0; right: 0; border-left:  0; border-top:    0; }

.mock__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--panel-mute);
}
.mock__label { color: var(--panel-mute); }
.mock__site  { color: var(--panel-ink); font-weight: 500; }
.mock__cycle {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-left: auto;
  color: var(--panel-mute);
}
.mock__cycle-value {
  font-family: var(--mono);
  color: var(--panel-ink);
  letter-spacing: 0.08em;
}
@media (max-width: 419px) {
  .mock__cycle-suffix { display: none; }
}

.mock__rule {
  height: 1px;
  background: var(--panel-rule);
  margin: var(--s-3) 0 var(--s-4);
}
.mock__forecast {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--panel-mute);
  margin-bottom: var(--s-3);
}

.haz__row {
  display: grid;
  grid-template-columns: 2.6rem auto minmax(0, 1fr) auto;
  /* code | name | sparkline (flexes, center-clipped on overflow) | status.
     Active rows place the PEAK caption below status on row 2. */
  column-gap: var(--s-3);
  row-gap: var(--s-2);
  align-items: center;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--panel-rule);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
}
.haz__row:last-child { border-bottom: 1px solid var(--panel-rule); }

.haz__code   {
  grid-column: 1; grid-row: 1;
  font-family: var(--mono);
  color: var(--panel-mute);
}
.haz__name   {
  grid-column: 2; grid-row: 1;
  color: var(--panel-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.haz__status {
  grid-column: 4; grid-row: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 5rem;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-align: right;
  text-transform: uppercase;
  color: var(--panel-mute);
}
.haz__spark {
  grid-column: 3; grid-row: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1;
  letter-spacing: 0;
  color: var(--panel-mute);
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
.haz__caption {
  grid-column: 4; grid-row: 2;
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-warm);
  opacity: 0;
  animation: fadeIn 400ms var(--ease) 1700ms forwards;
}
.haz__caption-label { font-family: var(--sans); }
.haz__caption-value { font-family: var(--mono); letter-spacing: 0.08em; }
@media (min-width: 1100px) {
  .haz__row {
    grid-template-columns: 2.9rem 5.6rem 1fr auto;
    grid-template-rows: auto;
    column-gap: var(--s-3);
  }
  .haz__spark   { grid-column: 3; grid-row: 1; text-align: left; }
  .haz__status  { grid-column: 4; }
  .haz__caption { grid-column: 4; grid-row: 2; justify-self: end; white-space: nowrap; }
}

.haz__row--active {
  animation: rowActivate 500ms var(--ease) 1600ms forwards;
}
.haz__spark--active {
  animation: sparkActivate 800ms var(--ease) 1500ms forwards;
}

.haz__status-text {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.haz__status-text--calm {
  animation: fadeOut 300ms var(--ease) 1550ms forwards;
}
.haz__status-text--active {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--amber-warm);
  font-weight: 500;
  opacity: 0;
  animation: fadeIn 400ms var(--ease) 1650ms forwards;
}

.haz__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 var(--amber-glow);
  animation: pulse 2200ms ease-in-out 2100ms infinite;
}


/* ---------- Mock alert (hero callout) ---------- */
.mock__alert {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-left: 2px solid var(--amber);
  background: var(--amber-soft);
  opacity: 0;
  transform: translateY(6px);
  animation: enter 550ms var(--ease) 1850ms forwards;
}
.mock__alert-headline {
  font-family: var(--serif);
  font-style: normal;
  font-variation-settings: "opsz" 24;
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--panel-ink);
  margin-bottom: var(--s-1);
  text-wrap: pretty;
}
.mock__alert-action {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--panel-ink);
  text-wrap: pretty;
}
/* Signal data block — exposes the underlying math under the consequence.
   Sans uppercase labels (dt) paired with mono tabular values (dd). */
.signal {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s-5);
  row-gap: 2px;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--panel-rule);
}
.signal dt {
  font-family: var(--sans);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--panel-ink);
}
.signal dd {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em;
  color: var(--panel-ink);
  font-variant-numeric: tabular-nums;
}


/* ---------- Sections ---------- */
.sec {
  padding: var(--s-section) 0;
  border-bottom: 1px solid var(--rule);
}
.sec--alt { background: var(--paper-2); }
.sec__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.sec__inner--narrow { max-width: 780px; }

.sec__title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 80;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 22ch;
  margin-inline: left;
  text-wrap: balance;
}
.sec__lede {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: "opsz" 18;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  margin-top: var(--s-6);
  margin-inline: left;
  max-width: 42em;
  text-wrap: pretty;
}

.sec__closer {
  margin-top: var(--s-14);
  margin-inline: left;
  padding-top: var(--s-8);
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-style: normal;
  font-weight: 300;
  font-variation-settings: "opsz" 18;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  max-width: 42em;
  text-wrap: pretty;
}


/* ---------- Compare (§02) ---------- */
.compare {
  margin: var(--s-14) auto 0;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
  position: relative;
}
@media (min-width: 820px) {
  .compare { grid-template-columns: 1fr 1fr; gap: 0; }
  .compare__col--generic { padding-right: var(--s-12); }
  .compare__col--ours    {
    padding-left: var(--s-12);
    border-left: 1px solid var(--rule);
    position: relative;
  }
  .compare__col--ours::before {
    content: "→";
    position: absolute;
    left: 0; top: 4.4rem;
    transform: translate(-50%, 0);
    width: 2.4rem; height: 2.4rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: var(--fs-body);
    color: var(--mute);
    z-index: 1;
  }
  .sec--alt .compare__col--ours::before { background: var(--paper-2); }
}

.compare__label {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s-4);
}
.compare__card {
  padding: var(--s-7);
  border: 1px solid var(--rule);
}

.compare__card--generic { background: var(--paper-3); color: var(--ink-2); }
.compare__day {
  font-family: var(--serif);
  font-style: normal;
  font-variation-settings: "opsz" 18;
  font-size: var(--fs-body);
  color: var(--mute);
  margin-bottom: var(--s-2);
}
.compare__temp {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 96;
  font-size: var(--fs-temp);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.compare__cond {
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--ink-2);
}
.compare__cond + .compare__cond { margin-top: var(--s-1); }

.compare__card--ours {
  background: var(--panel);
  border-color: var(--ink);
  border-top: 3px solid var(--amber);
  color: var(--panel-ink);
}
.compare__code {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber-warm);
  margin-bottom: var(--s-3);
}
.compare__head {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--panel-ink);
  margin-bottom: var(--s-3);
  text-wrap: pretty;
}
.compare__action {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--panel-ink);
  margin-bottom: var(--s-5);
  text-wrap: pretty;
}
.compare__meta {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--panel-mute);
}
.compare__note {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 16;
  font-size: var(--fs-body-sm);
  color: var(--mute);
  margin-top: var(--s-4);
}


/* ---------- Inline technical terms ---------- */
code {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  font-family: var(--font-mono);
}


/* ---------- Tier — two-timescale section (§03) ---------- */
.tier {
  margin-top: var(--s-14);
  margin-inline: auto;
  max-width: 880px;
  display: grid;
  gap: var(--s-14);
}
.tier__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding-top: var(--s-10);
  border-top: 1px solid var(--rule);
}
.tier__row:first-child { border-top: 0; padding-top: 0; }
.tier__index {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  color: var(--mute);
  padding-top: var(--s-2);
}
.tier__body { max-width: 62ch; }

.tier__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s-4);
}
.tier__kicker-tier { color: var(--ink); font-weight: 500; letter-spacing: 0.16em; }
.tier__kicker-when { letter-spacing: 0.18em; }

.tier__title {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 48;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

.tier__hazards {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-6);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tier__hazards-label {
  color: var(--mute);
  letter-spacing: 0.2em;
  font-size: var(--fs-mono-sm);
}
.tier__hazards-list { color: var(--ink); }

.tier__lede {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  margin-bottom: var(--s-6);
  text-wrap: pretty;
}

.tier__example {
  margin-top: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--paper-2);
  border-left: 2px solid var(--rule-strong);
}
.tier__example + .tier__example { margin-top: var(--s-3); }
.tier__example-head {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--s-2);
}
.tier__example-body {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: pretty;
}

.sec__lede em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

@media (min-width: 720px) {
  .tier__row { grid-template-columns: 7.5rem 1fr; gap: var(--s-12); }
}


/* ---------- Who (§05) ---------- */
.who {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 24;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  margin-top: var(--s-2);
  text-wrap: pretty;
}
.who em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}


/* ---------- Footer (§06) ---------- */
.foot {
  background: var(--panel);
  color: var(--panel-ink);
  padding: var(--s-section) 0 max(var(--s-12), env(safe-area-inset-bottom));
  border-top: 1px solid var(--ink);
  scroll-margin-top: 4rem;
}
.foot__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.foot .kicker      { color: var(--panel-mute); }
.foot .kicker__sec { color: var(--panel-ink); }

.foot__title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.018em;
  color: var(--panel-ink);
  max-width: 14ch;
  text-wrap: balance;
}
.foot__lede {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--panel-mute);
  margin-top: var(--s-6);
  max-width: 36em;
  text-wrap: pretty;
}


/* ---------- Email capture ---------- */
.cap { margin-top: var(--s-10); max-width: 34rem; }
.cap__label {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--panel-mute);
  margin-bottom: var(--s-3);
}
.cap__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border: 1px solid var(--panel-mute-2);
  transition: border-color var(--t-fast) var(--ease);
}
.cap__row:focus-within { border-color: var(--amber); }

.cap__input {
  width: 100%;
  padding: var(--s-4);
  font-family: var(--mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.02em;
  color: var(--panel-ink);
}
.cap__input::placeholder { color: var(--panel-mute); }
.cap__input:invalid:not(:placeholder-shown) { color: var(--amber-warm); }
.cap__input:disabled { color: var(--panel-mute); cursor: not-allowed; }
.cap__input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.cap__btn {
  padding: var(--s-4) var(--s-6);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-press) var(--ease);
}
.cap__btn:hover { background: var(--amber); }
.cap__btn:focus-visible {
  background: var(--amber);
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
.cap__btn:active {
  background: var(--amber-deep);
  color: var(--paper);
  transform: translateY(1px);
}
.cap__btn:disabled {
  background: var(--panel-mute-2);
  color: var(--panel-mute);
  cursor: not-allowed;
  transform: none;
}

.cap__fine {
  margin-top: var(--s-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--panel-mute);
}
@media (max-width: 540px) {
  .cap__row { grid-template-columns: 1fr; }
  .cap__btn { justify-content: center; }
}


/* ---------- Footer meta ---------- */
.foot__rule {
  height: 1px;
  background: var(--panel-rule-2);
  margin: var(--s-20) 0 var(--s-6);
}
.foot__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel-mute);
}
.foot__brand { line-height: 0; }
.foot__logo  { height: 96px; width: auto; display: block; opacity: 0.92; }
@media (max-width: 720px) { .foot__logo { height: 72px; } }

.foot__copy    { color: var(--panel-mute); }
.foot__edition { color: var(--panel-mute); }

@media (min-width: 720px) {
  .foot__meta {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s-6);
  }
  .foot__copy    { text-align: left; }
  .foot__edition { text-align: right; }
}


/* ---------- Motion keyframes ---------- */
@keyframes enter   { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn  { to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes sparkActivate {
  to { color: var(--amber); }
}
@keyframes rowActivate    { to { background: rgba(232, 130, 26, 0.05); } }
@keyframes panelActivate  { to { border-top-color: var(--amber); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--amber-glow); }
  50%      { box-shadow: 0 0 0 7px rgba(232, 130, 26, 0); }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .mock__alert              { opacity: 1 !important; transform: none !important; }
  .haz__spark--active       { color: var(--amber); }
  .haz__caption             { opacity: 1; }
  .haz__status-text--calm   { opacity: 0; }
  .haz__status-text--active { opacity: 1; }
  .mock                     { border-top-color: var(--amber); }
}