/* East District: één stylesheet. Redesign november 2026: "stoer en eigenwijs".
   Poster-stijl: zwart, bot en signaaloranje. Grote Anton-koppen, harde lijnen, harde schaduwen,
   een cursieve serif als eigenwijs accent. Geen bewegende onderdelen (rustig voor ADHD-lezers).
   Toegankelijkheid: tekstcontrast minimaal AA (meeste combinaties AAA), aanraakdoelen 48px,
   licht en donker, safe areas, tekst tot 200% zonder afbreken van de layout.
   Oranje (#FF5A1F) is nooit tekst op licht; alleen vlak, lijn of tekst op zwart. */

@font-face { font-family: "Anton"; src: url("/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  color-scheme: light dark;
  /* vaste merkkleuren */
  --black: #0E0E0C;
  --bone: #F2EDE3;
  --signal: #FF5A1F;
  /* thema (licht) */
  --bg: var(--bone);
  --surface: #FAF7F1;
  --fg: var(--black);
  --fg-2: #4A4740;
  --hard: var(--black);          /* kleur van harde schaduwen */
  --focus: var(--signal);

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --fs-mega: clamp(3rem, 1rem + 8.4vw, 8.5rem);
  --fs-h1: clamp(2.5rem, 1.3rem + 5vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --space: clamp(48px, 6vw + 20px, 112px);
  --line: 3px;
  --gutter: max(16px, env(safe-area-inset-left));
  --gutter-r: max(16px, env(safe-area-inset-right));
  --tabbar-h: 64px;
  --appbar-h: 60px;
  --maxw: 1240px;
  --readw: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161513; --surface: #201F1C; --fg: var(--bone); --fg-2: #B9B3A6; --hard: var(--signal);
  }
}
:root[data-theme="dark"] { --bg: #161513; --surface: #201F1C; --fg: var(--bone); --fg-2: #B9B3A6; --hard: var(--signal); }

/* Banden herdefiniëren de kleuren, zodat alles erin vanzelf meekleurt */
.on-black { --bg: var(--black); --surface: #1C1B18; --fg: var(--bone); --fg-2: #BDB7AA; --hard: var(--signal); --focus: var(--signal); background: var(--bg); color: var(--fg); }
.on-signal { --bg: var(--signal); --surface: #FF7A47; --fg: var(--black); --fg-2: #2A1408; --hard: var(--black); --focus: var(--black); background: var(--bg); color: var(--fg); }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden; overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.on-signal a { text-decoration-color: currentColor; }
a:hover { text-decoration-thickness: 4px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button, input { font: inherit; color: inherit; }
a, button { touch-action: manipulation; }
::selection { background: var(--signal); color: var(--black); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--signal); color: var(--black); padding: 12px 16px; font-weight: 700; }
.skip:focus { left: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.read { max-width: var(--readw); margin-left: auto; margin-right: auto; }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .005em; line-height: .95; margin: 0;
}
.display em, .hl {
  font-style: normal; color: var(--black);
  background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 55% / 100% .84em;
  padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.on-signal .display em { color: var(--signal); background-image: linear-gradient(var(--black), var(--black)); }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -.01em; }
.tag {
  display: inline-block; margin: 0 0 16px; padding: 5px 10px 4px;
  background: var(--fg); color: var(--bg);
  font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; line-height: 1.3;
}
.on-black .tag { background: var(--signal); color: var(--black); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.muted { color: var(--fg-2); }
.lead { font-size: var(--fs-lead); line-height: 1.55; }
h1, h2, h3, .display { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- Kopbalk (altijd zwart) ---------- */
.appbar {
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: var(--black); color: var(--bone);
  border-bottom: 4px solid var(--signal);
}
.appbar .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--appbar-h); gap: 16px; }
.brand {
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; line-height: 1;
  color: var(--bone); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px;
}
.brand span { color: var(--signal); }
.topnav { display: none; gap: 4px; }
.topnav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  color: var(--bone); text-decoration: none; font-weight: 800; font-size: .875rem; text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 4px solid transparent; margin-bottom: -4px;
}
.topnav a:hover { color: var(--signal); }
.topnav a[aria-current="page"] { background: var(--signal); color: var(--black); }
.back {
  display: none; align-items: center; gap: 2px; min-height: 48px; min-width: 48px; margin-left: -8px; padding: 0 8px;
  color: var(--bone); text-decoration: none; font-weight: 700; font-size: 1rem;
}
.back svg { width: 24px; height: 24px; color: var(--signal); }
.has-back .back { display: inline-flex; }
.has-back .brand { position: absolute; left: 50%; transform: translateX(-50%); font-size: 1.25rem; }
@media (min-width: 840px) {
  .topnav { display: flex; }
  .has-back .brand { position: static; transform: none; font-size: 1.5rem; }
  .has-back .back { display: none; }
}

/* ---------- Tabbalk onderin (telefoon) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--black); border-top: 3px solid var(--signal);
}
.tabbar ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 560px; }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabbar-h); color: #BDB7AA; text-decoration: none;
  font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.tabbar .ico { display: grid; place-items: center; width: 52px; height: 28px; }
.tabbar svg { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--signal); }
.tabbar a[aria-current="page"] .ico { background: var(--signal); color: var(--black); }
body { padding-bottom: calc(var(--tabbar-h) + 3px + env(safe-area-inset-bottom)); }
@media (min-width: 840px) { .tabbar { display: none; } body { padding-bottom: 0; } }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; max-width: 100%; white-space: normal; text-align: center;
  border: var(--line) solid var(--fg); background: var(--bg); color: var(--fg);
  box-shadow: 5px 5px 0 var(--hard);
  font-weight: 800; font-size: .9375rem; text-transform: uppercase; letter-spacing: .07em; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--hard); }
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--hard); }
.btn-fill { background: var(--signal); color: var(--black); border-color: var(--black); }
.on-black .btn-fill { box-shadow: 5px 5px 0 var(--bone); }
.on-signal .btn-fill { background: var(--black); color: var(--signal); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Hero ---------- */
.hero { padding: 32px 0 var(--space); }
.hero-grid { display: grid; gap: 40px; align-items: end; }
.hero-title { font-size: var(--fs-mega); line-height: .9; }
.hero .lead { color: var(--fg-2); max-width: 36rem; margin: 24px 0 28px; }
.hero-photo { margin: 0 6px 6px 0; position: relative; max-width: 460px; justify-self: center; width: 100%; }
.hero-photo img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 25%;
  border: var(--line) solid var(--fg); box-shadow: 12px 12px 0 var(--signal); background: var(--surface);
}
.sticker {
  position: absolute; left: -14px; bottom: 28px; transform: rotate(-6deg);
  background: var(--black); color: var(--bone); padding: 10px 14px 8px;
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.375rem; line-height: 1; letter-spacing: .02em;
  border: 2px solid var(--signal);
}
.sticker span { color: var(--signal); display: block; font-size: .8em; }
@media (min-width: 900px) {
  .hero { padding: 64px 0 var(--space); }
  .hero-grid { grid-template-columns: 1.55fr 1fr; gap: 56px; }
  .hero-photo { justify-self: end; transform: rotate(2deg); }
}

/* Strook met trefwoorden (staat stil) */
.strip { background: var(--black); color: var(--bone); border-top: 4px solid var(--signal); border-bottom: 4px solid var(--signal); overflow: hidden; }
.strip p {
  margin: 0; padding: 14px 0; white-space: nowrap; text-align: center;
  font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); letter-spacing: .03em; line-height: 1.1;
}
.strip b { color: var(--signal); font-weight: 400; padding: 0 .45em; }

/* ---------- Secties ---------- */
.section { padding: var(--space) 0; }
.section + .section { padding-top: 0; }
.band-full { padding: var(--space) 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: var(--line) solid var(--fg); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head a { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
.section-head a svg { width: 18px; height: 18px; }
.t-band { font-size: var(--fs-h2); margin: 0 0 20px; }
.split { display: grid; gap: 24px; }
.split > * { min-width: 0; }
@media (min-width: 840px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.small { font-size: .875rem; }

/* ---------- Meta (categorie, datum, leestijd) ---------- */
.meta { font-size: .875rem; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-weight: 600; }
.meta .cat {
  background: var(--signal); color: var(--black); padding: 3px 8px 2px; text-decoration: none;
  font-weight: 800; text-transform: uppercase; letter-spacing: .07em; font-size: .875rem;
}
.meta a.cat { display: inline-flex; align-items: center; min-height: 32px; }
.on-signal .meta .cat { background: var(--black); color: var(--signal); }

/* ---------- Uitgelicht ---------- */
.featured {
  display: grid; color: inherit; text-decoration: none; background: var(--surface);
  border: var(--line) solid var(--fg); box-shadow: 10px 10px 0 var(--hard);
  transition: transform .15s ease, box-shadow .15s ease;
}
.featured:hover { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--hard); }
.featured img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: var(--line) solid var(--fg); background: var(--bg); }
.featured .body { padding: 22px 20px 26px; }
.featured h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-h2); line-height: .95; margin: 14px 0 14px; }
.featured p { margin: 0; color: var(--fg-2); }
.more { margin-top: 20px !important; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .875rem; color: var(--fg) !important; display: inline-flex; align-items: center; gap: 8px; border-bottom: 3px solid var(--signal); }
.more svg { width: 18px; height: 18px; }
@media (min-width: 840px) {
  .featured { grid-template-columns: 1.15fr 1fr; }
  .featured img { height: 100%; aspect-ratio: auto; min-height: 420px; border-bottom: 0; border-right: var(--line) solid var(--fg); }
  .featured .body { padding: 40px; align-self: center; }
}

/* ---------- Genummerde lijst (index) ---------- */
.index { list-style: none; margin: 0; padding: 0; counter-reset: idx; }
.index li { border-bottom: 2px solid var(--fg); }
.index li:first-child { border-top: 2px solid var(--fg); }
.index a {
  display: grid; grid-template-columns: auto 72px 1fr; gap: 14px; align-items: center;
  padding: 16px 4px; color: inherit; text-decoration: none; min-height: 96px;
  transition: background-color .15s ease;
}
.index a:hover { background: var(--signal); color: var(--black); --fg-2: #2A1408; }
.index a:hover .meta .cat { background: var(--black); color: var(--signal); }
.index .num { font-family: var(--font-display); font-size: 2rem; line-height: 1; min-width: 1.6em; color: var(--fg-2); }
.index img { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--fg); background: var(--surface); }
.index h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); line-height: 1; margin: 6px 0 0; }
.index .sum { display: none; margin: 8px 0 0; color: var(--fg-2); font-size: 1rem; max-width: 46rem; }
.index .go { display: none; }
.index .go svg { width: 28px; height: 28px; }
@media (min-width: 700px) {
  .index a { grid-template-columns: 4.5rem 140px 1fr auto; gap: 24px; padding: 22px 8px; }
  .index .num { font-size: 3.25rem; }
  .index img { width: 140px; height: 105px; }
  .index .sum { display: block; }
  .index .go { display: block; }
}

/* ---------- Kaarten (blogoverzicht, breed scherm) ---------- */
.grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid > * { min-width: 0; }
.card {
  display: flex; flex-direction: column; background: var(--surface); color: inherit; text-decoration: none;
  border: var(--line) solid var(--fg); box-shadow: 7px 7px 0 var(--hard);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--hard); }
.card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: var(--line) solid var(--fg); background: var(--bg); }
.card .body { padding: 18px 18px 22px; }
.card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-h3); line-height: 1; margin: 12px 0 10px; }
.card p { margin: 0; color: var(--fg-2); font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.only-phone { display: block; }
.only-wide { display: none; }
@media (min-width: 600px) { .only-phone { display: none; } .only-wide { display: grid; } }

/* ---------- Filters ---------- */
.chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px var(--gutter-r) 10px var(--gutter); margin: 0 calc(var(--gutter) * -1) 16px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--fg); color: var(--fg); background: var(--bg); text-decoration: none;
  font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
}
.chip:hover { background: var(--surface); }
.chip[aria-current="page"] { background: var(--fg); color: var(--bg); }
.cat-uitleg { margin: 0 0 32px; }
.cat-uitleg summary { cursor: pointer; min-height: 48px; display: inline-flex; align-items: center; font-weight: 700; color: var(--fg); text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.cat-uitleg dl { display: grid; gap: 8px; margin: 4px 0 0; font-size: 1rem; color: var(--fg-2); }
.cat-uitleg dl div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.cat-uitleg dt { font-weight: 800; color: var(--fg); }
.cat-uitleg dt::after { content: ":"; }
.cat-uitleg dd { margin: 0; }

/* ---------- Pagina-kop ---------- */
.page-head { padding: 40px 0 32px; }
.page-head h1 { font-size: var(--fs-h1); }
.page-head .intro { font-size: var(--fs-lead); max-width: 40rem; margin: 20px 0 0; }
.page-head::after { content: ""; display: block; width: 96px; height: 10px; background: var(--signal); margin-top: 28px; }
.page-hero-img { margin: 8px auto 0; }
.page-hero-img img { width: 100%; aspect-ratio: 4/3; max-height: 560px; object-fit: cover; object-position: 50% 35%; border: var(--line) solid var(--fg); box-shadow: 12px 12px 0 var(--signal); background: var(--surface); }

/* ---------- Artikel ---------- */
.article-head { padding: 40px 0 8px; }
.article-head h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-h1); line-height: .95; margin: 18px 0 24px; }
.byline { display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.byline img { width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; border: 2px solid var(--fg); }
.byline strong { display: block; font-weight: 800; }
.article-cover { margin: 32px auto 48px; max-width: 980px; }
.article-cover img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border: var(--line) solid var(--fg); box-shadow: 12px 12px 0 var(--signal); background: var(--surface); }
@media (min-width: 840px) { .article-cover img { aspect-ratio: auto; max-height: 72vh; } }

.prose { font-size: 1.125rem; line-height: 1.72; }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.15em; }
.prose > p:first-child { font-size: 1.3125rem; line-height: 1.5; font-weight: 600; }
.prose h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1; }
.prose h3 { font-size: 1.1875rem; font-weight: 800; }
.prose > * + h2 { margin-top: 2.2em; }
.prose > * + h3 { margin-top: 1.6em; }
.prose > h2 + *, .prose > h3 + * { margin-top: .6em; }
.prose figure { margin: 2.2em 0; }
.prose figure img { width: 100%; border: var(--line) solid var(--fg); }
.prose figcaption { font-size: .9375rem; color: var(--fg-2); margin-top: 10px; }
.prose blockquote {
  margin: 2em 0; padding: 8px 0 8px 24px; border-left: 8px solid var(--signal);
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); line-height: 1.35;
}
.prose blockquote p { margin: 0; }
.prose hr { border: 0; height: 10px; width: 96px; background: var(--signal); margin: 3em 0; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li::marker { color: var(--fg); font-weight: 800; }
.prose em { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.05em; }
.prose strong { font-weight: 800; }
.prose p, .prose li, .prose blockquote, .prose h2, .prose h3 { overflow-wrap: break-word; }
@media (max-width: 599px) { .prose p, .prose li, .prose blockquote { hyphens: auto; -webkit-hyphens: auto; } }

.article-actions { display: flex; flex-wrap: wrap; gap: 16px; margin: 56px auto 40px; padding-top: 32px; border-top: var(--line) solid var(--fg); }
.pager { display: grid; gap: 16px; margin: 0 auto 24px; }
@media (min-width: 600px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: block; padding: 18px 20px; border: 2px solid var(--fg); background: var(--surface); color: inherit; text-decoration: none; min-height: 48px; transition: background-color .15s; }
.pager a:hover { background: var(--signal); color: var(--black); }
.pager small { display: block; font-size: .875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.pager strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.375rem; line-height: 1.05; overflow-wrap: anywhere; }
.pager .next { text-align: right; }

/* ---------- Blokken ---------- */
.box { border: var(--line) solid var(--fg); background: var(--surface); box-shadow: 10px 10px 0 var(--hard); padding: 24px 20px; }
@media (min-width: 840px) { .box { padding: 48px; } }
.box p { margin: 0 0 14px; }

.quote-big { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 24px; }
.over-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: var(--line) solid var(--bone); box-shadow: 12px 12px 0 var(--signal); max-width: 440px; }

.follow form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.follow label { flex: 1 1 100%; font-size: .875rem; font-weight: 700; }
.follow input[type="email"] { flex: 1 1 220px; min-height: 52px; padding: 0 16px; border: var(--line) solid var(--fg); background: var(--bg); color: var(--fg); font-size: 1rem; }
.follow input:focus { outline: 3px solid var(--signal); outline-offset: 2px; }

.contact-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.contact-list a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 16px; border: 2px solid var(--fg); background: var(--bg); color: var(--fg); text-decoration: none; font-weight: 700; overflow-wrap: anywhere; }
.contact-list a:hover { background: var(--signal); color: var(--black); }
.contact-list svg { width: 22px; height: 22px; flex: none; }

/* ---------- Footer (altijd zwart) ---------- */
.footer { margin-top: 0; padding: var(--space) 0 32px; }
.footer .big { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(3rem, 15vw, 14rem); line-height: .85; margin: 0 0 40px; color: var(--bone); letter-spacing: 0; }
.footer .big span { color: var(--signal); display: block; }
.footer-cols { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.footer-cols > * { min-width: 0; }
@media (min-width: 840px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer h2 { font-size: .875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--signal); margin: 0 0 10px; font-weight: 800; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.footer li a:hover { color: var(--signal); }
.footer .small { margin-top: 40px; padding-top: 20px; border-top: 2px solid #3A3833; color: #BDB7AA; }

.empty { padding: 32px 24px; text-align: center; border: 2px dashed var(--fg); color: var(--fg-2); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); transform: translate(-50%, 20px);
  background: var(--signal); color: var(--black); padding: 12px 20px; font-weight: 800; border: 2px solid var(--black);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 840px) { .toast { bottom: 24px; } }

/* ---------- Android: platte tabbalk zonder iOS-terugtekst ---------- */
[data-platform="android"] .tabbar a { min-height: 72px; }
[data-platform="android"] body { --tabbar-h: 72px; }
[data-platform="android"] .back .back-label { display: none; }

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:active, .card:hover, .featured:hover { transform: none; }
}

/* ---------- Print ---------- */
@media print {
  .appbar, .tabbar, .footer, .article-actions, .pager, .follow, .strip { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .article-cover img, .card, .featured { box-shadow: none !important; }
}

.section-head + .index li:first-child { border-top: 0; }
.hero-grid > *, .index a > div { min-width: 0; }
.meta > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 1099px) { .strip p { text-align: left; padding-left: var(--gutter); } }