/* trueroot.ai: het thema, bovenop Pico classless (pico.classless.min.css).
   Uitgangspunt is rust: één boodschap per scherm, één smalle kolom, veel lucht, weinig kleur.
   De eerste section van elke pagina is een schemerlucht met sterren en bergen; daaronder staat
   de inhoud op een zachte lichte ondergrond, omdat lange tekst en grafieken daar beter lezen.
   De HTML blijft kaal: de stijl hangt aan elementen (section, article, hgroup, a[role=button]).
   Klassen alleen waar HTML niets te bieden heeft: tiles, split, kicker, note, scroll, stat. */

/* Fraunces (koppen) en Quicksand (tekst), zelf gehost in web/fonts/: latin en latin-ext uit Google Fonts
   (Fraunces met opsz en wght variabel, SOFT 100 en WONK 0 vast). Geen verzoek naar Google bij een bezoek. */
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 500; font-display: swap;
	src: url(/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 500; font-display: swap;
	src: url(/fonts/fraunces-italic-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 500; font-display: swap;
	src: url(/fonts/fraunces-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 500; font-display: swap;
	src: url(/fonts/fraunces-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400 600; font-display: swap;
	src: url(/fonts/quicksand-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400 600; font-display: swap;
	src: url(/fonts/quicksand-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


:root,
:root[data-theme="light"] {
	/* kleuren */
	--tr-ink: #2b2e40;
	--tr-ink-soft: #62657c;
	--tr-mist: #f6f5f2;
	--tr-white: #fdfcfa;
	--tr-night: #2a2d42;
	--tr-sky-text: #eef0f7;
	--tr-sky-soft: #c8cbdd;
	--tr-glow: #f4cdae;
	--tr-accent: #4f578f;
	--tr-line: #2b2e401f;

	/* Pico */
	--pico-font-family-sans-serif: "Quicksand", system-ui, sans-serif;
	--pico-font-family: var(--pico-font-family-sans-serif);
	--pico-font-weight: 500;
	--pico-line-height: 1.7;
	--pico-border-radius: 1rem;
	--pico-background-color: var(--tr-mist);
	--pico-color: var(--tr-ink);
	--pico-muted-color: var(--tr-ink-soft);
	--pico-muted-border-color: var(--tr-line);
	--pico-primary: var(--tr-accent);
	--pico-primary-background: var(--tr-night);
	--pico-primary-border: var(--tr-night);
	--pico-primary-underline: #4f578f66;
	--pico-primary-hover: var(--tr-night);
	--pico-primary-hover-background: #3d4160;
	--pico-primary-hover-border: #3d4160;
	--pico-primary-focus: #4f578f40;
	--pico-primary-inverse: var(--tr-sky-text);
	--pico-h1-color: var(--tr-ink);
	--pico-h2-color: var(--tr-ink);
	--pico-h3-color: var(--tr-ink);
	--pico-h4-color: var(--tr-ink);
	--pico-card-background-color: var(--tr-white);
	--pico-card-border-color: var(--tr-line);
	--pico-card-box-shadow: none;
	--pico-form-element-background-color: var(--tr-white);
	--pico-form-element-border-color: var(--tr-line);
	--pico-form-element-color: var(--tr-ink);
	--pico-form-element-placeholder-color: var(--tr-ink-soft);
	--pico-mark-background-color: transparent;
	--pico-mark-color: var(--tr-accent);
	--pico-typography-spacing-top: 0;
}

/* koppen: een zachte schreef */
h1, h2, h3, h4 {
	--pico-typography-spacing-top: 0;
	font-family: "Fraunces", Georgia, serif;
	font-variation-settings: "SOFT" 100, "WONK" 0;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.18;
	text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.4rem; }
h1 mark, h2 mark { padding: 0; font-style: italic; }

/* label boven een kop: rustig, in spatiëring */
hgroup { margin-bottom: 1.75rem; --pico-typography-spacing-top: 0; }
hgroup > p:first-child, .kicker {
	margin: 0 0 .9rem;
	color: var(--tr-ink-soft);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}
hgroup > h1:last-child, hgroup > h1:not(:first-child):last-child { margin: 0; color: inherit; font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 400; }
hgroup > h2:last-child, hgroup > h2:not(:first-child):last-child { margin: 0; color: var(--tr-ink); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; }
hgroup > h3:last-child, hgroup > h3:not(:first-child):last-child { margin: 0; color: var(--tr-ink); font-size: 1.4rem; font-weight: 400; }
article hgroup > h2:last-child, article hgroup > h2:not(:first-child):last-child, article > h2 { font-size: 1.4rem; }

/* de kop van de site ligt over de lucht heen */
body > header { position: absolute; inset: 0 0 auto; z-index: 1; width: 100%; max-width: none; margin: 0; padding: 1rem clamp(1.25rem, 4vw, 3rem); }
body > header nav { flex-wrap: wrap; }
body > header a { color: var(--tr-sky-text); text-decoration: none; }
body > header a:hover { color: #fff; text-decoration: underline; }
body > header nav ul:first-child a { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 1.45rem; }
body > header nav ul:first-child span { color: var(--tr-glow); }
body > header nav ul:last-child { flex-wrap: wrap; }

/* één kolom met veel lucht; de hoogte van de blokken komt uit de ruimte, niet uit kaders */
body > main { width: 100%; max-width: none; margin: 0; padding: 0; }
main > section {
	margin: 0;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	padding-inline: max(1.25rem, calc((100% - 42rem) / 2));
	border-top: 1px solid var(--tr-line);
}
/* wat naast elkaar of breed moet, krijgt meer ruimte */
main > section:has(.tiles, .scroll, .sg-wide) { padding-inline: max(1.25rem, calc((100% - 66rem) / 2)); }

/* de lucht: sterren, gloed aan de horizon, bergen; eigen tekening, geen foto. De bergen zijn drie
   ruggen: een paar grote toppen voor de vorm, midpoint displacement (vaste seed) voor de
   grillige rand, de verste het lichtst, zoals nevel. */
main > section:first-of-type {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 62svh;
	padding-block: clamp(7rem, 14vw, 10rem) clamp(9rem, 15vw, 12rem);
	border-top: 0;
	background-color: var(--tr-night);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 260' preserveAspectRatio='none'%3E%3Cpath fill='%234c4b69' fill-opacity='.8' d='M0 260 L0.0 150.6 L6.2 147.7 L12.5 145.3 L18.8 142.2 L25.0 139.4 L31.2 136.3 L37.5 134.0 L43.8 130.7 L50.0 128.2 L56.2 125.2 L62.5 122.8 L68.8 119.8 L75.0 117.5 L81.2 114.8 L87.5 112.3 L93.8 108.6 L100.0 105.9 L106.2 103.2 L112.5 99.9 L118.8 96.2 L125.0 92.2 L131.2 89.0 L137.5 86.4 L143.8 83.3 L150.0 80.6 L156.2 76.8 L162.5 73.3 L168.8 69.2 L175.0 65.4 L181.2 62.6 L187.5 65.5 L193.8 69.1 L200.0 72.0 L206.2 75.5 L212.5 77.9 L218.8 80.5 L225.0 82.5 L231.2 84.6 L237.5 86.5 L243.8 87.4 L250.0 89.0 L256.2 89.6 L262.5 90.8 L268.8 90.5 L275.0 90.3 L281.2 90.1 L287.5 90.2 L293.8 89.8 L300.0 88.6 L306.2 88.3 L312.5 88.5 L318.8 88.2 L325.0 88.7 L331.2 89.0 L337.5 88.2 L343.8 88.0 L350.0 87.7 L356.2 86.7 L362.5 86.3 L368.8 85.2 L375.0 83.9 L381.2 82.0 L387.5 81.0 L393.8 80.3 L400.0 79.4 L406.2 78.1 L412.5 75.8 L418.8 74.2 L425.0 71.7 L431.2 69.1 L437.5 65.9 L443.8 62.5 L450.0 59.4 L456.2 55.4 L462.5 51.7 L468.8 48.1 L475.0 45.1 L481.2 41.4 L487.5 37.2 L493.8 34.0 L500.0 30.6 L506.2 27.5 L512.5 23.9 L518.8 19.9 L525.0 22.4 L531.2 26.3 L537.5 30.7 L543.8 35.8 L550.0 40.1 L556.2 44.2 L562.5 47.3 L568.8 51.7 L575.0 55.3 L581.2 58.7 L587.5 61.6 L593.8 65.2 L600.0 68.2 L606.2 71.9 L612.5 75.2 L618.8 77.7 L625.0 80.8 L631.2 83.2 L637.5 85.6 L643.8 88.1 L650.0 90.3 L656.2 91.7 L662.5 93.9 L668.8 95.0 L675.0 96.8 L681.2 98.2 L687.5 99.9 L693.8 100.9 L700.0 102.2 L706.2 104.0 L712.5 105.3 L718.8 106.5 L725.0 106.7 L731.2 107.6 L737.5 108.5 L743.8 109.1 L750.0 108.7 L756.2 109.3 L762.5 108.9 L768.8 108.6 L775.0 107.3 L781.2 106.2 L787.5 105.3 L793.8 104.1 L800.0 103.3 L806.2 101.5 L812.5 99.9 L818.8 97.5 L825.0 94.9 L831.2 90.8 L837.5 87.3 L843.8 83.8 L850.0 80.1 L856.2 77.0 L862.5 75.3 L868.8 77.4 L875.0 78.6 L881.2 80.3 L887.5 81.9 L893.8 82.7 L900.0 83.1 L906.2 84.0 L912.5 84.2 L918.8 84.8 L925.0 86.0 L931.2 86.7 L937.5 86.9 L943.8 88.1 L950.0 88.4 L956.2 89.4 L962.5 89.8 L968.8 91.1 L975.0 91.7 L981.2 91.4 L987.5 91.0 L993.8 90.6 L1000.0 90.7 L1006.2 89.9 L1012.5 88.5 L1018.8 87.1 L1025.0 85.8 L1031.2 85.3 L1037.5 84.0 L1043.8 83.2 L1050.0 81.3 L1056.2 79.6 L1062.5 78.0 L1068.8 76.4 L1075.0 74.7 L1081.2 72.3 L1087.5 68.5 L1093.8 66.1 L1100.0 63.3 L1106.2 59.7 L1112.5 56.7 L1118.8 53.2 L1125.0 50.3 L1131.2 46.1 L1137.5 42.7 L1143.8 39.4 L1150.0 35.3 L1156.2 32.1 L1162.5 28.2 L1168.8 24.1 L1175.0 20.7 L1181.2 19.7 L1187.5 24.1 L1193.8 28.6 L1200.0 32.1 L1206.2 36.3 L1212.5 40.2 L1218.8 43.7 L1225.0 47.6 L1231.2 51.4 L1237.5 55.2 L1243.8 58.2 L1250.0 61.2 L1256.2 62.5 L1262.5 64.6 L1268.8 66.2 L1275.0 66.8 L1281.2 68.7 L1287.5 70.3 L1293.8 71.5 L1300.0 72.6 L1306.2 73.3 L1312.5 73.0 L1318.8 73.7 L1325.0 74.4 L1331.2 75.0 L1337.5 74.8 L1343.8 74.6 L1350.0 73.6 L1356.2 73.8 L1362.5 74.5 L1368.8 74.1 L1375.0 74.1 L1381.2 73.7 L1387.5 73.6 L1393.8 72.4 L1400.0 71.6 L1406.2 71.5 L1412.5 71.2 L1418.8 70.2 L1425.0 69.5 L1431.2 68.4 L1437.5 67.4 L1443.8 66.1 L1450.0 65.4 L1456.2 64.6 L1462.5 62.9 L1468.8 61.5 L1475.0 60.3 L1481.2 59.2 L1487.5 63.7 L1493.8 68.6 L1500.0 73.2 L1506.2 78.5 L1512.5 82.3 L1518.8 85.8 L1525.0 89.4 L1531.2 93.3 L1537.5 96.4 L1543.8 100.5 L1550.0 104.7 L1556.2 107.9 L1562.5 111.0 L1568.8 114.9 L1575.0 118.6 L1581.2 121.0 L1587.5 124.3 L1593.8 127.5 L1600.0 130.8 L1600 260 Z'/%3E%3Cpath fill='%2334364f' d='M0 260 L0.0 159.5 L6.2 157.1 L12.5 155.0 L18.8 152.6 L25.0 150.5 L31.2 147.5 L37.5 144.8 L43.8 142.1 L50.0 139.5 L56.2 137.4 L62.5 136.8 L68.8 139.8 L75.0 142.1 L81.2 143.9 L87.5 146.2 L93.8 149.0 L100.0 151.5 L106.2 154.2 L112.5 156.9 L118.8 159.8 L125.0 162.9 L131.2 164.8 L137.5 166.7 L143.8 167.5 L150.0 168.2 L156.2 169.2 L162.5 170.4 L168.8 170.7 L175.0 171.2 L181.2 171.7 L187.5 171.9 L193.8 172.5 L200.0 173.1 L206.2 172.1 L212.5 171.2 L218.8 170.5 L225.0 170.0 L231.2 169.3 L237.5 167.7 L243.8 166.2 L250.0 164.7 L256.2 164.2 L262.5 162.6 L268.8 160.9 L275.0 159.4 L281.2 156.8 L287.5 153.4 L293.8 150.9 L300.0 148.3 L306.2 145.6 L312.5 142.5 L318.8 139.6 L325.0 136.7 L331.2 133.5 L337.5 129.7 L343.8 126.5 L350.0 123.2 L356.2 119.5 L362.5 116.5 L368.8 113.8 L375.0 110.8 L381.2 107.6 L387.5 104.2 L393.8 105.4 L400.0 109.8 L406.2 113.0 L412.5 115.7 L418.8 119.2 L425.0 122.1 L431.2 125.3 L437.5 128.9 L443.8 132.0 L450.0 135.6 L456.2 138.3 L462.5 141.2 L468.8 144.6 L475.0 147.8 L481.2 150.6 L487.5 153.5 L493.8 155.8 L500.0 158.8 L506.2 161.6 L512.5 164.6 L518.8 166.9 L525.0 169.1 L531.2 172.2 L537.5 175.2 L543.8 177.8 L550.0 180.6 L556.2 183.2 L562.5 185.2 L568.8 187.5 L575.0 189.3 L581.2 190.3 L587.5 191.6 L593.8 192.1 L600.0 192.8 L606.2 193.4 L612.5 193.2 L618.8 192.8 L625.0 192.6 L631.2 192.4 L637.5 191.9 L643.8 191.7 L650.0 191.4 L656.2 189.2 L662.5 186.8 L668.8 184.9 L675.0 182.5 L681.2 180.0 L687.5 178.1 L693.8 175.4 L700.0 173.1 L706.2 171.1 L712.5 169.6 L718.8 166.9 L725.0 164.8 L731.2 163.0 L737.5 161.1 L743.8 158.2 L750.0 154.9 L756.2 151.4 L762.5 149.0 L768.8 149.8 L775.0 150.5 L781.2 151.6 L787.5 152.5 L793.8 152.9 L800.0 153.9 L806.2 154.4 L812.5 155.3 L818.8 155.0 L825.0 155.0 L831.2 154.7 L837.5 154.7 L843.8 155.1 L850.0 154.9 L856.2 154.6 L862.5 154.4 L868.8 153.8 L875.0 153.6 L881.2 152.8 L887.5 151.8 L893.8 151.2 L900.0 150.9 L906.2 149.8 L912.5 149.2 L918.8 147.8 L925.0 146.2 L931.2 144.7 L937.5 143.7 L943.8 142.2 L950.0 140.1 L956.2 138.5 L962.5 136.4 L968.8 134.0 L975.0 132.3 L981.2 129.4 L987.5 126.3 L993.8 124.0 L1000.0 121.0 L1006.2 118.0 L1012.5 114.7 L1018.8 111.7 L1025.0 113.3 L1031.2 116.4 L1037.5 118.8 L1043.8 121.1 L1050.0 123.6 L1056.2 126.1 L1062.5 128.6 L1068.8 131.7 L1075.0 134.4 L1081.2 136.4 L1087.5 138.5 L1093.8 141.1 L1100.0 142.9 L1106.2 145.6 L1112.5 148.3 L1118.8 150.6 L1125.0 153.2 L1131.2 154.8 L1137.5 156.9 L1143.8 158.7 L1150.0 160.6 L1156.2 161.3 L1162.5 162.6 L1168.8 163.0 L1175.0 163.1 L1181.2 164.5 L1187.5 165.1 L1193.8 166.0 L1200.0 166.2 L1206.2 167.0 L1212.5 166.9 L1218.8 166.3 L1225.0 166.0 L1231.2 165.7 L1237.5 165.8 L1243.8 165.0 L1250.0 164.8 L1256.2 164.6 L1262.5 163.5 L1268.8 162.0 L1275.0 161.1 L1281.2 159.8 L1287.5 159.0 L1293.8 158.1 L1300.0 156.5 L1306.2 154.7 L1312.5 152.2 L1318.8 150.0 L1325.0 147.7 L1331.2 144.8 L1337.5 142.6 L1343.8 139.7 L1350.0 137.6 L1356.2 135.0 L1362.5 132.0 L1368.8 129.3 L1375.0 126.3 L1381.2 124.3 L1387.5 126.8 L1393.8 130.0 L1400.0 132.5 L1406.2 134.6 L1412.5 137.2 L1418.8 138.7 L1425.0 140.8 L1431.2 143.4 L1437.5 145.3 L1443.8 147.6 L1450.0 150.6 L1456.2 152.7 L1462.5 154.9 L1468.8 156.9 L1475.0 159.3 L1481.2 162.1 L1487.5 164.6 L1493.8 166.6 L1500.0 168.6 L1506.2 170.8 L1512.5 173.3 L1518.8 175.6 L1525.0 177.7 L1531.2 180.0 L1537.5 182.8 L1543.8 185.2 L1550.0 186.7 L1556.2 188.6 L1562.5 190.0 L1568.8 191.6 L1575.0 193.7 L1581.2 195.0 L1587.5 196.2 L1593.8 197.3 L1600.0 198.6 L1600 260 Z'/%3E%3Cpath fill='%231f2133' d='M0 260 L0.0 233.1 L6.2 232.4 L12.5 231.5 L18.8 230.6 L25.0 229.5 L31.2 228.7 L37.5 227.6 L43.8 226.9 L50.0 226.1 L56.2 224.9 L62.5 223.7 L68.8 222.4 L75.0 221.3 L81.2 220.1 L87.5 218.6 L93.8 216.9 L100.0 215.4 L106.2 214.0 L112.5 212.7 L118.8 211.1 L125.0 209.8 L131.2 208.1 L137.5 206.6 L143.8 204.6 L150.0 202.7 L156.2 201.0 L162.5 199.3 L168.8 197.9 L175.0 196.3 L181.2 195.0 L187.5 193.6 L193.8 192.1 L200.0 190.9 L206.2 189.2 L212.5 187.4 L218.8 185.5 L225.0 183.5 L231.2 181.6 L237.5 179.4 L243.8 177.2 L250.0 175.4 L256.2 177.0 L262.5 178.5 L268.8 180.0 L275.0 181.3 L281.2 182.4 L287.5 183.7 L293.8 184.8 L300.0 186.0 L306.2 187.5 L312.5 188.7 L318.8 190.3 L325.0 191.9 L331.2 193.1 L337.5 194.3 L343.8 195.9 L350.0 197.2 L356.2 198.3 L362.5 199.5 L368.8 200.2 L375.0 201.1 L381.2 202.0 L387.5 203.1 L393.8 204.2 L400.0 205.5 L406.2 206.7 L412.5 207.7 L418.8 209.0 L425.0 210.3 L431.2 211.3 L437.5 212.1 L443.8 212.8 L450.0 213.6 L456.2 214.2 L462.5 214.9 L468.8 215.4 L475.0 215.7 L481.2 216.0 L487.5 216.2 L493.8 216.2 L500.0 216.1 L506.2 215.9 L512.5 215.4 L518.8 214.8 L525.0 214.4 L531.2 213.9 L537.5 213.5 L543.8 212.7 L550.0 212.1 L556.2 211.2 L562.5 210.3 L568.8 209.1 L575.0 208.0 L581.2 206.7 L587.5 205.5 L593.8 204.2 L600.0 203.3 L606.2 201.9 L612.5 200.9 L618.8 199.8 L625.0 198.7 L631.2 197.8 L637.5 196.7 L643.8 195.6 L650.0 194.6 L656.2 193.6 L662.5 192.3 L668.8 191.0 L675.0 189.7 L681.2 188.6 L687.5 187.5 L693.8 186.8 L700.0 185.8 L706.2 186.8 L712.5 188.0 L718.8 189.4 L725.0 190.7 L731.2 192.0 L737.5 193.0 L743.8 194.4 L750.0 195.8 L756.2 197.0 L762.5 198.3 L768.8 199.3 L775.0 200.6 L781.2 201.9 L787.5 203.2 L793.8 204.3 L800.0 205.5 L806.2 206.4 L812.5 207.2 L818.8 207.6 L825.0 207.8 L831.2 208.4 L837.5 208.7 L843.8 208.9 L850.0 209.0 L856.2 208.8 L862.5 208.6 L868.8 208.6 L875.0 208.4 L881.2 208.0 L887.5 207.7 L893.8 207.1 L900.0 206.5 L906.2 206.6 L912.5 206.4 L918.8 205.9 L925.0 205.4 L931.2 204.6 L937.5 204.0 L943.8 203.2 L950.0 202.4 L956.2 201.8 L962.5 200.7 L968.8 199.8 L975.0 199.1 L981.2 197.8 L987.5 196.4 L993.8 195.0 L1000.0 193.9 L1006.2 192.9 L1012.5 191.5 L1018.8 190.5 L1025.0 189.3 L1031.2 187.7 L1037.5 186.2 L1043.8 185.0 L1050.0 183.4 L1056.2 182.3 L1062.5 181.0 L1068.8 179.9 L1075.0 179.1 L1081.2 177.5 L1087.5 176.0 L1093.8 174.7 L1100.0 173.4 L1106.2 172.4 L1112.5 171.0 L1118.8 169.4 L1125.0 170.7 L1131.2 172.0 L1137.5 173.7 L1143.8 175.4 L1150.0 177.2 L1156.2 178.7 L1162.5 180.4 L1168.8 181.9 L1175.0 183.5 L1181.2 185.1 L1187.5 186.6 L1193.8 188.3 L1200.0 190.0 L1206.2 191.2 L1212.5 192.6 L1218.8 193.9 L1225.0 195.5 L1231.2 197.2 L1237.5 198.7 L1243.8 200.1 L1250.0 201.5 L1256.2 202.8 L1262.5 204.1 L1268.8 205.5 L1275.0 206.9 L1281.2 208.1 L1287.5 209.1 L1293.8 210.6 L1300.0 211.7 L1306.2 213.2 L1312.5 214.4 L1318.8 215.9 L1325.0 217.1 L1331.2 218.4 L1337.5 219.8 L1343.8 220.8 L1350.0 222.1 L1356.2 222.5 L1362.5 223.0 L1368.8 223.3 L1375.0 223.2 L1381.2 223.0 L1387.5 223.0 L1393.8 222.5 L1400.0 221.9 L1406.2 221.7 L1412.5 221.1 L1418.8 220.5 L1425.0 220.0 L1431.2 219.4 L1437.5 218.8 L1443.8 217.8 L1450.0 216.7 L1456.2 215.4 L1462.5 213.8 L1468.8 212.2 L1475.0 210.4 L1481.2 209.0 L1487.5 207.4 L1493.8 205.7 L1500.0 204.3 L1506.2 203.1 L1512.5 201.6 L1518.8 200.0 L1525.0 198.4 L1531.2 196.6 L1537.5 194.8 L1543.8 193.1 L1550.0 191.1 L1556.2 193.2 L1562.5 195.2 L1568.8 197.5 L1575.0 199.6 L1581.2 201.6 L1587.5 203.3 L1593.8 205.6 L1600.0 207.5 L1600 260 Z'/%3E%3C/svg%3E"),
		radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 27% 58%, #fffc, transparent),
		radial-gradient(1.5px 1.5px at 38% 14%, #fff, transparent), radial-gradient(1px 1px at 46% 41%, #fff9, transparent),
		radial-gradient(1px 1px at 59% 26%, #fffc, transparent), radial-gradient(1.5px 1.5px at 67% 9%, #fff, transparent),
		radial-gradient(1px 1px at 73% 49%, #fff9, transparent), radial-gradient(1px 1px at 84% 19%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 92% 37%, #fffc, transparent), radial-gradient(1px 1px at 6% 44%, #fff9, transparent),
		radial-gradient(1px 1px at 19% 7%, #fffc, transparent), radial-gradient(1px 1px at 52% 6%, #fff9, transparent),
		linear-gradient(#23263a 0%, #2f3249 55%, #54536f 88%, #7a6f80 100%);
	background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
	background-position: bottom center, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	background-size: 100% clamp(7rem, 19vw, 17rem), 420px 300px, 510px 340px, 380px 280px, 470px 320px, 560px 300px, 430px 360px, 490px 290px, 400px 330px, 530px 310px, 450px 350px, 610px 300px, 360px 270px, 100% 100%;
	color: var(--tr-sky-text);
	text-align: center;
}
main > section:first-of-type > * { width: 100%; margin-inline: auto; }
/* een paar sterren fonkelen, elk van de twee lagen op een eigen ritme; stil voor wie minder beweging wil */
main > section:first-of-type { position: relative; isolation: isolate; }
main > section:first-of-type::before,
main > section:first-of-type::after {
	content: "";
	position: absolute;
	inset: 0 0 35% 0;
	z-index: -1;
	pointer-events: none;
	animation: twinkle 5s ease-in-out infinite;
}
main > section:first-of-type::before {
	background:
		radial-gradient(circle at 14% 18%, #fff 0 1px, #ffffff50 1.6px, transparent 4px),
		radial-gradient(circle at 33% 9%, #fff 0 1.2px, #ffffff50 2px, transparent 5px),
		radial-gradient(circle at 61% 21%, #fff 0 1px, #ffffff50 1.6px, transparent 4px),
		radial-gradient(circle at 82% 12%, #fff 0 1.2px, #ffffff50 2px, transparent 5px),
		radial-gradient(circle at 91% 41%, #fff 0 1px, #ffffff50 1.6px, transparent 4px);
}
main > section:first-of-type::after {
	background:
		radial-gradient(circle at 7% 37%, #fff 0 1px, #ffffff50 1.6px, transparent 4px),
		radial-gradient(circle at 24% 30%, #fff 0 1.2px, #ffffff50 2px, transparent 5px),
		radial-gradient(circle at 48% 15%, #fff 0 1px, #ffffff50 1.6px, transparent 4px),
		radial-gradient(circle at 71% 33%, #fff 0 1.2px, #ffffff50 2px, transparent 5px);
	animation-duration: 7.5s;
	animation-delay: -3s;
}
@keyframes twinkle {
	0%, 100% { opacity: .2; }
	45% { opacity: 1; }
	60% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
	main > section:first-of-type::before, main > section:first-of-type::after { animation: none; opacity: .7; }
}
main > section:first-of-type :is(h1, h2, h3, strong) { color: #fff; }
main > section:first-of-type mark { color: var(--tr-glow); }
main > section:first-of-type hgroup > p:first-child { color: var(--tr-sky-soft); }
main > section:first-of-type :is(p, small, .note) { color: var(--tr-sky-text); }
main > section:first-of-type a:not([role="button"]) { color: #fff; }
main > section:first-of-type a[role="button"] { background: transparent; border: 2px solid #fff; color: #fff; }
main > section:first-of-type a[role="button"]:hover { background: #ffffff26; }
/* de homepage: één rustig scherm */
#home { min-height: 100svh; }
#home > p { max-width: 34rem; font-size: 1.15rem; }

/* tekst */
main > section > p:last-child { margin-bottom: 0; }
a { text-underline-offset: .2em; }

/* kaarten alleen waar je iets vergelijkt */
article { margin-bottom: 0; padding: 1.75rem; border: 1px solid var(--tr-line); border-radius: 1rem; }
article > :last-child { margin-bottom: 0; }
article h3 { margin-bottom: .75rem; }
.tiles { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-block: 2rem; }
.tiles > article { display: flex; flex-direction: column; }
.tiles > article > :last-child { margin-top: auto; }
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 768px) { .split { grid-template-columns: 2fr 1fr; } }
.split > * { min-width: 0; }

/* een genummerde lijst: rustig onder elkaar, gescheiden door een lijn */
main > section > ol { padding: 0; list-style: none; counter-reset: stap; }
main > section > ol > li { display: flex; gap: 1.25rem; padding-block: 1.1rem; border-bottom: 1px solid var(--tr-line); counter-increment: stap; }
main > section > ol > li::before { content: counter(stap); font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; line-height: 1.3; color: var(--tr-accent); }
main > section > ol > li > p { margin: 0; }

/* knoppen: een pil met een rand, zoals op de voorbeeldsite */
[role="button"], button, [type="submit"] { padding: .7rem 2.25rem; border-radius: 100px; font-weight: 600; letter-spacing: .04em; }
[type="submit"] { width: auto; }

/* de check */
[role="group"] { display: flex; flex-wrap: wrap; gap: .5rem; width: auto; margin-bottom: .75rem; box-shadow: none; }
[role="group"] > button { flex: 0 0 auto; margin: 0; padding-inline: 1.5rem; border-radius: 100px !important; background: transparent; border: 1px solid var(--tr-ink-soft); color: var(--tr-ink); }
[role="group"] > button[aria-pressed="true"] { background: var(--tr-night); border-color: var(--tr-night); color: var(--tr-sky-text); }
#check article > hr { margin-block: 1.5rem; }

/* citaat */
blockquote { border-inline-start: 2px solid var(--tr-accent); font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; }

/* illustraties */
main svg { display: block; width: 100%; height: auto; margin-inline: auto; }
#wie img { border-radius: 50%; }

/* netwerk-tekening: vanuit de root vertakt het verhaal zich (--c0 → groen) */
.tr-bloom { --grey: #b9bbcc; --red: #d98a7c; --green: #4f9e86; margin-block: 2.5rem 0; }
.tr-bloom svg { max-width: 24rem; }
.node, .edge { color: var(--c0); animation: bloom 4s ease forwards; animation-play-state: paused; }
.node { fill: currentColor; }
.edge { fill: none; stroke: currentColor; stroke-width: .8; stroke-linecap: round; }
.tr-bloom.in-view .node, .tr-bloom.in-view .edge { animation-play-state: running; }
@keyframes bloom { to { color: var(--green); } }
@media (prefers-reduced-motion: reduce) {
	.node, .edge { animation: none; color: var(--green); }
}

/* voet */
body > footer { width: 100%; max-width: none; margin: 0; padding: 3rem 1.25rem; background: var(--tr-night); color: var(--tr-sky-soft); text-align: center; font-size: .9rem; }
body > footer a { color: var(--tr-sky-text); }
body > footer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
body > footer li { list-style: none; }

/* losse hulpjes voor de pagina's met data */
.kicker { display: block; }
.note { font-size: .875rem; color: var(--tr-ink-soft); }
.scroll { overflow-x: auto; margin-block: 2rem; padding: 1rem; border: 1px solid var(--tr-line); border-radius: 1rem; background: var(--tr-white); }
.scroll table { margin-bottom: 0; }
.stat { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 2.75rem; line-height: 1.1; color: var(--tr-accent); }
table { --pico-background-color: transparent; }
details { padding: 1rem 1.5rem; border: 1px solid var(--tr-line); border-radius: 1rem; background: var(--tr-white); }
details summary { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; }

/* Pico maakt van elke nav een balk; alleen de kop van de site is dat */
main nav { display: block; }
main nav ol, main nav ul { display: block; margin: 0; padding: 0; }
main nav li { display: block; padding: .15rem 0; }
main nav > p { margin-bottom: .5rem; }

/* Pico zet een pijltje bij summary; waar de pagina een eigen + heeft, moet dat weg */
.sg-explanation > summary::after { float: none; width: auto; height: auto; background-image: none; transform: none; }