/* =====================================================================
   Scheldt Youth Parliament, site styles.
   Since October 2026 the site follows GoodPlanet's house style (Huisstijlgids 2025):
   Lato only, GoodPlanet blue #1895D3 (a darker variant for headings and small text), no GoodPlanet logo in the header (Luc),
   four of the five secondary colours as accents for shapes. The waves stay: they are the Scheldt's.
   Colours and sizes live in the custom properties below; change them there.
   ===================================================================== */

:root {
  /* Palette: GoodPlanet's house style. Light colours never carry small text (WCAG AA). */
  --water: #1895D3;       /* GoodPlanet blue: waves, river lines, dots, borders, large numbers */
  --water-ink: #1376A7;   /* GoodPlanet blue, darkened for small text, links and filled buttons (5.0:1 on white) */
  --deep: #1376A7;        /* blue surfaces: footer, figures band, dark cards, primary buttons, rivers */
  --deep-hover: #0D5173;  /* hover on blue buttons */
  --heading: #1376A7;     /* headings in GoodPlanet blue, the darker variant (5.0:1 on white, 4.6:1 on Foam), chosen by Tine */
  --ink: #2E2B26;         /* body text */
  --grey: #675F55;        /* secondary text (6.3:1 on white) */
  --mist: #D1EAF6;        /* borders and dividers, a 20% tint of GoodPlanet blue */
  --foam: #EDF7FB;        /* light section backgrounds and soft cards, an 8% tint */
  --ground: #F4F4F4;      /* GoodPlanet's light grey */
  --white: #FFFFFF;
  --on-dark: #FFFFFF;     /* all text on blue surfaces is white: 5.0:1 on --deep */
  /* GoodPlanet's secondary colours, for shapes and accents only (too light for text) */
  --lime: #AFCA14;
  --orange: #E9860D;
  --pink: #E72D52;
  --green: #29AF8A;
  --brown: #494132;       /* GoodPlanet dark brown-grey, dark enough for white text (10:1) */

  /* Type: Lato, GoodPlanet's typeface. Headings in Bold. Quotes in Lora Italic, a serif made for reading, so a quote
     sounds like a voice (Tine, 5 October 2026: a font that suits quotes better). */
  --font-head: "Lato", "Calibri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Lato", "Calibri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-quote: "Lora", Georgia, "Times New Roman", serif;
  --fs-h1: clamp(2.375rem, 1.5rem + 3.6vw, 4rem);           /* 38 to 64 px, homepage */
  --fs-h1-page: clamp(2.25rem, 1.4rem + 3.3vw, 3.625rem);    /* 36 to 58 px, other pages */
  --fs-h2: clamp(1.875rem, 1.35rem + 2vw, 2.625rem);         /* 30 to 42 px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);           /* 20 to 24 px */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);    /* 18 to 21 px */
  --fs-article: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);    /* 17 to 20 px */
  --fs-body: 1.0625rem;   /* 17 px, as on goodplanet.be */
  /* The smallest sizes, raised so nothing on the site is smaller than 16 px (Elke's feedback, 5 October 2026: the titles
     are large, that is no reason for the small text to be tiny). Before: 15, 14 and 13 px. */
  --fs-small: 1.0625rem;  /* 17 px, as large as the body text; it stays grey or bold where it is secondary */
  --fs-label: 1rem;       /* 16 px */
  --fs-tiny: 1rem;        /* 16 px */

  /* Layout, 8 px grid */
  --content: 1200px;
  --gutter: clamp(20px, 3vw, 40px);
  --section: clamp(56px, 2.5rem + 4vw, 112px);       /* 64 mobile to 112 desktop */
  --section-sm: clamp(40px, 1.5rem + 3.5vw, 96px);
  --block: clamp(32px, 1rem + 3vw, 64px);

  /* Shapes */
  --r-lg: clamp(20px, 1.6vw, 28px);   /* large photos, dark cards */
  --r-md: 20px;                        /* gallery photos, soft cards */
  --r-sm: 14px;                        /* small cards, logo tiles */
  --r-pill: 999px;
  --wave-h: clamp(40px, 4.4vw, 64px);

  --shadow-menu: 0 12px 32px rgba(46, 43, 38, 0.12);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-family: var(--font-head);
  color: var(--heading);
  margin: 0;
  text-wrap: pretty;
}
h1, h2, .river-title, .latest-title { text-wrap: balance; }   /* titles in even lines, never one word alone on the last */
p, li, figcaption, dd { text-wrap: pretty; }
h1 { font-weight: 700; font-size: var(--fs-h1-page); line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-weight: 700; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.005em; }
h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }
a { color: var(--water-ink); text-underline-offset: 0.15em; }
a:hover { color: var(--deep-hover); }
:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .bg-deep :focus-visible, .card-dark :focus-visible, .figures :focus-visible { outline-color: var(--white); }
ul, ol { padding-left: 1.25em; }
strong { font-weight: 700; }
hr { border: 0; border-top: 2px solid var(--mist); margin: var(--block) 0; }
::selection { background: color-mix(in srgb, var(--water) 28%, #fff); color: var(--deep-hover); }   /* visible on white and on Foam */
:root { accent-color: var(--water-ink); }
input, textarea { caret-color: var(--water-ink); }
summary::marker { color: var(--water); }
/* On a phone: no grey flash on tap; buttons darken a little while pressed instead */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.btn:active { filter: brightness(0.92); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--deep); color: var(--white); padding: 10px 16px; border-radius: var(--r-pill); font-weight: 700;
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section-sm { padding-top: var(--section-sm); padding-bottom: var(--section-sm); }
.bg-foam { background: var(--foam); }
.bg-mist { background: var(--mist); }
.bg-deep { background: var(--deep); color: var(--white); }
.bg-deep h1, .bg-deep h2, .bg-deep h3 { color: var(--white); }
.bg-deep p { color: var(--on-dark); }
.measure { max-width: 34em; }
.measure-narrow { max-width: 30em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; }
.article { font-size: var(--fs-article); line-height: 1.6; max-width: 34em; }
.article p { margin-bottom: 1.1em; }
.text-grey { color: var(--grey); }
.text-water { color: var(--water-ink); }
.label { color: var(--water-ink); font-weight: 700; font-size: var(--fs-label); }
.label-grey { color: var(--grey); font-weight: 700; font-size: var(--fs-body); }
.eyebrow { color: var(--water-ink); font-weight: 700; font-size: var(--fs-body); margin-bottom: 20px; }
.todo { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 400; font-size: 0.75rem; color: var(--grey); }
.stack > * + * { margin-top: var(--block); }

/* Two-column pattern: heading left, text right (desktop) */
.split { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.4fr; gap: 64px; } }
.split-even { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split-even { grid-template-columns: 1fr 1fr; gap: 64px; } }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-bottom: clamp(24px, 3vw, 40px); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  padding: 14px 28px; border-radius: var(--r-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary { background: var(--deep); color: var(--white); border-color: var(--deep); }
/* Keyboard focus gets the hover colour too: the water band (end of this file) on the plain blue would leave white text at 3.8:1. */
.btn-primary:hover, .btn-primary:focus-visible { background: var(--deep-hover); border-color: var(--deep-hover); color: var(--white); }
/* .btn-secondary is lime with dark text: see "Buttons in GoodPlanet colours" at the end of this file */
.btn-accent { background: var(--water-ink); color: var(--white); border-color: var(--water-ink); }
.btn-accent:hover, .btn-accent:focus-visible { background: var(--deep-hover); border-color: var(--deep-hover); color: var(--white); }
/* On a blue surface the button turns white, so it stands out from the blue around it */
.on-dark .btn-accent, .bg-deep .btn-accent, .card-dark .btn-accent { background: var(--white); border-color: var(--white); color: var(--deep); }
.on-dark .btn-accent:hover, .bg-deep .btn-accent:hover, .card-dark .btn-accent:hover,
.on-dark .btn-accent:focus-visible, .bg-deep .btn-accent:focus-visible, .card-dark .btn-accent:focus-visible { background: var(--foam); border-color: var(--foam); color: var(--deep-hover); }
.btn-small { font-size: var(--fs-small); padding: 7px 18px; background: var(--white); color: var(--deep); border-color: var(--deep); white-space: nowrap; }
.btn-small:hover { color: var(--deep-hover); border-color: var(--deep-hover); }
.btn-nav { font-size: var(--fs-small); padding: 8px 18px; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px 14px; }
@media (max-width: 599px) { .btn-group { flex-direction: column; } .btn-group .btn { width: 100%; } }

.link-arrow { font-weight: 700; font-size: 1.0625rem; color: var(--water-ink); text-decoration: none; }
.link-arrow::after { content: " \2192"; }
.section-head .link-arrow { padding-top: 9px; margin-top: -9px; }   /* 44 px to tap (All news, All exchanges ...), nothing moves */

.link-back { display: inline-block; padding-block: 12px; margin-top: -8px; font-weight: 700; font-size: var(--fs-small); color: var(--water-ink); text-decoration: none; margin-bottom: 12px; }   /* 44 px to tap, same place as before */
.link-back::before { content: "\2190  "; }
.link-back:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 20; background: var(--white); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 18px; padding-bottom: 18px; }
@media (min-width: 960px) { .site-header-inner { padding-top: 28px; padding-bottom: 28px; } }
/* The name of the project top left, without GoodPlanet's logo: with it the site looked like GoodPlanet's own website
   (Luc via Tine, 5 October 2026). 16 px on phones, 30 px on a computer, because the whole site is about it
   (Adam via Tine, file 61, October 2026). On phones under 420 px it stands on two lines. */
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--heading); text-decoration: none; max-width: 9.5em; }
@media (min-width: 420px) { .brand { max-width: none; white-space: nowrap; } }
@media (min-width: 960px) { .brand { font-size: 1.875rem; } }
.brand:hover { color: var(--deep-hover); }

.nav-toggle {
  width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; border-radius: 8px;
}
.nav-toggle-bar { display: block; height: 2.5px; width: 26px; background: var(--deep); border-radius: 2px; transition: transform 0.2s, opacity 0.2s, width 0.2s; }
.nav-toggle-bar:nth-child(2) { width: 18px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
@media (min-width: 1100px) { .nav-toggle { display: none; } }
/* Join beside the menu icon on phones and tablets, so it is always one tap away (Tine's choice, October 2026).
   From 1100 px the full menu shows, with Join as its last item. */
.btn-join-small { flex: none; margin-left: auto; margin-right: -4px; padding: 8px 16px; color: var(--white); }
.btn-join-small[aria-current="page"] { color: var(--white); }
.nav-toggle { flex: none; }
@media (min-width: 1100px) { .btn-join-small { display: none; } }
/* The smallest phones (320 px): a slightly smaller button, so the name, Join and the menu icon fit on one line */
@media (max-width: 359px) {
  .site-header-inner { column-gap: 10px; }
  .btn-join-small { padding: 7px 12px; }
}
/* 360 to 374 px: with the 16 px site name (file 61) the smaller gap keeps the name on two lines instead of three */
@media (max-width: 374px) { .site-header-inner { column-gap: 10px; } }

.site-nav { display: flex; align-items: center; gap: 32px; font-size: var(--fs-body); font-weight: 400; }
.site-nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--deep-hover); }
.site-nav a[aria-current="page"] { color: var(--water-ink); font-weight: 700; }
.site-nav .btn-nav, .site-nav .btn-nav:hover, .site-nav .btn-nav[aria-current="page"] { color: var(--white); }
@media (max-width: 1099px) {
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); padding: 4px var(--gutter) 24px; box-shadow: var(--shadow-menu); border-bottom: 1px solid var(--mist);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 0; border-top: 1px solid var(--mist); font-size: 1.0625rem; }
  .site-nav .btn-nav { margin-top: 16px; padding: 14px 24px; border-top: 0; font-size: 1.0625rem; }
}

/* ---------- Waves ---------- */
.wave { display: block; width: 100%; height: var(--wave-h); margin-bottom: -1px; }
/* High-water mark above the footer wave: the Scheldt is a tidal river */
.wave .wave-tide { fill: none; stroke: var(--water); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0.5; }
/* The wave into the footer is a little lower than the waves between sections (footer.njk) */
.wave:has(+ .site-footer) { height: clamp(28px, 3vw, 44px); }
/* Wave marks around quotes: a double line, centred, long and flat, fading out at both ends like open water.
   Two lines above and two below, like the two strokes of a quotation mark. */
.wave-mark { display: block; width: min(100%, 320px); height: 18px; margin: 0 auto 26px; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent); }
.wave-mark-sm { width: min(100%, 220px); height: 15px; margin-bottom: 0; }
.wave-mark-xs { width: 140px; height: 12px; margin-bottom: 0; }
/* The wave below a quote, mirrored so it closes what the wave above opened */
.wave-mark-end { transform: scaleX(-1); }
.wave-mark.wave-mark-end:not(.wave-mark-sm) { margin: 32px auto 24px; }

/* ---------- Footer ---------- */
/* Two layers (Tine, file 50, choice A): a blue band with everything you act on, then a white strip with the funder,
   the partners and the EU disclaimer, closed by a thin blue line. Breakpoints: 360 (phone menus on columns), 400 (wider gap between the icons), 600, 900, 1200. */
.site-footer { font-size: var(--fs-label); }

/* Layer 1: the blue band */
.footer-main { background: var(--deep); color: var(--on-dark); padding: 12px 0 22px; }
@media (min-width: 900px) { .footer-main { padding: 14px 0 30px; } }
@media (min-width: 1200px) { .footer-main { padding: 12px 0 26px; } }
.site-footer-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
/* GoodPlanet leads, in white on the blue as its house style asks on a coloured background. 44 px at every width,
   so it stays below the EU flag (the flag is 93% of the EU image: about 48 px on phones, 45 px from 600).
   Phones: "A project of" on the line of the word GoodPlanet. */
.footer-goodplanet { display: inline-flex; align-items: flex-end; gap: 12px; justify-self: start; color: var(--on-dark); text-decoration: none; font-size: var(--fs-tiny); font-weight: 700; }
.footer-goodplanet span { margin-bottom: -2px; }
.footer-goodplanet img { display: block; width: auto; height: 44px; }
.footer-goodplanet:hover { color: var(--on-dark); }   /* stays white: the global a:hover would make it dark blue on blue */
.footer-goodplanet:hover img { opacity: 0.85; }
/* The main menu with Join, then the other pages in smaller type. Every link is 44 px tall on phones;
   from 600 px Join is 38 px, from 1200 px the smaller links and Back to top 40 px. */
.footer-navs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.footer-sections { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-family: var(--font-head); font-size: 1.125rem; font-weight: 700; }
.footer-sections a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); text-decoration: none; }
.footer-sections .btn { margin-left: 2px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: var(--fs-small); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); text-decoration: none; }
.footer-sections a, .footer-links a { white-space: nowrap; }
.footer-sections a:not(.btn):hover, .footer-sections a:not(.btn)[aria-current="page"],
.footer-links a:hover, .footer-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }
/* Phones: both menus on the same three columns, so they line up; Join as tall as a finger tip */
@media (max-width: 599px) { .footer-sections .btn { min-height: 44px; margin-left: 0; } }
@media (min-width: 360px) and (max-width: 599px) {
  .footer-sections, .footer-links { display: grid; grid-template-columns: 1fr 1.08fr 1.2fr; gap: 0 8px; justify-items: start; }
}
/* The round icons, then the way back up, pushed to the right (also when it wraps on the smallest phones).
   The arrow is not read out. */
.footer-follow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.footer-follow .social-icons { gap: 10px; flex-wrap: nowrap; }
@media (min-width: 400px) { .footer-follow .social-icons { gap: 12px; } }
.to-top { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-weight: 700; font-size: var(--fs-small); color: var(--white); text-decoration: none; }
.to-top::before { content: "\2191\00a0"; content: "\2191\00a0" / ""; }
.to-top:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.25em; }
/* Only on About: the quiet pencil that starts edit mode for the whole site (Tine, file 58; the edit tools are in edit.css) */
.edit-pencil { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); color: var(--white); transition: background-color 0.2s, border-color 0.2s; }
.edit-pencil:hover, .edit-pencil:focus-visible { background: var(--deep-hover); border-color: var(--white); color: var(--white); }
/* 600 to 1199: GoodPlanet heads the two menu lines, the icons and Back to top run across underneath */
@media (min-width: 600px) {
  .site-footer-inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "gp navs" "follow follow"; gap: 10px 40px; }
  .footer-goodplanet { grid-area: gp; flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-goodplanet span { margin: 0; }
  .footer-navs { grid-area: navs; gap: 0; }
  .footer-follow { grid-area: follow; }
}
/* 1200 and wider: three columns, GoodPlanet | the menus | the icons with Back to top under them */
@media (min-width: 1200px) {
  .site-footer-inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "gp navs follow"; gap: 0 56px; }
  .footer-sections { font-size: 1.1875rem; gap: 0 28px; }
  .footer-links { gap: 0 24px; }
  .footer-links a, .to-top { min-height: 40px; }
  .footer-follow { flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* Layer 2: the white strip, so every logo keeps its own colours (the Agence de l'Eau logo may only be shown on white) */
.footer-funding { background: var(--white); color: var(--ink); padding: 20px 0 18px; border-bottom: 6px solid var(--deep); }
@media (min-width: 1200px) { .footer-funding { padding: 20px 0; } }
.footer-funding-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
/* EU rules: the EU emblem leads, first and the largest logo at every width (the flag at least 1 cm), never faded.
   Image height 52 px on phones (flag about 48 px), 48 px from 600 (flag about 45 px). */
.footer-eu { display: block; justify-self: start; }
.footer-eu img { display: block; width: auto; height: 52px; max-width: 100%; }
.footer-eu:focus-visible { outline-offset: 6px; }
/* The three partners on one row (below about 350 px the ISC logo wraps to a second row),
   never taller than the EU emblem (--h per logo times --logo-scale) */
.footer-logos { --logo-scale: 0.9; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.footer-logos li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.footer-logos img { display: block; height: calc(var(--h, 40px) * var(--logo-scale)); width: auto; max-width: 100%; object-fit: contain; transition: opacity 0.2s; }
/* Each logo links to the partner's own site */
.footer-logos a { display: block; max-width: 100%; border-radius: 6px; }
/* The Agence de l'Eau: as high as the EU emblem at every width (Raphaël, Tine file 83) */
.footer-logo-agence img { height: 52px; }
.footer-logos a:hover img { opacity: 0.7; }
.footer-logos a:focus-visible { outline-offset: 6px; }
/* The disclaimer word for word (site.json), with Erasmus+ named apart from the EU emblem (JINT asks for this) */
.footer-disclaimer { margin: 0; font-size: var(--fs-tiny); line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.footer-programme { color: var(--ink); font-weight: 700; margin-right: 0.35em; }
/* 600 to 1199: the EU emblem on the left, the partners on the same row (to the right from 900), the disclaimer under a fine line */
@media (min-width: 600px) {
  .footer-funding-inner { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "eu logos" "text text"; gap: 16px 40px; }
  .footer-eu { grid-area: eu; }
  .footer-eu img { height: 48px; }
  .footer-logo-agence img { height: 48px; }
  .footer-logos { grid-area: logos; flex-wrap: nowrap; gap: 24px; }
  .footer-disclaimer { grid-area: text; padding-top: 14px; border-top: 1px solid var(--mist); }
}
@media (min-width: 900px) { .footer-logos { --logo-scale: 1; justify-content: flex-end; gap: 40px; } }
/* 1200 and wider: everything on one row, the disclaimer last, beside the logos */
@media (min-width: 1200px) {
  .footer-funding-inner { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "eu logos text"; gap: 0 40px; }
  .footer-logos { --logo-scale: 0.92; justify-content: flex-start; gap: 28px; }
  .footer-disclaimer { padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--mist); text-wrap: balance; }
}
/* High-contrast modes (Windows contrast themes) replace both footer backgrounds with the system colour but leave images alone:
   give the logos back their own ground, so the EU statement (dark blue on transparent) and the white GoodPlanet logo stay visible.
   A ring instead of padding, so no logo shrinks (the EU flag stays at least 1 cm). */
@media (forced-colors: active) {
  .footer-eu img, .footer-logos img { forced-color-adjust: none; background: #fff; box-shadow: 0 0 0 4px #fff; border-radius: 2px; }
  .footer-goodplanet img { forced-color-adjust: none; background: var(--deep); box-shadow: 0 0 0 4px var(--deep); border-radius: 2px; }
}

/* ---------- Photos ---------- */
.photo-rounded img, img.photo-rounded { border-radius: var(--r-lg); object-fit: cover; width: 100%; }
.photo-cover img { width: 100%; height: 100%; object-fit: cover; }
.photo-bleed-left img { border-radius: var(--r-md) 0 0 var(--r-md); }
@media (min-width: 900px) { .photo-bleed-left img { border-radius: var(--r-lg) 0 0 var(--r-lg); } }
.photo-missing { background: repeating-linear-gradient(135deg, var(--white) 0 10px, var(--ground) 10px 20px); border: 1px dashed var(--water); border-radius: var(--r-md); padding: 24px; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; color: var(--grey); }
.photo-caption { margin-top: 10px; }

/* Gallery: rows in which every photo keeps its own shape, so nobody gets cut off.
   On a phone the photos stack; from 700 px they share rows of equal height (rows are planned at build time). */
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-row { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-inline: auto; }
.gallery-item { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* position: relative keeps the hidden "(view larger)" inside the photo; without it, it escaped the swipe strip on phones
   and made the whole page wider than the screen (found 4 Oct 2026) */
.gallery-item > a { position: relative; display: block; width: min(100%, calc(var(--r) * 480px)); margin-inline: auto; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in; background: var(--foam); }
.gallery-item picture, .gallery-item img { display: block; width: 100%; height: auto; }
.gallery-item > a.lightbox-link { border-radius: var(--r-md); }   /* a.lightbox-link below would set 'inherit' and square the corners */
.gallery-item > a:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 3px; }
.gallery figcaption { font-size: var(--fs-tiny); line-height: 1.4; color: var(--grey); }
/* On a phone a gallery is a strip to swipe, like the cards on Youth voices: every photo keeps its shape, the next one peeks in (Tine, file 55) */
@media (max-width: 699px) {
  .gallery { flex-direction: row; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery-row { display: contents; }
  .gallery-item { flex: none; width: min(calc(var(--r) * 240px), calc(100vw - 2 * var(--gutter) - 32px)); scroll-snap-align: start; }
  .gallery-item > a { width: 100%; margin: 0; }
}
@media (min-width: 700px) {
  .gallery, .gallery-row { gap: 20px; }
  .gallery-row { flex-direction: row; }
  .gallery-item { flex: var(--r) 1 0%; }
  .gallery-item > a { width: 100%; margin: 0; aspect-ratio: var(--r); }
  .gallery-item picture, .gallery-item img { height: 100%; object-fit: cover; }
}
.photo-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, var(--white) 0 10px, var(--ground) 10px 20px); border: 1px dashed var(--water); color: var(--grey); font-size: var(--fs-small); font-weight: 700; }

/* Photos that open large */
a.lightbox-link { display: block; cursor: zoom-in; border-radius: inherit; }
.page-hero-photo a.lightbox-link:focus-visible, .posters-photo a.lightbox-link:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 3px; border-radius: var(--r-lg); }
/* A hero photo that opens large (photoLarge, Join; Adam's feedback, October 2026). The link hugs the photo, so the
   small round mark sits in the photo's own corner: a phone has no zoom cursor, the mark tells it can be opened. */
.page-hero-photo a.hero-zoom { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; border-radius: var(--r-md); }
@media (min-width: 900px) { .page-hero-photo a.hero-zoom { margin-right: 0; border-radius: var(--r-lg); } }
.photo-enlarge { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--deep); box-shadow: 0 2px 8px rgba(46, 43, 38, 0.25); pointer-events: none; transition: background-color 0.2s; }
.photo-enlarge .icon { width: 20px; height: 20px; stroke-width: 2; }
a.lightbox-link:hover .photo-enlarge { background: var(--white); }
.lightbox { padding: 0; margin: 0; border: 0; background: transparent; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; inset: 0; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(46, 43, 38, 0.92); }
.lightbox-figure { margin: 0; padding: 64px 16px 24px; box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.lightbox-img { display: block; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 12px; }
.lightbox-caption { color: var(--white); font-size: var(--fs-body); line-height: 1.45; text-align: center; max-width: 40em; }
/* The Join hero (hero-zoom) is a wide group photo: on an upright phone, fitted to the width it opens no bigger than on
   the page. There it opens by height instead, starts in the middle and can be swiped sideways across the faces. */
@media (max-width: 767px) and (orientation: portrait) {
  .lightbox.is-pan .lightbox-figure { overflow-x: auto; align-items: flex-start; }
  .lightbox.is-pan .lightbox-img { max-width: none; max-height: none; height: min(62dvh, 791px); }
  .lightbox.is-pan .lightbox-caption { position: sticky; left: 0; align-self: stretch; }
}
.lightbox-close { position: fixed; top: 16px; right: 16px; z-index: 2; font: inherit; font-weight: 700; font-size: var(--fs-small); padding: 10px 20px; border-radius: var(--r-pill); border: 2px solid var(--white); background: var(--white); color: var(--deep); cursor: pointer; }
.lightbox-close:hover { background: transparent; color: var(--white); }
.lightbox-close:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.gallery .is-wide { grid-column: span 2; }

/* ---------- Cards ---------- */
.mini-card {
  background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-sm);
  padding: 11px 14px; font-size: var(--fs-label); line-height: 1.4; color: var(--ink);
  -webkit-hyphens: auto; hyphens: auto;   /* long words such as "Recommendations" break in narrow cards */
}
.mini-card.is-upcoming { border: 1px dashed var(--water); }
.mini-card .river-date { color: var(--water-ink); font-weight: 700; font-size: var(--fs-label); margin-bottom: 3px; }
.mini-card-title { font-weight: 700; color: var(--deep-hover); }
.mini-card-text { color: var(--grey); margin-top: 4px; }

.card-soft { background: var(--foam); border-radius: 24px; padding: 24px; }
@media (min-width: 900px) { .card-soft { padding: 36px 32px; } }
.card-soft .label { margin-bottom: 8px; display: block; }
.card-soft h3 { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem); margin-bottom: 18px; }
.card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-small); line-height: 1.5; }
@media (min-width: 900px) { .card-list { gap: 14px; font-size: var(--fs-body); } }
.card-list li { padding-top: 12px; border-top: 1px solid var(--mist); }

.card-quote { margin: 0; border: 2px solid var(--mist); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .card-quote { padding: 32px; gap: 20px; } }
.card-quote p { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.4; color: var(--deep); margin: 0; flex: 1; text-wrap: pretty; }
.card-quote cite { font-style: normal; font-size: var(--fs-small); font-weight: 700; color: var(--grey); }
/* Quotes with a person (Youth voices, and the quote on an exchange page): a larger quote, the name with a
   hand-drawn line, and where and when. The colours come from the colour cards below (Tine: no initial in a circle). */
.card-quote:has(.quote-person) p { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.4; }
/* A shorter quote sits in the middle between its two wave marks, which stay level with the other cards (Tine, 2 Oct) */
.card-quote:has(.quote-person) p { display: flex; flex-direction: column; justify-content: center; }
.card-grid .card-quote:nth-child(3n+1) { --accent: var(--orange); }
.card-grid .card-quote:nth-child(3n+2) { --accent: var(--green); }
.card-grid .card-quote:nth-child(3n+3) { --accent: var(--lime); --line: color-mix(in srgb, var(--lime) 80%, var(--ink)); }   /* thin lines in pure lime fade on its tint */

/* Colour cards (Tine, 2 October 2026: livelier, less boring). One GoodPlanet colour per card: a band with one long,
   slow wave on top and a light tint of the same colour behind the text; wave marks and hand-drawn lines in the card
   take that colour too. Used for the quotes with a person, the five reasons on Join, the recommendations on
   Youth voices and the two cards at the bottom of About. The tint is 10%, pink 7% and blue 8% (--tint), so small
   blue text stays at least 4.5:1. Set --accent per card; for lime also --line, a darker lime for thin lines. */
.colour-card { --scribble: var(--line, var(--accent)); position: relative; overflow: hidden; border: 0; padding-top: 44px; background: color-mix(in srgb, var(--accent) var(--tint, 10%), var(--white)); }
.colour-card::before {
  --band-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H400 V9 C340,9 300,20 220,20 C140,20 90,7 0,13 Z'/%3E%3C/svg%3E");
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: var(--accent);
  -webkit-mask: var(--band-shape) 0 0 / 100% 100% no-repeat; mask: var(--band-shape) 0 0 / 100% 100% no-repeat;
}
/* The band sways, in the rhythm of the wave above the homepage band (Tine, file 63, point 10, October 2026).
   As there, a strip twice the card's width slides by half its width to the right, 16.9 s across (30% faster since 5 October 2026), and rises and falls
   a little from the top, 5 s each way, so it never comes loose from the top of the card. Its wave repeats once per
   card width, so the slide has no seam; the edge stays between 9 and 20 of 24, as deep as the still band, drawn the way
   eleventy.config.js draws the homepage strip. translate and scale are separate properties, so the two motions add up
   instead of one replacing the other, and only those two move (no layout, no repaint). The still band above stays for
   people who ask for less motion. Cards side by side never move in step: each place in a row gets its own speed
   (15.8 to 18.1 s and 4.8 to 5.3 s) and starts at another point of its slide and breath (the negative delays). */
@media (prefers-reduced-motion: no-preference) {
  .colour-card::before {
    --band-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 24' preserveAspectRatio='none'%3E%3Cpath d='M0,14.5 C72,21.83 128,21.83 200,14.5 C272,7.17 328,7.17 400,14.5 C472,21.83 528,21.83 600,14.5 C672,7.17 728,7.17 800,14.5 V0 H0 Z'/%3E%3C/svg%3E");
    right: auto; width: 200%; transform-origin: 50% 0;
    animation: band-drift var(--band-drift, 16.9s) linear var(--band-drift-delay, 0s) infinite, band-breathe var(--band-breathe, 5s) ease-in-out var(--band-breathe-delay, 0s) infinite alternate;
  }
  .colour-card:nth-child(5n+1) { --band-drift: 16.9s; --band-drift-delay: -2.3s; }
  .colour-card:nth-child(5n+2) { --band-drift: 15.8s; --band-drift-delay: -8.5s; }
  .colour-card:nth-child(5n+3) { --band-drift: 18.1s; --band-drift-delay: -13.1s; }
  .colour-card:nth-child(5n+4) { --band-drift: 16.2s; --band-drift-delay: -4.6s; }
  .colour-card:nth-child(5n+5) { --band-drift: 17.7s; --band-drift-delay: -10.8s; }
  .colour-card:nth-child(4n+1) { --band-breathe: 5s; --band-breathe-delay: -0.8s; }
  .colour-card:nth-child(4n+2) { --band-breathe: 5.3s; --band-breathe-delay: -3.5s; }
  .colour-card:nth-child(4n+3) { --band-breathe: 4.8s; --band-breathe-delay: -2s; }
  .colour-card:nth-child(4n+4) { --band-breathe: 5.2s; --band-breathe-delay: -6.2s; }
}
@keyframes band-drift { from { translate: -50% 0; } to { translate: 0 0; } }
@keyframes band-breathe { from { scale: 1 0.85; } to { scale: 1 1.15; } }
.colour-card .wave-mark g { stroke: var(--line, var(--accent)); }
.colour-card .wave-mark path:first-child { stroke-width: 2.6; }
.colour-card .wave-mark path + path { stroke-width: 1.8; stroke-opacity: 0.7; }
.quote-person cite { --scribble: var(--line, var(--accent)); display: inline-block; margin-bottom: 4px; font-size: var(--fs-body); font-style: normal; font-weight: 700; color: var(--deep); }
.quote-meta { display: block; font-size: var(--fs-label); line-height: 1.35; color: var(--grey); }
.card-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.card-grid-2 { display: grid; gap: 16px; }
@media (min-width: 700px) { .card-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.card-dark { background: var(--deep); color: var(--white); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) { .card-dark { border-radius: var(--r-lg); padding: 56px 64px; flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } }
.card-dark h2, .card-dark h3 { color: var(--white); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15; margin-bottom: 12px; }
.card-dark p { margin: 0; color: var(--on-dark); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); max-width: 34em; }
.card-dark .btn { flex: none; white-space: nowrap; }
@media (max-width: 599px) { .card-dark .btn { white-space: normal; } }
.card-dark-media { display: grid; gap: 16px; }
@media (min-width: 900px) { .card-dark-media { grid-template-columns: 360px 1fr auto; padding: 40px; } .card-dark-media picture, .card-dark-media img { width: 360px; height: 240px; object-fit: cover; border-radius: var(--r-md); } }
@media (max-width: 899px) { .card-dark-media picture, .card-dark-media img { width: 100%; height: 180px; object-fit: cover; border-radius: 16px; } }
/* A photo with a caption in a dark card: the caption in the gallery caption style, white on the dark blue */
.card-dark-figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.card-dark-figure figcaption { font-size: var(--fs-tiny); line-height: 1.4; color: var(--on-dark); }
/* A light card with the layout of a dark one (Youth voices, Tine file 55): it does not compete with the dark call to action below it */
.card-light { background: var(--foam); color: var(--ink); border-radius: 24px; padding: 24px; }
@media (min-width: 900px) { .card-light { border-radius: var(--r-lg); padding: 40px; align-items: center; column-gap: 48px; } }
.card-light h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15; margin-bottom: 12px; }
.card-light p { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); max-width: 34em; }
.card-light .btn { flex: none; white-space: nowrap; }
@media (max-width: 599px) { .card-light .btn { white-space: normal; } }
.card-light-label { margin-bottom: 12px; }
.card-light .card-dark-figure figcaption { color: var(--grey); }

/* Pull quote inside a text column */
/* Between two small wave marks, like the quotes on the colour cards (Tine, file 55) */
.pull-quote { margin: 32px 0; }
@media (min-width: 900px) { .pull-quote { margin: 40px 0; } }
.pull-quote .wave-mark { margin: 0 0 14px; }
.pull-quote .wave-mark.wave-mark-end { margin: 14px 0 0; }
.pull-quote p { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35; color: var(--deep); margin: 0; }

/* Large quote block with photo (exchange page) */
.quote-block p { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.35; color: var(--deep); margin: 0 0 20px; }
.quote-block > cite { font-style: normal; font-size: var(--fs-small); font-weight: 700; color: var(--grey); }

/* Key facts grid (exchange page) */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; font-size: var(--fs-body); line-height: 1.45; border-top: 2px solid var(--mist); padding-top: 24px; }
.facts .label { display: block; margin-bottom: 4px; }
.facts dd { margin-inline-start: 0; }
dl.facts { margin-bottom: 0; }

/* ---------- Figures band ---------- */
/* The swaying wave above the blue band on the homepage ({% swayWave %}, Tine, file 62, choice A "but a bit faster", October 2026),
   and above the figures on The Scheldt (file 63, point 10); since 5 October 2026 every {% wave %} too: between sections,
   on the news tiles and above the footer, where the tide line slides and breathes with the water (Tine: "everywhere
   there is such a wavy band"). The wave edges of photos and of the join call slide as well, see "Wave edge for photos".
   Only the edge moves: a strip twice as wide slides by half its width, to the right as the Scheldt flows on the site's
   drawings, and rises and falls a little from the band up, so it never comes loose from the band. 16.9 s across and
   5 s each way (the demo had 30 s and 9 s; 30% faster since 5 October 2026); js/sway.js turns that into 15.4 to 18.5 s and 4.6 to 5.4 s per wave and visit and
   rests each wave while it is off screen. The still wave, the same as today's, shows when less motion is asked for.
   The colour cards' band sways in the same rhythm (.colour-card::before). */
.wave-sway { position: relative; overflow: hidden; margin-bottom: -2px; }   /* -2 px: no light hairline above the band at fractional zoom (110%) */
.wave-sway-still { width: 100%; height: 100%; }
.wave-sway-water { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .wave-sway-still { display: none; }
  .wave-sway-water { display: block; position: absolute; inset: 0; transform-origin: 50% 100%; animation: wave-sway-breathe 5s ease-in-out infinite alternate; }
  .wave-sway-strip { width: 200%; max-width: none; height: 100%; animation: wave-sway-drift 16.9s linear infinite; }
  .wave-sway.is-resting .wave-sway-water, .wave-sway.is-resting .wave-sway-strip { animation-play-state: paused; }
}
@keyframes wave-sway-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes wave-sway-breathe { from { transform: scaleY(0.85); } to { transform: scaleY(1.15); } }

.figures { background: var(--deep); color: var(--white); padding: 24px 0 48px; }
@media (min-width: 900px) { .figures { padding: 40px 0 72px; } }
.figures-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; text-align: center; }
@media (min-width: 900px) { .figures-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: left; } }
.figure-number { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); line-height: 1; color: var(--white); }
/* A bar in one of GoodPlanet's secondary colours under each number, as wide as the number (Tine's choice) */
.figure-number::after { content: ""; display: block; width: 100%; height: 5px; margin-top: 14px; border-radius: 3px; background: var(--accent, var(--lime)); }
.figures-grid > div:nth-child(4n+1) { --accent: var(--lime); }
.figures-grid > div:nth-child(4n+2) { --accent: var(--orange); }
.figures-grid > div:nth-child(4n+3) { --accent: var(--pink); }
.figures-grid > div:nth-child(4n+4) { --accent: var(--green); }
.figure-label { margin-top: 8px; font-size: var(--fs-small); font-weight: 400; color: var(--on-dark); }
@media (min-width: 900px) { .figure-label { margin-top: 10px; font-size: 1.125rem; } }

/* The same band on an inner page (Exchanges: the last group in figures), with a title that says what the figures count */
.figures-title { margin: 0 0 28px; font-size: var(--fs-h3); line-height: 1.2; color: var(--white); text-align: center; }   /* centred over the figures, as they are on a phone */
@media (min-width: 900px) { .figures-title { margin-bottom: 36px; text-align: left; } }
.figures-page { margin-bottom: var(--block); }
.figures-page p { margin: 0; }   /* paragraphs, so edit mode reaches them; the spacing comes from .figure-label */
.figures-page .figure-label { margin-top: 8px; }
@media (min-width: 900px) { .figures-page .figure-label { margin-top: 10px; } }

/* The homepage band: why join, in four points (Elke's feedback, 5 October 2026; it held four figures before, Tine's file 62).
   Each point: the icon of the matching reason on Join on a disc in one of GoodPlanet's secondary colours (lime, orange,
   pink, green), a short title and one line. Phones: one column, the disc beside the words, so each point reads in one
   glance; from 600 px two columns; from 900 px four, each centred under its disc, as the figures were (Tine, 5 October 2026).
   The discs are shapes only: the line of each icon has 3:1 or more on its disc (see "Lucide icons and colour discs"). */
.why-grid { list-style: none; display: grid; gap: 28px; }
.why-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 18px; }
.why-icon { --disc-size: 56px; --line-icon-stroke: 3px; }
.why-icon .line-icon { width: 62%; height: 62%; color: currentColor; }
.why-icon .line-icon path { stroke-width: var(--line-icon-stroke); }
.why-title { margin: 3px 0 4px; font-size: 1.375rem; line-height: 1.2; color: var(--white); }
.why-text { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--on-dark); }
@media (min-width: 600px) { .why-grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; } }
@media (min-width: 900px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .why-item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .why-icon { --disc-size: 68px; margin-bottom: 18px; }
  .why-title { margin: 0 0 8px; font-size: 1.5rem; }
  .why-text { font-size: 1.125rem; max-width: 15em; text-wrap: balance; }
}

/* ---------- Latest block ---------- */
/* Four posts: the newest big, three beside it with their photo next to the text, about twice the old 176 px photo, so the
   three are as tall as the big post and the empty space under them is gone (Tine, file 62, October 2026, option A).
   Side by side only from 1100 px: narrower, the right column has no room for a large photo and a title next to each other,
   so the three stand under the big post, as on a phone. */
.latest { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1100px) { .latest { grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: stretch; } }   /* 5:4 instead of 3:2: the wider right column lets the photos double without squeezing the titles */
.latest a { text-decoration: none; color: var(--ink); }
.latest-main { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .latest-main { gap: 20px; } }
.latest-main picture, .latest-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
@media (min-width: 900px) { .latest-main picture, .latest-main img { aspect-ratio: 16 / 10; border-radius: var(--r-lg); } }
.latest-main .latest-date { font-size: var(--fs-tiny); }
@media (min-width: 900px) { .latest-main .latest-date { font-size: var(--fs-small); margin-bottom: -12px; } }   /* 8 px to its title, 20 to the photo */
/* 900 to 1099 px: the three posts stand under the big one, so the big post puts its photo beside its text, like a wider
   version of the three rows, instead of a photo filling the screen. The 1fr row keeps date, title and text together. */
@media (min-width: 900px) and (max-width: 1099px) {
  .latest-main { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 32px; row-gap: 0; }
  .latest-main picture { grid-column: 1; grid-row: 1 / -1; }
  .latest-main .latest-date, .latest-main .latest-title, .latest-main .latest-text { grid-column: 2; }
  .latest-main .latest-date { margin: 0 0 8px; }
  .latest-main .latest-title { margin: 0 0 12px; }
}
.latest-main .latest-title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.2; color: var(--deep); text-wrap: pretty; letter-spacing: -0.01em; }
.latest-main .latest-text { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--grey); max-width: 32em; }
@media (max-width: 599px) { .latest-main .latest-text { display: none; } }
.latest-date { color: var(--water-ink); font-weight: 700; font-size: var(--fs-tiny); }
.latest-list { display: flex; flex-direction: column; gap: 24px; padding-top: 32px; border-top: 2px solid var(--mist); }
@media (min-width: 600px) { .latest-list { gap: 32px; } }
/* Beside the big post the list is stretched to its height: the space between the three takes up what is left, so the last photo ends level with the big post */
@media (min-width: 1100px) { .latest-list { justify-content: space-between; gap: 24px; padding-top: 0; border-top: 0; } }
.latest-item { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
@media (min-width: 600px) { .latest-item { grid-template-columns: 240px 1fr; gap: 24px; } }
@media (min-width: 1100px) { .latest-item { grid-template-columns: 52% 1fr; gap: 20px; } }   /* 230 to 266 px wide, as in the mock of file 62 */
/* The small photos share one shape, 3:2, as in the lists on Exchanges and News (Tine, files 55 and 62). Where faces sit off-centre, src/_data/photoCrop.json says which part stays in view. */
.latest-item picture { display: block; }
.latest-item img, .latest-item-nophoto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; border-radius: var(--r-sm); }
@media (min-width: 600px) { .latest-item img, .latest-item-nophoto { border-radius: var(--r-md); } }
.latest-item-nophoto { background: var(--mist); }
.latest-item-body { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 600px) { .latest-item-body { gap: 10px; } }
.latest-item .latest-title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--deep); text-wrap: pretty; }
@media (min-width: 600px) { .latest-item .latest-title { font-size: 1.25rem; line-height: 1.25; } }
.latest-item .latest-text { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--grey); }
/* The summary only where it has room: beside the photo on a tablet. On a phone the title is enough; in the right column it would make each post taller than its photo, so there date and title only, as in the mock */
@media (max-width: 599px), (min-width: 1100px) { .latest-item .latest-text { display: none; } }
.latest a:hover .latest-title { color: var(--deep-hover); text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- River timeline ---------- */
.river { --river-x: 44px; --river-w: 64px; --river-gap: 28px; position: relative; }
.river-track { list-style: none; margin: 0; padding: 0; position: relative; }
.river-item { position: relative; }
.river-mid { position: absolute; }
.river-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--deep); z-index: 2; }
.is-upcoming .river-dot { width: 12px; height: 12px; background: var(--white); border: 2.5px solid var(--water); }
.river-dot::after { content: ""; position: absolute; background: var(--mist); z-index: -1; }
.river-seg { position: absolute; overflow: visible; z-index: 1; }
.river-seg path { fill: none; stroke: var(--deep); stroke-width: 3px; }
/* What is still to come: a line of round drops, on both rivers */
.river-seg.is-dashed path { stroke: var(--water); stroke-dasharray: 0 9; stroke-linecap: round; }
.river-seg path.river-trib { stroke-width: 2px; stroke-linecap: round; stroke-dasharray: none; }   /* side rivers stay whole, also where the Scheldt is still to come */
.river-mouth { position: absolute; overflow: visible; z-index: 1; }
.river-mouth .river-mouth-line { fill: none; stroke: var(--deep); }
/* Nature along the banks (lib/river-nature.js): quiet line drawings, hidden where there is no room. */
.river-deco { display: none; position: absolute; z-index: 0; color: var(--water-ink); opacity: 0.5; pointer-events: none; }
.river-deco svg { display: block; width: 100%; height: 100%; overflow: visible; }
.river-deco path { fill: none; stroke: currentColor; stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.river-deco .river-deco-fill { fill: currentColor; stroke: none; }
.river-deco.is-mirrored svg { transform: scaleX(-1); }
.river-deco-reeds { width: 36px; height: 43px; }
.river-deco-gulls { width: 62px; height: 30px; }
.river-mouth.is-dashed .river-mouth-line { stroke: var(--water); stroke-dasharray: 0 9; stroke-linecap: round; }
.river-marker { position: absolute; z-index: 3; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--fs-label); font-weight: 700; color: var(--grey); white-space: nowrap; }
.river-start-label { color: var(--water-ink); font-weight: 700; font-size: var(--fs-label); margin-bottom: 8px; }
/* Homepage river cards (Tine, file 62, October 2026): each card is one link, to its own page or to its moment on the
   Timeline page. A Lucide icon in the river's blue beside the date (above it on wide screens), a title of at most three
   words, then the short sentence. */
.river-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.river-card > :not(.icon, .river-date) { grid-column: 1 / -1; }
.river-card .river-date { margin-bottom: 0; }
.river-card .mini-card-title { margin-top: 3px; }
.river-card .icon { color: var(--deep); }
.river-card .mini-card-text { text-wrap: wrap; }   /* "pretty" (from li) left "Our" alone on the first line in the 204 px cards */
.river-card.is-upcoming .icon { color: var(--water); }   /* like the dotted river: still to come (3.4:1 on white) */
.river-card:hover, .river-card:focus-visible { border-color: var(--water-ink); }
.river-card:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--deep) 18%, transparent); }
.river-card:hover .mini-card-title, .river-card:focus-visible .mini-card-title { text-decoration: underline; }
/* The last stop on the homepage river is the invitation (Elke's feedback, 5 October 2026: "Your turn next" must stand out
   and make people click): a lime card, the colour of the "Join us" button at the bottom of the page, with dark text (7.6
   to 1), its sentence always showing and a blue button inside (white on --deep, 5.0 to 1). The whole card is the link.
   Its dot sends out a slow ring, like a drop falling into water; no motion for people who ask for less. */
.river-card.is-cta { background: var(--lime); border: 1px solid var(--lime); }
.river-card.is-cta .icon, .river-card.is-cta .river-date, .river-card.is-cta .mini-card-title, .river-card.is-cta .mini-card-text { color: var(--ink); }
.river-card.is-cta .mini-card-title { font-size: 1.125rem; line-height: 1.25; }
.river-card-cta { grid-column: 1 / -1; justify-self: start; margin-top: 12px; padding: 10px 22px; border-radius: var(--r-pill); background: var(--deep); color: var(--white); font-weight: 700; font-size: var(--fs-body); line-height: 1.2; transition: background-color 0.2s; }
.river-card.is-cta:hover, .river-card.is-cta:focus-visible { border-color: var(--deep); }
.river-card.is-cta:hover .mini-card-title { text-decoration: none; }
.river-card.is-cta:hover .river-card-cta, .river-card.is-cta:focus-visible .river-card-cta { background: var(--deep-hover); text-decoration: underline; }
.river-stop.is-cta .river-dot { background: var(--lime); border-color: var(--deep); }
@media (prefers-reduced-motion: no-preference) {
  .river-stop.is-cta .river-dot { animation: river-invite 3.2s ease-out infinite; }
}
@keyframes river-invite { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--water) 55%, transparent); } 70%, to { box-shadow: 0 0 0 18px transparent; } }
.river-date { color: var(--water-ink); font-weight: 700; font-size: var(--fs-tiny); }
.river-title { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--deep); }
.river-text { font-size: var(--fs-label); line-height: 1.5; color: var(--ink); }
.is-upcoming .river-text { color: var(--grey); }
.river-entry { display: flex; flex-direction: column; gap: 6px; }
.river-entry-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.river-entry .link-arrow { font-size: var(--fs-label); }
.river-photo { display: block; align-self: flex-start; width: auto; height: auto; max-width: 100%; max-height: 180px; border-radius: var(--r-sm); margin-top: 6px; }

/* River timeline on the Timeline page (timelineRiver in eleventy.config.js). Every stop is a list item,
   and so are the source and "Today". Each item draws its own piece of river, from 13px below its top (the middle of a dot)
   to 13px below the top of the next item, so the pieces join up.
   Small screens: the river runs down on the left, close to the edge, so the text keeps most of the width (Tine, file 50).
   Wide screens: down the middle, see the media query below. */
.river-timeline { --river-x: 4px; --river-w: 44px; --river-gap: 20px; --sea-w: 120px; --sea-h: 240px; }
.river-timeline .river-track { display: flex; flex-direction: column; }
.river-timeline .river-item { padding-left: calc(var(--river-x) + var(--river-w) + var(--river-gap)); }
.river-timeline .river-mid { left: var(--river-x); top: 0; bottom: 0; width: var(--river-w); }
.river-timeline .river-seg-v { left: 0; width: 100%; top: 13px; height: 100%; }
/* --c on each item is its place across the river band (0 = left bank, 1 = right bank), set by lib/scheldt-river.js. */
.river-timeline .river-dot { top: 6px; left: calc(var(--c, 0) * var(--river-w) - 7px); }
.river-timeline .is-upcoming .river-dot { top: 7px; left: calc(var(--c, 0) * var(--river-w) - 6px); }
.river-timeline .is-milestone .river-dot { width: 20px; height: 20px; top: 3px; left: calc(var(--c, 0) * var(--river-w) - 10px); }
/* The thin line from a stop stops short of its text, so it never touches a date */
.river-timeline .river-dot::after { top: 50%; left: 100%; height: 2px; margin-top: -1px; width: calc((1 - var(--c, 0)) * var(--river-w) + var(--river-gap) - 16px); }
/* The source: a drop like the one in our logo, the river runs out of it */
.river-timeline .river-head { min-height: 56px; }
.river-source { position: absolute; z-index: 2; top: -8px; left: calc(var(--c, 0.5) * var(--river-w) - 13px); width: 26px; height: 26px; overflow: visible; fill: var(--mist); stroke: var(--deep); stroke-width: 2px; stroke-linejoin: round; }
.river-timeline .river-head .river-seg-v { top: 16px; height: calc(100% - 3px); }
/* One line beside the source (timeline.md, riverNote): quiet, on the side of the first stop */
.river-note { margin: -3px 0 0; padding-bottom: 24px; max-width: 400px; font-size: var(--fs-tiny); line-height: 1.45; color: var(--grey); text-wrap: pretty; }
.river-timeline .river-stop { --after: 28px; padding-bottom: var(--after); }
.river-timeline .river-stop:last-child { padding-bottom: 0; }
.river-timeline .has-break { --after: 64px; }
/* "Today", on the river between what happened and what is coming (on small screens its label stands with the text) */
.river-timeline .river-today { min-height: 72px; }
.river-timeline .river-marker.is-today { top: 0; left: calc(var(--river-w) + var(--river-gap)); background: var(--deep); border-color: var(--deep); color: var(--white); }
/* The sea after the last stop: the banks open wide and the water fades, just above the motto */
.river-sea { position: absolute; z-index: 0; top: 13px; left: calc(var(--c, 0) * var(--river-w) - var(--sea-w) / 2); width: var(--sea-w); max-width: none; height: var(--sea-h); overflow: visible; pointer-events: none; }
.river-sea-wide { display: none; }
.river-sea .river-sea-line { fill: none; }
.river-sea.is-dashed .river-sea-line { stroke-dasharray: 0 9; stroke-linecap: round; }
/* Rhythm without photos (src/_data/timeline.json): large year numbers per chapter, milestones larger, small moments compact, one key figure */
.river-chapter { margin-bottom: 14px; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.5rem); line-height: 1; color: var(--water); }
.river-chapter small { display: block; margin-top: 4px; font-size: 0.5em; line-height: 1.1; }
.river-figure { margin-top: 20px; font-size: var(--fs-small); font-weight: 700; line-height: 1.3; color: var(--water-ink); }
.river-figure-number { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.5rem, 1.9rem + 2.2vw, 3.5rem); line-height: 1; color: var(--water); }
.river-timeline .river-entry { max-width: 560px; }
.river-timeline .river-text { font-size: var(--fs-small); }
.river-timeline .is-milestone .river-title { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.15; }
.river-timeline .is-minor .river-title { font-size: 1rem; }
.river-timeline .is-minor .river-text { color: var(--grey); }
/* Small moments: date and title; the title opens the text (js/timeline.js). Without JavaScript the text shows and the
   title looks like any other title. A small plus in a circle after the title, a minus when open. */
.river-toggle { appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; line-height: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.river-toggle-icon { display: none; }
.js-fold .river-toggle-icon { display: inline-block; position: relative; width: 18px; height: 18px; margin-left: 8px; vertical-align: -2px; border: 1.5px solid currentColor; border-radius: 50%; }
.js-fold .river-toggle-icon::before, .js-fold .river-toggle-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 1.5px; margin: -0.75px 0 0 -4px; background: currentColor; }
.js-fold .river-toggle-icon::after { transform: rotate(90deg); }
.js-fold .river-toggle[aria-expanded="true"] .river-toggle-icon::after { display: none; }
.js-fold .river-toggle:hover { color: var(--deep-hover); }
.js-fold .river-toggle { padding-block: 12px; margin-block: -12px; }   /* easier to tap on a phone; nothing moves */
.river-toggle:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 3px; border-radius: 4px; }
.js-fold .river-timeline .is-minor:not(.is-open) .river-text { display: none; }
/* Arriving at one moment from the homepage river (/timeline/#2015-senate-plenary, "id" in timeline.json; Tine, file 62,
   October 2026): it stops with room above it, so the river is seen flowing in, and lights up briefly: a Foam glow behind
   its text (every text colour keeps 4.5:1 on Foam) and a ring around its dot. A small moment opens (js/timeline.js).
   No animation with reduced motion: the page simply opens at the moment. */
.river-timeline .river-stop { scroll-margin-top: clamp(48px, 15vh, 140px); }
@media (prefers-reduced-motion: no-preference) {
  .river-timeline .river-stop:target .river-entry { border-radius: 6px; animation: river-moment-glow 2.6s ease-in 0.3s both; }
  .river-timeline .river-stop:target .river-dot { animation: river-moment-ring 1.2s ease-out 0.3s 2; }
}
@keyframes river-moment-glow { from, 40% { background-color: var(--foam); box-shadow: 0 0 0 14px var(--foam); } to { background-color: transparent; box-shadow: 0 0 0 14px transparent; } }
@keyframes river-moment-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--water) 60%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }

/* Centered river on wide screens (Timeline page) */
@media (min-width: 900px) {
  .river-timeline { --river-w: 120px; --river-gap: 40px; --sea-w: 440px; --sea-h: 300px; }
  .river-timeline .river-item { display: grid; grid-template-columns: 1fr var(--river-w) 1fr; column-gap: var(--river-gap); padding-left: 0; }
  .river-timeline .river-mid { position: relative; grid-column: 2; grid-row: 1; left: auto; width: auto; align-self: stretch; min-height: 100%; }
  /* Less air between the moments, so the page is shorter (Tine, 2 Oct: "Timeline is also still too long") */
  .river-timeline .river-stop { --after: 40px; }
  .river-timeline .has-break { --after: 96px; }
  /* A moment that opens a chapter is as tall as its chapter year, so the year never touches the next moment */
  .river-timeline .has-chapter { min-height: calc(84px + var(--after)); }
  .river-timeline .river-stop .river-seg-v { height: calc(100% + var(--after)); }
  /* Chapter numbers and the key figure sit on the other side of the river from the entry */
  .river-timeline .river-chapter, .river-timeline .river-figure { position: absolute; z-index: 2; top: -12px; margin: 0; }
  .river-timeline .side-a .river-chapter, .river-timeline .side-a .river-figure { left: calc(50% + var(--river-w) / 2 + 56px); }
  .river-timeline .side-b .river-chapter, .river-timeline .side-b .river-figure { right: calc(50% + var(--river-w) / 2 + 56px); text-align: right; }
  .river-timeline .side-a .river-entry { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
  .river-timeline .side-b .river-entry { grid-column: 3; grid-row: 1; justify-self: start; }
  .river-timeline .river-entry { max-width: 400px; }
  .river-timeline .river-note { grid-row: 1; font-size: var(--fs-label); }
  .river-timeline .side-a .river-note { grid-column: 1; justify-self: end; text-align: right; }
  .river-timeline .side-b .river-note { grid-column: 3; justify-self: start; }
  .river-timeline .side-a .river-dot::after { left: auto; right: 100%; width: calc(var(--c, 0) * var(--river-w) + var(--river-gap) - 16px); }
  .river-timeline .river-title { font-size: 1.125rem; line-height: 1.25; }
  .river-timeline .river-text { font-size: 1rem; }
  .river-timeline .is-minor .river-text { font-size: var(--fs-small); }
  .river-timeline .river-date { font-size: var(--fs-label); }
  /* "Today" on the river itself; the wide sea opens towards the middle of the page, under the motto */
  .river-timeline .river-today .river-mid { min-height: 80px; }
  .river-timeline .river-marker.is-today { top: 13px; left: calc(var(--c, 0) * var(--river-w)); transform: translate(-50%, -50%); font-size: var(--fs-tiny); padding: 6px 14px; }
  .river-timeline .river-sea-narrow { display: none; }
  .river-timeline .river-sea-wide { display: block; left: calc(var(--river-w) / 2 - var(--sea-w) / 2); }
  /* Nature beside the river: reeds by the source, under the first chapter number; gulls over the sea */
  .river-timeline .river-deco { display: block; top: 10px; }
  .river-timeline .has-chapter .river-deco { top: 150px; }
  .river-timeline .side-a .river-deco { left: calc(100% + 32px); }
  .river-timeline .side-b .river-deco { right: calc(100% + 32px); }
  .river-timeline .river-deco-reeds { width: 54px; height: 65px; }
  .river-timeline .river-deco-gulls { width: 88px; height: 43px; }
  .river-timeline .river-stop:last-child .river-deco-gulls { top: 96px; left: calc(var(--c, 0) * var(--river-w) + 56px); right: auto; }
  .river-timeline .side-b.river-stop:last-child .river-deco-gulls { left: auto; right: calc((1 - var(--c, 0)) * var(--river-w) + 56px); }
}

/* The river flows on as you scroll down, as far as a line at 65% of the screen height (Tine, file 50): each piece is uncovered
   from the top while it crosses that line (the inset moves the bottom of the screen up by 35%), so the pieces follow on
   as one river. Only in browsers that know scroll-driven animations, never with reduced motion; elsewhere the river
   is simply there. The dotted part, what is still to come, flows on the same way, and so does the sea it opens into (Tine, 3 Oct). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .river-timeline .river-seg, .river-timeline .river-sea { view-timeline: --river-piece block; view-timeline-inset: 0% 35%; animation: river-flow linear both; animation-timeline: --river-piece; animation-range: entry 0% entry 100%; }
  }
}
/* The sides stay open: a bend may swing up to a quarter of the band beyond it (lib/scheldt-river.js) */
@keyframes river-flow { from { clip-path: inset(0 -48px 100% -48px); } to { clip-path: inset(0 -48px 0 -48px); } }

/* Horizontal river on wide screens (homepage) */
.river-home { overflow-x: auto; overflow-y: hidden; }
@media (max-width: 1199px) {
  .river-home .river-track { display: flex; flex-direction: column; }
  .river-home .river-item { padding-left: calc(var(--river-x) + var(--river-w) + var(--river-gap)); }
  .river-home .river-mid { left: var(--river-x); top: 0; bottom: 0; width: var(--river-w); }
  .river-home .river-seg-h { display: none; }
  .river-home .river-seg-v { left: 0; width: 100%; top: 13px; height: 100%; }
  .river-home .river-dot { top: 6px; left: calc(var(--c, 0) * var(--river-w) - 7px); }
  .river-home .is-upcoming .river-dot { top: 7px; left: calc(var(--c, 0) * var(--river-w) - 6px); }
  .river-home .river-dot::after { top: 50%; left: 100%; height: 2px; margin-top: -1px; width: calc((1 - var(--c, 0)) * var(--river-w) + var(--river-gap)); }
  .river-home .river-mouth-h { display: none; }
  .river-home .river-mouth-v { left: 0; width: 100%; top: 13px; height: 150px; }
  .river-home .river-stop:last-child { padding-bottom: 48px; }
  .river-home .river-stop { min-height: 118px; }
  .river-home .river-start { padding-left: var(--gutter); min-height: 176px; }   /* label and button in line with the title */
  .river-home .river-start .btn { min-height: 44px; padding-block: 10px; }   /* 44 px to tap on touch screens */
  .river-home .river-start .river-seg-v { top: 82px; height: calc(100% - 69px); }
  .river-home .river-start .river-source { top: 58px; }   /* the river runs out of the bottom of the drop */
  .river-home .river-stop:last-child .river-seg-v { display: none; }
  .river-home .river-card { width: min(234px, calc(100% - 20px)); margin-bottom: 14px; }
}
@media (min-width: 1200px) {
  /* The river fills the text column exactly (--text-w wide, from --edge), so its source, the label and the button line up
     with the title above, and its mouth with the right edge of the blocks around it. 100cqw is the width of .home-river.
     --start leaves room for the button; the source sits under its middle. --n is the number of stops (set by the river shortcode).
     --cy is where a stop lies across the band of the river running to the right (--c is for the river running down). */
  .river-home { --text-w: min(var(--content), 100cqw - 2 * var(--gutter)); --edge: calc((100cqw - var(--text-w)) / 2); --col: clamp(112px, calc((var(--text-w) - 73px) / (var(--n, 8) + 0.75)), 184px); --start: calc(var(--col) / 2 + 73px); }
  .river-home .river-track { display: flex; width: calc(var(--start) + (var(--n, 8) + 0.25) * var(--col)); min-height: 368px; margin: 0 0 0 var(--edge); }
  .river-home .river-item { flex: none; width: var(--col); min-height: 368px; }
  .river-home .river-start { width: var(--start); }
  .river-home .river-start-inner { position: absolute; z-index: 2; left: 0; top: 62px; transform: translateY(-100%); width: max-content; text-align: left; }   /* clear of the drop below it */
  .river-home .river-start-label { margin-bottom: 8px; }
  .river-home .river-mid { left: 0; right: 0; top: 90px; height: 80px; }
  .river-home .river-seg-v { display: none; }
  .river-home .river-seg-h { top: 0; left: 50%; width: var(--col); height: 80px; }
  .river-home .river-start .river-seg-h { left: calc(var(--start) - var(--col) / 2); max-width: none; }   /* the global svg max-width cut it 3.5 px short of the 2008 dot */
  /* The drop stands on the start of the river, which flows out of its foot to the right */
  .river-home .river-start .river-source { left: calc(var(--start) - var(--col) / 2 - 13px); top: calc(var(--cy, 0) * 80px - 21px); }
  .river-home .river-mouth-v { display: none; }
  .river-home .river-mouth-h { left: 50%; top: 0; width: calc(var(--col) * 0.75); height: 80px; }
  .river-home .river-dot { left: calc(50% - 7px); top: calc(var(--cy, 0) * 80px - 7px); }
  .river-home .is-upcoming .river-dot { left: calc(50% - 6px); top: calc(var(--cy, 0) * 80px - 6px); }
  .river-home .river-dot::after { left: 50%; top: 100%; width: 2px; margin-left: -1px; height: calc(117px - var(--cy, 0) * 80px); }
  .river-home .river-deco { display: block; }
  .river-home .river-deco-reeds { left: calc(50% - 18px); top: calc(var(--cy, 0) * 80px - 76px); }
  .river-home .river-deco-gulls { left: calc(50% - 31px); top: calc(var(--cy, 0) * 80px - 96px); }
  /* The gulls of the last stop fly over the mouth, inside the river's band */
  .river-home .river-stop:last-child .river-deco-gulls { left: calc(50% + 16px); top: calc(var(--cy, 0) * 80px - 58px); }
  .river-home .river-card { position: relative; margin: 214px 2px 24px; width: calc(var(--col) - 4px); padding: 12px 8px; grid-template-columns: 1fr; }   /* "Our Commission seat" stays on one line from 1200 px */
  .river-home .river-card .icon { margin-bottom: 6px; }   /* the cards are narrow here: the icon stands above the date */
  /* Each card hangs centred under its line, so icon, date and title are centred under that line too (Tine, 5 October 2026) */
  .river-home .river-card { justify-items: center; text-align: center; }
  .river-home .river-card-cta { justify-self: center; }
}
/* With a mouse, the short sentence opens under the title on hover or keyboard focus (Tine, file 62, October 2026); on touch
   screens and in the river running down it always shows. The card hangs from its line out of the flow, so it grows down
   into the free space under the river and nothing moves. With up to eight stops the river fits at this width (--col never
   reaches its 112 px minimum), so .river-home needs no sideways scroll here and may let a card reach into the padding of
   the section; with more stops, check this again. In edit mode every sentence shows. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .river-home { overflow: visible; }
  .river-home .river-card { position: absolute; z-index: 3; top: 214px; left: 2px; margin: 0; }
  .river-home .mini-card-text { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height 0.25s ease-out, margin-top 0.25s ease-out, opacity 0.2s; }
  .river-home .river-card:hover .mini-card-text, .river-home .river-card:focus-visible .mini-card-text,
  .syp-editing .river-home .mini-card-text { max-height: 7em; margin-top: 4px; opacity: 1; }
  .river-home .river-card.is-cta .mini-card-text { max-height: none; margin-top: 4px; opacity: 1; }   /* the invitation always shows its sentence */
  .river-home:has(.river-card.is-cta) .river-track { min-height: 480px; }   /* the invitation is taller than the other cards: room under it before the join call */
}
.river-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--fs-small); font-weight: 700; color: var(--grey); }
.river-legend span { display: inline-flex; align-items: center; gap: 8px; }
.river-legend span::before { content: ""; width: 24px; border-top: 4px solid var(--deep); }
.river-legend .is-upcoming { color: var(--water-ink); }
.river-legend .is-upcoming::before { border-top: 4px dotted var(--water); }

/* ---------- Prose (Markdown pages) ---------- */
.prose { font-size: var(--fs-article); line-height: 1.6; max-width: 34em; }
.prose h2 { margin: 1.6em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.4em 0 0.5em; }
.prose ul, .prose ol { margin: 0 0 1.25em; }
.prose li + li { margin-top: 0.35em; }
.prose img { border-radius: var(--r-md); }
.prose blockquote { margin: 32px 0; padding-left: 20px; border-left: 3px solid var(--water); }
.prose blockquote p { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.35; color: var(--deep); }

/* ---------- Page hero (all inner pages) ---------- */
.page-hero { padding-top: 8px; padding-bottom: var(--section-sm); }
@media (min-width: 900px) { .page-hero { padding-top: 40px; padding-bottom: 96px; } }
.page-hero .eyebrow { color: var(--grey); margin-bottom: 12px; font-size: var(--fs-label); }
@media (min-width: 900px) { .page-hero .eyebrow { margin-bottom: 16px; font-size: var(--fs-body); } }
.page-hero h1 { margin-bottom: 18px; }
@media (min-width: 900px) { .page-hero h1 { margin-bottom: 28px; } }
.page-hero .lead { margin-bottom: 28px; }
.page-hero-photo picture { display: block; }
.page-hero-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 420px; margin-inline: auto; border-radius: var(--r-md); }
@media (min-width: 900px) { .page-hero-photo img { max-height: 560px; margin-right: 0; border-radius: var(--r-lg); } }   /* flush with the right edge of the page */

/* ---------- Style guide only ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sg-swatch-color { height: 64px; border-radius: 12px; border: 1px solid var(--mist); }
.sg-swatch { font-size: var(--fs-label); }
.sg-swatch strong { display: block; margin-top: 6px; }
.sg-swatch span { color: var(--grey); }
.sg-shape { width: 72px; height: 56px; border-radius: 20px; background: var(--mist); }
.sg-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sg-block { border: 1px dashed var(--mist); border-radius: var(--r-md); padding: 24px; }
.sg-note { font-size: var(--fs-small); color: var(--grey); max-width: 60ch; }
.sg-table { border-collapse: collapse; font-size: var(--fs-small); width: 100%; max-width: 640px; }
.sg-table th, .sg-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--mist); vertical-align: top; }
.sg-table th { color: var(--grey); font-weight: 700; }

/* ---------- TODO markers (visible until the content arrives) ---------- */
.todo-mark { overflow-wrap: anywhere; background: var(--foam); color: var(--deep); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8em; font-weight: 400; padding: 1px 6px; border-radius: 6px; border: 1px dashed var(--water); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bg-deep .todo-mark, .card-dark .todo-mark, .footer-main .todo-mark { background: var(--deep-hover); color: var(--white); border-color: var(--mist); }

/* ---------- Homepage ---------- */
.home-hero { padding-top: 8px; padding-bottom: 8px; display: grid; gap: 8px; align-items: center; }
@media (min-width: 900px) { .home-hero { grid-template-columns: 1.05fr 0.95fr; gap: 48px; padding-top: 48px; padding-bottom: 24px; } }
.home-hero-visual { order: -1; width: min(240px, 70%); margin: 0 auto 8px; }
@media (min-width: 900px) { .home-hero-visual { order: 0; width: 100%; max-width: 450px; justify-self: end; margin: 0; } }
.home-hero .eyebrow { font-size: var(--fs-label); margin-bottom: 14px; }
@media (min-width: 900px) { .home-hero .eyebrow { font-size: var(--fs-body); margin-bottom: 20px; } }
.home-hero h1 { font-size: var(--fs-h1); line-height: 1.06; margin-bottom: 18px; }
@media (min-width: 900px) { .home-hero h1 { line-height: 1.04; margin-bottom: 28px; } }
/* Why and what first, then who it is for (no fee, 16 to 26) right above the buttons (Elke, 5 October 2026) */
.home-hero .lead { margin-bottom: 14px; max-width: 34em; }
@media (min-width: 900px) { .home-hero .lead { margin-bottom: 18px; } }
.hero-for { margin: 0 0 24px; font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; color: var(--water-ink); }
@media (min-width: 900px) { .hero-for { margin-bottom: 36px; } }

.home-what { padding-top: var(--section); padding-bottom: var(--section-sm); }
.home-what .split { margin-bottom: 32px; }
@media (min-width: 900px) { .home-what .split { margin-bottom: 64px; } }
/* The logo badge: on a computer under the title, in the left column beside the text; on a phone after the text */
.home-what-split .logo-badge { margin: 0; }
.home-what-split .logo-badge img { margin-inline: auto; }   /* on a phone centred under the text, like the hero visual (Tine, 5 October 2026) */
@media (min-width: 900px) {
  .home-what-split { grid-template-rows: auto 1fr; row-gap: 40px; }
  .home-what-split > h2 { grid-column: 1; grid-row: 1; text-align: center; }   /* centred over the logo badge below it (Tine, 5 October 2026) */
  .home-what-split > .article { grid-column: 2; grid-row: 1 / span 2; }
  /* Centred in the white space of the left column, across and down (Tine, 2 Oct) */
  .home-what-split > .logo-badge { grid-column: 1; grid-row: 2; align-self: center; justify-self: center; }
}
/* The title, a slogan in two sentences (Tine, file 62, October 2026): each sentence is one inline block (home.njk). Where both
   fit they share a line; where not, "Neither do we." starts a new line instead of a line reading "borders. Neither do we." */
.home-what-split > h2 > span { display: inline-block; }
/* Five points, each beside a colour disc (Tine, file 62, October 2026; the discs: "Lucide icons and colour discs" below).
   36 px discs on a phone, where every pixel of line length counts; 44 px from 600 px. The disc's centre sits on the middle
   of the first line: the text is pushed down by half the difference between the disc and one line (1.55em, the line height
   here). The bold start of each point stays ink: GoodPlanet's secondary colours are for shapes, never for small text. */
.home-what .article { max-width: 32em; font-size: var(--fs-lead); line-height: 1.55; --disc-size: 36px; --point-gap: 14px; }
@media (min-width: 600px) { .home-what .article { --disc-size: 44px; --point-gap: 18px; } }
.home-what-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .home-what-points { gap: 24px; } }
.home-what-points li { display: grid; grid-template-columns: var(--disc-size) minmax(0, 1fr); column-gap: var(--point-gap); align-items: start; }
.home-what-points p { margin: 0; padding-top: max(0px, (var(--disc-size) - 1.55em) / 2); }
/* The link lines up with the text of the points, not with the discs */
.home-what .link-arrow { display: inline-block; padding-top: 8px; margin-left: calc(var(--disc-size) + var(--point-gap)); }
.home-what-photo { margin-top: 32px; margin-right: calc(-1 * var(--gutter)); }
.home-what-photo picture { display: block; }
.home-what-photo img { display: block; width: 100%; height: auto; max-height: 600px; object-fit: cover; border-radius: var(--r-md) 0 0 var(--r-md); }
@media (min-width: 900px) { .home-what-photo { margin-top: 0; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--content)) / 2)); } .home-what-photo img { border-radius: var(--r-lg) 0 0 var(--r-lg); } }

.home-latest { padding-top: clamp(56px, 3rem + 3vw, 96px); padding-bottom: var(--section); }
.home-river { padding-top: clamp(56px, 3rem + 2.5vw, 88px); padding-bottom: var(--section-sm); overflow: hidden; }
.home-river .section-head { margin-bottom: 16px; justify-content: flex-start; column-gap: 48px; }
.home-hero + .wave { margin-top: 24px; }
@media (min-width: 900px) { .home-hero + .wave { margin-top: 0; } }
.home-river { container-type: inline-size; }   /* the horizontal river measures itself against this section (cqw) */
.form-open { margin: 0; }
.form-note { margin: 12px 0 0; font-size: var(--fs-small); color: var(--grey); }
@media (min-width: 1200px) { .home-river .section-head { margin-bottom: 4px; } }

/* ---------- Inner pages ---------- */
.page-hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }
.page-hero-text { max-width: 40em; }
.page-body { padding-bottom: var(--section); }
.page-body > .prose + .prose, .page-body > * + * { margin-top: var(--block); }
.exchange-hero-photo img { max-height: 460px; }
@media (min-width: 900px) { .exchange-hero-photo img { max-height: 620px; } }
.facts { margin-top: 32px; }
@media (min-width: 900px) { .facts { margin-top: 40px; } }
/* "Where" on exchange pages: a map of the Scheldt with the place name beside its dot (lib/scheldt-map.js).
   Phones: a full row above the other facts. From 600 px: the right column, beside When, Who and Theme. */
.facts-where { --map-h: 150px; grid-column: 1 / -1; order: -1; }
@media (min-width: 600px) { .facts-where { --map-h: 164px; grid-column: 2; grid-row: 1 / span 3; order: 0; } }
.facts-where-map { display: flex; align-items: flex-start; gap: 14px; margin-top: 8px; }
/* The name is lined up with the dot: --y is the height of the dot as a share of the map. */
.facts-where-place { min-width: 0; margin-top: max(0px, calc(var(--y) * var(--map-h) - 0.725em)); font-weight: 700; color: var(--deep); }
.scheldt-map { flex: none; width: auto; height: var(--map-h); overflow: visible; color: var(--water); }
.scheldt-map-river { fill: currentColor; }
/* The halo breathes slowly three times so the eye finds the place, then stands still; no motion at all for people who ask for less. */
.scheldt-map-halo { fill: var(--water); opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: scheldt-map-glow 3s ease-in-out 3 both; }
@keyframes scheldt-map-glow { 0%, 100% { opacity: 0.4; transform: scale(0.7); } 50% { opacity: 0.12; transform: scale(1.35); } }
.scheldt-map-place { fill: var(--deep); stroke: var(--white); stroke-width: 1.2px; }
.section-foam-split { padding: 40px 0 var(--section); }
@media (min-width: 900px) { .section-foam-split { padding: 64px 0 112px; } }
/* The quote beside the story (exchange pages, Tine file 55): under 'What we did' on a computer, staying in view while you read; after the story on a phone */
.split.has-aside > .exchange-aside, .split.has-aside > .quote-aside { margin-top: 16px; }
@media (min-width: 900px) {
  .split.has-aside { grid-template-rows: auto 1fr; row-gap: 0; }
  .split.has-aside > h2 { grid-column: 1; grid-row: 1; }
  .split.has-aside > .article { grid-column: 2; grid-row: 1 / span 2; }
  .split.has-aside > .exchange-aside, .split.has-aside > .quote-aside { grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: 32px; margin-top: 40px; }
}
.quote-block { margin: 0; }
/* Join, Who can join: title, text and Bart's story one under the other, over the full width (Tine, file 87) */
.join-who-text { font-size: var(--fs-article); line-height: 1.6; }
.join-who-text p { margin: 16px 0 0; }
.join-who .quote-block { margin-top: 32px; }
/* As a colour card (with a name), like the quotes on Youth voices */
.quote-block.colour-card { border-radius: 24px; padding: 44px 24px 24px; }
@media (min-width: 900px) { .quote-block.colour-card { padding: 44px 32px 32px; } }
.quote-block.colour-card p { font-weight: 400; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.4; }
.quote-block.colour-card .wave-mark { margin-bottom: 20px; }
.quote-block.colour-card .wave-mark-end { margin: 4px auto 24px; }
.posters-photo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.posters-photo picture { display: block; }
.posters-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 420px; margin-inline: auto; border-radius: var(--r-md); }
@media (min-width: 900px) { .posters-photo img { max-height: 520px; border-radius: var(--r-lg); } }
.posters-photo figcaption { font-size: var(--fs-tiny); color: var(--grey); }
.quote-source { margin-top: 12px; font-size: var(--fs-tiny); color: var(--grey); }
.exchange-gallery { padding-top: var(--section-sm); padding-bottom: var(--block); }
/* The call at the bottom of a page (blocks/join-cta.njk; Tine, file 62, October 2026, option A): a band edge to edge,
   the group in the Senate (2015) under GoodPlanet's dark blue, a big title, one line and a big button, centred.
   Contrast: the photo shows at 24% over --deep-hover, so even a pure white pixel of it (the flag) turns into a blue
   on which white text is 4.6 to 1; the rest of the photo is darker, which only raises that. The button is lime with
   dark text (7.6 to 1), as on the choice page: one of GoodPlanet's colours to the front on the blue.
   The top follows the site's wave edge (as the photo band on Join); the bottom runs into the footer: the footer's wave,
   with its high-water line, rises over the photo, so no thin white strip is left between two blues.
   Without masks the top is straight; without :has() a little white wave stays above the footer. */
.exchange-cta {
  --edge-size: max(100%, calc(var(--photo-edge) * 40)) var(--photo-edge);
  --cta-space: clamp(56px, 2rem + 5vw, 104px);
  position: relative; isolation: isolate;
  padding: calc(var(--photo-edge) + var(--cta-space)) 0 var(--cta-space);
  background: var(--deep-hover); color: var(--on-dark); text-align: center;
}
.exchange-cta-photo { position: absolute; inset: 0; z-index: -1; }
/* The faces sit between about 30% and 86% of the photo's height: up to 1440 px all of them stay in view, only the carpet goes under the wave */
.exchange-cta-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0.24; }   /* 45%: the raised arms and faces of the Ghent group */
.exchange-cta h2 { max-width: 18em; margin: 0 auto 16px; color: var(--white); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.1; }   /* 32 to 52 px: larger than a section title, it closes the page */
.exchange-cta p { max-width: 32em; margin: 0 auto; color: var(--on-dark); font-size: var(--fs-lead); }
.exchange-cta .btn { margin-top: clamp(28px, 1.2rem + 1.4vw, 40px); min-width: min(100%, 15rem); font-size: 1.25rem; padding: 18px 44px; box-shadow: 0 6px 18px rgba(13, 81, 115, 0.45); }   /* 64 px tall */
@media (max-width: 599px) { .exchange-cta .btn { width: 100%; max-width: 20rem; padding-inline: 24px; } }
@media (max-width: 359px) { .exchange-cta .btn { font-size: 1.125rem; padding-inline: 16px; } }   /* 320 px: "Read the recommendations" (Tournai) stays on one line */
/* The four reasons to join above the button (Elke's feedback, 5 October 2026): each its icon on a colour disc and a short
   title, white on the blue (8.6 to 1 on --deep-hover, 4.6 to 1 or more over the faint photo). One column on a small phone,
   two by two up to 960 px (one row of four needs about 860 px), then one row. */
.cta-why { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 18px 24px; margin: 28px auto 0; padding: 0; text-align: left; }
.cta-why li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--white); }
.cta-why .icon-disc { --disc-size: 44px; --line-icon-stroke: 3px; }
.cta-why .line-icon { width: 62%; height: 62%; color: currentColor; }
.cta-why .line-icon path { stroke-width: var(--line-icon-stroke); }
@media (max-width: 439px) { .cta-why { grid-template-columns: max-content; } }   /* "Have a good time" keeps one line */
@media (min-width: 800px) { .cta-why { margin-top: 36px; } .cta-why li { font-size: 1.25rem; } .cta-why .icon-disc { --disc-size: 52px; } }
@media (min-width: 960px) { .cta-why { grid-template-columns: repeat(4, max-content); gap: 20px 40px; } }
.exchange-cta .cta-who { margin-top: 16px; font-size: var(--fs-body); }

/* As the last block of a page: room for the footer's wave, pulled up over the photo by its own height (see "Waves") */
.exchange-cta:last-child { padding-bottom: calc(var(--cta-space) + clamp(28px, 3vw, 44px)); }
main:has(> .exchange-cta:last-child) + .wave { position: relative; z-index: 1; margin-top: calc(-1 * clamp(28px, 3vw, 44px)); }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .exchange-cta {
    -webkit-mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
    mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
  }
}
/* High-contrast modes replace the blue but keep images: the faint photo would sit behind the text, so it goes */
@media (forced-colors: active) { .exchange-cta-photo { display: none; } }
.page-body + .exchange-cta { margin-top: calc(-1 * var(--section) + var(--block)); }
.news-more { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 40px; padding-top: 24px; border-top: 2px solid var(--mist); }
.pager { display: flex; justify-content: space-between; gap: 24px; padding-bottom: var(--block); font-size: var(--fs-body); font-weight: 700; }
.pager a { text-decoration: none; color: var(--deep); max-width: 45%; }
.pager a:hover { color: var(--deep-hover); text-decoration: underline; }
.pager a + a { text-align: right; margin-left: auto; }
@media (max-width: 599px) { .pager { flex-direction: column; gap: 20px; } .pager a { max-width: 85%; } .pager a + a { align-self: flex-end; } }
.pager span { display: block; color: var(--water-ink); font-size: var(--fs-label); margin-bottom: 4px; }
.pager .pager-prev span::before { content: "\2190  "; }
.pager .pager-next span::after { content: "  \2192"; }

/* Teaser lists (exchanges overview, news) */
.teaser-list { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 900px) { .teaser-list { gap: 56px; } }
.teaser { display: grid; gap: 16px; align-items: start; }
@media (min-width: 700px) { .teaser { grid-template-columns: 280px 1fr; gap: 32px; } }
.teaser-photo picture { display: block; }
/* The photos in the lists on Exchanges and News share one shape, 3:2 (Tine, file 55); src/_data/photoCrop.json keeps faces in view */
.teaser-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; border-radius: var(--r-md); }
.teaser-photo-empty { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-md); background: var(--foam); display: none; }
@media (min-width: 700px) { .teaser-photo-empty { display: block; } }
/* News without a photo: a tile in a GoodPlanet colour with a white line icon and a soft wave at the bottom */
.teaser-tile { position: relative; display: none; align-items: center; justify-content: center; width: 100%; height: 210px; border-radius: var(--r-md); overflow: hidden; background: var(--deep); color: var(--white); }
.teaser-tile-lime { background: var(--lime); }
.teaser-tile-green { background: var(--green); }
.teaser-tile-orange { background: var(--orange); }
.teaser-tile .line-icon { width: 112px; height: 112px; color: var(--white); margin-bottom: 24px; }
.teaser-tile .wave { position: absolute; left: 0; bottom: 0; height: 48px; }
@media (min-width: 700px) { .teaser-tile { display: flex; } }
@media (min-width: 1000px) { .teaser-small .teaser-tile { height: 240px; } }
.teaser-body { display: flex; flex-direction: column; gap: 10px; }
.teaser-body h2 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.2; }
.teaser-body h2 a { color: var(--deep); text-decoration: none; }
.teaser-body h2 a:hover { color: var(--deep-hover); text-decoration: underline; }
.teaser-body p { margin: 0; font-size: var(--fs-body); line-height: 1.55; max-width: 34em; }
.teaser-small { grid-template-columns: 1fr; }
@media (min-width: 700px) { .teaser-small { grid-template-columns: 280px 1fr; gap: 32px; } }
@media (min-width: 1000px) { .teaser-small { grid-template-columns: 360px 1fr; gap: 40px; } }
.news-photo { margin: 24px 0 32px; }
.news-photo picture { display: block; }
.news-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 560px; border-radius: var(--r-lg); }
/* A news post with a photo: on a computer the photo stands beside the text and stays in view (Tine, file 55); on a phone it stays between title and text */
@media (min-width: 900px) {
  .news-post:has(.news-photo) { display: grid; grid-template-columns: 1.1fr 0.9fr; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  .news-post .page-hero-text { grid-column: 1; grid-row: 1; }
  .news-post .news-photo { grid-column: 2; grid-row: 1 / span 2; margin: 0; position: sticky; top: 32px; }
  .news-post .news-photo img { margin-left: auto; }
  .news-post:has(.news-photo) .article { grid-column: 1; grid-row: 2; margin-top: 24px; }
}

/* Partners */
.partner-list { display: grid; gap: 24px; }
@media (min-width: 800px) { .partner-list { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
.partner { border: 2px solid var(--mist); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) { .partner { padding: 40px; } }
.partner-logo { height: 64px; display: flex; align-items: center; margin-bottom: 14px; }
.partner-logo img { height: 64px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; transition: opacity 0.2s; }
.partner-logo a { display: block; }
.partner-logo a:hover img { opacity: 0.7; }
.partner-logo-todo { font-size: var(--fs-tiny); }
/* A logo with small letters (logoWide in partners.md) on its own row, as wide as the card allows, up to 320 px
   (the Agence de l'Eau: about 320 x 118, so its Marianne reaches the 20 px the French State asks for on screen) */
.partner-logo-wide { display: block; height: auto; }
.partner-logo-wide a { width: min(100%, 320px); }
.partner-logo-wide img { width: 100%; height: auto; max-width: none; }
.partner h2 { font-size: var(--fs-h3); line-height: 1.2; }
/* The lead organisation: the full width, on a light blue card */
.partner-lead { background: var(--foam); border-color: var(--foam); }
@media (min-width: 800px) { .partner-lead { grid-column: 1 / -1; } .partner-lead p { max-width: 36em; } }
.partner-lead .label { margin-bottom: -6px; }
/* A partner's own page: its logo above the story (the Agence de l'Eau may only be shown whole, on white) */
.partner-page-logo { display: block; width: auto; height: 64px; max-width: 100%; margin-bottom: 8px; }
.partner-page-logo-wide { width: min(100%, 320px); height: auto; }
/* The Agence de l'Eau on Partners: first and the full width (Raphaël, 22 October 2026) */
@media (min-width: 800px) { .partner-featured { grid-column: 1 / -1; } .partner-featured p { max-width: 36em; } }
/* Reports: the texts, with the standing photo beside them on a computer (it stays in view while you read) and after them on a phone */
.reports-layout { display: grid; gap: 40px; }
.reports-photo { margin: 0; }
.reports-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; margin-inline: auto; border-radius: var(--r-lg); }
@media (min-width: 900px) {
  .reports-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 64px; align-items: start; }
  .reports-photo { position: sticky; top: 32px; }
  .reports-photo img { max-height: none; width: 100%; }
}
/* Funders: the text, with the logos of the two funders beside it on a white panel, one under the other and large,
   so the Agence de l'Eau logo can be read (Tine, file 51). The EU emblem stays as tall and is wider (EU rules). */
.funders { display: grid; gap: 32px; align-items: center; margin-top: var(--block); }
@media (min-width: 900px) { .funders { grid-template-columns: 1fr 1fr; gap: 64px; } }
.funder-logos { list-style: none; margin: 0; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 28px; border: 2px solid var(--mist); border-radius: var(--r-lg); }
.funder-logos img { display: block; width: auto; height: min(var(--h, 56px), 68px); max-width: 100%; object-fit: contain; }
/* Phones: both funder logos 48 px tall, so the EU emblem (4.66 times as wide as tall) fits the panel unsquashed at 320 px
   and stays as tall as the Agence de l'Eau logo */
@media (max-width: 599px) { .funder-logos img { height: min(var(--h, 56px), 48px); } }
/* Where the browser knows container units: both logos as tall as the panel allows, up to --h (104 px). The EU emblem is
   4.66 times as wide as tall, so 21% of the panel's width keeps it inside the panel at every width. Older browsers keep
   the sizes above (68 px, 48 px on phones). */
@supports (height: 1cqi) {
  .funder-logos { container-type: inline-size; }
  .funder-logos img { height: min(var(--h, 56px), 21cqi); }
}
.funder-logos a { display: block; border-radius: 6px; }
/* EU rules: the EU emblem is at least as large as the other funder logo (--h in partners.md) and never fades */
.funder-logos a:not(.funder-eu):hover img { opacity: 0.7; }
/* A card with a photo (GoodPlanet): the photo in its own shape, beside the text on wide screens, below it on phones */
.partner.has-photo { gap: 24px; }
/* Partners: the lead partner under the intro, the heart in the sand beside both (leadInHero, heroAside in partners.md).
   From 900 px two columns (3 to 2, so the card keeps room between 900 and 1100 px), the photo at most 440 px wide in its own shape; on a phone it follows the card. */
.page-hero-aside { display: grid; gap: 24px; }
.page-hero-aside-photo img { display: block; width: 100%; height: auto; max-width: 440px; margin-inline: auto; border-radius: var(--r-md); }
.partner-list-hero { display: block; }
.partner-list-hero .partner-lead p { max-width: none; }
@media (min-width: 900px) {
  .page-hero-aside { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 48px; align-items: start; }
  .page-hero-aside-photo img { margin-right: 0; border-radius: var(--r-lg); }
  /* The photo ends where the GoodPlanet card ends (Tine, 5 October 2026): it takes the height of the left column, cropped to fit */
  .page-hero-aside { align-items: stretch; }
  .page-hero-aside-photo { position: relative; }
  .page-hero-aside-photo img { position: absolute; top: 0; right: 0; height: 100%; object-fit: cover; }
}
.partner-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.partner-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 420px; margin-inline: auto; border-radius: var(--r-md); }
@media (min-width: 800px) {
  .partner.has-photo { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 48px; }
  .partner-photo img { max-height: 440px; max-width: 320px; }
}
.partner p { margin: 0; font-size: var(--fs-body); line-height: 1.55; flex: 1; }

/* Join page */
.reasons { display: grid; gap: 16px; counter-reset: reason; }
@media (min-width: 700px) { .reasons { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.reasons .card-soft h3 { font-size: var(--fs-h3); line-height: 1.2; margin-bottom: 10px; }
/* Each reason: a large light-blue number at the top left, a large line icon in the reason's colour at the top right (Tine: the icons were too small) */
.reason { display: flex; flex-direction: column; }
.reason-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
/* Each reason gets one of GoodPlanet's colours: a colour card (see above) and the line icon */
.reason .line-icon { color: var(--accent, var(--water-ink)); opacity: 1; }
.reasons .reason:nth-child(5n+1) { --accent: var(--green); }
.reasons .reason:nth-child(5n+2) { --accent: var(--orange); }
.reasons .reason:nth-child(5n+3) { --accent: var(--pink); --tint: 7%; }
.reasons .reason:nth-child(5n+4) { --accent: var(--lime); }
.reasons .reason:nth-child(5n+5) { --accent: var(--water); --tint: 8%; }
.reasons .reason p { margin-bottom: 20px; }
.reason-icon { flex: none; width: 64px; height: 64px; }
@media (min-width: 900px) { .reason-icon { width: 80px; height: 80px; } }
.reason .reason-icon path { stroke-width: 2.3px; }   /* a little bolder than the other line drawings, so the icons carry at this size */
/* Line icons (lib/line-icons.js) */
.line-icon { display: block; overflow: visible; color: var(--water-ink); }
.line-icon path, .line-icon circle, .line-icon rect { fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }
.reasons .card-soft p { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-article); }

/* Short facts as labels: under the title of a page (front matter "chips") and in the sign-up card */
.chips { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 8px 18px; border-radius: var(--r-pill); background: var(--foam); color: var(--deep); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); font-weight: 700; line-height: 1.3; }   /* 18 to 20 px: the key facts read at a glance (Elke, 5 October 2026; was 15 px) */
@media (max-width: 399px) { .chips li { padding: 7px 14px; font-size: var(--fs-small); } }   /* 17 px on a small phone, so "France, Belgium or the Netherlands" keeps one line */
.chips-on-dark li { background: var(--deep-hover); border: 1px solid rgba(255, 255, 255, 0.25); color: var(--white); }
/* The chip that stands out (Join: travel, bed and meals arranged; Adam's feedback 14): lime with ink text (7.6:1), with
   a small icon. Its sailing boat rocks gently, slower than a breath; it stands still for people who ask for less motion. */
.chips .chip-highlight { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px; background: var(--lime); color: var(--ink); }
.chip-highlight .icon { width: 24px; height: 24px; stroke-width: 2; transform-origin: 50% 85%; }
@media (prefers-reduced-motion: no-preference) { .chip-highlight .icon { animation: chip-boat-rock 7s ease-in-out infinite alternate; } }
@keyframes chip-boat-rock { from { rotate: -6deg; } to { rotate: 6deg; } }

.page-block { scroll-margin-top: 24px; }
.page-body > .page-block + .page-block { margin-top: var(--section); }
.page-body > .teaser-list + .prose { margin-top: var(--section); }   /* Exchanges: 'Before 2025' is a new part, not one more exchange */
.block-heading { margin-bottom: clamp(24px, 3vw, 40px); }
.block-intro { margin: -8px 0 clamp(32px, 4vw, 56px); max-width: 34em; }
.block-note { margin: 24px 0 0; font-size: var(--fs-small); color: var(--grey); max-width: 44em; }

/* How it works: the steps as stops on a river drawn like the homepage river (blocks/journey.njk, lib/scheldt-river.js).
   --c is the place of a stop across the river band when it runs down (phones, 0 = left bank), --cy when it runs
   across (wide screens, 0 = upper bank), as on the homepage river.
   Phones: the river runs down the left side. Wide screens: across, with the text of each step under its stop. */
.journey { --band: 104px; --pad: 20px; --inner: 64px; --river-w: 48px; list-style: none; margin: 0; padding: 0; display: grid; }
.journey-step { position: relative; padding: 0 0 44px calc(8px + var(--river-w) + 28px); }
.journey-step:last-child { padding-bottom: 0; }
.journey-mid { position: absolute; left: 8px; top: 0; bottom: 0; width: var(--river-w); }
.journey-dot { position: absolute; z-index: 2; left: calc(var(--c, 0.5) * var(--river-w) - 7px); top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--deep); }
/* The first step is the source: a drop like the one in our logo, the river runs out of its foot (as on the Timeline page and the homepage) */
.journey-dot.is-source { width: 26px; height: 26px; border-radius: 0; background: none; left: calc(var(--c, 0.5) * var(--river-w) - 13px); top: -11px; }
.journey-dot.is-source .river-source { top: 0; left: 0; }
/* Phones: a thin line from each stop to its text, as on the homepage river; it stops short of the text */
.journey-dot::after { content: ""; position: absolute; z-index: -1; left: 100%; top: 50%; height: 2px; margin-top: -1px; width: calc((1 - var(--c, 0.5)) * var(--river-w) + 9px); background: var(--mist); }
.journey-dot.is-source::after { top: 22px; left: calc(100% - 4px); width: calc((1 - var(--c, 0.5)) * var(--river-w) + 7px); }
.journey-seg, .journey-mouth { position: absolute; z-index: 1; overflow: visible; }
.journey-seg path, .journey-mouth-line { fill: none; stroke: var(--deep); vector-effect: non-scaling-stroke; }
.journey-seg-h, .journey-mouth-h { display: none; }
.journey-seg-v { left: 0; top: 13px; width: 100%; height: 100%; }
.journey-mouth-v { left: 0; top: 13px; width: 100%; height: 120px; }
.journey .river-deco { display: none; }
.journey-text { display: flex; flex-direction: column; gap: 6px; }
.journey-text p { margin: 0; line-height: 1.55; }
.journey-text .label { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.2; color: var(--water-ink); }
/* Side by side, label, title and text of every step share three rows (subgrid), so the texts under the titles start on
   one line: as low as the longest title asks (Join), and right under the titles when they all fit on one line (Go with the flow) */
@media (min-width: 800px) {
  .journey-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; }
  .journey-text { display: contents; }
}
@media (min-width: 800px) {
  .journey { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); }
  .journey-step { padding: calc(var(--band) + 24px) 32px 0 0; }
  .journey-mid { left: 0; right: 0; bottom: auto; width: auto; height: var(--band); }
  .journey-dot { left: 0; top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) - 7px); }
  /* A thin line from each stop down to its text, as on the homepage timeline */
  .journey-dot::after { left: 6px; top: 100%; margin-top: 0; width: 2px; height: calc(var(--band) + 12px - var(--pad) - var(--cy, 0.5) * var(--inner)); }
  .journey-dot.is-source { left: -6px; top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) - 21px); }
  .journey-dot.is-source::after { left: 12px; top: 100%; width: 2px; height: calc(var(--band) + 14px - var(--pad) - var(--cy, 0.5) * var(--inner)); }
  .journey-seg-v, .journey-mouth-v { display: none; }
  .journey-seg-h { display: block; left: 7px; top: var(--pad); width: 100%; height: var(--inner); }
  .journey-mouth-h { display: block; left: 7px; top: var(--pad); width: calc(100% - 7px); height: var(--inner); }
  /* As on the Timeline page and the homepage: reeds stand on the bank by the source, just after the drop,
     and gulls fly over the sea after the last step, where the banks open */
  .journey .river-deco { display: block; }
  .journey .river-deco-reeds { left: 24px; top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) - 52px); }
  .journey .river-deco-gulls { left: 46%; top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) - 60px); }
  /* Where the river runs high in the band, they go under it */
  .journey .deco-below .river-deco-reeds { top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) + 10px); }
  .journey .deco-below .river-deco-gulls { top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) + 30px); }
}

/* How it works with an icon per step (Join, Adam's feedback 12): every stop on the river becomes a colour disc with its
   icon, so the river reads as a route with four stations, and the source drop grows into a blue drop with its own icon.
   A white ring cuts the river where it enters and leaves a disc. --stop-d is the size of a disc, --s one unit of the 24
   grid of the drop (its round part is 14 units wide, as wide as a disc), --stop-y where the stops sit on phones.
   The step label becomes a small kicker above the title, so the title leads. Go with the flow has no icons: unchanged. */
.journey.has-icons { --river-w: 40px; --stop-d: 44px; --s: calc(var(--stop-d) / 14); --stop-y: 22px; --gap: 36px; }
.has-icons .journey-step { padding-left: calc(24px + var(--river-w) + var(--gap)); }
.has-icons .journey-mid { left: 24px; }
.has-icons .journey-dot { --disc-size: var(--stop-d); left: calc(var(--c, 0.5) * var(--river-w) - var(--stop-d) / 2); top: calc(var(--stop-y) - var(--stop-d) / 2); box-shadow: 0 0 0 4px var(--white); }
.has-icons .journey-dot .icon { stroke-width: 2; }
/* The source: the drop of the logo, its round part as wide as a disc and centred on the river, the tip pointing up */
.has-icons .journey-dot.is-source { width: calc(24 * var(--s)); height: calc(24 * var(--s)); box-shadow: none; left: calc(var(--c, 0.5) * var(--river-w) - 12 * var(--s)); top: calc(var(--stop-y) - 15 * var(--s)); }
.has-icons .journey-dot.is-source .river-source { width: 100%; height: 100%; fill: var(--disc); stroke: var(--white); stroke-width: 8px; paint-order: stroke; }
.has-icons .journey-dot.is-source .river-source path { vector-effect: non-scaling-stroke; }
.has-icons .journey-dot.is-source .icon { position: absolute; z-index: 3; left: calc(12 * var(--s)); top: calc(15 * var(--s)); width: calc(var(--stop-d) * 0.54); height: calc(var(--stop-d) * 0.54); transform: translate(-50%, -50%); color: var(--glyph); }
/* Phones: the thin line runs from the edge of the disc to the text and stops short of it */
.has-icons .journey-dot::after { --line: calc((1 - var(--c, 0.5)) * var(--river-w) + var(--gap) - 12px - var(--stop-d) / 2); width: min(var(--line), max(0px, (var(--line) - 10px) * 100)); }   /* under 10 px it would look like a glitch: then no line */
.has-icons .journey-dot.is-source::after { left: calc(19 * var(--s)); top: calc(15 * var(--s)); }
.has-icons .journey-seg-v, .has-icons .journey-mouth-v { top: var(--stop-y); }
/* The last step is at least as tall as the sea it opens into, so the sea never runs into the line under the river */
.has-icons .journey-step:last-child { min-height: calc(var(--stop-y) + 120px); }
.has-icons .journey-text .label { font-size: 1.125rem; line-height: 1.3; }   /* 18 px: "Step 1" reads at a glance above its title (Elke, 5 October 2026; was 14 px) */
@media (min-width: 800px) {
  /* Wide screens: the stops sit on the river with their left edge on the edge of the text, the river runs from
     centre to centre (--stop-x), and the band is taller so the largest bends keep their discs inside it */
  .journey.has-icons { --band: 140px; --pad: 32px; --stop-d: 56px; --stop-x: 28px; }
  .has-icons .journey-step { padding-left: 0; }
  .has-icons .journey-step:last-child { min-height: 0; }
  .has-icons .journey-mid { left: 0; }
  .has-icons .journey-dot { left: calc(var(--stop-x) - var(--stop-d) / 2); top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) - var(--stop-d) / 2); }
  .has-icons .journey-dot.is-source { left: calc(var(--stop-x) - 12 * var(--s)); top: calc(var(--pad) + var(--cy, 0.5) * var(--inner) - 15 * var(--s)); }
  /* A thin line from the bottom of each stop down to its text */
  .has-icons .journey-dot::after { left: calc(50% - 1px); top: 100%; width: 2px; height: calc(var(--band) + 12px - var(--pad) - var(--cy, 0.5) * var(--inner) - var(--stop-d) / 2); }
  .has-icons .journey-dot.is-source::after { left: calc(12 * var(--s) - 1px); top: calc(22 * var(--s)); height: calc(var(--band) + 12px - var(--pad) - var(--cy, 0.5) * var(--inner) - 7 * var(--s)); }
  .has-icons .journey-seg-h { left: var(--stop-x); }
  .has-icons .journey-mouth-h { left: var(--stop-x); width: calc(100% - var(--stop-x)); }
  .journey.has-icons .river-deco-reeds { left: calc(var(--stop-x) + var(--stop-d) / 2 + 20px); }
}

/* The sailing boat ({% boatWave %}, Join; Adam's feedback 14, October 2026): Lucide's sailboat drifts from left to right
   along one long, slow wave, as the Scheldt flows on the site's drawings, and rises, falls and leans with it. It fades in
   at the start of the line and out at its end, then sets off again: about a minute across on a computer, half a minute
   on a phone, so it never hurries. The line stretches with the width and keeps its height (--k px per unit of its
   24-unit box), so the boat follows it in shares of the width: the keyframes below are the crests and troughs of the
   line (BOAT_X and BOAT_H in eleventy.config.js; change them together), and between two of them the boat moves on the
   same curve as the line (cubic-bezier(0.4, 0, 0.6, 1) is the shape calmWave draws each bend with). It leans forward
   going down and back going up, a little less than the line slopes (--tilt), as a boat does.
   With less motion asked for the boat rests on the middle crest. The boat is GoodPlanet blue, the darker variant
   (5.0:1 on white, 4.6:1 on Foam); its hull is filled with the background (--boat-bg), so the line never shows through. */
.boat-wave { --k: 1; --boat: 44px; --tilt: 1.6; --ride: 34s; --boat-bg: var(--white); position: relative; height: calc(var(--boat) + 24px * var(--k)); overflow: hidden; pointer-events: none; }   /* hidden: the moving layer is as wide as the line, so it would push the page sideways */
@media (min-width: 800px) { .boat-wave { --k: 2; --boat: 56px; --tilt: 1.2; --ride: 56s; } }
.boat-wave-line { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(24px * var(--k));
  -webkit-mask: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent); }
.boat-wave-line path { fill: none; stroke: var(--water); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.boat-wave-line .boat-wave-ripple { stroke-width: 1.2px; stroke-opacity: 0.5; }
/* The middle of the first line (14 units up from the foot of the box) is the water level; the keel sits just in it */
.boat-x { position: absolute; left: 0; right: 0; bottom: calc(14px * var(--k) - var(--boat) * 0.1); height: var(--boat); transform: translateX(64%); }
.boat-y { width: var(--boat); height: var(--boat); margin-left: calc(var(--boat) / -2); transform: translateY(calc(-5px * var(--k))); }
.boat-tilt { width: 100%; height: 100%; transform-origin: 50% 90%; }
.boat-tilt .boat { width: 100%; height: 100%; color: var(--water-ink); stroke-width: 1.5; }
.boat path:nth-child(2) { fill: var(--boat-bg); }   /* the hull; the sail stays open, so the mast shows through it */
@media (prefers-reduced-motion: no-preference) {
  .boat-x { animation: boat-drift var(--ride) linear infinite; }
  .boat-y { animation: boat-rise var(--ride) cubic-bezier(0.4, 0, 0.6, 1) infinite; }
  .boat-tilt { animation: boat-lean var(--ride) ease-in-out infinite; }
}
@keyframes boat-drift { 0% { transform: translateX(0); opacity: 0; } 5%, 94% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes boat-rise {
  0% { transform: translateY(calc(-8px * var(--k))); }
  30% { transform: translateY(calc(6.5px * var(--k))); }
  64% { transform: translateY(calc(-5px * var(--k))); }
  100% { transform: translateY(calc(3.5px * var(--k))); }
}
/* At the reference width (1000 px, --k 1) the line slopes 4.6, 3.2 and 2.3 degrees halfway down or up each bend */
@keyframes boat-lean {
  0%, 30%, 64%, 100% { rotate: 0deg; }
  15% { rotate: calc(4.6deg * var(--tilt)); }
  47% { rotate: calc(-3.2deg * var(--tilt)); }
  82% { rotate: calc(2.3deg * var(--tilt)); }
}

/* What we arrange for the weekends away, between the reasons and who can join (Join, Adam's feedback 14, variant C):
   one centred call on the white page, then the sailing boat on a long wave that runs from edge to edge of the screen,
   like the band of water further down. Heading 5.0:1 and text 13:1 on white. */
.trip-band { text-align: center; }
.trip-band h2 { max-width: 20em; margin: 0 auto 12px; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.12; }
.trip-band h2 span, .join-who h2 span { display: inline-block; }   /* each sentence on its own line when both do not fit on one */
.trip-band p { max-width: 30em; margin: 0 auto; font-size: var(--fs-lead); line-height: 1.5; text-wrap: balance; }
.trip-band .boat-wave { width: 100vw; margin: clamp(12px, 2vw, 24px) 0 0 calc(50% - 50vw); }

/* The sign-up card (also used on Go with the flow) */
.join-signup { gap: 28px; }
@media (min-width: 900px) { .join-signup { padding: 64px 72px; } }
.card-dark.join-signup h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.join-signup .chips { margin: 24px 0 0; }
.card-dark .join-signup-todo { margin-top: 16px; font-size: var(--fs-small); }
.join-signup-action { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (min-width: 900px) { .join-signup-action { align-items: center; text-align: center; } }
.card-dark.join-signup .btn { font-size: 1.1875rem; padding: 18px 36px; }
.card-dark .form-note { margin: 0; font-size: var(--fs-tiny); color: var(--on-dark); max-width: 18em; }
.btn.is-waiting { opacity: 0.6; cursor: not-allowed; }
.join-privacy { margin-top: 20px; font-size: var(--fs-small); color: var(--grey); }
.join-privacy summary { cursor: pointer; padding: 11px 0; font-weight: 700; color: var(--deep); }
.join-privacy summary:hover { color: var(--deep-hover); }
.join-privacy p { margin: 8px 0 0; max-width: 48em; line-height: 1.6; }

/* ---------- Go with the flow (src/go-with-the-flow.md, js/game.js) ----------
   The card backs follow the game: sky blue, a winding river and arrows, rust brown for against the current. */
.game { --game-sky: #7CC6EC; --game-rust: #A5541E; }
.game-piles { display: grid; gap: 48px; }
@media (min-width: 800px) { .game-piles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.game-pile { display: flex; flex-direction: column; gap: 24px; }
.game-card { position: relative; width: min(100%, 224px); aspect-ratio: 5 / 7; perspective: 1400px; cursor: pointer; }
/* The pile underneath */
.game-card::before { content: ""; position: absolute; inset: 0; transform: translate(8px, 8px) rotate(1.5deg); border-radius: 18px; background: var(--white); border: 2px solid var(--mist); }
.game-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1); }
.game-card:hover:not(.is-flipped) .game-card-inner { transform: translateY(-4px) rotate(-1deg); }
.game-card.is-flipped .game-card-inner { transform: rotateY(180deg); }
.game-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 22px; border-radius: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.game-back { background: var(--game-sky); align-items: center; justify-content: space-between; gap: 12px; }
.game-back svg { display: block; width: 100%; flex: 1; min-height: 0; overflow: visible; }
.game-river { fill: none; stroke: var(--deep-hover); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.pile-against .game-river { stroke: var(--game-rust); }
.game-arrows { fill: none; stroke: var(--white); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.game-drop { fill: var(--white); stroke: var(--deep-hover); stroke-width: 3; stroke-linejoin: round; }
.game-back-name { font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1.1; color: var(--deep-hover); text-align: center; }
.game-front { transform: rotateY(180deg); justify-content: center; gap: 14px; background: var(--white); border: 2px solid var(--mist); }
.game-front-type { font-size: var(--fs-label); font-weight: 700; color: var(--grey); }
.game-front-text { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 1rem; line-height: 1.45; color: var(--water-ink); text-wrap: pretty; }
.pile-against .game-front-text { color: var(--game-rust); }
.pile-challenge .game-front-text { color: var(--deep-hover); }
.game-pile-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.game-pile-text p { margin: 0; line-height: 1.55; }
.game-pile-text .btn { margin-top: 10px; }
@media (min-width: 800px) { .game-card { width: min(100%, 272px); } }
/* Side by side, the three 'Draw a card' buttons stand on one line, whatever the length of the text above them */
@media (min-width: 800px) { .game-pile-text { flex: 1; } .game-pile-text .game-example { margin-bottom: 10px; } .game-pile-text .btn { margin-top: auto; } }
.game-example { font-size: var(--fs-small); color: var(--grey); }
/* Drawing cards needs JavaScript; without it the page shows an example card as text. */
.game-draw { display: none; }
.game-ready .game-draw { display: inline-flex; }
.game-ready .game-example { display: none; }
.game-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; font-size: var(--fs-article); }
@media (min-width: 600px) { .game-needs { grid-template-columns: 1fr 1fr; } }
.game-needs label { display: flex; align-items: flex-start; gap: 12px; padding-block: 5px; cursor: pointer; line-height: 1.45; }   /* the 10 px between items is now part of the label, so it is easier to tap */
.game-needs input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--water-ink); }
.game-needs input:checked + span { color: var(--grey); text-decoration: line-through; text-decoration-color: var(--water); }

.join-contact { display: grid; gap: 32px; }
@media (min-width: 700px) { .join-contact { grid-template-columns: 1fr 1fr; gap: 64px; } }
.join-contact h2 { margin-bottom: 16px; }
.join-contact p { margin-bottom: 12px; }

/* Recommendations: the letter to policymakers as a policy brief (Tine, file 64, design B).
   Our frame upright (letterhead, sender, date, addressee, subject, note), their words in italics between big quotation marks.
   Phones: a lighter frame (no shadow, thin top bar), smaller padding. */
.brief {
  --brief-water: var(--water, #1895D3);
  --brief-blue: var(--water-ink, #1376A7);
  --brief-deep: var(--deep, #1376A7);
  --brief-ink: var(--ink, #2E2B26);
  --brief-grey: var(--grey, #675F55);
  --brief-mist: var(--mist, #D1EAF6);
  --brief-foam: var(--foam, #EDF7FB);
  --brief-paper: var(--white, #FFFFFF);
  --brief-pad: clamp(18px, 2px + 4.6vw, 64px);

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 46.5rem; /* about 744 px: the letter keeps 60 to 70 characters a line */
  margin: 0;
  padding: calc(var(--brief-pad) * 0.75) var(--brief-pad) calc(var(--brief-pad) * 0.8);
  background: var(--brief-paper);
  border: 1px solid var(--brief-mist);
  border-top: 3px solid var(--brief-water);
  border-radius: 2px 2px 6px 6px;
  color: var(--brief-ink);
  font-family: var(--font-body, "Lato", "Calibri", system-ui, -apple-system, "Segoe UI", sans-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.brief *, .brief *::before, .brief *::after { box-sizing: border-box; }
@media (min-width: 700px) {
  .brief {
    border-top-width: 5px;
    box-shadow: 0 1px 2px rgba(46, 43, 38, 0.05), 0 28px 56px -28px rgba(13, 81, 115, 0.30);
  }
}

/* ---------- Letterhead ---------- */
.brief .brief-head { display: flex; align-items: center; gap: 12px; }
.brief .brief-logo { flex: none; display: block; width: auto; height: 40px; max-width: none; }
.brief .brief-org { margin: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; color: var(--brief-deep); }
@media (min-width: 700px) {
  .brief .brief-head { gap: 16px; }
  .brief .brief-logo { height: 52px; }
  .brief .brief-org { font-size: 1.25rem; }
}

/* ---------- Sender, date, addressee, subject: laid out like a letter (Tine, 5 Oct 2026) ---------- */
.brief .brief-from { margin: 2px 0 0; font-size: 1rem; line-height: 1.35; color: var(--brief-grey); }
.brief .brief-address { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--brief-mist); font-size: 1rem; line-height: 1.45; }
.brief .brief-address p { margin: 0; }
.brief .brief-date { text-align: right; color: var(--brief-grey); }
.brief .brief-address .brief-to { margin-top: 14px; }
.brief .brief-address .brief-subject { margin-top: 18px; font-weight: 700; color: var(--brief-deep); text-wrap: pretty; }
.brief .brief-subject span { font-weight: 400; color: var(--brief-grey); }
@media (min-width: 700px) {
  .brief .brief-from { font-size: 1rem; }
  .brief .brief-address { margin-top: 32px; padding-top: 24px; font-size: 1.0625rem; }
  .brief .brief-address .brief-to { margin-top: 18px; }
  .brief .brief-address .brief-subject { margin-top: 24px; font-size: 1.1875rem; line-height: 1.35; }
}

/* ---------- The thin blue rule: one slow wave, like the site's wave lines ---------- */
.brief .brief-rule {
  --brief-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C120,14 180,5 300,5 C440,5 500,22 640,22 C780,22 840,9 980,9 C1120,9 1200,17 1440,17' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  height: 12px; margin: 26px 0 28px; background: var(--brief-water);
  -webkit-mask: var(--brief-wave) 0 0 / 100% 100% no-repeat; mask: var(--brief-wave) 0 0 / 100% 100% no-repeat;
}
@media (min-width: 700px) { .brief .brief-rule { height: 14px; margin: 32px 0 36px; } }


/* ---------- The letter: italic, between big quotation marks ---------- */
.brief .brief-body {
  position: relative; max-width: 27em; padding-top: 2.1rem;
  font-style: italic; font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem); /* 17 px on phones, 20 px from 1200 px, like the site's article text */
  line-height: 1.7; color: var(--brief-ink);
}
.brief .brief-body::before {
  content: "\201C" / "";
  position: absolute; left: -0.06em; top: 0;
  font-family: var(--font-head, "Lato", sans-serif); font-style: normal; font-weight: 700;
  font-size: 4rem; line-height: 0.82; color: var(--brief-water);
}
.brief .brief-body p { margin: 0 0 1em; }
.brief .brief-body > p:last-child { margin-bottom: 0; }
.brief .brief-body > p:last-child::after {
  content: "\201D" / "";
  margin-left: 0.08em; font-style: normal; font-weight: 700; font-size: 1.5em; line-height: 0;
  vertical-align: -0.28em; color: var(--brief-water);
}
.brief .brief-body > p:first-child { font-weight: 700; color: var(--brief-deep); }
@media (min-width: 700px) {
  .brief .brief-body { padding-top: 0; padding-left: 4.25rem; max-width: calc(27em + 4.25rem); font-size: clamp(1.125rem, 1rem + 0.25vw, 1.25rem); }
  .brief .brief-body::before { font-size: 5.5rem; top: -0.06em; left: -0.04em; }
}

/* The key line: highlighted, like a sentence someone marked on the page */
.brief .brief-key {
  margin: 1.5em 0; padding: 14px 16px 16px 18px;
  background: var(--brief-foam); border-left: 4px solid var(--brief-water); border-radius: 0 6px 6px 0;
}
.brief .brief-key p {
  margin: 0; font-style: italic; font-weight: 700;
  font-size: clamp(1.25rem, 1.02rem + 0.9vw, 1.625rem); line-height: 1.35; color: var(--brief-deep);
}
@media (min-width: 700px) { .brief .brief-key { margin: 1.6em 0; padding: 20px 26px 22px 24px; } }

/* ---------- Footer line ---------- */
.brief .brief-foot {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--brief-mist);
  font-size: 1rem; line-height: 1.5; color: var(--brief-grey);
}
.brief .brief-foot p { margin: 0; max-width: 46em; }
.brief .brief-foot strong { color: var(--brief-ink); }
@media (min-width: 700px) { .brief .brief-foot { margin-top: 40px; padding-top: 20px; } }

/* The heading and intro share the letter's centred column */
.brief-col { max-width: 46.5rem; margin: 0 auto; }
.brief-col > h2 { margin: 0 0 14px; }
.brief-col > .brief-intro { margin: 0 0 clamp(24px, 3vw, 40px); max-width: 34em; }
/* A two-sentence title: one sentence per line */
.headline-line { display: block; }
/* The ask on each recommendation card, after a bold "We ask" */
.reco-ask { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.reco-ask strong { color: var(--deep); }
.voices-posters { margin-top: var(--block); }
/* From the riverbank to the commission: four steps, the Tournai photo and button under the last two (Tine, file 64) */
.voices-path { padding-top: 0; }
.voices-path .lead { margin-top: 12px; }
.path-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 28px; }
.path-steps li { position: relative; }
.path-steps .icon-disc { --disc-size: 52px; position: relative; z-index: 1; margin-bottom: 14px; }
.path-steps .label { display: block; margin-bottom: 6px; }
.path-steps h3 { margin: 0 0 8px; }
.path-steps p { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.path-tournai { margin-top: 28px; display: grid; gap: 16px; justify-items: start; }
.path-tournai figure { margin: 0; }
.path-tournai img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.path-tournai figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--grey); }
@media (min-width: 900px) {
  .path-steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .path-steps li:not(:last-child)::after { content: ""; position: absolute; top: 25px; left: 64px; right: -20px; height: 2px; background: var(--mist); }
  .path-tournai { grid-template-columns: repeat(4, 1fr); column-gap: 32px; margin-top: 40px; }
  .path-tournai > * { grid-column: 3 / 5; }
}
@media (max-width: 899px) {
  .path-steps li { padding-left: 68px; }
  .path-steps .icon-disc { position: absolute; left: 0; top: 0; }
  .path-steps li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 62px; bottom: -20px; width: 2px; background: var(--mist); }   /* stops short of the next disc */
}
/* One quote at the end of the page */
.voices-quote { padding-bottom: var(--section); }
/* The participant and the commission side by side (Tine, file 85) */
.voices-quote-pair { display: grid; gap: 24px; }
@media (min-width: 800px) { .voices-quote-pair { grid-template-columns: 1fr 1fr; } }
/* On wide screens the three photos sit beside their text, smaller, so the section stays short; the originals below */
@media (min-width: 900px) {
  .voices-posters { display: grid; grid-template-columns: 1fr 1.7fr; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
  .voices-posters > h3, .voices-posters > p { grid-column: 1; }
  .voices-posters .posters-moments { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; gap: 16px; }
  .voices-posters .posters-originals { grid-column: 1 / -1; }
}
/* The three recommendations: "Group 1" and a large line icon at the top, each in its own GoodPlanet colour (Tine, October 2026) */
.reco-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.card-soft .reco-head .label { margin-bottom: 0; }
.reco-icon { flex: none; width: 64px; height: 64px; color: var(--accent, var(--water-ink)); }
@media (min-width: 900px) { .reco-icon { width: 72px; height: 72px; } }
.reco .reco-icon path { stroke-width: 2.3px; }
.reco:nth-child(3n+1) { --accent: var(--green); }
.reco:nth-child(3n+2) { --accent: var(--orange); }
.reco:nth-child(3n+3) { --accent: var(--pink); --tint: 7%; }
.posters-gallery { margin-top: var(--block); }
/* A detail of the group's own poster at the bottom of each recommendation card */
.reco { display: flex; flex-direction: column; }
/* How the group got there, folded away under the conclusion */
.reco-more { margin-top: 7px; }
.reco-more summary { cursor: pointer; padding: 11px 0; font-size: var(--fs-small); font-weight: 700; color: var(--deep); }
.reco-more summary:hover { color: var(--deep-hover); }
.reco-more p { margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.55; }
.reco-detail { margin: auto 0 0; padding-top: 24px; }
.reco-detail img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); filter: saturate(0.9) contrast(1.05); }
.reco-detail figcaption { margin-top: 8px; font-size: var(--fs-tiny); color: var(--grey); }
/* "From poster to presentation": three photos of the groups presenting, all the same shape */
.posters-moments { display: grid; gap: 16px; margin-top: var(--block); }
@media (min-width: 700px) { .posters-moments { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.posters-moments figure { margin: 0; }
/* A row to swipe sideways on phones: each item a bit narrower than the screen, so the next one peeks in.
   It runs to the edge of the screen and snaps to each item. From 700 px the grid of the block itself takes over.
   position: relative keeps the hidden '(view larger)' labels inside the row, or they would widen the page. */
@media (max-width: 699px) {
  .swipe-row { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > * { flex: 0 0 78%; scroll-snap-align: start; }
  .swipe-row:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 4px; }
}
.posters-moments a { display: block; }
.posters-moments img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--r-md); }
.posters-moments a:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 3px; border-radius: var(--r-md); }
.posters-moments figcaption { margin-top: 8px; font-size: var(--fs-tiny); color: var(--grey); }
/* The original posters, folded away */
.posters-originals { margin-top: var(--block); border-top: 2px solid var(--mist); padding-top: 10px; }
.posters-originals summary { cursor: pointer; padding: 10px 0; font-weight: 700; color: var(--deep); font-size: var(--fs-body); }
.posters-originals summary:hover { color: var(--deep-hover); }
.posters-originals[open] summary { margin-bottom: 12px; }
.posters-thumbs { display: grid; gap: 16px; margin-top: 16px; max-width: 900px; }
@media (min-width: 700px) { .posters-thumbs { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.posters-thumbs figure { margin: 0; }
.posters-thumbs a { display: block; }
.posters-thumbs img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: var(--r-sm); }
.posters-thumbs a:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 3px; border-radius: var(--r-sm); }
.posters-thumbs figcaption { margin-top: 8px; font-size: var(--fs-tiny); color: var(--grey); }
/* "On this page": the parts of the long Youth voices page, as links you can jump to */
/* Jumping to a part leaves a little room above its title */
#letter, #recommendations, #presented, #participants, #posters { scroll-margin-top: 16px; }
.candidates { display: grid; gap: 16px; margin-top: var(--block); }
@media (min-width: 900px) { .candidates { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.candidate { background: var(--foam); border-radius: 20px; padding: 24px; font-size: var(--fs-small); line-height: 1.5; }
.candidate .label-grey { display: block; font-size: var(--fs-tiny); margin-bottom: 10px; }
.candidate p { margin: 0 0 10px; }

/* Reports */
.download-card { margin-top: var(--block); }
.download-meta { font-size: var(--fs-tiny); color: var(--on-dark); margin-top: 8px; }

/* Timeline page */
.timeline-intro { padding-bottom: var(--section-sm); }
.timeline-river { padding-bottom: var(--section); }
.timeline-motto { padding-bottom: 0; }   /* .page-body already ends with var(--section) */

/* ---------- About (Tine, file 63, October 2026, after Adam's feedback) ----------
   People first: the title and what we do at the top beside a photo of people, then the moving gallery
   (blocks/photo-ribbon.njk, which took the place of "Then and now" and of the photos of "Earlier rounds"), the mix of
   the group, the aim, the river and our seat at the commission, and two colour cards. */
/* The aim: one line between the people and the river, as large as the title of a card, in the heading blue */
.prose .statement { margin: calc(1.6 * var(--fs-h2)) 0 0; max-width: 22em; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 700; line-height: 1.25; color: var(--heading); text-wrap: balance; }
/* The map of the three countries beside "One river, three countries" and "A seat at the table". On a phone the map
   comes first, no wider than 360 px, so the labels beside it stay readable without taking the whole screen. */
.prose .river-pair { display: grid; gap: 32px; margin-top: 40px; width: min(calc(100vw - 2 * var(--gutter)), var(--content)); }
.prose .river-pair > * { min-width: 0; }
.prose .river-pair-map { width: 100%; max-width: 360px; }
.prose .river-pair .countries-map { margin: 0; }   /* the pair already spaces it; its own 32 px would double the gap under the aim */
.prose .river-pair h2 { margin-top: 0; }
.prose .river-pair h2 ~ h2 { margin-top: calc(1.2 * var(--fs-h2)); }
/* From 900 px beside each other, the top of the map level with "One river, three countries" (the texts are taller than
   the map, so centring it left a hole under the aim). The texts keep the line length of the rest of the page (34em, as
   .prose). Up to 1100 px the map is the demo's 360 px, so the texts beside it are not squeezed. */
@media (min-width: 900px) {
  .prose .river-pair { grid-template-columns: minmax(0, 420px) minmax(0, 34em); gap: 64px; align-items: start; }
  .prose .river-pair-map { max-width: none; }
}
@media (min-width: 900px) and (max-width: 1099.98px) { .prose .river-pair { grid-template-columns: minmax(0, 360px) minmax(0, 34em); gap: 48px; } }
/* Two colour cards side by side in a text page (About: how it works, brought to you by) */
.prose .card-pair { display: grid; gap: 16px; margin-top: calc(1.6 * var(--fs-h2)); width: min(calc(100vw - 2 * var(--gutter)), var(--content)); }
@media (min-width: 700px) { .prose .card-pair { grid-template-columns: 1fr 1fr; gap: 24px; } }
.prose .card-pair h2 { margin-top: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.15; }   /* as large as the title of a blue card */
.prose .card-pair .colour-card > :last-child { margin-bottom: 0; }
/* Three cards in a row, on About (Where it led, Tine file 85) */
.card-trio { display: grid; gap: 24px; margin-block: 24px 48px; width: min(calc(100vw - 2 * var(--gutter)), var(--content)); }
@media (min-width: 900px) { .card-trio { grid-template-columns: repeat(3, 1fr); } }
.card-trio h3 { margin-top: 0; }
.card-trio .colour-card > :last-child { margin-bottom: 0; }
.card-trio > :nth-child(3n+1) { --accent: var(--lime); --line: color-mix(in srgb, var(--lime) 80%, var(--ink)); }
.card-trio > :nth-child(3n+2) { --accent: var(--orange); }
.card-trio > :nth-child(3n+3) { --accent: var(--green); }
.card-pair > :nth-child(2n+1) { --accent: var(--orange); }
.card-pair > :nth-child(2n+2) { --accent: var(--green); }
/* Brought to you by (Adam's title): GoodPlanet's logo large under the title, the partners and funders small under the
   text. Their logos link from the footer and the Partners page, so here they are pictures only. */
.prose .brought-by-logo { display: block; width: 168px; height: auto; margin: 4px 0 18px; border-radius: 0; }   /* not the rounded corners of photos in a text page: they cut off the G */
/* On a white panel, like the logos in the footer and the funders on Partners: every logo keeps its own colours, and the
   Agence de l'Eau logo (a picture with a white ground) does not stand out as a white box on the green card */
.prose .brought-by-partners { list-style: none; margin: 0 0 20px; padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; background: var(--white); border-radius: 12px; }
.prose .brought-by-partners li { margin: 0; padding: 0; }
.prose .brought-by-partners img { display: block; height: var(--h, 30px); width: auto; max-width: 100%; border-radius: 0; }   /* logos as they are drawn (the EU emblem may not be changed) */

/* The old motto in three languages (blocks/motto.njk): at the mouth of the timeline, and small in the Join sign-up card */
.motto { margin: 0 auto; max-width: 40em; text-align: center; }
.motto blockquote { margin: 0; }
.motto p { margin: 0; font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem); line-height: 1.4; color: var(--deep); text-wrap: balance; }
.motto p + p { margin-top: 8px; }
.motto .wave-mark { margin-bottom: 24px; }
.motto .wave-mark.wave-mark-end { margin: 24px auto 12px; }
.motto figcaption { font-size: var(--fs-tiny); color: var(--grey); }
.card-dark .motto-compact { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.2); text-align: left; max-width: 36em; }
.card-dark .motto-compact p { font-size: var(--fs-small); font-weight: 400; font-style: italic; line-height: 1.45; color: var(--white); max-width: none; }
.card-dark .motto-compact p + p { margin-top: 4px; }
/* ---------- The motto as a band of water (blocks/motto-band.njk, Join page; Tine's choice, file 48) ----------
   The band runs edge to edge. It opens with the group by the canal in Ghent under the soft wave edge of the site;
   under their feet the canal runs on as water, through one long slow wave, into the motto. One seam deeper lies the
   sign-up, the deepest water. After Adam's feedback (October 2026, J8 to J10) the motto is in English only, with a
   small switch to French and Dutch, and the sign-up is a big centred call, like the call at the bottom of other pages.
   White text on the two layers is 4.6 and 7.3 to 1. GoodPlanet blue itself only shows where the photo turns to water,
   with no text on it. */
.motto-band {
  --layer-1: #147CB0;   /* the motto */
  --layer-2: #0F5C82;   /* the sign-up, the deepest water */
  --melt-h: clamp(54px, 8vw, 116px);    /* where the canal runs on under the group */
  --seam-h: clamp(40px, 5.4vw, 76px);   /* the seam between the two layers: one long, slow swell */
  /* Out of the page column, edge to edge (the body clips the overflow) */
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: var(--section);
  overflow-x: clip;
}
.band-motto { margin: 0; }

/* The photo, edge to edge, with the site's wave edge and high-water line on top.
   The whole group stays in view at every width; only sky and grass are cropped. */
.band-photo { position: relative; padding-top: 8px; --edge-size: max(100%, calc(var(--photo-edge) * 40)) var(--photo-edge); }
.band-photo picture { display: block; }
.band-photo img { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 2; object-position: 50% 72%; }
@media (min-width: 560px) { .band-photo img { aspect-ratio: 16 / 9; object-position: 50% 66%; } }
@media (min-width: 900px) { .band-photo img { aspect-ratio: 2 / 1; max-height: max(600px, 42vw); object-position: 50% 58%; } }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .band-photo img {
    -webkit-mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
    mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
  }
  .band-photo::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--photo-edge); background: var(--water); opacity: 0.5; pointer-events: none;
    -webkit-mask: var(--wave-line-top) 0 0 / var(--edge-size) no-repeat; mask: var(--wave-line-top) 0 0 / var(--edge-size) no-repeat;
  }
}
/* Where the photo turns to water: a soft blue light over the grass, then one translucent swell of GoodPlanet blue,
   then the first layer itself. The swells keep their laptop length on a phone, so they never turn into ripples. */
.band-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--melt-h) * 2.6); pointer-events: none;
  background: linear-gradient(to bottom, rgb(20 124 176 / 0), rgb(20 124 176 / 0.14) 35%, rgb(20 124 176 / 0.42) 65%, rgb(20 124 176 / 0.78));
}
.band-melt { position: absolute; z-index: 1; left: 0; bottom: -1px; width: max(100%, 1100px); height: var(--melt-h); }
/* The water under the group sways like every other wave (Tine, 5 October 2026): this drawing does not repeat, so it rocks
   slowly to and fro instead of sliding, and rises and falls a little from the bottom; a little wider on both sides so
   no edge comes into view. Still for people who ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .band-melt { left: -48px; width: calc(max(100%, 1100px) + 96px); max-width: none; transform-origin: 50% 100%; animation: melt-sway 8.5s ease-in-out infinite alternate; }
}
@keyframes melt-sway { from { translate: 0 0; scale: 1 0.92; } to { translate: 48px 0; scale: 1 1.08; } }
.band-melt-glint { fill: var(--water); opacity: 0.4; }
.band-melt-water { fill: var(--layer-1); }

/* The seam: the colour above is the svg background, the colour below the filled path.
   It overlaps 1 px on both sides, so no hairline shows between a layer and the seam. */
.band-seam { display: block; position: relative; width: max(100%, 1100px); height: calc(var(--seam-h) + 1px); margin: -1px 0; background: var(--layer-1); fill: var(--layer-2); }

/* The motto: one line, centred, in the water right under the group */
.band-water { display: flow-root; background: var(--layer-1); padding-bottom: clamp(20px, 2.4vw, 36px); text-align: center; }
.band-quote { margin: 0; }
.band-line { margin: 0; padding-top: clamp(8px, 0.9vw, 12px);
  font-family: var(--font-quote); font-weight: 500; font-style: italic; font-size: clamp(1.5rem, 1rem + 2vw, 2.625rem); line-height: 1.25; color: var(--white); text-wrap: balance; }

/* The small flows: the site's hand-drawn line (see .link-scribble), in green */
.band-small { position: relative; white-space: nowrap; }
.band-small::after {
  --scribble-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7.1 7 6.7 11.1 6.5 15.1 6.5 19.2 6.4 23.2 6.3 27.3 6.3 31.3 6.3 35.3 6.2 39.4 6.2 43.4 6.2 47.5 6.2 51.5 6.2 55.5 6.2 59.6 6.1 63.6 6.1 67.7 6.1 71.7 6.1 75.8 6.1 79.8 6.1 83.8 6.1 87.9 6.1 91.9 6.1 96 6.1 100 6.1 104 6.1 108.1 6.1 112.1 6 116.2 6 120.2 6 124.3 6 128.3 6 132.3 6 136.4 6 140.4 6 144.5 5.9 148.5 5.9 152.5 5.9 156.6 5.9 160.6 5.9 164.7 5.6 168.7 5.2 172.8 4.8 176.8 4.2 180.8 3.8 184.9 3.3 188.9 2.8 193 2.4 197 2.2 197 3 193 3.1 188.9 3.5 184.9 4 180.8 4.8 176.8 5.6 172.8 6.4 168.7 7 164.7 7.5 160.6 7.9 156.6 8.1 152.5 8.2 148.5 8.3 144.5 8.5 140.4 8.6 136.4 8.7 132.3 8.8 128.3 8.9 124.3 8.9 120.2 9 116.2 9.1 112.1 9.2 108.1 9.2 104 9.3 100 9.3 96 9.4 91.9 9.4 87.9 9.4 83.8 9.4 79.8 9.4 75.8 9.4 71.7 9.4 67.7 9.4 63.6 9.4 59.6 9.4 55.5 9.4 51.5 9.3 47.5 9.3 43.4 9.2 39.4 9.1 35.3 9.1 31.3 9 27.3 8.9 23.2 8.8 19.2 8.7 15.1 8.5 11.1 8.4 7 8.2 3 7.8Z'/%3E%3C/svg%3E");
  content: ""; position: absolute; left: -0.06em; right: -0.12em; bottom: -0.27em; height: 0.5em; background: var(--scribble);
  -webkit-mask: var(--scribble-shape) center / 100% 100% no-repeat; mask: var(--scribble-shape) center / 100% 100% no-repeat;
}
.band-small { --scribble: var(--green); }

/* The deepest layer: the sign-up as a big centred call, the same sizes as the call at the bottom of the other pages
   (Tine, file 62, option A): a big title, one short paragraph and a big lime button, 64 px tall, nearly full width on
   phones. Lime with dark text is 7.6 to 1, and stands out at 3.9 to 1 from the deep blue around it.
   The layer is positioned so it lies over the seam's last row of pixels: at some widths the seam ends between two
   pixels, and that row showed as a thin light line. */
.band-deep { display: flow-root; position: relative; background: var(--layer-2); scroll-margin-top: 24px; }
.band-signup { padding-top: clamp(32px, 1rem + 4vw, 80px); padding-bottom: clamp(48px, 1.5rem + 4.5vw, 96px); text-align: center; color: var(--on-dark); }
.band-signup h2 { max-width: 18em; margin: 0 auto 16px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.1; color: var(--white); }   /* 32 to 52 px */
.band-signup p { max-width: 32em; margin: 0 auto; font-size: var(--fs-lead); color: var(--on-dark); }
.band-signup .chips { justify-content: center; margin: 24px 0 0; }
.band-signup .btn { margin-top: clamp(28px, 1.2rem + 1.4vw, 40px); min-width: min(100%, 15rem); font-size: 1.25rem; padding: 18px 44px; box-shadow: 0 6px 18px rgba(7, 42, 60, 0.4); }   /* 64 px tall */
@media (max-width: 599px) { .band-signup .btn { width: 100%; max-width: 20rem; padding-inline: 24px; } }
.band-signup .form-note { margin-top: 12px; font-size: var(--fs-tiny); }

/* The band's lower edge, the same calm wave as the rest of the site */
.band-edge { display: block; width: max(100%, 1100px); height: clamp(40px, 4.4vw, 64px); margin-top: -1px; fill: var(--layer-2); }
.motto-band + .page-block { margin-top: clamp(16px, 2vw, 24px); }
.motto-band + .page-block .join-privacy { margin-top: 0; }

@media (forced-colors: active) {
  .band-small::after { background: CanvasText; }
}

/* ---------- Review page for the project manager (/relecture/) ---------- */
.rel-hero { padding-bottom: var(--block); }
.rel-facts { margin: 0; padding-left: 1.2em; max-width: 40em; color: var(--ink); }
.rel-facts li + li { margin-top: 6px; }
.rel-form { padding-bottom: var(--section); display: flex; flex-direction: column; gap: var(--section-sm); }
.rel-section { display: flex; flex-direction: column; gap: 20px; }
.rel-section-head { display: flex; flex-direction: column; gap: 8px; }
.rel-list { display: flex; flex-direction: column; gap: 16px; }
.rel-item { margin: 0; min-width: 0; border: 2px solid var(--mist); border-radius: var(--r-md); padding: 20px; background: var(--white); display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 700px) { .rel-item { padding: 24px 28px; } }
.rel-item.is-answered { border-color: var(--water); background: var(--foam); }
.rel-title { padding: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: var(--deep); float: left; width: 100%; }
.rel-title + * { clear: both; }
.rel-title a { color: var(--deep); }
.rel-title a:hover { color: var(--deep-hover); }
.rel-tab { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-tiny); color: var(--grey); }
.rel-help { margin: 0; font-size: var(--fs-small); color: var(--grey); max-width: 62ch; }
.rel-date { margin: 0; font-size: var(--fs-label); font-weight: 700; color: var(--water-ink); }
.rel-options { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-choice { position: relative; display: inline-flex; }
.rel-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rel-choice > span { display: inline-block; padding: 8px 16px; border: 2px solid var(--mist); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-weight: 700; font-size: var(--fs-small); line-height: 1.3; cursor: pointer; }
.rel-choice > span:hover { border-color: var(--water-ink); }
.rel-choice input:checked + span { background: var(--deep); border-color: var(--deep); color: var(--white); }
.rel-choice input:focus-visible + span { outline: 3px solid var(--water-ink); outline-offset: 2px; }
.rel-note-label { font-size: var(--fs-tiny); color: var(--grey); margin-top: 4px; }
.rel-note, .rel-output { width: 100%; font: inherit; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); background: var(--white); border: 2px solid var(--mist); border-radius: var(--r-sm); padding: 10px 12px; resize: vertical; }
.rel-output { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-tiny); }
.rel-note:focus-visible, .rel-output:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 2px; border-color: var(--water-ink); }
.rel-send-card h2 { margin-bottom: 8px; }
.rel-status { margin: 0; font-weight: 700; color: var(--deep); min-height: 1.5em; }
.rel-reset { font: inherit; font-size: var(--fs-small); background: none; border: 0; padding: 4px 0; color: var(--water-ink); text-decoration: underline; cursor: pointer; }
.rel-reset:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 2px; }
/* What the site says now, or a draft to confirm or correct */
.rel-quote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--water); background: var(--foam); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); max-width: 62ch; }
.rel-item.is-answered .rel-quote { background: var(--white); }
.rel-quote-label { display: block; font-size: var(--fs-tiny); font-weight: 700; color: var(--water-ink); }
.rel-fallback { margin: 0; font-size: var(--fs-tiny); color: var(--grey); }
/* Lines we filled in ourselves: read, and tick "Not right" only where something is wrong; that opens a box for the correction */
.rel-checks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--mist); }
.rel-check { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: start; padding: 14px 0; border-bottom: 2px solid var(--mist); }
.rel-check-main { min-width: 0; }
.rel-check-text { margin: 0; font-size: var(--fs-body); line-height: 1.5; max-width: 62ch; }
.rel-check-text strong { color: var(--deep); }
.rel-check-text a { font-size: var(--fs-small); }
.rel-check-source { margin: 4px 0 0; font-size: var(--fs-tiny); color: var(--grey); }
.rel-flag { position: relative; display: inline-flex; }
.rel-flag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rel-flag > span { display: inline-block; padding: 6px 14px; border: 2px solid var(--mist); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-weight: 700; font-size: var(--fs-small); line-height: 1.3; white-space: nowrap; cursor: pointer; }
.rel-flag > span:hover { border-color: var(--water-ink); }
.rel-flag input:checked + span { background: var(--deep); border-color: var(--deep); color: var(--white); }
.rel-flag input:focus-visible + span { outline: 3px solid var(--water-ink); outline-offset: 2px; }
.rel-check-fix { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.rel-check:not(.is-flagged) .rel-check-fix { display: none; }
.rel-check.is-flagged { background: var(--foam); padding-inline: 12px; border-radius: var(--r-sm); }

/* ---------- GoodPlanet touches (October 2026, chosen by Tine) ----------
   Our own versions of playful details on goodplanet.be: round social icons, a hand-drawn underline and sticker labels.
   All shapes are drawn for the SYP (none come from goodplanet.be). Brush buttons and torn photo edges were tried and left out:
   they did not fit the water theme. The shapes are SVG masks, so their colour comes from a custom property. */

/* Lucide icons ({% icon "name" %}, lib/lucide-icons.js) and the colour discs they can sit on (homepage after Adam's
   feedback, Tine, file 62, October 2026). The four secondary colours of GoodPlanet's house style are for shapes, never
   for small text, so here they fill the disc and the line of the icon gets the colour with enough contrast (WCAG 1.4.11,
   3:1 for graphics): ink on lime 7.6:1, on orange 5.3:1, on green 5.1:1; white on pink 4.3:1 and on blue 5.0:1.
   Order on a page: lime, orange, pink, green, as in the figures band; blue for GoodPlanet itself. */
.icon { display: block; flex: none; width: 24px; height: 24px; stroke-width: 1.75; }
.icon-disc { --disc: var(--lime); --glyph: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--disc-size, 48px); height: var(--disc-size, 48px); border-radius: 50%; background: var(--disc); color: var(--glyph); }
.icon-disc .icon { width: 54%; height: 54%; }
.tone-lime { --disc: var(--lime); --glyph: var(--ink); }
.tone-orange { --disc: var(--orange); --glyph: var(--ink); }
.tone-pink { --disc: var(--pink); --glyph: var(--white); }
.tone-green { --disc: var(--green); --glyph: var(--ink); }
.tone-blue { --disc: var(--water-ink); --glyph: var(--white); }

/* Round social icons (lib/social-icons.js, blocks/social-icons.njk): discs cut a little unevenly, as with scissors,
   after the footer of goodplanet.be. 44 px, the size of a finger tip. The name of each network is visually hidden text.
   On white: blue discs with white symbols (5.0:1, and 5.0:1 against the page). */
.social-icons { --disc: var(--water-ink); --disc-hover: var(--deep-hover); --glyph: var(--white); --glyph-hover: var(--white); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.social-icons a { display: block; width: 44px; height: 44px; border-radius: 50%; color: var(--glyph); }
.social-icons a:hover { color: var(--glyph-hover); }
.social-icons a:focus-visible { outline-offset: 3px; border-radius: 50%; }
.social-icon { width: 44px; height: 44px; transition: transform 0.2s; }
.social-icon-disc { fill: var(--disc); transition: fill 0.2s; }
.social-icon-glyph { fill: currentColor; }
.social-icon-line { fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; }
/* On hover the disc turns a little, so its uneven edge shows */
.social-icons a:hover .social-icon { transform: rotate(-10deg); }
.social-icons a:hover .social-icon-disc { fill: var(--disc-hover); }   /* white on #0D5173, 8.6:1 */
/* On a blue surface such as the footer: white discs with blue symbols (5.0:1, and 5.0:1 against the blue) */
.social-icons-on-dark { --disc: var(--white); --disc-hover: var(--white); --glyph: var(--water-ink); --glyph-hover: var(--deep-hover); }   /* hover 8.6:1 */
.site-footer .social-icons { margin: 0; }
/* The follow links on the Join page: the round icon beside the name of the account, so you see whose account it is */
.social-list { --disc: var(--water-ink); --disc-hover: var(--deep-hover); color: var(--white); }
.social-list a { display: inline-flex; align-items: center; gap: 12px; color: var(--water-ink); }
.social-list .social-icon { flex: none; width: 40px; height: 40px; color: var(--white); }
.social-list a:hover .social-icon { transform: rotate(-10deg); }
.social-list a:hover .social-icon-disc { fill: var(--disc-hover); }

/* A hand-drawn line under every arrow link (and .link-scribble), in another GoodPlanet colour per block (chosen by Tine).
   The line is decoration only; the link text keeps its own blue (5.0:1 on white, 4.6:1 on Foam). */
.link-scribble, .link-arrow, .quote-person cite { position: relative; display: inline-block; padding-bottom: 10px; text-decoration: none; }
/* In a flex column the link would stretch, and its line with it, across the whole column: keep it as wide as its text */
.teaser-body > .link-arrow, .partner > .link-arrow, .partner-body > .link-arrow, .river-entry-text > .link-arrow { align-self: flex-start; }
@media (min-width: 900px) { .river-timeline .side-a .river-entry-text > .link-arrow { align-self: flex-end; } }
main > section:nth-of-type(4n+1), .teaser:nth-child(4n+1), .partner:nth-child(4n+1), .river-item:nth-child(4n+1) { --scribble: var(--green); }
main > section:nth-of-type(4n+2), .teaser:nth-child(4n+2), .partner:nth-child(4n+2), .river-item:nth-child(4n+2) { --scribble: var(--orange); }
main > section:nth-of-type(4n+3), .teaser:nth-child(4n+3), .partner:nth-child(4n+3), .river-item:nth-child(4n+3) { --scribble: var(--pink); }
main > section:nth-of-type(4n+4), .teaser:nth-child(4n+4), .partner:nth-child(4n+4), .river-item:nth-child(4n+4) { --scribble: var(--lime); }
.link-scribble::before, .link-arrow::before, .quote-person cite::before {
  --scribble-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7.1 7 6.7 11.1 6.5 15.1 6.5 19.2 6.4 23.2 6.3 27.3 6.3 31.3 6.3 35.3 6.2 39.4 6.2 43.4 6.2 47.5 6.2 51.5 6.2 55.5 6.2 59.6 6.1 63.6 6.1 67.7 6.1 71.7 6.1 75.8 6.1 79.8 6.1 83.8 6.1 87.9 6.1 91.9 6.1 96 6.1 100 6.1 104 6.1 108.1 6.1 112.1 6 116.2 6 120.2 6 124.3 6 128.3 6 132.3 6 136.4 6 140.4 6 144.5 5.9 148.5 5.9 152.5 5.9 156.6 5.9 160.6 5.9 164.7 5.6 168.7 5.2 172.8 4.8 176.8 4.2 180.8 3.8 184.9 3.3 188.9 2.8 193 2.4 197 2.2 197 3 193 3.1 188.9 3.5 184.9 4 180.8 4.8 176.8 5.6 172.8 6.4 168.7 7 164.7 7.5 160.6 7.9 156.6 8.1 152.5 8.2 148.5 8.3 144.5 8.5 140.4 8.6 136.4 8.7 132.3 8.8 128.3 8.9 124.3 8.9 120.2 9 116.2 9.1 112.1 9.2 108.1 9.2 104 9.3 100 9.3 96 9.4 91.9 9.4 87.9 9.4 83.8 9.4 79.8 9.4 75.8 9.4 71.7 9.4 67.7 9.4 63.6 9.4 59.6 9.4 55.5 9.4 51.5 9.3 47.5 9.3 43.4 9.2 39.4 9.1 35.3 9.1 31.3 9 27.3 8.9 23.2 8.8 19.2 8.7 15.1 8.5 11.1 8.4 7 8.2 3 7.8Z'/%3E%3C/svg%3E");
  content: ""; position: absolute; left: -3px; right: -4px; bottom: 0; height: 9px; background: var(--scribble, var(--water));
  -webkit-mask: var(--scribble-shape) center / 100% 100% no-repeat; mask: var(--scribble-shape) center / 100% 100% no-repeat;
  transition: background-color 0.2s;
}
.link-scribble:hover, .link-arrow:hover { text-decoration: none; }
.link-scribble:hover::before, .link-arrow:hover::before { background: var(--water-ink); }
.link-scribble-lime { --scribble: var(--lime); }
.link-scribble-orange { --scribble: var(--orange); }
.link-scribble-pink { --scribble: var(--pink); }
.link-scribble-green { --scribble: var(--green); }

/* Sticker labels that hang over the top left corner of a photo or card, like the category labels on goodplanet.be.
   Put .stickers inside an element with .has-stickers. Small text (14 px bold), so every pair passes 4.5:1;
   pink is left out, because white on pink is 4.3:1. */
.has-stickers { position: relative; }
.stickers { position: absolute; z-index: 2; top: -8px; left: -8px; right: 16px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.sticker { --sticker: var(--water-ink); --sticker-text: var(--white); display: inline-block; padding: 4px 10px 5px; border-radius: 3px; background: var(--sticker); color: var(--sticker-text); font-size: var(--fs-label); font-weight: 700; line-height: 1.3; box-shadow: 2px 4px 10px rgba(46, 43, 38, 0.15); }   /* white on blue 5.0:1 */
.sticker-lime { --sticker: var(--lime); --sticker-text: var(--brown); }   /* 5.4:1 */
.sticker-orange { --sticker: var(--orange); --sticker-text: var(--ink); }   /* 5.3:1 (brown would be 3.8:1) */
.sticker-green { --sticker: var(--green); --sticker-text: var(--ink); }   /* 5.1:1 (brown would be 3.6:1) */
.sticker-brown { --sticker: var(--brown); }   /* white 10.1:1 */

/* Less motion: no tilting or turning on hover, only the change of colour */
@media (prefers-reduced-motion: reduce) {
  .social-icons a:hover .social-icon, .social-list a:hover .social-icon { transform: none; }
}
/* High-contrast modes drop the painted shapes: give the labels a plain border instead */
@media (forced-colors: active) {
  .sticker { border: 1px solid CanvasText; }
}

/* ---------- Wave edge for photos (October 2026, chosen by Tine) ----------
   A playful edge that belongs to the river: the photo's edge follows the calm wave between the sections.
   In use under the top photo of each exchange page and each news post, and on one wide group photo on the About page (src/project.md).
   (Water level, ripples and riverbank were tried and left out.) It works on the {% photo %} output, which puts the class
   on <picture>: {% photo "slug", "alt", { class: "photo-wave-edge" } %}. The tide line is an empty pseudo-element:
   decoration only. The cut needs a mask (@supports); elsewhere the photo keeps its rounded corners. */
:root {
  --photo-edge: clamp(16px, 12px + 1.2vw, 28px);   /* depth of a wave edge: only the outer 16 to 28 px, so no face is cut */
  /* The wave of the section dividers (calmWave in eleventy.config.js, the same crests and heights) in a strip 28 high.
     A cut keeps the photo above the wave (bottom edge) or below it (top edge); a line is the same wave, 1.5 px thick. */
  --wave-cut-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C80,25 120,4 200,4 C304,4 356,22 460,22 C580,22 640,8 760,8 C892,8 958,18.5 1090,18.5 C1230,18.5 1300,11 1440,11 L1440,0 L0,0Z'/%3E%3C/svg%3E");
  --wave-cut-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0,3 C80,3 120,24 200,24 C304,24 356,6 460,6 C580,6 640,20 760,20 C892,20 958,9.5 1090,9.5 C1230,9.5 1300,17 1440,17 L1440,28 L0,28Z'/%3E%3C/svg%3E");
  --wave-line-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C80,25 120,4 200,4 C304,4 356,22 460,22 C580,22 640,8 760,8 C892,8 958,18.5 1090,18.5 C1230,18.5 1300,11 1440,11' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --wave-line-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0,3 C80,3 120,24 200,24 C304,24 356,6 460,6 C580,6 640,20 760,20 C892,20 958,9.5 1090,9.5 C1230,9.5 1300,17 1440,17' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* 1. Wave edge: the edge of the photo follows the calm wave between the sections, lively on the left and calm on the right.
   .photo-wave-edge (or -bottom) cuts the bottom, -top the top, -both both. Add .photo-wave-edge-tide for a thin line just
   outside the wave, like the high-water mark above the footer. On a narrow photo the wave is not squeezed:
   it keeps its proportions (40 times its depth) and the photo shows its livelier left part. */
.photo-wave-edge, .photo-wave-edge-bottom, .photo-wave-edge-top, .photo-wave-edge-both {
  --edge-size: max(100%, calc(var(--photo-edge) * 40)) var(--photo-edge);
  --tide-gap: 8px;
  position: relative;
}
.photo-wave-edge img, .photo-wave-edge-bottom img, .photo-wave-edge-top img, .photo-wave-edge-both img { width: 100%; border-radius: var(--r-md); }
/* Exchange heroes and news photos keep their own shape: the wave follows the photo instead of stretching it to the column width */
.page-hero-photo .photo-wave-edge img, .news-photo .photo-wave-edge img { width: auto; }

/* The cut needs a mask; a browser without masks shows the plain photo with its rounded corners */
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .photo-wave-edge-tide::before, .photo-wave-edge-tide::after { position: absolute; pointer-events: none; }

  /* 1. The square corners are only for the waved side; without masks the photo keeps all four rounded corners */
  .photo-wave-edge img, .photo-wave-edge-bottom img {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    -webkit-mask: var(--wave-cut-bottom) 0 100% / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
    mask: var(--wave-cut-bottom) 0 100% / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
  }
  .photo-wave-edge-top img {
    border-top-left-radius: 0; border-top-right-radius: 0;
    -webkit-mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
    mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
  }
  .photo-wave-edge-both img {
    border-radius: 0;
    -webkit-mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, var(--wave-cut-bottom) 0 100% / var(--edge-size) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--photo-edge) + 2px) no-repeat;
    mask: var(--wave-cut-top) 0 0 / var(--edge-size) no-repeat, var(--wave-cut-bottom) 0 100% / var(--edge-size) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--photo-edge) + 2px) no-repeat;
  }
  /* The tide line gets a strip of its own outside the photo, so it never touches the photo or the caption below.
     It follows the wave exactly, one strip further out; half transparent, like the line above the footer. */
  .photo-wave-edge.photo-wave-edge-tide, .photo-wave-edge-bottom.photo-wave-edge-tide { padding-bottom: var(--tide-gap); }
  .photo-wave-edge-top.photo-wave-edge-tide { padding-top: var(--tide-gap); }
  .photo-wave-edge-both.photo-wave-edge-tide { padding-top: var(--tide-gap); padding-bottom: var(--tide-gap); }
  .photo-wave-edge.photo-wave-edge-tide::after, .photo-wave-edge-bottom.photo-wave-edge-tide::after, .photo-wave-edge-both.photo-wave-edge-tide::after {
    content: ""; left: 0; right: 0; bottom: 0; height: var(--photo-edge); background: var(--water); opacity: 0.5;
    -webkit-mask: var(--wave-line-bottom) 0 0 / var(--edge-size) no-repeat; mask: var(--wave-line-bottom) 0 0 / var(--edge-size) no-repeat;
  }
  .photo-wave-edge-top.photo-wave-edge-tide::before, .photo-wave-edge-both.photo-wave-edge-tide::before {
    content: ""; left: 0; right: 0; top: 0; height: var(--photo-edge); background: var(--water); opacity: 0.5;
    -webkit-mask: var(--wave-line-top) 0 0 / var(--edge-size) no-repeat; mask: var(--wave-line-top) 0 0 / var(--edge-size) no-repeat;
  }

}

/* 2. The wave edges sway too (Tine, 5 October 2026: "everywhere there is such a wavy band ... the footer, and some places
   by a large photo"): the edges of the photos above, and the top of the join call at the bottom of a page. The wave is
   the same depth, but repeats every 40 times its depth (three crests), so the mask can slide along by one tile without a
   seam, to the right like the stream and the other waves, in the same 16.9 s. A wave at the top of a photo (and of the
   join call, which lies on a photo) goes 44% slower, 24.336 s (Tine, 5 October 2026: twice 20% slower); on a photo between two waves the top
   slides 25 tiles while the bottom slides 36, in 608.4 s, so both stay seamless. The tide line slides with its wave. Only the edge
   moves, the photo stays still; people who ask for less motion keep the calm wave above, lively left and calm right.
   A sliding mask is repainted while it moves (no compositor), so only these few edges do it, never a whole page. */
:root {
  --wave-sway-cut-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0.0,24.00 L15.0,23.82 L30.0,23.28 L45.0,22.40 L60.0,21.22 L75.0,19.78 L90.0,18.14 L105.0,16.35 L120.0,14.50 L135.0,12.65 L150.0,10.86 L165.0,9.22 L180.0,7.78 L195.0,6.60 L210.0,5.72 L225.0,5.18 L240.0,5.00 L255.0,5.18 L270.0,5.72 L285.0,6.60 L300.0,7.78 L315.0,9.22 L330.0,10.86 L345.0,12.65 L360.0,14.50 L375.0,16.35 L390.0,18.14 L405.0,19.78 L420.0,21.22 L435.0,22.40 L450.0,23.28 L465.0,23.82 L480.0,24.00 L495.0,23.82 L510.0,23.28 L525.0,22.40 L540.0,21.22 L555.0,19.78 L570.0,18.14 L585.0,16.35 L600.0,14.50 L615.0,12.65 L630.0,10.86 L645.0,9.22 L660.0,7.78 L675.0,6.60 L690.0,5.72 L705.0,5.18 L720.0,5.00 L735.0,5.18 L750.0,5.72 L765.0,6.60 L780.0,7.78 L795.0,9.22 L810.0,10.86 L825.0,12.65 L840.0,14.50 L855.0,16.35 L870.0,18.14 L885.0,19.78 L900.0,21.22 L915.0,22.40 L930.0,23.28 L945.0,23.82 L960.0,24.00 L975.0,23.82 L990.0,23.28 L1005.0,22.40 L1020.0,21.22 L1035.0,19.78 L1050.0,18.14 L1065.0,16.35 L1080.0,14.50 L1095.0,12.65 L1110.0,10.86 L1125.0,9.22 L1140.0,7.78 L1155.0,6.60 L1170.0,5.72 L1185.0,5.18 L1200.0,5.00 L1215.0,5.18 L1230.0,5.72 L1245.0,6.60 L1260.0,7.78 L1275.0,9.22 L1290.0,10.86 L1305.0,12.65 L1320.0,14.50 L1335.0,16.35 L1350.0,18.14 L1365.0,19.78 L1380.0,21.22 L1395.0,22.40 L1410.0,23.28 L1425.0,23.82 L1440.0,24.00 L1440,0 L0,0Z'/%3E%3C/svg%3E");
  --wave-sway-cut-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0.0,4.00 L15.0,4.18 L30.0,4.72 L45.0,5.60 L60.0,6.78 L75.0,8.22 L90.0,9.86 L105.0,11.65 L120.0,13.50 L135.0,15.35 L150.0,17.14 L165.0,18.78 L180.0,20.22 L195.0,21.40 L210.0,22.28 L225.0,22.82 L240.0,23.00 L255.0,22.82 L270.0,22.28 L285.0,21.40 L300.0,20.22 L315.0,18.78 L330.0,17.14 L345.0,15.35 L360.0,13.50 L375.0,11.65 L390.0,9.86 L405.0,8.22 L420.0,6.78 L435.0,5.60 L450.0,4.72 L465.0,4.18 L480.0,4.00 L495.0,4.18 L510.0,4.72 L525.0,5.60 L540.0,6.78 L555.0,8.22 L570.0,9.86 L585.0,11.65 L600.0,13.50 L615.0,15.35 L630.0,17.14 L645.0,18.78 L660.0,20.22 L675.0,21.40 L690.0,22.28 L705.0,22.82 L720.0,23.00 L735.0,22.82 L750.0,22.28 L765.0,21.40 L780.0,20.22 L795.0,18.78 L810.0,17.14 L825.0,15.35 L840.0,13.50 L855.0,11.65 L870.0,9.86 L885.0,8.22 L900.0,6.78 L915.0,5.60 L930.0,4.72 L945.0,4.18 L960.0,4.00 L975.0,4.18 L990.0,4.72 L1005.0,5.60 L1020.0,6.78 L1035.0,8.22 L1050.0,9.86 L1065.0,11.65 L1080.0,13.50 L1095.0,15.35 L1110.0,17.14 L1125.0,18.78 L1140.0,20.22 L1155.0,21.40 L1170.0,22.28 L1185.0,22.82 L1200.0,23.00 L1215.0,22.82 L1230.0,22.28 L1245.0,21.40 L1260.0,20.22 L1275.0,18.78 L1290.0,17.14 L1305.0,15.35 L1320.0,13.50 L1335.0,11.65 L1350.0,9.86 L1365.0,8.22 L1380.0,6.78 L1395.0,5.60 L1410.0,4.72 L1425.0,4.18 L1440.0,4.00 L1440,28 L0,28Z'/%3E%3C/svg%3E");
  --wave-sway-line-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0.0,24.00 L15.0,23.82 L30.0,23.28 L45.0,22.40 L60.0,21.22 L75.0,19.78 L90.0,18.14 L105.0,16.35 L120.0,14.50 L135.0,12.65 L150.0,10.86 L165.0,9.22 L180.0,7.78 L195.0,6.60 L210.0,5.72 L225.0,5.18 L240.0,5.00 L255.0,5.18 L270.0,5.72 L285.0,6.60 L300.0,7.78 L315.0,9.22 L330.0,10.86 L345.0,12.65 L360.0,14.50 L375.0,16.35 L390.0,18.14 L405.0,19.78 L420.0,21.22 L435.0,22.40 L450.0,23.28 L465.0,23.82 L480.0,24.00 L495.0,23.82 L510.0,23.28 L525.0,22.40 L540.0,21.22 L555.0,19.78 L570.0,18.14 L585.0,16.35 L600.0,14.50 L615.0,12.65 L630.0,10.86 L645.0,9.22 L660.0,7.78 L675.0,6.60 L690.0,5.72 L705.0,5.18 L720.0,5.00 L735.0,5.18 L750.0,5.72 L765.0,6.60 L780.0,7.78 L795.0,9.22 L810.0,10.86 L825.0,12.65 L840.0,14.50 L855.0,16.35 L870.0,18.14 L885.0,19.78 L900.0,21.22 L915.0,22.40 L930.0,23.28 L945.0,23.82 L960.0,24.00 L975.0,23.82 L990.0,23.28 L1005.0,22.40 L1020.0,21.22 L1035.0,19.78 L1050.0,18.14 L1065.0,16.35 L1080.0,14.50 L1095.0,12.65 L1110.0,10.86 L1125.0,9.22 L1140.0,7.78 L1155.0,6.60 L1170.0,5.72 L1185.0,5.18 L1200.0,5.00 L1215.0,5.18 L1230.0,5.72 L1245.0,6.60 L1260.0,7.78 L1275.0,9.22 L1290.0,10.86 L1305.0,12.65 L1320.0,14.50 L1335.0,16.35 L1350.0,18.14 L1365.0,19.78 L1380.0,21.22 L1395.0,22.40 L1410.0,23.28 L1425.0,23.82 L1440.0,24.00' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --wave-sway-line-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0.0,4.00 L15.0,4.18 L30.0,4.72 L45.0,5.60 L60.0,6.78 L75.0,8.22 L90.0,9.86 L105.0,11.65 L120.0,13.50 L135.0,15.35 L150.0,17.14 L165.0,18.78 L180.0,20.22 L195.0,21.40 L210.0,22.28 L225.0,22.82 L240.0,23.00 L255.0,22.82 L270.0,22.28 L285.0,21.40 L300.0,20.22 L315.0,18.78 L330.0,17.14 L345.0,15.35 L360.0,13.50 L375.0,11.65 L390.0,9.86 L405.0,8.22 L420.0,6.78 L435.0,5.60 L450.0,4.72 L465.0,4.18 L480.0,4.00 L495.0,4.18 L510.0,4.72 L525.0,5.60 L540.0,6.78 L555.0,8.22 L570.0,9.86 L585.0,11.65 L600.0,13.50 L615.0,15.35 L630.0,17.14 L645.0,18.78 L660.0,20.22 L675.0,21.40 L690.0,22.28 L705.0,22.82 L720.0,23.00 L735.0,22.82 L750.0,22.28 L765.0,21.40 L780.0,20.22 L795.0,18.78 L810.0,17.14 L825.0,15.35 L840.0,13.50 L855.0,11.65 L870.0,9.86 L885.0,8.22 L900.0,6.78 L915.0,5.60 L930.0,4.72 L945.0,4.18 L960.0,4.00 L975.0,4.18 L990.0,4.72 L1005.0,5.60 L1020.0,6.78 L1035.0,8.22 L1050.0,9.86 L1065.0,11.65 L1080.0,13.50 L1095.0,15.35 L1110.0,17.14 L1125.0,18.78 L1140.0,20.22 L1155.0,21.40 L1170.0,22.28 L1185.0,22.82 L1200.0,23.00 L1215.0,22.82 L1230.0,22.28 L1245.0,21.40 L1260.0,20.22 L1275.0,18.78 L1290.0,17.14 L1305.0,15.35 L1320.0,13.50 L1335.0,11.65 L1350.0,9.86 L1365.0,8.22 L1380.0,6.78 L1395.0,5.60 L1410.0,4.72 L1425.0,4.18 L1440.0,4.00' fill='none' stroke='%23000' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
@supports (mask-image: none) or (-webkit-mask-image: none) {
  @media (prefers-reduced-motion: no-preference) {
    .photo-wave-edge, .photo-wave-edge-bottom, .photo-wave-edge-top, .photo-wave-edge-both, .exchange-cta { --edge-tile: calc(var(--photo-edge) * 40); }
    .photo-wave-edge img, .photo-wave-edge-bottom img {
      -webkit-mask: var(--wave-sway-cut-bottom) 0 100% / var(--edge-tile) var(--photo-edge) repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
      mask: var(--wave-sway-cut-bottom) 0 100% / var(--edge-tile) var(--photo-edge) repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
      animation: edge-drift-bottom 16.9s linear infinite;
    }
    .photo-wave-edge-top img, .exchange-cta {
      -webkit-mask: var(--wave-sway-cut-top) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
      mask: var(--wave-sway-cut-top) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-edge) + 1px) no-repeat;
      animation: edge-drift-top 24.336s linear infinite;
    }
    .photo-wave-edge-both img {
      -webkit-mask: var(--wave-sway-cut-top) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x, var(--wave-sway-cut-bottom) 0 100% / var(--edge-tile) var(--photo-edge) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--photo-edge) + 2px) no-repeat;
      mask: var(--wave-sway-cut-top) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x, var(--wave-sway-cut-bottom) 0 100% / var(--edge-tile) var(--photo-edge) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--photo-edge) + 2px) no-repeat;
      animation: edge-drift-both 608.4s linear infinite;
    }
    .photo-wave-edge.photo-wave-edge-tide::after, .photo-wave-edge-bottom.photo-wave-edge-tide::after, .photo-wave-edge-both.photo-wave-edge-tide::after {
      -webkit-mask: var(--wave-sway-line-bottom) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x; mask: var(--wave-sway-line-bottom) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x;
      animation: edge-drift-line 16.9s linear infinite;
    }
    .photo-wave-edge-top.photo-wave-edge-tide::before, .photo-wave-edge-both.photo-wave-edge-tide::before {
      -webkit-mask: var(--wave-sway-line-top) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x; mask: var(--wave-sway-line-top) 0 0 / var(--edge-tile) var(--photo-edge) repeat-x;
      animation: edge-drift-line 24.336s linear infinite;
    }
  }
}
@keyframes edge-drift-bottom { from { -webkit-mask-position: 0 100%, 0 0; mask-position: 0 100%, 0 0; } to { -webkit-mask-position: var(--edge-tile) 100%, 0 0; mask-position: var(--edge-tile) 100%, 0 0; } }
@keyframes edge-drift-top { from { -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%; } to { -webkit-mask-position: var(--edge-tile) 0, 0 100%; mask-position: var(--edge-tile) 0, 0 100%; } }
@keyframes edge-drift-both { from { -webkit-mask-position: 0 0, 0 100%, center; mask-position: 0 0, 0 100%, center; } to { -webkit-mask-position: calc(var(--edge-tile) * 25) 0, calc(var(--edge-tile) * 36) 100%, center; mask-position: calc(var(--edge-tile) * 25) 0, calc(var(--edge-tile) * 36) 100%, center; } }
@keyframes edge-drift-line { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: var(--edge-tile) 0; mask-position: var(--edge-tile) 0; } }

/* ---------- Made by the members (chosen by Tine, 1 October 2026) ---------- */
/* The logo the members chose in 2019, as a small badge under "What is the SYP?" */
/* The logo the members chose, without a caption, large enough to stand on its own (Tine, October 2026) */
.logo-badge { margin: 32px 0 0; }
.logo-badge img { display: block; width: 150px; height: auto; }
@media (min-width: 900px) { .logo-badge img { width: 220px; } }

/* A strip of three things the members made themselves, each with a photo */
.home-made { padding-bottom: var(--section-sm); }
.made-grid { display: grid; gap: 24px; }
@media (min-width: 800px) { .made-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.made-card { display: flex; flex-direction: column; gap: 14px; }
.made-card picture, .made-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.made-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.made-body h3 { font-size: var(--fs-h3); }
.made-body p { margin: 0; line-height: 1.55; }
.made-body .link-arrow + .link-arrow { margin-top: 4px; }   /* two links apart enough to tap the right one */
/* The podcast card (Tine, file 62, option A, October 2026): a label and a play button on the photo, a button per episode.
   The label is the site's own blue sticker (white on blue 5.0:1), with the headphones icon. */
.made-visual { position: relative; }
.made-sticker { display: inline-flex; align-items: center; gap: 6px; }
.made-sticker .icon { width: 16px; height: 16px; stroke-width: 2; }
/* The whole photo is the link to episode 1, so the play button in its middle is never a button that does nothing.
   A white disc with a filled blue triangle (5.0:1); the shadow keeps the disc apart from the white T-shirts behind it. */
.made-play { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--water-ink); }
.made-play-disc { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--white); box-shadow: 0 4px 18px rgba(46, 43, 38, 0.3); transition: transform 0.2s; }
.made-play-disc .icon { width: 26px; height: 26px; fill: currentColor; stroke-width: 1.5; transform: translateX(8%); }   /* the triangle's weight sits left of its box: nudge it to the optical centre */
.made-play:hover, .made-play:focus-visible { color: var(--deep-hover); }   /* 8.6:1 */
.made-play:hover .made-play-disc, .made-play:focus-visible .made-play-disc { transform: scale(1.08); }
/* The episode buttons: outlined in GoodPlanet blue (5.0:1 on white), smaller than the main buttons but 44 px high to tap.
   Two classes, so they win over .btn and its water band further down. */
.made-episodes { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 8px; }
.made-episodes .made-episode { --btn-water: rgba(19, 118, 167, 0.12); min-height: 44px; padding: 10px 20px 10px 16px; font-size: var(--fs-small); background: var(--white); border-color: var(--water-ink); color: var(--water-ink); }
.made-episodes .made-episode:hover, .made-episodes .made-episode:focus-visible { background: var(--foam); border-color: var(--deep-hover); color: var(--deep-hover); }   /* 7.9:1 */
.made-episode .icon { width: 16px; height: 16px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .made-play:hover .made-play-disc, .made-play:focus-visible .made-play-disc { transform: none; } }
@media (forced-colors: active) { .made-play-disc { border: 2px solid LinkText; } }   /* high-contrast modes drop the white disc: keep a ring */

/* A reason with a photo (on Join): the card spans both columns, the photo beside the text from 700 px */
.reason.has-photo { display: grid; gap: 16px; align-items: start; }
@media (max-width: 699px) { .reason.has-photo { row-gap: 0; } .reason.has-photo .reason-photo { margin-top: 20px; } }   /* the same spacing as the cards without a photo */
.reason-photo picture, .reason-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
/* From 700 px the card spans the row: the words on the left, centred in height, and the photo large on the right, as wide
   as the words (Elke's feedback, 5 October 2026: the photo was too small at 300 px). Square, so the card stays as tall as
   two rows of cards at most; the crop only takes sky and water, never people (Have a good time: the jetty in Zeeland). */
@media (min-width: 700px) {
  .reasons .reason.has-photo { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; gap: 0 clamp(32px, 4vw, 56px); }
  .reason.has-photo > .reason-head { grid-row: 2; }
  .reason.has-photo > h3 { grid-row: 3; }
  .reason.has-photo > p { grid-row: 4; }
  .reason.has-photo .reason-photo { grid-column: 2; grid-row: 1 / -1; }
  .reason.has-photo .reason-photo img { width: 100%; max-height: 560px; aspect-ratio: 1; object-fit: cover; object-position: 50% 55%; }
}

/* ---------- Buttons in GoodPlanet colours, with a ripple (October 2026, chosen by Tine) ----------
   The main button stays GoodPlanet blue; the second button is lime with dark text. Pointing at a button sends a faint wave
   through it. A wavy lower edge was tried and left out. */
/* Other GoodPlanet colours, for a page that needs one. Light colours carry dark text; pink keeps white text at 19 px bold,
   large enough for its 4.3:1. Ratios: ink on lime 7.6, orange 5.3, green 5.1; white on pink 4.3 (large text), hover 6.0. */
.btn-tint-pink { background: var(--pink); border-color: var(--pink); color: var(--white); font-size: 1.1875rem; }
.btn-tint-pink:hover { background: #BD2543; border-color: #BD2543; color: var(--white); }
.btn-tint-lime, .btn-secondary { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn-tint-lime:hover, .btn-secondary:hover { background: #C7DA5B; border-color: #C7DA5B; color: var(--ink); }
.btn-tint-orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-tint-orange:hover { background: #F0AA56; border-color: #F0AA56; color: var(--ink); }
.btn-tint-green { background: var(--green); border-color: var(--green); color: var(--ink); }
.btn-tint-green:hover { background: #69C7AD; border-color: #69C7AD; color: var(--ink); }

/* A thin layer of water (chosen by Tine): while you point at a button (or tab to it), a soft band with one long, slow wave
   on top appears in its lower part and drifts a little. At rest the button is plain. The band is a light tint of the
   button's own colours, so the text stays as readable as before. Still for people who ask for less motion. */
.btn { position: relative; overflow: hidden; isolation: isolate; --btn-water: rgba(255, 255, 255, 0.16); }
.btn-secondary, .btn-tint-lime, .btn-tint-orange, .btn-tint-green { --btn-water: rgba(46, 43, 38, 0.10); }
.on-dark .btn-accent, .bg-deep .btn-accent, .card-dark .btn-accent { --btn-water: rgba(19, 118, 167, 0.12); }
.btn::after {
  content: ""; position: absolute; z-index: -1; left: -160px; right: -160px; bottom: 0; height: 38%; background: var(--btn-water);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C12.5,2 37.5,2 50,8 C62.5,14 87.5,14 100,8 V40 H0Z'/%3E%3C/svg%3E") 0 0 / 160px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0,8 C12.5,2 37.5,2 50,8 C62.5,14 87.5,14 100,8 V40 H0Z'/%3E%3C/svg%3E") 0 0 / 160px 100% repeat-x;
  transition: opacity 0.4s, transform 2.4s ease-out;
}
.btn:hover::after, .btn:focus-visible::after { opacity: 1; transform: translate(80px, 0); }
.btn.is-waiting::after { display: none; }
@media (prefers-reduced-motion: reduce) { .btn::after { transition: opacity 0.3s; } .btn:hover::after, .btn:focus-visible::after { transform: none; } }

/* One wide group photo between two waves on a Foam band, wider than the text column (About page, src/project.md) */
.prose .wave-band { width: min(calc(100vw - 2 * var(--gutter)), var(--content)); margin: 40px 0 48px; padding: 24px clamp(16px, 3vw, 40px) 20px; background: var(--foam); border-radius: var(--r-lg); }
.prose .wave-band img { border-radius: 0; }
.prose .wave-band figcaption { margin-top: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--grey); }

/* ---------- The Scheldt page (/the-scheldt/) ---------- */
/* Down the river: the map stays in view on wide screens while the seven places scroll past */
.journey-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.journey-river { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .journey-river { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .journey-river-map { position: sticky; top: 32px; }
}
.journey-map { display: block; width: 100%; height: auto; max-width: 460px; max-height: 88vh; margin: 0 auto; overflow: visible; color: var(--water); font-family: var(--font-body); }
.journey-map-dot { fill: var(--deep); stroke: var(--white); stroke-width: 0.6px; }
.journey-map-number { fill: var(--white); font-size: 3.3px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.journey-map-name { fill: var(--deep); font-size: 3.6px; font-weight: 700; dominant-baseline: central; }
/* Map labels a little larger on a phone, where the map is narrow (Elke, 5 October 2026: no tiny text): the names from 12 to 15 px, the countries and numbers from 10 to 13 px */
@media (max-width: 599px) { .journey-map-name { font-size: 4.4px; } .journey-map-country { font-size: 3.9px; } .journey-map-number { font-size: 3.6px; } }
.journey-map-border { fill: none; stroke: var(--ink); stroke-opacity: 0.5; stroke-width: 0.45px; stroke-dasharray: 1.1 0.9; }
.journey-map-country { fill: var(--grey); font-size: 3.4px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.journey-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.journey-stop { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; }
.journey-stop-number { width: 40px; height: 40px; border-radius: 50%; background: var(--deep); color: var(--white); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.journey-stop .label { display: block; margin-bottom: 2px; }
.journey-stop h3 { margin: 0 0 6px; }
.journey-stop p { margin: 0; font-size: var(--fs-body); line-height: 1.55; }
.journey-stop .journey-stop-we { margin-top: 10px; font-size: var(--fs-small); }
/* 'We were here': the site's own lime sticker, standing in the line instead of on a photo */
.journey-stop-we .sticker { flex: none; box-shadow: none; }
.journey-stop .journey-stop-we { display: flex; align-items: baseline; gap: 8px; }
.journey-stop-we a { text-wrap: pretty; }
.journey-sources { padding-top: 32px; padding-bottom: 8px; }
.journey-sources + .exchange-cta { margin-top: 32px; }
.journey-sources p { margin: 0; max-width: 72ch; font-size: var(--fs-small); color: var(--grey); }
.journey-sources a { color: inherit; }

/* ---------- One river, three countries (About page): the Scheldt with a soft band per country ---------- */
/* {% scheldtCountries countriesMap %}, drawn in lib/scheldt-map.js. A soft colour band per country (option A; Tine, file 63, October 2026).
   The bands are light tints of GoodPlanet's accents, so the text on them stays readable:
   pink 12% #FCE6EA, lime 18% #F1F5D5, orange 14% #FCEEDD, green 14% #E1F4EF, no tone: blue 8% #EDF7FB (Foam).
   They are written out as hex (each the tone mixed with white, in sRGB), not as color-mix(): a browser without
   color-mix (Safari before 16.2, Chrome before 111, Firefox before 113) drops a fill with var() in it only when it
   draws, and then paints the band black, with the country names unreadable on it (review of file 63). A tint changes
   only with its tone, so if --pink, --lime, --orange or --green ever change, mix these again.
   Ink on a band 11.8 to 12.9:1, Grey 5.3 to 5.8:1. Blue (--deep) would fall to 4.2:1 on pink, so the place names
   are in --deep-hover: 7.2 to 7.9:1. The dots stay --deep (4.2:1 or more; 3:1 is enough for a shape).
   The river keeps the Water blue of the demo Tine approved: 2.8 to 3.0:1 on the bands (pink 2.8, orange 2.9,
   lime 3.0; 3.3:1 on white), just under 3:1. Accepted as the approved look, since the paragraph beside the map and
   its aria-label say the same; a darker river (color: var(--water-ink), 4.2:1 or more) only with Tine's OK.
   Font sizes are in map units and must match COUNTRY_SIZE and RIVER_SIZE in lib/scheldt-map.js: at 335 px wide
   (a 375 px phone) the small text is 12 px, the country names 17 px; at 420 px 15 and 22 px. */
.countries-map { width: 100%; max-width: 360px; }
@media (min-width: 600px) { .countries-map { max-width: 420px; } }
.prose .countries-map { margin: 32px 0; }   /* between two paragraphs of a Markdown page, room above and below */
.countries-map-svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--water); font-family: var(--font-body); }
.countries-map-country { --tone: var(--water); --band: var(--foam); }
.countries-map-tone-pink { --tone: var(--pink); --band: #FCE6EA; }       /* pink 12% on white */
.countries-map-tone-lime { --tone: var(--lime); --band: #F1F5D5; }       /* lime 18% */
.countries-map-tone-orange { --tone: var(--orange); --band: #FCEEDD; }   /* orange 14% */
.countries-map-tone-green { --tone: var(--green); --band: #E1F4EF; }     /* green 14% */
.countries-map-band { fill: var(--band); }
.countries-map-bar { fill: var(--tone); }
.countries-map-border { fill: none; stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 0.45px; stroke-dasharray: 1.2 1; }
.countries-map-country-name { fill: var(--ink); font-size: 7.4px; font-weight: 700; }
.countries-map-river-name { fill: var(--grey); font-size: 5.6px; }
.countries-map-dot { fill: var(--deep); stroke: var(--white); stroke-width: 0.5px; }
.countries-map-place-name { fill: var(--deep-hover); font-size: 5.6px; font-weight: 700; dominant-baseline: central; }
.countries-map-sea { fill: var(--grey); font-size: 5.6px; font-style: italic; }
@media (max-width: 599px) { .countries-map-place-name { font-size: 6.2px; } }   /* the places on the river from 13 to 15 px on a phone; the grey river names have no room to grow beside the map */

/* ---------- The photo ribbon (About, "Come for the river, stay for the friends"; Tine, file 63, option A, October 2026) ----------
   blocks/photo-ribbon.njk and js/ribbon.js. After Adam's feedback: one strip of photos that slides slowly and endlessly to
   the left, edge to edge of the screen, with the year as a sticker on each photo and "Place, year" under it. It replaced
   "Then and now" and the photos of "Earlier rounds".
   Every photo keeps its own shape at one height: 180 px on a phone, growing to 230 px from 900 px wide (--r is its shape,
   written by the block, so the strip has its full width before a single photo has loaded).
   Out of the text column the same way as the photo beside "What is the SYP?" on the homepage: back by the space between
   the column and the edge of the screen (the gutter, or more on a wide screen), then as wide as the screen. The body
   clips the rest, and the strip clips its own photos, so the page never scrolls sideways.
   Without JavaScript, and for people who ask for less motion, it is a strip to swipe, like a gallery on a phone (Tine,
   file 55): the first photo starts in line with the text, the next ones peek in from the right. */
.ribbon {
  --ribbon-h: clamp(180px, 140px + 10vw, 230px);
  --ribbon-gap: clamp(14px, 10px + 1vw, 20px);
  --ribbon-inset: max(var(--gutter), (100vw - var(--content)) / 2);
  position: relative; width: 100vw; margin: 32px 0 64px calc(-1 * var(--ribbon-inset));
}
/* The room above the photos is for the stickers, which hang 8 px over the corner */
.ribbon-window { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 12px var(--ribbon-inset) 4px; scroll-padding-inline: var(--ribbon-inset); }
@media (hover: none), (pointer: coarse) {
  .ribbon-window { scrollbar-width: none; }
  .ribbon-window::-webkit-scrollbar { display: none; }
}
.ribbon-track { position: relative; display: flex; width: max-content; }
/* Two classes, to win over the lists and list items of a Markdown page (.prose ul, .prose li + li) */
.ribbon .ribbon-list { display: flex; margin: 0; padding: 0; list-style: none; }
/* The space comes after every photo, the last one too: then one set of photos is exactly as wide as its copy, and the
   strip runs on without a seam (js/ribbon.js) */
.ribbon .ribbon-item { flex: none; width: calc(var(--ribbon-h) * var(--r, 1.5)); margin: 0 var(--ribbon-gap) 0 0; scroll-snap-align: start; }
.ribbon-figure { margin: 0; }
/* position: relative keeps the hidden "(open larger)" inside the photo, as in the gallery */
.ribbon .ribbon-link { position: relative; display: block; height: var(--ribbon-h); border-radius: var(--r-md); overflow: hidden; background: var(--foam); cursor: zoom-in; }
.ribbon-link picture, .ribbon-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ribbon .ribbon-link:focus-visible { outline: 3px solid var(--water-ink); outline-offset: 3px; }
.ribbon-caption { margin-top: 8px; font-size: var(--fs-label); line-height: 1.4; color: var(--grey); }   /* 6.3:1 */

/* The Pause/Play button, under the strip on the right, in line with the right edge of the page. Round and 44 px to tap,
   like the edit pencil in the footer; outlined in GoodPlanet blue like the episode buttons on the homepage (5.0:1). Only shown while the strip can move,
   in the room below the strip (its 64 px margin), so nothing under it moves when the script shows it. */
.ribbon-controls { position: absolute; top: 100%; right: 0; display: flex; padding: 6px var(--ribbon-inset) 0 0; }
.ribbon-controls[hidden] { display: none; }
.ribbon-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--water-ink); border-radius: 50%; background: var(--white); color: var(--water-ink); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.ribbon-toggle:hover, .ribbon-toggle:focus-visible { background: var(--foam); border-color: var(--deep-hover); color: var(--deep-hover); }   /* 7.9:1 */
.ribbon-toggle:focus-visible { border-radius: 50%; }
.ribbon-toggle .icon { width: 18px; height: 18px; fill: currentColor; stroke-width: 1.5; }
.ribbon-toggle .ribbon-icon-play, .ribbon-toggle.is-paused .ribbon-icon-pause { display: none; }
.ribbon-toggle.is-paused .ribbon-icon-play { display: block; transform: translateX(8%); }   /* the triangle's weight sits left of its box */

/* Sliding (js/ribbon.js adds .is-moving, never when less motion is asked for). The strip holds the photos and one copy
   (more only when a set is narrower than the screen), and slides by one set, about 30 px a second (the script sets
   the time from the width). It rests while the mouse is on it, and the script lets it rest (.is-paused) for the button,
   the Tab key, an open photo and while it is off screen. With the Tab key in it, it follows the focus (.is-browsing). */
@media (prefers-reduced-motion: no-preference) {
  .ribbon.is-moving .ribbon-window { overflow: hidden; overflow: clip; padding-inline: 0; padding-bottom: calc(4px + var(--ribbon-bar, 0px)); scroll-snap-type: none; }
  .ribbon.is-moving .ribbon-track { animation: ribbon-slide var(--ribbon-duration, 115s) linear var(--ribbon-delay, 0s) infinite; }
  .ribbon.is-moving.is-paused .ribbon-track { animation-play-state: paused; }
  .ribbon.is-moving.is-browsing .ribbon-track { animation: none; transition: transform 0.4s ease-out; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .ribbon.is-moving .ribbon-window:hover .ribbon-track { animation-play-state: paused; }
}
@keyframes ribbon-slide { to { transform: translateX(calc(-100% / var(--ribbon-copies, 2))); } }
@media (prefers-reduced-motion: reduce) { .ribbon-controls { display: none; } }
/* With motion, the round button hangs in the room under the strip: give the next title more room than its own 64 px
   (the button takes 50 of them), so the button belongs to the photos and the title to its text. In CSS, not in the
   script, so nothing moves when the strip starts. */
@media (prefers-reduced-motion: no-preference) { .ribbon { margin-bottom: 96px; } }
@media (forced-colors: active) { .ribbon-toggle { border-color: ButtonText; } }