/* Jens Søndergaard og Hustrus Mindelegat — fælles designsystem
   v=unify1 (2026-10-07). Én stylesheet for alle sider; sidetoppen (.page-head) er
   identisk på Forside, Historie, Modtagere, Bestyrelse og Kontakt. Ingen side-specifikke
   overrides af header, sidetop, typografi eller afstande. Alle mål kommer fra tokens nedenfor. */

/* ---------- Tokens ---------- */
:root {
  /* Farver */
  --paper: #f4f1ea;
  --ink: #1a1a1a;
  --text: #333;
  --nav: #444;
  --muted: #555;
  --soft: #777;
  --label: #888;
  --line: #d9d4c8;
  --placeholder: #cfc8b8;

  /* Skrift */
  --font-serif: "Times New Roman", Times, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Typeskala: 13 / 16 / 24 / 36 */
  --text-sm: 13px;  /* header, footer, overlinjer, metadata, billedtekster, kilder */
  --text-md: 16px;  /* brødtekst og lead */
  --text-lg: 24px;  /* sektions- og kortoverskrifter */
  --text-xl: 36px;  /* sidetitel (h1) */
  --lh-title: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --lh-small: 1.45;
  --track-title: -0.02em;
  --track-eyebrow: 0.12em;

  /* Afstandsskala: 4 / 8 / 12 / 16 / 24 / 32 / 48 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Layout */
  --max: 1440px;
  --pad: 48px;
  --measure: 40rem;          /* maks. linjelængde for lead (640px) */
  --chrome-header: 64px;
  --chrome-footer: 48px;
  --page-top: var(--space-7); /* fra headerlinjen til første element */
}
@media (min-width: 1100px) { :root { --pad: 56px; } }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body.mindelegat {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ---------- Header (fast) ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--chrome-header);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
}
.brand {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.menu {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4) 28px;
  font-size: var(--text-sm);
}
.menu a { color: var(--nav); white-space: nowrap; }
.menu a:hover { color: var(--ink); }

/* ---------- Footer (fast) ---------- */
.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  height: var(--chrome-footer);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  height: 100%;
}
.site-footer p { margin: 0; font-size: var(--text-sm); line-height: var(--lh-small); color: var(--soft); text-align: center; }

/* ---------- Sideramme ---------- */
body.mindelegat > main {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--chrome-header);
  padding-bottom: calc(var(--chrome-footer) + var(--space-7));
}

/* ---------- Sidetop: samme system på alle sider ---------- */
.page-head {
  margin: 0 0 var(--space-6);
  padding: var(--page-top) 0 var(--space-5);
  border-bottom: 1px solid var(--line);
}
.page-eyebrow,
.section-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--lh-small);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--label);
}
.page-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
  color: var(--ink);
}
.page-lead {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--muted);
}

/* ---------- Typografi i indhold ---------- */
main p,
main li {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--text);
}
main p:last-child, main li:last-child { margin-bottom: 0; }
main strong { font-weight: 600; color: var(--ink); }

.section-heading,
.teaser-card h2,
.board-card h2,
.gallery-card .name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-title);
  color: var(--ink);
}

/* Lille tekst: én stil (13px) til metadata, kilder og billedtekster */
.sources,
figcaption,
.gallery-card .year,
.gallery-card .cite,
.board-role,
.contact-note,
.back-link {
  font-size: var(--text-sm);
  line-height: var(--lh-small);
  color: var(--soft);
}
.gallery-card .cite { color: var(--muted); }

.source-link,
.gallery-card .cite a,
.recipients-also a,
.text-link {
  color: var(--soft);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.source-link, .text-link { font-size: inherit; } /* arver tekstens størrelse (13px i .sources/figcaption/footer, 16px i lead) */
.text-link { color: var(--ink); }
.teaser-card > .source-link { font-size: var(--text-sm); }

figcaption { margin: var(--space-2) 0 0; }

/* ---------- Sektioner ---------- */
.section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.section-heading { margin-bottom: var(--space-4); }

/* ---------- Forside ---------- */
.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
}
.hero-media img { width: 100%; height: auto; } /* maleriet vises i sit eget format, ubeskåret */

.teaser-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
.teaser-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
main .teaser-card p { margin: 0; }
main .teaser-card .section-label { margin: 0; }
.teaser-card > p:not(.section-label) { flex: 1 1 auto; }
.teaser-card > .source-link { margin-top: var(--space-2); }

/* ---------- Historie ---------- */
.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
  gap: var(--space-7);
  align-items: start;
}
.story-key-image {
  position: sticky;
  top: calc(var(--chrome-header) + var(--space-4));
}
.story-key-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--placeholder);
}
.purpose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
}
.purpose-grid ol { margin: 0; padding-left: 1.2em; }
main .purpose-grid li { margin-bottom: var(--space-2); }

/* ---------- Kortgitre (modtagere + bestyrelse): samme 1:1-billeder og afstande ---------- */
.gallery-grid,
.board-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  align-items: start;
}
.gallery-card,
.board-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.card-media { display: block; margin-bottom: var(--space-1); color: inherit; }
.frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--placeholder);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.board-card .frame img { object-position: center 20%; }
main .gallery-card p, main .board-card > p { margin: 0; }
.board-blurb { margin-top: var(--space-2); }
main .board-blurb p { margin-bottom: var(--space-3); }
main .board-blurb p:last-child { margin-bottom: 0; }

main .recipients-also {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.back-link {
  display: inline-block;
  margin-top: var(--space-7);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ---------- Kontakt ---------- */
.contact-panel { max-width: var(--measure); }
main .contact-email { margin-bottom: var(--space-2); }

/* ---------- Tablet / mobil ---------- */
@media (max-width: 900px) {
  :root {
    --pad: 28px;
    --chrome-header: 88px;
    --chrome-footer: 56px;
    --page-top: var(--space-6);
  }
  .site-header-inner { flex-wrap: wrap; align-content: center; gap: var(--space-2) var(--space-4); }
  .hero, .story-layout, .purpose-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .story-key-image { position: static; max-width: 320px; }
  .teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  :root { --pad: 20px; } /* footer: 1–2 centrerede linjer i 56px */
  .teaser-grid, .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .board-grid { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
}