/* Molecular cinema: one unframed, scroll-directed three-dimensional scene. */
.dna-story{--dna-pin:78px;--dna-height:calc(100svh - var(--dna-pin));background:#060708;color:#edece7;position:relative;border-bottom:1px solid #ffffff18}
.dna-heading{padding-block:92px 64px;display:flex;justify-content:space-between;align-items:end;gap:55px}
.dna-heading .eyebrow{font:10px var(--mono);letter-spacing:.14em;color:#ff5a43;margin:0 0 25px;text-transform:uppercase}
.dna-story .dna-heading h2{font:500 clamp(60px,6.9vw,108px)/.95 var(--display,sans-serif);letter-spacing:-.065em;margin:0;text-transform:none}
.dna-heading>div:last-child{max-width:290px;padding-bottom:4px}.dna-heading>div:last-child p{font-size:14px;line-height:1.7;color:#aaaeb2;margin:0 0 20px}
.dna-skip{font-size:11px;color:#ddd;display:inline-block;border-bottom:1px solid #6d7176;padding-block:10px}
.dna-nav{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;padding-block:19px;gap:20px}
.dna-nav a{font:10px var(--mono);color:#bbb;letter-spacing:.06em;display:flex;gap:12px;padding:7px 0}.dna-nav a span{color:#ff5a43}.dna-nav a:hover{color:white}
.dna-layout{position:relative;isolation:isolate}.dna-visual{position:sticky;top:var(--dna-pin);height:var(--dna-height);min-height:550px;width:100%;overflow:hidden;background:radial-gradient(ellipse at 28% 48%,#151c23 0%,#090b0e 32%,#060708 64%);isolation:isolate}
.dna-canvas,.dna-poster{position:absolute;inset:0;width:100%;height:100%;display:block}.dna-canvas{opacity:0;transition:opacity .7s;touch-action:pan-y}.dna-rendered .dna-canvas{opacity:1}.dna-poster{margin:0;pointer-events:none;transition:opacity .5s}.dna-poster img{width:60%;height:100%;object-fit:contain;opacity:.6}.dna-rendered .dna-poster{opacity:0}
.dna-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 43%,#06070866 57%,#06070800 100%);z-index:1}
.dna-visual-top,.dna-visual-bottom{position:absolute;z-index:3;left:max(32px,calc((100% - 1280px)/2));right:max(32px,calc((100% - 1280px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px;font:9px var(--mono);letter-spacing:.08em;color:#888f99}.dna-visual-top{top:26px}.dna-current{color:#a4aab1;font-size:9px}.dna-toggle{font:9px var(--mono);color:#cdd0d3;padding:10px 13px;border:1px solid #ffffff25;background:#ffffff05;border-radius:30px;cursor:pointer;min-height:36px}.dna-toggle[hidden]{display:none}.dna-toggle:hover,.dna-toggle[aria-pressed=true]{border-color:#ff5a43;color:#ff745f}.dna-visual-bottom{bottom:24px;font-size:8px;letter-spacing:.04em}.dna-visual-bottom>span:last-child{font-size:20px;color:#ff5a43}.dna-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff08;z-index:4}.dna-progress i{display:block;height:100%;background:#ff513b;transform:scaleX(0);transform-origin:left}
.dna-copy{position:relative;z-index:2;pointer-events:none;margin-top:calc(-1 * max(550px,var(--dna-height)))}
.dna-step{min-height:max(550px,var(--dna-height));width:39%;margin-left:61%;display:flex;flex-direction:column;justify-content:center;padding:100px 0 105px;scroll-margin-top:var(--dna-pin)}
.dna-step-number{font:10px var(--mono);color:#ff6853;letter-spacing:.12em;margin:0 0 24px}
.dna-story .dna-step h3{font:500 clamp(36px,3.7vw,61px)/1.03 var(--display,sans-serif);letter-spacing:-.05em;margin:0 0 27px;color:#eee;text-transform:none}
.dna-paragraph{font:400 clamp(15px,1.18vw,18px)/1.85 var(--body,sans-serif);max-width:450px;color:#b4b9bf;margin:0;text-wrap:pretty}
.dna-end{display:flex;justify-content:space-between;align-items:center;gap:35px;padding-block:45px 60px;border-top:1px solid #ffffff18}.dna-end p{font:9px var(--mono);color:#777;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px}.dna-end a:not(.button){font-size:10px;color:#a4aab1;display:inline-block;padding:8px 0;margin-right:20px;text-decoration:underline;text-underline-offset:4px}.dna-end .button{font-size:12px}.dna-story a:focus-visible,.dna-story button:focus-visible{outline:2px solid #ff6853;outline-offset:5px}
@media(max-width:900px){.dna-story{--dna-pin:67px}.dna-heading{padding-block:60px 40px;gap:30px}.dna-story .dna-heading h2{font-size:66px}.dna-heading>div:last-child{max-width:240px}.dna-visual{min-height:670px;background:radial-gradient(ellipse at 50% 26%,#172029 0%,#0a0d11 25%,#060708 52%)}.dna-copy{margin-top:calc(-1 * max(670px,var(--dna-height)))}.dna-step{width:100%;margin-left:0;min-height:max(670px,var(--dna-height));padding:calc(max(670px,var(--dna-height)) * .48) 4% 100px;justify-content:flex-start}.dna-story .dna-step h3{font-size:42px;margin-bottom:19px;max-width:500px}.dna-paragraph{font-size:15px;line-height:1.75;max-width:540px}.dna-step-number{margin-bottom:18px}.dna-poster img{width:100%;height:48%}.dna-visual:after{background:linear-gradient(180deg,transparent 33%,#060708bb 48%,transparent 60%)}.dna-visual-top,.dna-visual-bottom{left:5%;right:5%}}
@media(max-width:600px){.dna-heading{display:block;padding-block:55px 30px}.dna-story .dna-heading h2{font-size:58px}.dna-heading .eyebrow{font-size:9px;margin-bottom:22px}.dna-heading>div:last-child{max-width:295px;margin-top:24px}.dna-heading>div:last-child p{font-size:13px;margin-bottom:8px}.dna-nav{gap:6px;padding-block:14px}.dna-nav a{font-size:8px;gap:5px;letter-spacing:0}.dna-visual{min-height:730px}.dna-copy{margin-top:calc(-1 * max(730px,var(--dna-height)))}.dna-step{min-height:max(730px,var(--dna-height));padding:calc(max(730px,var(--dna-height)) * .44) 0 90px}.dna-story .dna-step h3{font-size:39px;margin-bottom:20px}.dna-paragraph{font-size:14px;line-height:1.8}.dna-visual-top{top:17px}.dna-current{font-size:7px;max-width:65%;line-height:1.5}.dna-visual-bottom{font-size:6px;bottom:18px}.dna-toggle{font-size:8px;padding:8px 11px}.dna-step-number{font-size:9px;margin-bottom:17px}.dna-end{display:block;padding-block:30px 40px}.dna-end .button{margin-top:20px;width:100%}.dna-end a:not(.button){font-size:9px;margin-right:13px}}
@media(prefers-reduced-motion:reduce){.dna-canvas,.dna-poster{transition:none}.dna-visual{position:relative;top:0;height:420px;min-height:0}.dna-copy{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:50px}.dna-step{min-height:0;margin:0;width:auto;padding:35px 0}.dna-poster img{height:100%;width:100%}.dna-visual-top,.dna-visual-bottom{display:none}.dna-story .dna-step h3{font-size:38px}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.dna-visual{height:300px}.dna-copy{display:block}.dna-step{padding:30px 0}.dna-heading{padding-top:40px}}

/* Molecular films share the native chapter layout; the films never contain page copy. */
.dna-films{position:absolute;left:0;top:5%;width:58%;height:90%;opacity:0;pointer-events:none;mix-blend-mode:lighten;isolation:isolate;-webkit-mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent)}
.dna-rendered .dna-films{opacity:1}.dna-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;pointer-events:none;background:transparent}.dna-film-peptide{opacity:0}
.dna-story .dna-canvas{display:none!important}.dna-story .dna-poster,.dna-story.dna-rendered .dna-poster{opacity:1}.dna-story .dna-peptide-poster,.dna-story.dna-rendered .dna-peptide-poster{opacity:0}
.dna-story[data-active="2"] .dna-poster:not(.dna-peptide-poster),.dna-story[data-active="3"] .dna-poster:not(.dna-peptide-poster){opacity:0}
.dna-story[data-active="2"] .dna-peptide-poster,.dna-story[data-active="3"] .dna-peptide-poster{opacity:1}
.dna-story.dna-active-film-ready .dna-poster{opacity:0}
@media(max-width:900px){.dna-films{left:0;top:0;width:100%;height:42%}}
@media(prefers-reduced-motion:reduce){.dna-films{display:none}.dna-story.dna-active-film-ready .dna-poster:not(.dna-peptide-poster){opacity:1}.dna-story[data-active="2"] .dna-poster:not(.dna-peptide-poster),.dna-story[data-active="3"] .dna-poster:not(.dna-peptide-poster){opacity:0}.dna-poster{transition:none}}
.dna-films{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
