/* ==========================================================================
   MUSEUM — fælles grundlag (bruges af salen og af Kurator)
   Skrat: køligt blåt rum, lys indefra, ét varmt punkt, den uperfekte hånd
   KNIST: firkantet, prikken i stedet for pilen, hvid = handling, ro slår pynt
   ========================================================================== */

/* Alle skrifter ligger på siden selv (ingen kald til Google Fonts) */
@font-face{font-family:Jost;src:url("../fonts/Jost-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/DMMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/DMMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Caveat;src:url("../fonts/Caveat-var.woff2") format("woff2");font-weight:400 700;font-display:swap}   /* håndskriften (latin, æøå) */

:root{
  color-scheme:dark;
  --rum:#060A1E; --indigo:#131A55; --kobolt:#2A4FB8; --himmel:#7FA6E6; --dis:#CFE0F2; --cyan:#78DDE4;
  --sol:#F6CB45; --rav:#D9962B; --kobber:#DA4630; --orkide:#B48CE6; --mauve:#7A5468; --mos:#5F8F3F;
  --rosa:#EFC3B5; --sand:#C4A27A; --perg:#F3EDD6;
  --tekst:#E9E4D3; --daempet:#9AA3BC; --hvid:#F4EEDC; --blaek:#0B1233; --papir:#F4EEDC;
  --linje:rgba(207,224,242,.13); --linje2:rgba(207,224,242,.26); --glas:rgba(207,224,242,.045);
  --varm:var(--sol);
  --display:Jost,"Segoe UI",system-ui,sans-serif;
  --hand:Jost,"Segoe UI",system-ui,sans-serif;
  --pen:Caveat,"Ink Free","Segoe Script","Bradley Hand",cursive;
  --label:Jost,"Segoe UI",system-ui,sans-serif;
  --brod:Jost,"Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --skygge:0 24px 50px -12px rgba(0,0,0,.55),0 8px 16px -8px rgba(0,0,0,.4);
  --langsom:cubic-bezier(.2,.8,.2,1);
  --side:clamp(20px,5vw,76px);
}
*{box-sizing:border-box;border-radius:0;margin:0;padding:0}   /* ingen afrundinger */
html{background:var(--rum)}
body{font-family:var(--brod);font-size:18px;font-weight:350;line-height:1.6;color:var(--tekst);background:var(--rum);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--hvid);outline-offset:4px}
::selection{background:var(--sol);color:var(--blaek)}
[hidden]{display:none!important}

/* Lærredet: forløb, korn, drivende lys */
#laerred{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 85% 70% at 50% 42%,#14161F 0%,#0C0D14 52%,#06070B 100%)}
#laerred::after{content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>")}
.mote{position:absolute;border-radius:50%;filter:blur(1px);background:radial-gradient(circle,rgba(246,203,69,.9) 0%,rgba(246,203,69,0) 70%);opacity:0;animation:drift ease-in-out infinite}
.mote.k{background:radial-gradient(circle,rgba(207,224,242,.95) 0%,rgba(207,224,242,0) 70%)}
@keyframes drift{0%,100%{transform:translate3d(0,0,0);opacity:0}15%{opacity:var(--po,.4)}50%{transform:translate3d(var(--dx),var(--dy),0);opacity:var(--po,.4)}85%{opacity:0}}
@keyframes bob{from{transform:translateY(-8px) rotate(-3deg)}to{transform:translateY(10px) rotate(3deg)}}

/* Typografi */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--daempet)}
.eyebrow b{color:var(--varm);font-weight:500;margin-right:.9em}
h1,h2,h3{font-family:var(--display);font-weight:300;color:var(--hvid);letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(46px,7.4vw,112px);margin-top:20px}
h3{font-size:clamp(26px,3vw,38px)}
.lede{font-size:clamp(19px,1.7vw,23px);font-weight:300;color:var(--tekst);max-width:56ch;margin-top:28px;line-height:1.55}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.cap{font-size:14px;color:var(--daempet)}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--side)}
section{position:relative}

/* Tuschstreg: den uperfekte hånd */
.ink{position:relative;display:inline-block}
.ink svg{position:absolute;left:-1%;bottom:-.16em;width:102%;height:.24em;overflow:visible;pointer-events:none}
.ink path{fill:none;stroke-linecap:round;stroke-dasharray:4000;stroke-dashoffset:4000;vector-effect:non-scaling-stroke}
.ink .s1{stroke:var(--sol);stroke-width:3.2px}
.ink .s2{stroke:var(--perg);stroke-width:1.2px;opacity:.55}
.ink.in path{animation:tegn 1.6s var(--langsom) .35s forwards}
.ink.in .s2{animation-delay:.6s}
@keyframes tegn{to{stroke-dashoffset:0}}

/* Knapper: prikken er underskriften */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:16px;background:var(--papir);color:var(--blaek);padding:5px 6px 5px 22px;height:44px;font-family:var(--brod);font-size:12.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(.94)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--hvid);outline-offset:4px}
.btn.acc{background:var(--a,var(--sol));color:var(--blaek)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-out{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;height:44px;border:1px solid var(--linje2);color:var(--hvid);padding:0 22px;font-family:var(--brod);font-size:12.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;transition:background .25s,border-color .25s}
.btn-out:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.45)}
.btn-out:focus-visible{outline:2px solid var(--hvid);outline-offset:4px}
.dot{position:relative;display:flex;height:32px;width:32px;flex-shrink:0;align-items:center;justify-content:center;overflow:visible}
.dot .g{position:absolute;inset:0;pointer-events:none;filter:url(#goo)}
.dot .m{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);background:var(--blaek);transition:transform .3s ease-out,border-radius .3s ease-out}
.dot i{position:absolute;left:50%;top:50%;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(0);background:var(--blaek);transition:all .5s ease-out}
.dot.lys .m,.dot.lys i{background:#fff}
.hov:hover .dot .m,.hov:focus-visible .dot .m{transform:translate(-50%,-50%) scale(3.5);border-radius:50%}
.hov:hover .dot i,.hov:focus-visible .dot i{opacity:.9;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1)}
.chip{display:inline-flex;align-items:center;gap:10px;padding:4px 12px 2px;font-family:var(--label);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;background:var(--ac29,rgba(255,255,255,.12));color:var(--at,#fff)}

/* Menu (bruges kun af Kurator) */
header.nav{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:1px solid transparent}
header.nav.fast{background:rgba(6,10,30,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:var(--linje)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:72px;max-width:1600px}
.maerke{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--hvid)}
.maerke b{font-family:var(--display);font-weight:300;font-size:26px;letter-spacing:.06em}
.maerke span{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--daempet)}
.nav nav a{text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--daempet);padding:6px 0;transition:color .3s}
.nav nav a:hover{color:var(--hvid)}

#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#fff;color:var(--blaek);padding:12px 20px;font-size:13px;font-weight:700;letter-spacing:.08em;opacity:0;pointer-events:none;transition:all .35s;z-index:300}
#toast.on{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
  .ink path{stroke-dashoffset:0!important}
  .mote{opacity:.3}
}

/* ---------- Rulleliste: tynd, rolig, uden pile ---------- */
*{scrollbar-width:thin;scrollbar-color:rgba(207,224,242,.28) transparent}
*:hover{scrollbar-color:rgba(246,203,69,.55) transparent}