/* ArkDossier — Dossier 002: Rock Elemental.
   Built on dossier.css (same tokens, lettering, buttons, notes, accordions, footer).
   This file only adds the page's art direction. Mobile first. */
.rk{--rk-night:#1b0b4a;--rk-amber:#ffb347;--rk-mineral:#1f9a73;background:var(--ink);color:var(--ink)}
.rk-skip{position:absolute;z-index:60;left:12px;top:-60px;background:var(--lime);color:var(--ink);padding:12px 14px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.rk-skip:focus{top:12px}
section[id]{scroll-margin-top:52px}
.rk-tame:focus{outline:none}
.rk-intro{margin-top:18px;max-width:46ch;font-size:clamp(16px,1.35vw,20px);line-height:1.5;font-weight:500}
.rk-g-title{color:var(--violet);--sw:7;width:min(100%,var(--gw,760px));margin:14px 0 0}
.it{font-style:italic;text-transform:none;letter-spacing:.02em}

/* ================= 01 HERO: graded artwork, layered ================= */
.rk-hero{position:relative;background:var(--rk-night);color:var(--bone)}
.rk-hero-pin{position:relative;display:flex;flex-direction:column;padding-top:56px;overflow:hidden;isolation:isolate;background:var(--rk-night)}
.rk-frame{position:relative;order:2;width:100%;aspect-ratio:4/5;margin-top:-26vw}
.rk-frame picture{display:contents}
.rk-h-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.rk-h-cre{position:absolute;inset:0;z-index:3;pointer-events:none}
.rk-h-golem,.rk-h-fog{display:none}
.rk-h-dust{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.rk-h-dust i{position:absolute;left:0;top:40%;width:200%;height:46%;background:#cdb4ff;opacity:.16;-webkit-mask:url(art/rk-fog.webp) 0 0/50% 100% repeat-x;mask:url(art/rk-fog.webp) 0 0/50% 100% repeat-x}
.rk-h-anno{position:absolute;inset:0;z-index:5}
.rk-hero .note.open .spot:after{animation:none;opacity:0}
.rk-h-anno:has(.n1.open) .l1,.rk-h-anno:has(.n2.open) .l2{stroke:var(--lime);stroke-width:3.5}
@keyframes rk-fogdrift{to{transform:translateX(-50%)}}
@keyframes rk-breathe{from{opacity:.1}to{opacity:.24}}
@media (prefers-reduced-motion:no-preference){
  .rk-h-dust i,.rk-atmo i{animation:rk-fogdrift 80s linear infinite,rk-breathe 11s ease-in-out infinite alternate}
  .rk-atmo i{animation:rk-fogdrift 90s linear infinite}
  .rk-h-bg{animation:rk-h-in 1.8s cubic-bezier(.2,.7,.15,1) both}
}
@keyframes rk-h-in{from{opacity:.4;transform:scale(1.05)}}
@keyframes rk-h-rise{from{opacity:0;transform:translateY(4%) scale(.97)}}
@keyframes rk-h-settle{from{transform:translateY(-16%)}}
/* headings stay visible if the lettering script never runs */
html:not(.js) .rk h1.sr,html:not(.js) .rk h2.sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font:500 clamp(26px,5vw,64px)/1.05 var(--mono);letter-spacing:-.03em;text-transform:uppercase;margin:12px 0}
html:not(.js) .rk-hero h1.sr{color:var(--lime);background:var(--ink);padding:.1em .2em;display:inline-block}
.rk-h-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.rk-h-lines path{fill:none;stroke:var(--bone);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.rk-hero .note{z-index:5}
.rk-hero .spot{background:var(--lime)}
.rk-hero .n1 .spot{left:52.3%;top:42.1%}
.rk-hero .n2 .spot{left:49.5%;top:61.2%}
.rk-hero .note-body{display:none;left:4%;right:4%;top:auto;bottom:22%;background:var(--ink);color:var(--lime);border-color:var(--ink);padding:12px 14px}
.rk-hero .note.open .note-body{display:block}
.rk-h-type{position:relative;order:1;z-index:5;margin:18px var(--gut) 0;color:var(--bone);pointer-events:none;--sw:6}
.rk-h-type .g-the{width:62%}
.rk-h-type .g-name{width:100%;margin-top:2%;color:var(--lime)}
.rk-h-copy{position:relative;order:3;z-index:6;margin:-30vw var(--gut) 0;padding-bottom:36px}
.rk-h-kick{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--bone)}
.rk-h-kick>i{width:30px;height:2px;background:var(--lime)}
.rk-h-hook{font:500 clamp(22px,4.2vw,56px)/1.14 var(--mono);letter-spacing:-.03em;text-transform:uppercase}
.rk-h-hook span{background:var(--ink);color:var(--lime);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.04em .2em}
.rk-h-lede{margin-top:14px;max-width:40ch;font-size:clamp(15px,1.25vw,19px);line-height:1.5;font-weight:500}
.rk-h-lede span{background:var(--bone);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.14em .35em;margin-left:-.35em}
.rk-h-copy .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rk-hero .btn{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.rk-hero .btn.ghost{background:transparent;color:var(--bone);border-color:var(--bone)}
.rk-h-side,.rk-h-scroll,.rk-hero .plus{display:none}
.rk-hero .grain{mix-blend-mode:soft-light;opacity:.55;z-index:7}

/* ================= SHORT ANSWER (shared .answer system) ================= */
.rk-answer .a-facts dd{font-weight:600}

/* ================= 02 SPECIMEN: the one archival exhibit ================= */
.rk-spec{position:relative;background:var(--bone);padding:clamp(60px,9vw,140px) var(--gut)}
.rk-spec-head .rk-g-title{--gw:820px}
.rk-vitrine{margin-top:clamp(34px,5vw,70px);display:grid;gap:26px}
.rk-spread{position:relative;margin:0}
.rk-spread img{width:100%;height:auto;filter:drop-shadow(0 22px 30px #12063a33)}
.rk-spread figcaption{margin-top:12px;opacity:.6;font-size:10px}
.rk-marks{list-style:none;margin:0;padding:0}
.rk-marks li{position:absolute;display:grid;place-items:center;width:34px;height:34px;margin:-17px;border-radius:50%;border:2px solid var(--ink);background:var(--lime);font:600 10.5px/1 var(--mono)}
.rk-marks li:after{content:"";position:absolute;inset:-8px;border:1.5px solid var(--ink);border-radius:50%;opacity:.45;animation:ping 2.4s ease-out infinite}
.rk-marks .m1{left:30%;top:24%}.rk-marks .m2{left:31%;top:56%}.rk-marks .m3{left:17%;top:82%}.rk-marks .m4{left:41%;top:73%}
.rk-notes{list-style:none;margin:0;padding:0}
.rk-notes li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1.5px solid var(--ink)}
.rk-notes li:last-child{border-bottom:1.5px solid var(--ink)}
.rk-note-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:10.5px}
.rk-notes h3{font:500 clamp(18px,1.8vw,24px)/1.05 var(--mono);letter-spacing:-.02em;text-transform:uppercase}
.rk-notes p{margin-top:6px;font-size:15.5px;line-height:1.5;max-width:44ch}
.rk-specs{max-width:none;margin-top:clamp(36px,5vw,64px)}
.rk-specs dt{background:var(--ink);color:var(--lime)}
.rk-specs dd i{font-weight:600}

/* ================= 03 THREE FORMS: three artworks, one collection ================= */
.rk-forms{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;background:var(--rk-night);color:var(--bone);overflow:clip;isolation:isolate}
.rk-forms-art{position:absolute;inset:0;z-index:-1;overflow:hidden;container-type:size}
.rk-forms-frame{position:absolute;--fw:max(100cqw,200cqh);width:var(--fw);aspect-ratio:2/1;left:calc((100cqw - var(--fw)) * .62);top:calc((100cqh - var(--fw) / 2) * .35)}
.rk-plate{position:absolute;inset:0;margin:0;visibility:hidden;z-index:0;clip-path:inset(0 0 0 100%)}
.rk-plate.was{visibility:visible;z-index:1;clip-path:inset(0)}
.rk-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rk-forms[data-v=rock] .pl-rock,.rk-forms[data-v=ice] .pl-ice,.rk-forms[data-v=chalk] .pl-chalk,.rk-forms[data-v=xrock] .pl-xrock{visibility:visible;z-index:2;clip-path:inset(0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
@media (prefers-reduced-motion:no-preference){
  .js .rk-forms[data-v=rock] .pl-rock img,.js .rk-forms[data-v=ice] .pl-ice img,.js .rk-forms[data-v=chalk] .pl-chalk img,.js .rk-forms[data-v=xrock] .pl-xrock img{animation:rk-plate-in 1.8s cubic-bezier(.2,.7,.2,1) both}
  .js .rk-forms[data-v=rock] .pl-rock .rk-ring,.js .rk-forms[data-v=ice] .pl-ice .rk-ring,.js .rk-forms[data-v=chalk] .pl-chalk .rk-ring,.js .rk-forms[data-v=xrock] .pl-xrock .rk-ring{animation:rk-ring-in .7s .6s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes rk-plate-in{from{transform:scale(1.09)}}
@keyframes rk-ring-in{from{opacity:0;scale:1.9}}
/* per-variant atmosphere: a drifting haze tinted for each habitat, over the untouched screenshot */
.rk-forms{--atmo:#ffd9a0;--atmo-o:.16}
.rk-forms[data-v=ice]{--atmo:#e4f3ff;--atmo-o:.42}
.rk-forms[data-v=chalk]{--atmo:#ffffff;--atmo-o:.2}
.rk-forms[data-v=xrock]{--atmo:#ff8a3d;--atmo-o:.3}
.rk-atmo{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.rk-atmo i{position:absolute;left:0;bottom:0;width:200%;height:62%;background:var(--atmo);opacity:var(--atmo-o);transition:background .9s,opacity .9s;-webkit-mask:url(art/rk-fog.webp) 0 0/50% 100% repeat-x;mask:url(art/rk-fog.webp) 0 0/50% 100% repeat-x}
.rk-atmo:before,.rk-atmo:after{content:"";position:absolute;left:0;right:0;opacity:0;transition:opacity .9s}
.rk-atmo:before{top:0;height:45%;background:linear-gradient(#bfe6ff40,#bfe6ff00)}
.rk-atmo:after{bottom:0;height:48%;background:linear-gradient(#ff4a1c00,#ff4a1c70);mix-blend-mode:screen}
.rk-forms[data-v=ice] .rk-atmo:before{opacity:1}
.rk-forms[data-v=xrock] .rk-atmo:after{opacity:1}
@media (prefers-reduced-motion:no-preference){.rk-forms[data-v=xrock] .rk-atmo:after{animation:rk-ember 4.6s ease-in-out infinite alternate}}
@keyframes rk-ember{from{opacity:.5}to{opacity:1}}
/* legibility: a violet shade that sits under the copy column only */
.rk-forms-art:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(90deg,#12063ad9,#12063a80 30%,#12063a00 52%),linear-gradient(#12063a00 70%,#12063acc);mix-blend-mode:multiply}
/* specimen ring: placed on each creature's head */
.rk-ring{position:absolute;left:var(--hx);top:var(--hy);width:clamp(54px,7.4%,130px);aspect-ratio:1;translate:-50% -50%;border:2px solid var(--lime);border-radius:50%;pointer-events:none}
.rk-ring:before{content:"";position:absolute;inset:-12px;border:1.5px dashed #c6ff1a99;border-radius:50%}
.rk-ring i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--lime)}
.rk-ring:after{content:"HEAD";position:absolute;left:calc(100% + 16px);top:50%;translate:0 -50%;font:600 10px/1 var(--mono);letter-spacing:.12em;background:var(--lime);color:var(--ink);padding:5px 7px}
.pl-rock{--hx:59%;--hy:36%}.pl-ice{--hx:59.2%;--hy:38.5%}.pl-chalk{--hx:58.8%;--hy:37.5%}.pl-xrock{--hx:59.8%;--hy:37.5%}
.rk-plate-cap{position:absolute;right:var(--gut);bottom:14px;z-index:5;display:flex;gap:12px;align-items:center;font-size:9.5px;color:var(--bone)}
.rk-plate-cap span{display:none;background:var(--ink);color:var(--lime);padding:5px 7px}
.rk-plate-cap b{font-weight:500;opacity:.8}
.rk-forms[data-v=rock] .pc-rock,.rk-forms[data-v=ice] .pc-ice,.rk-forms[data-v=chalk] .pc-chalk,.rk-forms[data-v=xrock] .pc-xrock{display:inline-block}
.rk-forms .grain{mix-blend-mode:soft-light;opacity:.5}
.rk-forms-ui{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:clamp(60px,8vw,110px) var(--gut) clamp(26px,4vw,48px)}
.rk-forms-head .mono{display:inline-block;background:var(--ink);color:var(--lime);padding:6px 9px}
.rk-forms-head h2{margin-top:14px;font:500 clamp(26px,4.6vw,64px)/1.1 var(--mono);letter-spacing:-.035em;text-transform:uppercase;max-width:15ch}
.rk-forms-head h2{text-shadow:0 2px 24px #12063a66}
.rk-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1.5px solid #f4f0e699;background:#12063ad9;padding:0 14px}
.rk-tab{position:relative;display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:16px 10px 4px 0;background:none;border:0;color:var(--bone);cursor:pointer;text-align:left;min-height:64px}
.rk-tab-g{display:block;width:100%;max-width:220px;--sw:9;opacity:.5;transition:opacity .25s,color .25s}
.rk-tab-g .glyphs{height:clamp(26px,5vw,62px);width:auto}
.rk-tab>.mono{font-size:9.5px;opacity:.8}
.rk-tab:hover .rk-tab-g{opacity:.85}
.rk-tab[aria-selected=true] .rk-tab-g{opacity:1;color:var(--lime)}
.rk-tab:before{content:"";position:absolute;left:0;right:12px;top:-1.5px;height:5px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.6,0,.2,1)}
.rk-tab[aria-selected=true]:before{transform:none}
.rk-panel[hidden]{display:none}
.js .rk-panels{display:grid}
.js .rk-panels>.rk-panel{grid-area:1/1;align-self:end}
.js .rk-panel[hidden]{display:block;visibility:hidden}
.rk-panel{background:var(--ink);color:var(--bone);padding:18px 20px 20px;max-width:520px;border-left:5px solid var(--lime)}
.js .rk-panel:not([hidden]){animation:rk-rise .5s cubic-bezier(.2,.7,.2,1) both}
.rk-panels>.rk-panel+.rk-panel{margin-top:12px}
.js .rk-panels>.rk-panel+.rk-panel{margin-top:0}
.rk-panel h3{font:500 clamp(20px,2.2vw,30px)/1.05 var(--mono);letter-spacing:-.025em;text-transform:uppercase;color:var(--lime)}
.rk-panel p{margin-top:8px;font-size:15.5px;line-height:1.5}
.rk-panel .rk-panel-hook{margin-top:6px;color:var(--magenta);font-size:11px;letter-spacing:.12em}
.rk-panel dl{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px 22px}
.rk-panel dl div{display:flex;gap:8px;align-items:baseline}
.rk-panel dt{background:var(--lime);color:var(--ink);padding:3px 6px}
.rk-panel dd{margin:0;font-weight:600;font-size:14.5px}
.rk-forms-note{max-width:70ch;font-size:9.5px;line-height:1.6;opacity:.85}
@keyframes rk-rise{from{opacity:0;transform:translateY(16px)}}

/* ================= TRANSITION: the molten heart (X-Rock) ================= */
.rk-molten{position:relative;background:#16070c;color:var(--bone);overflow:clip;isolation:isolate}
.rk-molten-art{position:relative;margin:0;aspect-ratio:1/1;--hx:45.2%;--hy:39.4%}
.rk-molten-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rk-molten-art:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#16070c00 60%,#16070c)}
.rk-molten-art .rk-ring{width:16%}
.rk-molten-copy{position:relative;z-index:2;padding:0 var(--gut) clamp(50px,8vw,90px);margin-top:-14vw}
.rk-molten-copy>.mono{display:inline-block;background:var(--ink);color:var(--lime);padding:6px 9px}
.rk-molten-g{color:var(--lime);--sw:7;width:min(100%,560px);margin:16px 0 0}
.rk-molten-copy p{margin-top:16px;max-width:34ch;font:500 clamp(17px,1.6vw,22px)/1.45 var(--sans)}
.rk-molten-copy p span{background:var(--ink);color:var(--bone);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:.12em .35em;margin-left:-.35em}
.rk-molten-copy .btn{margin-top:22px;background:var(--lime);color:var(--ink);border-color:var(--lime)}
.rk-molten .grain{mix-blend-mode:soft-light;opacity:.5}

/* ================= 04 HOW TO TAME: a six-phase sequence ================= */
.rk-tame{position:relative;background:var(--bone);padding:clamp(60px,9vw,140px) var(--gut) 0;overflow-x:clip}
.rk-tame-head h2{margin-top:14px;font:500 clamp(30px,6.4vw,100px)/1.02 var(--mono);letter-spacing:-.045em;text-transform:uppercase}
.rk-tame-head h2 em{font-style:normal;color:var(--magenta)}
.rk-tame-scope{margin-top:18px;max-width:60ch;padding:10px 12px;background:var(--ink);color:var(--lime);line-height:1.6}
/* persistent progress */
.rk-prog{position:sticky;top:48px;z-index:20;margin:clamp(30px,5vw,60px) calc(var(--gut)*-1) 0;background:var(--ink);color:var(--bone);--n:1}
.rk-prog ol{list-style:none;margin:0;padding:0 var(--gut);display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.rk-prog a{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;color:inherit;text-decoration:none;opacity:.55;transition:opacity .2s,color .2s}
.rk-prog a:hover{opacity:1}
.rk-prog b{font-weight:600}
.rk-prog span{display:none}
.rk-prog li.done a{opacity:.9}
.rk-prog li.on a{opacity:1;color:var(--lime)}
.rk-prog li.on span{display:inline}
.rk-prog-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#f4f0e626}
.rk-prog-bar:after{content:"";position:absolute;inset:0;background:var(--lime);transform-origin:left;transform:scaleX(calc(var(--n)/6));transition:transform .5s cubic-bezier(.6,0,.2,1)}
/* phases */
.rk-phases{list-style:none;margin:0;padding:0}
.rk-ph{position:relative;display:grid;gap:26px;padding:clamp(44px,7vw,96px) 0;scroll-margin-top:92px}
.rk-ph+.rk-ph.ph-a{border-top:1.5px solid var(--ink)}
.rk-ph .m-n{width:clamp(64px,8vw,116px);color:var(--magenta);--sw:9;margin-bottom:16px}
.rk-phase{display:inline-block;margin-bottom:12px;padding:4px 7px;background:var(--ink);color:var(--lime)}
.rk-ph h3{font:500 clamp(24px,3vw,46px)/1.04 var(--mono);letter-spacing:-.03em;text-transform:uppercase;max-width:18ch}
.rk-ph-txt>p{margin-top:12px;max-width:52ch;font-size:clamp(15.5px,1.15vw,18px);line-height:1.55}
.rk-ph-fig{margin:0;min-width:0}
.rk-ph-fig figcaption{margin-top:12px;font-size:9.5px;line-height:1.6;opacity:.7;max-width:70ch}
.rk-ph.ph-b{color:#fff;background:var(--violet);box-shadow:0 0 0 100vmax var(--violet);clip-path:inset(0 -100vmax)}
.rk-ph.ph-b+.ph-b{border-top:1.5px solid #ffffff40}
.rk-ph.ph-b .m-n{color:var(--lime)}
.rk-ph.ph-b .rk-phase{background:var(--lime);color:var(--ink)}
.rk-ph.ph-c{background:var(--lime);box-shadow:0 0 0 100vmax var(--lime);clip-path:inset(0 -100vmax)}
.rk-ph.ph-c .m-n{color:var(--violet)}
.rk-xnote{margin-top:18px;max-width:60ch;padding:12px 14px;border-left:4px solid var(--magenta);background:#12063a0d;font-size:15px}
.rk-xnote b{display:block;margin-bottom:6px;color:var(--magenta);font-weight:600}
.rk-replay{margin-top:18px;min-height:44px;padding:0 14px;background:transparent;border:1.5px solid currentColor;color:inherit;cursor:pointer}
.rk-replay:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
/* 01 kit */
.rk-kit ul,.rk-feed ul{list-style:none;margin:0;padding:0}
.rk-kit li{display:grid;grid-template-columns:clamp(96px,26vw,150px) minmax(0,1fr);gap:clamp(16px,3vw,34px);align-items:center;padding:18px 0;border-top:1.5px solid var(--ink)}
.rk-kit li:last-child{border-bottom:1.5px solid var(--ink)}
.rk-kit li>img,.k-stack{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.rk-kit li>img{height:auto;padding:16%;outline:1.5px dashed var(--ink);outline-offset:8px}
.rk-kit .k-cannon>img{background:var(--violet)}
.k-stack{display:block;outline:1.5px dashed var(--ink);outline-offset:8px}
.k-stack img{position:absolute;width:46%;height:auto;left:27%;top:14%}
.k-stack img+img{left:10%;top:42%}.k-stack img+img+img{left:44%;top:42%}
.rk-kit li .mono{color:var(--magenta)}
.rk-kit b,.rk-feed b{display:block;margin-top:4px;font:500 clamp(20px,2.2vw,30px)/1.05 var(--mono);letter-spacing:-.025em;text-transform:uppercase}
.rk-kit p,.rk-feed p{margin-top:6px;max-width:40ch;font-size:15.5px;line-height:1.5}
/* 02 + 03 plan schematics */
.rk-plan{display:block;width:100%;height:auto;background:var(--ink);overflow:hidden}
.rk-plan .pgl{fill:none;stroke:#f4f0e6;stroke-width:1;opacity:.07}
.rk-plan .seg{fill:#9a94b8;stroke:var(--bone);stroke-width:1.5}
.rk-plan .cb{fill:#3a2f6b;stroke:var(--bone);stroke-width:2;stroke-linejoin:round}
.rk-plan .cw{fill:var(--bone)}
.rk-plan .cc{fill:none;stroke:var(--bone);stroke-width:2}
.rk-plan .fire{fill:none;stroke:var(--lime);stroke-width:3;stroke-dasharray:10 8}
.rk-plan .dim{fill:none;stroke:var(--bone);stroke-width:1.5;opacity:.7}
.rk-plan .lb{font:600 13px var(--mono);letter-spacing:.08em;fill:var(--bone)}
.rk-plan .lb.sm{font-weight:500;font-size:11px;letter-spacing:.04em;opacity:.78}
.rk-plan .lb.lime{fill:var(--lime)}
.rk-plan .ldr{fill:none;stroke:var(--bone);stroke-width:1.2;opacity:.7}
.rk-plan .ldr.lime{stroke:var(--lime);opacity:1}
.rk-plan .gb{fill:var(--violet);stroke:var(--bone);stroke-width:2}
.rk-plan .gh{fill:var(--lime);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.rk-plan .tgt{fill:none;stroke:var(--lime);stroke-width:2;stroke-dasharray:4 5}
.rk-plan .you{fill:var(--magenta);stroke:var(--bone);stroke-width:2}
.rk-plan .ghost{fill:none;stroke:var(--bone);stroke-width:1.5;stroke-dasharray:5 5;opacity:.6}
.rk-plan .trail{fill:none;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:var(--o,0)}
.rk-plan .trail-you{stroke:var(--magenta)}.rk-plan .trail-g{stroke:var(--bone);opacity:.6}
.rk-plan-lure .st-c .you,.rk-plan-lure .st-c .lb.yl{display:none}
.rk-plan .lb.yl{font-weight:500;font-size:11px;letter-spacing:.06em;opacity:.85}
.rk-plan-lure .st-done{opacity:var(--done,1);transition:opacity .4s}
/* staged assembly, driven by --s (0→1) from scroll; fully built without JS */
.rk-plan-build .seg{opacity:clamp(0,calc(var(--s,1)*30 - var(--i)),1)}
.rk-plan-build .st-w .ldr,.rk-plan-build .st-w .lb{opacity:clamp(0,calc((var(--s,1) - .42)*10),1)}
.rk-plan-build .st-c{opacity:clamp(0,calc((var(--s,1) - .5)*8),1);transform:translateX(calc((1 - clamp(0,calc((var(--s,1) - .5)*8),1))*-36px))}
.rk-plan-build .st-f{opacity:clamp(0,calc((var(--s,1) - .68)*8),1)}
.rk-plan-build .st-g{opacity:clamp(0,calc((var(--s,1) - .84)*8),1)}
.rk-plan-build .seg:nth-child(1){--i:0}.rk-plan-build .seg:nth-child(2){--i:1}.rk-plan-build .seg:nth-child(3){--i:2}.rk-plan-build .seg:nth-child(4){--i:3}.rk-plan-build .seg:nth-child(5){--i:4}.rk-plan-build .seg:nth-child(6){--i:5}.rk-plan-build .seg:nth-child(7){--i:6}.rk-plan-build .seg:nth-child(8){--i:7}.rk-plan-build .seg:nth-child(9){--i:8}.rk-plan-build .seg:nth-child(10){--i:9}.rk-plan-build .seg:nth-child(11){--i:10}.rk-plan-build .seg:nth-child(12){--i:11}.rk-plan-build .seg:nth-child(13){--i:12}.rk-plan-build .seg:nth-child(14){--i:13}
.rk-stages{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;max-width:52ch}
.rk-stages li{display:flex;gap:10px;align-items:center;padding:9px 10px;border:1.5px solid var(--ink);line-height:1.4;transition:background .3s,color .3s}
.rk-stages b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:600}
.js .rk-stages li{opacity:.45}
.js .rk-stages li.on{opacity:1;background:var(--ink);color:var(--bone)}
.js .rk-stages li.on b{background:var(--lime);color:var(--ink)}
/* 04 the cannon sight */
.rk-sim{display:grid;gap:22px}
.rk-sim-stage{position:relative;aspect-ratio:1/1;background:var(--ink);overflow:hidden;cursor:crosshair;touch-action:manipulation;--x:50%;--y:58%;user-select:none;-webkit-user-select:none}
.rk-sim-stage:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.rk-sim-view{position:absolute;inset:0;transition:filter .8s,transform .9s cubic-bezier(.5,0,.3,1)}
.rk-sim-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rk-sim-stage:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#f4f0e612 1px,transparent 1px) 0 0/100% 12.5%,linear-gradient(90deg,#f4f0e612 1px,transparent 1px) 0 0/8.333% 100%,radial-gradient(120% 90% at 50% 45%,transparent 55%,#12063acc)}
.rk-sim-stage:after{content:"";position:absolute;inset:12px;z-index:2;pointer-events:none;border:1.5px solid #c6ff1a66;-webkit-mask:linear-gradient(#000 0 0) 0 0/34px 34px no-repeat,linear-gradient(#000 0 0) 100% 0/34px 34px no-repeat,linear-gradient(#000 0 0) 0 100%/34px 34px no-repeat,linear-gradient(#000 0 0) 100% 100%/34px 34px no-repeat;mask:linear-gradient(#000 0 0) 0 0/34px 34px no-repeat,linear-gradient(#000 0 0) 100% 0/34px 34px no-repeat,linear-gradient(#000 0 0) 0 100%/34px 34px no-repeat,linear-gradient(#000 0 0) 100% 100%/34px 34px no-repeat}
.rk-sim-flash{position:absolute;inset:0;background:var(--magenta);mix-blend-mode:multiply;opacity:0;pointer-events:none}
.rk-sim-fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
#sim-trail{fill:none;stroke:var(--lime);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .45s}
.rk-sim-ball{position:absolute;left:0;top:0;z-index:4;width:44px;height:44px;margin:-22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a9abb3,#3a3b42 55%,#0c0c0f);opacity:0;pointer-events:none;will-change:transform}
.rk-sim-impact{position:absolute;left:var(--ix,50%);top:var(--iy,50%);z-index:4;width:14%;aspect-ratio:1;translate:-50% -50%;border:3px solid var(--lime);border-radius:50%;opacity:0;pointer-events:none}
.rk-sim-impact.bad{border-color:var(--magenta)}
.rk-sim-impact.go{animation:rk-impact .6s cubic-bezier(.2,.7,.2,1)}
@keyframes rk-impact{0%{opacity:1;scale:.2}100%{opacity:0;scale:1.5}}
.rk-sim-zone{position:absolute;left:var(--zx,50%);top:var(--zy,30%);width:var(--zw,18%);height:var(--zh,22%);translate:-50% -50%;z-index:3;border:2px dashed var(--lime);border-radius:50%;opacity:0;pointer-events:none;transition:opacity .5s}
.rk-sim-zone b{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 0;background:var(--lime);color:var(--ink);padding:4px 6px;font-size:9.5px;font-weight:600}
.rk-sim.hint .rk-sim-zone{opacity:1}
.rk-sim-ret{position:absolute;left:var(--x);top:var(--y);z-index:5;width:clamp(56px,11%,92px);aspect-ratio:1;translate:-50% -50%;border:2px solid var(--lime);border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px #12063a80,inset 0 0 0 1px #12063a80;
  background:linear-gradient(var(--lime) 0 0) 50% 0/2px 22% no-repeat,linear-gradient(var(--lime) 0 0) 50% 100%/2px 22% no-repeat,linear-gradient(var(--lime) 0 0) 0 50%/22% 2px no-repeat,linear-gradient(var(--lime) 0 0) 100% 50%/22% 2px no-repeat}
.rk-sim-ret b{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--lime)}
.rk-sim-ret.snap{transition:left .35s cubic-bezier(.3,.7,.2,1),top .35s cubic-bezier(.3,.7,.2,1)}
.rk-sim-hud{position:absolute;z-index:5;font-size:9.5px;color:var(--bone);background:#12063acc;padding:5px 7px;pointer-events:none}
.rk-sim-hud.tl{left:22px;top:22px}.rk-sim-hud.tr{right:22px;top:22px}.rk-sim-hud.bl{left:22px;bottom:22px;color:var(--lime)}
.rk-sim-hud b{font-weight:600;color:var(--lime)}
.rk-sim-banner{position:absolute;left:50%;top:50%;z-index:6;translate:-50% -50%;padding:12px 16px;font-size:clamp(16px,2.4vw,30px);font-weight:600;letter-spacing:.14em;background:var(--lime);color:var(--ink);opacity:0;pointer-events:none;transition:opacity .4s .5s}
.rk-sim[data-state=ko] .rk-sim-banner,.rk-sim[data-state=dead] .rk-sim-banner{opacity:1}
.rk-sim[data-state=dead] .rk-sim-banner{background:var(--magenta);color:#fff}
.rk-sim[data-state=ko] .rk-sim-view{filter:grayscale(.6) brightness(.6);transform:rotate(1.6deg) translateY(1.5%) scale(1.03)}
.rk-sim[data-state=dead] .rk-sim-view{filter:grayscale(1) brightness(.32)}
.rk-sim[data-state=ko] .rk-sim-ret,.rk-sim[data-state=dead] .rk-sim-ret{opacity:.25}
.rk-sim-view.hit-head{animation:rk-headshake .5s cubic-bezier(.3,.6,.3,1)}
.rk-sim-view.hit-body{animation:rk-recoil .35s ease-out}
.rk-sim-view.hit-body .rk-sim-flash{animation:rk-flash .45s ease-out}
@keyframes rk-headshake{0%{transform:none}20%{transform:rotate(-1.3deg)}45%{transform:rotate(1.1deg)}70%{transform:rotate(-.6deg)}100%{transform:none}}
@keyframes rk-recoil{0%{transform:none}30%{transform:translate(5px,3px)}100%{transform:none}}
@keyframes rk-flash{0%{opacity:.55}100%{opacity:0}}
.rk-sim-panel{display:grid;gap:14px;align-content:start}
.rk-meter{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;align-items:center}
.rk-bar{position:relative;height:20px;border:1.5px solid currentColor;--v:0}
.rk-bar i{position:absolute;inset:0;background:var(--lime);transform-origin:left;transform:scaleX(var(--v));transition:transform .55s cubic-bezier(.3,.7,.2,1),background .3s}
.rk-bar:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1.5px),currentColor calc(20% - 1.5px) 20%);opacity:.5}
.m-health .rk-bar i{background:var(--bone)}
.m-health .rk-bar.low i{background:var(--magenta)}
.rk-sim-out{min-height:8.6em;padding-top:6px}
.rk-sim-out .mono{opacity:.75}
.rk-big{margin:6px 0 8px;font:500 clamp(26px,3.2vw,46px)/1 var(--mono);letter-spacing:-.04em;text-transform:uppercase;color:var(--lime)}
.rk-sim[data-last=body] .rk-big,.rk-sim[data-last=miss] .rk-big,.rk-sim[data-state=dead] .rk-big{color:#ff8fce}
.rk-sim-out p:last-child{max-width:40ch;line-height:1.5}
.rk-sim-ctl{display:flex;flex-wrap:wrap;gap:8px}
.rk-sim-ctl .rk-fire{background:var(--lime);border-color:var(--lime);color:var(--ink);min-width:120px;justify-content:center;min-height:48px}
.rk-sim-ctl .rk-fire[disabled]{opacity:.4;cursor:default;transform:none;box-shadow:none}
.rk-sim-b{min-height:48px;padding:0 13px;background:transparent;border:1.5px solid #fff;color:#fff;cursor:pointer}
.rk-sim-b:hover{background:#fff;color:var(--violet)}
.rk-sim-fine{font-size:9.5px;line-height:1.6;opacity:.8;max-width:56ch}
.rk-sim-nojs{margin-top:14px;font-weight:600}
.rk-animnote{margin-top:6px;padding-top:18px;border-top:1.5px dashed #ffffff66;max-width:70ch}
.rk-animnote .mono:first-child{color:var(--lime);margin-bottom:10px}
.rk-animnote p{font-size:15px;line-height:1.55}
.rk-src{margin-top:12px;font-size:9.5px;opacity:.85}
.rk-src a{color:var(--lime)}
/* 05 knockout */
.rk-ko-view{position:relative;aspect-ratio:700/750;overflow:hidden;background:var(--ink)}
.rk-ko-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .9s,transform .9s}
.rk-ko-ring{position:absolute;left:52.9%;top:46.9%;width:34%;aspect-ratio:1;translate:-50% -50%;border:2.5px solid var(--lime);border-radius:50%}
.rk-ko-ring.go{animation:rk-ko-hit .55s cubic-bezier(.2,.7,.2,1)}
@keyframes rk-ko-hit{0%{scale:1.5;border-width:8px}100%{scale:1}}
.rk-ko-state{position:absolute;left:14px;bottom:14px;background:var(--lime);color:var(--ink);padding:8px 10px;font-weight:600;font-size:12px;opacity:0;transition:opacity .4s}
.rk-ko.done .rk-ko-view img{filter:grayscale(.6) brightness(.55);transform:rotate(1.5deg) scale(1.04)}
.rk-ko.done .rk-ko-state{opacity:1}
.rk-ko.done .rk-ko-ring{opacity:.35}
.rk-ko-read{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px 12px;align-items:center;margin-top:14px}
.rk-ko-shots{grid-column:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);font-size:9.5px}
.rk-ko-shots li{opacity:.35;transition:opacity .3s,color .3s}
.rk-ko-shots li.on{opacity:1;color:var(--lime)}
/* 06 feed */
.rk-feed ul{display:grid;gap:26px}
.rk-feed li{display:grid;grid-template-columns:clamp(110px,30vw,190px) minmax(0,1fr);gap:clamp(16px,3vw,34px);align-items:center}
.rk-feed img{width:100%;height:auto;aspect-ratio:1;padding:17%;border-radius:50%;background:var(--ink);outline:1.5px dashed var(--ink);outline-offset:8px}
.rk-feed .f-kibble img{background:var(--violet)}
.rk-feed li .mono{display:inline-block;padding:4px 7px;background:var(--ink);color:var(--lime)}
.rk-feed li.f-sulfur .mono{background:transparent;color:var(--ink);outline:1.5px solid var(--ink)}
@keyframes rk-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rk-fade{from{opacity:0}}

/* ================= 06 WATCH (reuses the Giga video frame) ================= */
.rk-watch{position:relative;background:var(--violet);color:#fff;padding:clamp(60px,9vw,130px) var(--gut);overflow-x:clip}
.rk-watch .rk-g-title{color:var(--lime);--gw:700px}
.rk-watch-grid{display:grid;gap:44px}
.rk-video{position:relative;max-width:300px;margin:10px auto 30px;transform:rotate(2.2deg);order:0}
.rk-video .mono{color:var(--lime)}
.rk .facade{background-image:url(rock-poster.webp)}
.rk-vslot{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:24px;background:var(--ink);color:var(--lime)}
.rk-vslot:after{content:"";position:absolute;inset:12px;border:1px dashed #c6ff1a55;pointer-events:none}
.rk-v-tag{position:absolute;left:22px;top:22px;font-size:9.5px;color:var(--bone)}
.rk-v-big{display:block;width:60%;--sw:6}
.rk-v-msg{text-align:center;line-height:1.7;color:var(--bone)}
.rk-transcript h3{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding-bottom:10px;border-bottom:1.5px solid #fff}
.rk-transcript h3 span{opacity:.7;font-size:9.5px}
.rk-transcript ol{list-style:none;margin:0;padding:0}
.rk-transcript li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff33}
.rk-transcript li .mono{color:var(--lime);padding-top:4px}
.rk-transcript p{font-size:16px;line-height:1.5;font-weight:500}

/* ================= 07 MISTAKES ================= */
.rk-err{position:relative;background:var(--orange);color:var(--ink);padding:clamp(60px,9vw,130px) var(--gut)}
.rk-err>h2{margin-top:14px;font:500 clamp(30px,6vw,96px)/1.02 var(--mono);letter-spacing:-.045em;text-transform:uppercase;max-width:14ch}
.rk-errs{list-style:none;margin:clamp(30px,5vw,64px) 0 0;padding:0}
.rk-errs li{display:grid;grid-template-columns:clamp(60px,10vw,150px) minmax(0,1fr);gap:clamp(14px,3vw,44px);align-items:start;padding:clamp(18px,2.2vw,30px) 0;border-top:1.5px solid var(--ink)}
.rk-errs li:last-child{border-bottom:1.5px solid var(--ink)}
.rk-err-n{color:var(--ink);--sw:9}
.rk-errs h3{font:500 clamp(20px,2.6vw,40px)/1.05 var(--mono);letter-spacing:-.025em;text-transform:uppercase}
.rk-errs s{text-decoration-thickness:.09em;text-decoration-color:var(--ink)}
.rk-errs p{margin-top:8px;max-width:54ch;font-size:clamp(15.5px,1.2vw,18px);line-height:1.5;font-weight:500}

/* ================= 09 NEXT (index rows) ================= */
.rk-next{padding-bottom:clamp(70px,10vw,130px)}

@media (max-width:860px){
  .rk-prog ol{display:flex}
  .rk-prog li{flex:1 1 0}
  .rk-prog li.on{flex:0 0 auto}
  .rk-prog li.on a{padding-right:16px}
  .rk-prog a{justify-content:flex-start}
  .rk-plan .lb{font-size:23px;letter-spacing:.04em}
  .rk-plan .lb.sm{display:none}
  .rk-plan .lb.yl{font-size:19px}
  .rk-forms{min-height:0;display:flex;flex-direction:column}
  .rk-forms-ui{display:contents}
  .rk-forms-head{order:1;padding:56px var(--gut) 24px}
  .rk-forms-art{position:relative;inset:auto;order:2;z-index:0;aspect-ratio:16/10;animation:none;container-type:normal}
  .rk-forms-frame{inset:0;width:100%;height:100%;aspect-ratio:auto;left:0;top:0}
  .rk-forms-art:after{background:linear-gradient(#12063a00 70%,#12063a99);}
  .pl-rock{--hx:50%;--hy:34%}.pl-ice{--hx:50%;--hy:36.5%}.pl-chalk{--hx:49.6%;--hy:35.5%}.pl-xrock{--hx:50.8%;--hy:35.5%}
  .rk-ring{width:15%}
  .rk-plate-cap{left:var(--gut);right:auto;bottom:10px}
  .rk-plate-cap b{display:none}
  .rk-tabs{order:3;display:flex;margin:0;padding:0 var(--gut);border-top:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .rk-tabs::-webkit-scrollbar{display:none}
  .rk-tab{flex:0 0 auto;min-width:36vw;padding-right:20px;scroll-snap-align:start}
  .rk-tab-g .glyphs{height:28px}
  .rk-panels{order:4;margin:16px var(--gut) 0}
  .rk-forms-note{order:5;margin:16px var(--gut) 40px}
  .rk-forms .grain{display:none}
  .rk-video{order:0}
}

/* ================= ≥ 861px ================= */
@media (min-width:861px){
  .rk-hero-pin{display:block;height:100svh;min-height:640px;padding:0;background:var(--rk-night)}
  .rk-frame{--fw:max(100vw,calc(max(100svh,640px) * 2.4));position:absolute;margin:0;width:var(--fw);aspect-ratio:12/5;left:calc((100vw - var(--fw)) * .72);top:calc(50% - var(--fw) * .20833)}
  .rk-hero .n1 .spot{left:64.2%;top:33.3%}.rk-hero .n2 .spot{left:62.95%;top:59.4%}
  .rk-h-golem{display:block;position:absolute;left:44.2708%;top:7.6875%;width:37.9167%;height:92.3125%}
  .rk-h-fog{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;transform-origin:50% 100%}
  .rk-h-cre,.rk-h-anno{transform-origin:64% 45%}
  .rk-h-bg{scale:calc(1.02 + var(--p)*.04);translate:calc(var(--mx,0)*-6px) calc(var(--my,0)*-3px)}
  .rk-h-cre,.rk-h-anno{scale:calc(1 + var(--p)*.13);translate:calc(var(--mx,0)*10px) calc(var(--p)*1.5% + var(--my,0)*5px)}
  .rk-h-fog{scale:calc(1.05 + var(--p)*.25);translate:calc(var(--mx,0)*22px) calc(var(--p)*10% + var(--my,0)*8px);opacity:calc(1 - var(--p)*.4)}
  .rk-h-dust{translate:calc(var(--mx,0)*30px) calc(var(--p)*6%)}
  .rk-h-type{position:absolute;margin:0;left:var(--gut);top:max(78px,10svh);width:min(52vw,calc(100svh * .86))}
  .rk-h-type .g-the{width:56%}
  .rk-h-copy{position:absolute;margin:0;padding:0;left:var(--gut);width:min(470px,36vw);bottom:7svh}
  .rk-h-lines{display:block}
  .rk-hero .note-body{display:block;top:auto;bottom:auto;right:auto;padding:10px 12px;background:var(--lime);color:var(--ink);border-color:var(--ink)}
  .rk-hero .note.open .note-body{background:var(--ink);color:var(--lime)}
  .rk-hero .n1 .note-body{left:72.7%;top:21%;width:14%}
  .rk-hero .n2 .note-body{left:70.9%;top:68%;width:13%}
  .rk-h-side{display:block;position:absolute;z-index:6;left:14px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);color:var(--bone)}
  .rk-h-scroll{display:flex;position:absolute;z-index:6;right:var(--gut);bottom:26px;align-items:center;gap:12px;color:var(--bone)}
  .rk-h-scroll .hatch{width:120px}
  .rk-hero .plus{display:block;z-index:6;color:var(--bone)}
  .rk-hero .p1{left:var(--gut);top:54%}.rk-hero .p2{left:44%;top:12vh}.rk-hero .p3{right:6%;bottom:12vh}
  .rk-vitrine{grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:clamp(30px,4vw,64px);align-items:center}
  .rk-spread{transform:rotate(-1deg)}
  .rk-forms{min-height:max(50vw,660px)}
  .rk-forms-head h2{font-size:clamp(26px,3.6vw,54px)}
  .rk-forms-ui{display:grid;grid-template-columns:minmax(0,560px) 1fr;grid-template-rows:auto 1fr auto auto;column-gap:40px}
  .rk-forms-head{grid-column:1/-1}
  .rk-panels{grid-column:1;grid-row:3;align-self:end}
  .rk-tabs{grid-column:1/-1;grid-row:4;margin-top:22px}
  .rk-forms-note{grid-column:1/-1;grid-row:5;margin-top:14px}
  .rk-prog span{display:inline}
  .rk-prog a{min-height:48px}
  .rk-ph{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(30px,5vw,90px);align-items:start;min-height:84vh}
  .rk-ph .rk-ph-txt,.rk-ph .rk-ph-fig{position:sticky;top:max(120px,calc(50vh - 300px))}
  #p2{min-height:150vh}
  #p4{grid-template-columns:minmax(0,1fr);min-height:0}
  #p4 .rk-ph-txt{position:static;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,3vw,44px);align-items:start}
  #p4 .rk-ph-txt .m-n{grid-row:1/span 3;margin:0}
  #p4 .rk-ph-txt>*{grid-column:2}
  #p4 .rk-ph-txt .m-n{grid-column:1}
  #p6{min-height:0}
  .rk-sim{grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:clamp(22px,3vw,48px);align-items:start}
  .rk-ko{max-width:calc(62vh * .933)}
  .rk-watch-grid{grid-template-columns:minmax(0,1fr) clamp(260px,24vw,330px);column-gap:clamp(40px,7vw,120px);align-items:start}
  .rk-watch-head,.rk-transcript{grid-column:1}
  .rk-video{grid-column:2;grid-row:1/span 2;position:sticky;top:96px;margin:30px 0 0}
}

@media (min-width:861px){
  .rk-molten-art{aspect-ratio:2400/1005;--hx:44.5%;--hy:39.4%}
  .rk-molten-art:after{background:linear-gradient(90deg,#16070c00 50%,#16070cb3 80%),linear-gradient(#16070c00 75%,#16070c99)}
  .rk-molten-art .rk-ring{width:clamp(60px,7%,140px)}
  .rk-molten-copy{position:absolute;right:var(--gut);top:50%;translate:0 -50%;margin:0;padding:0;width:min(460px,33vw)}
}

/* scroll-linked choreography: desktop, motion allowed, supporting browsers only */
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
  .rk-hero{height:180svh;view-timeline:--rkhero block;animation:hero-p linear both;animation-timeline:--rkhero;animation-range:contain 0% contain 100%}
  .rk-hero-pin{position:sticky;top:0}
  .rk-h-type{translate:0 calc(var(--p)*-10svh);--sw:calc(6 + var(--p)*8)}
  .rk-hero .note-body{animation:note-in linear both;animation-timeline:--rkhero}
  .rk-hero .n1 .note-body{animation-range:contain 6% contain 14%}
  .rk-hero .n2 .note-body{animation-range:contain 16% contain 24%}
  .rk-hero .note.open .note-body{animation:none}
  .rk-h-lines path{animation:line-in linear both;animation-timeline:--rkhero}
  .rk-h-lines .l1{animation-range:contain 3% contain 12%}
  .rk-h-lines .l2{animation-range:contain 13% contain 22%}
  .rk-spread{animation:rk-spread linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  .rk-molten-art img{animation:rk-push linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  .rk-molten-copy{animation:rk-copy-in linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
}}
@keyframes rk-spread{from{transform:rotate(-4deg) translateY(50px)}to{transform:rotate(-1deg)}}
@keyframes rk-drift{from{transform:translateY(-3%)}to{transform:translateY(3%)}}
@keyframes rk-copy-in{from{opacity:0;transform:translateX(40px)}}
@keyframes rk-push{from{transform:scale(1.12)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.rk-forms .rk-plate{transition:none}.rk-sim-ret.snap,.rk-bar i{transition:none}}

@media (min-width:701px){.rk-sim-stage{aspect-ratio:3/2}}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .rk-h-golem{animation:rk-h-rise 1.6s .15s cubic-bezier(.2,.7,.15,1) both}
  .rk-h-fog{animation:rk-h-settle 2.4s cubic-bezier(.2,.7,.15,1) both}
}
html:not(.js) .rk-ko .rk-bar{--v:1}html:not(.js) .rk-ko-shots li{opacity:1}