/* Palet rond 1660: perkament, omber, ultramarijn, verdigris en meekraprood. */
:root {
  --parchment: #efe3c6;
  --parchment-dark: #e0cfa4;
  --parchment-edge: #c4a873;
  --linen: #f6efdd;
  --ink: #231a12;
  --ink-soft: #55402c;
  --sepia: #6b4a2b;
  --ochre: #b38b3e;
  --ochre-light: #d9bd7c;
  --ultramarine: #2c4a86;
  --ultramarine-dark: #1b3060;
  --verdigris: #3d6b5c;
  --verdigris-dark: #284a3f;
  --madder: #86261d;
  --madder-dark: #5c1913;
  --night: #1a130d;

  --font-display: "IM Fell French Canon", "IM Fell English", Georgia, serif;
  --font-caps: "IM Fell English SC", "Times New Roman", serif;
  --font-fell: "IM Fell English", Georgia, serif;
  --font-body: "EB Garamond", Garamond, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 40px);
  --measure: 62ch;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  background-color: var(--parchment);
  background-image:
    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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 15% 5%, rgba(255, 248, 225, .75), transparent 55%),
    radial-gradient(ellipse at 85% 95%, rgba(140, 105, 55, .18), transparent 60%);
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: normal; }

h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
}

h3 {
  font-family: var(--font-caps);
  font-size: 1.4em;
  line-height: 1.2;
}

p { margin: 0 0 .9em; }
a { color: var(--ultramarine); }

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

/* Kleine regel in oude spelling boven een kop */
.oldspell {
  margin: 0 0 .2em;
  text-align: center;
  font-family: var(--font-fell);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--sepia);
  letter-spacing: .02em;
}

/* ── Hero: als een titelpagina, met licht van linksboven ────────── */
.hero {
  position: relative;
  padding: clamp(28px, 6vw, 72px) var(--gutter);
  color: var(--linen);
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%, rgba(240, 214, 160, .30), transparent 60%),
    radial-gradient(ellipse at 90% 110%, rgba(44, 74, 134, .35), transparent 65%),
    linear-gradient(160deg, #3a2a1b 0%, #231a12 45%, #15100b 100%);
  overflow: hidden;
  isolation: isolate;
}

.titlepage {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(36px, 7vw, 76px) clamp(18px, 5vw, 60px) clamp(36px, 6vw, 64px);
  text-align: center;
  border: 1px solid rgba(217, 189, 124, .55);
  outline: 1px solid rgba(217, 189, 124, .3);
  outline-offset: 6px;
}
.titlepage::before,
.titlepage::after {
  /* hoekversieringen */
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ochre-light);
  opacity: .7;
}
.titlepage::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.titlepage::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.kicker {
  font-family: var(--font-caps);
  letter-spacing: .26em;
  font-size: clamp(.9rem, .8rem + .4vw, 1.1rem);
  color: var(--ochre-light);
  margin-bottom: .6em;
}

.title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, .9rem + 8vw, 7rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--linen);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.anno {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  color: var(--parchment-dark);
  margin: .35em 0 1.3em;
}

.ribbon {
  position: relative;
  display: inline-block;
  margin: 0 auto 1.5em;
  padding: .45em 2em;
  font-family: var(--font-caps);
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.8rem);
  color: var(--linen);
  background: linear-gradient(180deg, #3a5c9e 0%, var(--ultramarine-dark) 100%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .35);
}
.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 1.4em;
  height: 100%;
  background: #14244a;
  z-index: -1;
}
.ribbon::before { left: -1em; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); }
.ribbon::after  { right: -1em; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }

.lead {
  max-width: 32ch;
  margin: 0 auto 1em;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  color: var(--parchment);
}

.countdown {
  font-family: var(--font-caps);
  letter-spacing: .06em;
  color: var(--ochre-light);
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  min-height: 1.6em;
  margin-bottom: 1.6em;
}
.countdown strong { font-family: var(--font-display); font-size: 1.7em; color: var(--linen); font-weight: normal; padding: 0 .1em; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.btn {
  display: inline-block;
  padding: .7em 1.5em;
  font-family: var(--font-caps);
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-decoration: none;
  color: var(--linen);
  border: 2px solid var(--parchment-edge);
  background: transparent;
  transition: background-color .15s, transform .15s;
}
.btn:hover { background: rgba(239, 227, 198, .12); transform: translateY(-1px); }
.btn-primary { background: var(--madder); border-color: var(--madder); }
.btn-primary:hover { background: #9c2f24; }

.hero-seal {
  position: absolute;
  width: clamp(72px, 10vw, 112px);
  height: clamp(72px, 10vw, 112px);
  right: clamp(-40px, -3vw, -20px);
  bottom: clamp(-40px, -3vw, -20px);
  z-index: 1;
  transform: rotate(-14deg);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
}
@media (max-width: 640px) { .hero-seal { display: none; } }

/* ── Algemeen voor secties ────────────────────────────────────── */
main > section {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) var(--gutter);
}

.section-intro {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  margin: .5em auto 2.2em;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  color: var(--sepia);
}
.divider svg { width: min(260px, 70vw); height: 40px; }

/* ── Bekendmaking ─────────────────────────────────────────────── */
.plakkaat { padding-top: clamp(48px, 8vw, 90px); }

.parchment {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(22px, 6vw, 70px) clamp(28px, 5vw, 50px);
  background: radial-gradient(ellipse at 50% 50%, #f8edd2 40%, #e9d6a8 100%);
  box-shadow:
    inset 0 0 60px rgba(120, 80, 30, .32),
    inset 0 0 6px rgba(120, 80, 30, .5),
    0 18px 40px -18px rgba(35, 26, 18, .55);
  border-radius: 3px;
  transform: rotate(-.6deg);
}
.parchment::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(107, 74, 43, .45);
  outline: 1px solid rgba(107, 74, 43, .25);
  outline-offset: 4px;
  pointer-events: none;
}

.plakkaat-head {
  font-size: clamp(2.4rem, 1.8rem + 3vw, 3.8rem);
  margin-bottom: .5em;
}

.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.4em;
  line-height: .8;
  padding: .08em .12em 0 0;
  color: var(--madder);
}

.signed {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 1.6em 0 0;
  font-family: var(--font-fell);
  font-style: italic;
  color: var(--ink-soft);
}
.signed-seal { width: 76px; height: 76px; flex: none; transform: rotate(10deg); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }

/* ── Programma ────────────────────────────────────────────────── */
.days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}

.day {
  display: grid;
  grid-template-columns: 120px 1fr;
  background: rgba(255, 250, 236, .55);
  border: 1px solid rgba(107, 74, 43, .35);
  box-shadow: 0 10px 24px -18px rgba(35, 26, 18, .6);
}

.day-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
  color: var(--linen);
  background: linear-gradient(180deg, var(--ultramarine), var(--ultramarine-dark));
  text-align: center;
}
.day:nth-child(2) .day-date { background: linear-gradient(180deg, var(--verdigris), var(--verdigris-dark)); }
.day:nth-child(3) .day-date { background: linear-gradient(180deg, var(--madder), var(--madder-dark)); }
.dow { font-family: var(--font-caps); letter-spacing: .12em; font-size: .95rem; }
.num { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; }
.mon { font-family: var(--font-fell); font-style: italic; font-size: 1rem; opacity: .9; }

.day-body { padding: 22px clamp(18px, 3vw, 32px); display: grid; gap: 20px; }

.moment p:last-child { margin-bottom: 0; }
.when {
  font-family: var(--font-caps);
  letter-spacing: .14em;
  font-size: .9rem;
  color: var(--sepia);
  margin-bottom: .1em;
}
.moment h3 { margin-bottom: .25em; }

.later {
  border-top: 1px dashed rgba(107, 74, 43, .45);
  padding-top: 20px;
}

.badge {
  display: inline-block;
  margin-left: .6em;
  padding: .1em .6em;
  font-family: var(--font-fell);
  font-style: italic;
  letter-spacing: 0;
  font-size: .95rem;
  color: var(--linen);
  background: var(--ultramarine);
  border-radius: 2px;
  vertical-align: 1px;
}

.moment.main h3 { font-size: 1.6em; }

.fallback { color: var(--ink-soft); }
.fallback h3 { font-size: 1.2em; }
.fallback p { font-size: .95em; }

.callout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 30px;
  padding: 22px clamp(18px, 3vw, 30px);
  color: var(--linen);
  background: linear-gradient(135deg, var(--ink), #3a2a1b);
  border-left: 6px solid var(--ochre);
}
.callout h3 { color: var(--ochre-light); margin-bottom: .2em; }
.callout p { margin: 0; color: var(--parchment); }
.callout-icon { width: 44px; height: 44px; flex: none; color: var(--ochre-light); margin-top: 4px; }

@media (max-width: 560px) {
  .day { grid-template-columns: 1fr; }
  .day-date { flex-direction: row; gap: .5em; padding: 12px; }
  .num { font-size: 2rem; }
}

/* ── Bestemming ───────────────────────────────────────────────── */
.bestemming {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.bestemming .oldspell,
.bestemming h2 { text-align: left; }
.bestemming h2 { margin-bottom: .5em; }

.map {
  position: relative;
  margin: 0;
  padding: 10px;
  background: radial-gradient(ellipse at 50% 50%, #f6e8c4 30%, #dbc28c 100%);
  box-shadow: inset 0 0 40px rgba(120, 80, 30, .45), 0 18px 40px -20px rgba(35, 26, 18, .6);
  transform: rotate(1.2deg);
}
.map svg { display: block; width: 100%; height: auto; }

.map-seal {
  position: absolute;
  right: 12%;
  top: 22%;
  width: 26%;
  aspect-ratio: 1;
  transform: rotate(-12deg);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .45));
}
.map-seal svg { width: 100%; height: 100%; }
.map-seal span {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%) rotate(4deg);
  padding: .1em .7em;
  font-family: var(--font-caps);
  font-size: clamp(.8rem, .6rem + .6vw, 1.05rem);
  letter-spacing: .12em;
  color: var(--linen);
  background: var(--ink);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .bestemming { grid-template-columns: 1fr; }
  .bestemming .oldspell,
  .bestemming h2 { text-align: center; }
}

/* ── Vragen ───────────────────────────────────────────────────── */
.vragen h2 { margin-bottom: 1em; }
.faq { max-width: 760px; margin: 0 auto; }

details { border-bottom: 1px solid rgba(107, 74, 43, .4); }
details:first-child { border-top: 1px solid rgba(107, 74, 43, .4); }

summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  font-family: var(--font-caps);
  font-size: 1.15em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  font-family: var(--font-body);
  color: var(--madder);
  font-size: 1.3em;
  line-height: 1;
  transition: transform .2s;
}
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 4px 16px; margin: 0; color: var(--ink-soft); max-width: var(--measure); }

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
  margin-top: clamp(40px, 7vw, 80px);
  background: var(--night);
  color: var(--parchment-dark);
  border-top: 3px double var(--ochre);
}
.footer-inner { padding: 30px var(--gutter) 40px; text-align: center; }
.footer-inner p { margin: 0; }
.footer-fleuron { width: 180px; height: 32px; color: var(--ochre); margin-bottom: 8px; }
.motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--ochre-light);
}
.motto-nl {
  font-family: var(--font-fell);
  font-style: italic;
  color: var(--parchment-edge);
  margin-bottom: .8em !important;
}