@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --wit: #ffffff;
  --inkt: #0b0b0c;
  --grijs: #5f5f5c;
  --lijn: #e4e4e0;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r1: 4px; --r2: 8px; --r3: 16px; --r4: 24px; --r5: 40px; --r6: 64px;
  --rand: clamp(16px, 5vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wit); color: var(--inkt); font: 400 18px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--inkt); outline-offset: var(--r1); }
.skip { position: absolute; top: var(--r2); left: var(--rand); padding: var(--r2); background: var(--wit); transform: translateY(-200%); }
.skip:focus { transform: none; }
.retour { max-width: calc(62ch + var(--rand) + var(--rand)); margin: 0 auto; padding: var(--r4) var(--rand); }
.retour a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
main { padding: 0 var(--rand); }
article { max-width: 960px; margin: 0 auto; }
header, section, .contents, footer { max-width: 62ch; margin-inline: auto; }
header { padding-block: var(--r5) var(--r4); }
h1, h2, h3, p, figure, ol, ul { margin-block: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(40px, 3.7vw, 68px); line-height: 1; margin-block: var(--r3) var(--r4); }
h2 { font-size: clamp(32px, 3vw, 44px); line-height: 1.1; margin-bottom: var(--r4); }
h3 { font-size: 28px; line-height: 1.2; margin-block: var(--r5) var(--r3); }
p + p, p + ul, p + ol, ol + p, ul + p { margin-top: var(--r3); }
.label, .meta, figcaption { font-size: 14px; line-height: 1.55; color: var(--grijs); }
.label { letter-spacing: .12em; text-transform: uppercase; }
.definition { font-size: 21px; line-height: 1.5; }
.meta { margin-top: var(--r4); }
.contents { margin-top: var(--r4); padding-block: var(--r4); border-block: 1px solid var(--lijn); }
.contents ol { padding-left: var(--r4); margin-top: var(--r2); font-size: 16px; }
.contents a { display: inline-block; padding-block: var(--r2); }
section { margin-top: var(--r6); scroll-margin-top: var(--r4); }
section :target, h3[id] { scroll-margin-top: var(--r4); }
ul, ol { padding-left: var(--r4); }
li + li { margin-top: var(--r2); }
figure { --beeldbreedte: min(var(--beeldmax, 960px), calc(100vw - var(--rand) - var(--rand))); width: var(--beeldbreedte); margin: var(--r5) calc((100% - var(--beeldbreedte)) / 2); }
figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 85svh; margin-inline: auto; }
figure.portrait { --beeldmax: 640px; width: fit-content; max-width: min(100%, var(--beeldmax)); margin-inline: auto; }
figcaption { margin-top: var(--r2); overflow-wrap: anywhere; }
figcaption em { color: var(--inkt); }
.kop { margin-top: 0; }
[hidden] { display: none !important; }
.sources > p, .sources ul { font-size: 16px; }
.sources li { margin-top: var(--r3); overflow-wrap: anywhere; }
footer { margin-top: var(--r6); padding-block: var(--r4) var(--r6); border-top: 1px solid var(--lijn); color: var(--grijs); }
footer a { font-size: 14px; }

/* Every part stays in one column. Only paintings expand beyond the reading measure. */
@media (max-width: 480px) {
  body { font-size: 17px; }
  .definition { font-size: 20px; }
  header { padding-top: var(--r4); }
}

.jaar { letter-spacing: .06em; color: var(--grijs); }