/* --- DESIGN SYSTEM TOKENS --- */
    :root{
      --paper:#fff1e5;
      --ink:#111111;
      --muted:#57514c;
      --line:rgba(17,17,17,0.14);
      --soft:rgba(17,17,17,0.04);
      --accent:#1f6b57;
      --accent-soft:rgba(31,107,87,0.07);
      --accent-mid:rgba(31,107,87,0.42);
      --accent-line:rgba(31,107,87,0.16);
      --accent-strong:#174f41;
      --charcoal:#2a2a2a;      
      --nav-offset: 135px;
      --motion-fast:0.22s;
      --motion-base:0.42s;
      --motion-slow:0.72s;
      --ease:cubic-bezier(0.2, 0.65, 0.2, 1);
    }
    
    html{scroll-behavior:smooth}
    body{
      background: transparent;
      color:var(--ink);
      font-family:Inter,system-ui,sans-serif;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      line-height:1.65;
    }

    /* === SCENE MANAGER AMBIENT LAYER === */
    #ambient-layer {
      background: var(--paper);
      transition: background 1.5s ease, backdrop-filter 1.5s ease;
    }
    /* True paper texture overlay */
    #ambient-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
      opacity: 0.02;
      mix-blend-mode: multiply;
      pointer-events: none;
      transition: opacity 1.5s ease;
    }

    /* Scene Background states */
    body[data-scene="hero-cover"] #ambient-layer { background: var(--paper); }
    body[data-scene="snapshot"] #ambient-layer { background: var(--paper); }
    body[data-scene="collapse"] #ambient-layer { background: rgba(255,241,229,0.5); backdrop-filter: blur(8px); }
    body[data-scene="spread"] #ambient-layer { background: #ffffff; }
    body[data-scene="spread"] #ambient-layer::after { opacity: 0.01; }
    body[data-scene="pressure"] #ambient-layer { background: rgba(17,17,17,0.03); }
    body[data-scene="distribution"] #ambient-layer { background: rgba(31,107,87,0.02); }
    body[data-scene="failure"] #ambient-layer { background: rgba(17,17,17,0.04); }
    body[data-scene="breath"] #ambient-layer { background: var(--paper); }
    body[data-scene="residual"] #ambient-layer { background: #ffffff; }

    /* Typography Components */
    .font-display{font-family:"Playfair Display",serif;}
    .font-mono{font-family:"JetBrains Mono",monospace; letter-spacing:-0.02em;}

    /* Utility Grids */
    .paper-grid{
      background-image:
        linear-gradient(to right, rgba(17,17,17,0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(17,17,17,0.02) 1px, transparent 1px);
      background-size:36px 36px;
    }
    .sticky-subnav{
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(248, 246, 240, 0.96);
    }
    
    /* Layout Elements */
    .section-kicker{ color:var(--accent); font-weight:800; text-transform:uppercase; font-size:0.72rem; letter-spacing:0.12em; }
    .section-rule{ width:2.75rem; height:2px; background:var(--accent); display:inline-block; margin-right:0.8rem; transform:translateY(-0.2rem); }
    
    /* Cards */
    .ink-card{
      background:#ffffff;
      border:1px solid var(--line);
      box-shadow:0 2px 4px rgba(0,0,0,0.04);
      transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease), opacity var(--motion-base) var(--ease), background var(--motion-base) var(--ease);
      will-change: transform, opacity; 
      position: relative;
    }
    .ink-card:hover, section.is-active .ink-card { z-index: 10; }
    .ink-card:hover{ transform:translateY(-1px) !important; box-shadow:0 4px 8px rgba(0,0,0,0.06) !important; border-color:var(--accent-line); background:#ffffff; }
    .lead-card{ border-top:2px solid var(--accent); background:#ffffff; }
    .data-card{ border-radius:6px; }
    .feature-card{ border-radius:10px; }

    /* Metrics */
    .metric-title{ font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:800; color:var(--muted); }
    .metric-row{ display:flex; justify-content:space-between; gap:1rem; padding:0.6rem 0; border-top:1px solid var(--line); }
    .metric-row:first-child{ border-top:none; padding-top:0; }
    .metric-label{ color:var(--muted); font-size:0.93rem; line-height:1.35; font-weight:500;}
    .metric-value{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.08rem; color:var(--ink); white-space:nowrap; letter-spacing:-0.035em; }

    /* Hero Section Constraints */
    .hero-section{ min-height:calc(100vh - 118px); display:flex; align-items:center; }
    .hero-gradient{ background: radial-gradient(circle at 20% 12%, rgba(31,107,87,0.10), transparent 30%), radial-gradient(circle at 82% 10%, rgba(17,17,17,0.045), transparent 28%), linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.08)); }
    .hero-canvas{ mix-blend-mode:multiply; opacity:0.42; will-change: opacity, transform; }
    .hero-fade{ background:linear-gradient(180deg, rgba(255,241,229,0) 0%, rgba(255,241,229,0.86) 100%); }
    canvas { transform: translateZ(0); }

    /* Chart Boundaries */
    .chart-wrap{height:360px}
    .mini-chart-wrap{height:250px}
    .chart-feature{height:400px}
    .chart-note{ font-size:0.83rem; line-height:1.5; color:rgba(17,17,17,0.72); transition:color 0.3s ease; }

    /* Typography Special cases */
    .number-xl{ font-family:"JetBrains Mono",monospace; font-size:2.8rem; font-weight:700; letter-spacing:-0.055em; line-height:1; }
    #hero70 { letter-spacing: -0.08em; }
    .number-hero{ font-family:"JetBrains Mono",monospace; font-weight:800; color:rgba(31,107,87,0.08); user-select:none; will-change: transform; }

    .pill{ padding:0.42rem 0.8rem; border-radius:999px; border:1px solid var(--line); background:#ffffff; font-size:0.78rem; font-weight:600; }
    .pill-accent{ border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-strong); }

    .pull-quote{ font-family:"Playfair Display",serif; font-size:clamp(2.4rem, 4.2vw, 3.4rem); line-height:1.08; text-align:center; letter-spacing:-0.02em; position:relative; z-index:2; }
    .pull-quote-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; background:rgba(255,255,255,0.24); }

    nav a.active{ color:var(--accent-strong); border-bottom:1px solid var(--accent); }
    .mast-rule{ height:6px; background:var(--ink); }

    .table-meta{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.14em; color:rgba(17,17,17,0.56); font-weight:800; opacity:0.75; }

    /* Interaction states */
    .section-panel{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    section{ position:relative; }
    section.is-active .section-kicker{ color:var(--accent-strong); }
    section.is-active .lead-card{ border-color:var(--accent-line); box-shadow:0 4px 12px rgba(0,0,0,0.05); }
    section.is-active .chart-note{ color:rgba(17,17,17,0.84); }

    /* Chart Annotation Animation */
    .chart-annotation { opacity: 0; transform: translateX(8px); transition: opacity 1.2s ease 0.6s, transform 1.2s ease 0.6s; }
    section.is-active .chart-annotation { opacity: 1; transform: translateX(0); }

    /* Micro-animations */
    .reveal{ opacity:0; transform:translateY(18px); transition: opacity 0.8s cubic-bezier(0.2, 0.65, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.65, 0.2, 1); }
    .reveal-in{ opacity:1; transform:translateY(0); }
    .reveal-delay-1{ transition-delay:0.08s; }
    .reveal-delay-2{ transition-delay:0.16s; }
    .type-reveal{ opacity:0; transform:translateY(8px); transition:opacity 0.6s ease,transform 0.6s ease; }
    .type-reveal.in{ opacity:1; transform:none; }

    .section-tight{ padding-top:3.5rem; padding-bottom:3.5rem; }
    .section-open{ padding-top:5.5rem; padding-bottom:5.5rem; }
    .card-compact{ padding:1.25rem; }
    .hollow-middle-card{ background:rgba(31,107,87,0.03); border-color:var(--accent-line); }

    /* Layout overlays */
    .distribution-ghost{ position:absolute; right:1.5rem; top:1rem; font-family:"JetBrains Mono",monospace; font-size:clamp(6rem,12vw,10rem); font-weight:800; letter-spacing:-0.08em; opacity:0; pointer-events:none; color:var(--ink); z-index:0; }
    section::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(to right, rgba(17,17,17,0.01) 1px, transparent 1px); background-size:48px 48px; opacity:0.16; pointer-events:none; }
    
    #stress .ink-card, #frictions .ink-card, #inequality .ink-card, #resilience .ink-card{ background:#ffffff; }
    #resilience{ padding-top:6rem; padding-bottom:6rem; }
    #spreadCanvas{ width:100%; height:100%; display:block; }

    /* Ambient effects */
    .breath-drift { background: radial-gradient(circle at 50% 50%, rgba(31,107,87,0.04) 0%, transparent 60%); background-size: 200% 200%; animation: driftAmbient 14s ease-in-out infinite alternate; }
    @keyframes driftAmbient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
    @keyframes driftCanvas { 0% { transform: translateY(0); } 100% { transform: translateY(-30px); } }
    .spread-drift { height: calc(100% + 40px); top: 0; animation: driftCanvas 20s linear infinite alternate; }

    /* === BALANCE SHEET SCROLL-SYNC SYSTEM === */
    .scrolly-grid{ display:grid; grid-template-columns:minmax(320px,430px) minmax(0,1fr); gap:2rem 3rem; position:relative; }
    .scrolly-sticky-text, .scrolly-sticky-chart{ position:sticky; top: var(--nav-offset); align-self:start; }
    
    /* Fixed mobile bottom padding for Sticky CTA */
    .scrolly-sticky-text{ min-height:360px; padding-top: 1rem; padding-bottom: 5rem; }
    
    .scrolly-text-stage{ position:absolute; inset:0; opacity:0; transform:translateY(12px); transition:opacity 0.4s ease, transform 0.4s ease; pointer-events:none; }
    .scrolly-text-stage.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
    .scrolly-steps{ grid-column:1 / -1; }
    .scrolly-step{ height:72vh; }

    @media (max-width: 1536px){ .hero-section{ min-height:calc(100vh - 112px); } }
    @media (max-width: 1024px){
      .chart-wrap{height:290px} .mini-chart-wrap{height:230px} .chart-feature{height:320px}
      .hero-section{ min-height:auto; }
      .scrolly-grid{ grid-template-columns:1fr; gap:1.5rem; }
      .scrolly-sticky-text, .scrolly-sticky-chart{ position:relative; top:auto; }
      .scrolly-sticky-text{ min-height:auto; padding-top: 0; padding-bottom: 0; }
      .scrolly-text-stage{ position:relative; inset:auto; opacity:1; transform:none; margin-bottom:1rem; display:none; }
      .scrolly-text-stage.is-active{ display:block; }
      .scrolly-step{ height:28vh; }
    }
    @media (max-width: 768px){
      .chart-wrap{height:255px} .mini-chart-wrap{height:210px} .chart-feature{height:280px}
      .chart-note{ margin-top: 1.4rem; font-size: 0.78rem; }
      .card-compact { padding: 1rem; }
      .ink-card.p-6 { padding: 1.25rem; }
    }
    .reduced-motion *, .reduced-motion *::before, .reduced-motion *::after{
      animation:none !important; transition:none !important; scroll-behavior:auto !important;
    }


        .evidence-drawer-backdrop{
      position:fixed;
      inset:0;
      background:rgba(17,17,17,0.24);
      opacity:0;
      pointer-events:none;
      transition:opacity 260ms var(--ease);
      z-index:80;
    }
    .evidence-drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }
    .evidence-drawer{
      position:fixed;
      top:0;
      right:0;
      width:min(560px, 94vw);
      height:100vh;
      background:#fffaf3;
      border-left:1px solid var(--line);
      box-shadow:-24px 0 80px rgba(17,17,17,0.18);
      transform:translateX(105%);
      transition:transform 360ms var(--ease);
      z-index: 130;
      display:flex;
      flex-direction:column;
    }
    .evidence-drawer.is-open{ transform:translateX(0); }
    .drawer-kicker{
      font-family:"JetBrains Mono",monospace;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:0.18em;
      color:var(--accent-strong);
      font-weight:800;
    }
    .drawer-value{
      font-family:"JetBrains Mono",monospace;
      font-size:clamp(2.6rem, 8vw, 4.6rem);
      font-weight:800;
      letter-spacing:-0.075em;
      line-height:0.95;
    }
    .drawer-ledger-row{
      display:grid;
      grid-template-columns:minmax(0,1.5fr) minmax(80px,0.6fr) minmax(80px,0.6fr);
      gap:0.75rem;
      padding:0.72rem 0;
      border-top:1px solid rgba(17,17,17,0.10);
      font-size:0.82rem;
      align-items:start;
    }
    .drawer-ledger-row .num{ font-family:"JetBrains Mono",monospace; text-align:right; font-weight:700; }
    .drawer-action{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:0.45rem;
      padding:0.72rem 1rem;
      border:1px solid var(--line);
      font-size:0.76rem;
      font-weight:700;
      letter-spacing:0.04em;
      text-transform:uppercase;
      transition:background 180ms ease, color 180ms ease, border-color 180ms ease;
    }
    .drawer-action.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .drawer-action:hover{ border-color:var(--accent-mid); }
    @media (max-width: 640px){
      .evidence-drawer{ width:100vw; }
      .drawer-ledger-row{ grid-template-columns:1fr; gap:0.25rem; }
      .drawer-ledger-row .num{ text-align:left; }
    }
    @media (prefers-reduced-motion: reduce){
      .evidence-drawer,.evidence-drawer-backdrop{ transition:none !important; }
    }

    /* Sticky Subnav specific styles for Deploy */
    .sticky-subnav {
      display: block !important;
      position: sticky;
      top: 75px;
      z-index: 80;
      margin-top: 75px;
      background: rgba(248, 246, 240, 0.94);
      box-shadow: 0 1px 0 rgba(17,17,17,0.08), 0 14px 30px rgba(17,17,17,0.035);
    }
    .sticky-subnav .mast-rule { height: 2px; }
    .sticky-subnav nav a {
      min-height: 2rem;
      display: inline-flex;
      align-items: center;
      border-bottom: 1px solid transparent;
    }
    .sticky-subnav nav a:hover { border-bottom-color: currentColor; }
    @media (min-width: 768px) {
      .sticky-subnav {
        top: 85px;
        margin-top: 85px;
      }
    }
    @media (max-width: 767px) {
      .sticky-subnav {
        top: 68px;
        margin-top: 68px;
      }
      .sticky-subnav .max-w-7xl {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }


  
/* Polyfills for JIT arbitrary classes removed from CDN */
.border-\[var\(--accent\)\] { border-color: var(--accent); }
.hover\:border-\[var\(--accent-mid\)\]:hover { border-color: var(--accent-mid); }
.text-\[var\(--accent\)\] { color: var(--accent); }
.group:hover .group-hover\:text-\[var\(--accent\)\] { color: var(--accent); }
.text-\[var\(--ink\)\] { color: var(--ink); }
.hover\:text-\[var\(--ink\)\]:hover { color: var(--ink); }
.text-\[var\(--muted\)\] { color: var(--muted); }
.text-\[var\(--paper\)\] { color: var(--paper); }
.text-\[var\(--charcoal\)\] { color: var(--charcoal); }
.bg-\[var\(--paper\)\] { background-color: var(--paper); }
.bg-\[var\(--ink\)\] { background-color: var(--ink); }
.text-\[10px\] { font-size: 10px; }
.tracking-\[0\.1em\] { letter-spacing: 0.1em; }
.tracking-\[0\.14em\] { letter-spacing: 0.14em; }
.tracking-\[0\.16em\] { letter-spacing: 0.16em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.22em\] { letter-spacing: 0.22em; }
.text-\[clamp\(2\.2rem\,4vw\,4\.5rem\)\] { font-size: clamp(2.2rem, 4vw, 4.5rem); }
.shadow-\[0_-40px_60px_rgba\(255\,255\,255\,1\)\] { box-shadow: 0 -40px 60px rgba(255,255,255,1); }
.border-black\/10 { border-color: rgb(0 0 0 / 0.1); }
.mix-blend-multiply { mix-blend-mode: multiply; }
.cursor-pointer { cursor: pointer; }
.flex-1 { flex: 1 1 0%; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.sm\:px-6 { @media (min-width: 640px) { padding-left: 1.5rem; padding-right: 1.5rem; } }
.lg\:px-8 { @media (min-width: 1024px) { padding-left: 2rem; padding-right: 2rem; } }
.mb-16 { margin-bottom: 4rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.sm\:py-20 { @media (min-width: 640px) { padding-top: 5rem; padding-bottom: 5rem; } }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.sm\:py-24 { @media (min-width: 640px) { padding-top: 6rem; padding-bottom: 6rem; } }
.border-y { border-top-width: 1px; border-bottom-width: 1px; }


/* QA lock: moved former inline report layout styles into CSS */
html.sore-report-root,
body.sore-report-body{overflow-x:clip!important;overflow-y:visible!important;}
.sore-report-main{overflow:visible!important;}
#sore-sticky-nav{top:76px;}
#subnav{line-height:1;}
.sore-drawer-cue{animation-duration:2s;transform:scale(1.2);}

/* ========================================================================== 
   SORE report DTP lock — 2026-05-31
   ========================================================================== */
.sore-report-body{
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  overflow-wrap:break-word;
}
.sore-report-main h1,
.sore-report-main h2,
.sore-report-main h3,
.sore-report-main blockquote,
.sore-report-main .pull-quote{
  text-wrap:balance;
}
.sore-report-main p,
.sore-report-main li,
.sore-report-main .chart-note,
.sore-report-main .drawer-body{
  text-wrap:pretty;
}
.sore-report-main p{
  max-width:70ch;
}
.hero-section h1{
  max-width:13.5ch;
  letter-spacing:-0.045em!important;
}
.hero-section p{
  max-width:58ch;
}
.hero-section .lead-card{
  max-width:31rem;
}
.metric-row{
  align-items:baseline;
}
.metric-label{
  max-width:20ch;
}
.metric-value{
  text-align:right;
  font-feature-settings:"tnum" 1,"ss01" 1;
}
.number-xl,
.number-hero,
.drawer-value{
  font-feature-settings:"tnum" 1,"ss01" 1;
}
.pill,
.data-card,
.feature-card,
.sore-report-main .rounded-full,
.sore-report-main .rounded-sm,
#toast{
  border-radius:0!important;
}
.ink-card{
  box-shadow:0 1px 0 rgba(17,17,17,.06);
}
.ink-card:hover{
  transform:none!important;
  box-shadow:0 1px 0 rgba(17,17,17,.08)!important;
}
.sore-report-main section{
  scroll-margin-top:9.25rem;
}
#sore-sticky-nav{
  border-top:1px solid rgba(17,17,17,.08);
}
#sore-sticky-nav nav a{
  padding-top:.2rem;
  padding-bottom:.2rem;
  white-space:nowrap;
}
.drawer-ledger-row{
  grid-template-columns:minmax(0,1.35fr) minmax(88px,.55fr) minmax(88px,.55fr);
}
.evidence-drawer{
  max-width:100vw;
}
@media (min-width:1024px){
  .hero-section .grid{
    gap:clamp(2rem,4vw,4.5rem)!important;
  }
  #balance-sheet .scrolly-sticky-chart{
    top:calc(var(--nav-offset) + .75rem);
  }
}
@media (max-width:1023px){
  .hero-section h1{
    max-width:15ch;
  }
  .hero-section .lead-card{
    max-width:none;
  }
  .sore-report-main section{
    scroll-margin-top:8rem;
  }
}
@media (max-width:767px){
  .hero-section{
    padding-top:5.5rem!important;
  }
  .hero-section h1{
    max-width:12ch;
    line-height:.94!important;
  }
  .hero-section p{
    font-size:1.02rem!important;
    line-height:1.58!important;
  }
  .metric-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .metric-label{
    max-width:none;
  }
  .number-xl{
    font-size:2.55rem;
  }
  #sore-sticky-nav{
    top:68px;
  }
}

/* Issue 11.13: SORE report hero balanced first-view spacing lock
   Restores even top/bottom breathing room inside the report masthead.
   The previous lock pulled the masthead too close to the global nav. */
@media (min-width: 1024px){
  .sore-report-body .hero-section{
    align-items:center!important;
    min-height:calc(100vh - 104px)!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .sore-report-body .hero-section > .relative.max-w-7xl{
    padding-top:clamp(3.25rem,5.6vh,4.5rem)!important;
    padding-bottom:clamp(3.25rem,5.6vh,4.5rem)!important;
  }
}
@media (min-width: 1280px){
  .sore-report-body .hero-section > .relative.max-w-7xl{
    padding-top:clamp(3.5rem,5.8vh,4.75rem)!important;
    padding-bottom:clamp(3.5rem,5.8vh,4.75rem)!important;
  }
}
@media (min-width: 1536px){
  .sore-report-body .hero-section > .relative.max-w-7xl{
    padding-top:clamp(3.75rem,5.8vh,5rem)!important;
    padding-bottom:clamp(3.75rem,5.8vh,5rem)!important;
  }
}
@media (max-width: 1023px){
  .sore-report-body .hero-section{
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .sore-report-body .hero-section > .relative.max-w-7xl{
    padding-top:clamp(4rem,8vh,5rem)!important;
    padding-bottom:clamp(2.75rem,6vh,4rem)!important;
  }
}