/* KRYOS — kryos.aq. Page-specific layer. All values resolve to tokens in ../../styles.css */

:root{--content-l:clamp(22px,6vw,124px);--content-r:clamp(22px,5vw,88px);--core-h:clamp(88px,13vh,152px)}
html{scroll-behavior:auto}
body{overflow-x:hidden;background:var(--bg-base)}
main{position:relative;z-index:2}
img,canvas,svg{display:block;max-width:100%}
b{font-weight:400}
.mono{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-caps);text-transform:uppercase;font-variant-numeric:tabular-nums}
.disp{font-weight:500;letter-spacing:-.045em;line-height:.9;color:var(--text-primary)}

/* ---------- materials ---------- */
.grain,.scan,.vignette{position:fixed;inset:0;pointer-events:none;z-index:60}
.grain{opacity:var(--grain-opacity);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");mix-blend-mode:overlay}
.scan{opacity:var(--scan-opacity);background-image:repeating-linear-gradient(180deg,rgba(232,228,220,.9) 0 1px,transparent 1px 3px)}
.vignette{background:var(--vignette);z-index:1}
.melt__bg{position:absolute;inset:0;background:var(--bone-100);opacity:0;z-index:0}

/* ---------- entry ---------- */
.entry{position:fixed;inset:0;z-index:200;background:var(--ink-000);display:flex;align-items:center;justify-content:center;clip-path:inset(0 0 0 0)}
.entry__inner{display:flex;align-items:baseline;gap:var(--s-3)}
.entry__label{position:absolute;top:calc(50% - 64px);left:50%;transform:translateX(-50%);color:var(--text-faint);white-space:nowrap}
.entry .entry__num{font-family:var(--font-mono);font-size:clamp(3rem,10vw,7rem);letter-spacing:-.04em;text-transform:none;color:var(--bone-100);font-variant-numeric:tabular-nums;line-height:1}
.entry__unit{color:var(--text-faint)}
.entry__line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--laser-500);opacity:.5;box-shadow:0 0 18px rgba(0,255,156,.6)}
body.is-ready .entry{display:none}

/* ---------- HUD ---------- */
.hud{position:fixed;z-index:50;pointer-events:none}
.hud--top{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(18px,2.4vw,30px) var(--content-r) 0 var(--content-l);gap:var(--s-5)}
.mark{pointer-events:auto;display:flex;align-items:baseline;gap:10px;text-decoration:none}
.mark__name{font-weight:500;letter-spacing:.26em;font-size:15px;color:var(--text-primary);transition:color var(--dur-2) var(--ease-core)}
.mark__desc{color:var(--text-faint)}
.mark:hover .mark__name{color:var(--laser-500)}
.hud--depth{left:var(--content-l);bottom:clamp(16px,2.4vw,28px);display:flex;align-items:baseline;gap:9px}
.hud__k{color:var(--text-faint)}
.hud__v{font-size:19px;letter-spacing:-.02em;color:var(--laser-500);text-transform:none}
.hud__u{color:var(--laser-600)}
.hud__age{color:var(--text-muted);margin-left:6px;padding-left:9px;border-left:1px solid var(--border-hair)}

/* ---------- ladder nav: numbers only, in its own reserved gutter ---------- */
.ladder{display:none}
.ladder ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.ladder a{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:6px 0;text-decoration:none;color:var(--text-faint);transition:color var(--dur-2) var(--ease-core)}
.ladder i{font-style:normal;font-family:var(--font-mono);font-size:var(--t-nano);letter-spacing:.08em;order:2;width:20px;text-align:right;font-variant-numeric:tabular-nums}
.ladder em{display:none}
.ladder a::after{content:"";order:3;width:6px;height:1px;background:currentColor;opacity:.5}
.ladder a:hover,.ladder a:focus-visible{color:var(--text-primary)}
.ladder a.is-on{color:var(--laser-500)}
.ladder a.is-on::after{width:16px;opacity:1}
body.is-inverse .mark__name{color:rgba(8,10,9,.86)}
body.is-inverse .ladder a{color:rgba(8,10,9,.4)}
body.is-inverse .ladder a.is-on{color:var(--ink-100)}
body.is-inverse .hud--depth{opacity:0}
body.is-inverse .scan{opacity:.03}
body.is-inverse .vignette{opacity:0}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(64px,8vh,116px) var(--content-r) clamp(64px,8vh,116px) var(--content-l)}
.h2{font-weight:500;font-size:var(--t-d3);line-height:1.02;letter-spacing:-.04em;color:var(--text-primary);max-width:18ch}
.ix{color:var(--laser-500)}
.ix--inv{color:var(--ink-100);opacity:.5}
.rule{flex:1;height:1px;background:var(--border-hair);max-width:160px}
.kick{color:var(--text-muted)}
.col-head{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.specs{margin:var(--s-5) 0 0;border-top:1px solid var(--border-hair)}
.specs>div{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:baseline;padding:11px 0;border-bottom:1px solid var(--border-hair)}
.specs--dense>div{padding:8px 0}
.specs dt{font-size:var(--t-small);color:var(--text-muted)}
.specs dd{margin:0;font-family:var(--font-mono);font-size:var(--t-small);font-variant-numeric:tabular-nums;color:var(--text-primary);text-align:right}
.specs dd.hi{color:var(--laser-500)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-caps);text-transform:uppercase;line-height:1;padding:15px 22px;border:1px solid var(--border-mid);color:var(--text-primary);text-decoration:none;transition:color var(--dur-2) var(--ease-core),border-color var(--dur-2) var(--ease-core),background-color var(--dur-2) var(--ease-core),box-shadow var(--dur-2) var(--ease-core),transform var(--dur-1) var(--ease-cut)}
.btn span{transition:transform var(--dur-2) var(--ease-core)}
.btn:hover span{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--laser-500);border-color:var(--laser-500);color:var(--ink-100)}
.btn--primary:hover{box-shadow:var(--glow-laser);color:var(--ink-100)}
.btn--ghost:hover{border-color:var(--border-accent);color:var(--laser-500)}
.btn--quiet{border-color:transparent;padding-left:0;padding-right:0;color:var(--text-muted)}
.btn--quiet:hover{color:var(--laser-500)}
.btn--lg{padding:20px 28px;font-size:var(--t-small)}

/* ---------- 00 hero ---------- */
.sec--hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(64px,9vh,104px);padding-top:0}
.hero__eyebrow{display:flex;align-items:center;gap:10px;color:var(--text-muted);margin-bottom:auto;padding-top:clamp(84px,13vh,140px)}
.hero__eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--laser-500);box-shadow:0 0 10px rgba(0,255,156,.9);animation:pulse 2.4s var(--ease-core) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hero__h{font-weight:500;font-size:clamp(3.4rem,12.5vw,13rem);line-height:.84;letter-spacing:-.052em;color:var(--text-primary);max-width:9ch}
.hero__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);align-items:end;margin-top:clamp(28px,4.5vh,56px);border-top:1px solid var(--border-hair);padding-top:var(--s-5)}
.hero__lede{max-width:46ch;font-size:var(--t-body-l);color:var(--text-body)}
.hero__acts{display:flex;gap:var(--s-5);align-items:center}

/* ---------- 01 firn ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);row-gap:var(--s-7)}
.col-head{grid-column:1/-1}
.col-a{grid-column:1;max-width:15ch}
.col-b{grid-column:2;max-width:52ch;grid-row:2/4}
.col-b p{font-size:var(--t-body-l);color:var(--text-body)}
.col-c{grid-column:1;margin:0}
.coreface{border:1px solid var(--border-hair);padding:var(--s-3);max-width:440px}
.coreface canvas{width:100%;height:auto;background:var(--ink-000)}
.coreface figcaption{margin-top:10px;color:var(--text-faint)}
.coreface--sm{max-width:420px;margin:var(--s-6) 0 0}

/* ---------- 02 close-off ---------- */
.sec--seal{display:flex;flex-direction:column;justify-content:center;padding-top:clamp(88px,13vh,170px);padding-bottom:clamp(88px,13vh,170px)}
.seal__ix{color:var(--text-faint);margin-bottom:var(--s-5)}
.seal__h{font-weight:500;font-size:var(--t-d2);line-height:.94;letter-spacing:-.05em;color:var(--text-primary);max-width:16ch}
.seal__body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,90px);align-items:start;margin-top:clamp(36px,5vh,72px);border-top:1px solid var(--border-hair);padding-top:var(--s-5)}
.seal__body p{max-width:52ch;font-size:var(--t-body-l);color:var(--text-body)}
.seal__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:right;color:var(--text-faint)}
.seal__facts b{font-size:21px;letter-spacing:-.02em;color:var(--text-primary);text-transform:none}

/* ---------- 03 melt line (the turn) ---------- */
.sec--melt{padding:0;height:300vh;color:var(--ink-100)}
.melt__pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto var(--core-band) auto;align-content:space-between;padding:clamp(64px,8.5vh,100px) var(--content-r) clamp(24px,3.5vh,40px) var(--content-l);--core-band:calc(var(--core-h) + 96px)}
.melt__head-wrap{grid-row:1;position:relative;z-index:2;max-width:52ch;display:flex;flex-direction:column;gap:var(--s-3)}
.melt__h{font-weight:500;font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.02;letter-spacing:-.04em;color:var(--ink-100);max-width:16ch}
.melt__lede{font-size:var(--t-body);color:rgba(8,10,9,.66);max-width:44ch}
.melt__stage{position:absolute;inset:0;pointer-events:none;z-index:3}
.melt__core{grid-row:2;align-self:center;justify-self:start;width:calc(80vw - var(--content-l));height:var(--core-h);position:relative;z-index:1}
.melt__core canvas{width:100%;height:100%}
.melt__head{position:absolute;left:80%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(8,10,9,.45) 22%,rgba(8,10,9,.45) 78%,transparent)}
.melt__head::before{content:"";position:absolute;left:-14px;top:calc(var(--core-y,52%) - 14px);width:28px;height:28px;border:1px solid rgba(8,10,9,.55);border-radius:50%;background:rgba(232,228,220,.45)}
.melt__head span{position:absolute;left:16px;top:calc(var(--core-y,52%) + var(--core-h) * .5 + 18px);white-space:nowrap;color:rgba(8,10,9,.5)}
.melt__steps{position:absolute;left:var(--content-l);right:var(--content-r);top:calc(var(--core-y,52%) + var(--core-h) * .5 + 16px);margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.melt__steps li{display:flex;align-items:center;gap:8px;color:rgba(8,10,9,.28);transition:color var(--dur-2) var(--ease-core)}
.melt__steps li i{font-style:normal;font-family:var(--font-mono);font-size:var(--t-nano);width:20px;height:20px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%}
.melt__steps li span{font-family:var(--font-mono);font-size:var(--t-nano);letter-spacing:var(--tr-caps);text-transform:uppercase}
.melt__steps li.is-on{color:var(--ink-100)}
.melt__instruments{grid-row:3;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,auto)) 1fr;grid-template-areas:"a b c v" "chr chr chr chr" "note note note note";column-gap:clamp(24px,4vw,56px);row-gap:var(--s-3);align-items:end}
.inst{display:flex;flex-direction:column;gap:5px}
.inst:nth-of-type(1){grid-area:a}.inst:nth-of-type(2){grid-area:b}.inst:nth-of-type(3){grid-area:c}
.inst__k{color:rgba(8,10,9,.45)}
.inst__v{font-size:var(--t-small);color:rgba(8,10,9,.7);text-transform:none;letter-spacing:0}
.inst__v b{font-size:26px;letter-spacing:-.02em;color:var(--ink-100)}
.inst__v--live b{color:var(--laser-700)}
.vial{grid-area:v;justify-self:end;width:38px;height:68px;border:1px solid rgba(8,10,9,.35);position:relative;overflow:hidden}
.vial__fill{position:absolute;inset:0;background:rgba(0,137,84,.5);transform:scaleY(0);transform-origin:50% 100%}
.chromo{grid-area:chr;width:100%;height:104px;border-top:1px solid rgba(8,10,9,.2)}
.melt__depthnote{grid-area:note;color:rgba(8,10,9,.4)}

/* ---------- 04 record ---------- */
.rec__head{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6)}
.rec__h{margin-bottom:var(--s-7)}
.rec__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
.log{margin:0;border:1px solid var(--border-hair);padding:var(--s-4)}
.log svg{width:100%;height:auto;aspect-ratio:900/420}
.log figcaption{margin-top:10px;color:var(--text-faint)}
.rec__tables{display:flex;flex-direction:column;gap:var(--s-6)}
.tbl__cap{margin:0 0 var(--s-2);color:var(--text-faint)}

/* ---------- 05 depth instrument ---------- */
.dep__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start}
.dep__hint{margin-top:var(--s-4);color:var(--text-faint)}
.dep__slider{display:flex;gap:var(--s-4);margin-top:var(--s-6)}
.dep__track{position:relative;width:3px;height:min(46vh,380px);background:var(--border-hair);cursor:ns-resize;touch-action:none}
.dep__track::after{content:"";position:absolute;inset:-22px -26px}
.dep__fill{position:absolute;left:0;right:0;top:0;height:32%;background:linear-gradient(180deg,var(--laser-700),var(--laser-500))}
.dep__probe{position:absolute;left:50%;top:32%;width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;border:0;background:none;cursor:grab;display:grid;place-items:center}
.dep__probe:active{cursor:grabbing}
.dep__probe::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--laser-500);box-shadow:0 0 16px rgba(0,255,156,.9);transition:transform var(--dur-2) var(--ease-core)}
.dep__probe:hover::before,.dep__probe:focus-visible::before{transform:scale(1.45)}
.dep__probe:focus-visible{outline:1px solid var(--laser-500);outline-offset:0;border-radius:50%}
.dep__scale{list-style:none;margin:0;padding:0;position:relative;height:min(46vh,380px);width:84px;color:var(--text-faint)}
.dep__scale li{position:absolute;left:0;display:flex;align-items:center;gap:7px;transform:translateY(-50%);white-space:nowrap}
.dep__scale li::before{content:"";width:8px;height:1px;background:var(--border-hair)}
.dep__readout{display:flex;flex-direction:column;gap:var(--s-2)}
.dep__readout .k{color:var(--text-faint)}
.dep__big{font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:.92;letter-spacing:-.04em;color:var(--laser-500);text-transform:none}
.dep__big em{font-style:normal;font-size:.26em;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--laser-600);margin-left:.4em}
.dep__event{margin-top:var(--s-4);color:var(--text-primary);letter-spacing:var(--tr-caps)}

/* ---------- 06 quiet ---------- */
.sec--quiet{min-height:86vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right}
.quiet__line{font-weight:400;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.24;letter-spacing:-.03em;color:var(--text-primary);max-width:20ch}

/* ---------- 07 access ---------- */
.sec--access{padding-bottom:var(--s-5)}
.acc__h{font-weight:500;font-size:var(--t-d2);line-height:.94;letter-spacing:-.05em;color:var(--text-primary);margin-bottom:clamp(32px,5vh,64px)}
.acc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:start}
.acc__lede{font-size:var(--t-body-l);color:var(--text-body);max-width:48ch}
.acc__cta{display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}
.acc__specs{grid-column:1/-1;margin-top:var(--s-6)}
.foot{display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--border-hair);color:var(--text-faint)}

/* ---------- reveal defaults (JS removes when it takes over) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(16px)}
.js [data-split] .w{display:inline-block;opacity:0;transform:translateY(.36em)}

/* ---------- wide: the ladder gets its own gutter, never over content ---------- */
@media (min-width:1280px){
  :root{--content-r:104px}
  .ladder{display:block;position:fixed;z-index:50;right:26px;top:50%;transform:translateY(-50%)}
}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  :root{--core-h:clamp(76px,11vh,116px)}
  .grid,.rec__grid,.dep__grid,.acc__grid,.seal__body{grid-template-columns:minmax(0,1fr)}
  .col-a,.col-b,.col-c{grid-column:1;grid-row:auto}
  .col-b{max-width:60ch}
  .hero__foot{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .seal__facts{text-align:left;flex-direction:row;gap:var(--s-6);flex-wrap:wrap}
  .melt__instruments{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b c" "v v v" "chr chr chr" "note note note"}
  .vial{justify-self:start}
}

/* ---------- short viewports ---------- */
@media (max-height:760px){
  .melt__pin{padding-top:clamp(44px,6.5vh,68px);padding-bottom:18px;--core-band:calc(var(--core-h) + 76px)}
  .melt__h{font-size:clamp(1.7rem,3.4vw,2.6rem)}
  .melt__lede{font-size:var(--t-small)}
  .chromo{height:60px}
  .melt__instruments{row-gap:6px}
  .melt__depthnote{font-size:var(--t-nano)}
  .inst__v b{font-size:20px}
  .hero__h{font-size:clamp(2.8rem,7.5vw,6rem)}
}
/* very short viewports: the stage list and the trace are the first things to go */
@media (max-height:700px){
  .melt__pin{--core-band:calc(var(--core-h) + 44px)}
  .melt__steps,.chromo{display:none}
  .melt__instruments{grid-template-areas:"a b c v" "note note note note"}
  .sec--hero{padding-bottom:clamp(72px,11vh,110px)}
  .hero__eyebrow{padding-top:clamp(64px,10vh,110px)}
  .seal__h{font-size:clamp(2.2rem,5.4vw,4.4rem)}
}

/* ---------- mobile: its own design. No column, no pin, no rotation ---------- */
@media (max-width:720px){
  :root{--content-l:22px;--content-r:22px;--core-h:78px}
  .hud--top{padding:15px 22px 0}
  .hud--depth{left:22px;bottom:13px}
  .hud__v{font-size:16px}
  .hud__age{display:none}
  .scan{display:none}
  .sec{padding:clamp(56px,7vh,84px) 22px}
  .hero__h{font-size:clamp(3rem,15vw,5rem);line-height:.9;max-width:10ch}
  .hero__eyebrow{padding-top:80px}
  .hero__lede{font-size:1rem}
  .hero__acts{flex-direction:column;align-items:stretch;gap:12px}
  .btn{justify-content:space-between;padding:17px 20px}
  .seal__h{font-size:clamp(2rem,9vw,3rem)}
  .seal__body p,.col-b p,.acc__lede{font-size:1rem}
  .sec--melt{height:auto;padding:clamp(56px,7vh,84px) 22px}
  .melt__bg{position:fixed;inset:0}
  .melt__pin{position:static;height:auto;overflow:visible;padding:0;gap:var(--s-6);display:flex;flex-direction:column}
  .melt__head-wrap,.melt__instruments{grid-row:auto}
  .melt__stage{position:relative;inset:auto;height:130px;margin-top:var(--s-5)}
  .melt__core{width:100%;grid-row:auto;order:-1}
  .melt__head{left:auto;right:0;top:auto;bottom:0;width:100%;height:1px}
  .melt__head::before{left:calc(50% - 14px);top:-14px}
  .melt__head span{left:calc(50% + 22px);top:-8px}
  .melt__steps{position:static;padding:0;flex-direction:column;gap:9px;margin-top:var(--s-5)}
  .melt__instruments{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "c v" "chr chr" "note note";row-gap:var(--s-4)}
  .chromo{height:84px}
  .inst__v b{font-size:21px}
  .acc__h{font-size:clamp(2.2rem,11vw,3.4rem)}
  .sec--quiet{min-height:auto;padding-top:22vh;padding-bottom:22vh;align-items:flex-start;text-align:left}
  .quiet__line{font-size:clamp(1.35rem,6.2vw,1.9rem);max-width:none}
  .dep__slider{gap:18px}
  .dep__track,.dep__scale{height:40vh}
  .foot{flex-direction:column;gap:8px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-split] .w{opacity:1;transform:none}
  .hero__eyebrow .dot{animation:none}
  .sec--melt{height:auto}
  .melt__pin{position:static;height:auto}
}