/* ═══════════════════════════════════════════════════════════════════
   shared/landing.css — forsiden.

   Loades EFTER shared/tokens.css, som holder reset, designtokens og
   lys/mørk-farveskemaet. Denne fil rummer kun forsiden; den rører
   aldrig slide-scenen.

   ── HVAD SIDEN ER ─────────────────────────────────────────────────
   Et register, ikke en fortælling. Fire emner, hver med sine kapitler.
   Man kan begynde hvor som helst, så der er hverken titelblok,
   rækkefølge-argument eller optælling af hvor langt produktionen er
   nået. Et kapitel der ikke er klar, er bare ikke et link endnu.

   Der hører INGEN JavaScript til. Ren HTML og CSS.

   ── HVAD DER BÆRER SIDEN ──────────────────────────────────────────
   Tre ting adskiller rækkerne: spøgelsestallet, skillestregen og
   luften. Spøgelsestallet er det samme greb som .pc-read-ghost i
   artifacts/digitalt-design/digitalt-design-persona.js — mono, fed,
   fyldt i accentfarven ved 12 % — bare i emnets egen accent i stedet
   for deckets. Det er husets etablerede ghost-tal, ikke et nyt.

   ── BEVIDSTE AFVIGELSER FRA DESIGN-BRIEF ──────────────────────────
   Tre regler i briefen er CANVAS-regler, ikke brand-regler: forbuddet
   mod vw/%, mod animation og mod hover. Alle tre findes, fordi hvert
   slide-canvas gengives live som thumbnail. En forside har ingen
   thumbnail, så den bruger clamp() og hover frit.

   Én reel afvigelse: IBM Plex Mono bruges til TAL (kapitelnumre,
   spøgelsestal). Mono er husets anden skrift i forvejen, og tabeltal
   er præcis det, et register skal sættes med. Al prosa er Spectral.
   ═══════════════════════════════════════════════════════════════════ */

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(var(--accent-rgb), 0.18);
}

:focus-visible {
    outline: 1.5px solid var(--accent-color);
    outline-offset: 4px;
}

/* Sidens vandrette rytme. Ingen max-width på siden selv; tekstblokke
   får i stedet deres egen max-width i ch, så linjelængden holdes. */
:root {
    --pad: clamp(20px, 5vw, 96px);
    --head-h: 70px;
}

/* Blækket til alle hårstreger på siden. --border-color duer ikke:
   #e8e8e8 på creme er praktisk talt usynligt, og skillestregerne er
   det eneste, der adskiller rækkerne ud over luften. */
@media (prefers-color-scheme: light) {
    :root {
        --rule-ink: rgba(25, 24, 24, 0.24);
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --rule-ink: rgba(255, 245, 229, 0.24);
    }
}

/* ═══ Sidehoved ════════════════════════════════════════════════════
   Samme sprog og samme dele som deckets .page-header (som deck.js
   injicerer): ordmærke · bullet · undertitel. Håndskrevet her, fordi
   forsiden ikke loader deck.js.

   Siden har ingen titelblok — den ER registret, og en skærmfyldende
   overskrift ville kun være en forsinkelse foran de fire emner. */

.site-head {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--head-h);
    display: flex;
    align-items: center;
    padding: 0 var(--pad);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--rail-border);
}

.wordmark {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-primary);
    text-decoration: none;
}

.site-head-divider {
    margin: 0 12px;
    color: var(--text-tertiary);
    font-weight: 300;
}

.site-head-subtitle {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.site-head-meta {
    margin-left: auto;
    padding-left: 24px;
    font-family: var(--s-code-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Samme afkortning som deck.css laver under 640px. */
@media (max-width: 640px) {
    .site-head-divider,
    .site-head-subtitle {
        display: none;
    }
}

/* ═══ Fælles ═══════════════════════════════════════════════════════ */

.eyebrow {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mono {
    font-family: var(--s-code-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* ═══ De fire emner ════════════════════════════════════════════════ */

/* Alle fire rækker er lige høje. I et grid uden fast højde betyder
   grid-auto-rows: 1fr "så høj som den højeste", så rytmen ned ad siden
   bliver den samme, uanset om et emne har 3 eller 15 kapitler. Vi
   ruller alligevel, så der er intet at spare ved at lade rækkerne
   klappe sammen om deres indhold — og en ujævn rytme var netop det,
   der fik rækkerne til at flyde sammen. */
.emner {
    display: grid;
    grid-auto-rows: 1fr;
}

.emne {
    --accent: var(--acc);
    position: relative;
    padding: clamp(46px, 5.4vw, 88px) var(--pad) clamp(40px, 4.6vw, 76px);
    scroll-margin-top: var(--head-h);
}
/* Den første række møder mastehovedet direkte og skal ikke have lige
   så meget luft over sig som de tre, der møder en skillestreg. */
.emne:first-of-type {
    padding-top: clamp(30px, 3.2vw, 52px);
}
@media (prefers-color-scheme: dark) {
    .emne {
        --accent: var(--acc-dark);
    }
}

/* Skillestregen. IKKE på den første — grid'et lukker aldrig, så fire
   rækker viser tre streger. Den løber ud over begge kanter: en
   horisont, ikke en ramme. */
.emne + .emne::before,
.kolofon::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule-ink);
}

/* ── Spøgelsestallet ────────────────────────────────────────────────
   Rækkens ankermærke, og grunden til at de fire blokke kan læses fra
   hinanden uden en masse luft. Opskriften er .pc-read-ghost'ens fra
   persona-artefaktet: mono, vægt 600, FYLDT i accentfarven ved 12 %.

   Fyld og ikke kontur — ved 12 % er der ingen kamp med teksten
   ovenpå, så tallet må gerne være stort og ligge lige bag titlen.
   Farven er emnets egen accent, så de fire tal ikke er ét motiv, men
   fire mærker. */
.emne-tal {
    position: absolute;
    z-index: 0;
    left: calc(var(--pad) - 0.06em);
    /* Lodret centreret i rækken. Da alle fire rækker er lige høje, men
       indholdet er forskelligt højt, ville en fast top-afstand sætte
       tallene i forhold til teksten i stedet for i forhold til feltet —
       og så stod de fire mærker uens ned ad siden. */
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--s-code-font);
    font-weight: 600;
    font-size: clamp(88px, 11vw, 190px);
    line-height: 1;
    color: var(--accent);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
}

.emne-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(26px, 3.6vw, 68px);
    max-width: 1560px;
    align-items: start;
}

.emne-titel {
    font-size: clamp(28px, 3.4vw, 48px);
    font-weight: 200;
    line-height: 1.06;
    letter-spacing: -0.015em;
}
.emne-titel a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease);
}
.emne-titel .arrow {
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-left: 0.28em;
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.25s var(--ease),
        transform 0.25s var(--ease);
}
.emne-titel .arrow path {
    stroke: currentColor;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    fill: none;
}
@media (hover: hover) {
    .emne-titel a:hover {
        color: var(--accent);
    }
}
.emne-titel a:hover .arrow,
.emne-titel a:focus-visible .arrow {
    opacity: 1;
    transform: translateX(0);
}

.emne-sub {
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 30ch;
    margin-top: 14px;
}

.emne-note {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 16px;
    margin-top: 12px;
}

/* ── Kapitellisten ─────────────────────────────────────────────────
   Numrene kommer fra en CSS-tæller, ikke fra markup: så kan listen
   ikke komme til at tælle forkert, når et kapitel flytter sig.

   Forskellen på et kapitel der er klar og et der ikke er, er at det
   ene ER et link. Ikke et mærke, ikke en optælling — bare den
   almindelige forskel på et link og en linje tekst. */
.kapitler {
    list-style: none;
    counter-reset: k;
    column-gap: clamp(24px, 3vw, 56px);
}
.kapitler[data-cols="2"] {
    columns: 2;
}


.kapitler > li {
    counter-increment: k;
    break-inside: avoid;
    margin-bottom: 7px;
}

.kapitler .k {
    display: grid;
    grid-template-columns: 2.4em 1fr;
    align-items: baseline;
    gap: 0 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    transition: color 0.2s var(--ease);
}
.kapitler .k::before {
    content: counter(k, decimal-leading-zero);
    font-family: var(--s-code-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    /* --text-tertiary (#999) måler under 4,5:1 mod cremen, og numrene
       er oplysning, ikke ornament. Samme grund som accenten blev
       mørknet til #3F775F. */
    color: var(--text-secondary);
}

a.k {
    color: var(--text-primary);
}
@media (hover: hover) {
    a.k:hover {
        color: var(--accent);
    }
}

/* ═══ Ressourcebåndet ═════════════════════════════════════════════
   Genveje UD af siden, ikke en afslutning på den — derfor står de
   øverst, under mastehovedet, på én linje. */

.res-bar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px clamp(20px, 2.6vw, 44px);
    padding: 14px var(--pad);
    border-bottom: 1px solid var(--rule-ink);
}

.res-mrk {
    font-family: var(--s-code-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.res {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 400;
}
.res .ext {
    width: 10px;
    height: 10px;
    align-self: center;
    transition: transform 0.25s var(--ease);
}
.res .ext path {
    stroke: currentColor;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    fill: none;
}
/* Ressourcerne hører ikke til ét emne og har derfor ingen accent —
   --accent-color ville her være deckets default-blå, altså samme blå
   som Teknologisk handleevne. Hover markeres med bevægelse. */
@media (hover: hover) {
    .res:hover .ext {
        transform: translate(2px, -3px);
    }
}

/* ═══ Kolofon ══════════════════════════════════════════════════════ */

.kolofon {
    position: relative;
    padding: 28px var(--pad) 44px;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ═══ Smalle skærme ════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .emne-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .kapitler[data-cols="2"] {
        columns: 1;
    }
    /* Én spalte gør rækkerne meget høje og meget forskellige. At tvinge
       dem til samme højde ville give en telefon skærmvis af tomrum. */
    .emner {
        grid-auto-rows: auto;
    }
    /* Og når rækkerne ikke længere er lige høje, giver det heller ikke
       mening at centrere tallet i dem: midten af en 500px høj række er
       midt i kapitellisten. Her hænger det ved titlen. */
    .emne-tal {
        top: clamp(22px, 3vw, 44px);
        transform: none;
    }
}