/* =====================================================================
   Food security 2026 — Post 5 "Slider"
   A system-dynamics model: one slider → five degrading gauges, with a
   cohesion threshold and hysteresis (recovery lags collapse).
   House style: AxiaOrigin × ValuesMove (see ../../CLAUDE.md)
   ===================================================================== */

:root {
  /* Palette — balanced between both brands (§3) */
  --aubergine: #2A2140;   /* banner spine + the dark model canvas */
  --crimson:   #FC2454;   /* AxiaOrigin accent — shared chrome + data-stress highlight */
  --purple:    #90489C;   /* ValuesMove accent — equal weight */
  --sky:       #00B4E4;   /* interaction: focus rings */
  --paper:     #F7F3EE;   /* soft warm tone — subtle fills */
  --page:      #EEEAE3;   /* page canvas — warm neutral */
  --surface:   #FFFFFF;   /* elevated surfaces: banner */
  --ink:       #241F2B;   /* body text */
  --ink-soft:  #5C5666;   /* secondary text */
  --hairline:  color-mix(in srgb, var(--ink) 14%, transparent);

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1100px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, p { margin: 0; }

/* Accessibility — skip link + focus rings (§12) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible,
input:focus-visible,
button:focus-visible,
.brand:focus-visible,
[role="meter"]:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =====================================================================
   BANNER (§5)
   ===================================================================== */
.banner {
  position: relative;
  z-index: 50;
  background: var(--surface);
  box-shadow:
    0 8px 24px -10px rgba(36, 31, 43, 0.20),
    0 2px 6px  -3px  rgba(36, 31, 43, 0.10);
}
.banner__spine { height: 4px; background: var(--aubergine); }

.banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner__home {
  position: absolute;
  left: clamp(1rem, 4vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.banner__home:hover {
  color: var(--crimson);
  border-color: color-mix(in srgb, var(--crimson) 45%, var(--hairline));
}
.banner__home-icon { width: 17px; height: 17px; flex: 0 0 auto; }

.banner__lockup { display: flex; align-items: center; gap: clamp(1.1rem, 4vw, 2.6rem); }
.brand { display: inline-flex; align-items: center; }
.brand img { width: auto; transition: opacity 0.15s ease; }
.brand:hover img { opacity: 0.78; }
.brand--axia   img { height: 28px; }
.brand--values img { height: 36px; }
.brand-divider { width: 1px; height: 34px; background: var(--hairline); }

/* "Why are we doing this?" tab (§14) */
.banner__why {
  position: absolute; right: clamp(1rem, 3vw, 2rem); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; border: 0; border-radius: 999px;
  --why-shadow: 0 6px 18px -6px color-mix(in srgb, var(--crimson) 55%, transparent);
  background: linear-gradient(135deg, var(--crimson), var(--purple));
  color: #fff; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: var(--why-shadow);
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.banner__why:hover { filter: brightness(1.06); box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--crimson) 62%, transparent); }
.banner__why-chevron { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 0.3s ease; }
.banner__why[aria-expanded="true"] .banner__why-chevron { transform: rotate(180deg); }
@keyframes whyPulse {
  0%   { box-shadow: var(--why-shadow), 0 0 0 0   color-mix(in srgb, var(--crimson) 50%, transparent); }
  70%  { box-shadow: var(--why-shadow), 0 0 0 13px color-mix(in srgb, var(--crimson) 0%, transparent); }
  100% { box-shadow: var(--why-shadow), 0 0 0 0   color-mix(in srgb, var(--crimson) 0%, transparent); }
}
.banner__why.is-hint { animation: whyPulse 1.5s ease-out 0s 3; }

.why-drawer {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--aubergine);
  box-shadow: 0 24px 40px -18px rgba(36, 31, 43, 0.55);
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s ease; z-index: 49;
}
.banner.is-why-open .why-drawer { grid-template-rows: 1fr; }
.why-drawer__clip { overflow: hidden; }
.why-drawer__content {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1.9rem, 5vw, 2.9rem) clamp(1.5rem, 4vw, 2.6rem);
}
.why-drawer__content h2 { margin: 0 0 1rem; font-family: var(--font-head); font-optical-sizing: auto;
  font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); font-weight: 600; color: var(--surface); }
.why-drawer__content p { margin: 0 0 0.9rem; max-width: 66ch; line-height: 1.65;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem); color: color-mix(in srgb, var(--paper) 82%, var(--aubergine)); }
.why-drawer__content p:last-child { margin-bottom: 0; }
.why-drawer__close {
  position: absolute; top: clamp(1rem, 2.5vw, 1.5rem); right: clamp(1rem, 3vw, 1.8rem);
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--paper) 32%, transparent); background: transparent;
  color: color-mix(in srgb, var(--paper) 75%, var(--aubergine)); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.why-drawer__close svg { width: 20px; height: 20px; }
.why-drawer__close:hover { color: #fff; border-color: var(--crimson); background: color-mix(in srgb, var(--crimson) 24%, transparent); }

/* =====================================================================
   INTRO (§6)
   ===================================================================== */
.intro {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2.6rem, 7vw, 4.5rem) 1.5rem clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
}
.intro__title {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.intro__lede {
  margin: clamp(1rem, 2.4vw, 1.5rem) auto 0;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* =====================================================================
   THE MODEL — dark aubergine canvas (§3)
   ===================================================================== */
.model {
  --on-dark:       var(--surface);
  --on-dark-body:  color-mix(in srgb, var(--paper) 80%, var(--aubergine));
  --on-dark-quiet: color-mix(in srgb, var(--paper) 56%, var(--aubergine));
  --on-dark-line:  color-mix(in srgb, var(--paper) 18%, transparent);

  background: var(--aubergine);
  color: var(--on-dark-body);
  padding: clamp(2.4rem, 6vw, 4rem) 1.5rem clamp(2.6rem, 6vw, 3.6rem);
}
.model__inner { max-width: var(--maxw); margin: 0 auto; }

/* ---- INPUT: the dial / slider ---- */
.dial { max-width: 720px; margin: 0 auto clamp(1.6rem, 4vw, 2.4rem); text-align: center; }
.dial__head {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
}
.dial__label {
  font-size: 0.95rem; letter-spacing: 0.01em; color: var(--on-dark-body);
  max-width: 34ch;
}
.dial__readout {
  font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1;
  font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); color: var(--crimson);
}
.dial__unit { font-size: 0.5em; margin-left: 0.05em; color: color-mix(in srgb, var(--crimson) 80%, var(--paper)); }

.dial__control { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1rem); }

.dial__arrow {
  flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--on-dark-line); border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 6%, transparent); color: var(--on-dark);
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dial__arrow svg { width: 20px; height: 20px; display: block; }
.dial__arrow:hover:not(:disabled) { color: var(--crimson); border-color: color-mix(in srgb, var(--crimson) 60%, transparent);
  background: color-mix(in srgb, var(--crimson) 12%, transparent); }
.dial__arrow:disabled { opacity: 0.3; cursor: default; }

.dial__track { position: relative; flex: 1 1 auto; display: flex; align-items: center; }

/* cohesion tipping-point tick at 55% */
.dial__threshold {
  position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 26px; pointer-events: none;
  background: color-mix(in srgb, var(--paper) 42%, transparent);
}
.dial__threshold::after {
  content: ""; position: absolute; left: 50%; top: -5px; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 50%, transparent);
}

/* the range input — crimson thumb + white ring (§7) */
.dial__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px;
  background: transparent; cursor: pointer; margin: 0;
}
.dial__range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 22%, transparent);
}
.dial__range::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 22%, transparent);
}
.dial__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--crimson); border: 3px solid #fff;
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.45);
}
.dial__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--crimson); border: 3px solid #fff;
  box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.45);
}

.dial__scale {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.65rem; padding: 0 38px;
  font-size: 0.75rem; color: var(--on-dark-quiet);
}
.dial__scale-mark {
  position: relative; left: 5%;            /* nudge toward the 55% tick */
  font-style: italic; letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
.dial__scale-mark.is-lit { color: color-mix(in srgb, var(--crimson) 80%, var(--paper)); }

/* ---- live interpretive caption ---- */
.model__caption {
  /* block flow so the sentence + <strong> stay one paragraph (flex would
     scatter each text run / bold span into separate items) */
  display: block; text-align: center;
  max-width: 42ch; margin: clamp(1.4rem, 4vw, 2.2rem) auto 0; min-height: 2.9em;
  font-family: var(--font-head); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(1.15rem, 0.98rem + 0.7vw, 1.5rem); line-height: 1.32;
  color: var(--on-dark);
}
.model__caption strong { color: var(--crimson); font-weight: 600; }

/* ---- connective cue (replaces the old web) ---- */
.gauges-head { text-align: center; margin: clamp(0.6rem, 2vw, 1.1rem) auto clamp(1.2rem, 3vw, 1.8rem); }
.gauges-head__cue {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: clamp(0.86rem, 0.8rem + 0.3vw, 1rem); letter-spacing: 0.01em; color: var(--on-dark-body);
}
.gauges-head__chevron { width: 17px; height: 17px; flex: 0 0 auto; color: var(--crimson); }
.gauges-head__scale {
  margin-top: 0.35rem; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark-quiet);
}

/* ---- OUTPUTS: five vertical draining columns ---- */
.gauges {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 2vw, 1.4rem);
}
.gauge { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }

.gauge__column {
  --d: 0;                                     /* damage 0→1, set per-frame by JS; the scene inherits it */
  position: relative; width: 100%; max-width: 100px;
  height: clamp(180px, 30vw, 248px);
  border: 1px solid color-mix(in srgb, var(--crimson) calc(var(--d) * 42%), var(--on-dark-line));
  border-top: 1px solid color-mix(in srgb, var(--paper) 32%, transparent);   /* "full health" cap */
  border-radius: 12px;
  background: color-mix(in srgb, #000 16%, var(--aubergine));   /* the reservoir the scene sits in */
  overflow: hidden;
  /* crimson frame-glow rises with damage — instant, since the JS easing supplies the smoothness */
  box-shadow:
    0 0 0 calc(var(--d) * 1.5px) color-mix(in srgb, var(--crimson) calc(var(--d) * 40%), transparent),
    0 14px 32px -14px color-mix(in srgb, var(--crimson) calc(var(--d) * 70%), transparent);
}

/* the living diorama fills the reservoir; it inherits --d from the column */
.gauge__column .scene {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}

.gauge__value {
  margin-top: 0.7rem; font-family: var(--font-head); font-optical-sizing: auto;
  font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem);
  line-height: 1; color: var(--on-dark);
}
.gauge__status {
  margin-top: 0.3rem; font-size: clamp(0.6rem, 0.54rem + 0.2vw, 0.72rem); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-quiet);
  transition: color 0.2s ease;
}
.gauge__status.is-warn { color: color-mix(in srgb, var(--crimson) 65%, var(--paper)); }
.gauge__status.is-crit { color: var(--crimson); }
.gauge__name {
  margin-top: 0.5rem; font-size: clamp(0.72rem, 0.62rem + 0.4vw, 0.92rem); font-weight: 600;
  line-height: 1.25; color: var(--on-dark); letter-spacing: 0.01em;
  /* reserve two lines so 1- and 2-line names keep the source lines aligned */
  min-height: 2.5em; display: flex; align-items: center; justify-content: center;
}
.gauge__source {
  margin-top: 0.2rem; font-size: clamp(0.62rem, 0.56rem + 0.2vw, 0.75rem); line-height: 1.3;
  color: var(--on-dark-quiet);
}

/* "tipping point" badge on Social Cohesion — pinned to the bar so it never
   reflows the labels; lit once insecurity crosses the threshold */
.gauge__tip {
  position: absolute; top: clamp(6px, 2%, 10px); left: 50%; transform: translateX(-50%);
  z-index: 4; display: none; padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; color: #fff; background: var(--crimson);
  box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--crimson) 70%, transparent);
}
.gauge.is-tipping .gauge__tip { display: inline-block; }
.gauge.is-tipping .gauge__name { color: var(--crimson); }
/* the crimson frame-glow is driven by --d for every column (see .gauge__column), so
   cohesion stays calm right up to the tipping point, then glows as it craters. */

/* ---- legend (visual key) + footnote ---- */
.gauge-legend { max-width: 60ch; margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; text-align: center; }
.gauge-key {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem clamp(1rem, 3vw, 1.8rem);
}
.gauge-key__item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--on-dark-body);
}
.gauge-key__sw { flex: 0 0 auto; width: 22px; height: 14px; border-radius: 3px; }
.gauge-key__sw--fill {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-top: 2px solid color-mix(in srgb, var(--paper) 92%, transparent);   /* matches the waterline */
}
.gauge-key__sw--scar {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--crimson) 30%, transparent),
    color-mix(in srgb, var(--crimson) 44%, transparent));
}
.gauge-legend__note {
  max-width: 52ch; margin: clamp(0.9rem, 2.5vw, 1.3rem) auto 0;
  font-size: 0.86rem; line-height: 1.55; color: var(--on-dark-quiet);
}
.model__footnote {
  max-width: 60ch; margin: clamp(2.2rem, 5vw, 3rem) auto 0; text-align: center;
  font-size: 0.8rem; line-height: 1.6; color: var(--on-dark-quiet);
}

/* ---- reopen link (sits inline after the legend note) ---- */
.insight-reopen {
  display: inline; margin-left: 0.35rem; padding: 0; border: 0; background: none;
  font: inherit; color: color-mix(in srgb, var(--paper) 70%, var(--aubergine));
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  transition: color 0.15s ease;
}
.insight-reopen:hover { color: var(--crimson); }

/* ---- the non-blocking insight callout (bottom-centred toast) ---- */
.insight {
  position: fixed; left: 50%; bottom: clamp(1rem, 4vw, 2rem);
  transform: translateX(-50%) translateY(10px);
  z-index: 60; width: min(440px, calc(100vw - 2rem));
  padding: 1.15rem 1.3rem 1.2rem 1.45rem;
  background: color-mix(in srgb, #000 30%, var(--aubergine));
  border: 1px solid color-mix(in srgb, var(--crimson) 38%, transparent);
  border-left: 4px solid var(--crimson);
  border-radius: 14px;
  box-shadow: 0 22px 55px -20px rgba(0, 0, 0, 0.7), 0 4px 14px -8px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.insight.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.insight__title {
  margin: 0 2rem 0.4rem 0; font-family: var(--font-head); font-optical-sizing: auto;
  font-weight: 600; font-size: 1.1rem; line-height: 1.25; color: var(--surface);
}
.insight__body {
  margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--on-dark-body);
}
.insight__close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  background: transparent; color: color-mix(in srgb, var(--paper) 72%, var(--aubergine));
  cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.insight__close svg { width: 17px; height: 17px; }
.insight__close:hover { color: #fff; border-color: var(--crimson); background: color-mix(in srgb, var(--crimson) 24%, transparent); }

/* =====================================================================
   CLOSING (§6)
   ===================================================================== */
.closing {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem clamp(3rem, 8vw, 5rem);
  text-align: center;
}
.closing__statement {
  font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.4; color: var(--ink);
}
.closing__body { margin: 24px 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink); opacity: 0.8; }
.cta-linkedin {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 32px; padding: 0.8rem 1.5rem;
  background: var(--crimson); color: #fff; font-family: var(--font-body);
  font-size: 1rem; font-weight: 500; line-height: 1; text-decoration: none;
  border-radius: 999px; transition: background 0.15s ease;
}
.cta-linkedin__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.cta-linkedin:hover { background: color-mix(in srgb, var(--crimson) 85%, #000); }

/* =====================================================================
   FOOTER (§15)
   ===================================================================== */
.footer {
  background: color-mix(in srgb, var(--ink) 82%, #000); color: var(--surface);
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3rem);
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(1.6rem, 5vw, 3rem) clamp(2rem, 6vw, 4rem); }
.footer__message { flex: 1 1 420px; max-width: 640px; }
.footer__lead { font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600;
  font-size: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem); line-height: 1.35; color: var(--surface); }
.footer__body { margin: clamp(0.9rem, 2vw, 1.15rem) 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.7;
  color: color-mix(in srgb, var(--paper) 74%, var(--aubergine)); }
.footer__body strong { color: var(--surface); font-weight: 600; }
.footer__contact { flex: 0 0 auto; }
.footer__contact-title { margin: 0 0 0.75rem; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--paper) 56%, var(--aubergine)); }
.footer__contact-list { list-style: none; margin: 0; padding: 0; }
.footer__contact-list li { margin: 0 0 0.5rem; } .footer__contact-list li:last-child { margin-bottom: 0; }
.footer__contact-list a { color: var(--surface); font-size: 1rem; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 26%, transparent); transition: color 0.15s ease, border-color 0.15s ease; }
.footer__contact-list a:hover { color: var(--crimson); border-color: var(--crimson); }
.footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 1.75rem; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(1.5rem, 4vw, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent); }
.footer__lockup { display: inline-flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.5rem); }
.footer__lockup .brand--axia img { height: 58px; } .footer__lockup .brand--values img { height: 38px; }
.footer__lockup .brand-divider { height: 44px; background: color-mix(in srgb, var(--paper) 22%, transparent); }
.footer__meta { font-size: 0.82rem; letter-spacing: 0.02em; color: color-mix(in srgb, var(--paper) 56%, var(--aubergine)); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* tablet & down — home pill + why tab drop into the banner column */
@media (max-width: 768px) {
  .banner__inner { position: static; flex-direction: column; gap: 0.85rem; text-align: center; }
  .banner__home { position: static; transform: none; }
  .banner__why  { position: static; transform: none; }
}

/* phones — keep logos side by side but trim their size */
@media (max-width: 600px) {
  .banner__lockup { gap: 1.2rem; }
  .brand--axia   img { height: 22px; }
  .brand--values img { height: 28px; }
  .brand-divider { height: 26px; }
}

/* narrow — the five columns reflow to two-up */
@media (max-width: 560px) {
  .gauges { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .gauge__column { max-width: 120px; }
  .gauge:last-child { grid-column: 1 / -1; }   /* centre the orphaned 5th column */
  .dial__scale { padding: 0 4px; }
}

/* Motion (§7, §12, §14) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* @@GAUGE-SCENES-START@@ */
/* =====================================================================
   GAUGE SCENES — living dioramas inside each column (driven by --d).
   Authored + tuned in the scratchpad harness; injected here. Each block
   is fully scoped under its own .scene--KEY selector.
   ===================================================================== */
/* ============================================================
   PUBLIC HEALTH gauge — clinical vitals (heart + ECG pulse)
   Drive: --d  0 = full health, 1 = flatline. No transitions on --d.
   ============================================================ */

.scene--publichealth {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  /* derived helpers (all instant, no transition allowed) */
  --ph-life: calc(1 - var(--d));            /* looping life amplitude */
  --ph-late: calc(var(--d) * var(--d));     /* subtle early, dramatic late */
}

/* ---------- monitor shell (tilts, loses composure, as it dies) ---------- */
.scene--publichealth .ph-bezel {
  fill: color-mix(in srgb, #000 34%, var(--aubergine));
  stroke: color-mix(in srgb, var(--paper) 16%, var(--aubergine));
  stroke-width: 1.4;
}
.scene--publichealth .ph-glass {
  fill: color-mix(in srgb, #000 52%, var(--aubergine));
}
.scene--publichealth .ph-monitor {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--ph-late) * -4deg));
}
.scene--publichealth .ph-stand {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--ph-late) * -4deg));
}
.scene--publichealth .ph-neck,
.scene--publichealth .ph-base {
  fill: color-mix(in srgb, #000 30%, var(--aubergine));
  stroke: color-mix(in srgb, var(--paper) 14%, var(--aubergine));
  stroke-width: 1;
}

/* ---------- graticule + vignette (glow fades as power is lost) ---------- */
.scene--publichealth .ph-gridline {
  fill: none;
  stroke: color-mix(in srgb, var(--paper) 10%, transparent);
  stroke-width: 0.6;
  opacity: calc(0.35 + 0.65 * var(--ph-life));
}
.scene--publichealth .ph-vig-top  { stop-color: color-mix(in srgb, var(--paper) 7%, transparent); }
.scene--publichealth .ph-vig-mid  { stop-color: transparent; }
.scene--publichealth .ph-vig-bot  { stop-color: color-mix(in srgb, #000 45%, transparent); }
.scene--publichealth .ph-vignette { pointer-events: none; }

/* ============================================================
   LIVE HEART — warm paper, beating; fades out with damage
   ============================================================ */
.scene--publichealth .ph-heart-live {
  opacity: var(--ph-life);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: publ-beat 1.15s ease-in-out infinite;
}
.scene--publichealth .ph-heart-fill { fill: var(--paper); }
.scene--publichealth .ph-heart-sheen {
  fill: none;
  stroke: var(--surface);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
}

/* steady beat, constant speed; amplitude rides on --ph-life so it quiets as it dies */
@keyframes publ-beat {
  0%,  100% { transform: scale(1); }
  14%       { transform: scale(calc(1 + 0.075 * var(--ph-life))); }
  28%       { transform: scale(calc(1 + 0.015 * var(--ph-life))); }
  42%       { transform: scale(calc(1 + 0.05  * var(--ph-life))); }
}

/* ============================================================
   DERELICT HEART — grey, dark, cracked open; fades IN with damage
   ============================================================ */
.scene--publichealth .ph-heart-dead {
  opacity: var(--d);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  /* it slumps and lists as it fails */
  transform: translateY(calc(var(--ph-late) * 3px)) rotate(calc(var(--ph-late) * 3deg));
}
.scene--publichealth .ph-heart-dark {
  /* a lifeless dim grey — kept light enough to read as a fractured silhouette
     against the dark screen, rather than dropping to near-black */
  fill: color-mix(in srgb, var(--paper) calc(26% - var(--d) * 8%), var(--aubergine));
  stroke: color-mix(in srgb, var(--paper) 30%, transparent);
  stroke-width: 1.1;
}

/* crimson fracture: a wound that unrolls open from the cleft downward */
.scene--publichealth .ph-fracture {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* main crack ~ 55 user units; draw it on with --d */
  stroke-dasharray: 55;
  stroke-dashoffset: calc(55 * (1 - var(--d)));
  filter: drop-shadow(0 0 calc(1px + 3px * var(--d)) color-mix(in srgb, var(--crimson) 70%, transparent));
}
.scene--publichealth .ph-fracture--branch {
  stroke-width: 1.8;
  /* branches open later than the main split */
  stroke-dasharray: 24;
  stroke-dashoffset: calc(24 * (1 - var(--ph-late)));
  filter: none;
}

/* ============================================================
   ECG PULSE — live QRS sweep vs. crimson flatline
   The QRS bounding box spans y~147..175; the y=170 baseline sits at
   ~82% down that box, so collapse the trace to 50% 82% to land the
   flatline exactly on the baseline (not floating above it).
   ============================================================ */
.scene--publichealth .ph-pulse {
  transform-box: fill-box;
  transform-origin: 50% 82%;
  transform: scaleY(calc(1 - 0.92 * var(--d)));
}
/* base trace: strong steady read at d=0, shifting crimson under strain */
.scene--publichealth .ph-pulse-live {
  fill: none;
  stroke: color-mix(in srgb, var(--crimson) calc(var(--d) * 70%), var(--paper));
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.3 + 0.7 * var(--ph-life));
}
/* bright cursor blip: sweeps across at constant speed, the "live" pulse */
.scene--publichealth .ph-pulse-cursor {
  fill: none;
  stroke: var(--surface);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--ph-life);
  stroke-dasharray: 16 164;
  animation: publ-sweep 1.9s linear infinite;
}
/* crimson flatline: fades in late, bold and dead-still at d=1 */
.scene--publichealth .ph-pulse-dead {
  fill: none;
  stroke: var(--crimson);
  stroke-width: calc(2.4 + 0.8 * var(--d));
  stroke-linecap: round;
  opacity: var(--ph-late);
  filter: drop-shadow(0 0 calc(1px + 4px * var(--d)) color-mix(in srgb, var(--crimson) 70%, transparent));
}
@keyframes publ-sweep {
  0%   { stroke-dashoffset: 180; }
  100% { stroke-dashoffset: 0; }
}

/* ---------- reduced motion: freeze loops, keep the --d pose ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene--publichealth .ph-heart-live,
  .scene--publichealth .ph-pulse-cursor {
    animation: none;
  }
  /* pin the cursor blip near a beat so a live read still shows statically */
  .scene--publichealth .ph-pulse-cursor { stroke-dashoffset: 140; }
}

/* ===== Economic Equality — a balance scale collapsing (key: equality) ===== */
.scene--equality { display: block; width: 100%; height: 100%; }

/* --- base / ground --- */
.scene--equality .eq-soil {
  fill: color-mix(in srgb, #000 34%, var(--aubergine));
}
.scene--equality .eq-groundline {
  stroke: color-mix(in srgb, var(--paper) 26%, var(--aubergine));
  stroke-width: 1.4; stroke-linecap: round;
}
.scene--equality .eq-foot-shadow {
  fill: color-mix(in srgb, #000 46%, var(--aubergine));
  opacity: 0.55;
}

/* --- gradients / structural fills --- */
.scene--equality .eq-post-a { stop-color: color-mix(in srgb, var(--paper) 62%, var(--aubergine)); }
.scene--equality .eq-post-b { stop-color: var(--surface); }
.scene--equality .eq-column { fill: url(#equality-post); }
.scene--equality .eq-foot   { fill: color-mix(in srgb, var(--paper) 74%, var(--aubergine)); }
.scene--equality .eq-pivot-cap  { fill: var(--paper); }
.scene--equality .eq-pivot-bolt {
  fill: color-mix(in srgb, #000 30%, var(--aubergine));
}

.scene--equality .eq-beam-bar {
  fill: var(--surface);
  stroke: color-mix(in srgb, #000 22%, var(--aubergine));
  stroke-width: 0.5;
}
.scene--equality .eq-beam-end { fill: var(--paper); }

.scene--equality .eq-chain {
  stroke: color-mix(in srgb, var(--paper) 58%, var(--aubergine));
  stroke-width: 1.1; stroke-linecap: round;
}
.scene--equality .eq-pan-cup {
  fill: color-mix(in srgb, var(--paper) 40%, var(--aubergine));
  stroke: var(--paper); stroke-width: 0.9;
}
.scene--equality .eq-pan-rim {
  stroke: var(--surface); stroke-width: 1.6; stroke-linecap: round;
}

/* loads */
.scene--equality .eq-block {
  fill: var(--paper);
  stroke: color-mix(in srgb, #000 20%, var(--aubergine));
  stroke-width: 0.4;
}
.scene--equality .eq-coin { fill: var(--surface); }
.scene--equality .eq-block-heavy {
  fill: color-mix(in srgb, var(--paper) 78%, var(--crimson));
  stroke: color-mix(in srgb, #000 22%, var(--aubergine));
  stroke-width: 0.4;
}
.scene--equality .eq-coin-heavy { fill: color-mix(in srgb, var(--paper) 72%, var(--crimson)); }

/* dead / spilled pieces on the base */
.scene--equality .eq-block-dead {
  fill: color-mix(in srgb, #000 20%, var(--aubergine));
  stroke: color-mix(in srgb, var(--paper) 20%, var(--aubergine));
  stroke-width: 0.5;
}
.scene--equality .eq-coin-dead {
  fill: color-mix(in srgb, #000 12%, var(--aubergine));
  stroke: color-mix(in srgb, var(--paper) 18%, var(--aubergine));
  stroke-width: 0.5;
}

/* =========================================================
   DAMAGE MECHANICS — all INSTANT (JS eases --d; no transitions here)
   pivot at (50,72); ground at 214
   ========================================================= */

/* the post leans as things fall apart (d^2 keeps it subtle mid-range) */
.scene--equality .eq-post-lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--d) * var(--d) * -8deg));
}

/* THE BEAM tilts about the pivot (50,72). positive = right side sinks.
   A late translate (d^3) drops the heavy pan down toward the base so the
   fully-tipped pose lands the loaded pan onto the spilled blocks. */
.scene--equality .eq-beam {
  transform-box: view-box;
  transform-origin: 50px 72px;
  transform:
    translateY(calc(var(--d) * var(--d) * var(--d) * 34px))
    rotate(calc(var(--d) * 66deg));
}

/* pans hang plumb: counter-rotate each plumb group about its own beam-end
   anchor in exact SVG units so chains stay pinned to the beam tips */
.scene--equality .eq-plumb {
  transform-box: view-box;
  transform: rotate(calc(var(--d) * -66deg));
}
.scene--equality .eq-plumb-left  { transform-origin: 20px 72px; }
.scene--equality .eq-plumb-right { transform-origin: 80px 72px; }

/* left load drains away (equality lost) — shrinks slightly as it vanishes */
.scene--equality .eq-load-left {
  opacity: calc(1 - var(--d));
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(calc(1 - 0.35 * var(--d)));
}

/* right hoard accumulates (wealth concentrates) — grows late (d^2) */
.scene--equality .eq-hoard {
  opacity: calc(var(--d) * var(--d));
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scale(calc(0.55 + 0.45 * var(--d)));
}

/* crimson strain at the pivot */
.scene--equality .eq-wound-hot { stop-color: var(--crimson); }
.scene--equality .eq-wound-mid { stop-color: color-mix(in srgb, var(--crimson) 70%, transparent); }
.scene--equality .eq-wound-out { stop-color: color-mix(in srgb, var(--crimson) 0%, transparent); }
.scene--equality .eq-wound-glow {
  fill: url(#equality-wound);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(calc(0.6 + 0.7 * var(--d)));
  /* base opacity from --d; the strain pulse (below) modulates it while alive */
  opacity: calc(var(--d) * 0.9);
}
.scene--equality .eq-crack {
  stroke: var(--crimson);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  opacity: var(--d);
  /* cracks unroll from the pivot as damage rises */
  stroke-dasharray: 16;
  stroke-dashoffset: calc(16 * (1 - var(--d)));
}

/* spilled dead blocks on the base grow in over the back half of the collapse */
.scene--equality .eq-spill {
  opacity: calc(var(--d) * var(--d));
}

/* =========================================================
   LIVING MOTION — constant speed, amplitude/opacity fades with (1-d)
   ========================================================= */

/* gentle breathing sway of the whole standing assembly */
.scene--equality .eq-standing {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: equality-breathe 6s ease-in-out infinite;
}
@keyframes equality-breathe {
  0%, 100% { transform: rotate(-0.5deg); }
  50%      { transform: rotate(0.5deg); }
}

/* the balanced coins shimmer softly while alive; fade with (1-d) so life stops
   as the system collapses (the hoarded crimson coins do NOT shimmer) */
.scene--equality .eq-load-right .eq-coin,
.scene--equality .eq-load-left  .eq-coin {
  animation: equality-shimmer 3.4s ease-in-out infinite;
}
@keyframes equality-shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.68; }
}

/* the wound pulses like strain under tension (only visible once d>0) */
.scene--equality .eq-wound-glow {
  animation: equality-strain 1.8s ease-in-out infinite;
}
@keyframes equality-strain {
  0%, 100% { opacity: calc(var(--d) * 0.9); }
  50%      { opacity: calc(var(--d) * 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .scene--equality .eq-standing,
  .scene--equality .eq-load-right .eq-coin,
  .scene--equality .eq-load-left  .eq-coin,
  .scene--equality .eq-wound-glow {
    animation: none;
  }
}

/* ============ SCENE: trust — classical civic building ============ */

.scene--trust{ display:block; width:100%; height:100%; }

/* transform-box on every element we rotate / translate / scale */
.scene--trust .t-heart,
.scene--trust .t-col,
.scene--trust .t-pediment,
.scene--trust .t-crack,
.scene--trust .t-split,
.scene--trust .t-rubble,
.scene--trust .t-pole-group,
.scene--trust .t-flag-group,
.scene--trust .t-flag-live,
.scene--trust .t-flag-torn,
.scene--trust .t-flutter{
  transform-box: fill-box;
}

/* ---- palette (classes only — never fill="…") ---- */
.scene--trust .fill-surface{ fill: var(--surface); }
.scene--trust .fill-paper{ fill: var(--paper); }
.scene--trust .fill-paper-dim{ fill: color-mix(in srgb, var(--paper) 62%, var(--aubergine)); }
.scene--trust .fill-paper-dark{ fill: color-mix(in srgb, var(--paper) 40%, var(--aubergine)); }
.scene--trust .fill-dead{ fill: color-mix(in srgb, #000 46%, var(--aubergine)); }
.scene--trust .fill-deader{ fill: color-mix(in srgb, #000 64%, var(--aubergine)); }
.scene--trust .fill-shadow{ fill: color-mix(in srgb, #000 42%, var(--aubergine)); }
.scene--trust .fill-void{ fill: color-mix(in srgb, #000 66%, var(--aubergine)); }
.scene--trust .fill-crimson{ fill: var(--crimson); }
.scene--trust .fill-crimson-dim{ fill: color-mix(in srgb, var(--crimson) 55%, var(--aubergine)); }
.scene--trust .stroke-crimson{ stroke: var(--crimson); fill: none; stroke-linecap: round; }

/* ---- stepped base endures, only dimming a little ---- */
.scene--trust .t-base{ opacity: calc(1 - 0.30 * var(--d)); }

/* ---- cross-fade: live holds through mid then drops; ruin arrives late (d^3)
   so the middle reads as a damaged-but-standing building, not a muddy overlap ---- */
.scene--trust .t-live{ opacity: calc(1 - var(--d) * var(--d)); }
.scene--trust .t-derelict{ opacity: calc(var(--d) * var(--d) * var(--d)); }

/* ---- whole temple leans a touch as it fails (subtle early, dramatic late).
   The lean is baked into the breathe keyframes so it survives while animating. ---- */
.scene--trust .t-heart{
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--d) * var(--d) * 4deg));
  animation: trust-breathe 3.6s ease-in-out infinite;
}

/* ---- columns: three take a faint lean (per-column via --lean) ---- */
.scene--trust .t-col-lean{
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--d) * var(--lean)));
}
/* the rightmost column buckles: shortens + leans inward ---- */
.scene--trust .t-col-buckle{
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 - var(--d) * var(--d) * 0.5)) rotate(calc(var(--d) * -7deg));
}

/* ---- pediment tilts + sinks toward the failing (right) column ---- */
.scene--trust .t-pediment{
  transform-origin: 12% 100%;
  transform: rotate(calc(var(--d) * 8deg)) translateY(calc(var(--d) * var(--d) * 10px));
}

/* ---- crimson cracks climb the columns (unroll via dashoffset) ---- */
.scene--trust .t-crack{
  stroke-width: 1.6;
  stroke-dasharray: 76;
  stroke-dashoffset: calc(76 - var(--d) * 76);
  opacity: calc(0.28 + 0.72 * var(--d));
}
.scene--trust .t-crack-heavy{ stroke-width: 2.2; }

/* ---- pediment split arrives later (d²) ---- */
.scene--trust .t-split{
  stroke-width: 2;
  stroke-dasharray: 30;
  stroke-dashoffset: calc(30 - var(--d) * var(--d) * 30);
  opacity: var(--d);
}

/* ---- rubble drops onto the steps as damage rises ---- */
.scene--trust .t-rubble{
  transform-origin: 50% 50%;
  transform: translateY(calc((1 - var(--d)) * -12px));
}

/* ---- flag + pole: pole bends over then the whole thing is gone at collapse ---- */
.scene--trust .t-pole-group{
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--d) * 16deg)) translateY(calc(var(--d) * var(--d) * 6px));
  opacity: calc(1 - var(--d) * var(--d) * var(--d));
}
/* live pennant droops with --d, fades out as it dies ---- */
.scene--trust .t-flag-group{
  transform-origin: 0% 0%;
  transform: rotate(calc(var(--d) * 34deg)) translateY(calc(var(--d) * 4px));
}
.scene--trust .t-flag-live{ opacity: calc((1 - var(--d)) * (1 - var(--d))); }
/* torn shred blooms through the mid-range as the flag rips, then withers ---- */
.scene--trust .t-flag-torn{
  transform-origin: 0% 50%;
  transform: scale(calc(1 - var(--d) * 0.4));
  opacity: calc(var(--d) * (1 - var(--d)) * 3.4);
}

/* ---- living motion (constant speed; amplitude fades via --d) ---- */
/* quiet heartbeat on the whole temple; lean carried in both keyframes */
@keyframes trust-breathe{
  0%,100%{ transform: rotate(calc(var(--d) * var(--d) * 4deg)) scaleY(1); }
  50%    { transform: rotate(calc(var(--d) * var(--d) * 4deg)) scaleY(calc(1 + (1 - var(--d)) * 0.012)); }
}
/* pennant flutters at full health; amplitude quiets as it dies */
.scene--trust .t-flutter{
  transform-origin: 0% 50%;
  animation: trust-flutter 3.2s ease-in-out infinite;
}
@keyframes trust-flutter{
  0%,100%{ transform: skewX(0deg) scaleY(1); }
  35%    { transform: skewX(calc((1 - var(--d)) * -8deg)) scaleY(calc(1 - (1 - var(--d)) * 0.04)); }
  70%    { transform: skewX(calc((1 - var(--d)) *  6deg)) scaleY(calc(1 + (1 - var(--d)) * 0.03)); }
}

/* ---- reduced motion: kill loops; static --d pose still reads ---- */
@media (prefers-reduced-motion: reduce){
  .scene--trust .t-heart,
  .scene--trust .t-flutter{ animation: none; }
}

/* ============================================================
   SOCIAL COHESION — two clustered communities bridged across a
   seam. Holds fully through the tipping point, then the bridges
   snap, a crimson rip tears down the middle, and the halves part.
   Drive: --d 0=whole, 1=torn. No transitions on --d.
   ============================================================ */
.scene--cohesion {
  display: block; width: 100%; height: 100%;
  --coh-life: calc(1 - var(--d));                       /* living amplitude */
  --coh-tear: clamp(0, calc((var(--d) - 0.5) * 2), 1);  /* 0 until the tipping point, then 0->1 */
}

/* ---- internal bonds: hold, tint faintly crimson under strain ---- */
.scene--cohesion .coh-thread {
  fill: none;
  stroke: color-mix(in srgb, var(--crimson) calc(var(--d) * 35%), var(--paper));
  stroke-width: 1.5; stroke-linecap: round;
  opacity: calc(0.5 - var(--d) * 0.12);
}

/* ---- bridges: the rungs across the seam. Full until the tear, then gone ---- */
.scene--cohesion .coh-bridge {
  fill: none;
  stroke: color-mix(in srgb, var(--crimson) calc(var(--d) * 60%), var(--paper));
  stroke-width: calc(1.9px - var(--d) * 0.5px);
  stroke-linecap: round;
  opacity: calc((0.72 - var(--d) * 0.1) * (1 - var(--coh-tear)));
}

/* ---- nodes: paper dots that redden and drift as the fabric fails ---- */
.scene--cohesion .coh-node {
  fill: color-mix(in srgb, var(--paper) calc(100% - var(--d) * 30%), var(--crimson));
  stroke: color-mix(in srgb, var(--surface) 55%, transparent);
  stroke-width: 1;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: coh-breathe 3.4s ease-in-out infinite;
}
.scene--cohesion .coh-node:nth-of-type(2) { animation-delay: -0.5s; }
.scene--cohesion .coh-node:nth-of-type(3) { animation-delay: -1.1s; }
.scene--cohesion .coh-node:nth-of-type(4) { animation-delay: -1.8s; }

@keyframes coh-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(calc(1 + 0.08 * var(--coh-life))); }
}

/* ---- frayed crimson thread-ends: appear on the inner nodes as bridges snap ---- */
.scene--cohesion .coh-fray {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: var(--coh-tear);
}

/* ---- the two halves pull apart once torn ---- */
.scene--cohesion .coh-half {
  transform-box: fill-box; transform-origin: 50% 50%;
}
.scene--cohesion .coh-left {
  transform: translateX(calc(var(--coh-tear) * -11px)) rotate(calc(var(--coh-tear) * -3deg));
}
.scene--cohesion .coh-right {
  transform: translateX(calc(var(--coh-tear) * 11px)) rotate(calc(var(--coh-tear) * 3deg));
}

/* ---- the crimson rip down the seam ---- */
.scene--cohesion .coh-rip {
  fill: url(#coh-rip);
  opacity: var(--coh-tear);
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scaleX(calc(0.5 + 0.5 * var(--coh-tear))) scaleY(calc(0.7 + 0.3 * var(--coh-tear)));
}
.scene--cohesion .coh-rip-glow {
  fill: var(--crimson);
  opacity: calc(var(--coh-tear) * 0.5);
  filter: url(#coh-blur);
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scaleX(calc(0.5 + 0.5 * var(--coh-tear)));
}
.scene--cohesion .coh-rip-a { stop-color: color-mix(in srgb, var(--crimson) 55%, transparent); }
.scene--cohesion .coh-rip-b { stop-color: var(--crimson); }

@media (prefers-reduced-motion: reduce) {
  .scene--cohesion .coh-node { animation: none; }
}

/* ===================== PRODUCTIVITY GAUGE ===================== */
.scene--productivity{ display:block; width:100%; height:100%; overflow:visible; }

/* ---- palette classes (light = alive, crimson = strain, dark = dead) ---- */
.scene--productivity .prod-soil{ fill: color-mix(in srgb, #000 44%, var(--aubergine)); }
.scene--productivity .prod-ground-line{
  fill: color-mix(in srgb, var(--paper) 30%, var(--aubergine));
  opacity: calc(1 - 0.5 * var(--d));
}
.scene--productivity .prod-fill-surface{ fill: var(--surface); }
.scene--productivity .prod-wall{ fill: color-mix(in srgb, var(--paper) 66%, var(--aubergine)); }
.scene--productivity .prod-fill-mid{ fill: color-mix(in srgb, var(--paper) 74%, var(--aubergine)); }
.scene--productivity .prod-fill-dim{ fill: color-mix(in srgb, var(--paper) 34%, var(--aubergine)); }
.scene--productivity .prod-band{ fill: color-mix(in srgb, var(--paper) 30%, var(--aubergine)); }
.scene--productivity .prod-eave{ fill: color-mix(in srgb, var(--paper) 55%, var(--aubergine)); }
.scene--productivity .prod-door{ fill: color-mix(in srgb, #000 30%, var(--aubergine)); }

/* the whole plant darkens toward derelict as damage rises (instant, no transition) */
.scene--productivity .prod-building,
.scene--productivity .prod-stack-body{
  filter: brightness(calc(1 - var(--d) * 0.42));
}

/* =======================================================
   1) SMOKESTACK — leans as d rises, crimson crack unrolls up
   ======================================================= */
.scene--productivity .prod-stack{
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.scene--productivity .prod-stack-body{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  /* non-linear lean: subtle mid-range, tips late; capped so the tip stays in-column */
  transform: rotate(calc(var(--d) * var(--d) * 9deg));
}
.scene--productivity .prod-stack-crack{
  fill:none;
  stroke: var(--crimson);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 160;
  stroke-dashoffset: calc(160 - var(--d) * 160);   /* unrolls up from the base */
  opacity: calc(var(--d) * 1.2);
}

/* ---- rising smoke: constant-speed loop, opacity fades (gone well before d=1) ---- */
.scene--productivity .prod-smoke{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--d) * var(--d) * 10px)); /* drifts with the tipping stack */
  opacity: calc(1 - var(--d) * 1.6);
}
.scene--productivity .prod-puff{ fill: url(#prod-smoke-grad); }
.scene--productivity .prod-puff1{ animation: prod-rise 3.2s linear infinite; }
.scene--productivity .prod-puff2{ animation: prod-rise 3.2s linear infinite; animation-delay: -1.05s; }
.scene--productivity .prod-puff3{ animation: prod-rise 3.2s linear infinite; animation-delay: -2.1s; }
@keyframes prod-rise{
  0%   { transform: translate(0px, 4px)   scale(0.4); opacity: 0; }
  22%  { opacity: .8; }
  100% { transform: translate(-7px, -50px) scale(1.5); opacity: 0; }
}

/* =======================================================
   2) ROOF — sawtooth sags / skews / flattens as d rises
   ======================================================= */
.scene--productivity .prod-roof{
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transform: translateY(calc(var(--d) * 5px)) skewX(calc(var(--d) * -6deg)) scaleY(calc(1 - var(--d) * 0.26));
}

/* =======================================================
   3) WINDOWS — warm-lit layer cross-fades to dark, staggered
   ======================================================= */
.scene--productivity .prod-win-frame{ fill: color-mix(in srgb, var(--paper) 30%, var(--aubergine)); }
.scene--productivity .prod-win-lit{
  fill: var(--surface);                       /* warm glow, brighter than the wall */
  animation: prod-flicker 4.5s ease-in-out infinite;
}
.scene--productivity .prod-win-dark{
  fill: color-mix(in srgb, #000 55%, var(--aubergine));
  opacity: 0;
}
/* each window snuffs at its own threshold — a staircase of go-dark moments */
.scene--productivity .prod-win-a .prod-win-dark{ opacity: clamp(0, calc((var(--d) - 0.10) * 6), 1); }
.scene--productivity .prod-win-b .prod-win-dark{ opacity: clamp(0, calc((var(--d) - 0.30) * 6), 1); }
.scene--productivity .prod-win-c .prod-win-dark{ opacity: clamp(0, calc((var(--d) - 0.20) * 6), 1); }
.scene--productivity .prod-win-d .prod-win-dark{ opacity: clamp(0, calc((var(--d) - 0.46) * 6), 1); }
.scene--productivity .prod-win-e .prod-win-dark{ opacity: clamp(0, calc((var(--d) - 0.36) * 6), 1); }
.scene--productivity .prod-win-f .prod-win-dark{ opacity: clamp(0, calc((var(--d) - 0.60) * 6), 1); }
.scene--productivity .prod-windows{ opacity: calc(1 - var(--d) * 0.12); }
@keyframes prod-flicker{
  0%,100%{ opacity: .9; } 45%{ opacity: 1; } 70%{ opacity: .82; }
}

/* =======================================================
   4) WALL CRACKS — crimson wound spreads up the wall with d
   ======================================================= */
.scene--productivity .prod-wall-crack{
  fill:none;
  stroke: var(--crimson);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  stroke-dasharray: 120;
  stroke-dashoffset: calc(120 - var(--d) * 120);
  opacity: calc(var(--d) * var(--d) * 1.3);
}
.scene--productivity .prod-wall-crack2{ stroke-dashoffset: calc(120 - clamp(0, (var(--d) - 0.15) * 1.4, 1) * 120); }
.scene--productivity .prod-wall-crack3{ stroke-width: 1.6; stroke-dashoffset: calc(120 - clamp(0, (var(--d) - 0.4) * 2, 1) * 120); }

/* the whole building leans slightly + settles as it fails */
.scene--productivity .prod-building{
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--d) * var(--d) * -2.5deg)) translateY(calc(var(--d) * 2px));
}

/* =======================================================
   5) GEAR — a live spinning gear cross-fades to a seized,
      greyed, crimson-cracked jammed gear as d rises.
      (animation-duration is NEVER driven by --d; the two layers cross-fade,
       so the work visibly STOPS instead of spinning forever.)
   ======================================================= */
/* the gear-wrap tracks the building's lean so it stays mounted on the gable */
.scene--productivity .prod-gear-wrap{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(calc(var(--d) * var(--d) * -2.5deg)) translateY(calc(var(--d) * 2px));
}
.scene--productivity .prod-gear{
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* LIVE gear: smooth constant spin, bright, then hands off to the jam */
.scene--productivity .prod-gear-live{ opacity: clamp(0, calc(1 - (var(--d) - 0.35) * 2.2), 1); }
.scene--productivity .prod-gear-teeth{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: prod-spin 6s linear infinite;
}
.scene--productivity .prod-gear-body{ fill: color-mix(in srgb, var(--paper) 70%, var(--aubergine)); }
.scene--productivity .prod-gear-tooth{ fill: color-mix(in srgb, var(--paper) 62%, var(--aubergine)); }
.scene--productivity .prod-gear-hub{ fill: color-mix(in srgb, #000 22%, var(--aubergine)); }
@keyframes prod-spin{ to{ transform: rotate(360deg); } }

/* DEAD gear: static, seized, greyed metal; fades in as the live gear fails,
   tilted a touch off-tooth and drifting more late so the swap reads as a jam catching */
.scene--productivity .prod-gear-dead{
  opacity: clamp(0, calc((var(--d) - 0.3) * 2), 1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(calc(-4deg + var(--d) * var(--d) * -5deg));
}
.scene--productivity .prod-gear-body-dead{ fill: color-mix(in srgb, var(--paper) 28%, var(--aubergine)); }
.scene--productivity .prod-gear-tooth-dead{ fill: color-mix(in srgb, var(--paper) 22%, var(--aubergine)); }
.scene--productivity .prod-gear-hub-dead{ fill: color-mix(in srgb, #000 42%, var(--aubergine)); }

/* crimson seize-crack unrolls across the dead gear once damage takes hold */
.scene--productivity .prod-gear-crack{
  fill:none; stroke: var(--crimson); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: calc(40 - clamp(0, (var(--d) - 0.25) * 2, 1) * 40);
  opacity: clamp(0, calc((var(--d) - 0.25) * 2.2), 1);
}

/* reduced motion: freeze every loop; the static --d pose still reads on its own */
@media (prefers-reduced-motion: reduce){
  .scene--productivity .prod-puff1,
  .scene--productivity .prod-puff2,
  .scene--productivity .prod-puff3,
  .scene--productivity .prod-gear-teeth,
  .scene--productivity .prod-win-lit{ animation: none; }
}
/* @@GAUGE-SCENES-END@@ */