/* Cybernet Magazine – kun systemfonte, ingen eksterne ressourcer */
:root{--ink:#0b0b0d;--paper:#f4f3ee;--muted:#6b6b72;--line:#d9d7ce;--acc:#c8ff2e;--sans:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;--serif:Charter,"Iowan Old Style","Sitka Text",Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--acc);color:var(--ink);padding:8px 12px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* Topbjælke */
.topbar{background:var(--ink);color:#a9a9b2;font:500 12px/1 var(--mono);letter-spacing:.04em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:16px}
.topbar .live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-right:9px;box-shadow:0 0 0 3px rgba(200,255,46,.18);vertical-align:1px}
.topbar nav a{margin-left:20px}.topbar nav a:hover{color:var(--acc)}

/* Masthead */
.masthead{background:var(--ink);color:#fff;border-top:1px solid #1d1d22}
.masthead .wrap{display:flex;align-items:flex-end;justify-content:space-between;padding-top:26px;padding-bottom:24px;gap:24px}
.wordmark{font:900 clamp(42px,7.4vw,92px)/.82 var(--sans);letter-spacing:-.06em;text-transform:uppercase;margin:0}
.wordmark a{color:#fff}
.cursor{display:inline-block;width:.4em;height:.7em;background:var(--acc);margin-left:.07em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}html{scroll-behavior:auto}}
.tagline{font:500 12px/1.5 var(--mono);color:#8e8e98;text-align:right;max-width:260px;text-transform:uppercase;letter-spacing:.08em;margin:0}
.tagline b{color:var(--acc);font-weight:600}

/* Sektionsmenu */
.sections{position:sticky;top:0;z-index:20;background:rgba(244,243,238,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.sections ul{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scrollbar-width:none}
.sections ul::-webkit-scrollbar{display:none}
.sections a{display:flex;align-items:center;gap:8px;padding:15px 16px 13px;font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px;transition:background .15s,color .15s}
.sections a::before{content:"";width:8px;height:8px;background:var(--c,var(--ink))}
.sections a:hover{background:var(--ink);color:#fff}
.sections .on a{border-bottom-color:var(--c,var(--ink))}
.sections li:first-child a{padding-left:0}.sections li:first-child a:hover{padding-left:16px}

/* Fælles */
.kicker{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink)}
.kicker::before{content:"";width:10px;height:10px;background:var(--c,var(--ink))}
a.kicker:hover{text-decoration:underline;text-underline-offset:3px}
.meta{font:500 11.5px/1.4 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.07em;display:flex;flex-wrap:wrap;gap:4px 0}
.meta>*+*::before{content:"/";margin:0 10px;opacity:.5}
.dek{font:400 18px/1.5 var(--serif);color:#3a3a42;margin:0}
.title-link{background:linear-gradient(var(--c,var(--acc)),var(--c,var(--acc))) 0 100%/0 3px no-repeat;transition:background-size .3s}
.card:hover .title-link,.title-link:hover{background-size:100% 3px}

/* Covers */
.cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink);container-type:inline-size}
.cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .cover img{transform:scale(1.035)}
.cover--gen{background:radial-gradient(110% 90% at 88% 6%,var(--c,#8a8a94) 0%,transparent 58%),radial-gradient(90% 90% at 0% 100%,color-mix(in srgb,var(--c,#8a8a94) 40%,#000) 0%,transparent 62%),#0b0b0d}
.cover--gen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(160deg,#000 20%,transparent 75%);mask-image:linear-gradient(160deg,#000 20%,transparent 75%)}
.cover--gen::after{content:"";position:absolute;right:7%;top:16%;width:16%;aspect-ratio:1;border:2px solid rgba(255,255,255,.55);border-radius:50%;box-shadow:0 0 0 12cqw rgba(255,255,255,.035),0 0 0 24cqw rgba(255,255,255,.025)}
.cover .glyph{position:absolute;left:5%;bottom:-.12em;font:900 120px/1 var(--sans);font-size:44cqw;letter-spacing:-.07em;color:#fff;opacity:.94}
.cover .code,.cover .stamp{position:absolute;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.cover .code{top:14px;left:16px}.cover .stamp{right:16px;bottom:14px}
.card--side .cover .code,.card--side .cover .stamp,.card--side .cover--gen::after{display:none}

/* Kort */
.card{display:flex;flex-direction:column;gap:16px;min-width:0}
.card-body{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.card-title{font:800 22px/1.16 var(--sans);letter-spacing:-.025em;margin:0}
.card .dek{font-size:16px}

/* Forside: lead */
.lead{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:44px;padding-top:36px;padding-bottom:8px}
.card--lead .cover{aspect-ratio:16/9}
.card--lead .card-title{font-size:clamp(32px,4.3vw,58px);line-height:1.01;letter-spacing:-.045em}
.card--lead .dek{font-size:20px;max-width:680px}
.lead-side{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:32px}
.lead-side h2.label{margin:0 0 4px}
.card--side{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.card--side:last-child{border-bottom:0}
.card--side .cover{aspect-ratio:1}
.card--side .card-title{font-size:18px;line-height:1.22}
.label{font:800 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;margin:0}
.label::before{content:"// ";color:var(--muted)}

/* Sektionshoveder og grid */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:2px solid currentColor;padding-top:14px;margin:56px 0 28px}
.sec-head .more{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.sec-head .more:hover{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 32px}

/* Mørkt bånd */
.band{background:var(--ink);color:#fff;margin-top:72px;padding:6px 0 64px}
.band .sec-head{border-color:#fff}
.band .label::before{color:#6f6f78}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px}
.col h3{margin:0 0 10px}
.col h3 a{display:inline-flex;align-items:center;gap:10px;font:800 22px/1.1 var(--sans);letter-spacing:-.02em}
.col h3 a::before{content:"";width:12px;height:12px;background:var(--c)}
.col h3 a:hover{color:var(--c)}
.col ol{list-style:none;counter-reset:n;padding:0;margin:0}
.col li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;padding:13px 0;border-top:1px solid #26262c;font:700 16px/1.3 var(--sans)}
.col li::before{content:counter(n,decimal-leading-zero);font:600 11px/1.9 var(--mono);color:var(--c)}
.col li a:hover{color:var(--acc)}

/* Arkivliste */
.rows{list-style:none;margin:0;padding:0}
.rows li a{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.rows .kicker{font-size:10.5px}
.rows strong{font:800 20px/1.25 var(--sans);letter-spacing:-.02em}
.rows li a:hover strong{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c);text-underline-offset:4px}
.rows time{font:500 12px var(--mono);color:var(--muted);white-space:nowrap}

/* Artikel */
.post-head{max-width:920px;margin:0 auto;padding:52px 24px 30px}
.crumbs{display:flex;align-items:center;gap:10px;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.post-head h1{font:900 clamp(36px,5.6vw,68px)/1.01 var(--sans);letter-spacing:-.05em;margin:22px 0 20px;text-wrap:balance}
.post-head .dek{font-size:22px;margin-bottom:22px;max-width:760px}
.post-head .meta{border-top:1px solid var(--line);padding-top:14px}
.post-hero{max-width:1240px;margin:0 auto 52px;padding:0 24px}
.post-hero .cover{aspect-ratio:21/9}
.post-hero .cover .glyph{font-size:30cqw}
.prose{max-width:720px;margin:0 auto;padding:0 24px;font:400 19px/1.72 var(--serif);color:#1b1b20}
.prose>:first-child{margin-top:0}
.prose p{margin:0 0 24px}
.prose>p:first-of-type::first-letter{float:left;font:900 4.6em/.8 var(--sans);margin:.06em .09em 0 -.02em;color:var(--ink)}
.prose h2{font:800 30px/1.15 var(--sans);letter-spacing:-.03em;margin:52px 0 16px;color:var(--ink)}
.prose h3{font:800 22px/1.25 var(--sans);letter-spacing:-.015em;margin:36px 0 12px;color:var(--ink)}
.prose a{background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% .3em no-repeat;transition:background-size .2s}
.prose a:hover{background-size:100% 100%}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{padding-left:26px;margin:0 0 24px}
.prose li{margin-bottom:8px;padding-left:4px}
.prose li::marker{color:var(--c,var(--ink));font:700 .85em var(--mono)}
.prose blockquote{margin:36px 0;padding:2px 0 2px 26px;border-left:5px solid var(--c,var(--ink));font:800 25px/1.3 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.prose blockquote p{margin:0}
.prose code{font:.84em var(--mono);background:#e8e7df;padding:.12em .38em}
.prose pre{background:var(--ink);color:#e6e6e6;padding:18px 22px;overflow:auto;font:14px/1.65 var(--mono);margin:0 0 28px}
.prose pre code{background:none;padding:0;color:inherit}
.prose table{width:100%;border-collapse:collapse;font:15px/1.45 var(--sans);margin:8px 0 32px;display:block;overflow-x:auto}
.prose th{text-align:left;font:700 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid var(--ink);padding:10px 12px 10px 0;white-space:nowrap}
.prose td{border-bottom:1px solid var(--line);padding:11px 12px 11px 0;vertical-align:top}
.prose img{margin:32px 0}
.prose hr{border:0;border-top:2px solid var(--ink);margin:48px 0}
.prose iframe{max-width:100%}
.alignleft{float:left;margin:0 20px 10px 0}.alignright{float:right;margin:0 0 10px 20px}.aligncenter{margin-left:auto;margin-right:auto}
.tags{max-width:720px;margin:36px auto 0;padding:0 24px;display:flex;flex-wrap:wrap;gap:8px}
.tags a,.tags span{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--ink);padding:7px 10px}
.tags a:hover{background:var(--ink);color:var(--acc)}
.endmark{max-width:720px;margin:0 auto;padding:0 24px}
.endmark::after{content:"";display:inline-block;width:12px;height:12px;background:var(--c,var(--acc))}

/* Arkiv-side */
.arch-head{padding-top:52px;padding-bottom:8px}
.arch-head h1{font:900 clamp(44px,8vw,104px)/.9 var(--sans);letter-spacing:-.06em;margin:18px 0 18px}
.arch-head .dek{max-width:680px;margin-bottom:14px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;padding-top:18px;border-top:2px solid var(--ink);font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.pager a{padding:12px 16px;border:2px solid var(--ink)}
.pager a:hover{background:var(--ink);color:var(--acc)}

/* 404 */
.nf{padding:80px 24px 40px}
.nf .big{font:900 clamp(120px,26vw,320px)/.8 var(--sans);letter-spacing:-.08em;margin:0}
.nf .big span{color:transparent;-webkit-text-stroke:3px var(--ink)}

/* Footer */
.foot{background:var(--ink);color:#a9a9b2;margin-top:96px;padding:56px 0 28px;font-size:15px}
body.home .foot{margin-top:0;border-top:1px solid #26262c}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot .wordmark{font-size:52px}
.foot p{max-width:380px;margin:18px 0 0}
.foot h4{font:700 11px/1 var(--mono);text-transform:uppercase;color:#fff;letter-spacing:.16em;margin:6px 0 16px}
.foot ul{list-style:none;padding:0;margin:0}.foot li{margin:0 0 9px}
.foot a:hover{color:var(--acc)}
.foot-bottom{border-top:1px solid #26262c;margin-top:44px;padding-top:20px;font:500 12px/1.4 var(--mono);display:flex;justify-content:space-between;gap:16px;letter-spacing:.04em}

@media (max-width:980px){
  .lead{grid-template-columns:1fr;gap:20px}
  .lead-side{border-left:0;padding-left:0;border-top:2px solid var(--ink);padding-top:14px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1fr 1fr}.foot-grid>:first-child{grid-column:1/-1}
  .rows li a{grid-template-columns:minmax(0,1fr) auto}.rows .kicker{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .topbar nav,.tagline{display:none}
  .masthead .wrap{padding-top:20px;padding-bottom:18px}
  .grid{grid-template-columns:1fr;gap:36px}
  .card--side{grid-template-columns:88px minmax(0,1fr)}
  .card--lead .dek{font-size:18px}
  .post-head{padding:32px 16px 22px}.post-head .dek{font-size:19px}
  .post-hero{padding:0;margin-bottom:36px}.post-hero .cover{aspect-ratio:16/10}
  .prose,.tags,.endmark{padding:0 16px}.prose{font-size:18px}
  .prose h2{font-size:25px}
  .rows li a{grid-template-columns:1fr}.rows time{order:3}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column}
}