/* Det man ikke kan købe for penge — stilark.
   Slægt med vendhjem.dk (Lora, samme papir og blæk), men vendt om:
   siden er blæk, teksten er papir. Accenten er den samme rust, lysnet
   til mørk baggrund. Højst én accent pr. sektion. */
:root{
  --blaek:#1f2622; --blaek-loeft:#2a3330; --papir:#e9e7e0; --papir-bloed:#b9b6ad;
  --papir-mat:rgba(233,231,224,.55); --streg:rgba(233,231,224,.22);
  --accent:#c9663f; --hav:#5d7c86;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{background:var(--blaek);color:var(--papir);font-family:var(--serif);font-size:18px;line-height:1.55;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration-color:var(--streg);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
.stage{max-width:980px;margin:0 auto;padding:0 20px;width:100%}
.row{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
header.top{padding:22px 0;border-bottom:1px solid var(--streg)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-style:italic}
.brand svg{width:48px;height:30px}
nav a{margin-left:18px;text-decoration:none;color:var(--papir-bloed)}
nav a[aria-current]{color:var(--papir);border-bottom:1px solid var(--accent)}
main{flex:1}
.blok{padding:56px 0;border-bottom:1px solid var(--streg)}
.blok:last-child{border-bottom:0}
h1{font-weight:500;font-size:clamp(34px,6vw,64px);line-height:1.05;margin:0 0 18px;letter-spacing:-.01em}
h2{font-weight:500;font-size:28px;margin:0 0 12px}
h3{font-weight:500;font-size:20px;margin:0 0 6px}
.lead{font-size:22px;max-width:34em;color:var(--papir)}
.soft{color:var(--papir-bloed)}
.mono{font-family:var(--mono);font-size:14px;color:var(--papir-mat);letter-spacing:.02em}
.sec{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--papir-mat);margin:0 0 14px}
.maxw{max-width:40em}
.to{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media (max-width:640px){.to{grid-template-columns:1fr}}
.kvadrant{border:1px solid var(--streg);padding:22px;background:var(--blaek-loeft)}
.kvadrant .sec{margin-bottom:6px}
.knap{display:inline-block;padding:12px 18px;border:1px solid var(--papir);text-decoration:none;margin-top:18px}
.knap.accent{border-color:var(--accent);background:var(--accent);color:var(--blaek)}
.afsnit{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--streg)}
.afsnit:first-of-type{border-top:0}
@media (max-width:640px){.afsnit{grid-template-columns:1fr}}
.afsnit audio{width:100%;margin-top:10px;filter:invert(1) hue-rotate(180deg) saturate(.6)}
.tom{border:1px dashed var(--streg);padding:28px;color:var(--papir-bloed)}
.feed{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.feed code{font-family:var(--mono);font-size:14px;background:var(--blaek-loeft);padding:6px 10px;border:1px solid var(--streg);word-break:break-all}
footer.fod{padding:28px 0;border-top:1px solid var(--streg);color:var(--papir-bloed);font-size:15px}
footer.fod a{color:var(--papir-bloed)}
.udkast{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}

/* Hero-filmen: to kredse glider sammen, overlappet lyser, tre sætninger
   afløser hinanden under dem. 16 sekunders loop, ren CSS, ingen videofil.
   Står stille for dem, der har bedt om mindre bevægelse. */
.hero{background:radial-gradient(ellipse at 70% 50%,var(--blaek-loeft) 0%,var(--blaek) 60%)}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.hero-film{display:flex;flex-direction:column;align-items:center;gap:6px}
.hero-film svg{width:100%;max-width:420px;height:auto;overflow:visible}
@keyframes k-jeg{0%,8%{transform:translateX(-78px)}42%,70%{transform:translateX(-32px)}92%,100%{transform:translateX(-78px)}}
@keyframes k-vi{0%,8%{transform:translateX(78px)}42%,70%{transform:translateX(32px)}92%,100%{transform:translateX(78px)}}
@keyframes k-lens{0%,36%{opacity:0}50%,66%{opacity:1}78%,100%{opacity:0}}
@keyframes k-o1{0%,10%{opacity:0;transform:translateY(6px)}18%,30%{opacity:1;transform:translateY(0)}38%,100%{opacity:0}}
@keyframes k-o2{0%,44%{opacity:0;transform:translateY(6px)}52%,68%{opacity:1;transform:translateY(0)}76%,100%{opacity:0}}
@keyframes k-o3{0%,74%{opacity:0;transform:translateY(6px)}82%,92%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.k-jeg{animation:k-jeg 16s cubic-bezier(.6,0,.2,1) infinite}
.k-vi{animation:k-vi 16s cubic-bezier(.6,0,.2,1) infinite}
.k-lens{animation:k-lens 16s ease-in-out infinite}
.hero-ord{display:grid;min-height:3em;width:100%;text-align:center}
.hero-ord p{grid-area:1/1;margin:0;font-size:18px;font-style:italic;color:var(--papir-bloed);opacity:0}
.hero-ord .o1{animation:k-o1 16s ease-in-out infinite}
.hero-ord .o2{animation:k-o2 16s ease-in-out infinite}
.hero-ord .o3{animation:k-o3 16s ease-in-out infinite;font-style:normal;color:var(--papir)}
@media (prefers-reduced-motion: reduce){
  .k-jeg{animation:none;transform:translateX(-32px)}.k-vi{animation:none;transform:translateX(32px)}
  .k-lens{animation:none;opacity:1}
  .hero-ord .o1,.hero-ord .o3{animation:none;opacity:0}
  .hero-ord .o2{animation:none;opacity:1}
}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr;gap:28px}.hero-film{order:-1}.hero-film svg{max-width:260px}}