/* ============================================================
   HELIO — Research-first design system
   "Analytical Institution": bright, navy-led, champagne accent.
   Editorial serif (Newsreader) + technical sans/mono (IBM Plex).
   ============================================================ */
:root{
  /* --- surfaces (bright, laboratory) --- */
  --white:#FFFFFF;
  --paper:#FBFAF6;        /* warm white — page base */
  --lab:#F2F5F8;          /* soft laboratory gray section */
  --lab-2:#E9EEF3;        /* cooler panel / media wells */
  --navy:#0C2340;         /* deep navy — dark panels, footer */
  --navy-2:#081A32;       /* deeper navy */
  --navy-3:#12304F;       /* raised navy surface */

  /* --- ink / text --- */
  --ink:#122238;          /* navy-black primary text */
  --ink-2:#2C3E54;        /* strong secondary */
  --ink-mute:#5F7284;     /* muted body / captions */
  --ink-faint:#8A9AA9;    /* faint meta */
  --on-navy:#EAF0F6;      /* text on navy */
  --on-navy-mute:#93A7BC; /* muted text on navy */

  /* --- accent: restrained champagne gold --- */
  --gold:#B08D50;
  --gold-deep:#8C6C36;
  --gold-soft:#EDE3D0;    /* pale champagne wash */

  /* --- lines --- */
  --line:#E4E9EE;         /* hairline on light */
  --line-2:#D2DAE2;       /* stronger hairline */
  --line-navy:#1E3B5C;    /* hairline on navy */

  /* --- signal (data viz only, never decorative) --- */
  --signal:#2E6F8E;       /* muted teal-blue for chromatogram traces */

  /* --- radii — restrained, technical --- */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;

  /* --- elevation — soft, cool --- */
  --e1:0 1px 2px rgba(12,35,64,.05);
  --e2:0 14px 34px -18px rgba(12,35,64,.22);
  --e3:0 30px 60px -28px rgba(12,35,64,.30);
  --focus:0 0 0 3px rgba(176,141,80,.32);

  /* --- motion --- */
  --t:.26s cubic-bezier(.22,.61,.36,1);
  --t-slow:.6s cubic-bezier(.22,.61,.36,1);

  /* --- rhythm (tightened for denser layout) --- */
  --pad:clamp(54px,6vw,94px);
  --wrap:1320px;
  --wrap-wide:1560px;
  --gutter:clamp(20px,4vw,64px);

  /* --- type --- */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--navy); color:var(--on-navy)}

/* ---------- type primitives ---------- */
.display{
  font-family:var(--serif); font-weight:400; font-optical-sizing:auto;
  font-size:clamp(2.9rem,6.4vw,5.4rem); line-height:1.0; letter-spacing:-.02em; color:var(--ink);
}
.h1{font-family:var(--serif); font-weight:420; font-size:clamp(2.3rem,4.4vw,3.6rem); line-height:1.06; letter-spacing:-.02em}
.h2{font-family:var(--serif); font-weight:440; font-size:clamp(1.9rem,3.2vw,2.9rem); line-height:1.08; letter-spacing:-.018em}
.h3{font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.15; letter-spacing:-.01em}

.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--gold); display:inline-block}
.eyebrow--plain::before{display:none}
.eyebrow--on-navy{color:#CDB489}

.lede{font-size:1.12rem; line-height:1.62; color:var(--ink-mute); max-width:62ch; font-weight:350}
.mono{font-family:var(--mono); font-size:.8rem; letter-spacing:.01em}
.serif-em{font-family:var(--serif); font-style:italic; font-weight:420}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.wrap--wide{max-width:var(--wrap-wide)}
.section{padding:var(--pad) 0}
.section--lab{background:var(--lab)}
.section--navy{background:var(--navy); color:var(--on-navy)}
.section--tight{padding-block:clamp(48px,6vw,84px)}

/* section header — mono index + serif title, research-journal style */
.shead{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:42px}
.shead__l{max-width:64ch}
.shead .eyebrow{margin-bottom:18px}
.shead h2{margin:0}
.shead .lede{margin-top:16px}
@media(max-width:720px){.shead{flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:36px}}

/* reveal — hidden only when JS is present (no-JS renders everything) */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity var(--t-slow), transform var(--t-slow)}
.js .reveal.in{opacity:1; transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s} .js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s} .js .reveal[data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}