/* ===========================================================================
   Anotera — designsystem

   Kølig klinisk. Tonen er instrument, ikke reklame: hårfine linjer, en
   mono-margin med etiketter, tabularsatte tal, én accent og ét signal.
   Der er ingen farveovergange, ingen skygger med kulør, ingen bevægelse
   uden grund. Autoriteten skal komme fra ordenen, ikke fra effekter.

   Farverne er valgt, ikke arvet: gråtonerne har et blåt anstrøg mod
   accenten, så de ser besluttede ud i stedet for tilfældige.
   ======================================================================== */

:root{
  --ground:#F1F4F6;      /* kølig papirbund */
  --flade:#FFFFFF;
  --sunk:#E6EBEF;
  --ink:#0E1721;         /* dyb blåsort */
  --mut:#4E5A66;
  --svag:#7E8B98;
  --linje:#D6DDE3;
  --acc:#17607C;         /* instrumentblå */
  --acc-blod:#E2ECF1;
  --sig:#B07A28;         /* ét signal, bruges sparsomt */
  --god:#2E7D68;
  --moerk-bund:#0E1721;
  --moerk-flade:#16222C;
  --moerk-ink:#E4EBF0;
  --moerk-mut:#9AAAB6;
  --moerk-linje:#25333E;
  --maks:74rem;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#0A1015; --flade:#121B22; --sunk:#0E161C;
  --ink:#E4EBF0; --mut:#95A5B1; --svag:#6E7E8B; --linje:#212D37;
  --acc:#63AECB; --acc-blod:#152530; --sig:#D5A257; --god:#6FBFA3;
  --moerk-bund:#060B0F; --moerk-flade:#0E161C; --moerk-ink:#E4EBF0;
  --moerk-mut:#95A5B1; --moerk-linje:#1C2831;
}}
:root[data-theme="dark"]{
  --ground:#0A1015; --flade:#121B22; --sunk:#0E161C;
  --ink:#E4EBF0; --mut:#95A5B1; --svag:#6E7E8B; --linje:#212D37;
  --acc:#63AECB; --acc-blod:#152530; --sig:#D5A257; --god:#6FBFA3;
  --moerk-bund:#060B0F; --moerk-flade:#0E161C; --moerk-ink:#E4EBF0;
  --moerk-mut:#95A5B1; --moerk-linje:#1C2831;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}}

body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16.5px/1.6 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
.baand{max-width:var(--maks);margin:0 auto;padding:0 clamp(20px,4vw,44px)}

a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
.spring{position:absolute;left:-9999px}
.spring:focus{left:12px;top:12px;z-index:9;background:var(--acc);color:#fff;
  padding:10px 16px;border-radius:6px;text-decoration:none}

/* ------------------------------------------------------------------ toppen */
.top{border-bottom:1px solid var(--linje);position:sticky;top:0;z-index:5;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(8px)}
.top .baand{display:flex;align-items:center;gap:24px;
  min-height:76px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--acc)}
/* 65 % stoerre end foerste udgave (22 → 36 px). Ordmaerket foelger med,
   ellers taber laasen sin balance. */
.logo .mk{width:36px;height:36px;flex:none}
.logo span{font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  font-size:17px;color:var(--ink)}
.top nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.top nav a{font-size:14.5px;text-decoration:none;color:var(--mut);
  padding:7px 11px;border-radius:7px}
.top nav a:hover{background:var(--sunk);color:var(--ink)}
.top nav a[aria-current]{color:var(--acc);background:var(--acc-blod)}

/* -------------------------------------------------------------------- hero */
.hero{padding:clamp(52px,9vw,116px) 0 clamp(38px,6vw,64px)}
.hero.smal{padding-bottom:clamp(28px,4vw,44px)}
.oej{font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--acc);margin:0 0 22px}
/* Græsk sættes ikke med versaler: ανώτερα ville blive til ΑΝΩΤΕΡΑ, og både
   betydningen og formen går tabt. Ordet får sin egen klasse. */
.oej .gr-ord{text-transform:none;letter-spacing:.02em;font-size:15px;
  font-family:"Source Serif 4",Georgia,serif;font-weight:400}
h1{font-weight:600;font-size:clamp(36px,6.2vw,68px);line-height:1.03;
  letter-spacing:-.028em;margin:0;text-wrap:balance;max-width:19ch}
.lede{font:400 clamp(18px,2.1vw,21px)/1.55 "Source Serif 4",Georgia,serif;
  color:var(--mut);max-width:56ch;margin:24px 0 0}
.knapper{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.kn{display:inline-block;text-decoration:none;font-weight:500;font-size:15px;
  padding:12px 20px;border-radius:8px;border:1px solid var(--linje);
  background:var(--flade);color:var(--ink)}
.kn:hover{border-color:var(--acc);color:var(--acc)}
.kn.p{background:var(--acc);border-color:var(--acc);color:var(--ground)}
.kn.p:hover{filter:brightness(1.12);color:var(--ground)}

/* -------------------------------------------------------------------- lagene
   Etiketten i marginen gør, at man kan skimme sidens struktur ned ad
   venstre kant uden at læse et ord. Det er hele pointen på et site om
   overblik — og det er derfor den er sat i mono og ikke i brødskriften. */
.lag{border-top:1px solid var(--linje)}
.lag .rk{display:grid;grid-template-columns:11rem 1fr;gap:clamp(20px,4vw,56px);
  padding:clamp(44px,6vw,84px) 0}
.mrk{font:500 11.5px/1.5 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--svag);
  margin:0;padding-top:.6rem;position:sticky;top:96px;align-self:start}
@media (max-width:820px){
  .lag .rk{grid-template-columns:1fr;gap:14px}
  .mrk{position:static;padding-top:0}
}
.lag.fremhaev{background:var(--flade)}
.lag.moerk{background:var(--moerk-bund);color:var(--moerk-ink);border-top-color:var(--moerk-linje)}
.lag.moerk .mrk{color:#7B8B99}
.lag.moerk .br,.lag.moerk .fin,.lag.moerk p{color:var(--moerk-mut)}
.lag.moerk h2,.lag.moerk h3{color:var(--moerk-ink)}
.lag.moerk .regler li{border-color:var(--moerk-linje)}
.lag.moerk .spm li{border-color:var(--moerk-linje)}
.lag.moerk code{background:#1B2833;color:#CFE0EA}

h2{font-weight:600;font-size:clamp(24px,3.2vw,34px);line-height:1.16;
  letter-spacing:-.02em;margin:0 0 20px;text-wrap:balance;max-width:24ch}
h3{font-weight:600;font-size:17.5px;line-height:1.3;margin:0;letter-spacing:-.008em}
.br{font:400 17.5px/1.68 "Source Serif 4",Georgia,serif;color:var(--mut);
  max-width:60ch;margin:0 0 18px}
.br strong{color:var(--ink);font-weight:600}
.br em{font-style:italic}
.fin{font-size:14px;line-height:1.62;color:var(--svag);max-width:62ch;margin:18px 0 0}
code{font:400 .92em/1 "IBM Plex Mono",ui-monospace,monospace;
  background:var(--sunk);padding:2px 5px;border-radius:4px}

.videre{display:inline-block;font-weight:500;font-size:14.5px;color:var(--acc);
  text-decoration:none;margin-top:4px}
.videre::after{content:" →"}
.videre:hover{text-decoration:underline}
.videre.stor{margin-top:26px;font-size:15.5px}

/* ------------------------------------------------------------------ triaden
   Σ / R / Φ. Nummereringen er ikke pynt — det ER strukturen, og den
   holder på tværs af sitet. */
.triade{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:1px;
  background:var(--linje);border:1px solid var(--linje);border-radius:10px;overflow:hidden}
@media(min-width:860px){.triade{grid-template-columns:repeat(3,1fr)}}
.triade li{background:var(--flade);padding:26px 24px 28px;display:flex;
  flex-direction:column;gap:9px}
.gr{font:400 30px/1 "Source Serif 4",Georgia,serif;color:var(--acc);
  display:block;margin-bottom:4px}
.triade p{margin:0;font-size:15.5px;line-height:1.6;color:var(--mut)}
.triade .videre{margin-top:auto;padding-top:12px}

/* ------------------------------------------------------------------- gitter */
.gitter{display:grid;gap:1px;background:var(--linje);border:1px solid var(--linje);
  border-radius:10px;overflow:hidden;margin:8px 0 0}
@media(min-width:720px){.gitter{grid-template-columns:1fr 1fr}}
.kt{background:var(--flade);padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.kt-top{display:flex;align-items:center;gap:12px;justify-content:space-between}
.kt p{margin:0;font-size:15.5px;line-height:1.62;color:var(--mut)}
.stat{font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;padding:5px 9px;border-radius:99px;
  border:1px solid var(--linje);color:var(--svag);flex:none}
.stat.d{color:var(--god);border-color:var(--god)}
.stat.b{color:var(--sig);border-color:var(--sig)}

/* ------------------------------------------------------------------- regler */
.regler{list-style:none;counter-reset:r;margin:26px 0 0;padding:0;
  display:flex;flex-direction:column;gap:0}
.regler li{counter-increment:r;padding:22px 0 22px 52px;position:relative;
  border-top:1px solid var(--linje)}
.regler li:last-child{border-bottom:1px solid var(--linje)}
.regler li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:24px;
  font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--acc);letter-spacing:.06em}
.regler p{margin:7px 0 0;font-size:15.5px;line-height:1.65;color:var(--mut);max-width:62ch}
.regler.stor p{font:400 16.5px/1.7 "Source Serif 4",Georgia,serif}

/* ---------------------------------------------------------- spørgsmål, fakta */
.spm{list-style:none;margin:24px 0 0;padding:0}
.spm li{padding:15px 0 15px 26px;border-top:1px solid var(--linje);position:relative;
  font:400 16.5px/1.6 "Source Serif 4",Georgia,serif;color:var(--moerk-mut);max-width:64ch}
.spm li:last-child{border-bottom:1px solid var(--linje)}
.spm li::before{content:"?";position:absolute;left:0;top:16px;color:var(--sig);
  font:500 14px/1 "IBM Plex Mono",monospace}
.fakta{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column}
.fakta li{padding:14px 0;border-top:1px solid var(--linje);font-size:15.5px;
  line-height:1.62;color:var(--mut);max-width:66ch;
  display:grid;grid-template-columns:8.5rem 1fr;gap:16px}
.fakta li:last-child{border-bottom:1px solid var(--linje)}
.fakta b{font:500 11.5px/1.7 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink)}
@media(max-width:600px){.fakta li{grid-template-columns:1fr;gap:4px}}

/* ------------------------------------------------------------------ diagram */
.dia{width:100%;height:auto;margin:26px 0 0;display:block;
  border:1px solid var(--linje);border-radius:10px;background:var(--flade)}
.dia text{font-family:Archivo,sans-serif}

.kontakt{margin-top:22px}

/* -------------------------------------------------------------------- bunden */
.bund{border-top:1px solid var(--linje);background:var(--flade);
  padding:clamp(38px,5vw,58px) 0 clamp(44px,6vw,64px);margin-top:0}
.bund .baand{display:grid;gap:32px}
@media(min-width:760px){.bund .baand{grid-template-columns:1.4fr 1fr 1.2fr}}
.fkol p{font-size:14.5px;line-height:1.62;color:var(--mut);margin:14px 0 0;max-width:40ch}
.fkol h4{font:500 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.13em;
  text-transform:uppercase;color:var(--svag);margin:0 0 14px}
.fkol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fkol a{font-size:14.5px;color:var(--mut);text-decoration:none}
.fkol a:hover{color:var(--acc)}
.fkol .fin{font-size:13px;margin-top:18px}

/* ------------------------------------------------------------ dendritfeltet
   Ligger bag overskriften, ikke ved siden af. Tegnes i canvas, så den kan
   følge temaet og skalere til enhver skærm uden et billede at hente. */
.hero{position:relative;overflow:hidden}
canvas.felt{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0}
.hero .baand{position:relative;z-index:1}