@font-face{font-family:Inter;font-style:normal;font-weight:300 700;font-display:swap;size-adjust:94%;src:url(fonts/inter-latin-var.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:200;font-display:swap;src:url(fonts/barlow-200.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/barlow-300.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format("woff2")}
:root{
  --bg:#000; --bg-2:#0c0c0c; --line:#222;
  --text:#fff; --muted:#8c8c8c; --dim:#7a7a7a;
  --accent:#fff; --green:#22c522;
  --gutter:clamp(20px,4vw,64px);
  --wide:"wdth" 125; --norm:"wdth" 100; --cond:"wdth" 78;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Barlow,system-ui,sans-serif;font-variation-settings:var(--norm);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* ---------- top ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;padding:28px var(--gutter)}
.lang{display:flex;gap:10px;margin-left:clamp(90px,13vw,200px);font-size:13px;letter-spacing:.04em;color:var(--text)}
.lang a{color:var(--muted);transition:color .2s} .lang a:hover{color:var(--text)} .lang a[aria-current]{color:var(--green)}
.name span{color:var(--green)}
.side{display:flex;flex-direction:column;gap:56px;margin-right:clamp(0px,4vw,70px)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{font-size:16px;letter-spacing:.01em;text-transform:uppercase;font-weight:500;color:var(--text);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--green)}
.social{display:flex;flex-direction:column;gap:20px;padding-left:22px}
.social a{color:var(--muted);transition:color .2s;width:16px;height:16px} .social a:hover{color:var(--text)}
.social svg{width:16px;height:16px;display:block}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;display:grid;grid-template-columns:auto 1fr;overflow:hidden}
.hero-img{position:absolute;top:0;bottom:0;left:50%;height:100%;aspect-ratio:1024/1535;transform:translateX(-47%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,#000 80%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,#000 80%,transparent)}
.name{position:relative;z-index:2;writing-mode:vertical-rl;transform:rotate(180deg);align-self:end;
  padding:clamp(40px,11vh,120px) 0;margin-left:clamp(20px,6.5vw,110px);
  font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-weight:300;text-transform:uppercase;line-height:1;letter-spacing:.09em;
  font-size:clamp(28px,5.8vh,68px);white-space:nowrap}

.hero-copy{position:relative;z-index:2;align-self:end;justify-self:end;max-width:380px;padding:0 var(--gutter) calc(var(--gutter) + 8px) 24px}
.hero-copy p{font-size:16px;color:#cfc9c0;margin-top:14px}
.scroll{position:absolute;left:50%;bottom:0;width:1px;height:64px;background:linear-gradient(var(--dim),transparent)}

/* ---------- statement ---------- */
.statement{padding:clamp(90px,16vw,220px) var(--gutter) clamp(60px,9vw,120px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.statement .label{grid-column:1/4;padding-top:10px}
.statement p{grid-column:4/12;font-size:clamp(24px,3.1vw,46px);line-height:1.28;font-weight:200;letter-spacing:.01em;color:var(--text)}
.statement em{font-style:normal;color:#a3a3a3}

/* ---------- projects ---------- */
.projects{padding:0 var(--gutter) clamp(80px,12vw,180px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:18px 0 clamp(40px,6vw,90px)}
[hidden]{display:none!important}
.music-head.proj-head{padding:clamp(40px,6vw,90px) 0 0;border-top:1px solid var(--line);margin-bottom:clamp(50px,7vw,100px)}
.proj-head .music-title h2{font-size:clamp(38px,5.6vw,84px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:clamp(70px,10vw,150px)}
.card{display:block}
.card .frame{overflow:hidden;background:var(--bg-2)}
.card img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s;filter:grayscale(1)}
.card:hover img,.card.is-on img{transform:scale(1.035);filter:grayscale(0)}
.card .meta{display:grid;grid-template-columns:auto 1fr;column-gap:18px;margin-top:20px;align-items:baseline}
.card .no{font-size:12px;letter-spacing:.18em;color:var(--dim)}
.card h3{font-weight:500;text-transform:uppercase;font-size:clamp(24px,2.7vw,40px);line-height:1.02;letter-spacing:.005em;color:var(--muted);transition:color .25s}
.card:hover h3,.card:focus-visible h3,.card.is-on h3{color:var(--text)}
.card .desc{grid-column:2;color:var(--muted);font-size:15px;max-width:46ch;margin-top:10px;transition:color .25s}
.card:hover .desc,.card:focus-visible .desc,.card:hover .facts,.card:focus-visible .facts,.card.is-on .desc,.card.is-on .facts{color:var(--text)}
.card .facts{grid-column:2;margin-top:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.c1{grid-column:1/8} .c1 .frame{aspect-ratio:3/2}
.c2{grid-column:8/13;margin-top:clamp(80px,14vw,220px)} .c2 .frame{aspect-ratio:4/3}
.c3{grid-column:1/7} .c3 .frame{aspect-ratio:4/3}
.c4{grid-column:7/13;margin-top:clamp(60px,9vw,140px)} .c4 .frame{aspect-ratio:16/10}

.ph{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:18px;border:1px dashed #4a4741;color:var(--muted);
  background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.018) 14px 28px)}
.ph b{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600}
.ph span{font-size:14px;max-width:34ch}

/* ---------- music rail ---------- */
.prod{padding:clamp(40px,6vw,90px) 0 clamp(90px,12vw,170px);border-top:1px solid var(--line);margin-top:0}
.music-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:0 var(--gutter);margin-bottom:22px}
.music-head .label{align-self:start;padding-top:14px}
.music-title h2{font-weight:300;color:var(--green);text-transform:uppercase;font-size:clamp(52px,7.5vw,112px);line-height:.9;letter-spacing:.01em;display:inline-block;position:relative}
.music-title sup{position:absolute;left:100%;top:.6em;margin-left:8px;font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.02em;color:var(--green);font-weight:400;white-space:nowrap}
.tabs{display:flex;justify-content:center;gap:26px;margin-top:22px}
.tabs button{all:unset;cursor:pointer;font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:700;color:var(--text);padding-bottom:5px;border-bottom:1px solid transparent;transition:color .2s}
.tabs button:hover{color:var(--green)}
.tabs button[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green)}
.tabs button:focus-visible,.arrows button:focus-visible,.rel:focus-visible{outline:1px solid var(--text);outline-offset:4px}
.arrows{justify-self:end;display:flex;gap:8px}
.arrows button{all:unset;cursor:pointer;width:30px;height:30px;border:1px solid #444;border-radius:50%;display:grid;place-items:center;color:var(--text);transition:border-color .2s,background .2s}
.arrows button:hover{border-color:var(--green);color:var(--green)}
.arrows svg{width:12px;height:12px}
.rail{display:flex;align-items:flex-start;gap:18px;overflow-x:auto;padding:0 var(--gutter) 12px;scroll-snap-type:x proximity;scroll-padding-left:var(--gutter);scrollbar-width:none;min-height:calc(var(--big) + 70px);--small:clamp(150px,15vw,215px);--big:clamp(220px,23vw,335px)}
.rail::-webkit-scrollbar{display:none}
.rail[hidden]{display:none}
.rel{flex:0 0 auto;width:var(--small);scroll-snap-align:start;transition:width .45s cubic-bezier(.2,.7,.2,1);display:block}
.rel.is-active{width:var(--big)}
.rel .frame{aspect-ratio:1;position:relative;overflow:hidden;background:var(--bg-2)}
.rel .frame img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rel:hover .frame img{transform:scale(1.03)}
.rel .go{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s;background:rgba(0,0,0,.28)}
.rel .go span{width:64px;height:40px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg)}
.rel .go svg{width:14px;height:14px;transform:rotate(8deg)}
.rel.is-active .go{opacity:1}
.rel h3{font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:-.005em;text-transform:uppercase;line-height:1.3;margin-top:10px}
.rel p{font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-top:3px}


/* ---------- videoer ---------- */
.videos{padding:0 var(--gutter) clamp(80px,12vw,180px)}
.proj-head.vid-head .music-title h2{font-size:clamp(52px,7.5vw,112px)}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(34px,4vw,60px) 24px}
.vid{all:unset;cursor:pointer;display:block;box-sizing:border-box}
.vid .thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.vid .thumb img{transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s;filter:grayscale(1)}
.vid:hover .thumb img,.vid:focus-visible .thumb img,.vid.is-on .thumb img{transform:scale(1.04);filter:grayscale(0)}
.vid:focus-visible{outline:1px solid var(--text);outline-offset:4px}
.vid .go{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s;background:rgba(0,0,0,.25)}
.vid:hover .go,.vid:focus-visible .go,.vid.is-on .go{opacity:1}
.vid .go span{width:64px;height:40px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;transform:rotate(-8deg)}
.vid .go svg{width:14px;height:14px;transform:rotate(8deg)}
.vt{display:block;margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.vs{display:block;margin-top:3px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.vdlg{margin:auto;border:0;padding:0;background:#000;color:var(--text);width:min(1100px,92vw);max-width:none;overflow:visible}
.vdlg::backdrop{background:rgba(0,0,0,.88)}
.vframe{aspect-ratio:16/9;background:#000}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vclose{all:unset;cursor:pointer;position:absolute;right:0;top:-34px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.vclose:hover{color:var(--green)}
.vopen{position:absolute;left:0;bottom:-30px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vopen:hover{color:var(--green)}
@media (max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vgrid{grid-template-columns:1fr}}

/* ---------- om mig ---------- */
.about{padding:0 var(--gutter) clamp(70px,10vw,150px)}
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:40px}
.bio{grid-column:1/6;font-size:clamp(22px,2.1vw,32px);line-height:1.3;font-weight:300;letter-spacing:.005em}
.cv{grid-column:7/13;padding-top:6px}
.cv p{font-size:clamp(16px,1.25vw,18px);line-height:1.7;font-weight:300;color:#c9c9c9;margin:0 0 1.4em;max-width:56ch}
.cv em{font-style:normal;color:var(--text)}
.cv h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 14px;padding-top:6px}
.cv h3:not(:first-child){margin-top:44px}
.cv dl{margin:0;border-top:1px solid var(--line)}
.cvrow{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.cvrow dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.cvrow dd{margin:0;font-size:16px;line-height:1.4}
.cvrow b{font-weight:500;display:block}
.cvrow span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.komp{font-size:15px;line-height:1.7;color:var(--muted);margin:0;max-width:52ch}
@media (max-width:820px){.about-grid{display:block}.bio{margin-bottom:44px}.cvrow{grid-template-columns:96px 1fr}}
/* ---------- foot ---------- */
.foot{border-top:1px solid var(--line);margin:0 var(--gutter);padding:clamp(60px,9vw,130px) 0 40px;display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.foot h2{grid-column:1/9;font-weight:400;text-transform:uppercase;font-size:clamp(34px,6vw,92px);line-height:.95}
.foot h2 a{border-bottom:1px solid var(--text)}
.foot ul{grid-column:10/13;list-style:none;padding:0;align-self:end}
.foot li a{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot li a:hover{color:var(--text)}
.foot small{grid-column:1/-1;color:var(--dim);font-size:12px;margin-top:60px}

.note{background:#1b1a18;border-left:2px solid var(--accent);margin:0 var(--gutter) 60px;padding:14px 18px;font-size:13px;color:var(--muted)}

@media (max-width:820px){
  body{font-size:16px}
  .side{display:none}.lang{margin-left:0}
  /* mobil: som på computer, med navnet lodret til venstre. Billedet starter lidt længere nede, så ansigtet ikke skæres af */
  .hero-img{top:clamp(58px,9svh,86px);bottom:auto;height:calc(100% - clamp(58px,9svh,86px));
    -webkit-mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 80%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect;
    mask-image:linear-gradient(to right,transparent,#000 22%,#000 78%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 80%,transparent)}
  .name{font-size:clamp(30px,5.6svh,54px);grid-column:2;justify-self:end;align-self:center;margin-left:0;margin-right:clamp(16px,5.5vw,30px);padding:clamp(36px,9svh,80px) 0}
  .hero-copy{max-width:none;justify-self:auto;align-self:auto;padding:18px var(--gutter) 56px}
  .scroll{display:none}
  .music-head{grid-template-columns:1fr auto}.music-head .label{display:none}.proj-head{grid-template-columns:1fr}.proj-head>span{display:none}.tabs{justify-content:flex-start}.rail{--small:140px;--big:210px}.statement{display:block}.statement p{margin-top:18px}
  .grid{display:block}.card{margin:0 0 64px}.c2,.c4{margin-top:0}
  /* mobil: alle kort står centreret i fuld bredde (ingen forskudte kort) */
  .foot{display:block}.foot ul{margin-top:36px;display:flex;gap:20px;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* Musikbunkeren-kort: hvid ring, #ccff00 ved markering (farven glider, ingen krydsoning) */
.card .frame.ring{background:transparent}
.card .ringsvg{display:block;width:100%;height:100%;color:#fff;transition:color .7s cubic-bezier(.4,0,.2,1)}
.card:hover .ringsvg,.card:focus-visible .ringsvg,.card.is-on .ringsvg{color:#ccff00}

/* ---------- menu (mobil) og undersidernes navigation ---------- */
.menu-btn{all:unset;display:none;cursor:pointer;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:4px 0}
.menu-btn:focus-visible{outline:1px solid var(--green);outline-offset:4px}
.mnav{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--gutter) 40px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mnav.open{opacity:1;visibility:visible}
.mnav .mtop{display:flex;justify-content:space-between;align-items:center;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.mnav .mclose{all:unset;cursor:pointer;padding:4px 0}
.mnav nav{display:flex;flex-direction:column;gap:6px}
.mnav nav a{font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(34px,10vw,60px);line-height:1.15;transition:color .2s}
.mnav nav a:hover,.mnav nav a:focus-visible{color:var(--green)}
.mnav .msoc{display:flex;gap:22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mnav .msoc a:hover{color:var(--text)}
body.menu-open{overflow:hidden}
@media (max-width:820px){.menu-btn{display:block}}
.sub-nav{display:flex;gap:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.sub-nav a{color:var(--muted);transition:color .2s} .sub-nav a:hover{color:var(--green)}
@media (max-width:900px){.sub-nav{display:none}}

/* ---------- tilgængelighed (fase 2): usynlig for øjet, men til hjælp for tastatur og skærmlæser ---------- */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-120px;z-index:100;background:#000;color:#fff;padding:10px 14px;border:1px solid var(--green);font-size:14px;letter-spacing:.04em}
.skip:focus{top:12px}
a:focus-visible,button:focus-visible{outline:1px solid var(--text);outline-offset:4px}
.lang a,.sub-lang a,.sub-nav a,.back,.social a,.foot li a,.msoc a,.tabs button,.arrows button,.vclose,.vopen,.menu-btn{position:relative}
.lang a::after,.sub-lang a::after{content:"";position:absolute;inset:-12px -5px}
.sub-nav a::after,.back::after,.foot li a::after,.msoc a::after,.vclose::after,.vopen::after{content:"";position:absolute;inset:-12px -6px}
.social a::after{content:"";position:absolute;inset:-14px}
.tabs button::after{content:"";position:absolute;inset:-10px -8px}
.arrows button::after{content:"";position:absolute;inset:-6px}
.menu-btn::after{content:"";position:absolute;inset:-10px -8px}
main:focus{outline:none}
.rel{position:relative}
.vid{position:relative}
.foot li a::after{inset:-15px -6px}

/* telefon og tablet (ingen hover): ingen forstørrelse af coveret i album- og produktionsrullen. Computer er uændret. */
@media (hover:none){
  .rel.is-active{width:var(--small)}
  .rel.is-active .go{opacity:0}
  .rel:hover .frame img{transform:none}
}

/* udvalgte projekter: samme rulle som album og produktioner, men med større billeder og en kort tekst, når kortet er åbent */
.pr-rail{--small:clamp(240px,24vw,350px);--big:clamp(340px,35vw,500px);min-height:calc(var(--big) / 1.5 + 220px)}
.rel.pr .frame{aspect-ratio:3/2;background:#000}
.rel.pr .frame img[src$=".svg"]{object-fit:contain!important;background:#000}
.rel.pr .frame img{filter:grayscale(1);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s}
.rel.pr.is-active .frame img,.rel.pr:hover .frame img,.rel.pr:focus-visible .frame img,.rel.pr.is-on .frame img{filter:none}
.rel.pr .frame.ring{background:transparent}
.rel.pr .ringsvg{display:block;width:100%;height:100%;color:#fff;transition:color .7s cubic-bezier(.4,0,.2,1)}
.rel.pr.is-active .ringsvg,.rel.pr:hover .ringsvg,.rel.pr:focus-visible .ringsvg,.rel.pr.is-on .ringsvg{color:#ccff00}
.rel.pr h3{font-size:clamp(14px,1.3vw,18px);color:var(--muted);transition:color .25s}
.rel.pr.is-active h3,.rel.pr:hover h3,.rel.pr:focus-visible h3,.rel.pr.is-on h3{color:var(--text)}
.rel.pr p{transition:color .25s}
.rel.pr.is-active p,.rel.pr:hover p,.rel.pr:focus-visible p,.rel.pr.is-on p{color:var(--text)}
.rel.pr .pd{display:none;text-transform:none;letter-spacing:0;font-size:14px;line-height:1.5;margin-top:12px;max-width:44ch}
.rel.pr.is-active .pd{display:block}
@media (hover:none){.rel.pr .pd{display:none!important}}
@media (max-width:820px){.pr-rail{--small:min(64vw,280px);--big:min(64vw,280px);min-height:0}}
/* grafikkerne i projektrullen: bløde kanter, så billedets egen baggrund ikke kan ses mod den sorte side */
.rel.pr .frame img[src$=".svg"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
/* Kunstnerisk produktion: fotoet inde i grafikken har egne hårde kanter, så fadet ligger tættere på midten */
.rel.pr .frame img[src*="kunstnerisk-produktion"]{-webkit-mask-image:linear-gradient(to right,transparent 13%,#000 23%,#000 77%,transparent 87%),linear-gradient(to bottom,transparent 2%,#000 14%,#000 86%,transparent 98%);mask-image:linear-gradient(to right,transparent 13%,#000 23%,#000 77%,transparent 87%),linear-gradient(to bottom,transparent 2%,#000 14%,#000 86%,transparent 98%)}
/* mobil: I Think You're Awesome står først (til venstre) i projektrullen. Computer har Kadie Elder til venstre */
@media (max-width:820px){.pr-rail .rel.pr[href*="i-think-youre-awesome"]{order:-1}}
/* telefon: i projektrullen er det kun kortet nærmest midten (.is-on), der har farve. Standardkortet (.is-active) har ingen særstilling uden hover */
@media (hover:none){
  .rel.pr.is-active:not(.is-on) .frame img{filter:grayscale(1)}
  .rel.pr.is-active:not(.is-on) h3,.rel.pr.is-active:not(.is-on) p{color:var(--muted)}
  .rel.pr.is-active:not(.is-on) .ringsvg{color:#fff}
}
/* mobil: videoerne står i en vandret rulle (som album og projekter). Computer har stadig gitteret */
@media (max-width:820px){
  .vgrid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 12px;scroll-padding-left:var(--gutter)}
  .vgrid::-webkit-scrollbar{display:none}
  .vgrid .vid{flex:0 0 min(70vw,300px);scroll-snap-align:start}
  .vgrid .vt{font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:-.005em;margin-top:10px;color:var(--muted);transition:color .25s}
  .vgrid .vs{font-family:"Helvetica Neue","Inter",Helvetica,Arial,sans-serif;font-size:10.5px;letter-spacing:.02em;transition:color .25s}
  .vgrid .vid.is-on .vt,.vgrid .vid.is-on .vs{color:var(--text)}
}

/* Spotify-afspiller i dialog */
.sdlg{width:min(560px,92vw)}
.sframe{height:352px;background:#000}
.sframe iframe{width:100%;height:100%;border:0;display:block;border-radius:12px}
@media (max-width:560px){.sframe{height:min(352px,70svh)}}
.sframe.trk{height:152px}
/* Karrierecoaching-logoet fylder mindre, så det passer med de andre billeder */
.rel.pr .frame img[src*="karrierecoaching"]{box-sizing:border-box;padding:13% 17%}
/* Om mig: uden sidespalte, teksten samlet midt på siden som resten af forsiden */
.about-grid .cv{grid-column:3/11}
.about-grid .cv p{max-width:64ch}
.about-grid .cv p:first-child{font-size:clamp(20px,1.9vw,28px);line-height:1.4;color:var(--text);max-width:none;margin-bottom:1.1em}
@media (max-width:820px){.about-grid .cv p:first-child{font-size:20px}}