:root{--bg:#f7f8fa;--card:#fff;--ink:#0b0f19;--ink2:#424a5b;--muted:#7b8394;--line:#e4e7ee;--sun:#ffc93c;--sun2:#fff3cf;--pet:#0f4c5c;--pet2:#e3eff1;--hd:"Familjen Grotesk",system-ui,sans-serif;--tx:"Manrope",system-ui,sans-serif;--it:"DM Serif Text",Georgia,serif;--r:18px;--sh:0 1px 2px rgba(11,15,25,.06),0 12px 30px -18px rgba(11,15,25,.25);--e:cubic-bezier(.16,1,.3,1)}
[data-theme=dark]{--bg:#0b0f19;--card:#141a28;--ink:#eef1f6;--ink2:#b9c0cf;--muted:#8891a3;--line:#252d3e;--sun2:#3a3215;--pet2:#14303a;--sh:0 12px 30px -18px rgba(0,0,0,.8)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--tx);overflow-x:hidden;transition:background .4s,color .4s}
img{max-width:100%;height:auto;display:block}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}
.wrap{width:min(1280px,100% - 40px);margin:0 auto}
h1,h2,h3,.h{font-family:var(--hd);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 11.5px/1 var(--tx);letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--pet2);color:var(--pet)}[data-theme=dark] .pill{color:#8fd3e0}
.pill.sun{background:var(--sun);color:#0b0f19}
.meta{font-size:13px;color:var(--muted)}
.ring{position:fixed;right:18px;bottom:18px;width:46px;height:46px;z-index:70;opacity:0;transition:opacity .3s;cursor:pointer;background:var(--card);border-radius:50%;box-shadow:var(--sh);border:0;padding:0}.ring.on{opacity:1}.ring svg{width:46px;height:46px;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:4}.ring .bgc{stroke:var(--line)}.ring .fg{stroke:var(--pet);stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:126}.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font:700 23px/1 var(--hd);letter-spacing:-.04em}.logo svg{width:34px;height:34px}.logo .rays{transform-origin:17px 17px;animation:spin 24s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.logo small{font:400 italic 19px var(--it);letter-spacing:0;color:var(--pet)}[data-theme=dark] .logo small{color:#8fd3e0}
.nav{display:flex;gap:2px;margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px}
.nav a{padding:7px 14px;border-radius:999px;font-weight:600;font-size:14px;transition:background .25s,color .25s}.nav a:hover{background:var(--pet2)}.nav a[aria-current]{background:var(--ink);color:var(--bg)}
.ib{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--e)}.ib:hover{transform:rotate(-12deg) scale(1.06)}.ib svg{width:18px;height:18px}
.burger{display:none}
.sub{border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}.sub .wrap{display:flex;gap:22px;align-items:center;height:40px;overflow:hidden}.sub b{color:var(--ink)}.sub .dot{width:8px;height:8px;border-radius:50%;background:var(--sun);display:inline-block;margin-right:8px;box-shadow:0 0 0 0 var(--sun);animation:pulse 2.2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}}
.sub .r{margin-left:auto}
.intro{padding:46px 0 26px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end}
.intro h1{font-size:clamp(40px,5.6vw,78px);letter-spacing:-.045em}.intro h1 em{font:400 italic 1em var(--it);letter-spacing:-.02em;color:var(--pet);position:relative;white-space:nowrap}[data-theme=dark] .intro h1 em{color:#8fd3e0}
.intro h1 em:after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.28em;background:var(--sun);z-index:-1;border-radius:4px;transform:scaleX(0);transform-origin:left;animation:hl 1s .6s var(--e) forwards}@keyframes hl{to{transform:none}}
.intro p{font-size:18px;color:var(--ink2);margin:0}
.wod{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh);position:relative;overflow:hidden}.wod:before{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--sun);opacity:.35}
.wod b{display:block;font:400 italic 34px/1.1 var(--it);margin:8px 0 4px}.wod p{font-size:14.5px;margin:0}
.bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px;padding-bottom:40px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;color:#fff;isolation:isolate;box-shadow:var(--sh)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--e)}.tile:hover img{transform:scale(1.06)}
.tile:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(5,10,20,.82))}
.tile div{padding:20px}.tile h2,.tile h3{font-size:21px;margin-top:10px}.tile .meta{color:rgba(255,255,255,.8)}
.tile.big{grid-row:1/3}.tile.big h2{font-size:clamp(28px,3vw,42px)}.tile.big p{font-size:16px;opacity:.9;margin:10px 0 8px;max-width:600px}.tile.wide{grid-column:2/4}
.sec{padding:56px 0}.sh{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.sh h2{font-size:clamp(28px,3vw,40px)}.sh a{font-weight:700;font-size:14px;color:var(--pet)}[data-theme=dark] .sh a{color:#8fd3e0}.sh a:hover{text-decoration:underline}
.car{position:relative}.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}.track::-webkit-scrollbar{display:none}
.arr{display:flex;gap:8px}.arr button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:18px;transition:background .2s}.arr button:hover{background:var(--sun);color:#0b0f19}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;scroll-snap-align:start;transition:transform .5s var(--e),box-shadow .5s}.card:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.card .im{overflow:hidden;aspect-ratio:3/2}.card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}.card:hover img{transform:scale(1.06)}
.card div.b{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}.card h3{font-size:19px}.card p{margin:0;font-size:14.5px;color:var(--ink2)}.card .meta{margin-top:auto}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.band{background:var(--pet);color:#fff;border-radius:28px;padding:44px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:var(--sun);right:-90px;top:-150px;opacity:.9;animation:float 9s ease-in-out infinite}@keyframes float{50%{transform:translate(-20px,24px)}}
.band h2{font-size:clamp(28px,3vw,42px);position:relative}.band p{color:#cfe3e7;position:relative}
.band form{position:relative;display:flex;gap:8px;background:#fff;border-radius:999px;padding:6px}.band input{flex:1;border:0;outline:none;padding:10px 14px;background:none;color:#0b0f19;min-width:0}.band button{border:0;background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer}[data-theme=dark] .band button{background:#0b0f19}
.band .msg{position:relative;font-size:13px;color:#fff;margin:10px 0 0}
.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.counts div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}.counts b{display:block;font:700 44px/1 var(--hd);letter-spacing:-.04em}.counts span{font-size:14px;color:var(--ink2)}
.pg{padding:52px 0 30px}.pg h1{font-size:clamp(40px,5vw,68px);margin:14px 0 10px}.pg p{font-size:18px;color:var(--ink2);max-width:680px;margin:0}
.art{display:grid;grid-template-columns:64px minmax(0,720px) 280px;gap:40px;justify-content:center;padding:44px 0 30px}
.rail{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:10px}.rail button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;transition:background .2s}.rail button:hover,.rail button[aria-pressed=true]{background:var(--sun);color:#0b0f19}.rail svg{width:18px;height:18px}
.ahd h1{font-size:clamp(34px,4.4vw,56px);margin:14px 0 16px;letter-spacing:-.035em}.ahd .dek{font:400 italic 22px/1.45 var(--it);color:var(--ink2);margin:0 0 18px}
.by{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}.av{width:36px;height:36px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font:700 14px var(--hd);color:#0b0f19}.by b{color:var(--ink)}
.hero{border-radius:22px;overflow:hidden;margin:26px 0 8px;clip-path:inset(0 0 0 0 round 22px);animation:rev 1.2s var(--e)}@keyframes rev{from{clip-path:inset(12% 12% 12% 12% round 22px);opacity:.3}}.hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cap{font-size:12.5px;color:var(--muted);margin-bottom:28px}
.prose{font-size:18px;line-height:1.75;color:var(--ink2)}.prose h2{font-size:26px;color:var(--ink);margin:1.7em 0 .5em;scroll-margin-top:90px}.prose p{margin:0 0 1.15em}.prose>p:first-of-type{font-size:20px;color:var(--ink)}
.aside{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:16px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}.box h4{margin:0 0 10px;font:700 12px var(--tx);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.box.good{background:var(--sun2);border-color:transparent}.box ul{margin:0;padding-left:18px;font-size:14.5px}.box li{margin-bottom:7px}
.toc a{display:block;font-size:14px;padding:6px 0 6px 12px;border-left:2px solid var(--line);color:var(--ink2);transition:border-color .2s,color .2s}.toc a.on,.toc a:hover{border-color:var(--pet);color:var(--ink)}
.note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:30px}.note a{text-decoration:underline}
.doc{max-width:780px;margin:0 auto;padding:10px 0 70px;font-size:17px;line-height:1.75;color:var(--ink2)}.doc h2{font-size:24px;color:var(--ink);margin:1.8em 0 .4em}
.co{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-top:36px;font-size:15px}.co b{font:700 19px var(--hd);color:var(--ink)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}.form .full{grid-column:1/-1}.form label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:11px 13px;outline:none}.form :focus{border-color:var(--pet);box-shadow:0 0 0 3px var(--pet2)}.form textarea{min-height:140px}
.btn{display:inline-flex;border:0;border-radius:999px;background:var(--ink);color:var(--bg);padding:12px 22px;font-weight:700;cursor:pointer;transition:transform .2s}.btn:hover{transform:translateY(-2px)}
.chk{display:flex;gap:10px;font-size:14px}.chk input{width:auto}
.srch{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 22px;box-shadow:var(--sh)}.srch input{flex:1;border:0;outline:none;background:none;font:600 22px var(--hd);min-width:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.chips button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-weight:600;font-size:14px;cursor:pointer}.chips button:hover{background:var(--sun);color:#0b0f19}
.ft{margin-top:60px;border-top:1px solid var(--line);padding:50px 0 28px;font-size:14.5px;color:var(--ink2)}.fg{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px}.ft h4{font:700 12px var(--tx);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.ft a:hover{color:var(--pet)}
.fs{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:var(--muted)}
.big-word{font:700 clamp(80px,17vw,250px)/.8 var(--hd);letter-spacing:-.06em;color:var(--line);margin:40px 0 -10px;white-space:nowrap;overflow:hidden}
.rv{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .9s var(--e),transform .9s var(--e)}.rv.in{opacity:1;transform:none}
.st>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e),transform .8s var(--e)}.st.in>*{opacity:1;transform:none}.st.in>*:nth-child(2){transition-delay:.07s}.st.in>*:nth-child(3){transition-delay:.14s}.st.in>*:nth-child(4){transition-delay:.21s}.st.in>*:nth-child(5){transition-delay:.28s}
.up{opacity:0;animation:up .9s var(--e) forwards}.u1{animation-delay:.1s}.u2{animation-delay:.2s}.u3{animation-delay:.3s}.u4{animation-delay:.4s}@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.st>*,.up{opacity:1;transform:none}.intro h1 em:after{transform:none}}
@media (max-width:1100px){.art{grid-template-columns:minmax(0,720px);}.rail{position:static;flex-direction:row;order:2}.aside{position:static}.track{grid-auto-columns:calc((100% - 16px)/2)}.nav a{padding:7px 10px}}
@media (max-width:900px){.intro,.band{grid-template-columns:1fr}.bento{grid-template-columns:1fr 1fr;grid-template-rows:340px 220px 220px}.tile.big{grid-column:1/3;grid-row:auto}.tile.wide{grid-column:auto}.g3,.counts{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr 1fr}
.nav{display:none;position:absolute;top:66px;left:16px;right:16px;flex-direction:column;border-radius:var(--r);padding:8px}.nav.on{display:flex}.burger{display:grid;margin-left:auto}.hdr .ib.th{margin-left:0}}
@media (max-width:600px){.sub .sun{display:none}.sub .wrap{white-space:nowrap}.bento{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:240px}.tile.big{grid-column:auto;min-height:360px}.g3,.g2,.counts,.form,.fg{grid-template-columns:1fr}.track{grid-auto-columns:82%}.band{padding:28px}.sub .r{display:none}.sec{padding:40px 0}.prose{font-size:17px}}
.nart{padding:40px 0 20px}.nhd{max-width:900px}.nmeta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--muted);font-weight:600}.nmeta time{color:var(--ink)}
.nhd h1{font-size:clamp(32px,4vw,52px);margin:16px 0 14px;letter-spacing:-.035em}.nhd .dek{font:400 italic 21px/1.45 var(--it);color:var(--ink2);margin:0}
.ngrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;margin-top:10px}
.src{margin-top:30px;background:var(--pet2);border-radius:var(--r);padding:22px;display:grid;gap:10px;justify-items:start}.src p{margin:0;color:var(--ink2);font-size:15px}
.glance ul{list-style:none;padding:0}.glance li{display:grid;gap:2px;padding:10px 0;border-bottom:1px dashed var(--line)}.glance li:last-child{border:0}.glance b{font:700 11.5px var(--tx);letter-spacing:.06em;text-transform:uppercase;color:var(--pet)}.glance span{font-weight:600}
.mini{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}.mini:last-child{border:0}.mini b{font:600 15px/1.3 var(--hd)}.mini:hover b{color:var(--pet)}
.tile .pill.sun.today{background:#fff}
@media (max-width:900px){.ngrid{grid-template-columns:1fr}}
