/*
  Knollentrekkers theme stylesheet. Mobile first, one file, no framework.

  Two variants share all layout and templates; only the tokens below differ:
  - .theme-standaard: the permanent house style (purple, green, yellow, Open Sans 800 uppercase,
    logo on a white slanted card, names of the highnesses in a script face).
  - .theme-jubileum: the temporary 66 year jubilee style (yellow, pink, lime, Lilita One, jubilee logo).
  The variant is chosen with the setting Knollentrekkers:Theme:Variant (see docs/theme.md).

  Contrast notes (WCAG AA): white on purple #ab3a8e 5.6:1, white on green #00792d 5.6:1,
  yellow on purple 4.5:1 (large text only), ink on yellow 11.7:1. Jubilee: magenta #c40e74 5.7:1 on white,
  ink on lime 7:1, white on forest #0a7d48 5.2:1, never yellow on lime.
*/

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Qwitcher Grypen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/qwitcher-grypen-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lilita-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* House style (standaard). */
  --ink: #212934;
  --ink-soft: #4a4e57;
  --primary: #ab3a8e;
  --primary-dark: #8a2c72;
  --primary-tint: #f7ebf4;
  --green: #65bd7d;
  --green-tint: #e8f5eb;
  --green-dark: #00792d;
  --yellow: #ffe700;
  --line: #e5e4e3;
  --mist: #f9f9fb;
  --white: #ffffff;
  --error: #b3261e;
  --error-tint: #fdecea;

  /* Roles, so a variant only has to swap these. */
  --title-color: var(--primary);
  --label-bg: var(--green-dark);
  --label-text: var(--white);
  --header-bg: var(--primary);
  --header-text: var(--white);
  --webshop-bg: var(--green-dark);
  --band-bg: var(--primary);
  --band-text: var(--white);
  --band-title: var(--yellow);
  --band-tile-bg: rgba(33, 41, 52, 0.35);
  --photos-bg: var(--yellow);
  --photos-text: var(--ink);
  --photos-link: var(--primary-dark);
  --sponsors-bg: var(--mist);
  --footer-bg: var(--primary);
  --footer-bottom-bg: #1d242d;
  --footer-title: var(--white);
  --pagehead-bg: var(--primary);
  --pagehead-text: var(--white);
  --pagehead-title: var(--yellow);
  --facts-bar-bg: var(--green-dark);
  --panel-green: #e8f5eb;
  --facts-bar-text: var(--white);
  --footer-text: rgba(255, 255, 255, 0.88);
  --footer-bottom-text: rgba(255, 255, 255, 0.7);
  --rule: #c3c8ce;
  --menu-weight: 400;
  --card-border: #e2e2e2;
  --card-bar-bg: var(--green-dark);
  --card-bar-text: var(--white);
  --card-title-weight: 700;
  --split-first-color: var(--green-dark);
  --split-first-weight: 400;
  --split-second-color: var(--green-dark);
  --photos-heading-color: var(--ink);
  --hero-kicker-font: var(--font);
  --hero-kicker-weight: 700;
  --hero-kicker-shadow: 5px 5px 10px #000;
  --hero-shadow: 5px 5px 10px #000;
  --band-title-shadow: none;

  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font);
  --display-weight: 800;
  --display-transform: uppercase;
  --font-hero: "Qwitcher Grypen", "Brush Script MT", cursive;
  --hero-weight: 700;
  --hero-color: var(--white);
  --hero-size: clamp(4rem, 1.5rem + 8.5vw, 7.5rem);
  --hero-leading: 0.72;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --step-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --step-4: clamp(2rem, 1.4rem + 3vw, 3.5rem);

  /* Slanted section edges, as on the current site. */
  --slant: clamp(1.5rem, 4vw, 3.5rem);

  --gutter: 1rem;
  --measure: 68ch;
  --wide: 75rem;
  --radius: 8px;
  --radius-small: 6px;
  --header-height: 4.5rem;
}

/* Jubilee 66 (season 2026/2027). */
.theme-jubileum {
  --ink: #1d2a22;
  --ink-soft: #4a5550;
  --primary: #c40e74;
  --primary-dark: #a00b5f;
  --primary-tint: #fdeaf4;
  --green: #6cc72b;
  --green-tint: #eef8e6;
  --green-dark: #0a7d48;
  --yellow: #ffec22;
  --line: #e3e7e4;
  --mist: #f6f8f7;

  --title-color: var(--primary);
  --label-bg: #e9128a;
  --header-bg: var(--yellow);
  --header-text: var(--ink);
  --webshop-bg: var(--primary);
  --band-bg: var(--green);
  --band-text: var(--ink);
  --band-title: var(--yellow);
  --band-title-shadow: 3px 3px 0 var(--ink);
  --band-tile-bg: var(--ink);
  --photos-bg: #f4bad6;
  --photos-link: var(--primary-dark);
  --sponsors-bg: #eef7fc;
  --footer-bg: #0ca35e;
  --footer-bottom-bg: #0a7d48;
  --footer-title: #0f1a14;
  --pagehead-bg: #df1086;
  --date-bg: #df1086;
  --pagehead-text: var(--white);
  --pagehead-title: var(--white);
  --facts-bar-bg: #65bd7d;
  --panel-green: #e6f6ec;
  --facts-bar-text: var(--ink);
  --footer-text: #0f1a14;
  --footer-bottom-text: var(--white);
  --rule: #a5d3ed;
  --menu-weight: 700;
  --card-border: #a5d3ed;
  --card-bar-bg: #a5d3ed;
  --card-bar-text: var(--ink);
  --card-title-weight: 800;
  --split-first-color: var(--ink);
  --split-first-weight: 400;
  --split-second-color: #0a7d48;
  --photos-heading-color: var(--primary);
  --hero-kicker-font: var(--font-display);
  --hero-kicker-weight: 700;
  --hero-kicker-shadow: 3px 3px 0 var(--ink);
  --hero-shadow: 4px 4px 0 var(--ink);

  --font-display: "Lilita One", "Arial Black", Impact, sans-serif;
  --display-weight: 400;
  --display-transform: none;
  --font-hero: var(--font-display);
  --hero-weight: 400;
  --hero-color: var(--yellow);
  --hero-size: clamp(2.75rem, 1.4rem + 4.3vw, 4.5rem);
  --hero-leading: 1;
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
svg { flex-shrink: 0; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  font-weight: 700;
  text-wrap: balance;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.1;
}

h1, h2 { text-transform: var(--display-transform); }

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p, ul, ol, dl, figure, blockquote { margin: 0 0 1em; }

a {
  color: var(--primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--primary-dark); text-decoration-thickness: 0.14em; }

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

:focus:not(:focus-visible) { outline: none; }

button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius-small);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; color: var(--white); outline-color: var(--yellow); }

.site-main:focus { outline: none; }
.site-main { overflow-x: clip; }

/* ---------- Header and navigation ---------- */
/* A coloured bar with the club logo hanging over the page. On the homepage of the house style the bar is
   transparent over the hero photo, as on the current site. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  color: var(--header-text);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled down: a compact bar with a small logo, so the logo no longer covers the content. */
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }
.brand__logo { transition: width 0.45s ease-in-out; }
.site-header.is-scrolled .brand__logo,
.site-header.is-scrolled .brand__logo--66 { width: 3.5rem; }
.theme-standaard .site-header.is-scrolled .brand { padding: 0.25rem 0.25rem 0.5rem; }

/* Long mobile menus scroll inside the sticky header. */
.site-nav.is-open { max-height: calc(100vh - var(--header-height)); overflow-y: auto; }

.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0.5rem var(--gutter);
  min-height: var(--header-height);
}

.brand {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 2;
  display: block;
  line-height: 0;
}

/* House style: the logo sits on a white card with a slanted bottom edge. */
.theme-standaard .brand {
  padding: 0.5rem 0 1rem;
  background: var(--white);
  box-shadow: 0 6px 18px rgba(33, 41, 52, 0.28);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.brand__logo { width: 4.5rem; height: auto; }
.brand__logo--66 { width: 4.5rem; filter: drop-shadow(0 3px 6px rgba(29, 42, 34, 0.3)); margin-top: 0.25rem; }

.site-header :focus-visible { outline-color: currentColor; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--header-text);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline; }

.site-nav { display: none; width: 100%; padding-top: 3.5rem; }
.site-nav.is-open { display: block; }

.menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 1rem;
}

.menu__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.menu__link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0.5rem 0.25rem;
  color: inherit;
  font-weight: var(--menu-weight);
  font-size: 1rem;
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.menu__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: none;
  border: 0;
  border-radius: var(--radius-small);
  cursor: pointer;
  color: inherit;
}

.menu__toggle:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

.menu__chevron { transition: transform 0.15s ease; }
[aria-expanded="true"] > .menu__chevron { transform: rotate(180deg); }

.submenu {
  display: none;
  list-style: none;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0 0 0 1rem;
  border-left: 3px solid currentColor;
}

.submenu.is-open { display: block; }
.submenu .menu__item { border-top: 0; }
.submenu .menu__link { font-weight: 600; min-height: 2.75rem; }

/* Webshop and Inschrijven stand out as buttons, like on the current site. */
.menu > .menu__item > .menu__link[href$="/webshop"] {
  flex: none;
  margin: 0.5rem 0;
  padding: 0.375rem 1rem;
  min-height: 2.5rem;
  background: var(--webshop-bg);
  color: var(--white);
  border: 1px solid var(--white);
  border-radius: 10px;
}

.theme-jubileum .menu > .menu__item > .menu__link[href$="/webshop"] { border-color: transparent; }

.menu > .menu__item > .menu__link[href$="/webshop"]:hover { text-decoration: none; filter: brightness(1.1); }

/* Homepage of the house style: transparent header over the hero photo. */
.theme-standaard.is-home .site-header {
  position: fixed;
  inset: 0 0 auto;
  background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
  padding-bottom: 2.5rem;
}

.theme-standaard.is-home .site-header.is-scrolled { background: var(--header-bg); padding-bottom: 0; }

.theme-standaard.is-home .site-header:has(.site-nav.is-open) { background: var(--header-bg); padding-bottom: 0; }

@media (min-width: 75rem) {
  .site-header__inner { flex-wrap: nowrap; padding-left: calc(var(--gutter) + 10rem); }

  .brand__logo { width: 9.125rem; }
  .brand__logo--66 { width: 9.125rem; }
  .site-header.is-scrolled .brand__logo,
  .site-header.is-scrolled .brand__logo--66 { width: 4rem; }

  .nav-toggle { display: none; }

  .site-nav { display: block; width: auto; flex: 1 1 auto; min-width: 0; padding-top: 0; }

  .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.125rem;
    padding: 0;
  }

  .menu__item { border-top: 0; flex-wrap: nowrap; }

  .menu__link {
    flex: none;
    min-height: 2.75rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.9375rem;
    position: relative;
  }

  .menu > .menu__item > .menu__link[aria-current="page"]::after,
  .menu > .menu__item.is-active > .menu__link::after {
    content: "";
    position: absolute;
    left: 0.625rem;
    right: 0.625rem;
    bottom: 0.25rem;
    height: 3px;
    border-radius: 2px;
    background: currentColor;
  }

  .menu__item--parent > .menu__link:not(.menu__toggle-label) { padding-right: 0.125rem; }

  .menu__toggle { width: 1.75rem; height: 2.75rem; }

  .menu > .menu__item > .menu__link[href$="/webshop"] { margin: 0 0.25rem; }

  /* The last top level item (Inschrijven) is a button on the right. */
  .menu > .menu__item:last-child {
    margin-left: auto;
    padding-right: 0.25rem;
    border: 1px solid currentColor;
    border-radius: 10px;
  }

  .menu > .menu__item:nth-last-child(2) { margin-right: 2.5rem; }

  .theme-standaard .menu > .menu__item:last-child { background: var(--primary); color: var(--white); }
  .menu > .menu__item:last-child > .menu__link::after { display: none; }

  .submenu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    min-width: 14rem;
    margin: 0;
    padding: 0.5rem;
    background: var(--white);
    color: var(--ink);
    border: 0;
    border-top: 4px solid var(--primary);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 14px 34px rgba(33, 41, 52, 0.2);
  }

  .menu > .menu__item:last-child .submenu { left: auto; right: 0; }

  .submenu.is-open { display: block; }

  .submenu .menu__link {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-small);
  }

  .submenu .menu__link:hover { background: var(--primary-tint); text-decoration: none; }
  .submenu .menu__link[aria-current="page"] { background: var(--primary-tint); color: var(--primary-dark); }
}

/* ---------- Layout helpers ---------- */
.page,
.home,
.page--wide {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
}

.page-body > .prose,
.page-body > p { max-width: var(--measure); }

.page--wide .page-body > .prose { max-width: var(--measure); }

.section-title { font-size: var(--step-3); margin-bottom: 1rem; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
}

.section-head .section-title { margin: 0; }

.section-link {
  font-weight: 700;
  white-space: nowrap;
}

.empty-state {
  padding: 1.25rem;
  background: var(--mist);
  border-radius: var(--radius);
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ---------- Page header ---------- */
/* Title bar: a full width slanted band behind breadcrumbs and title, with room for the hanging logo. */
.page-header { padding: 0 0 2rem; }

.page-header__text {
  position: relative;
  isolation: isolate;
  padding: 3.25rem 0 calc(var(--slant) + 1.75rem);
  color: var(--pagehead-text);
}

.page-header__text::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--pagehead-bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.page-header__text > * { max-width: 52rem; }
.page-header__text > .page-header__bg { max-width: none; }

.page-title { margin: 0 0 0.5em; text-transform: uppercase; color: var(--pagehead-title); font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.375rem); line-height: 1.1; }

.page-lead {
  font-size: var(--step-1);
  max-width: var(--measure);
  margin: 0;
}

.page-header__kicker {
  margin: 0 0 1.75rem;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Hand drawn yellow underline below a title, as on the current site. Drawn once when the page loads. */
.swoosh { position: relative; display: inline-block; }

.swoosh__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 0.75em);
  height: calc(100% + 0.75em);
  margin-top: 0.3em;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}

.swoosh__line path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 0;
  animation: swoosh-draw 1.2s ease-out both;
}

.swoosh--title .swoosh__line path { stroke-width: 11; }
.page-title:has(.swoosh--title) { margin-bottom: 0.85em; }

@keyframes swoosh-draw {
  from { stroke-dashoffset: 1500; }
  to { stroke-dashoffset: 0; }
}

.page-header__media { margin: 1.5rem 0 0; }

.page-header__media img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mist);
}

@media (min-width: 75rem) {
  .page-header__text { padding-top: 7rem; }
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
}

.breadcrumbs li:not(:last-child)::after {
  content: "\00BB";
  margin: 0 0.375rem;
}

.breadcrumbs a,
.breadcrumbs [aria-current] {
  color: inherit;
  display: inline-block;
  padding: 0.25rem 0;
  text-decoration: none;
}

.breadcrumbs a:hover { text-decoration: underline; }

.breadcrumbs a:hover { color: inherit; text-decoration-thickness: 0.14em; }

.page-header :focus-visible { outline-color: currentColor; }

.page-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  font-weight: 700;
}

/* ---------- Rich text ---------- */
.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--step-2); margin-top: 1.75em; }
.prose h3 { margin-top: 1.5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.25em; }
.prose li::marker { color: var(--primary); }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose figure img { margin: 0; }
.prose figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.5rem; }
.prose p:empty { display: none; }

/* A paragraph with several images (imported galleries, or editors placing photos side by side) becomes a grid. */
.prose p:has(> img ~ img) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}
.prose p:has(> img ~ img) > img {
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.prose p:has(> img ~ img) > a { grid-column: 1 / -1; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius); }

.prose blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 4px solid var(--green);
  font-size: var(--step-1);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--step--1);
  display: block;
  overflow-x: auto;
}

.prose th, .prose td { padding: 0.5rem 0.75rem; border: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 700; }
.prose tr:first-child > :is(th, td) { background: #f6f6f6; font-weight: 600; }
.prose tbody tr:nth-child(even) > td { background: #fafafa; }

/* Side by side columns in a page body: <div class="columns"><div class="column column--50">..</div>..</div>.
   Stacked on small screens, next to each other from 48rem. The number in the class is the width in percent. */
.columns { display: grid; gap: 2rem; margin: 0 0 1.5rem; }
.column > :first-child { margin-top: 0; }
.column > :last-child { margin-bottom: 0; }
.column img { margin: 0 0 1rem; }

@media (min-width: 48rem) {
  .columns { display: flex; gap: 3rem; align-items: flex-start; }
  .column { flex: 1 1 0; min-width: 0; }
  .column--20 { flex-grow: 20; }
  .column--25 { flex-grow: 25; }
  .column--33 { flex-grow: 33; }
  .column--40 { flex-grow: 40; }
  .column--50 { flex-grow: 50; }
  .column--60 { flex-grow: 60; }
  .column--66 { flex-grow: 66; }
  .column--75 { flex-grow: 75; }
  .column--80 { flex-grow: 80; }
}

/* A body with columns uses the full content width instead of the text measure. */
.page-body .prose:has(> .columns) { max-width: none; }
.page-body .prose:has(> .columns) > :is(p, h2, h3, ul:not([class]), ol):not(.columns *) { max-width: var(--measure); }

/* Shortcode blocks inside a page body may be wider than the text measure. */
.prose .sponsor-grid,
.prose .highness-grid,
.prose .magazine-list,
.prose .product-grid,
.prose .form { margin: 1.5rem 0; padding-left: 0; }

.page-body .prose:has(.sponsor-grid, .highness-grid, .product-grid, .magazine-list) { max-width: none; }
.page-body .prose:has(.sponsor-grid, .highness-grid, .product-grid, .magazine-list) > :is(p, h2, h3, ul:not([class]), ol) { max-width: var(--measure); }

/* ---------- Page structures from the original site ---------- */

/* Headings in two weights: "Missie & <strong>Visie</strong>". */
.prose h2:has(strong) { font-weight: 400; }
.prose h2 strong { font-weight: 800; }
.theme-jubileum .prose h2:has(strong) { font-family: var(--font); font-weight: 400; }
.theme-jubileum .prose h2 strong { font-family: var(--font-display); font-weight: 400; }

/* Narrow centred content (pages that used 25/50/25 columns). */
.narrow { max-width: 36rem; margin: 0 auto; text-align: center; }
.narrow img { margin-left: auto; margin-right: auto; max-width: 12rem; }
.narrow ul, .narrow ol, .narrow details { text-align: left; }
.page-body .prose:has(> .narrow) { max-width: none; }

/* Buttons inside page text. */
.prose a.button { text-decoration: none; margin: 0.25rem 0.25rem 0.25rem 0; }
.prose p:has(> a.button) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.narrow p:has(> a.button) { justify-content: center; }
.prose a.button { background: var(--primary); color: var(--white); }
.prose a.button:hover { background: var(--primary-dark); color: var(--white); }
.prose a.button ~ a.button { background: var(--white); color: var(--primary); }

/* Toggles: <details><summary>. */
.prose details {
  margin: 0 0 0.75rem;
  border: 1px solid var(--line);
  background: var(--white);
}

.prose summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--primary);
}

.prose summary::-webkit-details-marker { display: none; }

.prose summary::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--ink) no-repeat center / 0.75rem;
  background-image: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
  background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
  background-position: 0.35rem 0.6rem, 0.65rem 0.6rem;
  transition: transform 0.15s ease;
}

.prose details[open] > summary::before { transform: rotate(180deg); }
.prose details > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
.prose details > :last-child { margin-bottom: 1rem; }

/* Photo tiles (Media, Hoogheden): photo with a dark gradient and the title on top. */
.prose ul.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.page-body .prose:has(> ul.tiles) { max-width: none; }

.tiles li { margin: 0; }

.tiles a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 14rem;
  height: 100%;
  padding: 1.25rem;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background: var(--ink);
}

.tiles a img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.3s ease;
}

.tiles a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.7) 100%);
}

.tiles a > :not(img) { position: relative; z-index: 1; }
.tiles small { font-size: 1rem; text-transform: uppercase; }
.tiles strong { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.tiles a:hover img { transform: scale(1.04); }
.tiles a:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

@media (min-width: 48rem) {
  .prose ul.tiles:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose ul.tiles:has(> li:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A short list of former highnesses (Vereniging page: the latest four) fills the row. */
@media (min-width: 48rem) {
  .highness-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Coloured panels (full width bands with slanted edges) inside a page body. */
.panel {
  position: relative;
  isolation: isolate;
  margin: 2.5rem 0;
  padding: calc(var(--slant) + 1.5rem) 0;
  color: var(--ink);
}

.panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.panel--yellow::before { background: var(--yellow); }
.panel--green::before { background: var(--panel-green); }
.panel a { color: var(--ink); }
.panel :focus-visible { outline-color: var(--ink); }
.page-body .prose:has(> .panel) { max-width: none; }

/* Blocks in a coloured panel (heading, optional text, one link) become clickable white cards. */
.panel .columns { gap: 1.5rem; margin-bottom: 1.5rem; }
.panel .columns:last-child { margin-bottom: 0; }

.panel .column:has(> h2):has(> p:last-child > a:only-child) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 1.5rem 1.75rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(33, 41, 52, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.panel .column:has(> h2):has(> p:last-child > a:only-child) > h2 { margin: 0 0 0.5rem; font-size: var(--step-2); }
.panel .column:has(> h2):has(> p:last-child > a:only-child) > p { color: var(--ink-soft); }

.panel .column:has(> h2) > p:last-child > a:only-child {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  color: var(--primary);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

/* The whole card is the link target. */
.panel .column:has(> h2) > p:last-child > a:only-child::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.panel .column:has(> h2):has(> p:last-child > a:only-child):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(33, 41, 52, 0.16); }
.panel .column:has(> h2):has(> p:last-child > a:only-child):hover > p:last-child > a { text-decoration: underline; }
.panel .column:has(> h2) > p:last-child > a:only-child:focus-visible { outline: none; }
.panel .column:has(> h2) > p:last-child > a:only-child:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 3px; }
.panel .column:has(> h2):has(> p:last-child > a:only-child) > p:last-child { margin: 0; padding-top: 0.75rem; }

/* A two column row with only a heading and a link ("Oud hoogheden" + "Overzicht ..."): a section head with a rule. */
.columns:has(> .column > h2:only-child):has(> .column > p:only-child > a:only-child) { align-items: flex-end; gap: 2.5rem; margin-bottom: 2rem; }
.columns:has(> .column > h2:only-child):has(> .column > p:only-child > a:only-child) > .column:has(> h2:only-child) { flex-grow: 0; flex-basis: auto; }
.columns:has(> .column > h2:only-child) > .column > h2:only-child { margin: 0; }
.columns:has(> .column > h2:only-child) > .column > p:only-child:has(> a:only-child) { margin: 0; padding-bottom: 0.625rem; border-bottom: 1px solid var(--rule); }
.columns:has(> .column > h2:only-child) > .column > p:only-child > a:only-child { color: var(--ink); font-weight: 500; text-transform: uppercase; text-decoration: none; }
.columns:has(> .column > h2:only-child) > .column > p:only-child > a:only-child:hover { text-decoration: underline; }

/* Featured former highnesses (Vereniging page): photo, green year label and a pink name box, as on the current site. */
.highness-grid--featured { gap: 1.5rem; }
.highness-grid--featured .highness-tile {
  display: flex;
  flex-direction: column;
  background: var(--primary);
  color: var(--white);
  text-align: center;
  border-radius: var(--radius);
  overflow: hidden;
}

.highness-grid--featured .highness-tile__media img { border-radius: 0; }
.highness-grid--featured .highness-tile__year {
  align-self: center;
  margin: -1.1rem 0 0;
  padding: 0.25rem 1rem;
  position: relative;
  background: var(--green-dark);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--display-weight);
  line-height: 1.3;
}

.highness-grid--featured .highness-tile__names { padding: 0.75rem 1rem 1.25rem; margin: 0; }
.highness-grid--featured .highness-tile__names .card-link { color: var(--white); }
.highness-grid--featured .highness-tile__names span:first-child { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5rem; line-height: 1.15; text-transform: uppercase; color: var(--yellow); }
.highness-grid--featured .highness-tile__names span + span { text-transform: uppercase; font-size: var(--step--1); }
.highness-grid--featured .card-link:focus-visible::after { outline-color: var(--ink); }

/* Page header with a photo behind the title band. */
.page-header__bg {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.page-header__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-header__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.15)); }
.page-header--image .page-header__text { color: var(--white); }
.page-header--image .page-title { color: var(--white); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }

/* Highness: names, decoration on the right and the proclamation centred in a yellow band. */
.highness-names { font-size: var(--step-3); font-weight: 400; text-transform: uppercase; margin: 0 0 1rem; }
.highness-names strong { font-weight: 800; }
.theme-jubileum .highness-names { font-family: var(--font); }
.theme-jubileum .highness-names strong { font-family: var(--font-display); font-weight: 400; }
.highness-layout__aside { margin: 0; text-align: center; }
.highness-aside__title { margin: 0 0 1rem; font-family: var(--font); font-size: var(--step-1); font-weight: 800; text-transform: uppercase; color: var(--ink); }
.highness-layout__aside img { max-width: 20rem; margin: 0 auto; }
.highness-proclamation { text-align: center; }
.highness-proclamation__link { display: inline-block; max-width: 36rem; }
.highness-proclamation__link img { margin: 0 auto; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.625rem 1.375rem;
  border: 2px solid var(--primary);
  border-radius: 999px;
  background: var(--white);
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button:hover { background: var(--primary-tint); color: var(--primary-dark); border-color: var(--primary-dark); }

.button--primary { background: var(--primary); color: var(--white); }
.button--primary:hover { background: var(--primary-dark); color: var(--white); }

.button--ghost { background: transparent; color: var(--white); border-color: var(--white); }
.button--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

.button--block { width: 100%; }

.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: var(--step--1);
  font-weight: 700;
}

/* ---------- Cards ---------- */
.card-link { color: var(--ink); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card-link:hover { color: var(--primary); text-decoration: underline; text-decoration-thickness: 0.1em; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 3px solid var(--primary); outline-offset: 4px; }

.card-grid {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 64rem) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* News card as on the current site: framed, title above the photo, coloured bar, summary, "Lees meer". */
.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--card-border);
}

/* All cards in a row share the same rows (title, photo, date bar, text), so photos, bars and
   "Lees meer" buttons line up even when titles wrap differently. */
@supports (grid-template-rows: subgrid) {
  .card-grid:has(.news-card) > li {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .news-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
    height: auto;
  }

  .news-card__title { display: flex; align-items: center; justify-content: center; }
}

.news-card__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  padding: 0 0.625rem;
  background: var(--white);
  color: var(--label-bg);
  line-height: 0;
}

.card-grid:has(.news-card) > li { padding-top: 0.75rem; }

.news-card__title {
  margin: 0;
  padding: 1.25rem 1.25rem 1rem;
  font-family: var(--font);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: var(--card-title-weight);
  letter-spacing: -0.5px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.news-card__title .card-link { color: var(--ink); }

.news-card__media img,
.news-card__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--mist);
}

.news-card__placeholder {
  display: block;
  background: var(--green-tint) url("../images/logo-96.webp") center / 4rem no-repeat;
}

.news-card__date {
  margin: 0;
  padding: 0.375rem 1.25rem;
  background: var(--card-bar-bg);
  color: var(--card-bar-text);
  font-size: 1.125rem;
}

.news-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem;
}

.news-card__summary {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__more {
  margin-top: auto;
  padding: 0.6875rem 1.4375rem;
  border: 1px solid #6b6b6b;
  color: #5c5c5c;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2;
}

.theme-jubileum .news-card__more { background: var(--primary); border-color: var(--primary); color: var(--white); font-weight: 800; }

.news-card:has(.card-link:hover) .news-card__more { background: var(--ink); border-color: var(--ink); color: var(--white); }

.link-card {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.link-card__title { margin: 0 0 0.25rem; }
.link-card__text { margin: 0; color: var(--ink-soft); }

/* Pager of the news list (OrchardCore PagerSlim renders a ul.pager). */
.pager-nav { margin-top: 2.5rem; }

.pager-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pager-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.625rem 1.375rem;
  border: 2px solid var(--primary);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.pager-nav a:hover { background: var(--primary-tint); }

/* ---------- Hero (homepage) ---------- */
.hero {
  position: relative;
  display: grid;
  min-height: min(85vh, 40rem);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  /* Slanted bottom edge into the next party band. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
  margin-bottom: calc(var(--slant) * -1);
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Slides are stacked in one grid cell and fade into each other. */
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.8s ease; }

.hero__title a { color: inherit; text-decoration: none; }
.hero__title a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; }

.hero__controls {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: calc(var(--slant) + 1rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--white);
  cursor: pointer;
}

.hero__button:hover { background: rgba(0, 0, 0, 0.7); }
.hero__pause .hero__icon-play,
.hero__pause[aria-pressed="true"] .hero__icon-pause { display: none; }
.hero__pause[aria-pressed="true"] .hero__icon-play { display: inline; }

.hero__dots { display: flex; gap: 0.25rem; }

.hero__dot {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero__dot::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin: auto;
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.hero__dot[aria-current="true"]::before { background: var(--yellow); border-color: var(--yellow); }

@media (min-width: 75rem) {
  .hero__controls { right: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter))); }
}

.hero__slide:not(.hero--plain *)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
}

.hero--plain { min-height: 24rem; background: var(--band-bg); }

.hero__content {
  align-self: end;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 8rem var(--gutter) calc(var(--slant) + 2.5rem);
}

.hero__kicker {
  margin: 0 0 0.75rem;
  font-family: var(--hero-kicker-font);
  font-weight: var(--hero-kicker-weight);
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  line-height: 1.2;
  color: var(--white);
  text-shadow: var(--hero-kicker-shadow);
}

.hero__kicker::after { content: ":"; }

.hero__title {
  font-family: var(--font-hero);
  font-weight: var(--hero-weight);
  text-transform: none;
  font-size: var(--hero-size);
  line-height: var(--hero-leading);
  margin: 0;
  max-width: 11ch;
  color: var(--hero-color);
  text-shadow: var(--hero-shadow);
}


.hero :focus-visible { outline-color: var(--yellow); }

@media (min-width: 48rem) {
  .hero { min-height: min(82vh, 44rem); }
  .hero__content { padding-top: 11rem; }
}

/* ---------- Band below the hero ---------- */
.season-band {
  position: relative;
  background: var(--band-bg);
  color: var(--band-text);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.season-band__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--slant) + 2.5rem) var(--gutter) calc(var(--slant) + 2.5rem);
}

.season-band p { margin: 0; }
.season-band :focus-visible { outline-color: currentColor; }

/* Standaard: "Volgende feest" with date and time left, party and location right. */
.season-band--next .season-band__inner { display: grid; gap: 1rem 2.5rem; }

.season-band__date time { display: block; }

.season-band__day,
.season-band__time {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.25;
}

.season-band__time small { font-weight: 400; font-size: 1em; }

.season-band__title {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem);
  line-height: 0.95;
  color: var(--band-title);
}

.season-band__title a { color: inherit; text-decoration: none; }
.season-band__title a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; }

.season-band__location {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1875rem);
  font-weight: 300;
  line-height: 1.4;
}

.season-band__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: uppercase;
}

.season-band__link:hover { color: inherit; text-decoration-thickness: 0.14em; }

@media (min-width: 48rem) {
  .season-band--next .season-band__inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .season-band--next .season-band__when { text-align: right; padding-right: 2.5rem; border-right: 1px solid color-mix(in srgb, currentColor 60%, transparent); }
}

/* Jubileum: centred season text and slogan with a countdown. */
.season-band--slogan { text-align: center; }
.season-band--slogan .season-band__inner { max-width: 52rem; padding-top: calc(var(--slant) + 3.5rem); padding-bottom: calc(var(--slant) + 3rem); }

.season-band--slogan .season-band__kicker { font-size: 1.375rem; letter-spacing: 1px; margin-bottom: 0.5rem; }

/* Yellow with a hard dark shadow, exactly as on the live jubilee site. */
.season-band__slogan {
  margin: 0 auto 2rem;
  max-width: 34rem;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--band-title);
  text-shadow: var(--band-title-shadow);
}

.season-band__next { margin-top: 1rem; font-weight: 600; }
.season-band__next a { color: inherit; }

.countdown__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.countdown__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  min-width: 6.5rem;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  background: var(--band-tile-bg);
  color: var(--yellow);
  border-radius: 3px;
  font-size: 1.125rem;
}

.countdown__value { font-variant-numeric: tabular-nums; }

/* ---------- Full width bands ---------- */
.band {
  position: relative;
  margin-top: 3rem;
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}

.band__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: calc(var(--slant) + 2rem) var(--gutter) calc(var(--slant) + 2rem);
}

.band--photos { background: var(--photos-bg); color: var(--photos-text); }
.band--photos :focus-visible { outline-color: var(--ink); }

.band--sponsors { background: var(--sponsors-bg); clip-path: none; margin-top: 0; }
.band--sponsors .band__inner { padding-top: 4rem; padding-bottom: 4rem; }

/* The photo band sits on top of the sponsor band, which runs on underneath its slanted bottom edge. */
.band--photos { z-index: 1; }
.band--photos + .band--sponsors { margin-top: calc(var(--slant) * -1); }
.band--photos + .band--sponsors .band__inner { padding-top: calc(var(--slant) + 4rem); }

/* The editable intro on the photo band ("Laatste foto's"): heading, two links and a set of photos.
   On wide screens laid out like the current site: text and one photo in the first column,
   the other photos in three staggered columns. */
.home-intro.prose,
.home-intro .prose { max-width: none; }

.home-intro h2 {
  margin: 0 0 1.25rem;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 800;
  color: var(--photos-heading-color);
  /* Wide enough for "LAATSTE", narrow enough to put "FOTO'S" on the second line. */
  max-width: 6.5em;
}

.home-intro h2::first-line { font-weight: 600; color: var(--ink); }
.theme-jubileum .home-intro h2::first-line { font-weight: 400; }

.home-intro a {
  color: var(--ink);
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
}

.home-intro a:hover { text-decoration: underline; }

.home-intro .prose p:has(> img ~ img) > img,
.home-intro p:has(> img ~ img) > img { border-radius: 0; aspect-ratio: 3 / 2; }

@media (min-width: 64rem) {
  .home-intro .prose,
  .home-intro:not(:has(.prose)) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto 1fr 1fr;
    gap: 0 1.25rem;
  }

  .home-intro h2 { grid-column: 1; grid-row: 1; }
  .home-intro p:has(> img ~ img) { display: contents; }
  .home-intro p:has(> img ~ img) > a { grid-column: 1; align-self: start; display: block; margin-bottom: 0.5rem; }
  .home-intro p:has(> img ~ img) > a:nth-of-type(1) { grid-row: 2; }
  .home-intro p:has(> img ~ img) > a:nth-of-type(2) { grid-row: 3; }
  .home-intro p:has(> img ~ img) > img { margin: 0 0 1.25rem; }
  .home-intro p > img:nth-of-type(1) { grid-column: 1; grid-row: 4 / 6; align-self: start; margin-top: 1.5rem; }
  .home-intro p > img:nth-of-type(2) { grid-column: 2; grid-row: 1 / 4; }
  .home-intro p > img:nth-of-type(3) { grid-column: 2; grid-row: 4 / 6; }
  .home-intro p > img:nth-of-type(4) { grid-column: 3; grid-row: 1 / 4; transform: translateY(3.75rem); }
  .home-intro p > img:nth-of-type(5) { grid-column: 3; grid-row: 4 / 6; transform: translateY(3.75rem); }
  .home-intro p > img:nth-of-type(6) { grid-column: 4; grid-row: 1 / 4; transform: translateY(-2.5rem); }
  .home-intro p > img:nth-of-type(7) { grid-column: 4; grid-row: 4 / 6; transform: translateY(-2.5rem); }
  .home-intro p > img:nth-of-type(n+8) { display: none; }
}

/* ---------- Homepage sections ---------- */
.home-section { padding-top: 3rem; padding-bottom: 1rem; }

@media (min-width: 64rem) {
  .home-section { padding-top: 4rem; }
}

/* Section titles on a slanted label ("NIEUWS"), as on the current site. */
.section-label {
  display: inline-block;
  margin: 0;
  padding: 0.3em 0.9em 0.35em;
  background: var(--label-bg);
  color: var(--label-text);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

/* "SPONSOREN BEDANKT!": two lines, two weights. */
.split-title {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: var(--split-first-weight);
  color: var(--split-first-color);
  text-transform: uppercase;
}

.split-title span { display: block; font-weight: var(--display-weight); color: var(--split-second-color); }
.theme-standaard .split-title span { font-weight: 800; }

.section-head:has(.section-label, .split-title) {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 1rem 2.5rem;
  margin-bottom: 2.5rem;
}

.section-head:has(.section-label, .split-title) .section-link {
  display: block;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  white-space: normal;
}

.section-head:has(.section-label, .split-title) .section-link:hover { text-decoration: underline; }

@media (min-width: 48rem) {
  .section-head:has(.section-label, .split-title) { grid-template-columns: auto 1fr; }
  .section-head:has(.section-label) .section-label { justify-self: start; margin-bottom: 0.25rem; }
}

.person-grid {
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) { .person-grid { grid-template-columns: repeat(2, 1fr); } }

.person-card { position: relative; }

.person-card__media img,
.person-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--mist);
}

.person-card__placeholder { display: block; }

.person-card__body { padding-top: 0.875rem; }
.person-card__year { margin: 0 0 0.125rem; font-weight: 700; color: var(--ink-soft); font-size: var(--step--1); }
.person-card__title { font-size: var(--step-2); font-family: var(--font-display); font-weight: var(--display-weight); margin-bottom: 0.25rem; }
.person-card__motto { margin: 0; color: var(--ink-soft); }

@media (min-width: 64rem) {
  .home-highness .person-grid { grid-template-columns: repeat(2, minmax(0, 26rem)); }
}

/* ---------- Agenda (events) ---------- */
.agenda-section { margin-top: 1rem; }

.agenda-month {
  font-size: var(--step-1);
  font-stretch: 100%;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
  color: var(--ink-soft);
}

.agenda-month::first-letter { text-transform: uppercase; }

.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 52rem;
}

.agenda__day {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.agenda__day:first-child { border-top: 1px solid var(--line); }

.date-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.75rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  line-height: 1;
  text-align: center;
}

.date-tile__weekday { font-size: 0.8125rem; font-weight: 600; }
.date-tile__day { font-family: var(--font-display); font-size: 1.875rem; font-weight: var(--display-weight); margin: 0.125rem 0; }
.date-tile__month { font-size: 0.8125rem; font-weight: 700; color: var(--yellow); }

.agenda__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; }

.agenda-event { position: relative; align-self: center; }

.agenda-event__title { font-size: var(--step-1); margin: 0 0 0.25rem; line-height: 1.25; }

.agenda-event__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }

.agenda-past {
  margin-top: 3rem;
  border-top: 4px solid var(--line);
  padding-top: 1rem;
}

.agenda-past summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  cursor: pointer;
  list-style: none;
}

.agenda-past summary::-webkit-details-marker { display: none; }

.agenda-past summary::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-right: 3px solid var(--primary);
  border-bottom: 3px solid var(--primary);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.agenda-past[open] summary::before { transform: rotate(45deg); }

.agenda-past__title { margin: 0; font-size: var(--step-2); }
.agenda-past__count { color: var(--ink-soft); font-weight: 600; }

.agenda-past .date-tile { background: var(--line); color: var(--ink); }
.agenda-past .date-tile__month { color: var(--ink-soft); }

/* ---------- Event calendar (/feesten) ---------- */
.page--events .page-body > .prose { max-width: var(--measure); }

.events-next { margin: 0 0 3.5rem; }

.events-upcoming .section-label { margin-bottom: 1.5rem; }

.events-month {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.25rem;
  font-size: var(--step-2);
  color: var(--ink);
}

.events-month { text-transform: capitalize; }
.events-month::after { content: ""; flex: 1; height: 2px; background: var(--line); }

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(33, 41, 52, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.event-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(33, 41, 52, 0.16); }

.event-card__media { position: relative; }

.event-card__media img,
.event-card__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.event-card:hover .event-card__media img { transform: scale(1.04); }
.event-card__media { overflow: hidden; }

.event-card__placeholder {
  background: var(--band-bg) url("../images/logo-168.webp") center / 5.5rem no-repeat;
}

/* Date label on the photo, slightly tilted like the section labels. */
.event-card__date {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.25rem;
  padding: 0.375rem 0.5rem 0.5rem;
  background: var(--date-bg, var(--label-bg));
  color: var(--white);
  line-height: 1;
  text-align: center;
  transform: rotate(-3deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.event-card__weekday,
.event-card__month { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; }
.event-card__day { margin: 0.125rem 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2.125rem; }

.event-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.125rem 1.25rem 1.375rem;
}

.event-card__title {
  margin: 0 0 0.625rem;
  font-size: var(--step-1);
  line-height: 1.2;
  text-transform: none;
}

.event-card__title .card-link { color: var(--ink); }
.event-card:hover .event-card__title .card-link { color: var(--primary-dark); }

.event-card__meta {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.event-card__meta li { display: flex; align-items: center; gap: 0.5rem; }
.event-card__meta svg { flex: none; color: var(--primary); }

/* Featured: the next party, photo next to the details on a coloured card. */
.event-card--featured { background: var(--band-bg); color: var(--band-text); }
.event-card--featured .event-card__body { padding: 1.75rem 1.75rem 2rem; justify-content: center; }
.event-card--featured .event-card__kicker { margin: 0 0 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.event-card--featured .event-card__title { font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem); line-height: 1.08; margin-bottom: 1.25rem; text-transform: var(--display-transform); hyphens: auto; }
.event-card--featured .event-card__title .card-link,
.event-card--featured:hover .event-card__title .card-link { color: var(--band-title); text-shadow: var(--band-title-shadow); }
.event-card--featured .event-card__meta { color: inherit; font-size: var(--step-0); gap: 0.625rem; }
.event-card--featured .event-card__meta svg { color: inherit; }
.event-card--featured .event-card__date { top: 1.25rem; left: 1.25rem; min-width: 5.25rem; padding: 0.5rem 0.75rem 0.625rem; }
.event-card--featured .event-card__day { font-size: 2.75rem; }
.event-card--featured .event-card__media img,
.event-card--featured .event-card__placeholder { height: 100%; aspect-ratio: 3 / 2; }
.event-card--featured:hover { transform: none; }

.event-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.event-card--featured .button--primary { background: var(--white); color: var(--ink); border-color: var(--white); }
.event-card__ics { position: relative; z-index: 1; background: transparent; color: inherit; border-color: currentColor; }
.event-card__ics:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.event-card--featured :focus-visible,
.event-card--featured .card-link:focus-visible::after { outline-color: currentColor; }

@media (min-width: 56rem) {
  .event-card--featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .event-card--featured .event-card__media img,
  .event-card--featured .event-card__placeholder { aspect-ratio: auto; min-height: 22rem; }
  .event-card--featured .event-card__body { padding: 2.5rem 3rem; }
}

/* ---------- Event detail ---------- */
/* Photo (framed, overlapping the title band) with the description on the left, facts on the right. */
.event-layout { display: grid; gap: 2rem; align-items: start; }

.event-media {
  position: relative;
  z-index: 1;
  margin: calc(var(--slant) * -1 - 2rem) 0 1.5rem;
  padding: 0.75rem;
  background: var(--white);
  border-radius: 1.25rem;
}

.event-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.625rem; }

.page--event .page-header { padding-bottom: 0; }
.page--event .page-header__text { padding-bottom: calc(var(--slant) + 4.5rem); }
.theme-jubileum .page--event .page-title { color: var(--yellow); }

.event-facts {
  padding: 2rem 1.5rem;
  background: #f5f5f5;
}

.event-facts__notice {
  margin: 0 0 1.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--white);
  font-weight: 700;
}

.facts-group + .facts-group { margin-top: 2.25rem; }

.facts-group__title {
  margin: 0 0 1rem;
  padding: 0.5rem 0.875rem;
  background: var(--facts-bar-bg);
  color: var(--facts-bar-text);
  font-size: 1.125rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.facts { margin: 0; }
.facts__row { padding: 0 0 0.5rem; }
.facts dt { font-weight: 700; color: var(--ink-soft); }
.facts dd { margin: 0; }
.facts-group__text { margin: 0; }

.event-facts .button { margin-top: 2rem; }

@media (min-width: 64rem) {
  .event-layout { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 3.5rem; }
  .event-facts { margin-top: 1rem; }
}

/* ---------- Photo albums ---------- */
.album-intro {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  margin: 1.5rem 0;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (min-width: 64rem) { .album-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.album-card { position: relative; }

.album-card__media img,
.album-card__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--mist);
}

.album-card__placeholder { display: block; background: var(--green-tint); }

.album-card__body { padding-top: 0.625rem; }
.album-card__title { font-size: 1.0625rem; margin: 0 0 0.125rem; line-height: 1.3; font-weight: var(--display-weight); }
.album-card__date { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

.album-card__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0.25rem 0 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--primary);
}

/* ---------- Highness ---------- */
/* Text left (60%), photo right (40%), as on the current site. */
.highness-layout { display: grid; gap: 2rem; align-items: start; }

.highness-layout__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--mist);
}

.highness-layout .page-body > .prose { max-width: none; }

.highness-names {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.75rem;
  font-size: var(--step-4);
    font-weight: 800;
  line-height: 1.02;
}

.highness-edition { font-size: var(--step-1); color: var(--ink-soft); font-weight: 600; }

.motto { margin: 2rem 0 0; }

.motto__label { font-weight: 700; color: var(--ink-soft); margin-bottom: 0.5rem; }

.motto__text { margin: 0; }

.motto__text p {
  display: inline;
  margin: 0;
  padding: 0.1em 0.3em;
  background: var(--yellow);
  color: var(--ink);
  font-size: var(--step-2);
  font-weight: 800;
    line-height: 1.45;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (min-width: 56rem) {
  .highness-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3.5rem; }
  .highness-layout:not(:has(.highness-layout__aside)) { grid-template-columns: minmax(0, 1fr); }
}

.highness-docs { margin-top: 3rem; }

.doc-grid { display: grid; gap: 1.5rem; align-items: start; justify-content: center; }

@media (min-width: 48rem) {
  .doc-grid { grid-template-columns: minmax(0, 18rem) minmax(0, 40rem); }
  .doc-grid:has(> .doc:only-child) { grid-template-columns: minmax(0, 40rem); }
}

.doc { margin: 0; }
.doc__link { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem; background: var(--white); }
.doc__link:hover { border-color: var(--primary); }
.doc img { width: 100%; height: auto; }
.doc figcaption { margin-top: 0.5rem; font-weight: 700; }
.doc__hint { font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }

.highness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) { .highness-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (min-width: 64rem) { .highness-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.highness-tile { position: relative; }

.highness-tile__media img,
.highness-tile__placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--mist);
  margin: 0;
}

.highness-tile__placeholder { display: block; }

.highness-tile__year {
  margin: 0.625rem 0 0;
  font-size: var(--step-2);
  font-weight: 800;
    line-height: 1;
}

.highness-tile__names { margin: 0.25rem 0 0; line-height: 1.35; }
.highness-tile__names span { display: block; }
.highness-tile__names .card-link { font-weight: 600; }

/* ---------- Sponsors ---------- */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sponsor {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 0.75rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sponsor__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-small);
}

.sponsor img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sponsor__name { font-weight: 700; text-align: center; font-size: var(--step--1); color: var(--ink); }

.sponsor:has(.sponsor__link:hover) { border-color: var(--primary); }

.sponsor--small { padding: 0.5rem; border-radius: var(--radius-small); }

/* Homepage sponsor slider. */
.carousel { position: relative; display: flex; align-items: center; gap: 0.5rem; }

.carousel__track {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  margin: 0;
  padding: 0.5rem 0.25rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: 2px; }

.carousel__item { flex: 0 0 calc((100% - 1.5rem) / 2); scroll-snap-align: start; }

@media (min-width: 40rem) { .carousel__item { flex-basis: calc((100% - 3 * 1.5rem) / 4); } }
@media (min-width: 64rem) { .carousel__item { flex-basis: calc((100% - 4 * 1.5rem) / 5); } }

.carousel__item .sponsor { box-shadow: 0 2px 8px rgba(33, 41, 52, 0.08); border: 0; border-radius: 0; aspect-ratio: 192 / 115; }

.carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: #5f6368;
  color: var(--white);
  cursor: pointer;
}

.carousel__button:hover { background: var(--ink); }
.carousel__button:disabled { opacity: 0.35; cursor: default; }

/* ---------- Magazines ---------- */
.magazine-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 48rem) { .magazine-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.magazine { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; }

.magazine__cover img,
.magazine__placeholder {
  width: 100%;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  border-radius: var(--radius-small);
  background: var(--green);
  box-shadow: 0 4px 14px rgba(33, 41, 52, 0.18);
}

.magazine__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.5rem;
}

.magazine__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.magazine__title { font-size: 1.125rem; font-weight: var(--display-weight); line-height: 1.2; margin: 0 0 0.125rem; }
.magazine__meta { margin: 0 0 0.75rem; color: var(--ink-soft); font-size: var(--step--1); }
.magazine .button { min-height: 2.75rem; padding: 0.5rem 1.125rem; margin-top: auto; }

/* ---------- Products (webshop) ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}

.product-card__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--mist);
}

.product-card__body { padding: 1rem 1.125rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.product-card__title { font-size: var(--step-1); font-weight: var(--display-weight); margin: 0 0 0.375rem; }
.product-card__text { color: var(--ink-soft); margin: 0 0 0.75rem; }

.product-card__price {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: auto 0 0;
  font-size: var(--step-1);
  font-weight: 800;
}

.product-card--soldout .product-card__media img { filter: grayscale(1); opacity: 0.7; }

/* ---------- Forms (markup by the platform module, classes in docs/design.md) ---------- */
.form { max-width: 40rem; }

.form__field { margin-bottom: 1.25rem; }

.form__label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 700;
}

.form__label .required,
.form__required { color: var(--error); }

.form__input,
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="date"],
.form input[type="url"],
.form select,
.form textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
}

.form textarea,
textarea.form__input { min-height: 8rem; resize: vertical; }

.form select,
select.form__input {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23212934' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}

.form__input:hover,
.form input:hover,
.form select:hover,
.form textarea:hover { border-color: var(--ink); }

.form__input:focus-visible,
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

.form input[type="checkbox"],
.form input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.form__check,
.form__field--check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.form__field--check .form__label,
.form__check .form__label { margin: 0; font-weight: 600; }

.form__hint {
  margin: 0.375rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.form__label + .form__hint { margin: -0.125rem 0 0.5rem; }

.form__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.375rem 0 0;
  color: var(--error);
  font-size: var(--step--1);
  font-weight: 700;
}

.form__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--error);
  color: var(--white);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.form__error:empty { display: none; }

.form__input[aria-invalid="true"],
.form [aria-invalid="true"],
.form__field--error .form__input,
.form .input-validation-error {
  border-color: var(--error);
  background: var(--error-tint);
}

.form__fieldset {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form__fieldset legend {
  padding: 0 0.375rem;
  font-weight: 800;
  font-size: var(--step-1);
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

.alert {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 6px solid var(--ink-soft);
  border-radius: var(--radius-small);
  background: var(--mist);
  max-width: 40rem;
}

.alert > :last-child { margin-bottom: 0; }

.alert--success { border-left-color: var(--green); background: var(--green-tint); }
.alert--error { border-left-color: var(--error); background: var(--error-tint); }
.alert--error a { color: var(--error); }

/* Platform form extras (see the forms in Knollentrekkers.Core). */
.form__title { font-size: var(--step-2); margin-bottom: 0.5rem; }
.form__intro { color: var(--ink-soft); margin-bottom: 1.5rem; }
.form__optional { font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }

/* Honeypot: present for bots, hidden for people and assistive technology (the markup also sets aria-hidden). */
.form__hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__error-summary {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--error);
  border-left-width: 6px;
  border-radius: var(--radius-small);
  background: var(--error-tint);
}

.form__error-summary:focus-visible { outline-color: var(--error); }
.form__error-summary ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.form__error-summary a { color: var(--error); font-weight: 700; }

.form__field--error .form__label { color: var(--error); }

.form__field--checkbox,
.form__option {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.form__field--checkbox .form__label,
.form__option .form__label { margin: 0; font-weight: 600; }

.form__radio,
.form__checkbox,
.form input.form__radio,
.form input.form__checkbox {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.form__option-detail { display: block; font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; }

.form__input--textarea { min-height: 8rem; resize: vertical; }

.form .form__input--quantity,
.form__input--quantity {
  width: 5.5rem;
  min-height: 2.75rem;
  text-align: center;
}

.form--order { max-width: none; }
.form--order > :not(.product-grid):not(.order-summary) { max-width: 40rem; }

.product-card__image img,
.product-card > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--mist);
}

.product-card > :not(img):not(.product-card__image):not(.product-card__media) { margin-left: 1.125rem; margin-right: 1.125rem; }
.product-card__description { color: var(--ink-soft); margin-bottom: 0.75rem; }
.product-card__quantity { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 1.125rem 1.25rem; }
.product-card__quantity .form__error { flex-basis: 100%; order: 3; }
.form__fieldset { min-width: 0; }
.product-card__quantity label { font-weight: 700; }

.order-summary {
  width: 100%;
  max-width: 40rem;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
}

.order-summary caption { text-align: left; font-weight: 800; padding-bottom: 0.5rem; }
.order-summary th,
.order-summary td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; }
.order-summary td:last-child,
.order-summary th:last-child { text-align: right; }
.order-summary tfoot th,
.order-summary tfoot td { font-weight: 800; border-bottom: 0; }

/* Orchard notifier messages (Messages zone). */
.site-main > .message,
.site-main > .alert { max-width: var(--wide); margin: 1rem auto; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 1rem;
}

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: currentColor; }

.site-footer__inner {
  display: grid;
  gap: 2.5rem 2rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 3rem;
}

@media (min-width: 40rem) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .site-footer__inner { grid-template-columns: repeat(4, 1fr); } }

.footer-block__title {
  margin: 0 0 1rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--footer-title);
}

.theme-jubileum .footer-block__title { font-family: var(--font-display); font-weight: 400; }

.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.footer-menu a { display: block; padding: 0.5rem 0 0.5rem 0.75rem; position: relative; }
.footer-menu a::before { content: "\203A"; position: absolute; left: 0; }

.social-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--white) !important;
}

.social-link--facebook { background: #3b5998; }
.social-link--instagram { background: #c13584; }

.footer-block--center { text-align: center; }
.pk-link { display: inline-block; line-height: 0; }
.pk-link img { width: 124px; height: auto; }

.footer-block--club { text-align: right; }
.footer-logo { width: 120px; height: auto; margin: 0 0 1.25rem auto; }
.footer-address { font-style: normal; margin: 0 0 1rem; }
.footer-contact { margin: 0; }

@media (max-width: 63.99rem) {
  .footer-block--center, .footer-block--club { text-align: left; }
  .footer-logo { margin-left: 0; }
}

.site-footer__bottom { background: var(--footer-bottom-bg); color: var(--footer-bottom-text); }

.site-footer__bottom p {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
  font-size: 0.8125rem;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .swoosh__line path { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Windows high contrast ---------- */
@media (forced-colors: active) {
  .section-label, .motto__text p { forced-color-adjust: auto; }
  .date-tile { border: 2px solid CanvasText; }
  .card-link:focus-visible::after { outline-color: Highlight; }
}