/* ═══════════════════════════════════════════════════════════
   EPIVORA LABS — "THE ICE CORE"
   An ice core is a layered archive of time.
   So is epigenetic age. The whole page is one vertical axis.
   ═══════════════════════════════════════════════════════════ */

:root{
  --void:      #04060A;
  --crevasse:  #081119;
  --shelf:     #0E1B26;
  --glacial:   #5FA8D3;
  --meltwater: #A8D8EC;
  --titanium:  #C2CCD3;
  --chalk:     #F4F7F9;
  --alpenglow: #C9B6A0;

  --hair: rgba(162,196,215,.16);
  --hair-strong: rgba(162,196,215,.34);

  --rail: 84px;
  --gut: clamp(20px, 5vw, 72px);

  --f-display:'Big Shoulders Display','Oswald','Arial Narrow',system-ui,sans-serif;
  --f-body:'Archivo',system-ui,-apple-system,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--void); color:var(--titanium);
  font-family:var(--f-body); font-weight:300; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--glacial); outline-offset:3px; border-radius:2px}

.u-skip{position:absolute; left:-9999px; top:0; background:var(--glacial); color:var(--void); padding:12px 16px; z-index:200}
.u-skip:focus{left:12px; top:12px}

/* ── Instrument labels ─────────────────────────────────── */
.mono{font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase}
.mono--dim{color:rgba(194,204,211,.64)}
.mono--ice{color:var(--glacial)}

/* ── Typography ─────────────────────────────────────────── */
.h-mega{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3.6rem, 13.5vw, 11.5rem);
  line-height:.82; letter-spacing:-.015em; text-transform:uppercase;
  color:var(--chalk); margin:0;
}
.h-big{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.4rem, 6.6vw, 5.4rem);
  line-height:.9; letter-spacing:-.01em; text-transform:uppercase;
  color:var(--chalk); margin:0 0 .55em;
}
.h-mid{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.5rem,3vw,2.2rem); line-height:1; text-transform:uppercase;
  letter-spacing:.01em; color:var(--chalk); margin:0 0 .5em;
}
.lede{font-size:clamp(1.02rem,1.55vw,1.24rem); line-height:1.62; color:rgba(226,236,242,.82); max-width:56ch}
.body{max-width:62ch; color:rgba(194,204,211,.78)}
.body + .body{margin-top:1.1em}

/* ═══ FIXED NAVIGATION ══════════════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  display:flex; align-items:center; gap:24px;
  padding:16px var(--gut);
  border-bottom:1px solid transparent;
  transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.nav.is-stuck{
  background:rgba(4,6,10,.72);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-bottom-color:var(--hair);
}
.nav__brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.nav__glyph{width:16px; height:26px; flex:0 0 auto}
.nav__glyph span{display:block; height:2px; margin-bottom:4px; background:var(--glacial); opacity:.9}
.nav__glyph span:nth-child(2){opacity:.6; width:78%}
.nav__glyph span:nth-child(3){opacity:.4; width:92%}
.nav__glyph span:nth-child(4){opacity:.25; width:64%}
.nav__glyph span:nth-child(5){opacity:.15; width:84%}
.nav__name{font-family:var(--f-display); font-weight:800; font-size:1.12rem; letter-spacing:.06em; text-transform:uppercase; color:var(--chalk)}
.nav__links{display:flex; gap:24px}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(194,204,211,.68); transition:color .24s}
.nav__links a:hover,.nav__links a.is-active{color:var(--meltwater)}
.nav__cta{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--hair-strong); padding:8px 16px; color:var(--chalk);
  transition:background .3s, border-color .3s, color .3s;
}
.nav__cta:hover{background:var(--glacial); border-color:var(--glacial); color:var(--void)}
@media (max-width:880px){ .nav__links{display:none} .nav{padding:12px var(--gut)} }

/* ═══ SIGNATURE: THE ICE-CORE RAIL ════════════════════════ */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:80;
  pointer-events:none; display:flex; flex-direction:column; align-items:center;
  border-right:1px solid var(--hair);
}
.rail__core{
  position:absolute; top:96px; bottom:96px; left:50%; width:12px; transform:translateX(-50%);
  background:
    repeating-linear-gradient(to bottom,
      rgba(168,216,236,.30) 0px, rgba(168,216,236,.30) 1px,
      rgba(168,216,236,.03) 1px, rgba(168,216,236,.03) 7px,
      rgba(95,168,211,.14) 7px, rgba(95,168,211,.14) 9px,
      rgba(168,216,236,.02) 9px, rgba(168,216,236,.02) 18px),
    linear-gradient(to bottom, rgba(95,168,211,.16), rgba(8,17,25,.9));
  border:1px solid var(--hair);
}
.rail__probe{
  position:absolute; left:50%; width:34px; height:1px; background:var(--meltwater);
  transform:translateX(-50%); box-shadow:0 0 12px rgba(168,216,236,.7); top:96px;
}
.rail__probe::after{
  content:''; position:absolute; left:50%; top:-3px; width:7px; height:7px;
  transform:translateX(-50%) rotate(45deg); background:var(--meltwater);
}
.rail__read{
  position:absolute; left:50%; transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--glacial);
  white-space:nowrap; transition:opacity .32s;
}
.rail__cap{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; color:rgba(194,204,211,.64);
  writing-mode:vertical-rl;
}
/* Mobile: the rail becomes a thin depth gauge at the top */
.rail__bar{display:none}
@media (max-width:880px){
  :root{--rail:0px}
  .rail{width:100%; height:2px; bottom:auto; top:0; border-right:0; z-index:95}
  .rail__core,.rail__probe,.rail__read,.rail__cap{display:none}
  .rail__bar{display:block; height:2px; width:0%; background:linear-gradient(90deg,var(--glacial),var(--meltwater))}
}

/* ═══ STAGE / PARALLAX ═══════════════════════════════ */
.main{padding-left:var(--rail)}
.stage{position:relative; isolation:isolate; overflow:hidden}
.stage__layers{position:absolute; inset:-12% 0 -12% 0; z-index:0; pointer-events:none}
.layer{
  position:absolute; inset:0; will-change:transform;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0);
}
.layer--bottom{top:auto; bottom:0; height:64vh; min-height:340px}
.layer svg{width:100%; height:100%}
.stage__inner{position:relative; z-index:3; padding:clamp(96px,13vh,168px) var(--gut)}

/* Shared atmosphere layers */
.grain{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 78% at 50% 42%, transparent 38%, rgba(4,6,10,.62) 88%, rgba(4,6,10,.95) 100%);
}
.cells{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23A8D8EC' stroke-width='.6' opacity='.5'%3E%3Cpath d='M30 2 L60 19 L60 53 L30 70 L0 53 L0 19 Z'/%3E%3Cpath d='M90 2 L120 19 L120 53 L90 70 L60 53 L60 19 Z'/%3E%3Cpath d='M60 53 L90 70 L90 104 L60 121 L30 104 L30 70 Z'/%3E%3C/g%3E%3C/svg%3E");
}
#snow{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.85}

/* ═══ HERO ═════════════════════════════════════════════ */
.hero{min-height:100svh; display:flex; align-items:flex-end; background:linear-gradient(180deg,#060B12 0%, #0A1520 46%, #071019 72%, var(--void) 100%)}
.hero__glow{
  position:absolute; left:50%; top:34%; width:130vw; height:56vh; transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(201,182,160,.09), rgba(95,168,211,.05) 42%, transparent 72%);
  z-index:1; pointer-events:none;
}
.hero__inner{width:100%; padding-bottom:clamp(64px,9vh,112px)}
.hero__eyebrow{display:flex; flex-wrap:wrap; gap:8px 24px; margin-bottom:clamp(20px,4vh,40px)}
.hero__title-wrap{position:relative}
.hero__title-wrap::before{
  content:''; position:absolute; left:0; top:-18px; width:clamp(120px,22vw,320px); height:1px;
  background:linear-gradient(90deg,var(--glacial),transparent);
}
.hero__sub{margin-top:clamp(24px,3.4vh,40px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr); gap:clamp(24px,5vw,64px); align-items:end}
@media (max-width:820px){ .hero__sub{grid-template-columns:1fr} }
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.btn{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:12px 24px; border:1px solid var(--hair-strong); color:var(--chalk);
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--chalk); color:var(--void); border-color:var(--chalk)}
.btn--solid:hover{background:var(--meltwater); border-color:var(--meltwater)}
.btn--ghost:hover{border-color:var(--glacial); color:var(--meltwater)}

/* Technical foreground overlay */
.hud{position:absolute; inset:0; z-index:5; pointer-events:none}
.hud__cross{position:absolute; width:20px; height:20px; border:1px solid rgba(168,216,236,.34)}
.hud__cross--tl{top:88px; left:var(--gut); border-right:0; border-bottom:0}
.hud__cross--tr{top:88px; right:var(--gut); border-left:0; border-bottom:0}
.hud__cross--bl{bottom:24px; left:var(--gut); border-right:0; border-top:0}
.hud__cross--br{bottom:24px; right:var(--gut); border-left:0; border-top:0}
.hud__strip{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:clamp(12px,3vw,32px); white-space:nowrap; overflow:hidden; max-width:70vw;
}
.hud__strip span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; color:rgba(168,216,236,.66); text-transform:uppercase}
@media (max-width:700px){ .hud__strip{display:none} }

/* ═══ SECTION HEAD ════════════════════════════════════ */
.shead{display:flex; align-items:baseline; gap:20px; margin-bottom:clamp(28px,5vh,56px); border-top:1px solid var(--hair); padding-top:16px}
.shead__idx{font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; color:var(--glacial)}
.shead__label{font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(194,204,211,.66)}

/* ═══ 01 · DEMOGRAPHIC WINTER ══════════════════════════ */
.winter{background:linear-gradient(180deg,var(--void) 0%, #0B141C 38%, #101E29 70%, #08111A 100%)}
.winter__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,6vw,88px); align-items:start}
@media (max-width:900px){ .winter__grid{grid-template-columns:1fr} }
.stats{display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair)}
.stat{background:rgba(8,17,25,.82); padding:clamp(20px,3vw,32px)}
.stat__num{font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,6vw,4.4rem); line-height:.86; color:var(--meltwater)}
.stat__unit{font-family:var(--f-display); font-weight:600; font-size:.42em; color:var(--glacial); margin-left:.18em}
.stat__txt{margin-top:12px; font-size:.9rem; color:rgba(194,204,211,.72); max-width:34ch}
.note{margin-top:20px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:rgba(194,204,211,.64); text-transform:uppercase}

/* ═══ 02 · THE CORE (signature) ═════════════════════════ */
.core{background:linear-gradient(180deg,#08111A 0%, #050A10 50%, #04060A 100%)}
.core__shaft{
  position:absolute; left:50%; top:0; bottom:0; width:min(560px,70vw); transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(95,168,211,.09), transparent 62%);
  z-index:1; pointer-events:none;
}
.core__grid{display:grid; grid-template-columns:minmax(0,.95fr) minmax(220px,320px) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:center}
@media (max-width:980px){ .core__grid{grid-template-columns:1fr; gap:36px} }
.core__col{position:relative; border:1px solid var(--hair); background:rgba(6,11,17,.6); padding:16px}
.core__strata{display:flex; flex-direction:column; gap:2px}
.strat{
  position:relative; height:clamp(20px,3.2vh,30px);
  background:linear-gradient(90deg, rgba(95,168,211,.10), rgba(95,168,211,.03));
  border-left:2px solid rgba(95,168,211,.22);
  transition:background .5s ease, border-color .5s ease, transform .5s ease;
  display:flex; align-items:center; justify-content:space-between; padding:0 12px;
}
.strat.is-lit{
  background:linear-gradient(90deg, rgba(168,216,236,.30), rgba(95,168,211,.06));
  border-left-color:var(--meltwater);
}
.strat__y,.strat__v{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:rgba(194,204,211,.64)}
.strat.is-lit .strat__y{color:var(--chalk)}
.strat.is-lit .strat__v{color:var(--meltwater)}
.core__readout{margin-top:12px; border-top:1px solid var(--hair); padding-top:12px; display:flex; justify-content:space-between; align-items:baseline}
.core__age{font-family:var(--f-display); font-weight:800; font-size:2.6rem; line-height:1; color:var(--chalk)}
.core__delta{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--meltwater)}
.core__side--r{text-align:left}

/* ═══ 03 · PILLARS ═════════════════════════════════════ */
.pillars{background:var(--void)}
.pillars__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair)}
.pillar{
  background:var(--crevasse); padding:clamp(24px,2.6vw,32px);
  display:flex; flex-direction:column; gap:12px; min-height:290px;
  transition:background .48s ease;
}
.pillar:hover{background:#0F1D28}
.pillar__code{font-family:var(--f-display); font-weight:800; font-size:1.9rem; line-height:1; color:var(--chalk); letter-spacing:.02em}
.pillar__code i{font-style:normal; color:var(--glacial); font-size:.62em; margin-right:.4em; vertical-align:.14em}
.pillar__target{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--glacial)}
.pillar__txt{font-size:.92rem; color:rgba(194,204,211,.74); margin:0}
.pillar__meter{margin-top:auto; height:2px; background:rgba(162,196,215,.14); position:relative; overflow:hidden}
.pillar__meter i{position:absolute; inset:0 auto 0 0; background:var(--glacial); width:0; transition:width .96s cubic-bezier(.16,1,.3,1)}
.pillar__stage{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; color:rgba(194,204,211,.64); text-transform:uppercase}

/* ═══ 04 · INSTRUMENT ══════════════════════════════════ */
.instr{background:linear-gradient(180deg,var(--void),#070E15 55%,var(--void))}
.instr__scan{
  position:absolute; left:0; right:0; height:1px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(168,216,236,.42),transparent);
}
.instr__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:900px){ .instr__grid{grid-template-columns:1fr} }
.spec{border-top:1px solid var(--hair); padding:16px 0; display:grid; grid-template-columns:132px 1fr; gap:20px; align-items:baseline}
.spec__k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--glacial)}
.spec__v{font-size:.94rem; color:rgba(226,236,242,.84)}
.spec__v em{font-style:normal; color:rgba(194,204,211,.68); display:block; font-size:.86rem; margin-top:3px}
.seal{margin-top:24px; border:1px solid var(--hair-strong); padding:20px 20px; background:rgba(8,17,25,.6)}
.seal p{margin:8px 0 0; font-size:.92rem; color:rgba(226,236,242,.8)}

/* ═══ 05 · ASCENT ══════════════════════════════════════ */
.ascent{background:linear-gradient(180deg,var(--void) 0%, #0A141D 60%, #0E1E29 100%)}
.rungs{margin-top:clamp(24px,4vh,44px); display:flex; flex-direction:column-reverse}
.rung{
  border-top:1px solid var(--hair); padding:clamp(16px,2.4vw,24px) 0;
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:clamp(16px,3vw,40px); align-items:baseline;
  transition:padding-left .5s cubic-bezier(.16,1,.3,1), border-color .5s;
}
.rung:hover{padding-left:12px; border-top-color:var(--hair-strong)}
.rung__id{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--glacial)}
.rung__what{font-family:var(--f-display); font-weight:600; font-size:clamp(1.3rem,2.6vw,2rem); text-transform:uppercase; color:var(--chalk); line-height:1}
.rung__what small{display:block; font-family:var(--f-body); font-weight:300; font-size:.82rem; text-transform:none; letter-spacing:0; color:rgba(194,204,211,.68); margin-top:8px; max-width:46ch}
.rung__sum{font-family:var(--f-display); font-weight:800; font-size:clamp(1.4rem,3.4vw,2.4rem); color:var(--meltwater); white-space:nowrap; line-height:1}
.rung__sum b{font-weight:600; font-size:.44em; color:var(--glacial); margin-left:.3em}
@media (max-width:760px){
  .rung{grid-template-columns:1fr; gap:8px}
  .rung__sum{margin-top:8px}
}

/* ═══ FOOTER ═══════════════════════════════════════════ */
.foot{background:var(--void); border-top:1px solid var(--hair); padding:clamp(56px,9vh,100px) var(--gut) 44px; position:relative; z-index:3}
.foot__grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:end}
@media (max-width:820px){ .foot__grid{grid-template-columns:1fr} }
.foot__bottom{margin-top:clamp(32px,6vh,64px); padding-top:20px; border-top:1px solid var(--hair); display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between}

/* ═══ REVEAL ═══════════════════════════════════════════ */
.rv{opacity:0; transform:translateY(26px); transition:opacity .96s cubic-bezier(.16,1,.3,1), transform .96s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
  .layer{transform:none !important}
  #snow{display:none}
  .instr__scan{display:none}
  *{animation:none !important}
}

/* ═══ TRACKS · links to the three spoke pages ════════════ */
.tracks{background:var(--void)}
.tracks__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.track{background:var(--crevasse);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;
  gap:12px;min-height:196px;transition:background .48s}
.track:hover{background:#0F1D28}
.track__t{font-family:var(--f-display);font-weight:800;font-size:1.6rem;line-height:1;
  text-transform:uppercase;color:var(--chalk)}
.track__t i{font-style:normal;color:var(--glacial);font-size:.6em;margin-right:.4em;vertical-align:.16em}
.track p{margin:0;font-size:.92rem;color:rgba(194,204,211,.72)}
.track__go{margin-top:auto;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--glacial)}