/* Krengo v2 – historien i svingene. Gammel film: varm avbleket tone, korn, vignett, flimring, riper. */
:root{
  --grunn:#1A1917;
  --grunn2:#24221F;
  --papir:#E8DFCC;
  --dempet:#8C857A;
  --svak:#8C857A;
  --oransje:#D9542B;
  --strek:1px;
  --serif:'Fraunces','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --marg:clamp(20px,5vw,72px);
  --vh:100vh;
}
@supports (height:100svh){:root{--vh:100svh}}

*{box-sizing:border-box}
html{background:var(--grunn);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grunn);color:var(--papir);font:18px/1.6 var(--serif);font-weight:300;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}
::selection{background:var(--oransje);color:#1A1917}

/* Lenis */
html.lenis,html.lenis body{height:auto}

/* ============ FILM-LAGENE ============ */
.film{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.film>*{position:absolute;inset:0}
.film-korn{width:100%;height:100%;opacity:.075;mix-blend-mode:overlay;image-rendering:pixelated}
.film-toning{background:rgba(222,172,108,.11);mix-blend-mode:color}
.film-vignett{background:radial-gradient(ellipse 78% 72% at 50% 50%,transparent 52%,rgba(8,6,4,.42) 82%,rgba(8,6,4,.78) 100%)}
.film-flimmer{background:#000;opacity:0;animation:flimmer 2.3s steps(1) infinite}
@keyframes flimmer{
  0%{opacity:.02}7%{opacity:.07}9%{opacity:.01}18%{opacity:.04}26%{opacity:0}31%{opacity:.08}33%{opacity:.02}
  47%{opacity:.05}52%{opacity:.01}61%{opacity:.06}63%{opacity:.03}74%{opacity:0}81%{opacity:.07}84%{opacity:.02}93%{opacity:.05}
}
.film-lekkasje{opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse 55% 90% at 0% 40%,rgba(255,150,70,.55),rgba(217,84,43,.22) 45%,transparent 70%),radial-gradient(ellipse 40% 60% at 100% 80%,rgba(255,196,120,.28),transparent 70%)}
.film.kutt .film-lekkasje{animation:lekk 1.1s cubic-bezier(.3,.6,.3,1) 1}
.film.kutt.hoyre .film-lekkasje{transform:scaleX(-1)}
@keyframes lekk{0%{opacity:0}18%{opacity:.85}40%{opacity:.5}100%{opacity:0}}
.film.kutt .film-flimmer{animation:kutt .42s steps(1) 1}
@keyframes kutt{0%{opacity:.55}14%{opacity:.08}28%{opacity:.4}42%{opacity:.03}62%{opacity:.18}100%{opacity:0}}
.film-riper .ripe{position:absolute;top:-5%;height:110%;width:1px;background:rgba(240,228,200,.32);animation:ripe var(--d,.22s) steps(2) 1 forwards}
.film-riper .ripe.tynn{background:rgba(240,228,200,.18)}
.film-riper .stov{position:absolute;border-radius:50%;background:rgba(8,6,4,.55);animation:ripe var(--d,.18s) steps(1) 1 forwards}
@keyframes ripe{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
/* perforering langs høyre kant (glir med scroll) og svak kasch */
.film-perfo--v{left:auto;width:16px;right:0;
  background:
    linear-gradient(90deg,rgba(8,6,4,.78),rgba(8,6,4,.78)),
    repeating-linear-gradient(180deg,transparent 0 22px,rgba(232,223,204,.0) 22px 44px);
  border-left:1px solid rgba(232,223,204,.08);opacity:.85}
.film-perfo--v::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:8px;
  background:repeating-linear-gradient(180deg,transparent 0 12px,rgba(232,223,204,.42) 12px 26px,transparent 26px 38px);
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 38px);mask:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 38px);
  background-position:0 calc(var(--rull,0) * -1px);border-radius:2px}
.film-perfo--h{border-top:clamp(10px,2.4vh,26px) solid rgba(6,5,4,.92);border-bottom:clamp(10px,2.4vh,26px) solid rgba(6,5,4,.92)}

.stage,.tittel,.slutt{animation:weave 3.1s steps(1) infinite}
@keyframes weave{0%{transform:translate3d(0,0,0)}12%{transform:translate3d(.6px,-.5px,0)}27%{transform:translate3d(-.4px,.4px,0)}41%{transform:translate3d(.3px,.7px,0)}58%{transform:translate3d(-.6px,-.3px,0)}73%{transform:translate3d(.5px,.2px,0)}88%{transform:translate3d(-.2px,-.6px,0)}}

/* ============ TOPPLINJE ============ */
.topp{position:fixed;top:clamp(14px,3.2vh,34px);left:var(--marg);right:calc(var(--marg) + 10px);z-index:80;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.merke{pointer-events:auto;display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;color:var(--papir);opacity:.85}
.merke img{filter:sepia(.3) brightness(.92)}
.hoyre-topp{display:flex;align-items:center;gap:1.6em}
.sprak{pointer-events:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--dempet);text-decoration:none;border:1px solid rgba(232,223,204,.25);padding:.35em .7em .35em .9em;transition:color .3s,border-color .3s}
.sprak:hover,.sprak:focus-visible{color:var(--papir);border-color:var(--papir)}
.teller{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--dempet)}
.teller b{font-weight:400;color:var(--papir);font-variant-numeric:tabular-nums}
.teller i{margin:0 .7em;font-style:normal;opacity:.5}

.akter{position:fixed;left:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .6s}
.akter.vis{opacity:1}
.akter a{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--svak);transition:color .3s}
.akter i{width:14px;height:1px;background:currentColor;transition:width .3s}
.akter span{opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s;white-space:nowrap}
.akter a.na{color:var(--papir)}
.akter a.na i{width:30px;background:var(--oransje)}
.akter a.na span,.akter:hover span{opacity:1;transform:none}
@media (max-width:900px){.akter{display:none}}

/* ============ FELLES ============ */
[data-rev]{opacity:0;transform:translateY(26px);filter:blur(5px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s}
[data-rev].in{opacity:1;transform:none;filter:none}
.setning{text-wrap:balance;font-size:clamp(1.9rem,5.6vw,5rem);line-height:1.12;letter-spacing:-.015em;font-weight:300;max-width:20ch;font-variation-settings:'opsz' 144}
.setning em{font-style:italic;color:var(--oransje);font-weight:300}
.setning.sterk{font-weight:500;max-width:22ch}
.brodtekst{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.65;max-width:46ch;color:var(--papir)}
.brodtekst.midt{margin:0 auto;text-align:center;text-wrap:balance}
.liten-tittel{font-family:var(--mono);font-weight:400;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dempet);text-align:center;margin-bottom:2.2rem}
.illu{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--svak)}

/* ============ TITTELKORT ============ */
.tittel{min-height:var(--vh);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12vh var(--marg) 8vh;position:relative}
.tittel-over,.tittel-under{opacity:0;transform:translate3d(0,10px,0);transition:opacity 2.2s 2s,transform 2.6s 2s cubic-bezier(.2,.7,.2,1)}
.tittel-over{font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dempet);margin-bottom:3vh}
.tittel h1{font-weight:300;font-size:clamp(3.4rem,17vw,15rem);line-height:1;letter-spacing:.08em;margin-right:-.08em;font-variation-settings:'opsz' 144;display:flex;justify-content:center}
.tittel{--tp:0}
.tittel h1{transform:translate3d(0,calc(var(--tp) * -9vh),0) scale(calc(1 + var(--tp) * .07));opacity:calc(1 - var(--tp) * 1.15);will-change:transform,opacity}
.bokst{display:inline-block;opacity:0;filter:blur(22px);transform:translate3d(0,.14em,0) scale(1.12);transition:opacity 1.9s cubic-bezier(.3,.6,.2,1),filter 2.1s cubic-bezier(.3,.6,.2,1),transform 2.6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * .22s + .4s)}
body:not(.intro) .bokst{animation:bflim 9s steps(1) calc(var(--i) * .9s + 6.5s) infinite}
@keyframes bflim{0%,96%,100%{opacity:1}97%{opacity:.78}98%{opacity:1}99%{opacity:.86}}
.tittel-under{font-size:clamp(1.2rem,3vw,2.3rem);font-style:italic;margin-top:2vh;color:var(--papir)}
.tittel-under em{color:var(--oransje)}
body:not(.intro) .bokst{opacity:1;filter:none;transform:none}
body:not(.intro) .tittel-over,body:not(.intro) .tittel-under{opacity:1;transform:none}
.tittel-linje{width:min(1000px,88vw);height:clamp(48px,9vh,100px);margin-top:5vh;overflow:visible}
.linje{fill:none;stroke:var(--oransje);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 4s 1.8s cubic-bezier(.4,.1,.2,1);vector-effect:non-scaling-stroke}
body:not(.intro) .linje{stroke-dashoffset:0}
.tittel-linje .pkt{fill:var(--oransje);opacity:0;transition:opacity 1s 4.8s}
body:not(.intro) .tittel-linje .pkt{opacity:1}
.tittel-linje.js .linje{transition:none;stroke-dashoffset:1}
.tittel-linje.js .pkt{opacity:0;transition:opacity .9s}
.tittel-linje.js.ferdig .pkt{opacity:1}
.tittel-linje .hode{fill:var(--oransje);opacity:0}
.tittel-linje.js.gaar .hode{opacity:1}
.tittel-linje.js.ferdig .hode{opacity:0;transition:opacity .8s}
.rull{position:absolute;bottom:clamp(40px,7vh,80px);left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dempet);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity 1.5s 6s}
body:not(.intro) .rull{opacity:1}
.rull span{width:1px;height:38px;background:var(--dempet);animation:rull 2.4s ease-in-out infinite;transform-origin:top}
@keyframes rull{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}


/* ============ HERO: rytter og sykkel i tittelkortet (T284) ============ */
.tittel{padding-top:clamp(64px,9vh,120px);padding-bottom:clamp(96px,14vh,150px)}
.tittel-rad{width:100%;max-width:1400px;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,2vh,20px)}
.tittel-tekst{display:flex;flex-direction:column;align-items:center;min-width:0}
.tittel-rad h1{font-size:clamp(3rem,15.5vw,5.6rem)}
.hero{width:min(100%,calc(40vh * 1.309));position:relative;flex:none}
.hero-lean{position:relative;aspect-ratio:1060/810;transform-origin:50.5% 96%;transform:rotate(calc(var(--tp) * -4.5deg)) translate3d(calc(var(--tp) * -1.5%),0,0);transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.hero-fill,.hero-strek{position:absolute;inset:0;width:100%;height:100%}
.hero-fill{opacity:0;animation:hero-fyll 1.5s 2.9s ease-out forwards}
.hero-strek .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:hero-tegn 1.35s calc(.55s + var(--d)) cubic-bezier(.45,.05,.25,1) forwards}
.hero-strek .krengo-puls{fill:var(--oransje);stroke:none;opacity:0;animation:hero-puls 1.9s 4.5s ease-in-out 1 both}
@keyframes hero-tegn{to{stroke-dashoffset:0}}
@keyframes hero-fyll{to{opacity:1}}
@keyframes hero-puls{0%,100%{opacity:0}45%{opacity:.6}}
@media (min-width:900px){
  .tittel-rad{flex-direction:row;align-items:center;justify-content:space-between;gap:2vw}
  .tittel-tekst{flex:1 1 44%;align-items:flex-start;text-align:left}
  .tittel-rad h1{font-size:clamp(4rem,8.4vw,9rem);justify-content:flex-start;margin-right:0}
  .hero{flex:1 1 56%;width:auto;max-width:calc(68vh * 1.309)}
  .tittel-under{max-width:20ch;text-wrap:balance}
  .tittel-over{margin-bottom:2vh}
}
@media (max-width:899px){.hero{width:min(100%,calc(46vh * 1.309))}}

/* ============ PROLOG OG MELLOMTITTEL ============ */
.prolog{padding:22vh var(--marg) 10vh;display:flex;flex-direction:column;gap:28vh;max-width:1400px;margin:0 auto}
.prolog .setning:nth-child(even){align-self:flex-end;text-align:right}
.mellom{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:10vh var(--marg);text-align:center}
.mellom .setning{margin:0 auto}

/* ============ AKT (pinnet scene) ============ */
.akt{height:340vh;position:relative}
.stage{position:sticky;top:0;height:var(--vh);display:grid;grid-template-rows:minmax(0,1fr) auto;padding:clamp(56px,9vh,96px) var(--marg) clamp(54px,9vh,82px);gap:clamp(10px,2.4vh,24px)}
.scene-ramme{position:relative;min-height:0;border:1px solid rgba(232,223,204,.16);border-radius:3px;background:var(--grunn2);overflow:hidden}
.scene-ramme::before,.scene-ramme::after{content:"";position:absolute;width:16px;height:16px;border:1px solid rgba(232,223,204,.4);z-index:3;pointer-events:none}
.scene-ramme::before{top:10px;left:10px;border-right:0;border-bottom:0}
.scene-ramme::after{bottom:10px;right:10px;border-left:0;border-top:0}
.scene-ramme>canvas,.scene-ramme>svg{position:absolute;inset:0;width:100%;height:100%}
.scene-mangler{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--svak)}
.akt-tittel{position:absolute;top:clamp(56px,9vh,96px);left:var(--marg);z-index:4;padding:clamp(14px,2.2vw,30px);pointer-events:none}
.akt-nr{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dempet);margin-bottom:.4rem}
.akt-tittel h2{font-weight:300;font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:-.01em;line-height:1;font-variation-settings:'opsz' 144}
#akt2 .akt-tittel h2{color:var(--oransje)}
.tekster{position:relative;min-height:clamp(84px,14vh,130px)}
.tekster p{position:absolute;left:0;right:0;top:0;font-size:clamp(1.15rem,2.5vw,2.1rem);line-height:1.25;font-style:italic;max-width:30ch;opacity:0;transition:opacity .45s}
.tekster p.on{opacity:1}
.tekster .o{display:inline-block;opacity:0;transform:translate3d(0,.55em,0);filter:blur(4px);transition:opacity .35s,transform .35s,filter .35s}
.tekster p.on .o{opacity:1;transform:none;filter:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .8s;transition-delay:calc(var(--w) * 55ms + .12s)}
.tekster p.etter .o{transform:translate3d(0,-.5em,0)}
.tekster p.on .trakk{animation:trakk 1.1s steps(1) .9s 3}
@keyframes trakk{0%,100%{opacity:1}50%{opacity:.35}}
.trakk{font-family:var(--mono);font-style:normal;font-weight:500;letter-spacing:.06em;color:var(--oransje);font-size:.85em}
.stage .illu{position:absolute;right:calc(var(--marg) + 6px);bottom:clamp(58px,9.6vh,88px);text-align:right;max-width:30ch;font-size:.6rem}
.fremdrift{position:absolute;left:var(--marg);right:var(--marg);bottom:clamp(22px,3.2vh,32px);height:26px}
.fremdrift::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(232,223,204,.16)}
.fremdrift>i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--oransje);transform:scaleX(0);transform-origin:left;opacity:.9}
.stopp{position:absolute;bottom:0;left:calc(var(--f) * 100%);width:56px;height:26px;margin-left:-28px;padding:0;border:0;background:none;color:var(--dempet);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stopp::before{content:"";position:absolute;left:50%;bottom:-3px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--grunn);border:1px solid var(--dempet);transition:background .3s,border-color .3s,transform .3s}
.stopp span{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;transition:color .3s}
.stopp.nadd{color:var(--oransje)}
.stopp.nadd::before{background:var(--oransje);border-color:var(--oransje)}
.stopp.na::before{transform:scale(1.5)}
.stopp.na{color:var(--papir)}
.stopp:hover span,.stopp:focus-visible span{color:var(--papir)}
.stopp:focus-visible{outline:1px solid var(--oransje);outline-offset:-2px}
.stopp.slutt-stopp{width:40px;margin-left:-38px}
.stopp.slutt-stopp span{left:auto;right:0;transform:none}

/* hint, spill av og tastehint */
.hint{position:absolute;z-index:6;left:50%;bottom:clamp(24px,4.5vh,40px);transform:translate3d(-50%,8px,0);display:flex;align-items:center;gap:.9rem;padding:.7rem 1.15rem .7rem .95rem;background:rgba(20,18,15,.72);border:1px solid rgba(232,223,204,.3);color:var(--papir);font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .5s,transform .5s;pointer-events:none}
.stage.hint-on .hint{opacity:1;transform:translate3d(-50%,0,0)}
.hint-ikon{position:relative;display:block;flex:none}
.hint-mus{width:16px;height:26px;border:1.5px solid currentColor;border-radius:9px}
.hint-mus i{position:absolute;left:50%;top:5px;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--oransje);animation:hjul 1.5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes hjul{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{transform:translateY(9px);opacity:0}100%{transform:translateY(9px);opacity:0}}
.hint-finger{width:24px;height:30px}
.hint-finger::before{content:"";position:absolute;left:50%;bottom:0;width:1.5px;height:26px;margin-left:-.75px;background:linear-gradient(to top,rgba(232,223,204,0),rgba(232,223,204,.5))}
.hint-finger i{position:absolute;left:50%;bottom:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--oransje);animation:sveip 1.7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sveip{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:.95}70%{transform:translateY(-16px) scale(.85);opacity:.8}100%{transform:translateY(-16px) scale(.85);opacity:0}}
.ht-finger{display:none}
@media (pointer:coarse){.hint-mus,.ht-mus{display:none}.ht-finger{display:inline}}
@media (pointer:fine){.hint-finger{display:none}}
.spill{position:absolute;z-index:6;bottom:calc(clamp(58px,9.6vh,88px) + 26px);right:calc(var(--marg) + 6px);display:flex;align-items:center;gap:.7rem;padding:.62rem 1rem .62rem .85rem;background:rgba(20,18,15,.6);border:1px solid rgba(232,223,204,.36);color:var(--papir);font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .3s,background .3s}
.spill:hover,.spill:focus-visible{border-color:var(--oransje);background:rgba(20,18,15,.82)}
.spill:focus-visible{outline:1px solid var(--oransje);outline-offset:3px}
.spill-ikon{display:block;width:0;height:0;border-left:9px solid var(--oransje);border-top:6px solid transparent;border-bottom:6px solid transparent}
.spill.spelles .spill-ikon{width:10px;height:12px;border-top:0;border-bottom:0;border-left:3px solid var(--oransje);border-right:3px solid var(--oransje)}
.taster{position:absolute;z-index:6;bottom:calc(clamp(58px,9.6vh,88px) + 38px);right:calc(var(--marg) + 160px);font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dempet);text-align:right;pointer-events:none}
@media (pointer:coarse){.taster{display:none}}

/* ============ KONTRASTEN ============ */
.kontrast{padding:22vh var(--marg) 18vh;max-width:1200px;margin:0 auto}
.tall-par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,6vw,100px);margin-bottom:3rem}
.tall{display:flex;flex-direction:column;gap:.6rem;padding-top:1.4rem;border-top:1px solid rgba(232,223,204,.22)}
.tall-merke{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dempet)}
.stort{font-family:var(--serif);font-weight:300;font-size:clamp(4.4rem,15vw,12rem);line-height:.95;letter-spacing:-.03em;font-variation-settings:'opsz' 144;font-variant-numeric:tabular-nums}
.stort small{font-size:.4em;vertical-align:.9em;margin-left:.04em;color:var(--dempet)}
.under{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--dempet)}
.under b{color:var(--papir);font-weight:400}
.tall.med{border-top-color:var(--oransje)}
.tall.med .stort{color:var(--oransje)}
.kontrast .illu{text-align:center}
@media (max-width:640px){.tall-par{grid-template-columns:1fr}}

/* ============ VISJON ============ */
.visjon{padding:14vh var(--marg) 18vh;max-width:1500px;margin:0 auto}
.visjon-intro{display:flex;flex-direction:column;gap:2.2rem;margin-bottom:14vh}
.stempel{align-self:flex-start;font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;border:1px solid var(--oransje);color:var(--oransje);padding:.55em 1em;transform:rotate(-2deg)}
.bilde-linje{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,48px);align-items:start}
.bilde-linje figure{margin:0}
.bilde-linje figure:nth-child(2){margin-top:12vh}
.bilde-linje figure:nth-child(3){margin-top:4vh}
.ramme{position:relative;aspect-ratio:4/5;border:1px solid rgba(232,223,204,.18);border-radius:2px;background:var(--grunn2);display:grid;place-items:center;overflow:hidden}
.ramme img{width:92%;height:auto;max-height:92%;object-fit:contain;filter:sepia(.3) contrast(1.05) brightness(.96);transform:translate3d(0,calc(var(--py,0) * 1px),0) scale(var(--sz,1.02));will-change:transform}
.ramme.mangler::after{content:"tegning kommer";font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--svak)}
.bilde-linje figcaption{margin-top:1rem;font-size:1rem;line-height:1.45;color:var(--dempet);max-width:32ch;display:flex;gap:.9rem}
.bilde-linje figcaption span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--oransje);padding-top:.35em}
@media (max-width:820px){
  .bilde-linje{grid-template-columns:1fr;gap:56px}
  .bilde-linje figure:nth-child(n){margin-top:0}
  .ramme{aspect-ratio:1/1}
}

/* ============ VEIEN HIT ============ */
.veien{padding:14vh var(--marg) 14vh;max-width:900px;margin:0 auto}
.tid{--ind:clamp(72px,14vw,130px);--lin:clamp(56px,11vw,104px);list-style:none;margin:8vh 0 10vh;padding:0 0 0 var(--ind);position:relative}
.tid::before,.tid::after{content:"";position:absolute;left:var(--lin);top:8px;bottom:8px;width:1px}
.tid::before{background:rgba(232,223,204,.14)}
.tid::after{background:var(--papir);transform:scaleY(var(--p,0));transform-origin:top}
.tid .hode{position:absolute;left:calc(var(--lin) - 3px);top:8px;width:7px;height:7px;border-radius:50%;background:var(--papir);transform:translate3d(0,var(--hy,0px),0);z-index:2;pointer-events:none;opacity:calc(min(1, var(--p,0) * 40))}
.tid li.tegnet::before{border-color:var(--papir);background:var(--grunn);transition:background .5s,border-color .5s}
.tid li.na.tegnet::before{background:var(--oransje);border-color:var(--oransje)}
.tid li.neste.tegnet::before{background:var(--grunn);border-style:dashed}
.tid li{position:relative;padding:0 0 clamp(34px,7vh,64px)}
.tid li::before{content:"";position:absolute;left:calc(var(--lin) - var(--ind) - 4px);top:.55em;width:9px;height:9px;border-radius:50%;background:var(--grunn);border:1px solid var(--dempet);z-index:1}
.tid li.na::before{background:var(--oransje);border-color:var(--oransje);box-shadow:0 0 0 0 rgba(217,84,43,.5);animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(217,84,43,.5)}70%,100%{box-shadow:0 0 0 12px rgba(217,84,43,0)}}
.tid time{position:absolute;left:calc(-1 * var(--ind));top:.3em;width:calc(var(--lin) - 14px);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--dempet);font-variant-numeric:tabular-nums}
.tid h3{font-weight:500;font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.2;margin-bottom:.35rem;font-variation-settings:'opsz' 72}
.tid p{color:var(--dempet);font-size:1.02rem;max-width:52ch}
.tid li.neste h3{font-weight:300;font-style:italic;color:var(--dempet)}
.tid li.neste p{color:var(--svak)}
.tid li.neste::before{border-style:dashed}
.status{border:1px solid rgba(232,223,204,.2);padding:clamp(22px,4vw,44px);position:relative}
.status::before{content:"";position:absolute;inset:5px;border:1px solid rgba(232,223,204,.07);pointer-events:none}
.status-stor{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.15;margin-bottom:1rem}
.status-stor strong{font-weight:500;color:var(--oransje)}
.status p:last-child{color:var(--dempet);max-width:54ch}

/* ============ SLUTT ============ */
.slutt{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16vh var(--marg) 10vh;gap:4vh}
.slutt .setning{margin:0 auto}
.slutt-linje .linje{transition:stroke-dashoffset 4s cubic-bezier(.4,.1,.2,1);stroke-dashoffset:1}
.slutt-linje.in .linje{stroke-dashoffset:0}
.slutt-ord{font-family:var(--mono);font-size:.8rem;letter-spacing:.9em;margin-right:-.9em;color:var(--dempet)}
.slutt-fot{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--svak);margin-top:8vh}
.slutt-fot img{filter:sepia(.3) brightness(.8)}

/* ============ MOBIL ============ */
@media (max-width:700px){
  body{font-size:17px}
  .film-perfo--v{display:none}
  .teller{display:none}
  .prolog{gap:20vh}
  .akt{height:320vh}
  .spill{bottom:auto;top:calc(54px + 10px);right:calc(var(--marg) + 10px);padding:.5rem .8rem .5rem .7rem}
  .hint{font-size:.62rem;letter-spacing:.14em;padding:.6rem .9rem .6rem .8rem;gap:.7rem;bottom:14px}
  .stopp span{font-size:.54rem;letter-spacing:.12em}
  .stage{padding-bottom:74px}
  .stage{padding-top:54px}
  .akt-tittel{top:54px;padding:12px}
  .akt-tittel h2{font-size:1.15rem}
  .stage .illu{position:static;text-align:left;max-width:none;order:3}
  .stage{grid-template-rows:minmax(0,1fr) auto auto}
  .tekster{min-height:112px}
  .tekster p{font-size:1.2rem}
}

/* ============ REDUSERT BEVEGELSE ============ */
@media (prefers-reduced-motion:reduce){
  .film-korn,.film-flimmer,.film-riper,.film-perfo--v,.teller{display:none}
  .film-vignett{background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 60%,rgba(8,6,4,.45) 100%)}
  [data-rev]{opacity:1;transform:none;filter:none;transition:none}
  .bokst,.tittel-over,.tittel-under,.rull,.tittel-linje .pkt{opacity:1;filter:none;transform:none;transition:none}
  .linje{stroke-dashoffset:0;transition:none}
  .rull span,.tid li.na::before{animation:none}
  .tekster p,.tekster .o{transition:none}
  .hint-mus i,.hint-finger i{animation:none;opacity:.9}
  .hint,.stopp::before,.stopp span{transition:none}
  .tekster .o{opacity:1;transform:none;filter:none}
  .stage,.tittel,.slutt{animation:none}
  .tittel h1{transform:none;opacity:1}
  .tittel-linje.js .linje{stroke-dashoffset:0}
  .film-lekkasje{display:none}
  .hero-fill{opacity:1;animation:none}
  .hero-strek .ln{stroke-dashoffset:0;animation:none}
  .hero-strek .krengo-puls{animation:none;opacity:0}
  .hero-lean{transition:none;transform:none}
  .ramme img{transform:none}
}
/* uten JS */
.nojs [data-rev]{opacity:1;transform:none;filter:none}

/* engelsk */
html[lang="en"] .ramme.mangler::after{content:"drawing coming"}

/* ============ PRØV SELV: tilt (T285) ============ */
.tilt{padding:16vh var(--marg) 16vh;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.6rem}
.tilt .liten-tittel{margin-bottom:.4rem}
.tilt .setning{margin:0 auto;max-width:none}
.tilt kbd{font-family:var(--mono);font-size:.8em;border:1px solid rgba(232,223,204,.35);border-bottom-width:2px;padding:0 .4em;border-radius:3px;color:var(--papir)}
.tilt-ramme{position:relative;width:100%;max-width:760px;margin-top:2.2rem;height:clamp(330px,52vh,470px);border:1px solid rgba(232,223,204,.16);border-radius:3px;background:var(--grunn2);overflow:hidden}
.tilt-ramme::before,.tilt-ramme::after{content:"";position:absolute;width:16px;height:16px;border:1px solid rgba(232,223,204,.4);z-index:3;pointer-events:none}
.tilt-ramme::before{top:10px;left:10px;border-right:0;border-bottom:0}
.tilt-ramme::after{bottom:10px;right:10px;border-left:0;border-top:0}
.tilt-ramme canvas{position:absolute;inset:0 0 58px 0;width:100%;height:calc(100% - 58px);touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent;outline:none;user-select:none}
.tilt-ramme canvas.drar{cursor:grabbing}
.tilt-ramme canvas:focus-visible{outline:1px solid var(--oransje);outline-offset:-6px}
.tilt-tall{position:absolute;bottom:14px;left:clamp(18px,3vw,32px);display:flex;align-items:baseline;gap:.9rem;text-align:left;pointer-events:none;z-index:4}
.tilt-merke{font-family:var(--mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--dempet)}
.tilt-stor{font-weight:300;font-size:clamp(2.2rem,5vw,3rem);line-height:1;letter-spacing:-.03em;font-variation-settings:'opsz' 144;font-variant-numeric:tabular-nums;min-width:2.9ch}
.tilt-stor small,.tilt-topp small{font-size:.45em;vertical-align:.8em;color:var(--dempet);margin-left:.04em}
.tilt-topp{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--dempet);text-transform:uppercase}
.tilt-topp b{font-weight:400;color:var(--oransje);font-variant-numeric:tabular-nums;font-size:1.25em}
.tilt-topp small{font-size:.9em;vertical-align:baseline;color:var(--oransje)}
.tilt-hz{position:absolute;top:clamp(18px,3vh,30px);right:clamp(18px,3vw,32px);display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dempet);pointer-events:none}
.tilt-hz i{width:7px;height:7px;border-radius:50%;background:var(--papir);opacity:.9}
.tilt-hz i{animation:tilt-hz 1s steps(1) infinite}
@keyframes tilt-hz{0%{opacity:1}4%{opacity:.25}5%{opacity:1}9%{opacity:.25}10%{opacity:1}14%{opacity:.25}15%{opacity:1}19%{opacity:.25}20%{opacity:1}24%{opacity:.25}25%{opacity:1}29%{opacity:.25}30%{opacity:1}34%{opacity:.25}35%{opacity:1}39%{opacity:.25}40%{opacity:1}44%{opacity:.25}45%{opacity:1}49%{opacity:.25}50%{opacity:1}54%{opacity:.25}55%{opacity:1}59%{opacity:.25}60%{opacity:1}64%{opacity:.25}65%{opacity:1}69%{opacity:.25}70%{opacity:1}74%{opacity:.25}75%{opacity:1}79%{opacity:.25}80%{opacity:1}84%{opacity:.25}85%{opacity:1}89%{opacity:.25}90%{opacity:1}94%{opacity:.25}95%{opacity:1}99%{opacity:.25}}
.tilt-knapper{position:absolute;right:clamp(18px,3vw,32px);bottom:12px;align-items:center;display:flex;justify-content:flex-end;gap:.8rem;z-index:4}
.tilt-knapper button{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--papir);background:rgba(20,18,15,.6);border:1px solid rgba(232,223,204,.36);padding:.6rem 1rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .3s,background .3s}
.tilt-knapper button:hover,.tilt-knapper button:focus-visible{border-color:var(--oransje);background:rgba(20,18,15,.82)}
.tilt-knapper button:focus-visible{outline:1px solid var(--oransje);outline-offset:3px}
.tilt-knapper button[hidden]{display:none}
.tilt-hint{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dempet);pointer-events:none;transition:opacity .6s;margin-right:.6rem}
.tilt-hint.borte{opacity:0;visibility:hidden;position:absolute}
.tilt-finger{width:34px;height:14px;position:relative;display:block}
.tilt-finger::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(232,223,204,.4)}
.tilt-finger::after{content:"";position:absolute;top:0;left:10px;width:14px;height:14px;border-radius:50%;background:var(--oransje);animation:tilt-svai 1.9s cubic-bezier(.5,0,.3,1) infinite}
@keyframes tilt-svai{0%{transform:translateX(-10px);opacity:0}20%{opacity:.95}50%{transform:translateX(10px);opacity:.95}80%{transform:translateX(-10px);opacity:.95}100%{opacity:0;transform:translateX(-10px)}}
.ht-pc{display:none;color:var(--dempet)}
@media (pointer:fine){.ht-tel{display:none}.ht-pc{display:inline}}
@media (max-width:700px){.tilt-hint{display:none}.tilt-merke{display:none}.tilt-knapper button{padding:.55rem .8rem;font-size:.62rem}}
@media (max-width:700px){.tilt{padding:12vh var(--marg)}.tilt-ramme{height:clamp(380px,52vh,440px)}.tilt-ramme canvas{inset:0 0 104px 0;height:calc(100% - 104px)}.tilt-tall{bottom:62px}.tilt-knapper{left:18px;right:18px;justify-content:space-between}.tilt-knapper button{flex:1}}
@media (prefers-reduced-motion:reduce){.tilt-hz i,.tilt-finger::after{animation:none}.tilt-hint{transition:none}}

/* T286: rytteren i tittelkortet lever uten scroll: rolig lening frem og tilbake */
.hero{transform-origin:50.5% 96%;animation:hero-pust 7.5s 5s ease-in-out infinite alternate}
@keyframes hero-pust{from{transform:rotate(-1.6deg) translate3d(-.4%,0,0)}to{transform:rotate(1.4deg) translate3d(.5%,0,0)}}
@media (prefers-reduced-motion:reduce){.hero{animation:none}}