@font-face{font-family:"Fraunces";src:url(../fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Årstidstemaer ---------- */
:root{
  --bg:#07111f; --ink:#eef4fb; --muted:#a9bad0;
  --glass:rgba(10,22,40,.62); --glass-brd:rgba(170,210,255,.16);
  --accent:#7cf2c4; --accent2:#8fb8ff; --warm:#ffd27a;
  --tint:linear-gradient(180deg,rgba(4,10,22,.55),rgba(4,10,22,.25) 40%,rgba(4,10,22,.85));
  --radius:18px;
}
/* Mørketid: blått mørke, nordlysgrønt */
body[data-season="morketid"]{--bg:#050c18;--glass:rgba(8,18,36,.66);--accent:#7cf2c4;--accent2:#9a8cff;--warm:#ffd27a;
  --tint:linear-gradient(180deg,rgba(3,8,20,.55),rgba(6,14,34,.3) 40%,rgba(3,8,20,.9))}
/* Lysvinter: sola kommer tilbake, rosa/lilla blåtime */
body[data-season="lysvinter"]{--bg:#141a33;--glass:rgba(28,30,62,.6);--accent:#ffb3c7;--accent2:#b8a6ff;--warm:#ffcf9c;--glass-brd:rgba(255,190,220,.2);
  --tint:linear-gradient(180deg,rgba(40,30,80,.45),rgba(255,160,190,.08) 45%,rgba(20,18,48,.88))}
/* Midnattssol på snø: krystallklart og gyllent */
body[data-season="solvinter"]{--bg:#0d2238;--glass:rgba(12,40,66,.55);--accent:#ffe08a;--accent2:#9fe3ff;--warm:#ffd166;--glass-brd:rgba(200,240,255,.24);
  --tint:linear-gradient(180deg,rgba(10,40,70,.35),rgba(255,230,160,.06) 45%,rgba(8,26,46,.86))}
/* Sommer: grønn tundra, fuglefjell, isbreer */
body[data-season="sommer"]{--bg:#0c2420;--glass:rgba(10,42,38,.58);--accent:#9cf0a6;--accent2:#7fdcff;--warm:#ffe28a;--glass-brd:rgba(170,255,210,.2);
  --tint:linear-gradient(180deg,rgba(8,40,40,.35),rgba(8,30,30,.15) 45%,rgba(6,26,24,.86))}
/* Høst: rust, rav og første snø */
body[data-season="host"]{--bg:#1d1410;--glass:rgba(44,26,16,.6);--accent:#ffb070;--accent2:#ffd38a;--warm:#ffc56b;--glass-brd:rgba(255,190,140,.2);
  --tint:linear-gradient(180deg,rgba(40,20,10,.45),rgba(40,20,10,.15) 45%,rgba(26,14,8,.88))}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background 1s}
a{color:var(--accent2)}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0 0 .5em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.15rem}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.center{text-align:center;margin-top:1rem}

/* ---------- Bakgrunn ---------- */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-layer{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transition:opacity 2.5s ease;transform:scale(1.04);animation:drift 120s ease-in-out infinite alternate}
.bg-layer.on{opacity:1}
@keyframes drift{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.bg-tint{position:absolute;inset:0;background:var(--tint);transition:background 1s}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
body.fallback .bg-layer{display:none}
body.fallback #bg{background:radial-gradient(120% 80% at 70% 0%,color-mix(in srgb,var(--accent2) 35%,transparent),transparent 60%),radial-gradient(90% 70% at 10% 100%,color-mix(in srgb,var(--accent) 25%,transparent),transparent 60%),var(--bg)}

/* Nordlys (mørketid + høst + tidlig lysvinter, når det er mørkt) */
.aurora{position:absolute;inset:0;opacity:0;transition:opacity 3s;mix-blend-mode:screen}
body.dark .aurora{opacity:.55}
.aurora span{position:absolute;left:-20%;width:140%;height:45%;top:2%;filter:blur(40px);border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(110,255,190,.55),rgba(140,120,255,.35),rgba(110,255,190,.4),transparent);
  animation:aur 22s ease-in-out infinite alternate}
.aurora span:nth-child(2){top:14%;height:30%;animation-duration:31s;animation-delay:-8s;opacity:.7}
.aurora span:nth-child(3){top:-6%;height:35%;animation-duration:41s;animation-delay:-17s;opacity:.5;background:linear-gradient(90deg,transparent,rgba(255,120,200,.35),rgba(110,255,190,.45),transparent)}
@keyframes aur{0%{transform:translateX(-8%) skewY(-4deg) scaleY(.8)}50%{transform:translateX(4%) skewY(3deg) scaleY(1.15)}100%{transform:translateX(10%) skewY(-2deg) scaleY(.9)}}
/* Solglød (lysvinter, solvinter, sommer) */
.sunglow{position:absolute;inset:0;opacity:0;transition:opacity 3s;background:radial-gradient(45% 35% at 82% 8%,color-mix(in srgb,var(--warm) 55%,transparent),transparent 70%);mix-blend-mode:screen}
body.sunny .sunglow{opacity:.7}
@media (prefers-reduced-motion:reduce){.bg-layer,.aurora span{animation:none}}

/* ---------- Topp ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(16px,4vw,48px);
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;font-family:Fraunces,serif;font-weight:700;font-size:1.15rem}
.brand svg{width:28px;height:28px;color:var(--accent)}
.dim{opacity:.6;font-weight:400}
.menu{display:flex;gap:.2rem;flex-wrap:wrap}
.menu a{color:var(--ink);text-decoration:none;padding:.4rem .7rem;border-radius:99px;font-size:.92rem;opacity:.85}
.menu a:hover{background:rgba(255,255,255,.1);opacity:1}
.burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
@media (max-width:860px){
  .burger{display:block}
  .menu{display:none;position:absolute;right:16px;top:100%;flex-direction:column;background:var(--glass);border:1px solid var(--glass-brd);border-radius:14px;padding:.5rem;backdrop-filter:blur(14px)}
  .menu.open{display:flex}
}

/* ---------- Hero ---------- */
.hero{min-height:calc(100vh - 60px);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem clamp(16px,5vw,64px) 3rem;max-width:1280px;margin:0 auto;position:relative}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--accent);margin:0 0 .6rem;font-weight:600}
.hero h1{font-size:clamp(2.5rem,7.5vw,5.6rem);max-width:15ch;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:58ch;color:#e3ecf7;margin:0 0 2rem;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;max-width:980px}
.stat{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);padding:.9rem 1.1rem;backdrop-filter:blur(14px);display:flex;flex-direction:column}
.stat-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.stat-val{font-family:Fraunces,serif;font-size:1.65rem;font-weight:600;line-height:1.2;margin:.15rem 0}
.stat-sub{font-size:.85rem;color:var(--muted)}
.scroll-cue{position:absolute;left:50%;bottom:.6rem;transform:translateX(-50%);color:var(--ink);text-decoration:none;opacity:.6;font-size:1.4rem;animation:bob 2.4s infinite}
@keyframes bob{50%{transform:translate(-50%,6px)}}
@media (max-width:600px){.hero-stats{grid-template-columns:1fr 1fr;gap:.6rem}.stat{padding:.7rem .8rem}.stat-val{font-size:1.25rem}.stat-sub{font-size:.75rem}.hero{min-height:auto;padding-top:3rem}}

/* ---------- Seksjoner/kort ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:3.2rem clamp(16px,5vw,64px) 0}
.grid{display:grid;gap:1rem}
.cards4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.cards2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);padding:1.25rem 1.3rem;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 40px rgba(0,0,0,.18)}
.card h3{color:var(--accent)}
.card p{margin:.3rem 0 .6rem}
.lead2{color:#dbe6f3;max-width:70ch;margin:-.2rem 0 1.4rem}
.sub{font-family:Inter,sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:1.2rem 0 .6rem;font-weight:600}
.cheer{color:var(--warm);font-size:.95rem;margin-top:.8rem}
.credit{font-size:.8rem;color:var(--muted);margin-top:1rem}
.credit a{color:var(--muted)}
.kv{list-style:none;margin:.6rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;font-size:.9rem}
.kv li{display:flex;flex-direction:column}
.kv b{font-weight:600}
.kv span{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.now-wx{display:flex;gap:.9rem;align-items:center}
.wx-ico{font-size:3rem;line-height:1}
.big{font-family:Fraunces,serif;font-size:2.4rem;font-weight:600;line-height:1}

/* Sol-linje for døgnet */
.sunbar{height:42px;border-radius:10px;margin:.4rem 0 .2rem;position:relative;overflow:hidden;border:1px solid var(--glass-brd)}
.sunbar i{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #fff}
.sunbar em{position:absolute;bottom:2px;font-size:.62rem;font-style:normal;color:rgba(255,255,255,.75);transform:translateX(-50%)}

/* Nordlys */
.kpwrap{display:flex;gap:1rem;align-items:center}
.kpdial{width:74px;height:74px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  background:conic-gradient(var(--accent) calc(var(--kp,0)*11.1%),rgba(255,255,255,.1) 0);position:relative}
.kpdial::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--bg)}
.kpdial span,.kpdial small{position:relative}
.kpdial span{font-family:Fraunces,serif;font-size:1.6rem;font-weight:700;line-height:1}
.kpdial small{font-size:.7rem;color:var(--muted)}
.verdict{font-family:Fraunces,serif;font-size:1.2rem;font-weight:600}
.kpbars{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;align-items:end;height:58px;margin-top:.9rem}
.kpbars div{background:linear-gradient(0deg,var(--accent),var(--accent2));border-radius:4px 4px 1px 1px;min-height:3px;position:relative;opacity:.85}
.kpbars div span{position:absolute;bottom:-1.25rem;left:50%;transform:translateX(-50%);font-size:.62rem;color:var(--muted)}
.kpbars{margin-bottom:1.8rem}

/* Sesong */
.season-badge{display:inline-block;padding:.25rem .8rem;border-radius:99px;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.milestones{list-style:none;padding:0;margin:.4rem 0 0;font-size:.9rem}
.milestones li{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem 0;border-top:1px solid var(--glass-brd)}
.milestones li b{color:var(--warm);white-space:nowrap}

/* Timer og dager */
.hours{grid-template-columns:repeat(12,1fr);gap:.5rem}
.days{grid-template-columns:repeat(8,1fr);gap:.6rem}
@media (max-width:1100px){.hours{grid-template-columns:repeat(6,1fr)}.days{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.hours{grid-template-columns:repeat(4,1fr)}.days{grid-template-columns:repeat(2,1fr)}}
.h,.d{background:var(--glass);border:1px solid var(--glass-brd);border-radius:14px;padding:.7rem .6rem;text-align:center;backdrop-filter:blur(12px)}
.h .t,.d .t{font-size:.78rem;color:var(--muted);text-transform:capitalize}
.h .i,.d .i{font-size:1.8rem;line-height:1.3}
.h .v{font-weight:600;font-size:1.1rem}
.h .w,.d .w{font-size:.75rem;color:var(--muted)}
.d .v{font-family:Fraunces,serif;font-size:1.15rem}
.d .v small{color:var(--muted);font-family:Inter;font-size:.85rem}

/* Aktiviteter */
.act .emo{font-size:2rem}
.act h3{margin-top:.3rem}

.fact{display:flex;flex-direction:column;gap:.4rem;border-left:4px solid var(--accent)}
.fact-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:600}
.fact p{font-family:Fraunces,serif;font-size:clamp(1.1rem,2.2vw,1.45rem);margin:0}
.ghost{align-self:flex-start;background:transparent;border:1px solid var(--glass-brd);color:var(--ink);padding:.5rem 1rem;border-radius:99px;cursor:pointer;font:inherit;font-size:.9rem}
.ghost:hover{background:rgba(255,255,255,.08)}

/* Overnatting */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.filters button{background:var(--glass);border:1px solid var(--glass-brd);color:var(--ink);padding:.4rem .9rem;border-radius:99px;cursor:pointer;font:inherit;font-size:.88rem}
.filters button.on{background:var(--accent);color:#08121f;border-color:var(--accent);font-weight:600}
.stay{display:flex;flex-direction:column}
.stay .price{color:var(--warm);font-weight:700;letter-spacing:.05em}
.tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 .5rem}
.tags span{font-size:.72rem;padding:.12rem .55rem;border-radius:99px;background:rgba(255,255,255,.09);color:var(--muted)}
.stay a.more{margin-top:auto;font-size:.9rem;text-decoration:none}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;margin-top:1rem}
.tip{border:1px dashed var(--glass-brd);border-radius:14px;padding:.8rem 1rem;font-size:.92rem;background:rgba(0,0,0,.18)}
.tip b{color:var(--accent)}

/* Nyheter */
.news a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.02rem;line-height:1.35;display:block}
.news a:hover{color:var(--accent)}
.news .meta{font-size:.78rem;color:var(--muted);margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap}
.news .meta b{color:var(--accent2);font-weight:600}
.news.fresh{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.news.fresh .meta::before{content:"NY";background:var(--accent);color:#08121f;font-weight:700;padding:0 .4rem;border-radius:4px;font-size:.68rem}

/* Fly */
.flights{width:100%;border-collapse:collapse;font-size:.92rem}
.flights th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;padding:.3rem .3rem}
.flights td{padding:.45rem .3rem;border-top:1px solid var(--glass-brd);vertical-align:top}
.flights td.tm{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.flights .st{font-size:.8rem;white-space:nowrap}
.st.ok{color:var(--accent)}
.st.warn{color:var(--warm)}
.st.bad{color:#ff8a8a}
.flights tr.past{opacity:.55}
.flights .day td{color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;padding-top:.8rem}

.foot{padding-bottom:2.5rem}
