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

  :root {
    --forest: #0f2418;          /* deep forest green — the "night" */
    --deep: #081710;            /* deepest green — almost black */
    --sage: #2D5F48;            /* medium forest green */
    --mint: #C5E8D1;            /* soft brand mint. yetrise signature */
    --mint-soft: #E4F2E9;       /* palest mint */
    --gold: #c5e8d1;            /* sunrise gold — accent for hope/awakening */
    --cream: #FAF8F5;
    --text-dark: #1F4A36;       /* dark green for text on mint */
    --text-body: #333333;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, sans-serif;
  }

  html { scroll-behavior: smooth; }
  body { background: var(--forest); color: var(--mint-soft); font-family: var(--sans); line-height: 1.7; overflow-x: hidden; }

  /* ── Full-viewport sections ── */
  .scene {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
  }
  .scene--cream { background: var(--mint); color: var(--text-dark); }
  .scene--dark { background: var(--forest); color: var(--mint-soft); }
  .scene--deep { background: var(--deep); color: var(--mint-soft); }
  .scene--gold-accent { background: var(--forest); }

  /* ── Reveal animations — slower, filmic translate + fade ── */
  .reveal {
    opacity: 0;
    transform: translateY(56px);
    transition:
      opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal-delay-1 { transition-delay: 0.18s; }
  .reveal-delay-2 { transition-delay: 0.36s; }
  .reveal-delay-3 { transition-delay: 0.54s; }
  .reveal-delay-4 { transition-delay: 0.72s; }
  .reveal-delay-5 { transition-delay: 0.90s; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { transform: none; transition: opacity 0.4s ease; }
  }

  /* ── Typography ── */
  .scene-label {
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
    font-weight: 500;
  }
  .scene-heading {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    font-weight: 900;
    line-height: 1.1;
    max-width: 900px;
    text-align: center;
    margin-bottom: 28px;
  }
  .scene-subheading {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    max-width: 700px;
    text-align: center;
    margin-bottom: 28px;
    opacity: 0.85;
  }
  .scene-body {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    font-weight: 300;
    line-height: 1.9;
    max-width: 680px;
    text-align: center;
  }
  .scene-body p + p { margin-top: 1.4em; }

  /* ── Record quote (from medical records, not documentary) ── */
  .record-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    max-width: 700px;
    text-align: center;
    line-height: 1.6;
    padding: 32px 0;
    position: relative;
    color: var(--gold);
  }
  .record-quote::before {
    content: '\201C';
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.3;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--serif);
  }
  .record-quote .source {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    margin-top: 14px;
    opacity: 0.7;
    color: var(--mint);
  }

  /* ── Hero section (Option A: full-bleed photo, title below) ── */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    background: var(--forest);
    overflow: hidden;
  }
  .hero-image {
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 560px;
    background: url('/assets/vendor/d84bc2f6993bea3b15db8368.jpg') center/cover no-repeat;
  }
  /* Subtle bottom fade so the photo blends into the forest-dark title block below */
  .hero-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    background: linear-gradient(to bottom, rgba(15,36,24,0) 0%, rgba(15,36,24,0.55) 70%, var(--forest) 100%);
    pointer-events: none;
  }
  .hero-overlay { display: none; }
  .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
    margin: -18vh auto 0;
    padding: 0 24px 27px;
  }
  /* Tighten the gap between the hero scroll cue and the first scene */
  .hero + .scene {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 40px;
  }
  .hero-title {
    font-family: var(--serif);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 24px;
    color: var(--mint);
  }
  .hero-title span { color: var(--gold); }
  .hero-sub {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.7;
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
  }
  .scroll-cue {
    margin-top: 50px;
    opacity: 0.4;
    animation: pulse 2s ease-in-out infinite;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  @keyframes pulse {
    0%, 100% { opacity: 0.2; transform: translateY(0); }
    50% { opacity: 0.6; transform: translateY(6px); }
  }

  /* ── Photo placeholder sections ── */
  .photo-break {
    width: 100%;
    height: 50vh;
    min-height: 320px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f2418 0%, #1F4A36 50%, #0f2418 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .photo-break::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(197, 232, 209, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(197, 232, 209, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  .photo-placeholder-label {
    position: relative;
    z-index: 2;
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.5;
    padding: 14px 28px;
    border: 1px solid rgba(197, 232, 209, 0.3);
    border-radius: 3px;
    background: rgba(15, 36, 24, 0.6);
    text-align: center;
    max-width: 80%;
  }
  .photo-placeholder-label span {
    display: block;
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 6px;
    letter-spacing: 0.15em;
    font-style: italic;
    text-transform: none;
  }
  /* Evidence-image variant of photo-break — used for medical imaging
     (e.g. 3D CT reconstructions) that should read clearly as evidence.
     No green wash, black background to match the scan, thin edge fades
     to forest so it still bridges the surrounding scenes. */
  .photo-break--evidence {
    display: block;
    position: relative;
    background-color: #000;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  .photo-break--evidence img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* Caption is a small overlay in the image's bottom-right corner — same
     subtle-attribution treatment as the Unsplash credit, never leaves the
     image frame, so there is no banding below the photo. */
  .photo-break--evidence .photo-caption {
    position: absolute;
    right: 20px;
    bottom: 16px;
    z-index: 3;
    max-width: min(420px, 60%);
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-align: right;
    color: rgba(197, 232, 209, 0.55);
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    pointer-events: none;
  }
  /* Top strip: forest scene above → image black. Single 2-stop gradient. */
  .photo-break--evidence::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 120px;
    background: linear-gradient(to bottom, var(--forest), rgba(15,36,24,0));
    background-size: auto;
    pointer-events: none;
    z-index: 2;
  }
  /* Bottom strip: image black → deep (matches next scene's edge). */
  .photo-break--evidence::after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: 120px;
    background: linear-gradient(to top, var(--deep), rgba(8,23,16,0));
    pointer-events: none;
    z-index: 2;
  }

  /* Triptych variant — three images side-by-side, used for recovery sequence.
     Sits between cream (mint) scene above and dark (forest) scene below.
     Top fade bridges from mint; bottom fade bridges to forest. Stacks to
     a single column on narrow viewports. */
  .photo-break--triptych {
    display: block;
    position: relative;
    background-color: var(--mint);
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  .photo-break--triptych .triptych-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
  }
  .photo-break--triptych .triptych-grid img {
    display: block;
    width: 100%;
    height: 60vh;
    max-height: 560px;
    min-height: 320px;
    object-fit: cover;
    object-position: center;
  }
  /* Top strip: mint scene above → triptych. */
  .photo-break--triptych::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 90px;
    background: linear-gradient(to bottom, var(--mint), rgba(197,232,209,0));
    pointer-events: none;
    z-index: 2;
  }
  /* Bottom strip: triptych → forest scene below. */
  .photo-break--triptych::after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: 120px;
    background: linear-gradient(to top, var(--forest), rgba(15,36,24,0));
    pointer-events: none;
    z-index: 2;
  }
  @media (max-width: 720px) {
    .photo-break--triptych .triptych-grid {
      grid-template-columns: 1fr;
    }
    .photo-break--triptych .triptych-grid img {
      height: 50vh;
      min-height: 260px;
    }
  }

  /* Real image version of photo-break — used as a tonal bridge between scenes.
     The photo is tinted with the same forest-green wash as the original hero,
     and its top/bottom edges fade into the surrounding forest-dark so it reads
     as an atmospheric transition rather than a standalone image. */
  .photo-break--image {
    background-color: var(--forest);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 42vh;
    min-height: 280px;
  }
  .photo-break--image::before {
    display: block;
    background-image:
      linear-gradient(to bottom,
        var(--forest) 0%,
        rgba(15,36,24,0) 20%,
        rgba(15,36,24,0) 80%,
        var(--forest) 100%),
      linear-gradient(135deg, rgba(15,36,24,0.55), rgba(15,36,24,0.75));
    background-size: auto, auto;
  }
  .photo-credit {
    position: absolute;
    right: 14px;
    bottom: 10px;
    z-index: 2;
    font-family: var(--sans);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.35;
  }

  /* ── Stat counters ── */
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 40px;
    max-width: 900px;
    width: 100%;
    margin: 40px auto;
  }
  .stat-card {
    text-align: center;
    padding: 30px 16px;
    border: 1px solid rgba(197, 232, 209, 0.2);
    border-radius: 4px;
    background: rgba(197, 232, 209, 0.03);
  }
  .stat-number {
    font-family: var(--serif);
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 8px;
  }
  .stat-label {
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  .stat-source {
    font-size: 0.65rem;
    opacity: 0.35;
    margin-top: 6px;
    font-style: italic;
  }

  /* ── Timeline ── */
  .timeline {
    max-width: 700px;
    width: 100%;
    position: relative;
    padding-left: 40px;
  }
  .timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  }
  .timeline-entry {
    position: relative;
    margin-bottom: 36px;
    padding-left: 20px;
  }
  .timeline-entry::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 14px rgba(197, 232, 209, 0.5);
  }
  .timeline-date {
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 4px;
  }
  .timeline-text {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    opacity: 0.85;
  }
  .timeline-text em {
    color: var(--gold);
    font-style: normal;
    opacity: 1;
  }
  .timeline-ref {
    font-size: 0.65rem;
    opacity: 0.35;
    margin-top: 4px;
  }

  /* ── Fracture grid ── */
  .fracture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-width: 900px;
    width: 100%;
    margin: 30px auto 0;
  }
  .fracture-item {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 300;
    padding: 12px 16px;
    border-left: 2px solid var(--mint);
    background: rgba(197, 232, 209, 0.06);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .fracture-item.visible {
    opacity: 0.8;
    transform: translateX(0);
  }

  /* ── Lab results grid ── */
  .labs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    max-width: 1050px;
    width: 100%;
    margin: 30px auto 0;
  }
  .lab-card {
    background: rgba(197, 232, 209, 0.04);
    border: 1px solid rgba(197, 232, 209, 0.15);
    border-radius: 4px;
    padding: 20px 18px;
    text-align: left;
  }
  .lab-name {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 6px;
  }
  .lab-value {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 4px;
  }
  .lab-value.critical { color: #e67063; }
  .lab-value.elevated { color: var(--gold); }
  .lab-unit { font-size: 0.85rem; font-weight: normal; opacity: 0.5; margin-left: 3px; }
  .lab-normal {
    font-size: 0.7rem;
    opacity: 0.45;
    margin-bottom: 10px;
    font-style: italic;
  }
  .lab-meaning {
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.5;
    opacity: 0.85;
  }

  /* ── Skeleton diagram ── */
  .skeleton-wrap {
    max-width: 900px;
    width: 100%;
    margin: 40px auto 0;
    position: relative;
  }
  .skeleton-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .skeleton-svg .bone {
    stroke: rgba(197, 232, 209, 0.35);
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
  }
  .skeleton-svg .bone-broken {
    stroke: var(--gold);
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(197,232,209,0.6));
  }
  .skeleton-svg .fracture-dot {
    fill: var(--gold);
    filter: drop-shadow(0 0 10px rgba(197,232,209,0.8));
  }
  .skeleton-svg .callout-line {
    stroke: rgba(197,232,209,0.5);
    stroke-width: 1;
    stroke-dasharray: 3,3;
  }
  .skeleton-svg .callout-text {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    fill: var(--mint);
    opacity: 0.9;
  }
  .skeleton-svg .callout-text-gold {
    fill: var(--gold);
    font-weight: 600;
  }

  /* ── Mortality bar ── */
  .mortality-bar-wrap {
    max-width: 600px;
    width: 100%;
    margin: 30px auto;
  }
  .mortality-bar {
    height: 8px;
    background: rgba(197, 232, 209, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
  }
  .mortality-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mint), var(--gold), #c0392b);
    border-radius: 4px;
    width: 0%;
    transition: width 2s ease;
  }
  .mortality-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 6px;
  }

  /* ── Mortality row list ── */
  .mortality-timeline {
    margin: 30px auto;
  }
  .mort-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(197, 232, 209, 0.08);
    font-size: 0.88rem;
    font-weight: 300;
  }
  .mort-day { opacity: 0.85; }
  .mort-pct {
    font-family: 'Courier New', monospace;
    color: var(--gold);
    font-weight: 600;
  }

  /* ── ICP monitor ── */
  .icp-monitor {
    max-width: 500px;
    width: 100%;
    background: #081a10;
    border: 1px solid rgba(197, 232, 209, 0.15);
    border-radius: 8px;
    padding: 24px;
    margin: 30px auto;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 40px rgba(0,0,0,0.4);
  }
  .icp-header {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mint);
    margin-bottom: 12px;
  }
  .icp-reading {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(197, 232, 209, 0.08);
  }
  .icp-reading.critical { color: #e67063; }
  .icp-reading.elevated { color: var(--gold); }
  .icp-reading.normal { color: var(--mint); }
  .icp-unit {
    font-size: 0.9rem;
    font-weight: normal;
    opacity: 0.5;
    margin-left: 4px;
  }
  .icp-note {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 10px;
    text-align: center;
  }

  /* ── Heartbeat line ── */
  .heartbeat-line {
    width: 100%;
    max-width: 600px;
    height: 60px;
    margin: 20px auto;
    overflow: hidden;
  }
  .heartbeat-line svg { width: 100%; height: 100%; }
  .heartbeat-path {
    stroke: var(--mint);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 3s ease;
  }
  .heartbeat-path.animate { stroke-dashoffset: 0; }

  /* ── Awakening glow (sunrise emerging from forest night) ── */
  .scene--awakening {
    background: radial-gradient(ellipse at center, #2a2010 0%, #153020 50%, #081710 100%);
  }
  .glow-text {
    text-shadow: 0 0 40px rgba(197,232,209, 0.35), 0 0 80px rgba(197,232,209, 0.15);
  }

  /* ── Divider ── */
  .divider {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 28px auto;
    opacity: 0.6;
  }

  /* ── Footer ── */
  .footer {
    text-align: center;
    padding: 60px 24px;
    background: var(--deep);
    border-top: 1px solid rgba(197, 232, 209, 0.15);
  }
  .footer-logo {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mint);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
  }
  .footer-text {
    font-family: var(--sans);
    font-size: 0.8rem;
    opacity: 0.5;
    line-height: 1.8;
    color: var(--mint-soft);
  }
  .footer-scripture {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--gold);
    opacity: 0.75;
    margin-top: 28px;
    line-height: 1.4;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Source badge ── */
  .source-badge {
    display: inline-block;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid rgba(197, 232, 209, 0.3);
    border-radius: 3px;
    color: var(--mint);
    opacity: 0.6;
    margin-top: 8px;
  }

  /* ── Collapsible explainer ── */
  .explainer {
    max-width: 720px;
    width: 100%;
    margin: 28px 0;
    background: rgba(15, 36, 24, 0.45);
    border: 1px solid rgba(197, 232, 209, 0.18);
    border-left: 3px solid var(--gold);
    border-radius: 4px;
    overflow: hidden;
    transition: border-left-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  .explainer.light {
    background: rgba(197, 232, 209, 0.08);
  }
  .explainer:hover {
    border-left-color: var(--mint);
    box-shadow: 0 2px 18px rgba(197,232,209, 0.12);
  }
  .explainer-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 22px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    cursor: pointer;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--gold);
    line-height: 1.4;
  }
  .explainer-toggle:hover { color: var(--mint); }
  .explainer-toggle .explainer-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.75rem;
    color: var(--gold);
    transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
  }
  .explainer.open .explainer-icon {
    transform: rotate(45deg);
    background: var(--gold);
    color: var(--forest);
  }
  .explainer-hint {
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-left: auto;
    margin-right: 12px;
  }
  .explainer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }
  .explainer.open .explainer-body {
    max-height: 2600px;
  }
  .explainer-content {
    padding: 4px 22px 22px;
    font-family: var(--sans);
    font-size: 0.98rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--mint-soft);
    opacity: 0.9;
    border-top: 1px solid rgba(197, 232, 209, 0.12);
    padding-top: 18px;
  }
  .explainer-content p { margin-bottom: 14px; }
  .explainer-content p:last-child { margin-bottom: 0; }
  .explainer-content .tiny-source {
    font-size: 0.75rem;
    opacity: 0.55;
    font-style: italic;
    margin-top: 10px;
  }
  .explainer.light .explainer-content { color: var(--text-dark, #1F4A36); }

  /* ── X-ray viewer with annotation overlay ── */
  .xray-viewer {
    position: relative;
    max-width: 680px;
    margin: 26px auto 14px;
    background: #000;
    border: 1px solid rgba(197, 232, 209, 0.25);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  }
  .xray-viewer img {
    display: block;
    width: 100%;
    height: auto;
  }
  .xray-viewer .xray-missing {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(197, 232, 209, 0.4);
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    padding: 24px;
  }
  .xray-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  .xray-viewer.no-annot .xray-overlay { opacity: 0; }
  .xray-overlay svg { width: 100%; height: 100%; }
  .xray-marker-circle { fill: none; stroke: var(--gold); stroke-width: 0.45; opacity: 0.9; }
  .xray-marker-line { stroke: var(--gold); stroke-width: 0.25; opacity: 0.75; }
  .xray-marker-text {
    font-family: 'Inter', sans-serif;
    font-size: 2.1px;
    font-weight: 600;
    fill: var(--gold);
    letter-spacing: 0.04em;
  }
  .xray-marker-text.note {
    font-weight: 400;
    fill: rgba(197, 232, 209, 0.85);
    font-size: 1.8px;
  }
  .xray-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(15, 36, 24, 0.7);
    border-top: 1px solid rgba(197, 232, 209, 0.15);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.85;
  }
  .xray-toggle-annot {
    background: none;
    border: 1px solid rgba(197, 232, 209, 0.35);
    color: var(--mint);
    padding: 5px 12px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .xray-toggle-annot:hover { border-color: var(--gold); color: var(--gold); }
  .xray-caption {
    font-size: 0.75rem;
    color: rgba(197, 232, 209, 0.7);
    font-style: italic;
    text-align: center;
    margin-top: 8px;
    line-height: 1.5;
  }

  /* ── Animated Mortality Days ── */
  .mortality-stage {
    margin: 32px auto 0;
    max-width: 720px;
    width: 100%;
    background: rgba(15, 36, 24, 0.55);
    border: 1px solid rgba(197, 232, 209, 0.15);
    border-radius: 6px;
    padding: 28px 22px 22px;
  }
  .mortality-stage-header {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.6;
    margin-bottom: 18px;
    text-align: center;
  }
  .mortality-days {
    position: relative;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mort-day-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    width: 88%;
    max-width: 520px;
    background: linear-gradient(135deg, rgba(15, 36, 24, 0.9), rgba(31, 74, 54, 0.85));
    border: 1px solid rgba(197,232,209, 0.3);
    border-radius: 6px;
    padding: 20px 24px;
    text-align: center;
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
  }
  .mort-day-card.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    box-shadow: 0 0 40px rgba(197,232,209, 0.2);
  }
  .mort-day-card .md-day {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.7;
    margin-bottom: 10px;
  }
  .mort-day-card .md-pct {
    font-family: var(--serif);
    font-size: clamp(2.6rem, 7vw, 3.8rem);
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  .mort-day-card .md-note {
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--mint-soft);
    opacity: 0.85;
    line-height: 1.5;
  }
  .mort-day-card.awake .md-pct {
    color: #7ed4a5;
    font-style: italic;
  }
  .mort-day-card.awake {
    border-color: rgba(126, 212, 165, 0.5);
    box-shadow: 0 0 60px rgba(126, 212, 165, 0.25);
  }

  .mortality-track {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 22px;
    flex-wrap: nowrap;
  }
  .mortality-track .dot {
    flex: 1;
    min-width: 0;
    height: 26px;
    border: 1px solid rgba(197, 232, 209, 0.2);
    border-radius: 3px;
    background: rgba(15, 36, 24, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.4;
    cursor: pointer;
    transition: all 0.4s ease;
  }
  .mortality-track .dot:hover { opacity: 0.75; }
  .mortality-track .dot.active {
    opacity: 1;
    background: var(--gold);
    color: var(--forest);
    border-color: var(--gold);
    transform: scaleY(1.35);
    font-weight: 600;
    box-shadow: 0 0 16px rgba(197,232,209, 0.4);
  }
  .mortality-track .dot.awake {
    background: #7ed4a5;
    border-color: #7ed4a5;
    color: var(--forest);
  }
  .mortality-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .mortality-controls button {
    background: none;
    border: 1px solid rgba(197, 232, 209, 0.3);
    color: var(--mint);
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    transition: all 0.3s ease;
  }
  .mortality-controls button:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  /* ── Responsive ── */
  @media (max-width: 768px) {
    .scene { padding: 60px 20px; }
    .stat-grid { grid-template-columns: 1fr; gap: 14px; max-width: 340px; }
    .stat-card { padding: 20px 14px; }
    .stat-number { font-size: 2.6rem; }
    .stat-label { font-size: 0.72rem; }
    .fracture-grid { grid-template-columns: 1fr; }
    .timeline { padding-left: 30px; }
    .hero-image { height: 72vh; min-height: 420px; }
    .hero-content { margin-top: -24vh; padding: 0 20px 56px; }
    .explainer-toggle { font-size: 0.92rem; padding: 12px 14px; }
    .explainer-hint { display: none; }
    .explainer-content { padding: 4px 14px 16px; font-size: 0.88rem; }
    .mortality-days { height: 220px; }
    .mortality-track .dot { font-size: 0.45rem; }
    .mort-day-card .md-pct { font-size: 2.2rem; }
    /* Hide "0 prior medical history" stat on mobile */
    .stat-card.hide-mobile { display: none; }
    /* Reduce reveal animation distance on mobile */
    .reveal { transform: translateY(24px); transition-duration: 0.8s; }
    /* Hide SVG skeleton on mobile, show vertical fracture list instead */
    .skeleton-wrap { display: none; }
    .fracture-list-mobile { display: flex !important; }
    /* Evidence caption slightly larger on mobile */
    .evidence-caption { font-size: 0.68rem; padding: 12px 16px 8px; }
    /* Labs grid single column on mobile */
    .labs-grid { grid-template-columns: 1fr; gap: 12px; }
    .lab-card { padding: 16px 14px; }
    .lab-value { font-size: 1.6rem; }
  }

  /* ── Closing manifesto block ── */
  .cta-manifesto {
    max-width: 720px;
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.4vw, 1.5rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--mint);
    margin: 0 auto;
    padding: 10px 20px;
  }
  .cta-manifesto p { margin-bottom: 18px; }
  .cta-manifesto p:last-child { margin-bottom: 0; }
  .cta-final {
    font-size: clamp(1.3rem, 2.8vw, 1.8rem);
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
  }
  .yr-gold {
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  /* ── Mobile fracture list (replaces SVG on small screens) ── */
  .fracture-list-mobile {
    display: none;
    flex-direction: column;
    gap: 0;
    max-width: 400px;
    width: 100%;
    margin: 30px auto 0;
  }
  .fl-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(197,232,209, 0.15);
  }
  .fl-item:last-child { border-bottom: none; }
  .fl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(197,232,209, 0.6);
  }
  .fl-text {
    flex: 1;
  }
  .fl-name {
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gold);
    line-height: 1.3;
    margin-bottom: 2px;
  }
  .fl-desc {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--mint);
    opacity: 0.7;
    line-height: 1.4;
  }

  /* ── Caption above evidence images ── */
  .evidence-caption {
    text-align: center;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 16px 20px 10px;
    background: var(--forest);
    opacity: 0.85;
  }

  /* ── Reading progress bar ──
     Thin gold line pinned to the top of the viewport; its width is driven
     by window scroll percentage via JS. Sits above everything (z-index 200). */
  .reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(197,232,209, 0.55);
    z-index: 200;
    transition: width 0.12s linear;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .reading-progress { transition: none; }
  }

  /* ── Read-time badge (top of hero) ──
     Subtle mint-on-forest chip sitting above the "yetrise Presents" label. */
  .read-time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    margin-bottom: 18px;
    padding: 6px 14px;
    border: 1px solid rgba(197, 232, 209, 0.28);
    border-radius: 999px;
    background: rgba(197, 232, 209, 0.05);
    font-family: var(--sans);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mint);
    opacity: 0.82;
  }
  .read-time::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 6px rgba(197,232,209, 0.6);
  }
  /* ── Back to top: floating button (desktop only) ── */
  .back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  }
  .back-to-top.visible {
    opacity: 0.85;
    pointer-events: auto;
    transform: translateY(0);
  }
  .back-to-top:hover {
    opacity: 1;
    background: #2d5f48;
    transform: translateY(-2px);
  }
  .back-to-top svg { width: 20px; height: 20px; }

  /* Hide our floating button on mobile — Wix's own back-to-top
     handles it from the parent page where position:fixed works. */
  @media (max-width: 768px) {
    .back-to-top { display: none !important; }
  }
/* ── Closing CTA row ── */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border: 1.5px solid rgba(197, 232, 209, 0.4);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mint);
  transition: transform 0.3s ease, letter-spacing 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.cta-link:hover {
  transform: translateY(-1px);
  letter-spacing: 0.24em;
  border-color: var(--gold);
}
.cta-link--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest);
}
.cta-link--gold:hover {
  background: #2d5f48;
}
@media (max-width: 600px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-link { justify-content: center; }
}