/* ==========================================================================
   ch-depth.css — the DEPTH instrument shell (front page dark zone)
   Design language: "measurement, not decoration." A calibrated descent from
   surface pressure to treatment depth. Physically honest light: warm dies
   first, blue-teal survives, then near-black + bioluminescent points.
   Loads ONLY on the front page (see ch_enqueue_assets). Additive layer —
   never touches the Tailwind artifact or custom.css.
   ========================================================================== */

:root {
  --chd-abyss: #050f16;
  --chd-deep: #081a24;
  --chd-deep2: #0b2430;
  --chd-panel: #0d2936;
  --chd-line: #16404e;
  --chd-line-soft: #103440;
  --chd-o2: #43e6cf;            /* dissolved O2 — dark-ground accent only */
  --chd-o2-dim: #2a9d8f;        /* brand pressure-teal, continuity */
  --chd-o2-bright: #9df6e7;
  --chd-gold: #ecc873;
  --chd-ink: #eff8f8;
  --chd-mist: #a9c3c9;
  --chd-mist-dim: #6e8a92;
  --chd-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- the dark zone ladder (each step slightly deeper) ------------- */
.chd-zone { position: relative; color: var(--chd-mist); }
.chd-zone::selection, .chd-zone *::selection { background: rgba(67, 230, 207, .25); }
.chd-step-0 { background: linear-gradient(180deg, #0a1628 0%, var(--chd-deep2) 46%, var(--chd-deep) 100%); }
.chd-step-1 { background: linear-gradient(180deg, var(--chd-deep) 0%, #071823 100%); }
.chd-step-2 { background: linear-gradient(180deg, #071823 0%, var(--chd-abyss) 100%); }

/* faint static grain on the dark zone only (pre-baked, never animated) */
.chd-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ---------- typography: Fraunces display voice --------------------------- */
.chd-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--chd-ink);
  letter-spacing: -0.022em;
  line-height: 0.98;
  text-wrap: balance;
  font-weight: 560;
  font-size: clamp(2.5rem, 5.2vw, 4.7rem);
  margin: 0;
}
.chd-display em {
  font-style: italic;
  font-weight: 480;
  color: var(--chd-o2-bright);
  text-shadow: 0 0 46px rgba(67, 230, 207, .35);
}
.chd-h1 {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 430;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: 0.002em;
  color: var(--chd-mist);
  margin: 0;
}
.chd-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--chd-o2);
  font-weight: 500;
}

/* ---------- hero (the arrival) ------------------------------------------- */
.chd-hero {
  position: relative;
  min-height: min(92vh, 54rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 7rem 0 4.5rem;
}
@supports (min-height: 100svh) { .chd-hero { min-height: min(92svh, 54rem); } }
.chd-hero-grid { display: grid; gap: 2.8rem; align-items: center; }
@media (min-width: 1024px) {
  .chd-hero-grid { grid-template-columns: 1.04fr 0.96fr; gap: 3.4rem; }
}
/* Flex/grid items default to min-width:auto and won't shrink below their
   content's intrinsic size — the canvas panel's backing-store width would
   otherwise force the whole hero wider than a phone. min-width:0 lets them
   shrink to the track. (The classic flexbox overflow gotcha.) */
.chd-hero-grid > *, .chd-hero-copy > * { min-width: 0; }
#chd-field, #chd-corpus, #chd-net { max-width: 100%; }
.chd-hero-panel {
  box-shadow: 0 50px 110px -45px rgba(0, 0, 0, .8);
  background: linear-gradient(180deg, rgba(13, 41, 54, .6), rgba(6, 20, 28, .55));
}
.chd-panel-cap {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--chd-mist-dim); line-height: 1.7; margin: 0.7rem 0 0;
}
/* Mobile: reflow the hero so the corpus panel (the centerpiece) sits right
   after the lede, not buried under the CTAs + stat strip. display:contents
   lifts the copy children into the flex flow so the panel can be re-ordered
   between them. */
@media (max-width: 1023px) {
  .chd-zone { overflow-x: hidden; }
  .chd-hero { min-height: auto; padding: 5.5rem 0 3rem; }
  .chd-hero-grid { display: flex; flex-direction: column; gap: 1.4rem; }
  .chd-hero-copy { display: contents; }
  .chd-hero-copy > * { margin-top: 0 !important; }
  .chd-eyebrow { order: 1; }
  .chd-display { order: 2; }
  .chd-h1wrap { order: 3; }
  .chd-lede { order: 4; max-width: none; }
  .chd-hero-panel { order: 5; }
  .chd-cta-row { order: 6; }
  .chd-instr { order: 7; }
  #chd-field { height: clamp(230px, 40vh, 320px); }
  .chd-viz { padding: 1.1rem 1rem 0.85rem; }
  .chd-viz-title { font-size: 10px; letter-spacing: 0.1em; }
  .chd-panel-cap { font-size: 9px; letter-spacing: 0.05em; }
  .chd-viz-foot { font-size: 8.5px; letter-spacing: 0.03em; gap: 0.4rem 1rem; }
}
.chd-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 70% at 50% -12%, rgba(67, 230, 207, .085), transparent 62%),
    radial-gradient(60% 44% at 78% 88%, rgba(42, 157, 143, .06), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  /* oxygen is the product: one slow breath, compositor-only */
  .chd-hero-glow { animation: chd-breathe 7s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  @keyframes chd-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
}
#chd-field { width: 100%; height: clamp(280px, 42vh, 420px); display: block; }
.chd-hero-inner { position: relative; z-index: 2; width: 100%; }

.chd-lede {
  color: var(--chd-mist);
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.7;
  max-width: 46ch;
}

/* count strip — real values, server-rendered, tabular */
.chd-count {
  display: flex; align-items: flex-end; gap: 1.15rem; flex-wrap: wrap;
}
.chd-count-big {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 500;
  font-size: clamp(3rem, 7.4vw, 5.4rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--chd-ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 44px rgba(67, 230, 207, .22);
}
.chd-count-cap {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chd-mist-dim);
  line-height: 1.55;
  max-width: 24ch;
  padding-bottom: 0.35rem;
}

/* instrument stat strip */
.chd-instr {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--chd-line-soft);
  border: 1px solid var(--chd-line-soft); border-radius: 4px; overflow: hidden;
}
.chd-instr-cell { background: rgba(8, 26, 36, .82); padding: 1.05rem 1.15rem; position: relative; }
.chd-instr-cell::before {
  content: ""; position: absolute; left: 1.15rem; top: 0; width: 20px; height: 2px;
  background: var(--chd-o2); opacity: .75;
}
.chd-instr-v {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 600; color: var(--chd-ink); font-variant-numeric: tabular-nums;
}
.chd-instr-k {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--chd-mist-dim); margin-top: 0.45rem;
}
@media (max-width: 560px) {
  .chd-instr { grid-template-columns: 1fr; }
  .chd-instr-cell { padding: 0.85rem 1.05rem; }
  .chd-count { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
  .chd-count-cap { padding-bottom: 0; }
  .chd-eyebrow { font-size: 10px; letter-spacing: 0.16em; }
}

/* CTAs — keep site semantics, instrument styling */
.chd-cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }
.chd-btn {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; padding: 0.95rem 1.5rem; border-radius: 3px;
  transition: transform .3s var(--chd-ease), box-shadow .3s var(--chd-ease),
              background .3s var(--chd-ease), border-color .3s var(--chd-ease);
}
.chd-btn-solid { background: var(--chd-o2); color: #04191d; font-weight: 700; }
.chd-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(67, 230, 207, .55); }
.chd-btn-ghost { color: var(--chd-ink); border: 1px solid var(--chd-line); background: rgba(255,255,255,.02); }
.chd-btn-ghost:hover { border-color: var(--chd-o2); color: var(--chd-o2); }
.chd-btn:focus-visible { outline: 2px solid var(--chd-o2); outline-offset: 3px; }

/* scroll cue */
.chd-cue {
  position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--chd-mist-dim);
}
.chd-cue-tick {
  display: inline-block; width: 1px; height: 34px; vertical-align: middle;
  margin-right: 12px; background: linear-gradient(var(--chd-o2), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .chd-cue-tick { animation: chd-drop 2.6s var(--chd-ease) infinite; }
  @keyframes chd-drop {
    0% { opacity: 0; transform: translateY(-8px); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(10px); }
  }
}

/* ---------- depth-station markers ---------------------------------------- */
.chd-station {
  display: flex; align-items: center; gap: 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--chd-mist-dim);
  margin-bottom: 1.9rem;
}
.chd-station b { color: var(--chd-o2); font-weight: 600; }
.chd-station::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--chd-line), transparent);
}
.chd-station-light { color: #5a6c73; margin: 0 0 1.6rem; }
.chd-station-light b { color: #1f7d72; }
.chd-station-light::after { background: linear-gradient(90deg, #d7e3e4, transparent); }

.chd-sec-h {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 520;
  font-size: clamp(1.75rem, 4vw, 2.9rem);
  letter-spacing: -0.018em; line-height: 1.06;
  color: var(--chd-ink); text-wrap: balance; margin: 0;
}
.chd-sec-sub { color: var(--chd-mist); opacity: .88; max-width: 58ch; line-height: 1.7; margin: 1.1rem 0 0; }

/* ---------- instrument panels (charts) ------------------------------------ */
.chd-viz {
  border: 1px solid var(--chd-line); border-radius: 6px;
  background: linear-gradient(180deg, rgba(13, 41, 54, .52), rgba(8, 26, 36, .38));
  padding: 1.4rem 1.4rem 1rem;
  box-shadow: 0 36px 70px -38px rgba(0, 0, 0, .65);
}
.chd-viz-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.chd-viz-title { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--chd-mist); }
.chd-viz-live { font-size: 11px; letter-spacing: 0.05em; color: var(--chd-o2); font-variant-numeric: tabular-nums; }
.chd-viz-live::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--chd-o2); box-shadow: 0 0 9px var(--chd-o2);
  margin-right: 8px; vertical-align: baseline;
}
@media (prefers-reduced-motion: no-preference) {
  .chd-viz-live::before { animation: chd-pulse 2.6s var(--chd-ease) infinite; }
  @keyframes chd-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
}
#chd-corpus { width: 100%; height: 280px; display: block; }
#chd-net { width: 100%; height: 400px; display: block; }
@media (max-width: 640px) { #chd-corpus { height: 210px; } #chd-net { height: 300px; } }
.chd-viz-foot {
  display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: 0.08em; color: var(--chd-mist-dim); margin-top: 0.7rem;
}
.chd-legend {
  display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 0.9rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--chd-mist);
}
.chd-legend i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle;
}

/* ---------- the ATA gauge (fixed instrument, JS-bound) -------------------- */
#chd-gauge {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 40; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  opacity: 0; transition: opacity .5s var(--chd-ease);
}
#chd-gauge.chd-on { opacity: 1; }
.chd-gauge-rail { width: 2px; height: 128px; background: var(--chd-line-soft); border-radius: 2px; position: relative; overflow: hidden; }
.chd-gauge-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: linear-gradient(var(--chd-o2-bright), var(--chd-o2));
  box-shadow: 0 0 8px rgba(67, 230, 207, .6);
}
.chd-gauge-num { font-size: 11px; letter-spacing: 0.08em; color: var(--chd-o2); font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(5,15,22,.9); }
.chd-gauge-unit { font-size: 8.5px; letter-spacing: 0.18em; color: var(--chd-mist-dim); text-transform: uppercase; }
@media (max-width: 900px) { #chd-gauge { display: none; } }

/* ---------- the horizon (dark resolves to light) --------------------------- */
.chd-horizon {
  height: 9.5rem; position: relative;
  background: linear-gradient(180deg, var(--chd-abyss) 0%, #33555e 55%, #dfe9ea 86%, #F7FAFC 100%);
}
.chd-horizon::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  top: 52%; width: min(520px, 72vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(67, 230, 207, .5), transparent);
}

/* ---------- reveal choreography (extends the site's .reveal system) -------- */
html.js .chd-rise { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--chd-ease), transform .8s var(--chd-ease); }
html.js .chd-rise.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .chd-rise { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   D2 corpus-story: sticky graphic + 3 IO-driven scroll steps (no scroll-hijack).
   Step 0 publication trend, 1 Canadian subset overlay, 2 study-type mix. The
   chart renders its complete state at boot; reduced-motion unpins + statics.
   ========================================================================== */
.chd-story { position: relative; }
.chd-story-graphic { position: -webkit-sticky; position: sticky; top: 12vh; }
#chd-story-canvas { width: 100%; max-width: 100%; height: clamp(280px, 42vh, 380px); display: block; }
.chd-story-viz { margin: 0; }
.chd-story-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; color: var(--chd-o2); }
.chd-story-h { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; font-size: clamp(1.3rem, 3.2vw, 1.95rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--chd-ink); margin: 0.45rem 0 0.6rem; }
.chd-story-p { color: var(--chd-mist); font-size: clamp(0.98rem, 1.6vw, 1.08rem); line-height: 1.7; max-width: 44ch; margin: 0; }
@media (min-width: 901px) {
  .chd-story { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: start; }
  .chd-story-graphic { align-self: start; }
  .chd-story-step { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; }
}
@media (max-width: 900px) {
  .chd-story-graphic { top: 0.6rem; z-index: 3; padding-top: 0.4rem; }
  .chd-story-steps { margin-top: 1.5rem; }
  .chd-story-step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .chd-story-graphic { position: static; }
  .chd-story-step { min-height: 0; margin-bottom: 2.2rem; }
}