/* Indkapslet udgave: hver selektor er pakket under .epos-site, så reglerne
ikke kan ramme WordPress-temaets egne elementer. Genereres af
_byg/byg.py --wordpress. Ret aldrig her — ret i /style.css.
Skrifterne hentes her i filen. På det statiske site kommer de fra
et i sidehovedet, men sidehovedet følger ikke med over i
WordPress — uden denne linje ville hele sitet falde tilbage til
Georgia og systemskrift. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@400;500;600&display=swap');
/* Efterskolen Epos — forsideforslag
Én styrende idé: siden opfører sig som en fortælling, der bliver fortalt.
Derfor har hver sektion ét job og ét bevægelsesgreb — aldrig flere.
Guld optræder fire steder på hele siden og ingen andre:
1. ét ord i hero-overskriften
2. den primære knap (én per skærmfuld)
3. ornamentets streg
4. sektionslabels
Links markeres med en linje, ikke med farve. Det er linjen, der er signalet.
*/
:root{
/* Epos' egne farver, uændrede */
--night:#17131F;
--ground:#1C1823;
--plum:#302741;
--plum-deep:#241D31;
--plum-lift:#3A2F4C;
--gold:#DFC28C;
--gold-dim:#A98F5F;
--paper:#F1EDE4;
--paper-2:#E6DFD1;
--ink:#EEE9E1;
--muted:#BCB4C1;
--muted-2:#9A90A6;
--line:#FFFFFF1F;
--line-soft:#FFFFFF10;
--serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
/* Navngivet afstandsskala. Trapper på to skærmbredder — aldrig ad hoc. */
--s1:.5rem; --s2:1rem; --s3:1.75rem; --s4:3rem; --s5:5rem; --s6:7.5rem;
--frame:0px; /* rammens indrykning — 0 på mobil, sat på desktop */
--gutter:clamp(1.25rem,4vw,3.5rem);
--wide:1340px;
--head-h:76px;
/* fotogrebet, samlet ét sted så det kan justeres på hele sitet */
--photo-sat:.55;
--photo-tint:.30;
}
@media(min-width:1024px){:root{--s3:2rem;--s4:3.75rem;--s5:6.5rem;--s6:9.5rem;--frame:34px;--head-h:84px}}
@media(min-width:1440px){:root{--s4:4.5rem;--s5:8rem;--s6:12rem;--frame:44px}}
.epos-site *,.epos-site *::before,.epos-site *::after{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.epos-site{
margin:0;
padding:var(--frame);
background:var(--plum); /* rammens farve — ses hele vejen rundt om siden */
color:var(--ink);
font:400 16px/1.75 var(--sans);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
.epos-site img{display:block;max-width:100%}
.epos-site figure,.epos-site blockquote{margin:0}
.epos-site ul,.epos-site ol{margin:0;padding:0;list-style:none}
.epos-site button{font:inherit;cursor:pointer}
.epos-site h1,.epos-site h2,.epos-site h3,.epos-site h4{margin:0;font-family:var(--serif);font-weight:400;line-height:1.05;color:var(--ink);text-wrap:balance}
.epos-site p{margin:0}
.epos-site a{color:inherit;text-decoration:none}
.epos-site ::selection{background:var(--gold);color:var(--night)}
.epos-site :focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* Rammen (efter Nysted). Ingen overflow her — sticky og ScrollTrigger
skal kunne regne mod viewporten uden en klippende forfader. */
.epos-site .frame{
background:var(--ground);
border-radius:var(--frame) ;
position:relative;
}
@media(min-width:1024px){.epos-site .frame{border-radius:8px}}
.epos-site .epos-container{width:min(100% - var(--gutter)*2,var(--wide));margin-inline:auto}
.epos-site .narrow{max-width:62ch}
.epos-site .eyebrow{
display:block;font:500 .68rem/1.6 var(--sans);
letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);
}
.epos-site .lede{font-size:1.08rem;line-height:1.7;color:#D8D1DA}
.epos-site .mut{color:var(--muted)}
/* ---------- masker til tekstafsløring ----------
Hvert ord ligger i sin egen maske og glider op bagfra kanten.
Ingen opacity:0 i CSS — uden JavaScript står alt læsbart. */
.epos-site .mask{display:inline-block;overflow:hidden;vertical-align:bottom;
padding-bottom:.14em;margin-bottom:-.14em}
.epos-site .mask>span{display:inline-block;will-change:transform}
/* ---------- knapper ----------
Præcis én fyldt guldknap per skærmfuld. Resten er hårfin kant. */
.epos-site .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
min-height:48px;padding:.85rem 1.5rem;border:1px solid transparent;border-radius:3px;
font:500 .84rem/1.4 var(--sans);letter-spacing:.01em;
transition:background 240ms ease,border-color 240ms ease,color 240ms ease,transform 240ms ease}
.epos-site .btn-primary{background:var(--gold);border-color:var(--gold);color:#241C2E}
.epos-site .btn-primary:hover{background:#EBD3A6;border-color:#EBD3A6}
.epos-site .btn-ghost{border-color:var(--line);color:var(--ink)}
.epos-site .btn-ghost:hover{border-color:var(--ink)}
/* "Bliv elev" i header: bevidst undtagelse fra ovenstående ét-guldknap-regel */
.epos-site .btn-ghost.btn-sm{background:#EBD3A6;border-color:#EBD3A6;color:#241C2E}
.epos-site .btn-ghost.btn-sm:hover{background:#EBD3A6;border-color:#EBD3A6;color:#241C2E;transform:translateY(-2px)}
/* Tekstlink: linjen er signalet, ikke farven (efter Aspelin Reitan) */
.epos-site .tlink{display:inline-flex;align-items:center;gap:.85rem;min-height:44px;
color:var(--ink);font:500 .86rem/1.4 var(--sans);
border-bottom:1px solid var(--line);padding-block:.35rem;
transition:border-color 240ms ease}
.epos-site .tlink::after{content:'↗';font-size:.95em;transition:transform 240ms ease}
.epos-site .tlink:hover{border-color:var(--ink)}
.epos-site .tlink:hover::after{transform:translate(2px,-2px)}
/* ---------- fotogrebet (efter BGI, i plum) ----------
Ét greb på alle fotos, så billeder skudt i vidt forskelligt lys
kommer ud som én skole. isolation holder blandingen inde i rammen. */
.epos-site .photo{position:relative;overflow:hidden;isolation:isolate;background:var(--plum-deep)}
.epos-site .photo img{width:100%;height:100%;object-fit:cover;
filter:saturate(var(--photo-sat)) contrast(1.04)}
.epos-site .photo::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:var(--plum);mix-blend-mode:color;opacity:var(--photo-tint)}
/* ---------- header ----------
To tilstande. I hvile er den en samlet bjælke, der flugter med indholdet.
Når man scroller, opløses bjælken: navigationen fader væk, og de to
klynger glider ud til hver sin kant. --flow er afstanden ind til
indholdsspalten og regnes i script.js, fordi den afhænger af skærmbredden.
Klyngerne flyttes med transform — ikke med bredde eller margin — så
browseren ikke skal ombryde layoutet på hvert billede. */
.epos-site .site-header{position:fixed;z-index:80;
top:var(--frame);left:var(--frame);right:var(--frame);
border-radius:8px 8px 0 0;
background:#1C1823D9;backdrop-filter:blur(14px) saturate(1.2);
border-bottom:1px solid var(--line-soft);
transition:background-color 480ms ease,backdrop-filter 480ms ease,
border-color 480ms ease}
.epos-site .header-in{width:100%;padding-inline:var(--gutter);
min-height:var(--head-h);display:flex;align-items:center;gap:1.5rem;
transition:min-height 520ms cubic-bezier(.22,.61,.36,1)}
.epos-site .brand,.epos-site .header-right{
transform:translateX(var(--brand-shift,0px));
border-radius:999px;padding:.35rem .55rem;background:transparent;
transition:transform 640ms cubic-bezier(.22,.61,.36,1),
background-color 460ms ease,backdrop-filter 460ms ease,
gap 640ms cubic-bezier(.22,.61,.36,1),
padding 640ms cubic-bezier(.22,.61,.36,1),
border-radius 640ms cubic-bezier(.22,.61,.36,1)}
.epos-site .brand{--brand-shift:var(--flow,0px);display:inline-flex;align-items:center;gap:.7rem;flex-shrink:0}
.epos-site .header-right{--brand-shift:calc(var(--flow,0px) * -1);
display:flex;align-items:center;gap:1rem;flex-shrink:0}
.epos-site .brand img{height:34px;width:auto;
transition:height 640ms cubic-bezier(.22,.61,.36,1)}
.epos-site .brand .wordmark{height:30px}
.epos-site .nav{display:none;margin-inline:auto;gap:1.7rem;
transition:opacity 380ms ease,transform 380ms ease}
@media(min-width:1080px){.epos-site .nav{display:flex}}
.epos-site .nav a{font:400 .84rem/1 var(--sans);color:#D9D2DC;padding-block:.6rem;
border-bottom:1px solid transparent;transition:border-color 220ms ease,color 220ms ease}
.epos-site .nav a:hover{color:var(--ink);border-color:var(--line)}
/* Den udflydte tilstand */
.epos-site .site-header.is-floated{background:transparent;backdrop-filter:none;
border-bottom-color:transparent}
.epos-site .site-header.is-floated .header-in{min-height:88px}
.epos-site .site-header.is-floated .brand,.epos-site .site-header.is-floated .header-right{--brand-shift:0px;
background:#191521D9;backdrop-filter:blur(12px) saturate(1.2)}
.epos-site .site-header.is-floated .brand{gap:1.4rem}
.epos-site .site-header.is-floated .brand img{height:68px}
.epos-site .site-header.is-floated .brand .wordmark{height:60px}
/* "Bliv elev" er en firkant inde i en pille. Pillens runding skæres af en
cirkel med radius = klyngens halve højde, så et hjørne af firkanten falder
uden for kanten, hvis luften omkring den er mindre end den runding. Med
.35rem/.55rem lå hjørnet 0,6px uden for pillen. Luften her er regnet, så
hjørnet holder ca. 4px afstand til kanten. */
.epos-site .site-header.is-floated .header-right{margin-left:auto;padding:.5rem 1.1rem}
.epos-site .site-header.is-floated .nav{position:absolute;left:50%;translate:-50% 0;
opacity:0;transform:translateY(-10px);pointer-events:none}
.epos-site .menu-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;
padding:.5rem .1rem;border:0;background:none;color:var(--ink);
font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.epos-site .menu-btn .bars{width:20px;height:9px;border-block:1px solid currentColor;display:inline-block}
/* ---------- hero ----------
Ét stort øjeblik. Herefter holder typografien sig under loftet. */
.epos-site .hero{position:relative;min-height:min(94svh,880px);display:flex;align-items:flex-end;
padding-top:calc(var(--head-h) + var(--s5));padding-bottom:var(--s5);
border-radius:8px 8px 0 0;overflow:hidden;isolation:isolate}
.epos-site .hero-media{position:absolute;inset:0;z-index:-1}
.epos-site .hero-media img,.epos-site .hero-media video{width:100%;height:100%;object-fit:cover;object-position:52% 46%;
filter:saturate(var(--photo-sat)) contrast(1.07) brightness(.86);
will-change:transform}
/* Herovideo — kun på desktop, og kun når JS har sat en rigtig kilde ind
(se heroVideo() i script.js). Standarden er skjult, så et billede uden
video, eller en mobil, aldrig venter på en fil, der ikke skal bruges. */
.epos-site .hero-video{display:none}
.epos-site .hero-media.har-video .hero-video{display:block}
.epos-site .hero-media.har-video .hero-stillbillede{display:none}
.epos-site .hero-media::after{content:'';position:absolute;inset:0;z-index:1;
background:var(--plum);mix-blend-mode:color;opacity:var(--photo-tint)}
/* læsbarhedsslør — ligger over tonen, ikke under */
.epos-site .hero-media::before{content:'';position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,#17131F99 0%,#17131F40 38%,#17131FE6 88%),
linear-gradient(90deg,#17131FCC 0%,#17131F26 62%)}
.epos-site .hero-copy{max-width:min(100%,660px)}
.epos-site .hero h1{font-weight:300;font-size:clamp(2.9rem,8.2vw,7rem);line-height:.97;
letter-spacing:-.022em;margin:1.5rem 0 0}
.epos-site .hero h1 .gold{color:var(--gold);font-style:italic;font-weight:400}
.epos-site .hero-copy>p{margin-top:1.6rem;max-width:46ch;color:#D5CEDA;font-size:1.02rem}
.epos-site .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2.2rem}
.epos-site .hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;
padding:1rem var(--gutter);border-top:1px solid var(--line-soft);
display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:center;
font:400 .72rem/1.6 var(--sans);letter-spacing:.04em;color:#BDB4C4}
.epos-site .hero-foot a{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;color:var(--ink)}
/* ---------- de tre veje ----------
Ægte rækkefølge (hjem → læring → næste skridt), så numre er reel information. */
.epos-site .paths{border-bottom:1px solid var(--line)}
.epos-site .paths-grid{display:grid;grid-template-columns:1fr}
@media(min-width:860px){.epos-site .paths-grid{grid-template-columns:repeat(3,1fr)}}
.epos-site .path{display:flex;align-items:center;gap:1.4rem;padding:1.6rem 0;
border-top:1px solid var(--line);transition:background 260ms ease}
@media(min-width:860px){
.epos-site .path{padding:1.9rem var(--s3);border-top:0;border-left:1px solid var(--line)}
.epos-site .path:first-child{border-left:0;padding-left:0}
.epos-site .path:last-child{padding-right:0}
}
.epos-site .path-no{font:400 .8rem/1 var(--sans);color:var(--muted-2);letter-spacing:.1em;
font-variant-numeric:tabular-nums;transition:color 260ms ease}
.epos-site .path-txt{flex:1;min-width:0}
.epos-site .path-txt strong{display:block;font:400 1.28rem/1.3 var(--serif);color:var(--ink)}
.epos-site .path-txt small{display:block;margin-top:.25rem;font-size:.82rem;color:var(--muted)}
.epos-site .path-go{color:var(--muted-2);transition:transform 260ms ease,color 260ms ease}
.epos-site .path:hover .path-no{color:var(--gold-dim)}
.epos-site .path:hover .path-go{transform:translate(3px,-3px);color:var(--ink)}
/* ---------- sektionshoveder ---------- */
.epos-site .section{padding-block:var(--s6)}
.epos-site .sec-head{display:grid;gap:1.2rem;margin-bottom:var(--s4)}
@media(min-width:900px){.epos-site .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,330px);
align-items:end;gap:var(--s4)}}
.epos-site .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.75rem);letter-spacing:-.012em;margin-top:.8rem}
.epos-site .sec-head>p{color:var(--muted);font-size:.96rem}
/* ---------- elevprofiler ----------
Den lille medaljon markerer linket ved hover og tastaturfokus,
mens profilbilledet bliver ved med at være synligt. */
.epos-site .roles-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.epos-site .roles-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.epos-site .roles-grid{grid-template-columns:repeat(5,1fr);gap:1.4rem}}
.epos-site .role{display:flex;flex-direction:column;min-width:0}
.epos-site .role-media{aspect-ratio:4/5;border-radius:3px}
.epos-site .role-medallion{position:absolute;z-index:2;right:.75rem;bottom:.75rem;
width:40px;height:40px;display:grid;place-items:center;
border:1px solid var(--gold);border-radius:50%;
color:var(--gold);font-size:1rem;background:#17131FCC;
transition:transform 240ms ease,background-color 240ms ease,color 240ms ease}
.epos-site .role:focus-visible .role-medallion{background:var(--gold);color:#241C2E}
@media(hover:hover){
.epos-site .role:hover .role-medallion{background:var(--gold);color:#241C2E;transform:translate(2px,-2px)}
}
.epos-site .role-body{padding-top:1.1rem}
.epos-site .role-body h2,.epos-site .role-body h3{font-size:1.3rem;font-weight:500;font-family:var(--serif);line-height:1.3}
.epos-site .role-body p{margin-top:.4rem;font-size:.85rem;line-height:1.6;color:var(--muted)}
.epos-site .role-cta{display:inline-block;margin-top:.9rem;font:500 .74rem/1.5 var(--sans);
color:var(--muted-2);border-bottom:1px solid transparent;padding-bottom:.2rem;
transition:color 240ms ease,border-color 240ms ease}
.epos-site .role:hover .role-cta{color:var(--ink);border-color:var(--line)}
/* ---------- papirsektionen ----------
Den ene lyse flade på siden. Fotoet bryder sektionsgrænsen — én gang. */
.epos-site .paper{background:var(--paper);color:#2B2632;
--ink:#2B2632;--muted:#655C6E;--line:#2B26321F;--line-soft:#2B263212;
--gold-dim:#6E5423;--muted-2:#7C7286}
.epos-site .paper h1,.epos-site .paper h2,.epos-site .paper h3{color:#2B2632}
.epos-site .two-col{display:grid;gap:var(--s4);align-items:center}
@media(min-width:960px){.epos-site .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}}
.epos-site .school-facts{display:flex;flex-wrap:wrap;gap:2.5rem;margin:2.2rem 0;
padding-top:1.6rem;border-top:1px solid var(--line)}
.epos-site .school-facts div{display:flex;flex-direction:column}
.epos-site .school-facts strong{font:400 2.2rem/1 var(--serif);color:#2B2632}
.epos-site .school-facts span{margin-top:.35rem;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.epos-site .overhang{position:relative}
/* Fotoet hænger ned over sektionsgrænsen — det eneste sted på siden.
Kolonnen justeres mod bunden, så den negative margin faktisk trækker
billedet UD af sektionen i stedet for bare at flytte det i sit felt. */
@media(min-width:960px){
.epos-site #school .two-col{align-items:end}
.epos-site .overhang{margin-bottom:calc((var(--s6) + 5rem) * -1)}
}
.epos-site .overhang .photo{aspect-ratio:4/5;border-radius:3px}
.epos-site .overhang figcaption{display:flex;justify-content:space-between;gap:1rem;
margin-top:.85rem;font-size:.74rem;letter-spacing:.06em;color:var(--muted)}
/* ---------- den fastlåste sektion ----------
Ét fastlåst øjeblik på hele siden. position:sticky gør fastlåsningen,
GSAP scrubber ornamentet og teksten mod sektionens forløb. */
.epos-site .craft{position:relative;background:var(--plum)}
.epos-site .craft-rail{padding-block:var(--s5)}
/* Fastlåsningen er fjernet sammen med rosevinduet: den fandtes kun for at
give ornamentet plads at blive tegnet i. Uden det holdt sektionen bare
læseren tilbage uden grund. Nu ruller den som alle andre. */
/* Ingen width her. Elementet bærer også .epos-container, og en width ville slå
spaltens sidemargen ihjel — så løb teksten helt ud i skærmkanten.
Samme fejl opstod i hero'en; det er tredje regel af sin slags. */
.epos-site .craft-grid{display:grid;gap:var(--s4);align-items:center}
@media(min-width:960px){.epos-site .craft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5)}}
.epos-site .craft-media{position:relative;isolation:isolate}
.epos-site .craft-media .photo{aspect-ratio:1;border-radius:3px}
.epos-site .craft-copy h2{font-size:clamp(1.8rem,3.4vw,2.75rem);letter-spacing:-.012em;margin-top:.8rem}
.epos-site .craft-copy p{margin-top:1.3rem;color:#CFC5D6;max-width:46ch}
.epos-site .craft-copy .tlink{margin-top:2rem;color:#F2ECE4;border-color:#FFFFFF2E}
/* ---------- camps ---------- */
.epos-site .camp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:1.2rem 1.8rem;padding:var(--s3) 0;border-top:1px solid var(--line);
transition:padding-inline 320ms ease}
.epos-site .camp:last-child{border-bottom:1px solid var(--line)}
.epos-site .camp-no{font:400 .8rem/1 var(--sans);color:var(--muted-2);letter-spacing:.1em;
font-variant-numeric:tabular-nums;align-self:start;padding-top:.6rem}
.epos-site .camp-main{min-width:0}
.epos-site .camp-main h3{font-size:clamp(1.55rem,2.6vw,2.15rem);font-weight:400}
.epos-site .camp-meta{display:block;margin-top:.4rem;font:500 .7rem/1.5 var(--sans);
letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.epos-site .camp-main>p{margin-top:.9rem;color:var(--muted);font-size:.92rem;max-width:52ch}
.epos-site .camp-go{color:var(--muted-2);font-size:1.1rem;align-self:start;padding-top:.5rem;
transition:transform 300ms ease,color 300ms ease}
.epos-site .camp:hover{padding-inline:1.25rem}
.epos-site .camp:hover .camp-go{transform:translate(3px,-3px);color:var(--ink)}
/* ---------- afsluttende CTA ---------- */
.epos-site .cta{background:var(--plum-deep);border-top:1px solid var(--line)}
.epos-site .cta-in{display:grid;gap:var(--s3);align-items:end}
@media(min-width:860px){.epos-site .cta-in{grid-template-columns:minmax(0,1fr) auto;gap:var(--s4)}}
.epos-site .cta h2{font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.015em;margin-top:.8rem}
.epos-site .cta p{margin-top:1rem;color:var(--muted);max-width:44ch}
.epos-site .cta-actions{display:flex;flex-wrap:wrap;gap:.85rem}
/* ---------- footer ---------- */
.epos-site .foot{border-top:1px solid var(--line);padding-block:var(--s5) var(--s3)}
.epos-site .foot-grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:760px){.epos-site .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s3)}}
.epos-site .foot h2,.epos-site .foot h4{font:500 .68rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;
color:var(--muted-2);margin-bottom:1rem}
.epos-site .foot p,.epos-site .foot li{font-size:.88rem;color:var(--muted)}
.epos-site .foot li+li{margin-top:.5rem}
.epos-site .foot a{border-bottom:1px solid transparent;transition:border-color 220ms ease}
.epos-site .foot a:hover{border-color:var(--line)}
.epos-site .foot-brand img{height:56px;width:auto}
.epos-site .foot-tag{margin-top:1rem;font:italic 400 1.35rem/1.3 var(--serif);color:var(--gold-dim)}
.epos-site .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
margin-top:var(--s5);padding-top:1.3rem;border-top:1px solid var(--line);
font-size:.74rem;color:var(--muted-2)}
/* ---------- respekt for reduced motion ----------
Slår bevægelsen helt fra, ikke halvt. GSAP får samme besked i script.js. */
@media(prefers-reduced-motion:reduce){
.epos-site *,.epos-site *::before,.epos-site *::after{animation:none!important;transition:none!important}
}
/* ---------- tilføjelser ---------- */
/* Den fastlåste sektion skal have noget at rulle igennem, ellers klæber intet.
~1,1 skærmfuld ekstra — nok til at ornamentet kan tegnes, kort nok til
at man ikke føler sig fanget. */
/* Overlappet: fotoet skal ligge OVER den følgende sektions flade,
ellers forsvinder det bag den. */
.epos-site .overhang{z-index:2}
/* Menu
Telefon: panelet dækker hele skærmen — der er ikke plads til andet.
Computer: det lægger sig i højre side som en skuffe, og siden bliver
stående bag en dæmpet flade. Man skal kunne se, hvad man forlader. */
.epos-site .epos-menu[hidden],.epos-site .menu-skygge[hidden]{display:none}
.epos-site .epos-menu{position:fixed;inset:var(--frame);z-index:120;background:var(--plum-deep);
border-radius:8px;display:flex;flex-direction:column;
padding:var(--s3) var(--gutter) var(--s4);overflow-y:auto;overscroll-behavior:contain}
.epos-site .menu-skygge{position:fixed;inset:0;z-index:119;background:#0F0B16;opacity:.62;
animation:skygge-ind 260ms ease both}
@keyframes skygge-ind{from{opacity:0}to{opacity:.62}}
@media (min-width:721px){
.epos-site .epos-menu{left:auto;width:min(30rem,100vw);
border-radius:8px 0 0 8px;border-left:1px solid var(--line);
box-shadow:-24px 0 60px #0B0812AA;
padding-inline:clamp(1.8rem,2.6vw,2.8rem);
animation:menu-ind 320ms cubic-bezier(.22,.61,.36,1) both}
/* Rammen er kun i venstre kant af panelet — i højre, top og bund skal
skuffen gå helt ud til skærmen, ellers svæver den. */
.epos-site .epos-menu{right:0;top:0;bottom:0}
}
@keyframes menu-ind{from{transform:translateX(3rem);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
.epos-site .epos-menu,.epos-site .menu-skygge{animation:none}
}
.epos-site .menu-head{display:flex;align-items:center;justify-content:space-between;
gap:1rem;min-height:var(--head-h);border-bottom:1px solid var(--line)}
.epos-site .menu-close{border:0;background:none;color:var(--ink);min-height:44px;
font:500 .74rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.epos-site .menu-head,.epos-site .menu-smaa,.epos-site .menu-tag{flex-shrink:0}
.epos-site .menu-links{display:flex;flex-direction:column;margin-top:var(--s3);flex:1 0 auto}
.epos-site .menu-links a{font:300 clamp(1.8rem,4vw,2.3rem)/1.25 var(--serif);color:var(--ink);
padding:.35rem 0;border-bottom:1px solid var(--line-soft);
transition:color 220ms ease,padding-left 300ms ease}
.epos-site .menu-links a:hover{color:var(--gold);padding-left:.6rem}
.epos-site .menu-tag{margin-top:var(--s3);font:italic 400 1.2rem/1.3 var(--serif);color:var(--gold-dim)}
/* Spring-til-indhold. Skal ligge over alt andet og først vises ved tastaturfokus. */
.epos-site .skip{position:fixed;z-index:300;top:10px;left:10px;
min-height:44px;display:inline-flex;align-items:center;
padding:.8rem 1.2rem;border-radius:3px;
background:var(--gold);color:#241C2E;
font:500 .8rem/1 var(--sans);
transform:translateY(-200%);transition:transform 200ms ease}
.epos-site .skip:focus,.epos-site .skip:focus-visible{transform:none}
/* Kompakt knap — bruges i headeren, hvor den fulde højde er for meget. */
.epos-site .btn-sm{min-height:42px;padding:.55rem 1.05rem;font-size:.78rem}
/* ================================================================
UNDERSIDER
Forsiden har ét stort øjeblik. Alle andre sider holder sig under
loftet — h1 topper på 4,2 rem, h2 på 2,4 rem. Det er kontrasten
til forsiden, der får den til at virke.
================================================================ */
.epos-site .sektion{padding-block:var(--s5)}
.epos-site .sektion-taet{padding-block:var(--s3)}
/* To sektioner efter hinanden skal ikke lægge dobbelt luft imellem sig —
rytmen styres af den førstes padding-bottom alene.
MEN: en sektion, der tegner sin EGEN flade (baggrund eller kantlinje),
er en kasse, og en kasse skal have luft indeni foroven. Den mærkes med
.egen-flade og går fri. Uden undtagelsen vandt denne regel over
.afslut'ens egen padding (to klasser slår én), så teksten klistrede op
ad kantlinjen på 43 sider. Enhver ny sektion med egen baggrund eller
kant skal have .egen-flade. */
.epos-site .sektion + .sektion:not(.egen-flade){padding-top:0}
.epos-site .epos-container.smal{width:min(100% - var(--gutter)*2,64ch);margin-inline:auto}
.epos-site .sek-intro{max-width:58ch;margin-bottom:var(--s3);color:var(--muted)}
/* ---------- sidehero ---------- */
.epos-site .sidehero{position:relative;isolation:isolate;overflow:hidden;
border-radius:8px 8px 0 0;
padding-top:calc(var(--head-h) + var(--s4));padding-bottom:var(--s3);
background:linear-gradient(180deg,#241D31 0%,var(--ground) 100%)}
.epos-site .sidehero.har-foto{padding-top:calc(var(--head-h) + var(--s5));padding-bottom:var(--s4)}
.epos-site .sidehero-medie{position:absolute;inset:0;z-index:-1}
.epos-site .sidehero-medie img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
filter:saturate(var(--photo-sat)) contrast(1.04) brightness(.72)}
.epos-site .sidehero-medie::after{content:'';position:absolute;inset:0;z-index:1;
background:var(--plum);mix-blend-mode:color;opacity:var(--photo-tint)}
.epos-site .sidehero-medie::before{content:'';position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,#17131FA6 0%,#17131F4D 40%,#17131FF2 100%)}
.epos-site .sidehero-tekst{max-width:min(100%,720px);margin-top:var(--s3)}
.epos-site .sidehero h1{font-weight:300;font-size:clamp(2.3rem,5.6vw,4.2rem);line-height:1.02;
letter-spacing:-.02em;margin:.9rem 0 0}
.epos-site .sidehero h1 .gold{color:var(--gold);font-style:italic;font-weight:400}
.epos-site .sidehero .lede{margin-top:1.2rem;max-width:52ch}
/* ---------- brødkrummer ---------- */
.epos-site .krumme ol{display:flex;flex-wrap:wrap;gap:.3rem .6rem;
font:400 .74rem/1.6 var(--sans);color:var(--muted-2);letter-spacing:.02em}
.epos-site .krumme li+li::before{content:'/';margin-right:.6rem;color:var(--muted-2);opacity:.6}
.epos-site .krumme a{border-bottom:1px solid transparent;transition:border-color 200ms ease}
.epos-site .krumme a:hover{border-color:var(--line)}
.epos-site .krumme [aria-current]{color:var(--muted)}
/* ---------- undernavigation ---------- */
.epos-site .delnav{position:relative;z-index:3;margin-top:var(--s4);
width:min(100% - var(--gutter)*2,var(--wide));margin-inline:auto;
display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;
padding-top:1rem;border-top:1px solid var(--line)}
.epos-site .delnav a{font:400 .82rem/1.5 var(--sans);color:var(--muted);
padding:.55rem 0;border-bottom:1px solid transparent;
transition:color 220ms ease,border-color 220ms ease}
.epos-site .delnav a:hover{color:var(--ink)}
.epos-site .delnav a.er-her{color:var(--ink);border-color:var(--gold-dim)}
.epos-site .nav a.er-her{color:var(--ink);border-color:var(--line)}
/* ---------- prosa ---------- */
.epos-site .prosa p{color:var(--muted);margin-top:1.1rem}
.epos-site .prosa p:first-child{margin-top:0}
.epos-site .prosa h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.012em;margin-top:.7rem}
.epos-site .prosa .eyebrow + h2{margin-top:.7rem}
.epos-site .prosa h2 + p{margin-top:1.3rem}
.epos-site .prosa-lead{font-size:1.14rem;line-height:1.68;color:#DCD5DF}
.epos-site .prosa em{font-style:italic;color:#DED7E2}
.epos-site .undertitel{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.8rem);
color:var(--gold-dim);line-height:1.3}
/* ---------- to kolonner ---------- */
.epos-site .to-kol{display:grid;gap:var(--s4);align-items:center}
@media(min-width:960px){.epos-site .to-kol{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);
align-items:end}}
.epos-site .split-tekst h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.012em;margin-top:.7rem}
.epos-site .split-tekst p{margin-top:1.1rem;color:var(--muted)}
.epos-site .split-tekst .tlink{margin-top:1.8rem}
/* ---------- figur ---------- */
.epos-site .figur{position:relative}
.epos-site .figur .photo{aspect-ratio:4/5;border-radius:3px}
.epos-site .figur figcaption{display:flex;justify-content:space-between;gap:1rem;
margin-top:.85rem;font-size:.74rem;letter-spacing:.06em;color:var(--muted-2)}
.epos-site .epos-container.smal .figur .photo{aspect-ratio:16/10}
/* Ét overhæng per side — billedet hænger ned over sektionsgrænsen. */
@media(min-width:960px){.epos-site .figur.overhaeng{z-index:2;margin-bottom:calc(var(--s4) * -1)}}
/* ---------- kort ---------- */
.epos-site .sek-hoved{display:grid;gap:1.1rem;margin-bottom:var(--s3)}
@media(min-width:900px){.epos-site .sek-hoved{grid-template-columns:minmax(0,1fr) minmax(0,340px);
align-items:end;gap:var(--s4)}}
.epos-site .sek-hoved h2{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.012em;margin-top:.7rem}
.epos-site .sek-hoved > p{color:var(--muted);font-size:.95rem}
.epos-site .kort-gitter{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:720px){.epos-site .kort-gitter.kol-2{grid-template-columns:1fr 1fr}
.epos-site .kort-gitter.kol-3{grid-template-columns:repeat(3,1fr)}}
.epos-site .kort{display:flex;flex-direction:column;gap:.6rem;padding:var(--s3) 1.5rem;
background:var(--ground);transition:background-color 300ms ease}
.epos-site .paper .kort{background:var(--paper)}
.epos-site a.kort:hover{background:#FFFFFF08}
.epos-site .kort h2,.epos-site .kort h3{font-size:1.35rem;font-weight:500;font-family:var(--serif);line-height:1.25}
.epos-site .kort p{font-size:.9rem;line-height:1.65;color:var(--muted)}
.epos-site .kort-note{display:block;margin-top:.5rem;font-size:.76rem;letter-spacing:.04em;color:var(--muted-2)}
.epos-site .kort-cta{margin-top:auto;padding-top:.9rem;font:500 .76rem/1.5 var(--sans);color:var(--muted-2);
transition:color 240ms ease}
.epos-site .kort-cta::after{content:' ↗'}
.epos-site a.kort:hover .kort-cta{color:var(--ink)}
/* ---------- trin, med tråden tegnet ned langs dem ---------- */
.epos-site .trin-rul{position:relative;padding-left:3.2rem}
.epos-site .traad-lodret{position:absolute;left:1.05rem;top:.4rem;width:4px;
height:calc(100% - .8rem);overflow:visible}
/* Højden skal sættes eksplicit. En SVG har et iboende sideforhold fra sin
viewBox, så top+bottom alene strækker den ikke — browseren regner højden
ud fra forholdet (4:100) og låser tråden til 100 px. Med height i procent
følger den rullens fulde højde. */
.epos-site .traad{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linecap:round;
vector-effect:non-scaling-stroke;opacity:.85}
.epos-site .trin-liste{display:grid;gap:var(--s3)}
.epos-site .trin{position:relative}
.epos-site .trin-nr{position:absolute;left:-3.2rem;top:.1rem;width:2.1rem;height:2.1rem;
display:grid;place-items:center;border:1px solid var(--gold-dim);border-radius:999px;
background:var(--ground);color:var(--gold);
font:400 .95rem/1 var(--serif);font-variant-numeric:tabular-nums}
.epos-site .trin-krop h3{font-size:1.4rem;font-weight:500}
.epos-site .trin-krop p{margin-top:.6rem;color:var(--muted);font-size:.95rem}
.epos-site .trin-krop .tlink{margin-top:1rem}
/* ---------- kapitler (historie-siden) ---------- */
.epos-site .kapitel-rul{position:relative;padding-left:2.6rem}
.epos-site .traad-lodret.lang{left:.55rem}
.epos-site .kapitler{display:grid;gap:var(--s4)}
.epos-site .kapitel{position:relative}
.epos-site .kapitel::before{content:'';position:absolute;left:-2.6rem;top:.75rem;
width:9px;height:9px;border-radius:999px;background:var(--gold);
box-shadow:0 0 0 4px var(--ground)}
.epos-site .kapitel h2{font-size:clamp(1.5rem,2.8vw,2.1rem);letter-spacing:-.01em}
.epos-site .kapitel p{margin-top:1rem;color:var(--muted)}
/* ---------- citat ---------- */
.epos-site .citat{border-left:2px solid var(--gold-dim);padding:.4rem 0 .4rem 1.6rem}
.epos-site .citat p{font-family:var(--serif);font-style:italic;
font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.4;color:var(--ink)}
.epos-site .citat footer{margin-top:1rem;font:400 .8rem/1.5 var(--sans);
letter-spacing:.06em;color:var(--muted-2);font-style:normal}
/* ---------- faktaboks ---------- */
.epos-site .fakta{border:1px solid var(--line);padding:var(--s3) 1.6rem}
.epos-site .fakta h2{font-size:1.5rem;font-weight:500;margin-top:.6rem}
.epos-site .fakta dl{margin:1.4rem 0 0;display:grid;gap:0}
.epos-site .fakta dl > div{display:grid;gap:.2rem 1.4rem;padding:.85rem 0;border-top:1px solid var(--line)}
@media(min-width:620px){.epos-site .fakta dl > div{grid-template-columns:8.5rem 1fr}}
.epos-site .fakta dt{font:500 .7rem/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;
color:var(--muted-2);padding-top:.15rem}
.epos-site .fakta dd{margin:0;font-size:.92rem;line-height:1.65;color:var(--muted)}
.epos-site .fakta a{border-bottom:1px solid var(--line)}
/* ---------- FAQ ---------- */
.epos-site .faq-liste{border-top:1px solid var(--line)}
.epos-site .faq-punkt{border-bottom:1px solid var(--line)}
.epos-site .faq-punkt h2,.epos-site .faq-punkt h3{margin:0;font-family:var(--sans);font-size:1rem;font-weight:500}
.epos-site .faq-sp{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
width:100%;min-height:64px;padding:1.1rem 0;border:0;background:none;text-align:left;
color:var(--ink);font:500 1rem/1.5 var(--sans);transition:color 220ms ease}
.epos-site .faq-sp:hover{color:var(--gold)}
.epos-site .faq-ikon{position:relative;flex-shrink:0;width:14px;height:14px}
.epos-site .faq-ikon::before,.epos-site .faq-ikon::after{content:'';position:absolute;background:currentColor;
transition:transform 320ms cubic-bezier(.22,.61,.36,1),opacity 320ms ease}
.epos-site .faq-ikon::before{top:6px;left:0;width:14px;height:1.5px}
.epos-site .faq-ikon::after{left:6px;top:0;width:1.5px;height:14px}
.epos-site .faq-sp[aria-expanded="true"] .faq-ikon::after{transform:rotate(90deg);opacity:0}
.epos-site .faq-sv{overflow:hidden}
.epos-site .faq-sv p{padding:0 0 1.4rem;max-width:60ch;color:var(--muted);font-size:.95rem}
.epos-site .faq-sv a{color:var(--ink);border-bottom:1px solid var(--line)}
/* ---------- medarbejdere ---------- */
.epos-site .hold-gitter{display:grid;gap:1px;background:var(--line);
border-block:1px solid var(--line);grid-template-columns:1fr 1fr}
@media(min-width:720px){.epos-site .hold-gitter{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.epos-site .hold-gitter{grid-template-columns:repeat(4,1fr)}}
.epos-site .person{display:flex;background:var(--ground)}
.epos-site .person-stille,.epos-site .person-aabn{display:flex;flex-direction:column;align-items:flex-start;
gap:.15rem;padding:var(--s3) 1.3rem;width:100%}
.epos-site .person-aabn{flex:1;background:none;border:0;color:inherit;font:inherit;
text-align:left;cursor:pointer}
.epos-site .person-foto{display:block;width:100%;margin-bottom:1rem}
/* display:block er ikke pynt. Et inline-element er en skrøbelig ramme for et
absolut placeret barn — Safari opløser den anderledes end Chrome, og
hover-billedet kan ende uden højde. Blokken gør rammen entydig. */
.epos-site .person-foto .photo{display:block;position:relative;aspect-ratio:1;border-radius:3px}
.epos-site .foto-hover{position:absolute;top:0;right:0;bottom:0;left:0;
width:100%;height:100%;z-index:2;opacity:0;
transition:opacity 480ms ease}
/* Plamagen lægger sig over begge billeder, ikke imellem dem. Ellers skiftede
hover-billedet både motiv og farvegreb på én gang. */
.epos-site .person-foto .photo::after{z-index:3}
.epos-site .foto-initialer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;
font:400 2.4rem/1 var(--serif);letter-spacing:.06em;color:var(--gold)}
.epos-site .person:hover .foto-hover,.epos-site .person:focus-within .foto-hover{opacity:1}
.epos-site .person-navn{font-family:var(--serif);font-size:1.12rem;font-weight:500;line-height:1.3;color:var(--ink)}
.epos-site .person-rolle{font-size:.8rem;color:var(--muted-2)}
/* Mærket i billedets hjørne siger, at kortet kan åbnes — samme cirkel som
elevrollekortene bruger, en tak mindre. Ligger over plamagen (z-index 3). */
.epos-site .person-medaljon{position:absolute;z-index:4;right:.6rem;bottom:.6rem;
width:32px;height:32px;display:grid;place-items:center;
border:1px solid var(--gold);border-radius:50%;color:var(--gold);
font-size:1.1rem;line-height:1;background:#17131FCC;
transition:transform 240ms ease,background-color 240ms ease,color 240ms ease}
.epos-site .person-aabn:focus-visible .person-medaljon{background:var(--gold);color:#241C2E}
@media(hover:hover){
.epos-site .person-aabn:hover .person-medaljon{background:var(--gold);color:#241C2E;
transform:translate(2px,-2px)}
}
.epos-site .person-mere{margin-top:.55rem;font:500 .74rem/1.5 var(--sans);color:var(--muted-2);
border-bottom:1px solid transparent;transition:color 220ms ease,border-color 220ms ease}
.epos-site .person-aabn:hover .person-mere,.epos-site .person-aabn:focus-visible .person-mere{
color:var(--ink);border-color:var(--line)}
/* ---------- medarbejderpanel ----------
Et ægte