/* ==========================================================================
   Dragsbech-slægten, fælles designsystem
   Én kilde til farver, typografi og komponenter for hele sitet.
   Har afløst den gamle slaegt.css og skal på sigt også overtage de
   indlejrede style-blokke i index.html og stamtavle.html.
   ========================================================================== */

/* --- 1. Grundtoner ------------------------------------------------------- */

:root{
  /* Papir og blæk. Værdierne er forsidens, som er slægtens rigtige palet. */
  --papir:#f2e8d5;
  --papir-dyb:#e7d9bc;
  --kort:#faf4e6;
  --blaek:#26211a;
  --brun:#5c4b37;
  --segl:#7d2b1c;
  --guld:#a07a3e;
  --linje:#c9b58c;
  --linje-blid:#ded0ae;
  --moerk:#33291a;
  --lys:#f3e9d2;

  /* Roller. Komponenter bruger disse, ikke råfarverne. */
  --flade:var(--papir);
  --flade-hoej:var(--kort);
  --tekst:var(--blaek);
  --tekst-svag:var(--brun);
  --kant:var(--linje);
  --kant-blid:var(--linje-blid);
  --accent:var(--segl);
  --link:var(--segl);

  /* Rytme */
  --r1:.25rem; --r2:.5rem; --r3:.75rem; --r4:1rem;
  --r5:1.5rem; --r6:2rem; --r7:3rem; --r8:4.5rem;

  --rund:10px; --rund-lille:6px; --rund-pille:999px;
  --skygge:0 1px 2px rgba(38,33,26,.05), 0 4px 14px rgba(38,33,26,.07);
  --skygge-loeft:0 2px 6px rgba(38,33,26,.09), 0 10px 26px rgba(38,33,26,.11);

  /* Mål */
  --maal-tekst:66ch;
  --maal-side:1140px;
  --top-hoejde:52px;

  --brod:"EB Garamond",Georgia,"Times New Roman",serif;
  --display:"Fraunces","Playfair Display",Georgia,serif;
}

/* Sitet er bevidst ét udtryk: papir. Der er ingen mørk tilstand.
   Den blev prøvet af og slået fra igen, fordi den slås med hele idéen om
   et arkiv på papir, og fordi flere ting ikke følger med: kortene i
   stamtavlen tegnes som SVG med farverne skrevet ind i javascriptet,
   passepartout'erne om forsidens fotos er malet lyse med vilje, og de
   scannede billeder har selv lys bund. Skal den nogensinde tilbage, er
   det dem, der skal løses først.
   Derfor sætter vi color-scheme, så browseren ikke selv finder på at
   invertere formularfelter og rullepanel. */
:root{color-scheme:light}

/* --- 2. Nulstilling og bund ---------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Den klæbende topbjælke må ikke æde overskrifter ved spring til anker. */
  scroll-padding-top:calc(var(--top-hoejde) + var(--r4));
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background-color:var(--flade);
  /* Papiret: lys i toppen, skygge i kanterne og en fin kornstruktur.
     Lå før kun på forsiden, nu ligger det på hele sitet. */
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(255,252,240,.75), rgba(255,252,240,0) 55%),
    radial-gradient(ellipse at 50% 115%, rgba(90,66,35,.16), rgba(90,66,35,0) 55%),
    radial-gradient(ellipse at -10% 50%, rgba(90,66,35,.10), rgba(90,66,35,0) 40%),
    radial-gradient(ellipse at 110% 50%, rgba(90,66,35,.10), rgba(90,66,35,0) 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,fixed,fixed,scroll;
  color:var(--tekst);
  font-family:var(--brod);
  font-size:clamp(17px,.95rem + .35vw,20px);
  line-height:1.65;
  text-rendering:optimizeLegibility;
  font-kerning:normal;
}
img{max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:var(--guld);color:var(--lys)}
hr{border:0;border-top:1px solid var(--kant-blid);margin:var(--r6) 0}

h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance}
h1{font-weight:900;font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem);margin:.1em 0 .3em}
h1 .years{font-weight:400;color:var(--tekst-svag);font-size:.58em;white-space:nowrap}
h2{
  font-weight:600;font-size:clamp(1.15rem,1rem + .6vw,1.4rem);
  margin:var(--r6) 0 var(--r2);padding-bottom:.2em;
  border-bottom:1px solid var(--kant-blid);
}
h3{font-weight:600;font-size:1.05rem;margin:var(--r5) 0 var(--r1)}

/* --- 3. Skelet ----------------------------------------------------------- */

.top{
  position:sticky;top:0;z-index:20;
  background:var(--moerk);color:var(--lys);
  font-size:.82rem;letter-spacing:.03em;
  display:flex;align-items:center;gap:var(--r1);
  padding:0 var(--r4);min-height:var(--top-hoejde);
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}
.top a{
  color:var(--lys);display:inline-flex;align-items:center;
  min-height:44px;padding:0 var(--r3);border-radius:var(--rund-lille);
}
.top a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.top .sep{opacity:.4}

main{
  max-width:var(--maal-tekst);
  margin:0 auto;
  padding:var(--r5) var(--r5) var(--r8);
}
main.bred{max-width:var(--maal-side)}

.crumb{font-size:.8rem;color:var(--tekst-svag);margin:0 0 var(--r4)}
.crumb span{color:var(--tekst)}

.foot{
  max-width:var(--maal-side);margin:0 auto;
  padding:var(--r5) var(--r5) var(--r7);
  color:var(--tekst-svag);font-size:.82rem;
  border-top:1px solid var(--kant-blid);
}

/* --- 4. Knapper og pilleformer ------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:46px;padding:0 var(--r5);
  background:var(--accent);color:#fdf6e7;
  border:1px solid transparent;border-radius:var(--rund-pille);
  font-family:var(--brod);font-size:1rem;letter-spacing:.01em;
  transition:background .15s ease, box-shadow .15s ease;
}
.btn:hover{background:#5f2020;text-decoration:none;box-shadow:var(--skygge)}
.btn-blid{
  background:var(--flade-hoej);color:var(--tekst);border-color:var(--kant);
}
.btn-blid:hover{background:var(--papir-dyb);box-shadow:var(--skygge)}
.cta{margin:var(--r6) 0 0}

.pille{
  display:inline-flex;align-items:center;min-height:38px;padding:0 var(--r4);
  background:var(--flade-hoej);border:1px solid var(--kant);
  border-radius:var(--rund-pille);font-size:.9rem;color:var(--tekst);
}
.pille:hover{border-color:var(--guld);text-decoration:none;box-shadow:var(--skygge)}

/* --- 4b. Pladen: bredt arkivbillede i toppen af en side ------------------ */

/* Maleriet er 1400 px bredt. Strækkes det ud over hele en bred skærm, bliver
   det både opskaleret og skåret ned til en smal strimmel: på 1900 px så man
   kun 24 % af billedet. Derfor stopper pladen ved billedets egen bredde og
   står midt på papiret som en opklæbet plade. På alt smallere er den stadig
   kant til kant. */
.plade{position:relative;margin:0 auto;line-height:0;max-width:1400px}
.plade img{
  width:100%;height:clamp(230px,40vh,430px);
  object-fit:cover;object-position:50% 45%;display:block;
}
/* Billedet toner ud i papiret, så pladen ikke skærer siden over. */
.plade::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:48%;
  background:linear-gradient(to bottom,transparent,var(--flade));
  pointer-events:none;
}
.plade figcaption{
  position:absolute;right:var(--r4);bottom:var(--r2);z-index:1;
  line-height:1.45;font-size:.68rem;letter-spacing:.04em;
  color:var(--tekst-svag);text-align:right;max-width:44ch;
}
.plade figcaption a{color:inherit;border-bottom:1px solid var(--kant)}
@media (max-width:640px){
  /* På en telefon skærer et bredformat-maleri siderne af. Her vises det
     derfor helt, i sit eget forhold. Det er samtidig lavere end en beskåret
     stribe, så toppen af siden bliver kortere. */
  .plade img{height:auto;aspect-ratio:1400/958}
  .plade figcaption{position:static;text-align:left;max-width:none;
    padding:var(--r2) var(--r5) 0;margin:0 auto}
  .plade::after{display:none}
}

/* --- 5. Person-siden ----------------------------------------------------- */

.p-hoved{margin-bottom:var(--r5)}
.p-resume{
  font-size:1.05rem;color:var(--tekst-svag);font-style:italic;
  margin:.1em 0 0;max-width:48ch;
}
.inbranch{margin:0 0 .1em;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}
.inbranch a{color:inherit;border-bottom:1px solid var(--kant)}

.p-grid{display:grid;gap:var(--r6)}
@media (min-width:900px){
  main.person{max-width:var(--maal-side)}
  .p-grid{grid-template-columns:290px minmax(0,1fr);gap:var(--r7);align-items:start}
  .p-side{position:sticky;top:calc(var(--top-hoejde) + var(--r4))}
}
.p-tekst>:first-child{margin-top:0}
.p-tekst p{max-width:var(--maal-tekst)}

.portraet{margin:0 0 var(--r4)}
.portraet img{
  width:100%;display:block;border-radius:var(--rund);
  border:1px solid var(--kant);background:var(--flade-hoej);
  box-shadow:var(--skygge);
}
.portraet figcaption{
  font-size:.78rem;color:var(--tekst-svag);line-height:1.45;margin-top:var(--r2);
}

/* Faktakort: født, død, erhverv, gren */
.fakta{
  margin:0 0 var(--r5);padding:var(--r4) var(--r4) var(--r3);
  background:var(--flade-hoej);border:1px solid var(--kant-blid);
  border-radius:var(--rund);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.3em var(--r4);font-size:.92rem;
}
.fakta dt{
  color:var(--tekst-svag);font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;padding-top:.32em;
}
.fakta dd{margin:0}

/* --- 6. Miniature-stamtavle ---------------------------------------------- */

.minitrae{
  margin:0 0 var(--r5);padding:var(--r4);
  background:var(--flade-hoej);border:1px solid var(--kant-blid);
  border-radius:var(--rund);
}
.mt-rk{
  display:grid;grid-template-columns:7.5em minmax(0,1fr);
  gap:var(--r2) var(--r4);align-items:baseline;
  padding:var(--r2) 0;
}
.mt-rk + .mt-rk{border-top:1px solid var(--kant-blid)}
.mt-selv{background:linear-gradient(90deg,transparent,rgba(160,122,62,.07) 40%,transparent)}
.mt-chips{display:flex;flex-wrap:wrap;gap:var(--r2)}
.mt-mrk{
  font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--tekst-svag);text-align:right;line-height:1.5;
}
.mt-aar{display:block;letter-spacing:0;text-transform:none;font-size:.95em;opacity:.8}
@media (max-width:540px){
  .mt-rk{grid-template-columns:1fr;gap:var(--r1)}
  .mt-mrk{text-align:left}
}
.mt-kort{
  display:inline-block;padding:.4em .85em;
  background:var(--flade);border:1px solid var(--kant);border-radius:var(--rund-pille);
  font-size:.88rem;color:var(--tekst);line-height:1.3;max-width:100%;
}
a.mt-kort:hover{border-color:var(--guld);text-decoration:none;box-shadow:var(--skygge)}
.mt-kort .aar{color:var(--tekst-svag);font-size:.85em}
.mt-mig{
  background:var(--accent);border-color:var(--accent);color:#fdf6e7;font-weight:600;
}
.mt-mig .aar{color:rgba(253,246,231,.75)}
/* Lodret forbindelseslinje mellem lagene */
.mt-streg{
  width:1px;height:var(--r5);margin:0 auto;
  background:var(--kant);
}
.mt-ingen{color:var(--tekst-svag);font-size:.85rem;font-style:italic}

/* --- 7. Billeder --------------------------------------------------------- */

.gal{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:var(--r4);margin:var(--r3) 0 var(--r5);
  /* uden start får felterne rækkens højde, og så virker line-clamp ikke */
  align-items:start;
}
.gal figure{
  margin:0;background:var(--flade-hoej);border:1px solid var(--kant-blid);
  border-radius:var(--rund);overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.gal figure:hover{border-color:var(--guld);box-shadow:var(--skygge-loeft)}
.gal a.foto-link{display:block;line-height:0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gal figcaption{
  font-size:.76rem;color:var(--tekst-svag);padding:var(--r3);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
.gal figure:only-child{max-width:360px}

/* Lysbord uden javascript: figuren linker til #foto-N */
.lys{
  position:fixed;inset:0;z-index:60;
  display:none;place-items:center;
  background:rgba(20,16,10,.93);padding:var(--r5);
}
.lys:target{display:grid}
.lys img{max-width:min(1100px,92vw);max-height:78vh;object-fit:contain;
  border-radius:var(--rund-lille);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lys figcaption{
  color:#e9dcc2;font-size:.9rem;max-width:70ch;margin:var(--r4) auto 0;
  text-align:center;line-height:1.5;
}
.lys-luk{
  position:absolute;top:var(--r4);right:var(--r5);
  color:#e9dcc2;font-size:1rem;border:1px solid rgba(233,220,194,.35);
  border-radius:var(--rund-pille);padding:.5em 1.1em;
}
.lys-luk:hover{background:rgba(233,220,194,.12);text-decoration:none}

/* --- 8. Brødtekst, kilder, film ------------------------------------------ */

.bio{font-size:1.04rem}
.bio strong{font-weight:600}
.src{padding-left:1.1em;font-size:.9rem;color:var(--tekst-svag)}
.src li{margin:.25em 0}
.mere{margin:.2em 0 var(--r5);font-size:.9rem}
.mere a{border-bottom:1px solid var(--kant)}

.film{
  position:relative;padding-bottom:56.25%;height:0;margin:var(--r3) 0 var(--r2);
  background:#1b1508;border:1px solid var(--kant);border-radius:var(--rund);
  overflow:hidden;
}
.film iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.filmkredit{font-size:.85rem;color:var(--tekst-svag);margin:.2em 0 var(--r5)}

/* --- 9. Hub, gren- og fejlsider ------------------------------------------ */

.lead{font-size:1.05rem;color:var(--tekst-svag);margin:.2em 0 var(--r6);max-width:60ch}
.alpha{
  position:sticky;top:var(--top-hoejde);z-index:10;
  background:var(--flade);padding:var(--r3) 0;
  border-bottom:1px solid var(--kant-blid);
  display:flex;flex-wrap:wrap;gap:var(--r1) var(--r2);font-size:.9rem;
}
.alpha a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;min-height:40px;border-radius:var(--rund-lille);
}
.alpha a:hover{background:var(--flade-hoej);text-decoration:none}
.grp{
  margin:var(--r6) 0 var(--r2);font-family:var(--display);
  font-size:1.4rem;color:var(--accent);
}
.plist{list-style:none;padding:0;margin:0;column-width:320px;column-gap:var(--r7)}
.plist li{margin:.1em 0;break-inside:avoid;font-size:.95rem}
.plist a{display:inline-block;padding:.2em 0}
.plist .yr{color:var(--tekst-svag);font-size:.9em}

.hero-era{
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin:.2em 0 .1em;
}
.hero-lead{font-size:1.1rem;color:var(--tekst-svag);font-style:italic;margin:.1em 0 var(--r5)}
.story p{font-size:1.04rem;margin:.7em 0;max-width:var(--maal-tekst)}
.feat{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:var(--r4);margin:var(--r5) 0 var(--r2);
}
.feat a{
  display:block;background:var(--flade-hoej);border:1px solid var(--kant-blid);
  border-radius:var(--rund);overflow:hidden;color:inherit;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.feat a:hover{border-color:var(--guld);text-decoration:none;box-shadow:var(--skygge-loeft)}
.feat img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.feat .cap{padding:var(--r3);font-size:.8rem;line-height:1.35}
.feat .cap b{font-weight:600;display:block}
.feat .cap span{color:var(--tekst-svag);font-size:.9em}
.count{color:var(--tekst-svag);font-weight:400;font-size:.7em}
.related{display:flex;flex-wrap:wrap;gap:var(--r2);margin:var(--r3) 0}
.related a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 var(--r4);
  background:var(--flade-hoej);border:1px solid var(--kant);
  border-radius:var(--rund-pille);font-size:.9rem;
}
.related a:hover{border-color:var(--guld);text-decoration:none}

.nf{text-align:center;padding:var(--r7) 0 var(--r4)}
.nf p{color:var(--tekst-svag);font-size:1rem;max-width:34em;margin:.5em auto var(--r5)}

/* --- 10. Tryk ------------------------------------------------------------ */

@media print{
  :root{--flade:#fff;--flade-hoej:#fff;--tekst:#000;--tekst-svag:#444;
        --kant:#bbb;--kant-blid:#ddd}
  .top,.cta,.btn,.alpha,.lys,.lys-luk,.mere{display:none!important}
  body{font-size:11pt;line-height:1.45}
  main,main.person{max-width:none;padding:0}
  .p-grid{grid-template-columns:200px 1fr;gap:1.2cm}
  .p-side{position:static}
  .gal{grid-template-columns:repeat(3,1fr)}
  .gal figcaption{-webkit-line-clamp:unset}
  a{color:#000;text-decoration:none}
  .src a::after{content:" (" attr(href) ")";font-size:.85em;color:#555;word-break:break-all}
  h2{break-after:avoid}
  figure,li{break-inside:avoid}
}