/* NAVIGATIONEN STÅR PÅ ÉN LINJE igen, siden News blev taget ud af
   * menuen 15. september 2026. Målt ved 390 px: Archive 83 px, Make your
   * own 108, Newsletter 83, plus to mellemrum à 22 = 318 af de 346, der er
   * plads til. Det to-spaltede gitter, der løste fire punkter, ville nu
   * lægge Newsletter alene på anden række — præcis det, det blev bygget for
   * at undgå.
   *
   * KOMMER ET FJERDE PUNKT TILBAGE, kommer gitteret med:
   *   .ac-header-row nav { display: grid; grid-template-columns: repeat(2, auto);
   *                        justify-content: start; gap: var(--space-2) var(--space-4); }
   * Fire punkter er 45 tegn og kan ikke stå på én linje ved 390 px, og
   * rettelsen er ikke mindre skrift — 11 px er gulvet. */
/* ArkhamCentral — designsystem
 *
 * Trukket ud af Claude Design-projektet "Adventure prototype with toggles"
 * (ArkhamCentral.dc.html), 12. september 2026. Prototypens egne knapper,
 * opdigtede tekster og faste data er IKKE med — kun systemet.
 *
 * Mørk tilstand er standard, jf. specifikationen. Lys tilstand har sine egne
 * værdier fra designet og er ikke en omvendt mørk.
 */

/* ---------- Skrifter ---------- */
/* Bodoni Moda: overskrifter. Newsreader: brødtekst. Space Mono: etiketter. */

/* ---------- Tokens ---------- */
:root {
  /* Mørk tilstand — standard */
  /* VARMERE SORT, 15. september 2026 (retning C). Det kolde #0B0D0C har et
   * grønligt anstrøg; sitets skrift er Bodoni og dets accent er sennep, og
   * begge dele hører til et varmt sort. Forskellen er lille med vilje —
   * fire trin på rødkanalen — og den kan mærkes uden at kunne ses. */
  --bg: #0D0C0A;
  --bg2: #15130F;
  --bg3: #1D1A14;
  --line: #2B2519;
  --text: #EAE4D7;
  --dim: #95907F;
  --on-accent: #0B0D0C;

  /* Accent. Den skal skifte med tilstanden: designets lyse accenter dumper
   * kontrastkravet på lys bund (sennep rammer 1,68 mod 4,5). Hvert par er
   * målt. Vil du skifte farve, så skift begge linjer i parret:
   *   sennep  #C9A227 / #6B550E   (8,06 mørk · 4,97 lys)   ← valgt
   *   orange  #E2542B / #9E2B12   (5,14 mørk · 5,19 lys)
   *   grøn    #7FA66A / #3E5A2E   (7,02 mørk · 5,38 lys)
   *   lilla   #8C6BD6 / #4B2E8C   (4,82 mørk · 7,04 lys)
   */
  --accent-dark: #C9A227;
  --accent-light: #6B550E;
  --accent: var(--accent-dark);

  /* Skrifter */
  --font-display: "Bodoni Moda", Didot, "Bodoni 72", serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-label: "Space Mono", Menlo, monospace;

  /* Typografiskala */
  --size-hero: clamp(38px, 7vw, 68px);
  --size-page: clamp(36px, 6.5vw, 62px);
  --size-section: clamp(32px, 5.5vw, 48px);
  --size-title: 24px;
  --size-title-sm: 24px;
  --size-lead: 23px;
  --size-body: 19px;
  --size-body-sm: 17px;
  --size-label: 12px;
  --size-label-sm: 11px;

  /* Afstande */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 22px;
  --space-5: 30px;
  --space-6: 48px;
  --pad-card: 28px 24px;
  --pad-row: 18px 20px;
  --pad-button: 13px 22px;
  --pad-badge: 5px 12px;
}

/* Lys tilstand: kun tokens skiftes, aldrig komponenter. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #D9D7CE;
    --bg2: #E6E4DB;
    --bg3: #CBC8BD;
    --line: #B0ACA0;
    --text: #141613;
    --dim: #4E5049;
    --on-accent: #F2F0E8;
    --accent: var(--accent-light);
  }
}
:root[data-theme="light"] {
  --bg: #D9D7CE;
  --bg2: #E6E4DB;
  --bg3: #CBC8BD;
  --line: #B0ACA0;
  --text: #141613;
  --dim: #4E5049;
  --on-accent: #F2F0E8;
  --accent: var(--accent-light);
}

/* ---------- Grundlag ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

/* Designet bruger skarpe hjørner overalt. Eneste runding er cirkler. */

/* ---------- Typografi ---------- */
.ac-hero { font-family: var(--font-display); font-size: var(--size-hero); font-weight: 800; line-height: 1.05; margin: 0; text-wrap: balance; }
.ac-page-title { font-family: var(--font-display); font-size: var(--size-page); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; }
.ac-section-title { font-family: var(--font-display); font-size: var(--size-section); font-weight: 800; line-height: 1.1; margin: 0; }
.ac-title { font-family: var(--font-display); font-size: var(--size-title); font-weight: 600; line-height: 1.1; margin: 0; }
.ac-title-sm { font-family: var(--font-display); font-size: var(--size-title-sm); font-weight: 600; line-height: 1.15; margin: 0; }
.ac-lead { font-size: var(--size-lead); line-height: 1.5; max-width: 44ch; }
/* overflow-wrap er ikke pynt. Målt 14. september 2026: 52 af de 1.088
 * kommentarer rummer en ubrydelig streng på over 45 tegn — næsten alle er
 * en URL, forfatteren har skrevet ind i sin tekst. Uden den her regel
 * skubber hver eneste af dem hele siden sidelæns på en telefon: målt på
 * against-the-wendigo blev dokumentet 420 px bredt på en 390 px skærm, og
 * hele siden gled under fingeren, fordi kommentar 330 linker til
 * printerstudio.com.
 *
 * "anywhere" og ikke "break-word": kun den første regner også den mindste
 * bredde med, så en flex- eller grid-forælder heller ikke kan blive gjort
 * for bred af et enkelt ord. */
.ac-prose { max-width: 62ch; line-height: 1.7; overflow-wrap: anywhere; }
.ac-prose p + p { margin-top: 1em; }

/* Brødtekstens billeder havde INGEN regel overhovedet, og det havde aldrig
 * vist sig: WordPress' miniaturer er 300 px brede og har altid passet.
 * heart-of-darkness-campaign linker til to billeder på 1024 px hos
 * wordpress.com, og målt 14. september 2026 gjorde de dokumentet 1044 px
 * bredt på en 390 px skærm. Fundet ved et tilfælde, mens kommentarformularen
 * blev bygget.
 *
 * height:auto hører med: uden den beholder billedet sin højde, når bredden
 * skrumper, og bliver trykket fladt. */
.ac-prose img { max-width: 100%; height: auto; }

/* En kodeblok må IKKE brydes midt i et token — det er hele grunden til, at
 * nogen satte den i kodeformat. Den ruller for sig selv i stedet for at
 * skubbe hele siden sidelæns.
 *
 * Der er én i dag: en kommentar på shadows-of-yog-sothoth-campaign med
 * FREETYPE_PROPERTIES=truetype:interpreter-version=40, som gjorde dokumentet
 * 635 px bredt på en 390 px skærm. */
.ac-prose pre { max-width: 100%; overflow-x: auto; }
.ac-dim { color: var(--dim); }

/* Etiketter: altid versaler, altid mono, aldrig under 11px. */
.ac-label { font-family: var(--font-label); font-size: var(--size-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.ac-label-accent { font-family: var(--font-label); font-size: var(--size-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ac-meta { font-family: var(--font-label); font-size: var(--size-label); color: var(--dim); font-variant-numeric: tabular-nums; }

/* Et navn, fremhævet i løbende metatekst: tekstfarve med en accent-streg
 * under. Prototypen bruger mønstret to steder — heroens og eventyrsidens
 * "By <navn>" — mens arkivrækkens og kommentarernes navne er accentfarvede
 * i stedet (.ac-row-author). Forskellen er prototypens egen. */
.ac-name { color: var(--text); border-bottom: 1px solid var(--accent); }

/* Heroens tal på én linje, i modsætning til eventyrsidens .ac-stats-blok. */
.ac-statline { font-family: var(--font-label); font-size: var(--size-label); letter-spacing: 0.06em; color: var(--dim); font-variant-numeric: tabular-nums; }
.ac-statline strong { color: var(--text); font-weight: 400; }

/* Tilbagelinket øverst på eventyrsiden. */
.ac-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-family: var(--font-label); font-size: var(--size-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.ac-link:hover { border-bottom: 1px solid var(--accent); }

/* Kommentarens navn er accentfarvet, resten af metalinjen dæmpet. */
.ac-comment-name { color: var(--accent); }

/* ---------- Ordmærket i sidehovedet ---------- */
/* To linjer, som prototypen: ARKHAM i display-snittet over CENTRAL i mono
 * med bred sperring i accentfarven. Ikke en h1 i heroens 68px — sitenavnet
 * er ikke sidens overskrift, det fremhævede eventyr er. */
/* Sidehovedets linje: ordmærke til venstre, navigation og "fan archive
 * since 2017" til højre — alt på én linje, som prototypen. */
/* GRUNDLINJEN, IKKE BUNDEN. Rækken flugtede på kassernes bund
 * (align-items: flex-end), og en <p> bærer en standardmargen forneden på
 * 1em — ved 11px skrift altså 11px. Målt i browseren 19. september 2026:
 * navigationens kasse lå 70-92,1px, notens 59-81,1px, begge 22,1px høje.
 * Teksten til højre stod derfor 11px for højt, og en sammenligning af
 * polstring og kanter kunne aldrig finde det.
 *
 * Med baseline flugter skriftens grundlinjer, uanset hvad kasserne gør, og
 * uanset om de to sider en dag får hver sin skriftstørrelse. Margenen
 * nulstilles alligevel, så den ikke sætter luft under rækken. */
.ac-header-row { display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap; }
.ac-header-row nav { display: flex; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-label); font-size: var(--size-label-sm); letter-spacing: 0.14em; text-transform: uppercase; }
/* SAMME PLADS FORNEDEN I HELE TOPLINJEN. Rækken er flex med
 * align-items: flex-end, så kasserne flugter i BUNDEN. Havde ét punkt en
 * kant og et andet ikke, ville teksten i det med kant stå 1px højere — og
 * teksten til højre, uden både padding og kant, stod 3-4px lavere end
 * navigationen. Derfor reserverer alle tre slags det samme: 3px og en 1px
 * kant, gennemsigtig hvor den ikke skal ses. Målt af Carsten på zoom
 * 19. september 2026; prøven er TestToplinjensToSiderReservererSammePladsForneden. */
.ac-nav-on { color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.ac-nav-off { color: var(--dim); opacity: 0.55; padding-bottom: 3px; }
.ac-header-row nav a, .ac-footer-side nav a { color: var(--dim); padding-bottom: 3px; }
.ac-header-row nav a:hover, .ac-footer-side nav a:hover { color: var(--accent); border-bottom: 1px solid var(--accent); }
.ac-header-note { font-family: var(--font-label); font-size: var(--size-label-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-block: 0; margin-inline-start: auto; }
/* Facebook-linket i toplinjen arver ALT af linjen omkring det: skrift,
 * størrelse og farve. Uden color: inherit ville det stå i sitets guld og
 * trække øjet til sig — det skal se ud som en del af sætningen, ikke som en
 * knap. Understregningen kommer først, når musen er der. */
.ac-header-note a { color: inherit; text-decoration: none; }
.ac-header-note a:hover, .ac-header-note a:focus-visible { text-decoration: underline; }
@media (max-width: 720px) { .ac-header-note { margin-left: 0; } }

.ac-wordmark { display: inline-block; text-align: left; line-height: 0.92; margin: 0; }
/* De to dele er BLOKKE, ikke inline. Prototypen har dem som to <div>, og
 * forskellen er ikke kosmetisk: med inline-indhold sætter forælderens egen
 * skriftstørrelse en usynlig bundlinje (strut) under hver linje, så
 * line-height: 0.92 herover ville give 70px i en h1 og 41px i et p — samme
 * klasse, to forskellige ordmærker. Som blokke regner hver del sin egen
 * linje ud af sin egen størrelse (24px + 10px), og ordmærket ser ens ud,
 * uanset hvilket element klassen sidder på. Ændret 13. september 2026 med
 * Carstens godkendelse, se design/system-notes.md. */
.ac-wordmark-name { display: block; font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; }
.ac-wordmark-sub { display: block; font-family: var(--font-label); font-size: var(--size-label-sm); letter-spacing: 0.44em; color: var(--accent); padding-left: 2px; }

/* ---------- "Also recently added": tre kort under heroen ---------- */
/* Hårlinjerne er gitterets 1px-mellemrum på linjefarven — samme greb som
 * .ac-hairline-grid, så de to sektioner tegner linjer på samme måde. */
.ac-kortgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ac-kort { display: block; background: var(--bg); padding: var(--space-4); }
.ac-kort:hover { background: var(--bg2); }
.ac-kort .ac-title { padding-block: var(--space-2) var(--space-1); }
.ac-kort .ac-row-shape { padding-block: var(--space-3) 0; }

/* ---------- Nyhedsstrømmen ---------- */
/* Én lodret liste med hårlinjer imellem, som prototypen. Bredden er
 * bevidst smallere end arkivet: strømmen er tekst, ikke en tabel. */
.ac-nyheder { max-width: 760px; border-top: 1px solid var(--line); }
.ac-nyhed { display: block; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.ac-nyhed:hover { background: var(--bg2); }
.ac-nyhed .ac-title-sm { padding-block: var(--space-2) var(--space-1); }
.ac-nyhed .ac-dim { max-width: 60ch; }
.ac-nyhed .ac-label-accent { padding-block: var(--space-2) 0; }

/* ---------- Sidefoden ---------- */
/* To spalter som prototypen: donationsblokken til venstre, nøgletal og
 * links til højre. Begge blokke udelader sig selv, når de er tomme — se
 * skabeloner/sidefod.html. */
.ac-footer { border-top: 1px solid var(--line); background: var(--bg2); margin-block-start: var(--space-6); }
/* ÉN SPALTE. Se skabelonen: foden har kun én slags indhold tilbage, og
 * bredden og margenen er sidens egne, så linjerne starter dér, hvor
 * "Recently added" og arkivet starter. */
.ac-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-6) var(--space-5); max-width: 1180px; margin: 0 auto; }
/* Tallene og deres etiketter på én linje: tallet stort, ordene små, og et
 * skilletegn imellem de to par. flex-wrap, så de brækker pænt på en
 * telefon i stedet for at skubbe siden sidelæns. */
.ac-footer-tal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; }
.ac-footer-skille { color: var(--dim); padding: 0 var(--space-2); }
.ac-footer-side nav { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.ac-footer-number { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.1; margin: 0; }
.ac-footer-fine { font-family: var(--font-label); font-size: var(--size-label-sm); color: var(--dim); padding-block: var(--space-2) 0; }
/* Mailadressen er sidefodens eneste selvstændige klikmål — de øvrige links
 * står midt i en sætning og er undtaget af samme grund, som de ikke kan
 * gøres større. Målt ved 390 px var den 155 x 16 px. */
.ac-footer-fine a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
  .ac-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .ac-footer-tal { gap: var(--space-1); }
}

/* ---------- Knapper ---------- */
.ac-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--pad-button);
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent);
  font-family: var(--font-label); font-size: var(--size-label);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ac-button:hover { color: var(--on-accent); filter: brightness(1.08); }

.ac-button-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--pad-button);
  background: none; color: var(--accent);
  border: 1px solid var(--line);
  font-family: var(--font-label); font-size: var(--size-label);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.ac-button-ghost:hover { border-color: var(--accent); }

.ac-badge {
  display: inline-block; padding: var(--pad-badge);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-label); font-size: var(--size-label-sm);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ac-badge-quiet { background: none; border: 1px solid var(--line); color: var(--dim); }

/* ---------- Flader ---------- */
.ac-card { background: var(--bg2); border: 1px solid var(--line); padding: var(--pad-card); }

/* ---------- Støtterne på forsiden ----------
 *
 * De tre navne skal kunne LÆSES på en armslængde — det er hele forskellen
 * på en kvittering og en fodnote.
 *
 * MEN IKKE MERE END DET. Første udgave satte dem i 30 px displayskrift i en
 * .ac-card med fuld polstring, og Carsten så det med det samme,
 * 15. september 2026: "Kassen og skriften fylder mere end dagens eventyr,
 * og det er forkert vægtet." Han har ret — en tak til tre mennesker må ikke
 * veje tungere end det, sitet handler om.
 *
 * Nu: 20 px, og kassen har mistet sin fyldte flade til fordel for en enkelt
 * streg foroven. Den kan stadig ses; den råber ikke.
 *
 * Skilletegnet er dæmpet og har sit eget element: står prikken i samme
 * farve som navnene, læses tre navne som ét langt. */
/* KASSE HELE VEJEN RUNDT, som de øvrige blokke — bare mindre.
 *
 * Første forsøg på at gøre blokken lettere fjernede kassen og lod en streg
 * foroven stå. Carsten, 15. september 2026: "Den hænger i luften mellem
 * dagens eventyr og Recently added." Han har ret — forsidens andre blokke
 * er kasser, og en blok uden kant hører ingen steder til.
 *
 * Vægten skal altså komme fra STØRRELSEN og ikke fra at fjerne rammen:
 * samme bundfarve og kant som .ac-card, men med mindre polstring og mindre
 * skrift. */
/* TO SPALTER, INGEN KASSE. Rammen om donorer og kommentarer blev for
 * tung, da blokken fik to linjer — den tog mere vægt end "Recently
 * added"-kortene under sig, som er selve indholdet. Carsten, 19. september
 * 2026: to lige brede spalter med luft imellem, donorer til venstre,
 * kommentarer til højre, og ingen ramme om det hele.
 *
 * Samme gitter som kortene: to spalter over 720px, stablet derunder. */
.ac-stoettere {
  /* 2/3 til donorerne, 1/3 til kommentarerne. Carsten, 19. september 2026:
   * kommentarkassen var for bred til sit indhold, når hver kommentar står
   * på sin egen linje. */
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5);
  align-items: stretch;
}
/* TO KASSER, IKKE ÉN. Rammen om begge dele blev for tung, og helt uden
 * ramme forsvandt de i siden. Hver blok får nu den kasse, den ene havde —
 * samme ramme og baggrund som "Recently added"-kortene nedenunder. */
.ac-stoettere > div {
  background: var(--bg2);
  border: 1px solid var(--line);
  padding: var(--space-4);
}
@media (max-width: 720px) { .ac-stoettere { grid-template-columns: 1fr; gap: var(--space-4); } }
/* Donorkassen: navnene til venstre, knappen til højre og lodret centreret.
 * flex-wrap, så knappen falder ned under navnene på en smal skærm frem for
 * at klemme dem sammen. */
.ac-stoettere-donorer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.ac-stoettere-navne {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  line-height: 1.3; margin: 0; padding-block: var(--space-2) 0;
  text-wrap: balance;
}
.ac-stoettere-skille { color: var(--dim); padding: 0 var(--space-2); }
/* "Latest comments": navnet står i sidens egen farve, og kun titlen — det,
 * der kan klikkes på — er guld. Sitets <a> arver som standard farven fra
 * det omkringliggende, så guldet skal siges her. */
/* Kommentarlinjerne: samme skrift og vægt som donornavnene, men én pr.
 * linje. Uden det brød en linje midt i "navn on titel". */
.ac-stoettere-kommentar {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  line-height: 1.3; margin: 0; padding-block: var(--space-2) 0;
}
.ac-stoettere-kommentarer a { color: var(--accent); }
.ac-stoettere-kommentarer a:hover, .ac-stoettere-kommentarer a:focus-visible { text-decoration: underline; }

/* Støttekassen på eventyrsiden: placering B, udgave 2.
 *
 * Valgt af Carsten 15. september 2026 efter at have set begge udgaver ved
 * 900 og 390 px. Udgave 1 var den samme sætning som dæmpet brødtekst med
 * ordet "donate" som et link inde i linjen — og den forsvandt:
 *
 *   "'donate' som et ord midt i en sætning ser ud som en fodnote, ikke som
 *    et tilbud. På mobil er forskellen større: udgave 1 flyder sammen med
 *    det omkringliggende, udgave 2 står for sig."
 *
 * Kanten og den egen flade gør blokken til noget, øjet standser ved.
 * Knappen er GHOST og bliver det: en fyldt knap ville have samme vægt som
 * downloadknappen øverst, og det er den, folk kom efter. Prøven
 * TestStoettekassenStaarMellemFilerOgKommentarer holder begge dele fast. */
.ac-stoettekasse {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-4);
  background: var(--bg2); border: 1px solid var(--line);
  padding: var(--pad-card);
  margin-block: var(--space-4);
}
.ac-stoettekasse p { margin: 0; max-width: 46ch; color: var(--text); }

/* ---------- Meddelelsen på forsiden ----------
 *
 * Den skal kunne ses uden at ligne en fejl. Accentfarvet venstrekant frem
 * for en hel ramme: kassen er sitets eget ord til læseren, ikke et banner
 * fra et andet system. Den står ØVERST på forsiden, så den ikke bliver en
 * fodnote under dagens eventyr. */
.ac-meddelelse {
  border-left: 3px solid var(--accent);
  background: var(--bg2);
  padding: var(--pad-card);
  margin-block: var(--space-4) var(--space-6);
}
.ac-meddelelse .ac-prose { max-width: 70ch; padding-block: var(--space-2) 0; }
.ac-meddelelse .ac-prose p + p { margin-top: 0.8em; }

/* Meddelelsen i nyhedsstrømmen: samme accentkant som forsidens, så den kan
 * genkendes som det samme. Den er et kort uden link — der er ingen side at
 * føre hen til. */
.ac-nyhed-meddelelse { border-left: 3px solid var(--accent); }
.ac-nyhed-meddelelse .ac-prose { max-width: 70ch; }
.ac-panel { background: var(--bg2); border-top: 1px solid var(--line); }

/* Hårfine skillelinjer: 1px gap på en linjefarvet flade. */
.ac-hairline-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ac-hairline-grid > * { background: var(--bg); }

/* ---------- Arkivrækken ---------- */
/* Coverkolonnen kom tilbage 13. september 2026, da coverne blev valgt. Den
 * blev fjernet 12. september, fordi der ikke fandtes nogen — se
 * design/system-notes.md. */
.ac-row {
  display: grid; grid-template-columns: 26px 132px minmax(0, 1fr) minmax(0, 200px);
  gap: var(--space-3); align-items: center;
  padding: var(--pad-row); border-bottom: 1px solid var(--line);
}
.ac-row:hover { background: var(--bg2); }
.ac-row-rank { font-family: var(--font-label); font-size: var(--size-label-sm); line-height: 1.6; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Rækkens forfatter er ACCENT, ikke dæmpet — prototypen fremhæver netop
 * navnet, både her og i kommentarernes metalinje. Etiketten under den er
 * dæmpet og bærer formen: "Campaign · 3 parts · added 22 May 2026". */
.ac-row-author { font-family: var(--font-label); font-size: var(--size-label-sm); letter-spacing: 0.06em; color: var(--accent); }
.ac-row-shape { font-family: var(--font-label); font-size: var(--size-label-sm); letter-spacing: 0.04em; color: var(--dim); }
.ac-row-numbers { text-align: right; font-family: var(--font-label); font-size: var(--size-label); color: var(--dim); font-variant-numeric: tabular-nums; }
.ac-row-numbers strong { font-size: var(--size-body-sm); color: var(--text); font-weight: 400; }

/* Coverbillede: fanskabt, altid i samme forhold, aldrig beskåret skævt. */
/* Coveret er LANDSKAB 4:3, ikke portræt 3:4. Ændret 13. september 2026 efter
 * Carstens beslutning; tredje ændring i system.css siden designet blev låst.
 * Begrundelsen med tal står i design/system-notes.md.
 *
 * object-fit: cover beskærer og strækker ALDRIG — forholdet holdes, og det
 * overskydende klippes af. At den heller ikke OPSKALERER skyldes ikke denne
 * regel: det gør et loft på kassens bredde, sat pr. billede ud fra dets egne
 * pixelmål. Se cover.MaksBredde og kommentaren ved cover_width i skemaet.
 *
 * object-position er midten som standard og sættes pr. eventyr, hvor motivet
 * sidder et andet sted. Den står her frem for i hver skabelon, så de tre
 * visningssteder ikke kan komme til at beskære forskelligt. */
.ac-cover {
  aspect-ratio: 4 / 3;
  background: var(--bg3);
  border: 1px solid var(--line);
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  /* height: auto er IKKE overflødig. <img> bærer width- og
   * height-attributter, så browseren kan afsætte pladsen før billedet er
   * hentet — og de virker som en formateringsantydning, der sætter en fast
   * højde. Uden height: auto vandt attributten over aspect-ratio, og
   * heroens 1256×712-billede blev tegnet 344 px bredt og 712 px højt:
   * en høj portrætbeskæring af et landskabsbillede. Målt 13. september 2026. */
  height: auto;
  display: block;
}

/* Kassen om coveret bærer loftet. Uden den ville max-width sidde på <img>
 * selv, og så ville aspect-ratio regne ud fra den beskårne bredde i stedet
 * for den plads, rækken har afsat. */
.ac-cover-boks { width: 100%; }

/* Et billede, der IKKE er et cover: vejledningens skærmbillede af Strange
 * Eons. Det er 150 × 89 px, og det skal vises som det er — ingen 4:3-kasse,
 * der skærer siderne af, og intet loft, der strækker det op. Reglen er
 * .ac-prose img's, men billedet står uden for prosaen. */
.ac-billede { max-width: 100%; height: auto; display: block; }

/* ---------- Talrækken på eventyrsiden ---------- */
.ac-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ac-stat-value { font-family: var(--font-label); font-size: 18px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ac-stat-label { font-family: var(--font-label); font-size: var(--size-label-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

/* ---------- Filrækken ---------- */
.ac-file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--pad-row); border: 1px solid var(--line); }
.ac-file + .ac-file { border-top: none; }
.ac-file-index { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--accent); }
.ac-file-lang { font-family: var(--font-label); font-size: var(--size-label); font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }

/* ---------- Formularer ---------- */
.ac-input, .ac-textarea {
  width: 100%; min-height: 48px; padding: 13px 14px;
  background: var(--bg2); border: 1px solid var(--line); color: var(--text);
  font-family: var(--font-body); font-size: var(--size-body-sm);
}
.ac-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.ac-input::placeholder, .ac-textarea::placeholder { color: var(--dim); }

/* ---------- Gitre ---------- */
.ac-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }
.ac-grid-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }

/* ---------- Sidebredde ---------- */
.ac-wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--space-4); }

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .ac-grid-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  /* SAMME FEJL, ANDEN GANG — og denne gang målt, ikke gættet.
   *
   * display:none tager .ac-row-rank HELT ud af gitteret. Så rykker alle
   * søskende én kolonne til venstre, og coveret havnede i den 26px-kolonne,
   * placeringstallet skulle have haft. Målt 14. september 2026 ved 390 px:
   *
   *     coveret            26 x 20 px   (skulle være ~92 bredt)
   *     titelblokken       92 px bred, 329 px høj  — teksten klemt
   *     tallene            304 px, altså hele bredden
   *
   * Rettelsen er at lade være med at have en kolonne til noget, der ikke
   * står der: to kolonner, ikke tre. Det blev rettet én gang 13. september
   * og kom tilbage, da kolonnetallet ændrede sig — derfor står tallene her,
   * så den næste kan se, hvad der er galt, uden at måle igen.
   *
   * .ac-row-numbers sættes stadig eksplicit til 1 / -1: den skal under, i
   * hele bredden, og ikke ved siden af titlen.
   *
   * RØRER DU DETTE GITTER: kør `go run ./cmd/mobiltjek` bagefter. Det er
   * bygget efter netop denne fejl, og det fanger den. En kommentar gjorde
   * det ikke — den her stod her i forvejen, og fejlen kom alligevel. */
  .ac-row {
    grid-template-columns: 104px minmax(0, 1fr);
    row-gap: var(--space-2);
    /* align-items: center er rigtigt på en bred skærm, hvor rækken er lav.
     * På en telefon bryder titlen over to linjer og teaseren over tre, og
     * så svævede coveret midt i en 300 px høj række med et hul over sig.
     * Det skal stå i toppen, ved siden af det, det hører til. */
    align-items: start;
  }
  .ac-row-rank { display: none; }
  .ac-row-numbers { grid-column: 1 / -1; text-align: left; }
  .ac-stats { gap: var(--space-4); }
  /* Menupunkter skal kunne rammes med en finger.
   *
   * .ac-nav-on og .ac-nav-off STÅR MED, og det er ikke pynt. De to er
   * <span> — den aktuelle sektion og det endnu ikke byggede Newsletter —
   * og uden dem ramte reglen kun <a>. Resultatet var to slags punkter i
   * den samme række: linkene blev 44 px høje flexkasser med teksten
   * CENTRERET, mens de to spans blev blokke med teksten i TOPPEN.
   *
   * Målt ved 390 px, 15. september 2026, på tekstens egen boks:
   *
   *     Archive (span)        top 199
   *     News (a)              top 210   ← 11 px lavere
   *     Make your own (a)     top 264
   *     Newsletter (span)     top 253   ← 11 px højere
   *
   * Carsten så det på en rigtig telefon og gættede på understregningen.
   * Det var den ikke: rækkerne stod på samme y hele tiden — det var
   * teksten inde i kasserne, der ikke gjorde. */
  nav a, nav button, nav .ac-nav-on, nav .ac-nav-off {
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* Ordmærket er vejen hjem og blev målt til 127 x 34 px. Polstringen
   * ovenunder gør det 44 højt uden at flytte skriften: line-height: 0.92 på
   * de to linjer er prototypens, og den skal blive. */
  .ac-wordmark a { display: inline-block; padding-block: 5px; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Arkivets sorteringsvælger — tre links, ingen JavaScript.
 *
 * Den står mellem "Recently added" og listen, hvor øjet alligevel skal
 * forbi, og den låner .ac-label's form, så den ikke ligner en knaprække
 * fra et andet site. Det valgte punkt bærer accenten; de andre er dæmpede
 * og ligner det, de er: veje hen til det samme indhold i en anden orden. */
.ac-sortering {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  padding-block: 0 var(--space-3);
  font-family: var(--font-label); font-size: var(--size-label-sm);
  letter-spacing: .14em; text-transform: uppercase;
}
/* FYLDT MOD KANTET, ikke farve mod farve. Forskellen var indtil
 * 14. september 2026 én farve på en 11px-etiket, og Carsten kunne ikke se,
 * hvad der var valgt — prototypens skærmbillede har den valgte som en fyldt
 * knap og de øvrige som kantede. 44 px høje, fordi cmd/mobiltjek måler
 * klikmål ved 390 px, og fordi en knaprække er dér, en finger skal ramme. */
.ac-sortering a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--space-3);
  color: var(--dim); text-decoration: none;
  border: 1px solid var(--line);
}
.ac-sortering a:hover { color: var(--text); border-color: var(--accent); }
.ac-sortering a.ac-sort-aktiv {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.ac-sortering a.ac-sort-aktiv:hover { color: var(--on-accent); }

/* Hovedet over et forfatterfiltreret arkiv. Det skal kunne ses, at listen
 * ikke er hele arkivet — og vejen ud skal stå ved siden af. */
.ac-forfatterhoved {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-4) var(--space-3);
  border-top: 1px solid var(--line);
}
.ac-forfatterhoved p { margin: 0; }

/* ---------- Stemmestjernerne ----------
 *
 * Fem submit-knapper i én formular. INGEN JavaScript — sitet har ingen, og
 * en stemmeknap skal ikke være grunden til at få dem.
 *
 * KNAPPERNE STÅR BAGLÆNS I HTML'EN (5,4,3,2,1) og vendes om her med
 * row-reverse. Det er ikke en finurlighed, det er hele trikket: CSS kan kun
 * vælge søskende, der kommer EFTER et element (~), så "fyld alle til venstre
 * for den, musen er på" kun kan skrives som "fyld alle EFTER den i
 * dokumentet". Vender man rækkefølgen tilbage visuelt, peger de to samme vej.
 *
 * PÅ EN TELEFON er der ingen mus, og :hover findes ikke. Derfor bærer den
 * VALGTE tilstand hele feedbacken dér: efter et tryk står stjernerne fyldt,
 * og kvitteringen står under dem. Forhåndsvisningen er en tilgift for den,
 * der har en mus — ikke det, der får siden til at give mening. */

.ac-stjerner { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }

.ac-stjerner button {
  min-width: 44px; min-height: 44px;   /* 44 px er den mindste, en finger rammer */
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; cursor: pointer;
  color: var(--line);                   /* ustemt stjerne */
  transition: color 80ms linear;
}

/* STJERNEN ER TEGNET, IKKE SAT.
 *
 * ★ (U+2605) findes ikke i nogen af de otte fonte, sitet selv leverer — målt
 * med fontTools: hverken Bodoni Moda, Newsreader eller Space Mono har tegnet,
 * og ingen unicode-range i fonts.css dækker det. Et ★ ville altså blive hentet
 * fra styresystemet og se forskelligt ud på Windows, macOS og Android — og på
 * nogle platforme som en farvet emoji midt i en mustard-og-hårstreg-side.
 *
 * En form klippet ud af en flade er vores egen, ens alle steder, og arver
 * stadig color, så alle reglerne herover virker uændret. */
.ac-stjerner button > span {
  width: 24px; height: 24px;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* FIRE LAG, DER HVER VEJER MERE END DET FØR SIG.
 *
 * Rækkefølgen er ikke til pynt. Hvert lag skal kunne slå det forrige, og
 * vægtene er skrevet på, fordi det var præcis dét, der gik galt sidst: en
 * nulstilling på (0,3,1) slog ikke bare den valgte stemme, den slog også
 * opfyldningen på (0,2,2). Havde man givet 5, stod .ac-stjerne-valgt FØRST i
 * DOM'en, så "~ button" var alle fire andre — og de blev tvunget grå, uanset
 * hvor musen stod. Kun femte stjerne var tændt.
 *
 *   1  grå                                                        (0,1,1)
 *   2  min stemme og alt til venstre for den                      (0,2,0)/(0,2,1)
 *   3  nulstil — KUN når musen er på en knap                      (0,2,2)
 *   4  fyld op til den, musen er på                               (0,3,2)/(0,3,3)
 *
 * Strengt voksende hele vejen. Ingen uafgjorte, som kildeordenen så skal
 * afgøre i det stille.
 *
 * :has() er det, der gør lag 3 til "musen er på en KNAP" frem for "musen er
 * et sted i rækken". Der er 2 px sømme mellem knapperne og en bar strimmel
 * til højre i containeren; med den gamle regel slukkede hele rækken, så snart
 * musen ramte en af dem. Nu sker der ingenting, og min egen stemme bliver
 * stående.
 *
 * Kan en browser ikke :has(), falder lag 3 og 4 helt bort som ugyldige. Så er
 * der ingen forhåndsvisning — men den valgte stemme står stadig rigtigt. Det
 * er den rigtige vej at fejle. */

/* 2. VALGT: stjernen og alle til venstre for den. ~ rammer dem, der står
 * efter i dokumentet, altså til venstre efter row-reverse. */
.ac-stjerner .ac-stjerne-valgt,
.ac-stjerner .ac-stjerne-valgt ~ button { color: var(--accent); }

/* 3. + 4. MUSEN. Nulstil, og fyld så op fra den, musen er på. */
.ac-stjerner:has(button:hover) button { color: var(--line); }
.ac-stjerner:has(button:hover) button:hover,
.ac-stjerner:has(button:hover) button:hover ~ button { color: var(--accent); }

/* Tastaturet skal kunne det samme som musen, og står sidst, så det vinder,
 * hvis begge dele skulle være i spil. */
.ac-stjerner button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-stjerner:has(button:focus-visible) button { color: var(--line); }
.ac-stjerner:has(button:focus-visible) button:focus-visible,
.ac-stjerner:has(button:focus-visible) button:focus-visible ~ button { color: var(--accent); }

/* PÅ EN TELEFON FINDES :hover IKKE. Lag 3 og 4 bliver aldrig sande, og lag 2
 * står alene — den valgte stemme er tændt hele tiden. Det er med vilje den
 * tilstand, der bærer hele tilbagemeldingen; forhåndsvisningen er en
 * tilføjelse for den, der har en mus. */

/* HOPPET EFTER EN STEMME.
 *
 * 303-svaret sender til #readers. Uden en margen landede sektionen klods op
 * ad skærmkanten, og så lignede det en anden side frem for den samme side,
 * rykket. 120 px er målt frem, ikke valgt: ved 80 px skæres forfatterens egen
 * bedømmelsesrække over på midten, ved 120 px står hele rækken med sin
 * hårstreg fri ovenover. Så kan man se, hvor man er landet.
 *
 * scroll-margin virker også, når man selv klikker på et #readers-link, og den
 * koster ingenting, når siden ikke er hoppet nogen steder hen. */
#readers { scroll-margin-block-start: 120px; }

/* Sorteringslinjen får SAMME afstand som stemmeblokken, så de to hop føles
 * ens. Uden den lander man klods op ad skærmkanten og kan ikke se, hvad man
 * lige har valgt — knappen skal stå fri med sin linje over sig. */
#sortering { scroll-margin-block-start: 120px; }

/* NØGLETALSLINJEN under sidehovedet. Ét hårfint bånd, sat i mono som resten
 * af etiketterne — tallene skal læses, ikke råbes. Den står på alle
 * sidetyper, og derfor må den ikke fylde mere end sin ene linje.
 *
 * flex-wrap er ikke pynt: på 360 px bryder linjen i to, og prikkerne skal så
 * ikke stå alene i starten af den nye linje. Derfor er hvert tal og sin
 * etiket ét <span>, der ikke kan brydes indeni. */
.ac-noegletal {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--line);
  font-family: var(--font-label);
  font-size: var(--size-label); letter-spacing: 0.08em;
  color: var(--text);
}
.ac-noegletal > span { white-space: nowrap; }

/* Skilletegnet hører til sit punkt, ikke til rækken. Som eget element kunne
 * det blive hængende alene sidst på en linje, når linjen brød. */
.ac-noegletal > span:not(:last-child)::after {
  content: "·"; color: var(--line); padding-inline-start: var(--space-2);
}
/* Og bryder linjen alligevel — målt: den gør den under ca. 540 px — så er
 * prikkerne i vejen. Uden dem læses de tre som en liste og ikke som en
 * sætning, der er gået i stykker. */
@media (max-width: 560px) {
  .ac-noegletal > span:not(:last-child)::after { content: none; }
  .ac-noegletal { gap: 2px var(--space-3); }
}

/* Ordene er dæmpede, tallene ikke. Det er tallene, der er argumentet. */
.ac-noegletal-ord { color: var(--dim); text-transform: uppercase; }

/* Knappen og donorerne ved siden af hinanden — navnene er kvitteringen for
 * knappen. Under 520 px lægger de sig under hinanden af sig selv. */
.ac-stoette {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--space-4) var(--space-5);
  padding-block: var(--space-2) 0;
}

.ac-stemmeform { margin: 0; }

/* ---------- Kommentarformularen ---------- */

/* Hoppet til formularen, når man trykker Reply. Samme grund og samme tal som
 * #readers: uden margen lander overskriften klods op ad skærmkanten. */
#skriv, #comments { scroll-margin-block-start: 120px; }

.ac-kommentarform {
  display: block;
  max-width: 62ch;
  padding-block: var(--space-6) 0;
  margin-block-start: var(--space-5);
  border-block-start: 1px solid var(--line);
}
.ac-kommentarform .ac-label { display: block; padding-block: var(--space-4) var(--space-1); }

.ac-kommentarform input[type="text"],
.ac-kommentarform textarea {
  width: 100%; box-sizing: border-box;
  background: transparent; color: var(--text);
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-family: var(--font-body); font-size: var(--size-body-sm);
  line-height: 1.5;
}
.ac-kommentarform textarea { resize: vertical; min-height: 8em; }
.ac-kommentarform input[type="text"]:focus-visible,
.ac-kommentarform textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
/* Feltet, beskeden peger på. aria-invalid bærer BÅDE tilstanden for en
 * skærmlæser og markeringen for øjet — ét attribut, ikke en klasse ved siden
 * af, der kan komme til at sige noget andet. */
.ac-kommentarform [aria-invalid="true"] { border-color: var(--accent); }

.ac-kommentarform button { margin-block-start: var(--space-4); }
.ac-formnote { padding-block: var(--space-3) 0; font-size: var(--size-label-sm); }

/* Fejlbeskeden over formularen. Samme accent-venstrekant som kvitteringen —
 * de to er det samme slags svar, med hver sit udfald. */
.ac-formfejl {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: var(--font-body); font-size: var(--size-body-sm);
}
.ac-svarer { padding-block: var(--space-3) 0; font-size: var(--size-body-sm); }

/* Svarlinket er et KLIKMÅL, ikke et ord i en sætning. Målt ved 390 px var
 * det 41 x 16 px; en finger rammer ikke 16 px. Polstringen gør det 44 px
 * højt uden at gøre skriften større — og den negative venstremargen holder
 * ordet på linje med teksten ovenover, så kommentaren ikke ser forskudt ud. */
.ac-svarlink {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 10px; margin-inline-start: -10px;
  font-family: var(--font-label); font-size: var(--size-label-sm);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
}
.ac-svarlink:hover, .ac-svarlink:focus-visible { color: var(--accent); }

/* Kommentaren, man lige er landet på efter at have skrevet den. :target
 * gælder kun det id, adressen peger på — ingen JavaScript, ingen klasse,
 * serveren skal huske at sætte. Den falmer ikke væk igen: en markering, der
 * forsvinder, mens man kigger, er en markering, man kan nå at misse. */
.ac-kommentar:target {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: var(--space-3);
  margin-inline-start: 0;
}

/* HONNINGKRUKKEN skjules med CSS og ikke med JavaScript — sitet har ingen.
 *
 * display:none ville være det oplagte, og det er netop derfor det ikke
 * bruges: en bot, der læser stilarket, springer et display:none-felt over.
 * Feltet er et rigtigt felt, klippet ned til ingenting.
 *
 * IKKE left:-9999px. Det var første udgave, og den gav vandret rullen på en
 * telefon — målt 14. september 2026: scrollWidth 420 px på en 390 px skærm,
 * med .ac-honning som det eneste, der stak ud. Et spamværn, der får siden
 * til at glide sidelæns under fingeren, er en dårlig handel.
 *
 * clip-path + 1×1 px + margin:-1px er det samme mønster som et almindeligt
 * "visually hidden": ingen negative koordinater, ingen ny rullebredde. */
.ac-honning {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Kvitteringen. Den stod som en dæmpet 11px-etiket og lignede ikke et svar
 * på noget — man landede på den via #readers uden at se, at det virkede. */
.ac-kvittering {
  display: flex; flex-direction: column; gap: 2px;
  padding-block: var(--space-2) 0;
  border-left: 2px solid var(--accent); padding-left: var(--space-3);
}
.ac-kvittering strong { color: var(--accent); font-weight: 400; }
.ac-kvittering span {
  font-family: var(--font-label); font-size: var(--size-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}

/* ================================================================
 * RETNING C — TYPOGRAFI, TEKSTUR OG FARVE
 * Godkendt af Carsten 15. september 2026. Ingen billeder tilføjet:
 * varmen kommer fra paletten ovenfor, kornet og satsen herunder.
 * ================================================================ */

/* PAPIRKORNET. En SVG-turbulens, skrevet ind i stilarket som en data-URI:
 * under 1 kB, intet hentes, og den kan ikke fejle. 3,5 % synlig — den skal
 * kunne mærkes uden at kunne ses.
 *
 * background-attachment: fixed, så kornet ikke ruller med indholdet og
 * dermed ikke ligner en tekstur, der er lagt oven på noget. */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* DOBBELTLINJEN under sidehovedet. 1920'ernes bogsats brugte den til at
 * skille titelbladet fra teksten, og det er præcis, hvad hovedet gør. */
.ac-header-row { border-bottom: 3px double var(--line); padding-bottom: var(--space-3); }

/* ORNAMENTET sidder KUN på sektionshoveder — .ac-sektion, sat i hånden på
 * de tre steder, der har et: meddelelsen, støtterne og "Recently added".
 *
 * Første prototype satte det på .ac-label i det hele. Det ramte også
 * kortenes datoer og AVG/VOTES/DOWNLOADS i hver eneste arkivrække og
 * lignede snavs frem for sats. Et ornament, der sættes ét sted, rammer ti —
 * derfor en klasse, ikke et mønster. TestOrnamentetSidderKunPaa
 * Sektionshoveder holder den brede regel ude for altid. */
.ac-sektion::before { content: "❧ "; color: var(--accent); font-family: var(--font-display); }

/* HEROENS TITEL får en kort accentstreg under sig — bogens kapitellinje. */
.ac-hero::after {
  content: ""; display: block; width: 84px; height: 2px;
  background: var(--accent); margin-top: var(--space-3); opacity: .8;
}

/* ================================================================
 * RETNING A — BANNERET (kun forsiden)
 * ================================================================ */

/* FAST HØJDE, både her og på telefonen. Uden den fylder kassen ingenting,
 * før billedet er hentet, og hele siden hopper 260 px, i det øjeblik det
 * lander. Billedet bærer desuden sine egne width/height i HTML'en.
 *
 * Carstens betingelse, 15. september 2026: "så intet hopper mens billedet
 * loader." */
.ac-banner { position: relative; width: 100%; height: 260px; overflow: hidden; }
.ac-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }

/* GRADIENTEN er ikke pynt. Uden den støder kunsten direkte op mod sidens
 * sorte med en kant, og så ligner det to sites oven på hinanden — præcis
 * det, retningen skulle undgå. Med den bliver banneret TIL baggrunden.
 * Den gør samtidig ordmærket læsbart på den lyse himmel. */
.ac-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(13,12,10,.18) 0%, rgba(13,12,10,.58) 55%, var(--bg) 100%);
}
.ac-banner-ord {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; margin: 0;
  max-width: 1180px; margin-inline: auto; padding-inline: var(--space-4);
}
.ac-banner-navn {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 46px; letter-spacing: -0.01em; color: var(--text); line-height: 1;
}
.ac-banner-sub {
  display: block; font-family: var(--font-label); font-size: 12px;
  letter-spacing: 0.42em; color: var(--accent); padding-top: 6px;
}
/* KUN ORDMÆRKET ER KLIKBART, ikke hele banneret. inline-block lægger
 * klikmålet om de to linjer og ikke ud over bannerets fulde bredde —
 * <p>'en er position: absolute med left/right: 0, så display: block ville
 * gøre hele den nederste stribe klikbar.
 *
 * min-height: 44px er WCAG 2.5.5. Ordmærket er 47 px højt ved 390 px af
 * sig selv (30 + 6 + 11), men reglen skal stå, så en senere skriftstørrelse
 * ikke tavst tager det under grænsen. */
.ac-banner-ord a {
  display: inline-block; min-height: 44px;
  color: inherit; text-decoration: none;
}
/* Sidehovedets ordmærke ville være det samme navn to gange under hinanden,
 * nu hvor banneret står på alle sider.
 *
 * display: none ville også tage det ud af skærmlæserens træ, og forsidens
 * er en <h1> — sidens eneste overskrift på niveau ét. Det skjules derfor
 * for ØJET og bliver i dokumentet. Bannerets eget ordmærke er til gengæld
 * aria-hidden, så navnet annonceres én gang og ses én gang. */
.ac-header-under-banner .ac-wordmark {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* MEN DET ER DET FØRSTE, TASTATURET RAMMER. Målt 16. september 2026 med
 * Chrome: første tabtryk lander på netop dette link, og forælderen er
 * 1×1 px med clip-path og overflow: hidden. document.elementFromPoint midt
 * i den giver containeren, ikke ordmærket — der tegnes INTET, så
 * fokusringen kan ikke ses. Det gjaldt både 1100 og 390 px.
 *
 * Samme mønster som et skip-link: skjult, indtil det har fokus. position
 * bliver ved med at være absolute, så ordmærket dukker op OVEN PÅ siden og
 * ikke skubber nav'en ned — et hop i layoutet ved hvert tabtryk ville være
 * sin egen gene. Baggrunden gør teksten læselig over det, der ligger under.
 * Fokusringen kommer fra den globale :focus-visible-regel.
 *
 * :has() frem for :focus-within, fordi det er den samme mekanik som
 * .ac-stjerner ovenfor — og fordi kun KEYBOARD-fokus skal vise det. Linket
 * kan alligevel ikke rammes med en mus: det er 1×1 px og klippet væk. */
.ac-header-under-banner .ac-wordmark:has(a:focus-visible) {
  width: auto; height: auto;
  margin: 0; padding: 6px 10px; overflow: visible;
  clip-path: none;
  background: var(--bg); z-index: 10;
}

/* HEROENS BILLEDE i stort format — den ene gode del af retning B.
 *
 * KUN fra 701 px og op. Prototypen lagde reglen uden for en media query, og
 * så vandt den over mobilreglen: coveret blev stående som anden spalte ved
 * 390 px og klemte titlen ned i en søjle. Carsten så det i skærmbilledet.
 * På telefonen falder heroen tilbage til én spalte, hvor billedet står
 * UNDER knapperne. */
@media (min-width: 701px) {
  .ac-hero-stort .ac-grid-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ac-hero-stort .ac-cover { aspect-ratio: 3 / 2; }
}

@media (max-width: 700px) {
  .ac-banner { height: 150px; }

  /* MOBILHOVEDET SLANKES, 15. september 2026. Målt ved 390 px stod
   * eventyrets titel 578 px nede på en 844 px skærm: to tredjedele af
   * telefonen var hoved, før man så, hvad siden handlede om.
   *
   * Tre greb, ingen af dem mindre skrift — 11 px er gulvet:
   *   1. hovedets luft foroven fra 48 til 24 px
   *   2. "Fan archive since 2017" er pynt på en telefon
   *   3. nøgletallene på ÉN linje: "free, forever" står i forvejen i
   *      sidefoden, og de to tal er det, linjen er til for */
  header { padding-block-start: var(--space-4) !important; }
  .ac-header-note { display: none; }
  .ac-noegletal > span.ac-noegletal-ord { display: none; }
  .ac-banner-navn { font-size: 30px; }
  /* 11 px og ikke 10. Sitets eget gulv er 11, og cmd/mobiltjek meldte de
   * 10 på fire sidetyper, første gang banneret blev målt. Pladsen findes i
   * sportegningen i stedet: 0.42em bliver til 0.26em. */
  .ac-banner-sub { font-size: 11px; letter-spacing: 0.26em; }

}

/* ---------- Tilmeldingsformularen på /newsletter/ ----------
 *
 * Feltet var 197 x 37 px, første gang cmd/mobiltjek så siden. 44 px er
 * kravet til et klikmål, og 16 px er kravet til skriften i et felt — under
 * det zoomer Safari på iPhone ind og zoomer ikke ud igen.
 *
 * Bredden er sat i ch og ikke i px: en mailadresse er omkring 30 tegn, og
 * feltet skal kunne rumme den, man selv skriver. */
.ac-nyhedsbrevform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); padding-block: 0 var(--space-4); }
.ac-nyhedsbrevform label { display: block; font-family: var(--font-label); font-size: var(--size-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); padding-block: 0 var(--space-2); }
.ac-nyhedsbrevform input[type="email"] {
  min-height: 44px; width: 32ch; max-width: 100%;
  padding: 0 var(--space-3);
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 16px;
}
.ac-nyhedsbrevform input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ac-formnote { padding-block: 0 var(--space-6); }