/* =========================================================================
   KVSA Reünie — richting 1b "Het Scheepsjournaal"
   Geen ronde hoeken, geen schaduwen, geen gradients. Lijnen, geen dozen.
   ========================================================================= */

:root {
  --navy:        #0F2740;
  --paper:       #FBF8F2;
  --paper-alt:   #F2EDE3;
  --gold:        #9C7C3C;
  --brass:       #C9A967;
  --ink:         #22364B;

  --line-hair:   rgba(15,39,64,.14);
  --line:        rgba(15,39,64,.16);
  --line-input:  rgba(15,39,64,.28);
  --line-under:  rgba(15,39,64,.35);

  --text-80:  rgba(15,39,64,.80);
  --text-66:  rgba(15,39,64,.66);
  --text-55:  rgba(15,39,64,.55);
  --text-45:  rgba(15,39,64,.45);

  --op-paper-78: rgba(251,248,242,.78);
  --op-paper-60: rgba(251,248,242,.60);

  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans:  'Archivo', system-ui, sans-serif;

  --page:    1180px;
  --gutter:  44px;
  --radius:  0;
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; border-radius: var(--radius); }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
input, textarea, select, button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

::selection { background: var(--brass); color: var(--navy); }

/* ---------- typografie ---------- */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--navy); text-wrap: pretty; }

.h1        { font-size: clamp(32px, 6vw, 46px); line-height: 1.14; }
.h1-artikel{ font-size: clamp(33px, 6.6vw, 50px); line-height: 1.14; }
.h2        { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.2; }
.h2-artikel{ font-size: clamp(23px, 3.6vw, 28px); line-height: 1.25; }
.h3        { font-size: clamp(19px, 2.6vw, 25px); line-height: 1.25; }

.lead { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.78; color: var(--text-80); }
.body { font-size: 16.5px; line-height: 1.85; color: var(--ink); }
.klein { font-size: 14.5px; line-height: 1.7; color: var(--text-66); }
.noot  { font-size: 12.5px; line-height: 1.6; color: var(--text-45); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}
.eyebrow--brass { color: var(--brass); }

.meta {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-55);
  letter-spacing: .01em;
}

.italic-serif { font-family: var(--font-serif); font-style: italic; }

/* "Reünie" staat altijd cursief en in goud naast het rechte "KVSA". */
.reunie { font-family: var(--font-serif); font-style: italic; color: var(--gold); }
.op-navy .reunie { color: var(--brass); }

a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 4px; }
a:hover { color: var(--gold); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

.sectie { padding-block: 46px; }
.sectie--kort { padding-block: 34px; }
.sectie + .sectie { border-top: 1px solid var(--line); }

.zand { background: var(--paper-alt); }
.zand + .sectie, .sectie + .zand { border-top: 0; }

.navy-blok {
  background: var(--navy);
  color: var(--op-paper-78);
}
.navy-blok h1, .navy-blok h2, .navy-blok h3 { color: var(--paper); }
.navy-blok .meta { color: var(--op-paper-60); }

/* Alles op navy: links in messing, want navy op navy is onleesbaar.
   `.op-navy` staat ook op de CTA-footer en de beheerbalk. */
.navy-blok a:not(.btn), .op-navy a:not(.btn) {
  color: var(--brass);
  text-decoration-color: var(--brass);
}
.navy-blok a:not(.btn):hover, .op-navy a:not(.btn):hover { color: var(--paper); }

.grid-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: start; }
.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.grid-artikel { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }

.stapel    { display: flex; flex-direction: column; gap: 14px; }
.stapel-l  { display: flex; flex-direction: column; gap: 22px; }
.stapel-xl { display: flex; flex-direction: column; gap: 34px; }
.rij       { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

@media (max-width: 980px) {
  .grid-hero, .grid-2, .grid-artikel { grid-template-columns: 1fr; gap: 34px; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- sectiekop ---------- */
.sectiekop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 12px;
  margin-bottom: 26px;
}
.sectiekop--dun { border-bottom-width: 1px; border-bottom-color: var(--line); }

/* ---------- journaalregels ---------- */
.journaal { display: grid; }
.journaal-rij {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding-block: 12px;
  border-top: 1px solid var(--line-hair);
  align-items: baseline;
}
.journaal-rij:last-child { border-bottom: 1px solid var(--line-hair); }
.journaal-rij dt, .journaal-rij .label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--gold);
  letter-spacing: .02em;
}
.journaal-rij dd, .journaal-rij .waarde {
  font-size: 15px;
  line-height: 1.6;
  color: var(--navy);
}
.journaal-rij .toelichting { display: block; font-size: 13.5px; color: var(--text-55); }
.journaal--smal .journaal-rij { grid-template-columns: 56px 1fr; }

@media (max-width: 420px) {
  .journaal-rij { grid-template-columns: 52px 1fr; gap: 12px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 17px 42px;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 12px; letter-spacing: .20em; text-transform: uppercase;
  text-decoration: none;
  border: 0; cursor: pointer;
  transition: background-color .15s linear, color .15s linear;
}
.btn--primair { background: var(--navy); color: var(--paper); }
.btn--primair:hover { background: var(--gold); color: var(--paper); }
.btn--accent  { background: var(--brass); color: var(--navy); }
.btn--accent:hover { background: var(--paper); color: var(--navy); }
.btn--outline { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--paper); }
.btn--klein { padding: 11px 20px; font-size: 11px; letter-spacing: .16em; }

.link {
  font-family: var(--font-sans);
  font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px;
}
.link:hover { color: var(--gold); }

/* ---------- kade-strip ---------- */
.kade {
  background: var(--navy);
  color: var(--op-paper-78);
}
.kade-inhoud {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 9px;
  font-family: var(--font-sans);
  font-weight: 500; font-size: 10.5px; letter-spacing: .20em; text-transform: uppercase;
}
.kade-tel { color: var(--brass); white-space: nowrap; }
@media (max-width: 560px) {
  .kade-inhoud { font-size: 9.5px; letter-spacing: .14em; gap: 10px; }
}

/* ---------- masthead ---------- */
.masthead { border-bottom: 2px solid var(--navy); background: var(--paper); }
.masthead-inhoud {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-block: 26px;
}
.logotype {
  font-family: var(--font-serif);
  font-size: 40px; line-height: 1; color: var(--navy); text-decoration: none;
  display: block;
}
.logotype:hover { color: var(--navy); }
.payoff {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-55);
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) {
  font-family: var(--font-sans);
  font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--navy);
  padding-block: 12px;
}
.nav a:not(.btn):hover { color: var(--gold); }
.nav a[aria-current='page'] { color: var(--gold); }

@media (max-width: 860px) {
  .masthead-inhoud { flex-direction: column; align-items: flex-start; gap: 18px; }
  .logotype { font-size: 34px; }
  .nav { gap: 18px 22px; flex-wrap: wrap; }
  .nav .btn { padding: 13px 24px; }
}

/* ---------- beeldband ---------- */
.beeldband { background: var(--paper); }
.beeldband img { width: 100%; height: auto; mix-blend-mode: multiply; }
.beeldband .beeld-leeg { aspect-ratio: 2005 / 1096; }

/* ---------- beeld ---------- */
figure.beeld { display: block; }
.beeld img { mix-blend-mode: multiply; width: 100%; }
.beeld figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12px; line-height: 1.6; color: var(--text-55);
}
.beeld--lijn figcaption { padding-bottom: 12px; border-bottom: 1px solid var(--line-hair); }

/* Een plaatshouder die de ruimte van de latere foto vasthoudt. */
.beeld--vlak .beeld-leeg { aspect-ratio: 4 / 3; }

/* Plaatshouder zolang het archiefbeeld nog niet is aangeleverd. */
.beeld-leeg {
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-alt);
  border: 1px solid var(--line-input);
  color: var(--text-45);
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  text-align: center; padding: 20px;
  min-height: 90px;
}

/* ---------- aftelblok ---------- */
.aftel {
  background: var(--navy);
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.aftel-label {
  font-family: var(--font-sans);
  font-weight: 500; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--op-paper-78);
}
.aftel-cijfers { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--brass); }
.aftel-cijfers .eenheid { font-size: 15px; color: var(--op-paper-60); margin-inline: 2px 10px; }
.aftel-cijfers .eenheid:last-child { margin-right: 0; }

/* ---------- nieuwskaart ---------- */
.kaart {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: border-color .15s linear;
}
.kaart:hover { border-color: var(--navy); color: var(--navy); }
.kaart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; mix-blend-mode: multiply; }
.kaart .beeld-leeg { aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--line); }
.kaart-tekst { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.kaart-titel { font-family: var(--font-serif); font-size: 25px; line-height: 1.25; color: var(--navy); }
.kaart:hover .kaart-titel { color: var(--gold); }
.kaart-samenvatting { font-size: 14px; line-height: 1.7; color: var(--text-66); }

.kaart-compact {
  display: block; text-decoration: none;
  border-top: 1px solid var(--line-hair);
  padding-block: 16px;
}
.kaart-compact:first-child { border-top: 2px solid var(--navy); }
.kaart-compact .kaart-titel { font-size: 20px; }
.kaart-compact:hover .kaart-titel { color: var(--gold); }

/* ---------- quote ---------- */
.quote {
  background: var(--paper-alt);
  border-left: 3px solid var(--gold);
  padding: 22px 26px;
}
.quote p {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.6vw, 23px); line-height: 1.55; color: var(--navy);
}
.quote cite {
  display: block; margin-top: 12px;
  font-family: var(--font-sans); font-style: normal;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-55);
}

/* ---------- accordeon ---------- */
.vraag { border-top: 1px solid var(--line-hair); }
.vraag:last-of-type { border-bottom: 1px solid var(--line-hair); }
.vraag summary {
  cursor: pointer; list-style: none;
  padding-block: 14px;
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  font-family: var(--font-serif); font-size: 20px; line-height: 1.35;
  min-height: 44px;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: '+';
  font-family: var(--font-sans); font-size: 18px; color: var(--gold); line-height: 1;
}
.vraag[open] summary::after { content: '–'; }
.vraag summary:hover { color: var(--gold); }
.vraag-antwoord { padding-bottom: 16px; font-size: 15.5px; line-height: 1.8; color: var(--text-80); max-width: 62ch; }

/* ---------- in memoriam ---------- */
/*
  In memoriam staat apart van de rest: een dubbel kader met een messing
  binnenlijn, gecentreerd, zoals een rouwadvertentie in een krant. Het comité
  levert de namen later aan.
*/
.memoriam {
  background: var(--paper);
  border: 2px solid var(--navy);
  padding: 6px;
}
.memoriam-binnen {
  border: 1px solid var(--brass);
  padding: 38px 30px 42px;
  text-align: center;
}
.memoriam-binnen > p { max-width: 62ch; margin-inline: auto; }
.memoriam h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 23px;
  line-height: 1.3;
  color: var(--navy);
}
/* Twee haarlijnen met ruimte ertussen, als een scheiding in een advertentie. */
.memoriam h3::after {
  content: '';
  display: block;
  width: 54px;
  height: 3px;
  margin: 14px auto 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
}
.memoriam p { color: var(--text-66); }
.memoriam-namen {
  margin: 24px auto 0;
  padding-top: 22px;
  max-width: 900px;
  border-top: 1px solid var(--line-hair);
  list-style: none;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 2;
  color: var(--navy);
  /* Kolommen in plaats van één lange sliert. De regels blijven heel. */
  columns: 3 210px;
  column-gap: 40px;
}
.memoriam-namen li { break-inside: avoid; }
@media (max-width: 640px) { .memoriam-namen { columns: 1; } }

/* ---------- kaartje ---------- */
.kaartje { margin-top: 18px; }
.kaartje > a { display: block; border: 1px solid var(--line); }
.kaartje > a:hover { border-color: var(--navy); }
.beeld--kaart img { width: 100%; height: auto; display: block; }
.beeld--kaart .beeld-leeg { aspect-ratio: 16 / 9; }
.kaartje-adres { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Dankwoord onder de openingstekst: kleiner dan de lead, met een messing streep. */
.dankwoord {
  margin-top: 4px;
  padding-left: 14px;
  border-left: 2px solid var(--brass);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-80);
}

/* ---------- formulier ---------- */
.formulier { max-width: 720px; }
.form-sectie { margin-top: 44px; }
.form-sectie:first-of-type { margin-top: 0; }
.form-sectie > .eyebrow {
  border-bottom: 2px solid var(--navy);
  padding-bottom: 10px;
  margin-bottom: 24px;
}
.veldenrij { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
@media (max-width: 640px) { .veldenrij { grid-template-columns: 1fr; } }

.veld { display: flex; flex-direction: column; gap: 4px; }
.veld > label {
  font-family: var(--font-sans); font-weight: 500; font-size: 12px;
  letter-spacing: .08em; color: var(--navy);
}
.veld .hint { font-size: 12.5px; color: var(--text-55); }
.veld input[type='text'], .veld input[type='email'], .veld input[type='tel'], .veld input[type='number'] {
  border: 0;
  border-bottom: 1px solid var(--line-under);
  background: transparent;
  padding: 11px 0;
  font-size: 16.5px;
  min-height: 44px;
  width: 100%;
}
.veld input:hover { border-bottom-color: var(--navy); }
.veld textarea {
  border: 1px solid var(--line-input);
  background: var(--paper-alt);
  padding: 14px 16px;
  font-size: 16.5px; line-height: 1.7;
  width: 100%; min-height: 130px; resize: vertical;
}
.veld--fout input, .veld--fout textarea { border-bottom-color: var(--navy); border-bottom-width: 2px; }
.foutmelding { font-size: 13px; color: var(--navy); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-input);
  padding: 9px 14px;
  min-height: 44px;
  font-size: 14.5px;
  cursor: pointer;
}
.chip:hover { border-color: var(--navy); }
.chip input { accent-color: var(--gold); width: 17px; height: 17px; }
.chip:has(input:checked) { border-color: var(--navy); background: var(--paper-alt); }

.akkoord { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.7; cursor: pointer; }
.akkoord input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: 5px; flex: none; }

.dropzone {
  border: 1px solid var(--line-input);
  background: var(--paper-alt);
  padding: 26px;
  text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.dropzone input[type='file'] { font-size: 14px; max-width: 100%; }
.dropzone.sleep-over { border-color: var(--navy); border-width: 2px; }
.dropzone-lijst { font-size: 13.5px; color: var(--text-66); text-align: left; width: 100%; }
.dropzone-lijst li { padding-block: 3px; border-top: 1px solid var(--line-hair); list-style: none; }

.voortgang { height: 3px; background: var(--line-hair); }
.voortgang-vulling { height: 3px; background: var(--gold); transition: width .2s linear; }

.form-fouten {
  border-left: 3px solid var(--gold);
  background: var(--paper-alt);
  padding: 18px 22px;
  font-size: 15px;
}
.form-fouten ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------- deelrij ---------- */
.deelrij {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 10px;
}
.deelrij a {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--navy);
  min-height: 44px; display: inline-flex; align-items: center;
}
.deelrij a:hover { color: var(--gold); }
.deelrij .deel-label { color: var(--text-55); }

/* ---------- artikel ---------- */
.artikel-body { color: var(--ink); font-size: 16.5px; line-height: 1.85; max-width: 68ch; }
.artikel-body > * + * { margin-top: 22px; }
.artikel-body h2 { font-family: var(--font-serif); font-size: clamp(23px, 3.6vw, 28px); line-height: 1.25; margin-top: 40px; }
.artikel-body h3 { font-family: var(--font-serif); font-size: 22px; margin-top: 32px; }
.artikel-body ul, .artikel-body ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.artikel-body li::marker { color: var(--gold); }
.artikel-body blockquote {
  background: var(--paper-alt);
  border-left: 3px solid var(--gold);
  padding: 22px 26px;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 2.6vw, 23px); line-height: 1.55; color: var(--navy);
}
.artikel-body blockquote p { margin: 0; }
.artikel-body a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); }
.artikel-body img { margin-block: 30px; mix-blend-mode: multiply; }
.artikel-body hr { border: 0; border-top: 1px solid var(--line); margin-block: 34px; }

.zijkolom { display: flex; flex-direction: column; gap: 30px; position: sticky; top: 24px; }
@media (max-width: 980px) { .zijkolom { position: static; } }

/* ---------- tabel (beheer) ---------- */
.tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabel th, .tabel td { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line-hair); vertical-align: top; }
.tabel thead th {
  border-top: 0; border-bottom: 2px solid var(--navy);
  font-family: var(--font-sans); font-weight: 600; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap;
}
.tabel tbody tr:hover { background: var(--paper-alt); }
.tabel select, .tabel textarea, .tabel input[type='text'] {
  border: 1px solid var(--line-input); background: var(--paper); padding: 8px 10px;
  font-size: 14px; width: 100%; min-height: 40px;
}
.tabel textarea { min-height: 46px; resize: vertical; line-height: 1.5; }
.tabel-schuif { overflow-x: auto; }

.status-vlag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.status-vlag::before { content: ''; width: 9px; height: 9px; flex: none; border: 1px solid var(--navy); }
.status-vlag[data-status='bevestigd']::before { background: var(--navy); }
.status-vlag[data-status='komt-niet']::before { background: transparent; border-color: var(--text-45); }
.status-vlag[data-status='komt-niet'] { color: var(--text-55); }
.status-vlag[data-status='open']::before { background: var(--brass); border-color: var(--gold); }

/* ---------- gastenlijst ---------- */
.gastenlink {
  display: grid; grid-template-columns: 1fr minmax(260px, 1.2fr) auto; gap: 18px 26px; align-items: start;
  padding: 18px 0 22px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
}
.gastenlink input {
  width: 100%; border: 1px solid var(--line-input); background: var(--paper-alt);
  padding: 9px 11px; font-size: 13.5px; font-family: inherit; color: var(--ink);
}
@media (max-width: 860px) { .gastenlink { grid-template-columns: 1fr; } }
.gastenlijst td { font-size: 16px; }

/* ---------- fotoraster (beheer) ---------- */
.link[aria-current='page'] { color: var(--gold); }

.fotoraster {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 30px 26px;
}
.foto { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.foto-beeld {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--paper-alt); border: 1px solid var(--line);
  overflow: hidden; text-decoration: none;
}
.foto-beeld:hover { border-color: var(--navy); }
.foto-beeld img { width: 100%; height: 100%; object-fit: cover; }
.foto-type { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .18em; color: var(--gold); }
.foto-tekst { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.foto-tekst a.meta, .foto-weg {
  color: var(--navy); text-decoration: underline; text-decoration-color: var(--line-under); width: fit-content;
}
.foto-weg { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.foto-weg:hover, .foto-tekst a.meta:hover { color: var(--gold); }

/* ---------- footer ---------- */
.cta-footer { background: var(--navy); }
.cta-inhoud {
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  padding-block: 44px;
}
.cta-kop { font-family: var(--font-serif); font-size: clamp(24px, 3.4vw, 30px); line-height: 1.25; color: var(--paper); }
.cta-kop .deadline { color: var(--brass); }
.cta-contact { margin-top: 12px; font-size: 14px; color: var(--op-paper-78); }

.colofon {
  background: var(--navy);
  border-top: 1px solid rgba(251,248,242,.16);
  color: var(--op-paper-60);
}
.colofon-inhoud {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 20px;
  font-size: 12px;
}
.colofon a { color: var(--op-paper-60); text-decoration-color: rgba(251,248,242,.4); }
.colofon a:hover { color: var(--brass); }

/* ---------- overslaan-link ---------- */
.overslaan {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--paper); padding: 12px 20px; z-index: 10;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.overslaan:focus { left: 0; top: 0; position: fixed; color: var(--paper); }

/* ---------- print ---------- */
@media print {
  .kade, .nav, .cta-footer, .deelrij, .overslaan { display: none; }
  body { background: #fff; font-size: 11pt; }
  .navy-blok, .aftel { background: #fff; color: #000; border: 1px solid #000; }
}