/* T454 «Rytteren» / «The rider». Tokens fra tokens.css; ingen ny merkevarefarge. Kilder: media/inspo/2026-10-04-sprites.md (#1 én krankfase, #8 silhuett først). */
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 var(--font-text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px}
.mono,label,button,output,figcaption,.eyebrow,.nav a{font:500 12px/1.6 var(--font-data);letter-spacing:.02em}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.nav a{text-decoration:none;padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{text-decoration:underline}
.hero{background:var(--film);color:var(--cream);padding-bottom:56px}
.hero a:focus-visible,.hero button:focus-visible,.hero input:focus-visible{outline-color:var(--lean-400)}
.eyebrow{color:var(--muted-dark);margin:32px 0 8px}
h1{font-weight:800;font-size:clamp(40px,7.4vw,92px);line-height:.98;letter-spacing:-.022em;margin:0 0 20px;max-width:14ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--lean-400)}
.lede{max-width:56ch;color:var(--cream);margin:0 0 36px;font-size:clamp(18px,2.2vw,22px)}
.stage{display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:12px}
.stage>*{min-width:0}
.pane{position:relative;background:var(--film-2);overflow:hidden;border:1px solid rgba(232,223,204,.08);height:min(46vw,440px);min-height:340px}
.pane figcaption{position:absolute;left:14px;top:12px;color:var(--muted-dark);z-index:1}
.pane .svg{position:absolute;inset:34px 8px 8px}
.pane .svg svg{display:block;width:100%;height:100%}
.pane.side{background:var(--paper);color:var(--ink)}.pane.side figcaption{color:var(--muted-paper)}
.panel{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);gap:24px 40px;align-items:end;margin-top:12px;padding:24px;background:var(--film-2);border:1px solid rgba(232,223,204,.08)}
.panel label{display:grid;gap:10px;color:var(--muted-dark)}
.big{font:800 clamp(44px,6vw,72px)/1 var(--font-display);color:var(--cream);letter-spacing:-.02em;text-transform:none;font-variant-numeric:tabular-nums}
.big small{font-size:.4em;color:var(--lean-400);margin-left:4px}
.btns{display:flex;gap:8px;flex-wrap:wrap}
button{min-height:44px;padding:8px 20px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;transition:background .15s var(--ease-out),color .15s var(--ease-out),transform .08s var(--ease-out)}
button:hover:not(:disabled){background:var(--cream);color:var(--film)}
button:active:not(:disabled){transform:scale(.97)}
button[aria-pressed=true]{background:var(--lean-500);border-color:var(--lean-500);color:var(--film)}
button:disabled{opacity:.5;cursor:default}
.read{display:grid;gap:4px;color:var(--muted-dark)}.read b{color:var(--cream);font-weight:500}
.note{grid-column:1/-1;color:var(--muted-dark);margin:0;max-width:none;text-transform:none;letter-spacing:0;font-size:13px}
/* slider */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:grab;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--muted-dark);border-radius:2px}
input[type=range]::-moz-range-track{height:4px;background:var(--muted-dark);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:var(--cream);border:3px solid var(--lean-500);box-shadow:0 2px 8px rgba(0,0,0,.4);transition:transform .15s var(--ease-out)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:3px solid var(--lean-500)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible{outline:3px solid var(--lean-400);outline-offset:2px}
.ticks{display:flex;justify-content:space-between;margin-top:-6px;color:var(--muted-dark);font:500 11px var(--font-data)}
/* forklaring */
section{padding:72px 0 0}
h2{font-weight:800;font-size:clamp(30px,4.6vw,52px);line-height:1.05;letter-spacing:-.025em;margin:0 0 28px;max-width:20ch;text-wrap:balance}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:w}
.why article{background:var(--paper-2);padding:28px 24px 32px;counter-increment:w}
.why article::before{content:"0" counter(w);display:block;font:500 12px var(--font-data);color:var(--lean-700);margin-bottom:20px;letter-spacing:.08em}
.why h3{font-weight:700;font-size:24px;line-height:1.15;margin:0 0 10px}
.why p{margin:0;color:var(--ink);font-size:17px}
.formula{margin:28px 0 0;padding:20px 24px;border-left:3px solid var(--lean-600);background:var(--paper-2);font:500 15px/1.6 var(--font-data);max-width:none}
.formula span{color:var(--muted-paper)}
.strip{display:grid;gap:8px}
.phases{grid-template-columns:repeat(6,1fr)}.angles{grid-template-columns:repeat(4,1fr)}
.strip figure{margin:0;background:var(--paper-2);padding:6px 6px 10px;min-width:0}
.strip.dark figure{background:var(--film);color:var(--cream)}
.strip svg{display:block;width:100%;height:auto}
.strip figcaption{text-align:center;color:var(--muted-paper);margin-top:4px}.strip.dark figcaption{color:var(--muted-dark)}
.sizes{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:24px;background:var(--film);color:var(--muted-dark)}
.sizes .px{display:block}.sizes svg{display:block;width:100%;height:100%}
.cta{padding:72px 0 96px}.cta p{max-width:52ch}
.cta a.btn{display:inline-flex;align-items:center;min-height:48px;padding:10px 24px;background:var(--ink);color:var(--paper);text-decoration:none;font:500 12px var(--font-data);letter-spacing:.06em;text-transform:uppercase;transition:background .15s var(--ease-out)}
.cta a.btn:hover{background:var(--lean-700)}
footer{border-top:1px solid var(--paper-2);padding:24px 0 40px;color:var(--muted-paper)}
:focus-visible{outline:3px solid var(--lean-700);outline-offset:3px}
.reveal{transform:translateY(16px);transition:transform .4s var(--ease-out)}
.reveal.in{transform:none}
@media(max-width:860px){.stage{grid-template-columns:1fr}.pane{height:auto;aspect-ratio:1/.95;min-height:0}.panel{grid-template-columns:1fr}.why{grid-template-columns:1fr}.phases{grid-template-columns:repeat(3,1fr)}.angles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.wrap{padding:0 16px}body{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.reveal{transform:none}}
.no-js .reveal{transform:none}
.big output{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.big small{font-family:var(--font-text)}
/* T472: reveal starts visible (only a short rise), so crawlers, print and fast scroll see no holes. */
.hero,.cta{position:relative}
.cta{padding-bottom:112px}
@media print{