/* ── tokens: Dørens papir og to blæk; typografi fra Fable-arbejdet ── */
:root{
  --paper:#FAF9F5; --plane:#F0EEE7; --line:#E5E2D9; --t1:#1B1B1A; --t2:#5A5954; --t3:#A09D93; --t4:#C0BEB3;
  --acc:#6250D6; --acc-rgb:98,80,214; --ink-rgb:27,27,26;
  --serif:"PT Serif","Tiempos Text","Iowan Old Style",Charter,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --page-margins:24px; --read:640px; --header-h:60px;
}
@media (min-width:992px){ :root{ --page-margins:48px; --header-h:64px; } }
@media (min-width:1024px){ :root{ --page-margins:64px; } }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:calc(var(--header-h) + 16px); }
body{ margin:0; background:var(--paper); color:var(--t1); font-family:var(--serif); font-size:17px; line-height:26.35px; font-size-adjust:0.508; -webkit-font-smoothing:antialiased; font-feature-settings:"pnum","lnum","liga"; }
::selection{ background:rgba(var(--acc-rgb),.35); }
h1,h2,p{ margin:0; }

/* header — Dørens anatomi: 13 px sans, pill-knap 36 px */
.hd{ position:sticky; top:0; z-index:100; background:rgba(250,249,245,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hd__in{ max-width:1400px; margin:0 auto; padding:12px var(--page-margins); display:flex; align-items:center; gap:28px; height:var(--header-h); }
.wm{ font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.18em; color:var(--t1); text-decoration:none; }
.wm b{ color:var(--acc); font-weight:600; }
.hd__nav{ display:none; gap:22px; }
@media (min-width:900px){ .hd__nav{ display:flex; } }
.hd__nav a{ font-family:var(--sans); font-size:13.5px; font-weight:450; color:var(--t1); text-decoration:none; }
.hd__nav a:is(:hover, [data-hover]){ color:var(--acc); }
.cta{ margin-left:auto; }
.cta a{ font-family:var(--sans); font-size:13px; font-weight:500; background:var(--t1); color:var(--paper); padding:0 18px; height:36px; display:inline-flex; align-items:center; border-radius:999px; text-decoration:none; border:.5px solid transparent; transition:background-color .15s,color .15s,border-color .15s; }
.cta a:is(:hover, [data-hover]){ background:#2b2b2a; }

/* hero */
.hero{ position:relative; min-height:100svh; margin-top:calc(-1 * var(--header-h)); padding:calc(var(--header-h) + 48px) var(--page-margins) 72px; color:var(--t1); background:var(--paper); overflow:hidden; display:flex; flex-direction:column; justify-content:center; isolation:isolate; transition:color .8s, background-color .8s; }
.hero.dark{ color:#E9E6DD; background:#07070B; }
@media (min-width:900px){ .hero{ height:100svh; min-height:660px; } }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:0; transition:opacity 1.2s cubic-bezier(.22,.61,.36,1); touch-action:none; }
.hero-canvas.drawn{ opacity:1; }
.hero-canvas.over-cell{ cursor:pointer; }
.hero__words{ position:relative; z-index:4; width:100%; max-width:1280px; margin:0 auto; pointer-events:none; }
.hero__words a,.hero__words button{ pointer-events:auto; }
@media (min-width:900px){ .hero__words{ display:grid; grid-template-columns:repeat(12,1fr); gap:0 32px; align-items:start; container-type:inline-size; } }
.hero__eyebrow{ font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin:0 0 24px; color:inherit; opacity:.78; }
@media (min-width:900px){ .hero__eyebrow{ grid-column:3/11; text-align:center; } }
@media (min-width:1240px){ .hero__eyebrow{ grid-column:4/10; } }
.hero__title{ font-family:var(--serif); font-weight:400; -webkit-text-stroke:.35px currentColor; letter-spacing:-.008em; line-height:1.05; font-size:clamp(40px,11vw,80px); display:flex; flex-direction:column; align-items:flex-start; text-wrap:balance; }
@media (min-width:900px){ .hero__title{ grid-column:3/11; font-size:clamp(48px,5.3cqi,72px); line-height:1.1; } }
@media (min-width:1240px){ .hero__title{ grid-column:4/10; } }
.hero__title .l2{ align-self:flex-end; padding-left:1.6em; }
@media (min-width:900px){ .hero__title .l2{ padding-left:0; } }
.hero__title .cl{ color:var(--acc); -webkit-text-stroke:0; font-style:italic; }
.hero.dark .hero__title .cl{ color:#E0568D; }
.hero__index{ font-family:var(--serif); width:100%; max-width:416px; margin:48px 0 0; font-size:15px; line-height:26px; }
@media (min-width:900px){ .hero__index{ max-width:none; margin-top:64px; grid-column:4/10; } }
@media (min-width:1240px){ .hero__index{ grid-column:5/9; } }
.irow{ display:block; color:inherit; text-decoration:none; transition:opacity .4s, filter .4s; }
.irow-in{ display:flex; align-items:baseline; }
.irow-in>span{ flex-shrink:0; }
.inum{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--acc); }
.hero.dark .inum{ color:#E0568D; }
.ilead{ flex:1 1 0; min-width:16px; overflow:hidden; letter-spacing:1px; margin:0 6px; white-space:nowrap; opacity:.55; }
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  .hero__index{ contain:paint; }
  .hero__index:is(:hover, [data-hover]) .irow:not(:is(:hover, [data-hover])){ opacity:.8; filter:blur(.5px); }
  .hero__index:is(:hover, [data-hover]) .irow:is(:hover, [data-hover]) + .irow, .hero__index:is(:hover, [data-hover]) .irow:has(+ .irow:is(:hover, [data-hover])){ opacity:.94; filter:blur(.15px); }
}
/* looks = intensitet */
.hero__looks{ position:absolute; left:22px; bottom:20px; z-index:4; display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:12px; color:inherit; }
.look{ height:26px; padding:0 11px; border-radius:999px; border:.5px solid rgba(var(--ink-rgb),.28); background:transparent; color:inherit; font:inherit; font-weight:450; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:border-color .15s, background-color .15s, color .15s; }
.look i{ width:8px; height:8px; border-radius:50%; background:var(--sw); display:inline-block; }
.look:is(:hover, [data-hover]){ border-color:rgba(var(--ink-rgb),.6); }
.look[aria-pressed="true"]{ background:var(--t1); color:var(--paper); border-color:var(--t1); }
.hero.dark .look{ border-color:rgba(233,230,221,.3); }
.hero.dark .look[aria-pressed="true"]{ background:#E9E6DD; color:#07070B; border-color:#E9E6DD; }
.look:focus-visible{ outline:1px solid var(--acc); outline-offset:2px; }
.hero__credit{ position:absolute; right:22px; bottom:22px; z-index:4; font-family:var(--sans); font-size:12px; opacity:.6; }
.hero__hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:4; font-family:var(--sans); font-size:12px; opacity:0; transition:opacity .6s; pointer-events:none; white-space:nowrap; }
.hero.ready .hero__hint{ opacity:.62; }
/* reveal */
.hero__eyebrow,.hero__title .ln,.irow-in{ opacity:0; }
.hero.ready .hero__eyebrow,.hero.ready .hero__title .ln,.hero.ready .irow-in{ animation:elin .8s ease-out both; animation-delay:calc(var(--o,0)*.3s + var(--r,0)*45ms + .5s); }
.hero.ready .hero__title .ln{ animation-name:titlein; }
.hero__eyebrow{ --o:0; } .hero__title .ln{ --o:1; } .hero__title .l2 .ln{ --o:2; } .irow-in{ --o:3; }
@keyframes titlein{ 0%{opacity:0;filter:blur(22px)} 45%{opacity:1} 100%{opacity:1;filter:blur(0)} }
@keyframes elin{ 0%{opacity:0;filter:blur(12px)} 100%{opacity:1;filter:blur(0)} }
@media (prefers-reduced-motion:reduce){ .hero__eyebrow,.hero__title .ln,.irow-in{ opacity:1; animation:none; } .hero__hint{ display:none; } }
.hero__fallback{ position:absolute; inset:0; z-index:-2; background:radial-gradient(60% 60% at 50% 45%, #F0EEE7 0%, var(--paper) 70%); }

/* artikel — samme serif-blok som Fable-arbejdet */
.article{ max-width:1440px; margin:0 auto; padding:80px var(--page-margins) 96px; }
@media (min-width:992px){ .article{ padding:128px var(--page-margins); } }
.read,.body p{ max-width:var(--read); margin-inline:auto; }
.summary{ font-family:var(--serif); font-size:28px; line-height:36px; letter-spacing:-.16px; font-weight:400; margin-bottom:48px; text-wrap:pretty; }
@media (max-width:991px){ .summary{ font-size:22px; line-height:30px; } }
.body p{ margin-bottom:1rem; text-wrap:pretty; }
.h2{ font-family:var(--serif); font-weight:400; -webkit-text-stroke:0.3px currentColor; font-size:32px; line-height:38.4px; margin:64px auto 32px; max-width:var(--read); text-wrap:balance; scroll-margin-top:80px; }
.note{ font-family:var(--sans); font-size:13px; line-height:19.5px; color:var(--t2); max-width:var(--read); margin:32px auto 0; padding-top:16px; border-top:.5px solid var(--line); }
.note code{ font-family:var(--mono); font-size:12px; }