/* T452 v2: scroll-driven. Tokens from DESIGN.md (film ground for story, paper for the road). Motion: ease-out .22,1,.36,1 and
   350 ms from media/inspo/2026-10-03-krengo-pro.md #5; scroll-linked values map directly to scroll position, no spring.
   Device colours (G1-G6, pedal) are the Garmin-side colours from KrengoView, not branding. */
:root{--film:#171510;--film2:#211E19;--paper:#ECE4D3;--paper2:#E2D9C6;--cream:#E8DFCC;--ink:#1F1C18;--muted:#9A9386;--mutedp:#5A5347;--lean:#D9542B;--leant:#EC7044;--ease:cubic-bezier(.22,1,.36,1);--head:64px;--sc:1}
*{box-sizing:border-box}
html{scroll-padding-top:var(--head)}
.kf-note{font:12px/1.5 var(--font-data);color:var(--muted-dark);margin:20px 0 0;max-width:68ch}
body{margin:0;background:var(--film);color:var(--cream);font:18px/1.55 var(--font-text)}
a{color:inherit}
:focus-visible{outline:3px solid var(--leant);outline-offset:3px}
.skip{position:absolute;left:16px;top:-100px;background:var(--paper);color:var(--ink);padding:12px;z-index:50}.skip:focus{top:12px}
/* T472: shared .topp + .topnav (same markup and tokens as the other pages; pages.css is not loaded here) */
.topp{position:sticky;top:0;z-index:20;min-height:var(--head);padding:0 max(16px,4vw);display:flex;align-items:center;gap:16px;background:rgba(23,21,16,.94);border-bottom:1px solid #3a352c;--papir:var(--cream);--dempet:var(--muted-dark);--oransje:var(--lean);--fg-rgb:232,223,204;color:var(--cream)}
.merke{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 1.25rem/1 var(--font-wordmark);letter-spacing:-.025em}.merke img{width:32px;height:32px}
.ctl{display:flex;gap:10px;align-items:center;margin-left:auto}
.topnav+.ctl{margin-left:0}
.seg{display:flex;align-items:center;border:1px solid rgba(232,223,204,.25);border-radius:3px;overflow:hidden}
.seg-l{font:500 12px/1 var(--font-data);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 10px}
.seg button{min-height:44px;min-width:44px;padding:0 10px;border:0;border-radius:0;background:transparent;color:var(--muted);font:500 12px/1 var(--font-data);letter-spacing:.08em;text-transform:uppercase}
.seg button+button{border-left:1px solid rgba(232,223,204,.25)}
.seg button:hover{color:var(--cream)}
.seg button[aria-pressed=true]{background:var(--cream);color:var(--film)}
.seg button:focus-visible{outline-offset:-3px}
button{font:13px var(--font-data);min-height:44px;padding:8px 12px;border:1px solid #5a5347;background:var(--film2);color:var(--cream);border-radius:4px}
button{cursor:pointer;transition:transform .15s var(--ease)}button:active{transform:scale(.97)}
main{overflow-x:clip}
.hero,.legend,.captures,.notes,.ch-head{max-width:1120px;margin-inline:auto;padding-inline:max(20px,4vw)}
.hero{min-height:calc(100svh - var(--head));display:flex;flex-direction:column;justify-content:center;padding-block:48px}
.kicker{font:12px var(--font-data);letter-spacing:.02em;color:var(--leant);margin:0 0 14px}
h1{font:800 clamp(2.8rem,8vw,6rem)/1.02 var(--font-display);margin:0 0 24px;letter-spacing:-.022em;max-width:14ch}
.lede{max-width:56ch;color:var(--muted);font-size:1.15rem}
.cue{margin-top:40px;font:12px var(--font-data);letter-spacing:.02em;color:var(--muted);display:flex;gap:14px;align-items:center}
.cue i{display:block;width:1px;height:48px;background:var(--leant);transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
h2{font:800 clamp(1.7rem,4vw,2.4rem)/1.1 var(--font-display);letter-spacing:-.02em;margin:0 0 12px}
p{max-width:68ch}
.legend{padding-block:24px 8px;--papir:var(--cream);--grunn:var(--film2);--dempet:#5a5347;--oransje:var(--lean);--fg-rgb:232,223,204;--gring:#E8DFCC}
/* the key explains the device screen, so it overrides the calm web ramp with the Garmin-side colours */
.sim-key{--g1:#008200;--g1-fg:#fff;--g2:#84ff00;--g2-fg:#000;--g3:#ffff00;--g3-fg:#000;--g4:#ff8200;--g4-fg:#000;--g5:#ff0000;--g5-fg:#000;--g6:#840084;--g6-fg:#fff}
.sim-key li{grid-template-columns:11em 1fr}.sim-key .gb{font-size:.85rem}
.sim-key .pedal{background:#1e8e3e;color:#fff}.sim-key .pedal.stop{background:#d21f1f}
@media(max-width:560px){.sim-key li{grid-template-columns:1fr}}
.ch-head{padding-block:96px 24px}.ch-head h2{font-size:clamp(2rem,5vw,3.4rem)}.ch-head p{color:var(--muted)}
.track{position:relative;height:520vh}.track.cmp{height:380vh}
.pin{position:sticky;top:var(--head);height:calc(100svh - var(--head));display:flex;flex-direction:column;gap:10px;padding:12px max(16px,4vw) 10px;max-width:1280px;margin:auto}
.stagegrid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:center}
figure{margin:0;min-width:0}
.ride{display:flex;flex-direction:column;gap:10px;min-height:0}
canvas.road{display:block;width:min(100%,calc((100svh - var(--head) - 340px)*640/420));aspect-ratio:640/420;background:var(--paper2);border-radius:6px;object-fit:contain}
.story{min-height:104px}.story .kicker{margin-bottom:4px}
.ch-title{font:700 clamp(1.4rem,3vw,2rem)/1.12 var(--font-display);letter-spacing:-.015em;margin:0 0 6px}
.ch-body{margin:0;color:var(--muted);font-size:1rem;max-width:56ch}
.swap{animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:.4;transform:translateY(.14em)}to{opacity:1;transform:none}}
.ticks{display:flex;gap:4px;margin:0;padding:0;list-style:none}.ticks li{flex:1;min-width:0}
.ticks button{width:100%;min-height:44px;padding:4px 2px;font-size:12px;border-color:#3a352c;background:transparent;color:var(--muted);overflow:hidden;text-overflow:clip;white-space:nowrap}
.ticks button[aria-current=true]{border-color:var(--leant);color:var(--cream);box-shadow:inset 0 -3px var(--lean)}
.computer{display:flex;flex-direction:column;align-items:center;gap:8px}
.hardware{width:calc(340px*var(--sc));height:calc(450px*var(--sc));position:relative}
.hw{position:absolute;left:0;top:0;width:340px;height:450px;transform:scale(var(--sc));transform-origin:0 0}
.hw svg{position:absolute;inset:0;width:340px;height:450px}
.frame{position:absolute;left:23px;top:0;width:294px;padding:20px 14px;background:#0b0a08;border:10px solid #2a2620;border-radius:34px;box-shadow:0 0 0 1px #4a4337}
.frame.round{left:16px;top:16px;width:308px;padding:14px;border-radius:50%}
canvas.screen{display:block;width:246px;height:322px;background:#fff}
.frame.round canvas.screen{width:260px;height:260px;border-radius:50%}
.watch .frame{border-width:12px;border-color:#2a2620}
.fieldsel{display:flex;gap:8px;align-items:center;font:12px var(--font-data);color:var(--muted)}
.computer figcaption{font:12px/1.4 var(--font-data);color:var(--muted);text-align:center;max-width:42ch}
.readout{margin:0;font:12px var(--font-data);color:var(--muted);text-align:center;max-width:46ch}
.badge{display:inline-block;margin:0 8px 0 0;padding:2px 8px;border:1px solid var(--muted);border-radius:3px;font:12px var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.badge.real{border-color:var(--leant);color:var(--leant)}
.progress{height:2px;background:#3a352c;position:relative;flex:none}.progress i{position:absolute;inset:0;background:var(--lean);transform-origin:left;transform:scaleX(0)}
.progress output{position:absolute;right:0;top:-17px;font:12px var(--font-data);color:var(--muted)}
.stepper{display:none;gap:8px;justify-content:center}
/* comparison */
.cmp-grid{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:14px}
.cmp-row{display:flex;gap:clamp(8px,1.6vw,20px);justify-content:center;align-items:flex-end;flex-wrap:wrap}
.cmp-row h3{flex-basis:100%;margin:0;font:12px var(--font-data);letter-spacing:.02em;color:var(--muted);font-weight:400}
.mini{display:flex;flex-direction:column;align-items:center;gap:6px;font:12px var(--font-data);color:var(--muted)}
.mini .frame{position:static;padding:5px;border-width:4px;border-radius:12px;width:auto}.mini .frame.round{border-radius:50%;padding:3px}
.mini canvas.screen{width:var(--mw);height:calc(var(--mw)*322/246)}.mini .frame.round canvas.screen{width:var(--mw);height:var(--mw)}
.cmp-row.edge{--mw:clamp(70px,min(11vw,19svh),150px)}.cmp-row.fenix{--mw:clamp(58px,min(8vw,14svh),104px)}
.cmp-note{text-align:center;color:var(--muted);font-size:.95rem;margin:0 auto}
/* captures */
.captures{padding-block:96px 24px}
.filmstrip{display:flex;gap:12px;overflow-x:auto;margin:20px 0;padding-bottom:12px}
.filmstrip button{flex:0 0 140px;background:var(--film2);color:var(--cream);border:1px solid #3a352c;font-size:12px}
.filmstrip img{display:block;width:100%;height:166px;object-fit:contain;margin-bottom:8px}
details summary{min-height:44px;cursor:pointer;display:flex;align-items:center}
.capture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin:20px 0}
.capture-grid img{width:100%;height:180px;object-fit:contain;background:var(--film2)}.capture-grid figcaption{font:12px var(--font-data);color:var(--muted)}
.notes{color:var(--muted);font-size:.95rem;padding-bottom:80px}
/* sizes: the whole cockpit scales down on short or narrow screens */
@media(max-height:820px){:root{--sc:.86}}
@media(max-height:700px){:root{--sc:.7}}
@media(max-width:860px){
 :root{--head:56px}
 .topp{gap:8px;padding-inline:12px}.topnav{display:none}.seg-l{display:none}
 .stagegrid{grid-template-columns:1fr;gap:6px;align-content:start}
 canvas.road{width:min(100%,calc(26svh*640/420));margin-inline:auto}
 .readout{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .story{min-height:92px}.ch-body{font-size:.95rem}
 .ticks button{font-size:12px;padding:2px 0;letter-spacing:-.02em}
 :root{--sc:.64}
 .computer{gap:4px}.computer figcaption{display:none}
 .track{height:460vh}.track.cmp{height:340vh}
 .ride{gap:6px}
}
@media(max-width:860px) and (min-height:780px){:root{--sc:.7}}
@media(max-width:860px) and (max-height:700px){:root{--sc:.5}}
/* export mode (tools/sim-capture/export.cjs): one stage fills the window */
body[data-export] .topp,body[data-export] .krengo-foot,body[data-export] .hero,body[data-export] .legend,body[data-export] .ch-head,body[data-export] .captures,body[data-export] .notes,body[data-export] .skip{display:none}
body[data-export] .track{height:100vh!important}body[data-export] .pin{position:static;height:100vh}
body[data-export] section.chapter:not(.on){display:none}
body[data-export] .ticks,body[data-export] .stepper,body[data-export] .fieldsel{visibility:hidden}
@media(prefers-reduced-motion:reduce){
 .cue i,.swap{animation:none}button:active{transform:none}
 .track,.track.cmp{height:auto!important}.pin{position:static;height:auto;padding-block:16px}.stagegrid{align-items:start}
 canvas.road{width:100%}
 .stepper{display:flex}.progress{display:none}
 .hero{min-height:auto}
}
@media(forced-colors:active){.badge,.ticks button{border:1px solid CanvasText}}