/* ════════════════════════════════════════════════════════════════════
   ALTERED PROTEIN
   Palette derives from the pLDDT confidence ramp used in structure
   prediction (orange → yellow → cyan → blue). It is used to encode
   data, never as decoration. Ground is the blue-black of a molecular
   viewport; the page then crosses to a bone-grey "bench" ground at
   the point the narrative leaves the computer.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* grounds */
  --viewport:#05070C;
  --viewport-2:#090D14;
  --bench:#E3E5E4;
  --bench-2:#D6DAD8;

  /* ink */
  --paper:#F2F5F8;
  --ink:#0B0F14;
  --mute-d:rgba(242,245,248,.70);
  --mute-dd:rgba(242,245,248,.50);
  --mute-l:rgba(11,15,20,.64);
  --mute-ll:rgba(11,15,20,.45);
  --rule-d:rgba(242,245,248,.13);
  --rule-l:rgba(11,15,20,.16);

  /* pLDDT ramp */
  --c-vlow:#FF7D45;
  --c-low:#FFD93D;
  --c-ok:#7ED9F5;
  --c-high:#4C8DFF;
  --accent:#7ED9F5;
  --accent-ink:#0B45C9;

  /* type */
  --sans:"Söhne","Soehne","Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"Söhne Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Optical weight compensation. Light text on a dark ground renders
     visibly thinner under grayscale antialiasing — the same 500 that
     looks assured as dark-on-light reads as a limp Regular reversed
     out. The dark ground therefore runs heavier; the bench ground
     overrides these back down. Values are variable-font axis positions,
     not named weights. */
  --w-display:585;
  --w-title:545;
  --track-display:-.034em;

  /* metrics */
  --gut:clamp(20px,4.2vw,72px);
  --maxw:1560px;
  --pad-y:clamp(96px,13vh,176px);
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

html{scroll-behavior:smooth}
body{
  background:var(--viewport);
  color:var(--paper);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: `overflow-x:hidden` turns body into a scroll
     container and silently breaks the sticky viewport in .stage */
  overflow-x:clip;
}

.skip{position:fixed;top:-100px;left:16px;z-index:200;padding:10px 16px;
  background:var(--accent);color:#04070D;font:500 13px/1 var(--mono);letter-spacing:.06em}
.skip:focus{top:16px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── layout primitives ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:900px){
  .grid{grid-template-columns:minmax(150px,1.6fr) minmax(0,8fr) minmax(0,1.4fr);gap:0 clamp(32px,4vw,80px)}
  .grid > .col{grid-column:2}
  .rail{grid-column:1;position:sticky;top:104px;align-self:start;padding-top:.55em}
}

.section{padding-block:var(--pad-y)}
.section--tight{padding-top:0}
.section--last{padding-bottom:clamp(120px,18vh,220px)}

/* ── type ──────────────────────────────────────────────────────────── */
.eyebrow{
  font:500 clamp(10px,.72vw,11.5px)/1.4 var(--mono);
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute-dd);
}
.eyebrow--ink{color:var(--mute-ll)}

.h2{
  font-size:clamp(1.9rem,4.1vw,3.4rem);
  font-weight:var(--w-display);line-height:1.03;letter-spacing:var(--track-display);
  max-width:19ch;
  text-wrap:balance;
}
.h2--xl{font-size:clamp(2.2rem,6vw,4.6rem);max-width:14ch}

.lede{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:clamp(1.02rem,1.15vw + .6rem,1.35rem);
  line-height:1.48;letter-spacing:-.014em;
  color:var(--mute-d);
  max-width:56ch;
}

.prose{margin-top:clamp(20px,2.4vw,32px);max-width:56ch;display:grid;gap:1.1em;
  font-size:clamp(1.02rem,1.15vw + .6rem,1.35rem);line-height:1.48;letter-spacing:-.014em;color:var(--mute-d)}

.pull{
  margin-top:clamp(34px,4vw,56px);
  padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid var(--rule-d);
  font-size:clamp(1.15rem,1.9vw,1.75rem);
  line-height:1.24;letter-spacing:-.024em;font-weight:var(--w-title);
  max-width:26ch;text-wrap:balance;
}

.note{margin-top:clamp(28px,3vw,44px);max-width:52ch;color:var(--mute-d);
  font-size:clamp(.95rem,.9vw + .5rem,1.1rem);line-height:1.5}
.note b{color:var(--paper);font-weight:500}
.note--ink{color:var(--mute-l)}
.note--ink b{color:var(--ink)}

/* ── nav ───────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:100;
  transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease;
  border-bottom:1px solid transparent}
.nav__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:24px}
.nav.is-stuck{background:rgba(5,7,12,.72);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--rule-d)}
.nav.is-ink{color:var(--ink)}
.nav.is-ink.is-stuck{background:rgba(227,229,228,.78);border-bottom-color:var(--rule-l)}

.brand{display:flex;align-items:center;gap:11px;margin-right:auto;flex-shrink:0}
.brand__mark{width:30px;height:22px;color:var(--accent);transition:color .45s ease}
.nav.is-ink .brand__mark{color:var(--accent-ink)}
.brand__wordmark{font:500 clamp(12px,.85vw,13.5px)/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}

.nav__links{display:flex;align-items:center;gap:clamp(18px,2.1vw,34px)}
.nav__links a{font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--mute-d);
  transition:color .2s ease}
.nav.is-ink .nav__links a{color:var(--mute-l)}
.nav__links a:hover{color:var(--paper)}
.nav.is-ink .nav__links a:hover{color:var(--ink)}
.nav__cta{padding:9px 15px;border:1px solid var(--rule-d);border-radius:2px;color:var(--paper)!important}
.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:#04070D!important}
.nav.is-ink .nav__cta{border-color:var(--rule-l);color:var(--ink)!important}
.nav.is-ink .nav__cta:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff!important}

.nav__toggle{display:none;align-items:center;gap:9px;
  font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.nav__toggle-bars{display:grid;gap:4px;width:17px}
.nav__toggle-bars i{height:1px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child{transform:translateY(2.5px) rotate(20deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child{transform:translateY(-2.5px) rotate(-20deg)}

@media (max-width:899px){
  .nav__toggle{display:flex}
  .nav__links{position:fixed;inset:61px 0 auto;flex-direction:column;align-items:flex-start;
    gap:0;padding:8px var(--gut) 26px;background:rgba(5,7,12,.96);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rule-d);
    clip-path:inset(0 0 100% 0);transition:clip-path .4s cubic-bezier(.4,0,.2,1);pointer-events:none}
  .nav.is-ink .nav__links{background:rgba(227,229,228,.97);border-bottom-color:var(--rule-l)}
  .nav__links.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
  .nav__links a{width:100%;padding:15px 0;font-size:15px;border-bottom:1px solid var(--rule-d)}
  .nav.is-ink .nav__links a{border-bottom-color:var(--rule-l)}
  .nav__cta{margin-top:18px;border-radius:2px;padding:14px 18px;text-align:center;width:auto}
  .nav__links a:last-child{border-bottom:0}
}

/* ── the stage: sticky molecular viewport behind the dark half ─────── */
.stage{position:relative}
.stage__viewport{position:sticky;top:0;height:100vh;height:100svh;z-index:0;overflow:hidden}
.stage__viewport canvas{position:absolute;inset:0;width:100%;height:100%}
.stage__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--viewport) 0%,rgba(5,7,12,.9) 38%,rgba(5,7,12,0) 66%),
    linear-gradient(0deg,var(--viewport) 0%,rgba(5,7,12,0) 20%)}
.stage__flow{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh}

/* Wide viewports: the copy gives up its right third so the render has
   a column of its own. Below that, the render drops behind the copy. */
@media (min-width:1180px){
  .stage__flow .grid{grid-template-columns:minmax(140px,1.5fr) minmax(0,5.2fr) minmax(0,5.3fr)}
}
@media (max-width:1179px){
  /* No room for a side-by-side split, so the render takes the top band
     of the viewport at near-full strength and the scrim ramps to solid
     below it, where the copy lives. */
  .stage__viewport canvas{opacity:.95}
  .stage__scrim{background:linear-gradient(180deg,
    rgba(5,7,12,.24) 0%,
    rgba(5,7,12,.32) 21%,
    rgba(5,7,12,.74) 33%,
    rgba(5,7,12,.93) 46%,
    var(--viewport) 63%)}
}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:clamp(120px,16vh,180px) clamp(56px,11vh,130px);position:relative}
.hero__h1{
  margin-top:clamp(18px,2vw,26px);
  font-size:clamp(2.5rem,6.6vw,6.1rem);
  font-weight:var(--w-display);line-height:.98;letter-spacing:-.038em;
}
.hero__h1 span{display:block}
.hero__lede{margin-top:clamp(24px,2.8vw,38px);max-width:50ch;
  font-size:clamp(1rem,.72vw + .78rem,1.2rem);line-height:1.5;
  letter-spacing:-.012em;color:var(--mute-d)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.2vw,42px)}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;
  padding:14px 22px;border:1px solid var(--rule-d);border-radius:2px;
  font:500 13px/1 var(--mono);letter-spacing:.04em;
  transition:background .22s ease,border-color .22s ease,color .22s ease}
.btn:hover{border-color:var(--paper)}
.btn--solid{background:var(--accent);border-color:var(--accent);color:#04070D}
.btn--solid:hover{background:var(--paper);border-color:var(--paper);color:#04070D}
.section--bench .btn,.hinge .btn{border-color:var(--rule-l)}

/* ── the loop: 01–06 (numbered because the content is a real cycle) ─ */
/* Six steps, 1 or 2 across — never 3. Above 1180 the copy shares the
   page with the render column, so a third step column would rag badly. */
.steps{margin-top:clamp(40px,4.6vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;border-top:1px solid var(--rule-d)}
.step{padding:20px 0 30px;border-bottom:1px solid var(--rule-d);position:relative}
@media (min-width:560px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{padding-left:28px;padding-right:28px}
  .step:nth-child(odd){padding-left:0;border-right:1px solid var(--rule-d)}
  .step:nth-child(even){padding-right:0}
}
.step__n{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--mute-dd)}
.step h3{margin-top:14px;font-size:clamp(1.12rem,1.5vw,1.4rem);font-weight:var(--w-title);letter-spacing:-.02em}
.step p{margin-top:9px;font-size:.94rem;line-height:1.5;color:var(--mute-d)}

.loopback{display:flex;gap:12px;align-items:baseline;margin-top:24px;
  font:400 .92rem/1.5 var(--sans);color:var(--mute-d);max-width:52ch}
.loopback b{color:var(--accent);font-weight:500}
.loopback__arrow{font-size:1.15rem;color:var(--accent);line-height:1}

/* ── spec table ────────────────────────────────────────────────────── */
.spec{margin-top:clamp(36px,4.2vw,56px);border-top:1px solid var(--rule-d)}
.spec__row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;
  padding:20px 0;border-bottom:1px solid var(--rule-d)}
@media (min-width:640px){
  .spec__row{grid-template-columns:minmax(180px,.62fr) minmax(0,1fr);gap:28px;align-items:baseline}
}
.spec dt{font:500 11.5px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.spec dd{margin:0;color:var(--mute-d);font-size:1.02rem;line-height:1.5;letter-spacing:-.01em}
.spec--ink{border-top-color:var(--rule-l)}
.spec--ink .spec__row{border-bottom-color:var(--rule-l)}
.spec--ink dd{color:var(--mute-l)}

/* ── engine stack ──────────────────────────────────────────────────── */
.stack{margin-top:clamp(36px,4.2vw,56px);position:relative;padding-left:26px}
.stack::before{content:"";position:absolute;left:3px;top:12px;bottom:34px;width:1px;
  background:linear-gradient(180deg,var(--c-vlow),var(--c-low) 33%,var(--c-ok) 66%,var(--c-high))}
.layer{position:relative;padding:16px 0 20px}
.layer + .layer{border-top:1px solid var(--rule-d)}
.layer::before{content:"";position:absolute;left:-26px;top:24px;width:7px;height:7px;border-radius:50%;
  background:var(--viewport);border:1px solid var(--paper)}
.layer h3{font-size:clamp(1.08rem,1.35vw,1.3rem);font-weight:var(--w-title);letter-spacing:-.02em}
.layer p{margin-top:6px;color:var(--mute-d);font-size:.96rem;line-height:1.5;max-width:52ch}
.layer--return{opacity:.72}
.layer--return h3{color:var(--accent);font-family:var(--mono);font-size:.86rem;
  letter-spacing:.08em;text-transform:uppercase}
.layer--return::before{background:var(--accent);border-color:var(--accent)}

/* ── the hinge: dark → light ───────────────────────────────────────── */
/* Dark-on-light needs no compensation — reset the axis to the value
   the type was actually drawn for. */
.hinge,.section--bench{--w-display:500;--w-title:500;--track-display:-.032em}

.hinge{background:var(--bench);color:var(--ink);
  padding-block:clamp(120px,20vh,240px);position:relative;z-index:2}
.hinge__h{margin-top:clamp(22px,2.6vw,34px);
  font-size:clamp(2.1rem,5.6vw,4.4rem);font-weight:var(--w-display);line-height:1.02;
  letter-spacing:var(--track-display)}
.hinge__p{margin-top:clamp(26px,3vw,40px);max-width:50ch;color:var(--mute-l);
  font-size:clamp(1rem,.72vw + .78rem,1.2rem);line-height:1.5;letter-spacing:-.012em}

/* ── bench sections ────────────────────────────────────────────────── */
.section--bench{background:var(--bench);color:var(--ink);position:relative;z-index:2}
.section--bench .lede,.section--bench .prose{color:var(--mute-l)}

/* ── applications matrix ───────────────────────────────────────────── */
/* eight domains, so the grid only ever splits 1 / 2 / 4 — never a
   ragged final row */
.matrix{margin-top:clamp(48px,5.4vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--rule-l);border-left:1px solid var(--rule-l)}
@media (min-width:620px){.matrix{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1120px){.matrix{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cell{padding:26px 24px 34px;border-right:1px solid var(--rule-l);border-bottom:1px solid var(--rule-l);
  transition:background .3s ease}
.cell:hover{background:var(--bench-2)}
.cell h3{font-size:clamp(1.02rem,1.15vw,1.22rem);font-weight:var(--w-title);letter-spacing:-.02em;
  padding-bottom:14px;border-bottom:1px solid var(--rule-l);margin-bottom:14px}
.cell li{font:400 12.5px/1.9 var(--mono);color:var(--mute-l);letter-spacing:-.005em}

/* ── compute → learn chain ─────────────────────────────────────────── */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 6px;
  margin-top:clamp(34px,4vw,52px)}
.chain span{font:500 11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  padding:10px 14px;border:1px solid var(--rule-l);border-radius:2px}
.chain span + span::before{content:"→";position:absolute;margin-left:-24px;
  color:var(--mute-ll);letter-spacing:0}
.chain span + span{margin-left:24px;position:relative}

/* ── partner ───────────────────────────────────────────────────────── */
.partner{background:var(--viewport);position:relative;z-index:2;
  padding-block:clamp(110px,16vh,200px)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,3.4vw,46px)}
.tags li{font:400 12px/1 var(--mono);letter-spacing:.05em;color:var(--mute-d);
  padding:10px 14px;border:1px solid var(--rule-d);border-radius:2px}

/* ── footer ────────────────────────────────────────────────────────── */
.foot{background:var(--viewport-2);border-top:1px solid var(--rule-d);
  padding-block:clamp(56px,7vh,88px);position:relative;z-index:2}
.foot__in{display:grid;gap:44px}
@media (min-width:900px){
  .foot__in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:0 clamp(32px,4vw,80px);align-items:start}
}
.foot__mark{width:34px;height:25px;color:var(--accent);margin-bottom:16px}
.foot__name{font:500 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.foot__tag{margin-top:12px;max-width:34ch;color:var(--mute-d);font-size:.95rem;line-height:1.5}
.foot__nav{display:grid;gap:11px;align-content:start}
.foot__nav a{font:400 13px/1 var(--mono);color:var(--mute-d);transition:color .2s ease}
.foot__nav a:hover{color:var(--paper)}
.foot__legal{display:grid;gap:11px;font:400 12.5px/1.5 var(--mono);color:var(--mute-dd)}
.foot__legal a{color:var(--mute-d)}
.foot__legal a:hover{color:var(--accent)}

/* ── motion ────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--rvd,0ms)}
.rv.is-in{opacity:1;transform:none}

.load{opacity:0;transform:translateY(16px);
  animation:loadIn .95s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes loadIn{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.load{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}