Context Navigation

style.css@ d5b9d2a

main

Last change on this file since d5b9d2a was d5b9d2a, checked in by roboburr <roboburr@…>, 3 months ago

Fix: bottom tab scrolls with the page on mobile (overflow-x hidden→clip)

body (and on mobile body+html) had overflow-x:hidden. hidden automatically sets
the other axis to overflow:auto → body becomes a scroll container → position:fixed
(the bottom tab) becomes relative to it and scrolls along (visible e.g. on the
admin list). overflow-x:clip clips horizontally without creating that scroll context;
hidden stays as fallback for iOS <16. CSS cache-buster v6.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Property mode set to 100644

File size: 125.7 KB

Rev	Line
[7bc636b]	1	/* ============================================================
	2	LOKALE FONTS — SIL OFL 1.1 licensed, self-hosted
	3	Geen third-party requests, geen privacy-leak naar Google.
	4	Variable WOFF2 bestanden onder /assets/fonts/
	5	Licenses in /assets/fonts/licenses/
	6	============================================================ */
	7	@font-face {
	8	font-family: 'Fraunces';
	9	font-style: normal;
	10	font-display: swap;
	11	font-weight: 100 900;
	12	src: url('/assets/fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
	13	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;
	14	}
	15	@font-face {
	16	font-family: 'Fraunces';
	17	font-style: italic;
	18	font-display: swap;
	19	font-weight: 100 900;
	20	src: url('/assets/fonts/fraunces-latin-full-italic.woff2') format('woff2-variations');
	21	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;
	22	}
	23	@font-face {
	24	font-family: 'Literata';
	25	font-style: normal;
	26	font-display: swap;
	27	font-weight: 400 700;
	28	src: url('/assets/fonts/literata-latin-opsz-normal.woff2') format('woff2-variations');
	29	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;
	30	}
	31	@font-face {
	32	font-family: 'Literata';
	33	font-style: italic;
	34	font-display: swap;
	35	font-weight: 400 700;
	36	src: url('/assets/fonts/literata-latin-opsz-italic.woff2') format('woff2-variations');
	37	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;
	38	}
	39	@font-face {
	40	font-family: 'Plus Jakarta Sans';
	41	font-style: normal;
	42	font-display: swap;
	43	font-weight: 400 700;
	44	src: url('/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
	45	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;
	46	}
	47	@font-face {
	48	font-family: 'Plus Jakarta Sans';
	49	font-style: italic;
	50	font-display: swap;
	51	font-weight: 400 700;
	52	src: url('/assets/fonts/plus-jakarta-sans-latin-wght-italic.woff2') format('woff2-variations');
	53	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;
	54	}
	55
	56	/* PrutCMS publieke stijl — editorial-ish, geen emoji-UI */
	57
	58	:root {
	59	--font-display: 'Fraunces', Georgia, serif;
	60	--font-body: 'Literata', Georgia, serif;
	61	--font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
	62	--font-mono: ui-monospace, Menlo, Consolas, monospace;
	63	--radius: 8px; --transition: 180ms cubic-bezier(.4,0,.2,1);
	64	--safe-top: env(safe-area-inset-top, 0); --safe-bot: env(safe-area-inset-bottom, 0);
	65	color-scheme: light dark;
	66	}
	67
	68	/* ============================================================
	69	PALETTES — elk palette definieert alleen bg/tekst/rand shades.
	70	--accent wordt LOS ingesteld via de accent-kleur config (inline in template).
	71	Palette-selector: <html data-palette="forest"> en optioneel data-theme="dark"\|"light".
	72	Als geen data-palette = Sage default.
	73	============================================================ */
	74
	75	/* ── SAGE (default) ── warme crème ── */
	76	:root,
	77	[data-palette="sage"] {
	78	--paper: #faf8f3; --paper-2: #f2ede0;
	79	--ink: #1a1a1a; --ink-soft: #3d3833; --ink-muted: #6b6560; --ink-faint: #a8a29e;
	80	--rule: #e8e2d5; --rule-2: #d4ccb8;
	81	}
	82	@media (prefers-color-scheme: dark) {
	83	:root:not([data-theme="light"]):not([data-palette]),
	84	[data-palette="sage"]:not([data-theme="light"]) {
	85	--paper: #1c1a17; --paper-2: #252220;
	86	--ink: #f4ede0; --ink-soft: #d4ccb8; --ink-muted: #a8a29e; --ink-faint: #6b6560;
	87	--rule: #3d3833; --rule-2: #4d4740;
	88	}
	89	}
	90	[data-theme="dark"]:not([data-palette]),
	91	[data-theme="dark"][data-palette="sage"] {
	92	--paper: #1c1a17; --paper-2: #252220;
	93	--ink: #f4ede0; --ink-soft: #d4ccb8; --ink-muted: #a8a29e; --ink-faint: #6b6560;
	94	--rule: #3d3833; --rule-2: #4d4740;
	95	}
	96
	97	/* ── PAPER ── minimalistisch wit → zwart ── */
	98	[data-palette="paper"] {
	99	--paper: #ffffff; --paper-2: #f4f4f5;
	100	--ink: #09090b; --ink-soft: #27272a; --ink-muted: #52525b; --ink-faint: #a1a1aa;
	101	--rule: #e4e4e7; --rule-2: #d4d4d8;
	102	}
	103	@media (prefers-color-scheme: dark) {
	104	[data-palette="paper"]:not([data-theme="light"]) {
	105	--paper: #0a0a0a; --paper-2: #18181b;
	106	--ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
	107	--rule: #27272a; --rule-2: #3f3f46;
	108	}
	109	}
	110	[data-theme="dark"][data-palette="paper"] {
	111	--paper: #0a0a0a; --paper-2: #18181b;
	112	--ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
	113	--rule: #27272a; --rule-2: #3f3f46;
	114	}
	115
	116	/* ── OCEAN ── koel blauw-grijs → diep navy ── */
	117	[data-palette="ocean"] {
	118	--paper: #f0f6fb; --paper-2: #dce9f4;
	119	--ink: #0f1e2e; --ink-soft: #1e3a52; --ink-muted: #475569; --ink-faint: #94a3b8;
	120	--rule: #c7d9ea; --rule-2: #a8c0d6;
	121	}
	122	@media (prefers-color-scheme: dark) {
	123	[data-palette="ocean"]:not([data-theme="light"]) {
	124	--paper: #0a1929; --paper-2: #152a3f;
	125	--ink: #e0f2fe; --ink-soft: #bfdbfe; --ink-muted: #93c5fd; --ink-faint: #64748b;
	126	--rule: #1e3a52; --rule-2: #2a4a68;
	127	}
	128	}
	129	[data-theme="dark"][data-palette="ocean"] {
	130	--paper: #0a1929; --paper-2: #152a3f;
	131	--ink: #e0f2fe; --ink-soft: #bfdbfe; --ink-muted: #93c5fd; --ink-faint: #64748b;
	132	--rule: #1e3a52; --rule-2: #2a4a68;
	133	}
	134
	135	/* ── FOREST ── olijfgroen → donker bos ── */
	136	[data-palette="forest"] {
	137	--paper: #f2f6ed; --paper-2: #e1ead6;
	138	--ink: #1a2e15; --ink-soft: #2d4a26; --ink-muted: #5a6f52; --ink-faint: #8aa080;
	139	--rule: #ccddbd; --rule-2: #adc396;
	140	}
	141	@media (prefers-color-scheme: dark) {
	142	[data-palette="forest"]:not([data-theme="light"]) {
	143	--paper: #0d1f12; --paper-2: #1a331e;
	144	--ink: #dcf2d0; --ink-soft: #b8d8a8; --ink-muted: #8aad7c; --ink-faint: #5a7a50;
	145	--rule: #2d4a30; --rule-2: #3d5e42;
	146	}
	147	}
	148	[data-theme="dark"][data-palette="forest"] {
	149	--paper: #0d1f12; --paper-2: #1a331e;
	150	--ink: #dcf2d0; --ink-soft: #b8d8a8; --ink-muted: #8aad7c; --ink-faint: #5a7a50;
	151	--rule: #2d4a30; --rule-2: #3d5e42;
	152	}
	153
	154	/* ── STONE ── beige bruin → koffie ── */
	155	[data-palette="stone"] {
	156	--paper: #f5f0e8; --paper-2: #e7ddce;
	157	--ink: #2b2218; --ink-soft: #4a3a2a; --ink-muted: #78614a; --ink-faint: #a8927b;
	158	--rule: #d6c6ac; --rule-2: #bda98a;
	159	}
	160	@media (prefers-color-scheme: dark) {
	161	[data-palette="stone"]:not([data-theme="light"]) {
	162	--paper: #1a130b; --paper-2: #2d2416;
	163	--ink: #f5e9d5; --ink-soft: #d4c0a3; --ink-muted: #a8927b; --ink-faint: #786452;
	164	--rule: #3d2f1e; --rule-2: #534029;
	165	}
	166	}
	167	[data-theme="dark"][data-palette="stone"] {
	168	--paper: #1a130b; --paper-2: #2d2416;
	169	--ink: #f5e9d5; --ink-soft: #d4c0a3; --ink-muted: #a8927b; --ink-faint: #786452;
	170	--rule: #3d2f1e; --rule-2: #534029;
	171	}
	172
	173	/* ── MIDNIGHT ── lavendel → donker paars ── */
	174	[data-palette="midnight"] {
	175	--paper: #f3f1f8; --paper-2: #e3ddf0;
	176	--ink: #1e1a2e; --ink-soft: #332c4d; --ink-muted: #5e5478; --ink-faint: #9288a8;
	177	--rule: #d4cae3; --rule-2: #b8a9cc;
	178	}
	179	@media (prefers-color-scheme: dark) {
	180	[data-palette="midnight"]:not([data-theme="light"]) {
	181	--paper: #0f0a1f; --paper-2: #1c1432;
	182	--ink: #e9def7; --ink-soft: #c4b5d9; --ink-muted: #9d88b8; --ink-faint: #6b5a85;
	183	--rule: #2d1f4a; --rule-2: #3d2b5e;
	184	}
	185	}
	186	[data-theme="dark"][data-palette="midnight"] {
	187	--paper: #0f0a1f; --paper-2: #1c1432;
	188	--ink: #e9def7; --ink-soft: #c4b5d9; --ink-muted: #9d88b8; --ink-faint: #6b5a85;
	189	--rule: #2d1f4a; --rule-2: #3d2b5e;
	190	}
	191
	192	/* ── SUNSET ── roze crème → diep paars-roze ── */
	193	[data-palette="sunset"] {
	194	--paper: #fdf4f3; --paper-2: #f7e1dc;
	195	--ink: #2e1618; --ink-soft: #4d282b; --ink-muted: #7a4a4e; --ink-faint: #b08589;
	196	--rule: #ebcac3; --rule-2: #d9a8a0;
	197	}
	198	@media (prefers-color-scheme: dark) {
	199	[data-palette="sunset"]:not([data-theme="light"]) {
	200	--paper: #1f0a14; --paper-2: #321525;
	201	--ink: #fce7f3; --ink-soft: #f0c5d3; --ink-muted: #c896a8; --ink-faint: #8a6878;
	202	--rule: #4a1f35; --rule-2: #5e2d43;
	203	}
	204	}
	205	[data-theme="dark"][data-palette="sunset"] {
	206	--paper: #1f0a14; --paper-2: #321525;
	207	--ink: #fce7f3; --ink-soft: #f0c5d3; --ink-muted: #c896a8; --ink-faint: #8a6878;
	208	--rule: #4a1f35; --rule-2: #5e2d43;
	209	}
	210
	211	/* ── CREAM ── warm papier → caramel-donker ── */
	212	[data-palette="cream"] {
	213	--paper: #fefaf0; --paper-2: #f5ebd5;
	214	--ink: #2a1f0f; --ink-soft: #4a3820; --ink-muted: #786140; --ink-faint: #ad9068;
	215	--rule: #e8d9b0; --rule-2: #d1bc8a;
	216	}
	217	@media (prefers-color-scheme: dark) {
	218	[data-palette="cream"]:not([data-theme="light"]) {
	219	--paper: #1a1208; --paper-2: #2e2012;
	220	--ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
	221	--rule: #3d2c16; --rule-2: #523d1f;
	222	}
	223	}
	224	[data-theme="dark"][data-palette="cream"] {
	225	--paper: #1a1208; --paper-2: #2e2012;
	226	--ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
	227	--rule: #3d2c16; --rule-2: #523d1f;
	228	}
	229
	230	/* Accent-tint wordt berekend uit --accent, zodat hij meegaat bij elke accent-keuze.
	231	Wordt in template inline gezet; hier alleen een fallback. */
	232	:root { --accent: #c2410c; --accent-soft: #ea580c; --accent-tint: #fef2e8; }
	233
	234	* { box-sizing: border-box; }
	235	html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
	236	body {
	237	margin: 0;
[d5b9d2a]	238	/* clip i.p.v. hidden: hidden zet overflow-y automatisch op 'auto' → de body
	239	wordt een scroll-container → op mobiel schuift position:fixed (bottom-tab)
	240	mee bij scrollen. clip clipt horizontaal zonder dat effect. */
	241	overflow-x: hidden; /* fallback oudere browsers */
	242	overflow-x: clip;
[7bc636b]	243	}
	244	body:not(.admin) {
	245	min-height: 100dvh;
	246	background: var(--paper); color: var(--ink);
	247	font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
	248	font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
	249	-webkit-font-smoothing: antialiased;
	250	/* v9.4 — Sticky footer: body als flex-kolom, main groeit, footer onderaan */
	251	display: flex;
	252	flex-direction: column;
	253	}
	254	body:not(.admin) #pcms-main { flex: 1 0 auto; }
	255	body:not(.admin) .site-footer { flex-shrink: 0; }
	256	body:not(.admin)::before {
	257	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	258	background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 3%, transparent), transparent 60%),
	259	radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--accent) 4%, transparent), transparent 55%);
	260	}
	261	::selection { background: var(--accent-tint); color: var(--accent); }
	262
	263	h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 450; line-height: 1.15; letter-spacing: -0.015em; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 144, "SOFT" 50; }
	264	h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); letter-spacing: -0.022em; }
	265	h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); margin: 1.5rem 0 .4rem; }
	266	h3 { font-size: 1.375rem; margin: 1.25rem 0 .3rem; }
	267	p { margin: 0 0 .85em; text-wrap: pretty; hyphens: auto; }
	268	a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: color var(--transition), text-decoration-color var(--transition); }
	269	a:hover { color: var(--accent); text-decoration-color: var(--accent); }
	270	a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; text-decoration: none; }
	271	blockquote { margin: 2em 0; padding: .25em 0 .25em 1.25em; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.15em; color: var(--ink-soft); }
	272	code { font-family: var(--font-mono); font-size: .9em; padding: .15em .4em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; }
	273	pre { font-family: var(--font-mono); font-size: .85rem; padding: 1.25em 1.5em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; line-height: 1.5; }
	274	pre code { padding: 0; background: none; border: none; }
	275	hr { border: 0; border-top: 1px solid var(--rule); margin: 3em auto; max-width: 4rem; }
	276
	277	/* Container — schaalt mee met schermgrootte.
	278	42rem default (optimale leesbreedte voor tekst),
	279	breder op HD/2.5K/4K waar je meer ademruimte hebt.
	280	Grid-view heeft z'n eigen bredere variant (zie .feed-grid). */
	281	/* Container max-width schaalt per schermformaat.
	282	42rem is optimale leesbreedte voor tekst. Op grotere schermen
	283	ademruimte geven zonder uitwaaieren. Grid apart geregeld. */
	284	.container { max-width: 42rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
	285
	286	/* Laptop / Full HD — 1440px viewport of groter */
	287	@media (min-width: 1440px) {
	288	.container { max-width: 56rem; }
	289	}
	290	/* Desktop / QHD 2.5K — 1920px viewport of groter */
	291	@media (min-width: 1920px) {
	292	.container { max-width: 72rem; }
	293	}
	294	/* 4K UHD — 2560px viewport of groter */
	295	@media (min-width: 2560px) {
	296	.container { max-width: 88rem; }
	297	}
	298
	299	/* Grid-view tiles: Instagram-feel. Max-width schaalt met gekozen kolommen zodat
	300	tegels niet te groot of te klein worden. */
	301	@media (min-width: 1200px) {
	302	body[data-grid-cols="4"] .feed-grid.container { max-width: 80rem; }
	303	body[data-grid-cols="3"] .feed-grid.container { max-width: 64rem; }
	304	body[data-grid-cols="2"] .feed-grid.container { max-width: 48rem; }
	305	}
	306	@media (min-width: 1920px) {
	307	body[data-grid-cols="4"] .feed-grid.container { max-width: 96rem; }
	308	}
	309
	310	.icon { width: 1.125em; height: 1.125em; flex-shrink: 0; vertical-align: -0.15em; stroke: currentColor; fill: none; display: inline-block; }
	311
	312	/* Masthead */
	313	.masthead {
	314	border-bottom: 1px solid var(--rule);
	315	padding: calc(1rem + var(--safe-top)) 0 1rem;
[c2a9522]	316	/* GEEN backdrop-filter hier: een voorouder met backdrop-filter blokkeert de
	317	frosted blur van het user-menu-dropdown eronder. Masthead is toch bijna
	318	dekkend, dus solide bg i.p.v. blur. */
	319	background: color-mix(in srgb, var(--paper) 94%, transparent);
[7bc636b]	320	position: sticky; top: 0; z-index: 20;
	321	}
	322	.masthead-inner { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
	323	.masthead-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
	324	.site-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variation-settings: "opsz" 72, "SOFT" 100; letter-spacing: -0.015em; text-decoration: none; color: var(--ink); line-height: 1; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
	325	.site-title:hover { color: var(--accent); }
	326	/* v9.0 — nav-home icon (replaces site-title text in nav) */
	327	.nav-home {
	328	display: inline-flex; align-items: center; justify-content: center;
	329	width: 2.25rem; height: 2.25rem;
	330	color: var(--ink-soft); text-decoration: none;
	331	border-radius: 6px; border: 1px solid transparent;
	332	transition: all var(--transition);
	333	}
	334	.nav-home:hover { color: var(--ink); background: var(--paper-2); border-color: var(--rule); }
	335	.nav-home .icon { width: 1.15rem; height: 1.15rem; }
	336	.top-nav { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
	337	.nav-link, .nav-btn {
	338	font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
	339	color: var(--ink-soft); text-decoration: none;
	340	padding: .5rem .85rem; border-radius: 6px;
	341	background: transparent; border: 1px solid transparent;
	342	cursor: pointer;
	343	display: inline-flex; align-items: center; gap: .4rem;
	344	min-height: 2.25rem;
	345	transition: all var(--transition);
	346	}
	347	.nav-link:hover, .nav-btn:hover { color: var(--ink); background: var(--paper-2); border-color: var(--rule); }
	348	.nav-link-muted { color: var(--ink-muted); }
	349	.nav-label { display: none; }
	350	@media (min-width: 560px) { .nav-label { display: inline; } }
	351
	352	/* Article */
	353	main { padding-top: 2rem; }
	354	.page { padding-block: 2rem 3rem; }
	355	page-container { display: block; font-size: 1.125rem; line-height: 1.75; }
	356	page-container h1 { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); margin-bottom: 1rem; letter-spacing: -0.025em; }
	357	page-container img, page-container iframe, page-container video { max-width: 100%; height: auto; display: block; margin: 2rem auto; border-radius: var(--radius); }
	358	page-container audio { width: 100%; margin: 1.5rem 0; }
	359	page-container figure { margin: 2rem 0; }
	360	page-container figcaption { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); text-align: center; margin-top: .5rem; }
	361	page-container[contenteditable="true"] { outline: 2px dashed var(--accent); outline-offset: .5rem; border-radius: var(--radius); }
	362
	363	.empty { text-align: center; padding: 4rem 1rem; }
	364	.empty h1 { font-size: 2rem; }
	365	.empty p { color: var(--ink-muted); }
	366
	367	/* Embeds */
	368	.pcms-embed, .folio-embed { margin: 2rem 0; }
	369	.pcms-embed iframe, .folio-embed iframe { width: 100%; display: block; border: 0; border-radius: var(--radius); }
	370
	371	/* Article footer */
	372	.article-footer { display: flex; justify-content: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--rule); }
	373
	374	/* Buttons */
	375	.button {
	376	font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
	377	padding: .6rem 1.1rem; min-height: 2.5rem;
	378	display: inline-flex; align-items: center; gap: .5rem;
	379	background: var(--ink); color: var(--paper);
	380	border: 1px solid var(--ink);
	381	border-radius: 6px;
	382	text-decoration: none; cursor: pointer;
	383	transition: all var(--transition);
	384	}
	385	.button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
	386	.button-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
	387	.button-ghost:hover { background: var(--paper-2); border-color: var(--accent); color: var(--accent); }
	388
	389	/* Pagination */
	390	.pagination {
	391	display: grid;
	392	grid-template-columns: 1fr 1fr;
	393	gap: 1rem;
	394	padding-block: 2rem 4rem;
	395	margin-top: 2rem;
	396	border-top: 1px solid var(--rule);
	397	}
	398	a.pagination-item {
	399	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
	400	border: 2px solid var(--rule-2, var(--rule));
	401	border-radius: var(--radius);
	402	text-decoration: none; transition: all .15s ease; font-size: .9rem;
	403	background: var(--paper-2);
	404	min-height: 5rem;
	405	min-width: 0;
	406	overflow: hidden;
	407	cursor: pointer;
	408	box-shadow: 0 1px 0 rgba(0,0,0,.02);
	409	-webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 30%, transparent);
	410	position: relative;
	411	}
	412	.pagination-item:not(a) {
	413	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
	414	border: 1px dashed var(--rule); border-radius: var(--radius);
	415	font-size: .9rem; background: transparent; min-height: 5rem;
	416	min-width: 0; overflow: hidden;
	417	}
	418	.pagination-next { flex-direction: row-reverse; text-align: right; }
	419	a.pagination-item:hover {
	420	border-color: var(--accent);
	421	background: color-mix(in srgb, var(--accent) 5%, var(--paper-2));
	422	transform: translateY(-2px);
	423	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	424	}
	425	a.pagination-item:active {
	426	transform: translateY(0);
	427	transition-duration: .05s;
	428	}
	429	.pagination-disabled { opacity: .5; cursor: default; font-style: italic; }
	430	.pagination-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
	431	.pagination-label {
	432	display: block; font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
	433	letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
	434	margin-bottom: .15rem;
	435	}
	436	.pagination-slug {
	437	display: block; font-size: .72rem; color: var(--ink-muted);
	438	opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	439	font-style: italic;
	440	}
	441	.pagination-title {
	442	display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink);
	443	font-variation-settings: "opsz" 72; font-style: normal;
	444	line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	445	font-size: 1.05rem;
	446	text-decoration: underline;
	447	text-decoration-color: var(--rule-2, var(--rule));
	448	text-decoration-thickness: 1px;
	449	text-underline-offset: 3px;
	450	transition: text-decoration-color .15s;
	451	}
	452	a.pagination-item:hover .pagination-title {
	453	text-decoration-color: var(--accent);
	454	}
	455	.pagination .icon {
	456	width: 1.75em; height: 1.75em; flex-shrink: 0;
	457	color: var(--accent);
	458	transition: transform .15s;
	459	}
	460	a.pagination-prev:hover .icon { transform: translateX(-4px); }
	461	a.pagination-next:hover .icon { transform: translateX(4px); }
	462
	463	/* Pinned-targets → accent-tint en dikkere rand voor duidelijkheid */
	464	.pagination-item.is-pinned {
	465	background: color-mix(in srgb, var(--accent) 8%, var(--paper-2));
	466	border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
	467	}
	468	a.pagination-item.is-pinned:hover {
	469	background: color-mix(in srgb, var(--accent) 15%, var(--paper-2));
	470	border-color: var(--accent);
	471	}
	472
	473	@media (max-width: 800px) { .pagination { grid-template-columns: 1fr; } }
	474
	475	/* Footer */
	476	.site-footer { padding: 2rem 0 calc(2rem + var(--safe-bot)); border-top: 1px solid var(--rule); margin-top: 4rem; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); }
	477	.site-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; }
	478	.site-footer a { color: var(--ink-muted); text-decoration-color: var(--rule); }
	479	.site-footer a:hover { color: var(--accent); }
	480	.site-footer-links { display: flex; gap: 1rem; }
	481	.sep { color: var(--ink-faint); margin: 0 .5rem; }
	482	.footer-tagline { font-style: italic; opacity: .8; }
	483
	484	@media print {
	485	.masthead, .pagination, .site-footer, .article-footer, .top-nav { display: none; }
	486	body { background: #fff; color: #000; }
	487	}
	488	@media (prefers-reduced-motion: reduce) { , ::before, *::after { transition: none !important; animation: none !important; } }
	489
	490	/* ============================================================
	491	V7 ADDITIONS — post metadata UI + audio player + post-images
	492	============================================================ */
	493
	494	/* Post header */
	495	.post-header { margin: 0 0 2rem; }
	496	.post-cover {
	497	margin: 0 0 1.5rem;
	498	border-radius: 8px;
	499	overflow: hidden;
	500	background: color-mix(in srgb, var(--fg) 4%, transparent);
	501	}
	502	.post-cover img {
	503	display: block;
	504	width: 100%;
	505	height: auto;
	506	max-height: 50vh;
	507	object-fit: cover;
	508	}
	509	.post-title { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.02em; }
	510
	511	/* Pin banner — duidelijk zichtbaar dat een post gepind is */
	512	.post-pin-banner {
	513	display: inline-flex;
	514	align-items: center;
	515	gap: .5rem;
	516	background: color-mix(in srgb, var(--accent) 14%, transparent);
	517	border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
	518	color: var(--accent);
	519	padding: .4rem .8rem;
	520	border-radius: 999px;
	521	font-size: .75rem;
	522	font-weight: 600;
	523	text-transform: uppercase;
	524	letter-spacing: .08em;
	525	margin: 0 0 .85rem;
	526	line-height: 1;
	527	}
	528	.post-pin-banner-icon { font-size: 1rem; line-height: 1; }
	529	.post-pin-banner-sep { opacity: .5; }
	530	.post-pin-banner-pos { opacity: .85; }
	531	.post-date {
	532	color: var(--fg-muted, #888);
	533	font-size: .85rem;
	534	letter-spacing: .05em;
	535	text-transform: uppercase;
	536	margin: 0 0 1.5rem;
	537	}
	538
	539	/* Post-images in content (resize + align) */
	540	.post-image {
	541	margin: 1.5rem 0;
	542	}
	543	.post-image img {
	544	display: block;
	545	height: auto;
	546	border-radius: 6px;
	547	max-width: 100%;
	548	}
	549	.post-image figcaption {
	550	font-size: .85rem;
	551	color: var(--fg-muted, #888);
	552	margin-top: .5rem;
	553	font-style: italic;
	554	text-align: center;
	555	}
	556	.post-image--small img { max-width: 240px; }
	557	.post-image--medium img { max-width: 440px; }
	558	.post-image--large img { max-width: 720px; }
	559	.post-image--full img { width: 100%; max-width: 100%; }
	560	.post-image--left { text-align: left; }
	561	.post-image--left img { margin-left: 0; margin-right: auto; }
	562	.post-image--center { text-align: center; }
	563	.post-image--center img { margin-left: auto; margin-right: auto; }
	564	.post-image--right { text-align: right; }
	565	.post-image--right img { margin-left: auto; margin-right: 0; }
	566
	567	/* Mini-player + bottom-tab clearance: applied to .pcms-main so the footer
	568	is NOT pushed below the viewport bottom. The bars are position:fixed so
	569	they overlap whatever they sit on top of; the padding ensures the last
	570	content row isn't covered. Footer naturally follows main and now sits
	571	exactly at viewport-bottom on short pages (sticky footer flex). */
	572	.pcms-main { padding-bottom: 5.5rem; }
	573	body.has-audio-player .pcms-main { padding-bottom: 5.5rem; }
	574
	575	/* ============================================================
	576	AUDIO PLAYER v7.1 — SVG iconen, thema-aware, geen emoji
	577	============================================================ */
	578	.audio-player {
	579	position: fixed;
	580	left: 0; right: 0; bottom: 0;
	581	background: color-mix(in srgb, var(--paper, #fff) 96%, var(--ink, #000));
	582	border-top: 1px solid var(--rule, rgba(0,0,0,.1));
	583	color: var(--ink, #222);
	584	z-index: 1000;
	585	backdrop-filter: blur(12px);
	586	-webkit-backdrop-filter: blur(12px);
	587	box-shadow: 0 -4px 20px rgba(0,0,0,.04);
	588	}
	589	[data-theme="dark"] .audio-player {
	590	background: color-mix(in srgb, var(--paper, #1a1a1a) 92%, #fff);
	591	box-shadow: 0 -4px 20px rgba(0,0,0,.3);
	592	}
	593	.audio-player-inner {
	594	display: grid;
	595	grid-template-columns: minmax(0, 1.6fr) auto minmax(180px, 2fr) auto;
	596	gap: 1rem;
	597	align-items: center;
	598	padding: .65rem 1.25rem;
	599	max-width: 1400px;
	600	margin: 0 auto;
	601	}
	602
	603	/* v9.0 — Clickable trigger dat cover + meta combineert zodat klikken erop sheet opent */
	604	.audio-player-expand-trigger {
	605	display: flex;
	606	align-items: center;
	607	gap: .65rem;
	608	min-width: 0;
	609	background: none;
	610	border: none;
	611	padding: 0;
	612	margin: 0;
	613	cursor: pointer;
	614	color: inherit;
	615	text-align: left;
	616	font: inherit;
	617	border-radius: 6px;
	618	transition: background .15s;
	619	}
	620	.audio-player-expand-trigger:hover {
	621	background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
	622	}
	623
	624	/* Cover art */
	625	.audio-player-cover {
	626	width: 48px; height: 48px;
	627	border-radius: 4px;
	628	background: linear-gradient(135deg,
	629	var(--accent, #c2410c),
	630	color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
	631	background-size: cover;
	632	background-position: center;
	633	flex-shrink: 0;
	634	position: relative;
	635	}
	636	.audio-player-cover.has-image {
	637	background-blend-mode: normal;
	638	}
	639
	640	/* Meta — titel + artiest */
	641	.audio-player-meta {
	642	min-width: 0;
	643	display: flex;
	644	flex-direction: column;
	645	gap: 2px;
	646	}
	647	.audio-player-title-wrap {
	648	overflow: hidden;
	649	white-space: nowrap;
	650	position: relative;
	651	}
	652	.audio-player-title {
	653	display: inline-block;
	654	font-family: var(--font-ui, inherit);
	655	font-weight: 600;
	656	font-size: .9rem;
	657	line-height: 1.3;
	658	letter-spacing: -.01em;
	659	color: var(--ink, inherit);
	660	white-space: nowrap;
	661	}
	662	.audio-player-title.is-overflowing {
	663	animation: audio-title-marquee 6s ease-in-out infinite alternate;
	664	}
	665	@keyframes audio-title-marquee {
	666	0%, 8% { transform: translateX(0); }
	667	92%, 100% { transform: translateX(calc(-1 * var(--audio-shift, 0px))); }
	668	}
	669	.audio-player-artist {
	670	font-family: var(--font-ui, inherit);
	671	font-size: .74rem;
	672	line-height: 1.3;
	673	color: var(--ink-muted, rgba(0,0,0,.55));
	674	white-space: nowrap;
	675	overflow: hidden;
	676	text-overflow: ellipsis;
	677	}
	678
	679	/* Controls — prev / play / next */
	680	.audio-player-controls {
	681	display: flex;
	682	gap: .1rem;
	683	align-items: center;
	684	}
	685	.audio-btn {
	686	background: transparent;
	687	border: none;
	688	color: inherit;
	689	cursor: pointer;
	690	padding: .5rem;
	691	border-radius: 50%;
	692	transition: background .15s, color .15s, transform .08s;
	693	display: inline-flex;
	694	align-items: center;
	695	justify-content: center;
	696	position: relative;
	697	}
	698	.audio-btn svg {
	699	width: 18px; height: 18px;
	700	display: block;
	701	}
	702	.audio-btn:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }
	703	.audio-btn:active { transform: scale(.94); }
	704	.audio-btn-play {
	705	background: var(--accent, #c2410c);
	706	color: #fff;
	707	width: 38px; height: 38px;
	708	padding: 0;
	709	}
	710	.audio-btn-play:hover {
	711	background: color-mix(in srgb, var(--accent, #c2410c) 85%, #fff);
	712	}
	713	[data-theme="dark"] .audio-btn-play:hover {
	714	background: color-mix(in srgb, var(--accent, #c2410c) 85%, #000);
	715	}
	716	.audio-btn-play svg { width: 16px; height: 16px; }
	717	.audio-btn-play .icon-pause { display: none; }
	718	.audio-player.is-playing .audio-btn-play .icon-play { display: none; }
	719	.audio-player.is-playing .audio-btn-play .icon-pause { display: block; }
	720
	721	/* Progress bar */
	722	.audio-player-progress {
	723	display: flex;
	724	gap: .75rem;
	725	align-items: center;
	726	min-width: 0;
	727	}
	728	.audio-time {
	729	font-size: .7rem;
	730	color: var(--ink-muted, rgba(0,0,0,.55));
	731	font-variant-numeric: tabular-nums;
	732	min-width: 2.7em;
	733	text-align: center;
	734	}
	735	.audio-seek {
	736	flex: 1;
	737	min-width: 0;
	738	cursor: pointer;
	739	padding: .5rem 0;
	740	position: relative;
	741	}
	742	.audio-seek-bar {
	743	height: 3px;
	744	background: color-mix(in srgb, var(--ink, #000) 12%, transparent);
	745	border-radius: 2px;
	746	overflow: hidden;
	747	transition: height .15s;
	748	}
	749	.audio-seek:hover .audio-seek-bar { height: 5px; }
	750	.audio-seek-fill {
	751	height: 100%;
	752	background: var(--accent, #c2410c);
	753	width: 0%;
	754	transition: width .1s linear;
	755	}
	756
	757	/* Volume — popup on hover */
	758	.audio-player-volume {
	759	position: relative;
	760	display: flex;
	761	align-items: center;
	762	}
	763	.audio-btn .icon-mute { display: none; }
	764	.audio-player.is-muted .audio-btn .icon-vol { display: none; }
	765	.audio-player.is-muted .audio-btn .icon-mute { display: block; }
	766	.audio-volume-popup {
	767	position: absolute;
	768	bottom: calc(100% + 8px);
	769	left: 50%;
	770	transform: translateX(-50%) scale(.95);
	771	transform-origin: bottom center;
	772	background: var(--paper, #fff);
	773	border: 1px solid var(--rule, rgba(0,0,0,.1));
	774	border-radius: 8px;
	775	padding: .75rem .5rem;
	776	box-shadow: 0 4px 16px rgba(0,0,0,.15);
	777	opacity: 0;
	778	pointer-events: none;
	779	transition: opacity .15s, transform .15s, visibility .15s;
	780	height: 110px;
	781	visibility: hidden;
	782	}
	783	/* Invisible bridge tussen knop en popup zodat hover niet breekt */
	784	.audio-volume-popup::after {
	785	content: '';
	786	position: absolute;
	787	bottom: -12px;
	788	left: -10px;
	789	right: -10px;
	790	height: 16px;
	791	}
	792	[data-theme="dark"] .audio-volume-popup {
	793	background: color-mix(in srgb, var(--paper, #111) 92%, #fff);
	794	}
	795	.audio-player-volume:hover .audio-volume-popup,
	796	.audio-player-volume:focus-within .audio-volume-popup,
	797	.audio-player-volume.is-open .audio-volume-popup {
	798	opacity: 1;
	799	visibility: visible;
	800	transform: translateX(-50%) scale(1);
	801	pointer-events: auto;
	802	}
	803	.audio-volume-popup input[type=range] {
	804	/* Standard vertical slider — replaces deprecated -webkit-appearance: slider-vertical. */
	805	writing-mode: vertical-lr;
	806	direction: rtl;
	807	width: 6px;
	808	height: 90px;
	809	accent-color: var(--accent, #c2410c);
	810	/* Grotere hit-area via pseudo-touch padding */
	811	padding: 0 12px;
	812	box-sizing: content-box;
	813	cursor: pointer;
	814	}
	815
	816	/* Mobile */
	817	@media (max-width: 720px) {
	818	.audio-player-inner {
	819	/* v9.0 — 3 cols: expand-trigger (cover+meta) \| controls \| volume */
	820	grid-template-columns: minmax(0, 1fr) auto auto;
	821	gap: .5rem;
	822	padding: .5rem .8rem;
	823	}
	824	.audio-player-progress {
	825	display: none;
	826	}
	827	.audio-player-cover { width: 40px; height: 40px; }
	828	.audio-btn-play { width: 34px; height: 34px; }
	829	body.has-audio-player .pcms-main { padding-bottom: 4.2rem; }
	830	/* Verberg titel-artiest op bijzonder smal, verstop volume op mobile */
	831	.audio-player-volume { display: none; }
	832	}
	833
	834	/* Ultra-small schermen (iPhone 4 = 320px; iPhone SE 1st gen = 320px;
	835	iPhone mini ~360px). v9.3 — alles vanaf 320px moet werken; daaronder
	836	accepteren we wel/niet. */
	837	@media (max-width: 380px) {
	838	.audio-player-inner {
	839	gap: .35rem;
	840	padding: .4rem .6rem;
	841	}
	842	.audio-player-expand-trigger {
	843	gap: .45rem;
	844	}
	845	.audio-player-cover { width: 36px; height: 36px; }
	846	.audio-player-title { font-size: .88rem; }
	847	.audio-player-artist { font-size: .72rem; }
	848	.audio-player-controls { gap: .15rem; }
	849	.audio-btn { width: 30px; height: 30px; }
	850	.audio-btn svg { width: 16px; height: 16px; }
	851	.audio-btn-play { width: 32px; height: 32px; }
	852	.audio-btn-play svg { width: 18px; height: 18px; }
	853
	854	/* v9.3 — Tracklist compact op smalle telefoons.
	855	Leader 28×28, kleinere gap, padding strakker. Tijd in monoscript blijft
	856	leesbaar; titel krijgt 5-10px meer ruimte. */
	857	.pat-row {
	858	grid-template-columns: 28px 1fr auto;
	859	gap: .5rem;
	860	padding: .45rem .65rem;
	861	}
	862	.pat-row .pat-num,
	863	.pat-row .pat-cover {
	864	width: 28px;
	865	height: 28px;
	866	}
	867	.pat-row::before {
	868	left: .65rem;
	869	width: 28px; height: 28px;
	870	-webkit-mask-size: 22px 22px;
	871	mask-size: 22px 22px;
	872	}
	873	.pat-row .pat-title { font-size: .92rem; }
	874	.pat-row .pat-artist { font-size: .74rem; }
	875	.pat-row .pat-duration { font-size: .74rem; }
	876
	877	/* v9.3 — Album binnen post: cover + tracks compacter */
	878	.post-album-cover {
	879	width: 90px;
	880	height: 90px;
	881	}
	882	.post-album-header {
	883	gap: .65rem;
	884	padding: .65rem;
	885	}
	886	.post-album-title { font-size: 1rem; }
	887
	888	/* v9.3 — Profile-header bovenin compacter */
	889	.profile-photo {
	890	width: 48px !important;
	891	height: 48px !important;
	892	}
	893	.profile-content {
	894	gap: .65rem;
	895	}
	896
	897	/* v9.3 — Install-app modal: minder padding, kleinere knoppen */
	898	.install-modal-inner {
	899	padding: 1rem;
	900	}
	901	.install-app-btn {
	902	padding: .55rem 1rem;
	903	font-size: .9rem;
	904	}
	905
[d5b9d2a]	906	/* v9.3 — Forceer niets schuift horizontaal weg.
	907	clip i.p.v. hidden: clipt zonder een scroll-container te maken, zodat
	908	position:fixed (bottom-tab) niet meeschuift bij scrollen op mobiel. */
[7bc636b]	909	body, html {
[d5b9d2a]	910	overflow-x: hidden; /* fallback iOS <16 */
	911	overflow-x: clip;
[7bc636b]	912	}
	913	}
	914
	915	/* iPhone 4 / iPhone SE 1st gen / iPhone 5/5s (320px) — strakste niveau */
	916	@media (max-width: 340px) {
	917	.audio-player-inner {
	918	padding: .35rem .5rem;
	919	}
	920	.audio-player-artist { display: none; }
	921	.audio-player-cover { width: 32px; height: 32px; }
	922	body.has-audio-player .pcms-main { padding-bottom: 3.6rem; }
	923	/* Expand-sheet wat strakker */
	924	.audio-sheet-panel {
	925	padding: .5rem 1rem 1.5rem;
	926	}
	927	.audio-sheet-title { font-size: 1.2rem; }
	928	.audio-sheet-artist { font-size: .9rem; }
	929	.audio-sheet-play { width: 60px; height: 60px; }
	930	.audio-sheet-play svg { width: 26px; height: 26px; }
	931	.audio-sheet-btn { width: 42px; height: 42px; }
	932	.audio-sheet-btn svg { width: 24px; height: 24px; }
	933	.audio-sheet-controls { gap: 1rem; }
	934
	935	/* v9.3 — Op iPhone 4 (320px): tracklist nog strakker */
	936	.pat-row {
	937	grid-template-columns: 26px 1fr auto;
	938	gap: .4rem;
	939	padding: .4rem .55rem;
	940	}
	941	.pat-row .pat-num,
	942	.pat-row .pat-cover {
	943	width: 26px;
	944	height: 26px;
	945	}
	946	.pat-row::before {
	947	left: .55rem;
	948	width: 26px; height: 26px;
	949	-webkit-mask-size: 20px 20px;
	950	mask-size: 20px 20px;
	951	}
	952	.pat-row .pat-artist {
	953	display: none; /* op extreem smal weglaten ten gunste van titel */
	954	}
	955	.pat-row .pat-title { font-size: .9rem; }
	956	.pat-row .pat-duration { font-size: .72rem; }
	957
	958	/* Container padding reduceren voor max content-breedte */
	959	.container {
	960	padding-inline: 1rem !important;
	961	}
	962
	963	/* Post-cover (de grote bovenste) krimpen */
	964	.post-cover {
	965	max-height: 200px;
	966	}
	967	}
	968
	969	/* ============================================================
	970	v9.0 — Audio player expand-sheet (Spotify-style "now playing")
	971	Slide-up half-screen met grote cover, track info, big controls
	972	============================================================ */
	973	.audio-sheet {
	974	position: fixed;
	975	inset: 0;
	976	z-index: 1100;
	977	pointer-events: none;
	978	opacity: 0;
	979	transition: opacity .25s ease;
	980	}
	981	.audio-sheet.is-open {
	982	pointer-events: auto;
	983	opacity: 1;
	984	}
	985	.audio-sheet-backdrop {
	986	position: absolute;
	987	inset: 0;
	988	/* v9.3 — Blur en overlay-dim allebei via CSS-variabele --pcms-sheet-progress
	989	(1 = volledig, 0 = weg). JS update tijdens drag; CSS-transition pakt
	990	open/close af. Sterke blur (24px) zodat 't effect goed zichtbaar is. */
	991	background: rgb(0 0 0 / calc(.4 * var(--pcms-sheet-progress, 1)));
	992	backdrop-filter: blur(calc(24px * var(--pcms-sheet-progress, 1)));
	993	-webkit-backdrop-filter: blur(calc(24px * var(--pcms-sheet-progress, 1)));
	994	transition: background .25s ease,
	995	backdrop-filter .25s ease,
	996	-webkit-backdrop-filter .25s ease;
	997	will-change: backdrop-filter, background;
	998	}
	999	/* Tijdens drag: instant updates vanuit JS, geen transition */
	1000	.audio-sheet-panel.is-dragging ~ .audio-sheet-backdrop,
	1001	.audio-sheet-backdrop.is-dragging {
	1002	transition: none;
	1003	}
	1004	.audio-sheet-panel {
	1005	position: absolute;
	1006	left: 0; right: 0; bottom: 0;
	1007	background: var(--paper, #fff);
	1008	border-top-left-radius: 20px;
	1009	border-top-right-radius: 20px;
	1010	box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
	1011	padding: .75rem 1.5rem 2rem;
	1012	max-height: 85vh;
	1013	overflow-y: auto;
	1014	/* v9.2.1 — scroll blijft binnen panel, geen chaining naar body (iOS-proof) */
	1015	overscroll-behavior: contain;
	1016	touch-action: pan-y;
	1017	/* Hide scrollbar but keep scrollable */
	1018	scrollbar-width: none; /* Firefox */
	1019	-ms-overflow-style: none; /* IE/Edge */
	1020	transform: translateY(100%);
	1021	transition: transform .3s cubic-bezier(.22, .9, .3, 1),
	1022	opacity .3s cubic-bezier(.22, .9, .3, 1);
	1023	display: flex;
	1024	flex-direction: column;
	1025	gap: 1rem;
	1026	color: var(--ink);
	1027	}
	1028	.audio-sheet-panel::-webkit-scrollbar {
	1029	display: none; /* Chrome/Safari */
	1030	}
	1031	/* Body scroll lock wanneer sheet open is */
	1032	body.audio-sheet-locked {
	1033	overflow: hidden;
	1034	}
	1035	.audio-sheet.is-open .audio-sheet-panel {
	1036	transform: translateY(0);
	1037	}
	1038
	1039	/* v9.3 — Drag-zone: pill bovenaan + cover. Hele strook is touch-target voor
	1040	swipe-down-to-close. Pull-to-refresh is uitgeschakeld op html-niveau dus
	1041	geen interferentie. Onder de cover (info/progress/controls/queue) werkt
	1042	normale touch — knoppen, scroll in queue, etc. */
	1043	.audio-sheet-drag-zone {
	1044	flex-shrink: 0;
	1045	display: flex;
	1046	flex-direction: column;
	1047	align-items: stretch;
	1048	gap: 1rem;
	1049	/* v9.3 — touch-action: pan-y staat verticale scroll toe (zodat queue
	1050	eronder scrollt als gebruiker omhoog veegt over cover). Onze JS
	1051	detecteert intent: alleen omlaag-swipe vanaf de top sluit de sheet,
	1052	omhoog-swipe = scroll. */
	1053	touch-action: pan-y;
	1054	user-select: none;
	1055	-webkit-user-select: none;
	1056	cursor: grab;
	1057	margin: -.75rem -1.5rem 0;
	1058	padding: .75rem 1.5rem 0;
	1059	}
	1060	.audio-sheet-drag-zone:active { cursor: grabbing; }
	1061
	1062	/* v9.4 — Drag alleen actief op touch-only apparaten (telefoons).
	1063	Desktop met muis + tablets met muis-cursor → geen drag-grip,
	1064	gebruiker sluit via × pill-knop bovenin of klik op backdrop. */
	1065	@media (hover: hover) and (pointer: fine) {
	1066	.audio-sheet-drag-zone {
	1067	touch-action: auto;
	1068	cursor: default;
	1069	pointer-events: none;
	1070	}
	1071	/* Pill blijft klikbaar als sluit-knop */
	1072	.audio-sheet-drag-zone .audio-sheet-handle {
	1073	pointer-events: auto;
	1074	cursor: pointer;
	1075	}
	1076	}
	1077
	1078	/* Pill (handle) gecentreerd boven de cover */
	1079	.audio-sheet-drag-zone .audio-sheet-handle {
	1080	margin: 0 auto .25rem;
	1081	}
	1082
	1083	/* Tijdens dragging: panel volgt vinger realtime; geen transition */
	1084	.audio-sheet-panel.is-dragging {
	1085	transition: none;
	1086	will-change: transform;
	1087	}
	1088	[data-theme="dark"] .audio-sheet-panel {
	1089	background: var(--paper, #1a1a1a);
	1090	box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
	1091	}
	1092	/* Drag-handle + close button in één */
	1093	.audio-sheet-handle {
	1094	display: block;
	1095	width: 48px;
	1096	height: 4px;
	1097	border-radius: 2px;
	1098	background: color-mix(in srgb, var(--ink, #000) 25%, transparent);
	1099	border: none;
	1100	margin: 0 auto .5rem;
	1101	padding: 0;
	1102	cursor: pointer;
	1103	flex-shrink: 0;
	1104	position: relative;
	1105	}
	1106	.audio-sheet-handle::before {
	1107	content: "";
	1108	position: absolute;
	1109	/* v9.3 — Drag-strip wrapper neemt nu de hit-area-rol over. ::before
	1110	blijft als kleine extra padding voor click-comfort. */
	1111	inset: -10px -20px;
	1112	}
	1113	.audio-sheet-handle:hover {
	1114	background: color-mix(in srgb, var(--ink, #000) 45%, transparent);
	1115	}
	1116	/* Grote cover */
	1117	.audio-sheet-cover {
	1118	width: 100%;
	1119	max-width: 360px;
	1120	aspect-ratio: 1/1;
	1121	margin: 0 auto;
	1122	border-radius: 12px;
	1123	background: linear-gradient(135deg,
	1124	var(--accent, #c2410c),
	1125	color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
	1126	background-size: cover;
	1127	background-position: center;
	1128	box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
	1129	flex-shrink: 0;
	1130	}
	1131	[data-theme="dark"] .audio-sheet-cover {
	1132	box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
	1133	}
	1134	.audio-sheet-info {
	1135	text-align: center;
	1136	padding: 0 1rem;
	1137	}
	1138	.audio-sheet-title {
	1139	font-family: var(--font-display, inherit);
	1140	font-size: 1.5rem;
	1141	font-weight: 600;
	1142	line-height: 1.2;
	1143	margin: 0 0 .25rem;
	1144	letter-spacing: -0.01em;
	1145	color: var(--ink);
	1146	}
	1147	.audio-sheet-artist {
	1148	font-size: 1rem;
	1149	color: var(--ink-muted, var(--ink));
	1150	opacity: .7;
	1151	}
	1152	.audio-sheet-album {
	1153	margin-top: .35rem;
	1154	font-size: .82rem;
	1155	opacity: .5;
	1156	text-transform: uppercase;
	1157	letter-spacing: .05em;
	1158	}
	1159	.audio-sheet-album:empty { display: none; }
	1160	/* Progress + time */
	1161	.audio-sheet-progress {
	1162	display: grid;
	1163	grid-template-columns: auto 1fr auto;
	1164	gap: .6rem;
	1165	align-items: center;
	1166	padding: 0 .5rem;
	1167	}
	1168	.audio-sheet-progress .audio-seek { width: 100%; }
	1169	.audio-sheet-progress .audio-time {
	1170	font-size: .78rem;
	1171	opacity: .55;
	1172	}
	1173	/* Grote controls */
	1174	.audio-sheet-controls {
	1175	display: flex;
	1176	align-items: center;
	1177	justify-content: center;
	1178	gap: 1.75rem;
	1179	}
	1180	.audio-sheet-btn {
	1181	width: 48px;
	1182	height: 48px;
	1183	padding: 0;
	1184	}
	1185	.audio-sheet-btn svg { width: 28px; height: 28px; }
	1186	.audio-sheet-play {
	1187	width: 72px;
	1188	height: 72px;
	1189	border-radius: 50%;
	1190	background: var(--accent, #c2410c);
	1191	color: var(--paper, #fff);
	1192	border: none;
	1193	cursor: pointer;
	1194	display: inline-flex;
	1195	align-items: center;
	1196	justify-content: center;
	1197	transition: transform .1s;
	1198	}
	1199	.audio-sheet-play:hover { transform: scale(1.05); }
	1200	.audio-sheet-play:active { transform: scale(.95); }
	1201	.audio-sheet-play svg { width: 30px; height: 30px; }
	1202	.audio-sheet-play .icon-pause { display: none; }
	1203	/* v9.2.1 — sheet staat nu als sibling van .audio-player buiten de balk,
	1204	dus ancestor-selector .audio-player.is-playing werkt niet meer voor de
	1205	sheet. JS zet is-playing ook rechtstreeks op sheet.play (regel 551 app.js). */
	1206	.audio-sheet-play.is-playing .icon-play { display: none; }
	1207	.audio-sheet-play.is-playing .icon-pause { display: block; }
	1208	/* v9.2.1 — fallback: als sheet buiten alle ancestors zit, tag body */
	1209	body.audio-is-playing .audio-sheet-play .icon-play { display: none; }
	1210	body.audio-is-playing .audio-sheet-play .icon-pause { display: block; }
	1211
	1212	/* v9.3 — Loading state: roterende spiraal (het roboburr logo).
	1213	Button-achtergrond wordt transparant, play/pause svgs verbergen, en de
	1214	spiraal verschijnt als roterende background via ::after pseudo-element.
	1215	Cool-effect: zachte hue-drift geeft de kleur een levend gevoel. */
	1216	.audio-player.is-loading .audio-btn-play,
	1217	.audio-player.is-loading .audio-sheet-play,
	1218	body.audio-is-loading .audio-sheet-play,
	1219	.pat-row.is-loading {
	1220	pointer-events: none;
	1221	}
	1222	.audio-player.is-loading .audio-btn-play,
	1223	.audio-player.is-loading .audio-sheet-play,
	1224	body.audio-is-loading .audio-sheet-play {
	1225	background: transparent;
	1226	box-shadow: none;
	1227	}
	1228
	1229	/* v9.3 — Play/pause-icons in de player-knoppen faden smooth uit/in tijdens
	1230	loading. Pseudo-spiraal faded tegelijkertijd in (geen instant pop). */
	1231	.audio-btn-play > svg,
	1232	.audio-sheet-play > svg {
	1233	transition: opacity .35s cubic-bezier(.4, 0, .2, 1),
	1234	transform .35s cubic-bezier(.4, 0, .2, 1);
	1235	}
	1236	.audio-player.is-loading .audio-btn-play > svg,
	1237	.audio-player.is-loading .audio-sheet-play > svg,
	1238	body.audio-is-loading .audio-sheet-play > svg {
	1239	opacity: 0;
	1240	transform: scale(.7);
	1241	}
	1242	.pat-row.is-loading .pat-play-icon > svg,
	1243	.pat-row.is-loading .pat-num,
	1244	.pat-row.is-loading .pat-cover {
	1245	opacity: 0;
	1246	}
	1247
	1248	/* v9.3 — Spiraal als pseudo-element, ALTIJD aanwezig met opacity 0 default.
	1249	Bij is-loading faden 'ie smooth in (opacity + scale-bounce), bij klaar
	1250	faden 'ie weer uit. Pure accent-kleur, geen hue-drift. */
	1251	.audio-player .audio-btn-play,
	1252	.audio-player .audio-sheet-play,
	1253	.pat-row .pat-play-icon {
	1254	position: relative;
	1255	}
	1256	.audio-btn-play::after,
	1257	.audio-sheet-play::after {
	1258	content: "";
	1259	position: absolute;
	1260	inset: 0;
	1261	background-color: var(--accent, #c2410c);
	1262	-webkit-mask: url('/assets/spinner.svg') center/contain no-repeat;
	1263	mask: url('/assets/spinner.svg') center/contain no-repeat;
	1264	opacity: 0;
	1265	transform: scale(.6);
	1266	transition: opacity .4s cubic-bezier(.4, 0, .2, 1),
	1267	transform .4s cubic-bezier(.34, 1.56, .64, 1);
	1268	pointer-events: none;
	1269	animation: pcms-spiral-spin 1.2s linear infinite paused;
	1270	will-change: opacity, transform;
	1271	}
	1272	.audio-player.is-loading .audio-btn-play::after,
	1273	.audio-player.is-loading .audio-sheet-play::after,
	1274	body.audio-is-loading .audio-sheet-play::after {
	1275	opacity: 1;
	1276	transform: scale(1);
	1277	animation-play-state: running;
	1278	}
	1279	/* Pat-row keeps its existing ::before spinner from earlier change.
	1280	Voor backward-compat als oude HTML nog .pat-play-icon::after spinner had */
	1281	.pat-row.is-loading .pat-play-icon::after {
	1282	content: "";
	1283	position: absolute;
	1284	inset: 0;
	1285	background-color: var(--accent, #c2410c);
	1286	-webkit-mask: url('/assets/spinner.svg') center/contain no-repeat;
	1287	mask: url('/assets/spinner.svg') center/contain no-repeat;
	1288	opacity: 1;
	1289	animation: pcms-spiral-spin 1.2s linear infinite;
	1290	pointer-events: none;
	1291	}
	1292	@keyframes pcms-spiral-spin {
	1293	to { transform: scale(1) rotate(-360deg); }
	1294	}
	1295	/* Queue list */
	1296	.audio-sheet-queue {
	1297	margin-top: .5rem;
	1298	padding-top: 1rem;
	1299	border-top: 1px solid var(--rule);
	1300	}
	1301	.audio-sheet-queue-label {
	1302	font-size: .75rem;
	1303	text-transform: uppercase;
	1304	letter-spacing: .08em;
	1305	opacity: .5;
	1306	font-weight: 600;
	1307	margin-bottom: .5rem;
	1308	padding: 0 .5rem;
	1309	}
	1310	.audio-sheet-queue-list {
	1311	list-style: none;
	1312	padding: 0;
	1313	margin: 0;
	1314	display: flex;
	1315	flex-direction: column;
	1316	gap: 2px;
	1317	}
	1318	.audio-sheet-queue-item {
	1319	display: flex;
	1320	align-items: center;
	1321	gap: .75rem;
	1322	padding: .5rem .6rem;
	1323	border-radius: 6px;
	1324	cursor: pointer;
	1325	transition: background .15s;
	1326	background: none;
	1327	border: none;
	1328	width: 100%;
	1329	color: inherit;
	1330	font: inherit;
	1331	text-align: left;
	1332	}
	1333	.audio-sheet-queue-item:hover {
	1334	background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
	1335	}
	1336	.audio-sheet-queue-item.is-current {
	1337	background: color-mix(in srgb, var(--accent, #c2410c) 14%, transparent);
	1338	color: var(--accent, #c2410c);
	1339	}
	1340	.audio-sheet-queue-cover {
	1341	width: 36px;
	1342	height: 36px;
	1343	border-radius: 4px;
	1344	background-size: cover;
	1345	background-position: center;
	1346	background-color: var(--rule);
	1347	flex-shrink: 0;
	1348	}
	1349	.audio-sheet-queue-meta {
	1350	flex: 1;
	1351	min-width: 0;
	1352	display: flex;
	1353	flex-direction: column;
	1354	}
	1355	.audio-sheet-queue-title {
	1356	font-size: .9rem;
	1357	font-weight: 500;
	1358	overflow: hidden;
	1359	text-overflow: ellipsis;
	1360	white-space: nowrap;
	1361	}
	1362	.audio-sheet-queue-artist {
	1363	font-size: .75rem;
	1364	opacity: .55;
	1365	overflow: hidden;
	1366	text-overflow: ellipsis;
	1367	white-space: nowrap;
	1368	}
	1369	.audio-sheet-queue-duration {
	1370	font-family: ui-monospace, monospace;
	1371	font-size: .72rem;
	1372	opacity: .5;
	1373	flex-shrink: 0;
	1374	}
	1375
	1376	/* Desktop: sheet is max 480px wide and centered for bigger screens */
	1377	@media (min-width: 720px) {
	1378	.audio-sheet-panel {
	1379	left: 50%;
	1380	right: auto;
	1381	width: 480px;
	1382	transform: translate(-50%, 100%);
	1383	border-top-left-radius: 20px;
	1384	border-top-right-radius: 20px;
	1385	}
	1386	.audio-sheet.is-open .audio-sheet-panel {
	1387	transform: translate(-50%, 0);
	1388	}
	1389	}
	1390
	1391	/* v9.2.1 — Mobiel: sheet is fullscreen, alleen te sluiten via handle-knop bovenin.
	1392	Geen rounded corners, volledige viewport, safe-area voor notches/status bar. */
	1393	@media (max-width: 719.98px) {
	1394	.audio-sheet-panel {
	1395	inset: 0;
	1396	max-height: none;
	1397	border-top-left-radius: 0;
	1398	border-top-right-radius: 0;
	1399	box-shadow: none;
	1400	padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
	1401	padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
	1402	}
	1403	/* v9.3 — Backdrop blijft visible op mobile zodat drag-gesture de blur
	1404	laat doorschemeren naar helder. */
	1405	}
	1406
	1407	/* ============================================================
	1408	Mobile masthead + pagination
	1409	============================================================ */
	1410	@media (max-width: 600px) {
	1411	.masthead-inner { gap: .35rem; }
	1412	.site-title { font-size: 1.2rem; }
	1413	.site-subtitle { display: none; }
	1414	.top-nav { gap: .1rem; }
	1415	.nav-label { display: none; }
	1416	.nav-btn, .nav-link {
	1417	padding: .4rem .45rem;
	1418	min-width: 38px;
	1419	justify-content: center;
	1420	}
	1421	.pagination { flex-direction: column; gap: .5rem; }
	1422	.pagination-item { width: 100%; }
	1423	}
	1424	@media (max-width: 400px) {
	1425	.masthead { padding: calc(.5rem + var(--safe-top)) 0 .5rem; }
	1426	.masthead-inner { gap: .25rem; }
	1427	.site-title { font-size: 1.05rem; }
	1428	.nav-btn, .nav-link {
	1429	padding: .35rem .3rem;
	1430	min-width: 34px;
	1431	}
	1432	.nav-btn .icon, .nav-link .icon { width: 1rem; height: 1rem; }
	1433	/* PWA-install knop verbergen op klein scherm — kan ook via menu */
	1434	.nav-install-btn { display: none !important; }
	1435	}
	1436	@media (max-width: 340px) {
	1437	.site-title { font-size: .95rem; }
	1438	.nav-btn, .nav-link { padding: .3rem .25rem; min-width: 30px; }
	1439	/* Theme-toggle verbergen op ultra-klein — kan via user-menu */
	1440	[data-pcms-theme-toggle] { display: none; }
	1441	}
	1442
	1443	.post-date-ago {
	1444	margin-left: .5em;
	1445	opacity: .6;
	1446	font-size: .9em;
	1447	font-style: italic;
	1448	text-transform: none;
	1449	letter-spacing: 0;
	1450	}
	1451
	1452	/* HTMX loading indicator — subtle progress-bar aan de top van de content */
	1453	.pcms-loading {
	1454	position: fixed;
	1455	top: 0; left: 0;
	1456	height: 2px;
	1457	width: 0%;
	1458	background: var(--accent, #c2410c);
	1459	z-index: 9999;
	1460	transition: width .3s ease, opacity .2s;
	1461	opacity: 0;
	1462	pointer-events: none;
	1463	}
	1464	.pcms-loading.htmx-request {
	1465	opacity: 1;
	1466	width: 80%;
	1467	transition: width 6s cubic-bezier(.1,.9,.2,1), opacity .2s;
	1468	}
	1469	/* subtile fade wanneer content gewisseld wordt */
	1470	#pcms-main.htmx-swapping {
	1471	opacity: .5;
	1472	transition: opacity .15s;
	1473	}
	1474
	1475	/* Masthead brand group (site-title + optional tagline) */
	1476	.masthead-brand { display: flex; flex-direction: column; gap: 2px; }
	1477	.site-subtitle {
	1478	font-family: var(--font-ui, inherit);
	1479	font-size: .75rem;
	1480	color: var(--ink-muted, rgba(0,0,0,.55));
	1481	letter-spacing: 0;
	1482	line-height: 1.3;
	1483	}
	1484
	1485	/* ============================================================
	1486	v7.3 — TAGS, TYPE, ARCHIEF, ZOEK, RELATED, SPECIAL VIEWS
	1487	============================================================ */
	1488
	1489	/* Post-meta row — datum + type-chip + tags samen onder de titel */
	1490	.post-meta {
	1491	display: flex;
	1492	flex-wrap: wrap;
	1493	align-items: center;
	1494	gap: .5rem .85rem;
	1495	margin-top: .5rem;
	1496	}
	1497	.post-meta .post-date { margin: 0; }
	1498
	1499	/* Type-chip (groter, als een label) */
	1500	.post-type-chip {
	1501	display: inline-flex;
	1502	align-items: center;
	1503	padding: .2rem .6rem;
	1504	background: color-mix(in srgb, var(--accent) 10%, transparent);
	1505	color: var(--accent);
	1506	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
	1507	border-radius: 999px;
	1508	font-family: var(--font-ui);
	1509	font-size: .72rem;
	1510	font-weight: 600;
	1511	text-decoration: none;
	1512	letter-spacing: .04em;
	1513	text-transform: uppercase;
	1514	transition: background .15s;
	1515	}
	1516	.post-type-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
	1517
	1518	/* Tag-chips — klein, subtiel, gelinkt */
	1519	.post-tags, .post-list-tags {
	1520	display: inline-flex;
	1521	flex-wrap: wrap;
	1522	gap: .3rem;
	1523	}
	1524	.tag-chip {
	1525	display: inline-block;
	1526	padding: .15rem .55rem;
	1527	background: color-mix(in srgb, var(--ink) 5%, transparent);
	1528	color: var(--ink-muted);
	1529	border-radius: 999px;
	1530	font-family: var(--font-ui);
	1531	font-size: .72rem;
	1532	font-weight: 500;
	1533	text-decoration: none;
	1534	transition: background .15s, color .15s;
	1535	}
	1536	.tag-chip:hover {
	1537	background: color-mix(in srgb, var(--accent) 12%, transparent);
	1538	color: var(--accent);
	1539	}
	1540
	1541	/* ============================================================
	1542	SPECIAL PAGES (archief, tag, type, zoek)
	1543	============================================================ */
	1544	.special-page .post-header { margin-bottom: 2rem; }
	1545	.special-eyebrow {
	1546	font-size: .72rem;
	1547	color: var(--ink-muted);
	1548	text-transform: uppercase;
	1549	letter-spacing: .12em;
	1550	margin: 0 0 .25rem;
	1551	}
	1552
	1553	/* Archief: jaar-overzicht */
	1554	.archive-years {
	1555	display: flex;
	1556	flex-direction: column;
	1557	gap: 2rem;
	1558	}
	1559	.archive-year h2 {
	1560	font-family: var(--font-display);
	1561	font-size: 1.75rem;
	1562	margin: 0 0 .75rem;
	1563	}
	1564	.archive-year h2 a {
	1565	color: var(--ink);
	1566	text-decoration: none;
	1567	}
	1568	.archive-year h2 a:hover { color: var(--accent); }
	1569	.archive-year h2 .admin-muted { font-size: .9rem; font-weight: normal; color: var(--ink-muted); }
	1570	.archive-months {
	1571	list-style: none;
	1572	padding: 0; margin: 0;
	1573	display: grid;
	1574	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	1575	gap: .5rem;
	1576	}
	1577	.archive-months li {
	1578	display: flex;
	1579	align-items: center;
	1580	gap: .4rem;
	1581	padding: .55rem .75rem;
	1582	background: color-mix(in srgb, var(--ink) 3%, transparent);
	1583	border-radius: var(--radius);
	1584	transition: background .15s;
	1585	}
	1586	.archive-months li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
	1587	.archive-months a {
	1588	color: var(--ink);
	1589	text-decoration: none;
	1590	font-weight: 500;
	1591	font-size: .95rem;
	1592	}
	1593	.archive-months .admin-muted { font-size: .75rem; color: var(--ink-muted); margin-left: auto; }
	1594
	1595	/* Archief: jaar drill-down */
	1596	.archive-month-list {
	1597	display: flex;
	1598	flex-direction: column;
	1599	gap: 2rem;
	1600	}
	1601	.archive-month h2 {
	1602	font-family: var(--font-display);
	1603	font-size: 1.35rem;
	1604	margin: 0 0 .5rem;
	1605	padding-bottom: .35rem;
	1606	border-bottom: 1px solid var(--rule);
	1607	}
	1608	.archive-month h2 a {
	1609	color: var(--ink);
	1610	text-decoration: none;
	1611	}
	1612	.archive-month h2 a:hover { color: var(--accent); }
	1613
	1614	/* Compact post-list (gebruikt in archief drill-down per maand) */
	1615	.post-compact-list {
	1616	list-style: none;
	1617	padding: 0; margin: 0;
	1618	display: flex;
	1619	flex-direction: column;
	1620	}
	1621	.post-compact-list li {
	1622	border-bottom: 1px solid var(--rule);
	1623	}
	1624	.post-compact-list li:last-child { border-bottom: none; }
	1625	.post-compact-list a {
	1626	display: grid;
	1627	grid-template-columns: 3em 1fr;
	1628	gap: .75rem;
	1629	padding: .6rem .2rem;
	1630	text-decoration: none;
	1631	color: var(--ink);
	1632	transition: background .12s;
	1633	border-radius: 4px;
	1634	}
	1635	.post-compact-list a:hover {
	1636	background: color-mix(in srgb, var(--accent) 6%, transparent);
	1637	}
	1638	.post-compact-date {
	1639	color: var(--ink-muted);
	1640	font-size: .8rem;
	1641	align-self: center;
	1642	}
	1643	.post-compact-title { font-weight: 500; font-size: 1rem; align-self: center; }
	1644	.post-compact-list.large a { grid-template-columns: 4em 1fr; padding: .8rem .3rem; }
	1645	.post-compact-list.large .post-compact-title { font-family: var(--font-display); font-size: 1.15rem; }
	1646	.post-compact-excerpt {
	1647	grid-column: 2;
	1648	color: var(--ink-muted);
	1649	font-size: .88rem;
	1650	line-height: 1.5;
	1651	}
	1652
	1653	/* Post-list (gebruikt in tag / type / zoek pagina's) */
	1654	.post-list {
	1655	list-style: none;
	1656	padding: 0; margin: 0;
	1657	display: flex;
	1658	flex-direction: column;
	1659	gap: 1.5rem;
	1660	}
	1661	.post-list-item {
	1662	display: grid;
	1663	grid-template-columns: 120px 1fr;
	1664	gap: 1.25rem;
	1665	padding-bottom: 1.5rem;
	1666	border-bottom: 1px solid var(--rule);
	1667	}
	1668	.post-list-item:last-child { border-bottom: none; }
	1669	.post-list-item:has(> .post-list-cover + .post-list-body) { grid-template-columns: 120px 1fr; }
	1670	.post-list-item:not(:has(.post-list-cover)) { grid-template-columns: 1fr; }
	1671	.post-list-cover {
	1672	display: block;
	1673	aspect-ratio: 1;
	1674	overflow: hidden;
	1675	border-radius: var(--radius);
	1676	}
	1677	.post-list-cover img {
	1678	width: 100%; height: 100%;
	1679	object-fit: cover;
	1680	display: block;
	1681	}
	1682	.post-list-body { display: flex; flex-direction: column; gap: .35rem; }
	1683	.post-list-meta {
	1684	color: var(--ink-muted);
	1685	font-size: .75rem;
	1686	display: flex; gap: .35rem; align-items: center;
	1687	}
	1688	.post-list-title {
	1689	font-family: var(--font-display);
	1690	font-size: 1.3rem;
	1691	font-weight: 450;
	1692	margin: 0;
	1693	line-height: 1.2;
	1694	}
	1695	.post-list-title a {
	1696	color: var(--ink);
	1697	text-decoration: none;
	1698	}
	1699	.post-list-title a:hover { color: var(--accent); }
	1700	.post-list-excerpt {
	1701	color: var(--ink-muted);
	1702	font-size: .95rem;
	1703	margin: 0;
	1704	line-height: 1.5;
	1705	}
	1706
	1707	/* Zoek-formulier binnen special view */
	1708	.search-form {
	1709	display: flex;
	1710	gap: .5rem;
	1711	margin-bottom: 2rem;
	1712	}
	1713	.search-form input[type=search] {
	1714	flex: 1;
	1715	padding: .75rem 1rem;
	1716	background: var(--paper-2);
	1717	border: 1px solid var(--rule);
	1718	border-radius: var(--radius);
	1719	font: inherit;
	1720	color: var(--ink);
	1721	}
	1722	.search-form input[type=search]:focus {
	1723	outline: none;
	1724	border-color: var(--accent);
	1725	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
	1726	}
	1727
	1728	/* ============================================================
	1729	SEARCH OVERLAY (masthead → full-screen zoekbalk)
	1730	============================================================ */
	1731	.search-overlay {
	1732	position: fixed;
	1733	inset: 0;
	1734	background: color-mix(in srgb, var(--ink) 50%, transparent);
	1735	z-index: 1500;
	1736	display: flex;
	1737	justify-content: center;
	1738	align-items: flex-start;
	1739	padding-top: 10vh;
	1740	backdrop-filter: blur(6px);
	1741	-webkit-backdrop-filter: blur(6px);
	1742	}
	1743	.search-overlay[hidden] { display: none; }
	1744	.search-overlay-form {
	1745	width: min(90vw, 600px);
	1746	background: var(--paper);
	1747	border-radius: calc(var(--radius) * 1.5);
	1748	padding: .75rem 1rem;
	1749	display: flex;
	1750	align-items: center;
	1751	gap: .6rem;
	1752	box-shadow: 0 20px 60px rgba(0,0,0,.3);
	1753	border: 1px solid var(--rule);
	1754	}
	1755	.search-overlay-form .icon {
	1756	width: 1.2rem; height: 1.2rem;
	1757	color: var(--ink-muted);
	1758	flex-shrink: 0;
	1759	}
	1760	.search-overlay-form input[type=search] {
	1761	flex: 1;
	1762	background: transparent;
	1763	border: none;
	1764	font-family: var(--font-body);
	1765	font-size: 1.1rem;
	1766	color: var(--ink);
	1767	padding: .5rem 0;
	1768	}
	1769	.search-overlay-form input[type=search]:focus { outline: none; }
	1770	.search-overlay-form .nav-btn {
	1771	background: transparent;
	1772	border: none;
	1773	color: var(--ink-muted);
	1774	cursor: pointer;
	1775	font-size: 1.25rem;
	1776	line-height: 1;
	1777	padding: .3rem .5rem;
	1778	}
	1779	.search-overlay-form .nav-btn:hover { color: var(--ink); }
	1780	body.search-open { overflow: hidden; }
	1781
	1782	/* ============================================================
	1783	RELATED POSTS (onder elke post-view)
	1784	============================================================ */
	1785	.related-posts {
	1786	margin-top: 2.5rem;
	1787	padding-top: 2rem;
	1788	border-top: 1px solid var(--rule);
	1789	}
	1790	.related-title {
	1791	font-family: var(--font-mono);
	1792	font-size: .7rem;
	1793	color: var(--ink-muted);
	1794	text-transform: uppercase;
	1795	letter-spacing: .12em;
	1796	margin: 0 0 1rem;
	1797	}
	1798	.related-grid {
	1799	list-style: none;
	1800	padding: 0; margin: 0;
	1801	display: grid;
	1802	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	1803	gap: 1rem;
	1804	}
	1805	.related-grid a {
	1806	display: flex;
	1807	flex-direction: column;
	1808	gap: .5rem;
	1809	text-decoration: none;
	1810	color: var(--ink);
	1811	border: 1px solid var(--rule);
	1812	border-radius: var(--radius);
	1813	overflow: hidden;
	1814	transition: border-color .15s, transform .15s;
	1815	height: 100%;
	1816	}
	1817	.related-grid a:hover {
	1818	border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
	1819	transform: translateY(-2px);
	1820	}
	1821	.related-cover {
	1822	display: block;
	1823	aspect-ratio: 16/10;
	1824	background-size: cover;
	1825	background-position: center;
	1826	background-color: var(--paper-2);
	1827	}
	1828
	1829	/* v9.4 — Wanneer related-cover ook .grid-tile-gradient class heeft (lege cover
	1830	fallback), erft 'ie automatisch de hue/gradient/title styling van grid-tiles.
	1831	Geen aparte related-cover-gradient meer nodig. */
	1832	.related-body {
	1833	display: flex;
	1834	flex-direction: column;
	1835	gap: .25rem;
	1836	padding: .6rem .75rem .9rem;
	1837	}
	1838	.related-meta { color: var(--ink-muted); font-size: .7rem; }
	1839	.related-name {
	1840	font-family: var(--font-display);
	1841	font-weight: 450;
	1842	font-size: 1rem;
	1843	line-height: 1.25;
	1844	}
	1845
	1846	/* ============================================================
	1847	MOBILE TWEAKS voor v7.3
	1848	============================================================ */
	1849	@media (max-width: 600px) {
	1850	.post-list-item { grid-template-columns: 1fr; }
	1851	.post-list-cover { aspect-ratio: 16/9; }
	1852	.archive-months { grid-template-columns: repeat(2, 1fr); }
	1853	.related-grid { grid-template-columns: 1fr; }
	1854	.search-overlay { padding-top: 4vh; }
	1855	}
	1856
	1857	/* ============================================================
	1858	v7.4 — PROFILE HEADER + VIEW SWITCHER + GRID + POST-TYPE LAYOUTS
	1859	MOBILE-FIRST — belangrijkste eis
	1860	============================================================ */
	1861
	1862	/* -------- PROFILE HEADER (Optie C: full op home, compact op post/special) -------- */
	1863
	1864	.profile-header {
	1865	background: var(--paper-2, var(--paper));
	1866	border-bottom: 1px solid var(--rule);
	1867	transition: padding .25s ease, background .2s;
	1868	}
	1869	/* Mobiel default = full-mode padding */
	1870	.profile-header { padding: 1.25rem 0; }
	1871	.profile-header-inner {
	1872	display: flex;
	1873	gap: .9rem;
	1874	align-items: flex-start;
	1875	}
	1876
	1877	.profile-photo {
	1878	flex-shrink: 0;
	1879	width: 80px;
	1880	height: 80px;
	1881	border-radius: 50%;
	1882	overflow: hidden;
	1883	display: block;
	1884	background: var(--paper);
	1885	border: 2px solid var(--rule);
	1886	transition: width .25s ease, height .25s ease, border-color .2s;
	1887	text-decoration: none;
	1888	}
	1889	.profile-photo:hover { border-color: var(--accent); }
	1890	.profile-photo img {
	1891	width: 100%; height: 100%;
	1892	object-fit: cover;
	1893	display: block;
	1894	}
	1895	.profile-photo-fallback {
	1896	display: flex;
	1897	align-items: center;
	1898	justify-content: center;
	1899	width: 100%; height: 100%;
	1900	background: var(--accent);
	1901	color: var(--paper);
	1902	font-family: var(--font-display);
	1903	font-weight: 700;
	1904	font-size: 2.2rem;
	1905	text-transform: uppercase;
	1906	line-height: 1;
	1907	transition: font-size .25s ease;
	1908	}
	1909
	1910	.profile-info {
	1911	flex: 1;
	1912	min-width: 0;
	1913	display: flex;
	1914	flex-direction: column;
	1915	gap: .3rem;
	1916	}
	1917	.profile-name {
	1918	margin: 0;
	1919	font-family: var(--font-display);
	1920	font-size: 1.2rem;
	1921	font-weight: 500;
	1922	line-height: 1.15;
	1923	transition: font-size .25s ease;
	1924	}
	1925	.profile-name a {
	1926	color: var(--ink);
	1927	text-decoration: none;
	1928	}
	1929	.profile-name a:hover { color: var(--accent); }
	1930	.profile-bio {
	1931	margin: 0;
	1932	color: var(--ink-muted);
	1933	font-size: .92rem;
	1934	line-height: 1.45;
	1935	max-height: 200px;
	1936	overflow: hidden;
	1937	transition: max-height .25s ease, margin .25s ease, opacity .2s;
	1938	}
	1939	.profile-links {
	1940	list-style: none;
	1941	padding: 0;
	1942	margin: .15rem 0 0;
	1943	display: flex;
	1944	flex-wrap: wrap;
	1945	gap: .4rem;
	1946	max-height: 50px;
	1947	overflow: hidden;
	1948	transition: max-height .25s ease, margin .25s ease, opacity .2s;
	1949	}
	1950	.profile-links li { margin: 0; }
	1951	.profile-links a {
	1952	display: inline-flex;
	1953	align-items: center;
	1954	justify-content: center;
	1955	width: 40px;
	1956	height: 40px;
	1957	border-radius: 50%;
	1958	background: color-mix(in srgb, var(--ink) 5%, transparent);
	1959	color: var(--ink-muted);
	1960	text-decoration: none;
	1961	transition: background .15s, color .15s;
	1962	}
	1963	.profile-links a:hover {
	1964	background: color-mix(in srgb, var(--accent) 15%, transparent);
	1965	color: var(--accent);
	1966	}
	1967	.profile-links .icon { width: 1.1rem; height: 1.1rem; }
	1968
	1969	/* -------- COMPACT MODE: op post + special pages -------- */
	1970
	1971	.on-post .profile-header,
	1972	.on-special .profile-header {
	1973	padding: .5rem 0;
	1974	}
	1975	.on-post .profile-photo,
	1976	.on-special .profile-photo {
	1977	width: 36px;
	1978	height: 36px;
	1979	border-width: 1px;
	1980	}
	1981	.on-post .profile-photo-fallback,
	1982	.on-special .profile-photo-fallback {
	1983	font-size: 1rem;
	1984	}
	1985	.on-post .profile-name,
	1986	.on-special .profile-name {
	1987	font-size: 1rem;
	1988	align-self: center;
	1989	}
	1990	.on-post .profile-bio,
	1991	.on-special .profile-bio,
	1992	.on-post .profile-links,
	1993	.on-special .profile-links {
	1994	display: none;
	1995	}
	1996	.on-post .profile-header-inner,
	1997	.on-special .profile-header-inner {
	1998	align-items: center;
	1999	justify-content: flex-start;
	2000	gap: .6rem;
	2001	}
	2002	.on-post .profile-info,
	2003	.on-special .profile-info {
	2004	flex: 0 1 auto;
	2005	min-width: 0;
	2006	}
	2007	.on-post .profile-name,
	2008	.on-special .profile-name {
	2009	text-align: left;
	2010	}
	2011
	2012	/* -------- DESKTOP: meer ruimte, grotere foto -------- */
	2013	@media (min-width: 768px) {
	2014	.profile-header { padding: 2rem 0; }
	2015	.profile-photo { width: 120px; height: 120px; }
	2016	.profile-photo-fallback { font-size: 3.2rem; }
	2017	.profile-name { font-size: 1.5rem; }
	2018	.profile-bio { font-size: 1rem; }
	2019	.profile-header-inner { gap: 1.5rem; }
	2020	.on-post .profile-header,
	2021	.on-special .profile-header { padding: .6rem 0; }
	2022	.on-post .profile-photo,
	2023	.on-special .profile-photo { width: 42px; height: 42px; }
	2024	/* Compact mode: gap blijft klein, ook op desktop */
	2025	.on-post .profile-header-inner,
	2026	.on-special .profile-header-inner { gap: .75rem; }
	2027	.on-post .profile-name,
	2028	.on-special .profile-name { font-size: 1.1rem; }
	2029	}
	2030
	2031	/* -------- VIEW SWITCHER -------- */
	2032	.view-switcher-wrap {
	2033	border-bottom: 1px solid var(--rule);
	2034	background: var(--paper);
[ee25d45]	2035	/* Bottom margin gives breathing room between the switcher bar and the
	2036	first post. margin-top staat in shared-styles.ejs (de winnende inline
	2037	<style>) — symmetrisch op 1.5rem. */
[7bc636b]	2038	margin-bottom: 1.5rem;
	2039	}
	2040	.view-switcher {
	2041	display: flex;
	2042	justify-content: center;
	2043	gap: .35rem;
	2044	/* Slimmer bar — was .6rem, now .35rem so the bar reads as a divider
	2045	rather than a row of weight equal to the header. */
	2046	padding: .35rem 0;
	2047	}
	2048	.view-switch-btn {
	2049	display: inline-flex;
	2050	align-items: center;
	2051	gap: .4rem;
	2052	padding: .35rem .85rem; /* was .55rem 1rem */
	2053	min-height: 32px; /* was 44px */
	2054	background: transparent;
	2055	border: 1px solid var(--rule);
	2056	border-radius: 999px;
	2057	color: var(--ink-muted);
	2058	font-family: var(--font-ui);
	2059	font-size: .82rem; /* was .85rem */
	2060	cursor: pointer;
	2061	transition: all .15s;
	2062	}
	2063	.view-switch-btn:hover {
	2064	color: var(--ink);
	2065	border-color: var(--ink-muted);
	2066	}
[d15b27f]	2067	/* Actieve state: puur afgeleid van body[data-feed-view]. Geen .is-active class meer.
	2068	Niet op de Archive-pagina: daar is geen "huidige" timeline/grid-keuze, dus beide
	2069	knoppen blijven neutraal (grijs). */
	2070	body[data-feed-view="timeline"]:not(.on-archive) .view-switch-btn[data-view="timeline"],
	2071	body[data-feed-view="grid"]:not(.on-archive) .view-switch-btn[data-view="grid"] {
[7bc636b]	2072	background: var(--ink);
	2073	color: var(--paper);
	2074	border-color: var(--ink);
	2075	}
	2076	.view-switch-btn .icon { width: 1rem; height: 1rem; }
	2077
	2078	/* -------- FEED TOGGLE VIA BODY --------
[c974223]	2079	Grid-modus werkt op de feed (home, cirkel). Het ARCHIEF negeert de grid-keuze
	2080	bewust: dat is altijd de chronologische jaar/maand-lijst (de switcher is daar
	2081	grijs en springt bij klik terug naar de feed). Post-pagina's tonen de
	2082	feed-timeline article sowieso altijd. Alle andere body-classes negeren
[7bc636b]	2083	data-feed-view en houden timeline visible. */
	2084	body.on-home[data-feed-view="grid"] .feed-timeline,
	2085	body.on-home[data-feed-view="grid"] .pagination,
	2086	body.on-home[data-feed-view="grid"] .related-posts,
	2087	body.on-home[data-feed-view="grid"] .article-footer,
[9f81a09]	2088	body.on-cirkel[data-feed-view="grid"] .feed-timeline {
[7bc636b]	2089	display: none !important;
	2090	}
[c974223]	2091	/* Grid-sectie alleen zichtbaar op de feed in grid-mode (NIET op archief) */
[7bc636b]	2092	.feed-grid { display: none; }
	2093	body.on-home[data-feed-view="grid"] .feed-grid,
[9f81a09]	2094	body.on-cirkel[data-feed-view="grid"] .feed-grid { display: block; }
[7bc636b]	2095
	2096	/* -------- GRID VIEW TILES (Instagram-stijl) -------- */
	2097	.feed-grid {
	2098	padding: 1rem 0 2rem;
	2099	}
	2100	.grid-tiles {
	2101	display: grid;
	2102	gap: 4px;
	2103	grid-template-columns: repeat(2, 1fr);
	2104	}
	2105	.grid-tile {
	2106	position: relative;
	2107	display: block;
	2108	aspect-ratio: 1;
	2109	background-size: cover;
	2110	background-position: center;
	2111	background-color: var(--paper-2);
	2112	overflow: hidden;
	2113	text-decoration: none;
	2114	color: var(--ink);
	2115	transition: transform .2s;
	2116	cursor: pointer;
	2117	-webkit-tap-highlight-color: rgba(0,0,0,.1);
	2118	}
	2119	.grid-tile:hover { transform: scale(0.98); }
	2120	.grid-tile-overlay {
	2121	position: absolute;
	2122	inset: 0;
	2123	padding: .6rem;
	2124	display: flex;
	2125	align-items: flex-end;
	2126	background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 50%);
	2127	opacity: 0;
	2128	transition: opacity .2s;
	2129	pointer-events: none; /* klik moet naar de <a> eronder gaan, niet naar de overlay */
	2130	}
	2131	.grid-tile-overlay strong {
	2132	color: #fff;
	2133	font-family: var(--font-display);
	2134	font-size: .9rem;
	2135	font-weight: 500;
	2136	line-height: 1.15;
	2137	display: -webkit-box;
	2138	-webkit-line-clamp: 3;
	2139	-webkit-box-orient: vertical;
	2140	overflow: hidden;
	2141	}
	2142	@media (hover: hover) {
	2143	.grid-tile:hover .grid-tile-overlay { opacity: 1; }
	2144	}
	2145	@media (hover: none) {
	2146	/* Op touch-devices altijd overlay tonen zodat titels zichtbaar zijn */
	2147	.grid-tile-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 70%); }
	2148	}
	2149
	2150	.grid-tile-gradient {
	2151	background-image: none;
	2152	background-color: hsl(var(--tile-hue, 30), 40%, 85%);
	2153	background-image: linear-gradient(135deg, hsl(var(--tile-hue, 30), 45%, 88%), hsl(calc(var(--tile-hue, 30) + 30), 35%, 75%));
	2154	display: flex;
	2155	align-items: center;
	2156	justify-content: center;
	2157	padding: 1rem;
	2158	text-align: center;
	2159	}
	2160	[data-theme="dark"] .grid-tile-gradient,
	2161	.grid-tile-gradient[data-theme="dark"] {
	2162	background-image: linear-gradient(135deg, hsl(var(--tile-hue, 30), 30%, 18%), hsl(calc(var(--tile-hue, 30) + 30), 25%, 12%));
	2163	}
	2164	.grid-tile-title {
	2165	font-family: var(--font-display);
	2166	font-size: 1rem;
	2167	font-weight: 500;
	2168	color: var(--ink);
	2169	line-height: 1.2;
	2170	display: -webkit-box;
	2171	-webkit-line-clamp: 4;
	2172	-webkit-box-orient: vertical;
	2173	overflow: hidden;
	2174	z-index: 1;
	2175	}
	2176
	2177	.grid-tile-pin {
	2178	position: absolute;
	2179	top: .5rem;
	2180	right: .5rem;
	2181	display: inline-flex;
	2182	align-items: center;
	2183	gap: .25rem;
	2184	padding: .2rem .55rem;
	2185	background: var(--accent);
	2186	color: #fff;
	2187	border-radius: 999px;
	2188	font-family: var(--font-ui);
	2189	font-size: .65rem;
	2190	font-weight: 700;
	2191	text-transform: uppercase;
	2192	letter-spacing: .06em;
	2193	z-index: 3;
	2194	box-shadow: 0 2px 6px rgba(0,0,0,.3);
	2195	pointer-events: none;
	2196	}
	2197	.grid-tile-pin::before {
	2198	content: "📌";
	2199	font-size: .9em;
	2200	line-height: 1;
	2201	}
	2202	/* Pinned-tile overall highlight: accent border + subtle inner glow */
	2203	.grid-tile.is-pinned {
	2204	outline: 3px solid var(--accent);
	2205	outline-offset: -3px;
	2206	z-index: 1;
	2207	}
	2208	.grid-tile.is-pinned:hover {
	2209	outline-offset: -2px;
	2210	}
	2211	.grid-tile-type {
	2212	position: absolute;
	2213	top: .4rem;
	2214	left: .4rem;
	2215	padding: .15rem .5rem;
	2216	background: rgba(0,0,0,.55);
	2217	color: #fff;
	2218	border-radius: 999px;
	2219	font-family: var(--font-ui);
	2220	font-size: .6rem;
	2221	font-weight: 600;
	2222	text-transform: uppercase;
	2223	letter-spacing: .05em;
	2224	z-index: 2;
	2225	}
	2226
	2227	@media (min-width: 600px) {
	2228	.grid-tiles { grid-template-columns: repeat(3, 1fr); }
	2229	}
	2230	@media (min-width: 900px) {
	2231	.grid-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	2232	}
	2233
	2234	/* -------- POST-TYPE SPECIFIEKE LAYOUTS -------- */
	2235
	2236	/* Foto-post: beeld prominent, geen titel bovenaan, caption onder */
	2237	.feed-timeline[data-post-type="foto"] .post-title {
	2238	font-size: 1.1rem;
	2239	color: var(--ink-muted);
	2240	font-weight: 400;
	2241	}
	2242	.feed-timeline[data-post-type="foto"] .post-cover {
	2243	margin: 0 -1rem 1rem;
	2244	border-radius: 0;
	2245	}
	2246	.feed-timeline[data-post-type="foto"] .post-cover img {
	2247	width: 100%;
	2248	border-radius: 0;
	2249	}
	2250
	2251	/* Post-caption onder de cover */
	2252	.post-caption {
	2253	font-family: var(--font-body);
	2254	font-size: 1rem;
	2255	color: var(--ink);
	2256	line-height: 1.5;
	2257	margin: 0 0 1.25rem;
	2258	padding: 0 0 1rem;
	2259	border-bottom: 1px solid var(--rule);
	2260	white-space: pre-wrap;
	2261	}
	2262	.feed-timeline[data-post-type="foto"] .post-caption {
	2263	font-size: 1.05rem;
	2264	margin-top: -.5rem;
	2265	padding-bottom: 1.25rem;
	2266	}
	2267
	2268	/* Audio/video posts — type-chip helder, content eronder zoals normaal */
	2269	.feed-timeline[data-post-type="audio"] .post-title,
	2270	.feed-timeline[data-post-type="video"] .post-title {
	2271	font-size: 1.5rem;
	2272	}
	2273
	2274	@media (min-width: 768px) {
	2275	.feed-timeline[data-post-type="foto"] .post-cover {
	2276	margin: 0 0 1.5rem;
	2277	border-radius: var(--radius);
	2278	}
	2279	}
	2280
	2281	/* -------- ADMIN EDIT-BUTTON op post-view (alleen zichtbaar voor ingelogde admin) -------- */
	2282	.post-edit-btn {
	2283	position: absolute;
	2284	top: 1rem;
	2285	right: 1rem;
	2286	display: inline-flex;
	2287	align-items: center;
	2288	justify-content: center;
	2289	width: 44px;
	2290	height: 44px;
	2291	background: var(--paper);
	2292	border: 1px solid var(--rule);
	2293	border-radius: 50%;
	2294	color: var(--ink-muted);
	2295	text-decoration: none;
	2296	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	2297	transition: background .15s, color .15s, transform .15s, border-color .15s;
	2298	z-index: 10;
	2299	}
	2300	.post-edit-btn:hover {
	2301	background: var(--accent);
	2302	border-color: var(--accent);
	2303	color: var(--paper);
	2304	transform: scale(1.05);
	2305	}
	2306	.post-edit-btn .icon {
	2307	width: 1.1rem;
	2308	height: 1.1rem;
	2309	}
	2310	/* Zorg dat de article relative is zodat absolute positionering werkt */
	2311	.feed-timeline { position: relative; }
	2312
	2313	@media (min-width: 768px) {
	2314	.post-edit-btn {
	2315	top: 1.5rem;
	2316	right: 1.5rem;
	2317	}
	2318	}
	2319
	2320	/* ============================================================
	2321	v8.0 — ACCENT SPAN + POST-TABLE (published posts)
	2322	============================================================ */
	2323	.post span.accent,
	2324	.post-content span.accent,
	2325	article span.accent,
	2326	page-container span.accent {
	2327	color: var(--accent);
	2328	font-weight: 500;
	2329	}
	2330
	2331	.post-table,
	2332	article table.post-table {
	2333	width: 100%;
	2334	max-width: 100%;
	2335	border-collapse: collapse;
	2336	margin: 1.25rem 0;
	2337	font-size: .95rem;
	2338	display: block;
	2339	overflow-x: auto;
	2340	-webkit-overflow-scrolling: touch;
	2341	}
	2342	.post-table thead { background: color-mix(in srgb, var(--accent) 10%, transparent); }
	2343	.post-table th,
	2344	.post-table td {
	2345	padding: .6rem .8rem;
	2346	text-align: left;
	2347	border: 1px solid var(--rule);
	2348	vertical-align: top;
	2349	}
	2350	.post-table th {
	2351	font-family: var(--font-ui);
	2352	font-weight: 600;
	2353	font-size: .88rem;
	2354	color: var(--ink);
	2355	letter-spacing: .02em;
	2356	}
	2357	.post-table tbody tr:nth-child(even) {
	2358	background: color-mix(in srgb, var(--ink) 3%, transparent);
	2359	}
	2360	@media (min-width: 700px) {
	2361	.post-table { display: table; overflow: visible; }
	2362	}
	2363
	2364	/* ============================================================
	2365	v8.0 fix — grid-cols picker (desktop only) + grid col overrides
	2366	============================================================ */
	2367
	2368	/* Switcher-wrap bevat nu ook de cols-picker; layout side-by-side */
	2369	.view-switcher-wrap .container {
	2370	display: flex;
	2371	align-items: center;
	2372	justify-content: center;
	2373	gap: 1rem;
	2374	flex-wrap: wrap;
	2375	}
	2376
[64b90c0]	2377	/* Solo / Cirkel scope-switcher (alleen in circle-modus) — segmented toggle, centraal.
	2378	Hoge specificiteit (+ !important op tekst) zodat 'ie globale link-stijlen wint. */
	2379	.view-switcher-wrap .feed-scope {
	2380	display: inline-flex;
	2381	background: var(--paper-2);
	2382	border: 1px solid var(--rule);
	2383	border-radius: 999px;
	2384	padding: 3px;
	2385	}
	2386	.view-switcher-wrap .feed-scope-btn {
	2387	display: inline-flex;
	2388	align-items: center;
	2389	padding: .32rem .95rem;
	2390	min-height: 30px;
	2391	border: none !important;
	2392	border-radius: 999px !important;
	2393	background: transparent !important;
	2394	color: var(--ink-muted) !important;
	2395	font-family: var(--font-ui);
	2396	font-size: .82rem;
	2397	font-weight: 500 !important;
	2398	text-decoration: none !important;
	2399	cursor: pointer;
	2400	transition: all .15s;
	2401	}
	2402	.view-switcher-wrap .feed-scope-btn:hover { color: var(--ink) !important; }
	2403	.view-switcher-wrap .feed-scope-btn.is-active {
	2404	background: var(--ink) !important;
	2405	color: var(--paper) !important;
	2406	}
[9f81a09]	2407
[7bc636b]	2408	.grid-cols-picker {
	2409	display: none; /* default hidden — desktop + grid-active maakt 'm zichtbaar */
	2410	gap: 2px;
	2411	padding: 0;
	2412	}
	2413	.grid-cols-btn {
	2414	display: inline-flex;
	2415	align-items: center;
	2416	justify-content: center;
	2417	min-width: 36px;
	2418	height: 32px;
	2419	padding: 0 .6rem;
	2420	background: transparent;
	2421	border: 1px solid var(--rule);
	2422	color: var(--ink-muted);
	2423	font-family: var(--font-ui);
	2424	font-size: .85rem;
	2425	font-weight: 500;
	2426	cursor: pointer;
	2427	transition: all .12s;
	2428	}
	2429	.grid-cols-btn:first-child { border-radius: 999px 0 0 999px; }
	2430	.grid-cols-btn:last-child { border-radius: 0 999px 999px 0; }
	2431	.grid-cols-btn:not(:first-child):not(:last-child) { border-left: none; border-right: none; }
	2432	.grid-cols-btn:hover { color: var(--ink); }
	2433	/* Active state puur via body[data-grid-cols] — geen is-active-class meer. */
	2434	body[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],
	2435	body[data-grid-cols="3"] .grid-cols-btn[data-cols="3"],
	2436	body[data-grid-cols="4"] .grid-cols-btn[data-cols="4"] {
	2437	background: var(--ink);
	2438	color: var(--paper);
	2439	border-color: var(--ink);
	2440	}
	2441
[1578f5d]	2442	/* Desktop + grid-view → toon cols-picker (op de home-feed; niet op archief) */
[7bc636b]	2443	@media (min-width: 600px) {
[1578f5d]	2444	body.on-home[data-feed-view="grid"] .grid-cols-picker {
[7bc636b]	2445	display: inline-flex;
	2446	}
	2447	}
	2448
	2449	/* Kolom-overrides op desktop. Mobiel negeert dit (staat vast op 2). */
	2450	@media (min-width: 600px) {
	2451	body.on-home[data-grid-cols="2"] .grid-tiles { grid-template-columns: repeat(2, 1fr); }
	2452	body.on-home[data-grid-cols="3"] .grid-tiles { grid-template-columns: repeat(3, 1fr); }
	2453	body.on-home[data-grid-cols="4"] .grid-tiles { grid-template-columns: repeat(4, 1fr); }
	2454	}
	2455
	2456	/* Gradient-tile: iets meer contrast voor light + dark mode zodat titel altijd leesbaar is */
	2457	.grid-tile-gradient {
	2458	background-image: linear-gradient(135deg,
	2459	hsl(var(--tile-hue, 30), 55%, 72%),
	2460	hsl(calc(var(--tile-hue, 30) + 40), 45%, 60%));
	2461	}
	2462	[data-theme="dark"] .grid-tile-gradient {
	2463	background-image: linear-gradient(135deg,
	2464	hsl(var(--tile-hue, 30), 40%, 30%),
	2465	hsl(calc(var(--tile-hue, 30) + 40), 30%, 18%));
	2466	}
	2467	.grid-tile-gradient .grid-tile-title {
	2468	color: #fff;
	2469	text-shadow: 0 1px 3px rgba(0,0,0,.25);
	2470	}
	2471	[data-theme="dark"] .grid-tile-gradient .grid-tile-title {
	2472	color: #fff;
	2473	text-shadow: 0 1px 2px rgba(0,0,0,.5);
	2474	}
	2475
	2476	/* ============================================================
	2477	v8.0.2 — COMPACT DESIGN OVERRIDES
	2478	Tighter masthead, padding, margins overall. Profiel-header
	2479	collapse/expand blijft zoals 'ie was.
	2480	============================================================ */
	2481
	2482	/* Masthead: compacter */
	2483	.masthead { padding: calc(.55rem + var(--safe-top)) 0 .55rem; }
	2484	.masthead-inner { gap: 1rem; }
	2485	.site-title { font-size: 1.25rem; }
	2486	.nav-link, .nav-btn { padding: .4rem .7rem; min-height: 2rem; font-size: .82rem; }
	2487
	2488	/* Main content padding */
	2489	main { padding-top: 1rem; }
	2490	.page { padding-block: 1rem 1.75rem; }
	2491
	2492	/* View switcher-bar strakker */
	2493	.view-switcher { padding: .4rem 0; gap: .3rem; }
	2494	.view-switch-btn { padding: .4rem .85rem; min-height: 38px; font-size: .8rem; }
	2495	.grid-cols-btn { min-width: 32px; height: 28px; padding: 0 .5rem; font-size: .8rem; }
	2496
	2497	/* Post header spacing terug */
	2498	.post-header { margin: 0 0 1.25rem; }
	2499	.post-title { margin-bottom: .35rem; }
	2500	.post-meta { font-size: .78rem; }
	2501	.post-tags { margin-top: .6rem; gap: .3rem; }
	2502	.post-tag { font-size: .7rem; padding: .15rem .55rem; }
	2503
	2504	/* Article footer + pagination compacter */
	2505	.article-footer { padding-top: 1.25rem; margin-top: 1.5rem; }
	2506	.pagination { padding-block: 1.25rem 2rem; margin-top: 1.5rem; }
	2507	.pagination-item { padding: .75rem .95rem; min-height: 4rem; }
	2508	.pagination-title { font-size: .95rem; }
	2509
	2510	/* Site footer compacter */
	2511	.site-footer { padding: 1.25rem 0 calc(1.25rem + var(--safe-bot)); margin-top: 2rem; font-size: .78rem; }
	2512	.site-footer-inner { gap: .75rem; }
	2513
	2514	/* Profiel-header: full mode iets minder riant (compact mode blijft hetzelfde) */
	2515	.profile-header { padding: 1rem 0; }
	2516	.profile-photo { width: 72px; height: 72px; }
	2517	.profile-photo-fallback { font-size: 1.8rem; }
	2518	.profile-name { font-size: 1.2rem; }
	2519	.profile-bio { font-size: .85rem; margin-top: .15rem; }
	2520	.profile-links { margin-top: .5rem; gap: .4rem; }
	2521	.profile-links a { width: 32px; height: 32px; }
	2522
	2523	@media (min-width: 768px) {
	2524	.profile-header { padding: 1.35rem 0; }
	2525	.profile-photo { width: 92px; height: 92px; }
	2526	.profile-photo-fallback { font-size: 2.4rem; }
	2527	.profile-name { font-size: 1.4rem; }
	2528	.profile-bio { font-size: .95rem; }
	2529	.profile-header-inner { gap: 1.1rem; }
	2530	/* Compact-mode op desktop blijft klein zoals we hadden afgesproken */
	2531	.on-post .profile-photo,
	2532	.on-special .profile-photo { width: 42px; height: 42px; }
	2533	}
	2534
	2535	/* Grid-tegels iets strakker gaten */
	2536	.grid-tiles { gap: 3px; }
	2537
	2538	/* Post-cover margin */
	2539	.post-cover { margin: 0 0 1rem; }
	2540
	2541	/* Audio player wat lichter */
	2542	#pcms-audio-bar { padding: .55rem 1rem; }
	2543
	2544	/* v8.1 — pagination CTA + mobile tap target */
	2545	.pagination-cta {
	2546	display: inline-block;
	2547	font-family: var(--font-ui);
	2548	font-size: .72rem;
	2549	font-weight: 600;
	2550	color: var(--accent);
	2551	margin-top: .35rem;
	2552	letter-spacing: .02em;
	2553	opacity: .9;
	2554	}
	2555	a.pagination-item:hover .pagination-cta { opacity: 1; }
	2556
	2557	/* Mobiel: nog meer tap-feedback + iets prominenter */
	2558	@media (max-width: 640px) {
	2559	a.pagination-item {
	2560	padding: 1.1rem 1rem;
	2561	min-height: 5.5rem;
	2562	border-width: 2px;
	2563	}
	2564	a.pagination-item:active {
	2565	background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
	2566	transform: scale(.98);
	2567	}
	2568	.pagination-title { font-size: 1rem; }
	2569	.pagination-cta { font-size: .75rem; }
	2570	.pagination .icon { width: 1.5em; height: 1.5em; }
	2571	}
	2572
	2573
	2574
	2575	/* v8.3 / v9.4 — PWA install button (alleen zichtbaar als browser install ondersteunt) */
	2576	.nav-install-btn[hidden] { display: none; }
	2577	.nav-install-btn {
	2578	position: relative;
	2579	display: inline-flex;
	2580	align-items: center;
	2581	justify-content: center;
	2582	gap: .35rem;
	2583	background: linear-gradient(135deg,
	2584	var(--accent),
	2585	color-mix(in srgb, var(--accent) 80%, #000));
	2586	color: #fff;
	2587	border: none;
	2588	border-radius: .65rem;
	2589	padding: .45rem .85rem;
	2590	font-size: .8rem;
	2591	font-weight: 600;
	2592	line-height: 1;
	2593	cursor: pointer;
	2594	overflow: hidden;
	2595	isolation: isolate;
	2596	box-shadow:
	2597	0 1px 0 rgba(255,255,255,.15) inset,
	2598	0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
	2599	transition:
	2600	transform .15s cubic-bezier(.4, 0, .2, 1),
	2601	box-shadow .2s ease,
	2602	filter .15s ease;
	2603	}
	2604	.nav-install-btn::before {
	2605	content: "";
	2606	position: absolute;
	2607	top: 0;
	2608	left: -100%;
	2609	width: 60%;
	2610	height: 100%;
	2611	background: linear-gradient(110deg,
	2612	transparent 30%,
	2613	rgba(255,255,255,.22) 50%,
	2614	transparent 70%);
	2615	z-index: -1;
	2616	animation: pcmsInstallShimmer 4s ease-in-out infinite;
	2617	pointer-events: none;
	2618	}
	2619	.nav-install-btn:hover {
	2620	transform: translateY(-1px);
	2621	filter: brightness(1.08);
	2622	box-shadow:
	2623	0 1px 0 rgba(255,255,255,.2) inset,
	2624	0 4px 10px color-mix(in srgb, var(--accent) 50%, transparent);
	2625	}
	2626	.nav-install-btn:active { transform: translateY(0); }
	2627	.nav-install-btn .icon {
	2628	flex-shrink: 0;
	2629	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
	2630	}
	2631	.nav-install-btn:hover .icon { transform: translateY(-1px); }
	2632	@media (prefers-reduced-motion: reduce) {
	2633	.nav-install-btn::before { animation: none; left: -100%; }
	2634	.nav-install-btn:hover { transform: none; }
	2635	.nav-install-btn:hover .icon { transform: none; }
	2636	}
	2637	/* Als PWA al draait (standalone mode) — verberg install-prompt knop volledig */
	2638	@media all and (display-mode: standalone) {
	2639	#pwa-install-btn { display: none !important; }
	2640	}
	2641
	2642	/* ========== v8.9.9 — Privé-post indicators ========== */
	2643	.post-private-banner {
	2644	display: flex;
	2645	align-items: center;
	2646	gap: .6rem;
	2647	padding: .75rem 1rem;
	2648	background: color-mix(in srgb, #eab308 12%, var(--paper, #fff));
	2649	border: 1px solid color-mix(in srgb, #eab308 40%, transparent);
	2650	border-radius: 8px;
	2651	margin: 0 0 1rem;
	2652	font-size: .88rem;
	2653	color: var(--ink, #1a1a1a);
	2654	}
	2655	.post-private-banner strong {
	2656	color: #b45309;
	2657	}
	2658
	2659	.grid-tile-private {
	2660	position: absolute;
	2661	top: 8px;
	2662	left: 8px;
	2663	padding: 3px 8px;
	2664	background: rgba(0,0,0,0.7);
	2665	color: #fde68a;
	2666	font-size: .7rem;
	2667	font-weight: 700;
	2668	border-radius: 999px;
	2669	z-index: 3;
	2670	backdrop-filter: blur(4px);
	2671	-webkit-backdrop-filter: blur(4px);
	2672	}
	2673
	2674	/* ========== v8.9.10 — Social chip (inline in post-body) ========== */
	2675	.social-chip {
	2676	display: inline-flex;
	2677	align-items: center;
	2678	gap: .45rem;
	2679	padding: .35rem .75rem;
	2680	background: color-mix(in srgb, var(--accent) 10%, transparent);
	2681	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	2682	border-radius: 999px;
	2683	color: var(--ink, #1a1a1a);
	2684	text-decoration: none;
	2685	font-family: var(--font-ui, system-ui);
	2686	font-size: .85rem;
	2687	font-weight: 600;
	2688	line-height: 1.2;
	2689	transition: all .15s;
	2690	vertical-align: middle;
	2691	margin: 0 .1rem;
	2692	}
	2693	.social-chip:hover {
	2694	background: var(--accent);
	2695	color: #fff;
	2696	border-color: var(--accent);
	2697	text-decoration: none;
	2698	transform: translateY(-1px);
	2699	box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
	2700	}
	2701	.social-chip .icon {
	2702	width: 16px;
	2703	height: 16px;
	2704	flex-shrink: 0;
	2705	}
	2706	.social-chip-icon-only {
	2707	width: 36px;
	2708	height: 36px;
	2709	padding: 0;
	2710	justify-content: center;
	2711	border-radius: 50%;
	2712	}
	2713	.social-chip-icon-only .icon {
	2714	width: 18px;
	2715	height: 18px;
	2716	}
	2717
	2718	/* v8.9.34 — player hidden state + post audio blocks
	2719	v9.3 — Hide-rules uitgeschakeld: mini-player blijft permanent zichtbaar
	2720	zodat 'ie niet meer verdwijnt bij browser-back of navigatie. */
	2721	.audio-player.is-hidden {
	2722	/* display: none !important; */
	2723	}
	2724	body:not(.has-audio-player) #pcms-audio-player.is-hidden {
	2725	/* display: none !important; */
	2726	}
	2727
	2728	/* Post audio track — single track row in een post */
	2729	/* Lokale audio-track — visueel consistent met .post-audio-external */
	2730	.post-audio-track {
	2731	display: flex;
	2732	align-items: center;
	2733	gap: .75rem;
	2734	padding: .65rem .85rem;
	2735	background: var(--paper-2, color-mix(in srgb, var(--ink) 4%, transparent));
	2736	border: 1px solid var(--rule, rgba(0,0,0,.08));
	2737	border-radius: 10px;
	2738	margin: .75rem 0;
	2739	transition: background .15s, border-color .15s;
	2740	}
	2741	.post-audio-track:hover {
	2742	border-color: var(--accent, #c2410c);
	2743	background: color-mix(in srgb, var(--accent, #c2410c) 5%, var(--paper-2, transparent));
	2744	}
	2745	.post-audio-track .pat-play {
	2746	flex-shrink: 0;
	2747	width: 42px;
	2748	height: 42px;
	2749	border-radius: 8px; /* zelfde rounded-square als pae-icon */
	2750	border: none;
	2751	background: var(--accent, #c2410c);
	2752	color: var(--paper, #fff);
	2753	cursor: pointer;
	2754	display: inline-flex;
	2755	align-items: center;
	2756	justify-content: center;
	2757	transition: transform .1s, background .15s;
	2758	padding: 0;
	2759	position: relative;
	2760	overflow: hidden;
	2761	}
	2762	.post-audio-track .pat-play:hover { transform: scale(1.04); }
	2763	.post-audio-track .pat-play:active { transform: scale(.96); }
	2764	.post-audio-track .pat-play svg,
	2765	.post-audio-track .pat-play .pat-sitelogo {
	2766	width: 100%; height: 100%;
	2767	position: absolute;
	2768	top: 0; left: 0;
	2769	transition: opacity .15s;
	2770	}
	2771	.post-audio-track .pat-play .icon-play,
	2772	.post-audio-track .pat-play .icon-pause {
	2773	width: 18px; height: 18px;
	2774	position: absolute;
	2775	top: 50%; left: 50%;
	2776	transform: translate(-50%, -50%);
	2777	fill: currentColor;
	2778	opacity: 0; /* verborgen tot hover of is-current */
	2779	}
	2780	/* Site logo: object-cover binnen 42x42 box */
	2781	.post-audio-track .pat-play .pat-sitelogo {
	2782	object-fit: cover;
	2783	opacity: 1;
	2784	}
	2785	.post-audio-track .pat-play .pat-sitelogo-fallback {
	2786	padding: 11px; /* SVG music-note iets kleiner in box */
	2787	opacity: 1;
	2788	}
	2789	/* Bij hover: site logo faded, play-icoon verschijnt */
	2790	.post-audio-track:hover .pat-play .pat-sitelogo { opacity: 0.25; }
	2791	.post-audio-track:hover .pat-play .icon-play { opacity: 1; }
	2792	/* Bij current + playing: toon pause-icon */
	2793	.post-audio-track.is-current .pat-play .pat-sitelogo { opacity: 0.25; }
	2794	.post-audio-track.is-current .pat-play .icon-play { opacity: 1; }
	2795	.post-audio-track.is-current.is-playing .pat-play .icon-play { opacity: 0; }
	2796	.post-audio-track.is-current.is-playing .pat-play .icon-pause { opacity: 1; }
	2797	.post-audio-track.is-current {
	2798	border-color: var(--accent, #c2410c);
	2799	background: color-mix(in srgb, var(--accent, #c2410c) 10%, transparent);
	2800	}
	2801	.post-audio-track .pat-meta {
	2802	flex: 1;
	2803	min-width: 0;
	2804	display: flex;
	2805	flex-direction: column;
	2806	gap: 2px;
	2807	}
	2808	.post-audio-track .pat-title {
	2809	display: block;
	2810	font-weight: 600;
	2811	color: var(--ink);
	2812	font-size: .95rem;
	2813	overflow: hidden;
	2814	text-overflow: ellipsis;
	2815	white-space: nowrap;
	2816	}
	2817	.post-audio-track .pat-artist {
	2818	display: block;
	2819	font-size: .78rem;
	2820	color: var(--ink-muted, var(--ink));
	2821	opacity: .65;
	2822	overflow: hidden;
	2823	text-overflow: ellipsis;
	2824	white-space: nowrap;
	2825	}
	2826	.post-audio-track .pat-duration {
	2827	flex-shrink: 0;
	2828	font-family: ui-monospace, monospace;
	2829	font-size: .8rem;
	2830	opacity: .55;
	2831	}
	2832
	2833	/* Album block in een post */
	2834	.post-album {
	2835	position: relative;
	2836	border: 1px solid var(--rule, rgba(0,0,0,.1));
	2837	border-radius: 14px;
	2838	overflow: hidden;
	2839	margin: 1.25rem 0;
	2840	background: var(--paper-2, color-mix(in srgb, var(--ink) 3%, transparent));
	2841	}
	2842	.post-album-header {
	2843	display: flex;
	2844	gap: .75rem;
	2845	padding: .55rem .7rem;
	2846	align-items: center;
	2847	}
	2848	.post-album-cover {
	2849	width: 120px;
	2850	height: 120px;
	2851	border-radius: 8px;
	2852	background-size: cover;
	2853	background-position: center;
	2854	background-color: var(--rule);
	2855	flex-shrink: 0;
	2856	}
	2857	/* v9.0 — Collage van track-covers als album-cover leeg is */
	2858	.post-album-cover-collage {
	2859	display: grid;
	2860	grid-template-columns: 1fr 1fr;
	2861	grid-template-rows: 1fr 1fr;
	2862	gap: 0;
	2863	overflow: hidden;
	2864	background: transparent;
	2865	}
	2866	.post-album-cover-collage .post-album-cover-tile {
	2867	background-size: cover;
	2868	background-position: center;
	2869	width: 100%;
	2870	height: 100%;
	2871	}
	2872	/* Empty state: gradient met muziek-noot */
	2873	.post-album-cover-empty {
	2874	display: flex;
	2875	align-items: center;
	2876	justify-content: center;
	2877	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--paper-2)), color-mix(in srgb, var(--accent) 10%, var(--paper)));
	2878	color: var(--accent, #c2410c);
	2879	}
	2880	.post-album-cover-empty svg {
	2881	width: 42%;
	2882	height: 42%;
	2883	opacity: .55;
	2884	}
	2885	.post-album-info {
	2886	flex: 1;
	2887	min-width: 0;
	2888	}
	2889	.post-album-label {
	2890	text-transform: uppercase;
	2891	font-size: .68rem;
	2892	letter-spacing: .1em;
	2893	opacity: .55;
	2894	margin: 0 0 .15rem;
	2895	font-weight: 700;
	2896	}
	2897	.post-album-title {
	2898	font-family: var(--font-display);
	2899	font-size: 1.1rem;
	2900	font-weight: 600;
	2901	margin: 0 0 .1rem;
	2902	line-height: 1.15;
	2903	letter-spacing: -0.01em;
	2904	}
	2905	.post-album-artist {
	2906	font-size: .88rem;
	2907	opacity: .8;
	2908	margin: 0 0 .12rem;
	2909	line-height: 1.25;
	2910	}
	2911	.post-album-meta {
	2912	font-size: .74rem;
	2913	opacity: .55;
	2914	margin: 0;
	2915	line-height: 1.2;
	2916	}
	2917	.post-album-playall {
	2918	margin-top: .75rem;
	2919	padding: .45rem .9rem;
	2920	background: var(--accent, #c2410c);
	2921	color: var(--paper, #fff);
	2922	border: none;
	2923	border-radius: 6px;
	2924	font-weight: 600;
	2925	cursor: pointer;
	2926	font-size: .88rem;
	2927	display: inline-flex;
	2928	align-items: center;
	2929	gap: .35rem;
	2930	}
	2931	.post-album-playall:hover { filter: brightness(1.08); }
	2932
	2933	/* ============================================================
	2934	v9.0 — Album cover clickable button
	2935	============================================================ */
	2936	.post-album-cover-btn {
	2937	position: relative;
	2938	background: none;
	2939	border: none;
	2940	padding: 0;
	2941	margin: 0;
	2942	cursor: pointer;
	2943	flex-shrink: 0;
	2944	border-radius: 8px;
	2945	overflow: hidden;
	2946	display: block;
	2947	width: auto;
	2948	/* v9.1 — voorkom mobile 300ms double-tap zoom delay, anders zou 2× snel klikken
	2949	een zoom triggeren i.p.v. 2× click-events */
	2950	touch-action: manipulation;
	2951	-webkit-tap-highlight-color: transparent;
	2952	}
	2953	.post-album-cover-btn .post-album-cover {
	2954	display: block;
	2955	width: 76px;
	2956	height: 76px;
	2957	border-radius: 7px;
	2958	background-size: cover;
	2959	background-position: center;
	2960	background-color: var(--rule);
	2961	transition: transform .25s ease;
	2962	}
	2963	.post-album-cover-btn:hover .post-album-cover {
	2964	transform: scale(1.04);
	2965	}
	2966	.post-album-cover-btn .post-album-cover-empty {
	2967	background: linear-gradient(135deg,
	2968	color-mix(in srgb, var(--accent, #c2410c) 35%, var(--paper)),
	2969	color-mix(in srgb, var(--accent, #c2410c) 10%, var(--paper-2)));
	2970	display: flex;
	2971	align-items: center;
	2972	justify-content: center;
	2973	}
	2974	.post-album-cover-btn .post-album-cover-empty svg {
	2975	width: 28px;
	2976	height: 28px;
	2977	color: color-mix(in srgb, var(--accent, #c2410c) 60%, transparent);
	2978	}
	2979	/* Play overlay op hover */
	2980	.post-album-cover-play {
	2981	position: absolute;
	2982	inset: 0;
	2983	display: flex;
	2984	align-items: center;
	2985	justify-content: center;
	2986	background: rgba(0, 0, 0, .35);
	2987	opacity: 0;
	2988	transition: opacity .2s ease;
	2989	border-radius: 8px;
	2990	pointer-events: none;
	2991	}
	2992	.post-album-cover-play svg {
	2993	width: 48px;
	2994	height: 48px;
	2995	color: #fff;
	2996	filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
	2997	}
	2998	.post-album-cover-btn:hover .post-album-cover-play,
	2999	.post-album-cover-btn:focus-visible .post-album-cover-play {
	3000	opacity: 1;
	3001	}
	3002
	3003	/* ============================================================
	3004	v1 P52 — Admin actions overlay (edit / delete)
	3005	Only rendered when the viewer has god role. Sits top-right
	3006	of the card so it doesn't compete with the cover play affordance.
	3007	============================================================ */
	3008	.post-album-actions {
	3009	position: absolute;
	3010	top: .4rem;
	3011	right: .4rem;
	3012	display: flex;
	3013	gap: .25rem;
	3014	z-index: 2;
	3015	}
	3016	.post-album-action {
	3017	width: 28px;
	3018	height: 28px;
	3019	border-radius: 6px;
	3020	border: 1px solid var(--rule);
	3021	background: color-mix(in srgb, var(--paper) 78%, transparent);
	3022	backdrop-filter: blur(8px);
	3023	-webkit-backdrop-filter: blur(8px);
	3024	color: var(--ink);
	3025	display: inline-flex;
	3026	align-items: center;
	3027	justify-content: center;
	3028	cursor: pointer;
	3029	text-decoration: none;
	3030	opacity: .65;
	3031	padding: 0;
	3032	transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
	3033	-webkit-tap-highlight-color: transparent;
	3034	}
	3035	.post-album-action:hover,
	3036	.post-album-action:focus-visible {
	3037	opacity: 1;
	3038	transform: translateY(-1px);
	3039	outline: none;
	3040	}
	3041	.post-album-action.is-danger:hover,
	3042	.post-album-action.is-danger:focus-visible {
	3043	background: color-mix(in srgb, #c2410c 18%, var(--paper));
	3044	border-color: color-mix(in srgb, #c2410c 45%, var(--rule));
	3045	color: #c2410c;
	3046	}
	3047	.post-album-action svg {
	3048	width: 15px;
	3049	height: 15px;
	3050	display: block;
	3051	}
	3052
	3053	/* ============================================================
	3054	v9.0 — Compacte tracklist (informatief, niet-klikbaar)
	3055	============================================================ */
	3056	.post-album-tracks {
	3057	list-style: none;
	3058	padding: 0;
	3059	margin: 0;
	3060	border-top: 1px solid var(--rule);
	3061	}
	3062	/* v9.4 — Playlist insert modal rows */
	3063	.pli-row {
	3064	display: flex;
	3065	align-items: center;
	3066	gap: .75rem;
	3067	padding: .65rem .5rem;
	3068	border-bottom: 1px solid var(--border);
	3069	}
	3070	.pli-row:last-child { border-bottom: none; }
	3071	.pli-row-cover {
	3072	width: 44px;
	3073	height: 44px;
	3074	border-radius: 6px;
	3075	background-size: cover;
	3076	background-position: center;
	3077	background-color: color-mix(in srgb, var(--ink, #000) 8%, transparent);
	3078	flex-shrink: 0;
	3079	display: flex;
	3080	align-items: center;
	3081	justify-content: center;
	3082	font-size: 1.4rem;
	3083	}
	3084	.pli-row-info {
	3085	flex: 1;
	3086	min-width: 0;
	3087	}
	3088	.pli-row-title {
	3089	font-weight: 600;
	3090	overflow: hidden;
	3091	text-overflow: ellipsis;
	3092	white-space: nowrap;
	3093	}
	3094	.pli-row-meta {
	3095	font-size: .82rem;
	3096	overflow: hidden;
	3097	text-overflow: ellipsis;
	3098	white-space: nowrap;
	3099	}
	3100	.post-playlist-placeholder {
	3101	margin: 1rem 0;
	3102	user-select: none;
	3103	}
	3104
	3105	/* v9.4 — Generic modal classes (gebruikt door playlist-editor en andere modals) */
	3106	.pcms-modal-backdrop {
	3107	position: fixed;
	3108	inset: 0;
	3109	background: rgba(0, 0, 0, .6);
	3110	display: flex;
	3111	align-items: center;
	3112	justify-content: center;
	3113	z-index: 9000;
	3114	padding: 1rem;
	3115	box-sizing: border-box;
	3116	overflow-y: auto;
	3117	}
	3118	.pcms-modal {
	3119	background: var(--paper, #fff);
	3120	color: var(--ink, #000);
	3121	border-radius: 12px;
	3122	width: 100%;
	3123	max-width: 640px;
	3124	max-height: calc(100vh - 2rem);
	3125	display: flex;
	3126	flex-direction: column;
	3127	overflow: hidden;
	3128	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	3129	}
	3130	.pcms-modal-header {
	3131	display: flex;
	3132	align-items: center;
	3133	justify-content: space-between;
	3134	padding: 1rem 1.25rem;
	3135	border-bottom: 1px solid var(--border);
	3136	flex-shrink: 0;
	3137	}
	3138	.pcms-modal-header h3 { font-size: 1.1rem; }
	3139	.pcms-modal-close {
	3140	background: transparent;
	3141	border: none;
	3142	font-size: 1.6rem;
	3143	line-height: 1;
	3144	cursor: pointer;
	3145	padding: .25rem .5rem;
	3146	color: var(--fg-muted, #666);
	3147	border-radius: 4px;
	3148	}
	3149	.pcms-modal-close:hover {
	3150	background: color-mix(in srgb, var(--ink, #000) 8%, transparent);
	3151	}
	3152	.pcms-modal-body {
	3153	padding: 1.25rem;
	3154	overflow-y: auto;
	3155	overscroll-behavior: contain;
	3156	flex: 1;
	3157	min-height: 0;
	3158	}
	3159	.pcms-modal-footer {
	3160	display: flex;
	3161	gap: .5rem;
	3162	justify-content: flex-end;
	3163	padding: .75rem 1.25rem;
	3164	border-top: 1px solid var(--border);
	3165	flex-shrink: 0;
	3166	background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
	3167	}
	3168
	3169	/* On mobile: full-screen modal */
	3170	@media (max-width: 600px) {
	3171	.pcms-modal-backdrop {
	3172	padding: 0;
	3173	}
	3174	.pcms-modal {
	3175	border-radius: 0;
	3176	max-width: 100%;
	3177	max-height: 100vh;
	3178	height: 100vh;
	3179	}
	3180	}
	3181
	3182	/* v9.4 — Media → Playlists tab */
	3183	.playlists-page-header {
	3184	display: flex;
	3185	flex-wrap: wrap;
	3186	gap: 1rem;
	3187	align-items: center;
	3188	justify-content: space-between;
	3189	margin-bottom: 1.25rem;
	3190	}
	3191	.playlists-page-header > p { flex: 1; min-width: 200px; }
	3192	.playlists-grid {
	3193	display: grid;
	3194	grid-template-columns: 1fr;
	3195	gap: .75rem;
	3196	}
	3197	@media (min-width: 720px) {
	3198	.playlists-grid { grid-template-columns: repeat(2, 1fr); }
	3199	}
	3200	@media (min-width: 1100px) {
	3201	.playlists-grid { grid-template-columns: repeat(3, 1fr); }
	3202	}
	3203	.playlist-card {
	3204	display: grid;
	3205	grid-template-columns: 64px 1fr auto;
	3206	gap: .75rem;
	3207	align-items: center;
	3208	padding: .75rem;
	3209	border: 1px solid var(--border);
	3210	border-radius: var(--radius);
	3211	background: var(--paper, #fff);
	3212	}
	3213	.playlist-card-cover {
	3214	width: 64px;
	3215	height: 64px;
	3216	border-radius: 8px;
	3217	overflow: hidden;
	3218	background-color: color-mix(in srgb, var(--ink, #000) 6%, transparent);
	3219	display: flex;
	3220	align-items: center;
	3221	justify-content: center;
	3222	}
	3223	.playlist-card-cover img {
	3224	width: 100%;
	3225	height: 100%;
	3226	object-fit: cover;
	3227	}
	3228	.playlist-card-cover-empty { font-size: 1.6rem; opacity: .5; }
	3229	.playlist-card-info { min-width: 0; }
	3230	.playlist-card-title {
	3231	font-weight: 600;
	3232	overflow: hidden;
	3233	text-overflow: ellipsis;
	3234	white-space: nowrap;
	3235	}
	3236	.playlist-card-artist,
	3237	.playlist-card-meta {
	3238	font-size: .82rem;
	3239	overflow: hidden;
	3240	text-overflow: ellipsis;
	3241	white-space: nowrap;
	3242	}
	3243	.playlist-card-actions {
	3244	display: flex;
	3245	gap: .25rem;
	3246	flex-shrink: 0;
	3247	}
	3248
	3249	/* v9.4 — Playlist editor modal (mobile-friendly, single-column) */
	3250	.pl-editor {
	3251	/* Erft van .pcms-modal */
	3252	}
	3253	.pl-editor-meta {
	3254	display: grid;
	3255	grid-template-columns: 1fr;
	3256	gap: .75rem;
	3257	margin-bottom: 1rem;
	3258	}
	3259	@media (min-width: 560px) {
	3260	.pl-editor-meta {
	3261	grid-template-columns: 1fr 1fr;
	3262	}
	3263	.pl-editor-meta .pl-editor-field-full { grid-column: 1 / -1; }
	3264	}
	3265	.pl-editor-field {
	3266	display: flex;
	3267	flex-direction: column;
	3268	gap: .25rem;
	3269	min-width: 0;
	3270	}
	3271	.pl-editor-field span {
	3272	font-size: .82rem;
	3273	color: var(--fg-muted, #666);
	3274	font-weight: 500;
	3275	}
	3276	.pl-editor-field input,
	3277	.pl-editor-field select {
	3278	width: 100%;
	3279	box-sizing: border-box;
	3280	padding: .5rem .65rem;
	3281	font-size: .95rem;
	3282	border: 1px solid var(--border);
	3283	border-radius: 6px;
	3284	background: var(--paper, #fff);
	3285	color: var(--ink, #000);
	3286	}
	3287	.pl-editor-field input:focus,
	3288	.pl-editor-field select:focus {
	3289	outline: 2px solid var(--accent, #5a8a5a);
	3290	outline-offset: -1px;
	3291	}
	3292	.pl-editor-section-title {
	3293	margin: 1.25rem 0 .5rem;
	3294	font-size: 1rem;
	3295	font-weight: 600;
	3296	}
	3297	.pl-tracks-selected {
	3298	border: 1px solid var(--border);
	3299	border-radius: var(--radius);
	3300	background: var(--paper, #fff);
	3301	min-height: 60px;
	3302	margin-bottom: 1rem;
	3303	padding: .25rem;
	3304	}
	3305	.pl-tracks-empty {
	3306	padding: 1.5rem;
	3307	text-align: center;
	3308	color: var(--fg-muted, #666);
	3309	font-size: .9rem;
	3310	}
	3311	.pl-track-row {
	3312	display: grid;
	3313	grid-template-columns: 32px 36px 1fr auto;
	3314	gap: .5rem;
	3315	align-items: center;
	3316	padding: .5rem;
	3317	border-bottom: 1px solid var(--border);
	3318	background: var(--paper, #fff);
	3319	user-select: none;
	3320	touch-action: pan-x;
	3321	}
	3322	.pl-track-row:last-child { border-bottom: none; }
	3323	.pl-track-row.is-dragging {
	3324	opacity: .55;
	3325	transform: scale(.98);
	3326	background: color-mix(in srgb, var(--accent, #5a8a5a) 10%, transparent);
	3327	border-radius: 6px;
	3328	}
	3329	.pl-track-row.drop-target-above {
	3330	box-shadow: inset 0 2px 0 0 var(--accent, #5a8a5a);
	3331	}
	3332	.pl-track-row.drop-target-below {
	3333	box-shadow: inset 0 -2px 0 0 var(--accent, #5a8a5a);
	3334	}
	3335	.pl-track-handle {
	3336	cursor: grab;
	3337	font-size: 1.2rem;
	3338	line-height: 1;
	3339	color: var(--fg-muted, #666);
	3340	display: flex;
	3341	align-items: center;
	3342	justify-content: center;
	3343	height: 32px;
	3344	width: 32px;
	3345	border-radius: 4px;
	3346	flex-shrink: 0;
	3347	}
	3348	.pl-track-handle:active { cursor: grabbing; }
	3349	.pl-track-handle:hover {
	3350	background: color-mix(in srgb, var(--ink, #000) 8%, transparent);
	3351	}
	3352	.pl-track-num {
	3353	text-align: center;
	3354	color: var(--fg-muted, #666);
	3355	font-size: .85rem;
	3356	width: 36px;
	3357	}
	3358	.pl-track-info {
	3359	min-width: 0;
	3360	overflow: hidden;
	3361	}
	3362	.pl-track-title {
	3363	font-weight: 500;
	3364	overflow: hidden;
	3365	text-overflow: ellipsis;
	3366	white-space: nowrap;
	3367	}
	3368	.pl-track-artist {
	3369	font-size: .78rem;
	3370	color: var(--fg-muted, #666);
	3371	overflow: hidden;
	3372	text-overflow: ellipsis;
	3373	white-space: nowrap;
	3374	}
	3375	.pl-track-remove {
	3376	background: transparent;
	3377	border: none;
	3378	cursor: pointer;
	3379	padding: .35rem;
	3380	border-radius: 4px;
	3381	color: var(--fg-muted, #666);
	3382	font-size: 1.2rem;
	3383	line-height: 1;
	3384	}
	3385	.pl-track-remove:hover {
	3386	background: color-mix(in srgb, #c00 12%, transparent);
	3387	color: #c00;
	3388	}
	3389
	3390	/* Available tracks panel */
	3391	.pl-tracks-available-panel {
	3392	border: 1px solid var(--border);
	3393	border-radius: var(--radius);
	3394	background: var(--paper, #fff);
	3395	}
	3396	.pl-tracks-available-search {
	3397	padding: .5rem;
	3398	border-bottom: 1px solid var(--border);
	3399	}
	3400	.pl-tracks-available-search input {
	3401	width: 100%;
	3402	box-sizing: border-box;
	3403	}
	3404	.pl-tracks-available-list {
	3405	max-height: 30vh;
	3406	overflow-y: auto;
	3407	}
	3408	.pl-track-row-available {
	3409	display: grid;
	3410	grid-template-columns: 1fr auto;
	3411	gap: .5rem;
	3412	align-items: center;
	3413	padding: .5rem;
	3414	border-bottom: 1px solid var(--border);
	3415	cursor: pointer;
	3416	}
	3417	.pl-track-row-available:last-child { border-bottom: none; }
	3418	.pl-track-row-available:hover {
	3419	background: color-mix(in srgb, var(--accent, #5a8a5a) 8%, transparent);
	3420	}
	3421	.pl-track-row-available.is-already-added {
	3422	opacity: .4;
	3423	pointer-events: none;
	3424	}
	3425	.pl-track-add-btn {
	3426	background: transparent;
	3427	border: 1px solid var(--border);
	3428	border-radius: 4px;
	3429	padding: .25rem .5rem;
	3430	cursor: pointer;
	3431	font-size: .85rem;
	3432	color: var(--accent, #5a8a5a);
	3433	}
	3434
	3435	/* v9.3 — Tracklist items zijn nu klikbare <button class="pat-row"> binnen <li>.
	3436	De LI is puur een container zonder visuele styling; alles gebeurt op de button. */
	3437	.post-album-track-compact {
	3438	padding: 0;
	3439	margin: 0;
	3440	border-bottom: 1px solid var(--rule);
	3441	list-style: none;
	3442	}
	3443	.post-album-track-compact:last-child { border-bottom: none; }
	3444
	3445	.pat-row {
	3446	display: grid;
	3447	grid-template-columns: 32px 1fr auto;
	3448	gap: .65rem;
	3449	align-items: center;
	3450	width: 100%;
	3451	padding: .5rem .85rem;
	3452	background: transparent;
	3453	border: none;
	3454	color: inherit;
	3455	font: inherit;
	3456	font-size: .82rem;
	3457	text-align: left;
	3458	cursor: pointer;
	3459	position: relative;
	3460	transition: background .15s ease;
	3461	}
	3462	.pat-row:hover {
	3463	background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
	3464	}
	3465	.pat-row:active { transform: scale(.995); }
	3466	[data-theme="dark"] .pat-row:hover {
	3467	background: color-mix(in srgb, var(--paper, #fff) 10%, transparent);
	3468	}
	3469
	3470	/* Leader: track-nummer OF cover-thumb (afhankelijk van kind).
	3471	v9.3 — pat-leader is altijd 32×32, met overgang voor spinner-vervanging. */
	3472	.pat-row .pat-num,
	3473	.pat-row .pat-cover {
	3474	width: 32px;
	3475	height: 32px;
	3476	border-radius: 4px;
	3477	flex-shrink: 0;
	3478	transition: opacity .25s ease, transform .25s ease;
	3479	}
	3480	.pat-row .pat-num {
	3481	font-family: ui-monospace, monospace;
	3482	font-size: .8rem;
	3483	opacity: .5;
	3484	display: flex;
	3485	align-items: center;
	3486	justify-content: center;
	3487	}
	3488	.pat-row .pat-cover {
	3489	background-size: cover;
	3490	background-position: center;
	3491	background-color: color-mix(in srgb, var(--ink, #000) 8%, transparent);
	3492	}
	3493
	3494	/* v9.3 — Loading-spiraal als overlay op de leader-kolom.
	3495	pat-num/pat-cover faden uit, spinner faded in via ::before. */
	3496	.pat-row::before {
	3497	content: "";
	3498	position: absolute;
	3499	left: .85rem; top: 50%;
	3500	width: 32px; height: 32px;
	3501	transform: translateY(-50%);
	3502	color: var(--accent, #c2410c);
	3503	background-color: currentColor;
	3504	-webkit-mask: url('/assets/spinner.svg') center/26px 26px no-repeat;
	3505	mask: url('/assets/spinner.svg') center/26px 26px no-repeat;
	3506	opacity: 0;
	3507	transition: opacity .25s ease;
	3508	pointer-events: none;
	3509	animation: pat-spinner-rotate 1.2s linear infinite;
	3510	animation-play-state: paused;
	3511	}
	3512	.pat-row.is-loading::before {
	3513	opacity: 1;
	3514	animation-play-state: running;
	3515	}
	3516	.pat-row.is-loading .pat-num,
	3517	.pat-row.is-loading .pat-cover {
	3518	opacity: 0;
	3519	transform: scale(.85);
	3520	}
	3521	@keyframes pat-spinner-rotate {
	3522	from { transform: translateY(-50%) rotate(0deg); }
	3523	to { transform: translateY(-50%) rotate(-360deg); }
	3524	}
	3525
	3526	/* Meta-kolom */
	3527	.pat-row .pat-meta {
	3528	display: flex;
	3529	flex-direction: column;
	3530	min-width: 0;
	3531	gap: 1px;
	3532	overflow: hidden;
	3533	}
	3534	.pat-row .pat-title {
	3535	font-weight: 500;
	3536	overflow: hidden;
	3537	text-overflow: ellipsis;
	3538	white-space: nowrap;
	3539	}
	3540	.pat-row .pat-artist {
	3541	font-size: .72rem;
	3542	opacity: .6;
	3543	overflow: hidden;
	3544	text-overflow: ellipsis;
	3545	white-space: nowrap;
	3546	}
	3547	.pat-row .pat-duration {
	3548	font-family: ui-monospace, monospace;
	3549	font-size: .72rem;
	3550	opacity: .55;
	3551	font-variant-numeric: tabular-nums;
	3552	white-space: nowrap;
	3553	}
	3554	.pat-row .pat-duration-empty {
	3555	opacity: .25;
	3556	}
	3557
	3558	/* is-current — actieve track in de player */
	3559	.pat-row.is-current {
	3560	background: color-mix(in srgb, var(--accent, #c2410c) 12%, transparent);
	3561	}
	3562	.pat-row.is-current .pat-title,
	3563	.pat-row.is-current .pat-artist { color: var(--accent, #c2410c); }
	3564
	3565	/* v9.3 — Marquee bij actief afspelen: titel scrollt heen-en-weer.
	3566	--pat-shift wordt door JS gezet (= overflow in pixels). Bij 0 → geen
	3567	beweging want translateX(0) blijft 0.
	3568	Snelle cyclus (6s) met korte rust aan beide uiteinden (8%) zodat 't
	3569	vlot voelt zonder onleesbaar te zijn. */
	3570	.pat-row.is-current.is-playing .pat-title {
	3571	animation: pat-title-marquee 6s ease-in-out infinite alternate;
	3572	text-overflow: clip;
	3573	overflow: visible;
	3574	will-change: transform;
	3575	}
	3576	@keyframes pat-title-marquee {
	3577	0%, 8% { transform: translateX(0); }
	3578	92%, 100% { transform: translateX(calc(-1 * var(--pat-shift, 0px))); }
	3579	}
	3580
	3581	/* ============================================================
	3582	v9.0 — CSS-migratie voor OUDE opgeslagen albums
	3583	Oude posts hebben <li class="post-audio-track"> met play-knoppen + cover-spans.
	3584	We renderen die VISUEEL als compact, zonder de HTML aan te passen.
	3585	============================================================ */
	3586	.post-album-tracks .post-audio-track {
	3587	display: grid;
	3588	grid-template-columns: 28px 1fr auto;
	3589	gap: .75rem;
	3590	align-items: center;
	3591	padding: .5rem .85rem;
	3592	margin: 0;
	3593	border: none;
	3594	border-bottom: 1px solid var(--rule);
	3595	background: transparent;
	3596	border-radius: 0;
	3597	cursor: default;
	3598	font-size: .92rem;
	3599	}
	3600	.post-album-tracks .post-audio-track:last-child { border-bottom: none; }
	3601	/* Verberg de cover-thumb en play-button in OUDE saved posts */
	3602	.post-album-tracks .post-audio-track .pat-cover,
	3603	.post-album-tracks .post-audio-track .pat-play {
	3604	display: none !important;
	3605	}
	3606	.post-album-tracks .post-audio-track .pat-num {
	3607	font-family: ui-monospace, monospace;
	3608	font-size: .8rem;
	3609	opacity: .45;
	3610	text-align: center;
	3611	width: auto;
	3612	}
	3613	.post-album-tracks .post-audio-track .pat-meta {
	3614	display: flex;
	3615	flex-direction: column;
	3616	min-width: 0;
	3617	gap: 1px;
	3618	}
	3619	.post-album-tracks .post-audio-track .pat-title {
	3620	font-weight: 500;
	3621	overflow: hidden;
	3622	text-overflow: ellipsis;
	3623	white-space: nowrap;
	3624	}
	3625	.post-album-tracks .post-audio-track .pat-artist {
	3626	font-size: .78rem;
	3627	opacity: .6;
	3628	}
	3629	.post-album-tracks .post-audio-track .pat-duration {
	3630	font-family: ui-monospace, monospace;
	3631	font-size: .78rem;
	3632	opacity: .55;
	3633	}
	3634	.post-album-tracks .post-audio-track.is-current {
	3635	background: color-mix(in srgb, var(--accent, #c2410c) 10%, transparent);
	3636	}
	3637	.post-album-tracks .post-audio-track.is-current .pat-num,
	3638	.post-album-tracks .post-audio-track.is-current .pat-title {
	3639	color: var(--accent);
	3640	}
	3641
	3642	@media (max-width: 540px) {
	3643	.post-album-header { flex-direction: column; }
	3644	.post-album-cover-btn .post-album-cover { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1/1; }
	3645	}
	3646	@media (max-width: 380px) {
	3647	.post-album-header { padding: .75rem; gap: .75rem; }
	3648	.post-album-cover-btn .post-album-cover { max-width: 180px; }
	3649	.post-album-title { font-size: 1.15rem; }
	3650	.post-album-meta { font-size: .8rem; }
	3651	.post-album-track-compact,
	3652	.post-album-tracks .post-audio-track {
	3653	grid-template-columns: 24px 1fr auto;
	3654	gap: .5rem;
	3655	padding: .4rem .6rem;
	3656	font-size: .85rem;
	3657	}
	3658	.post-album-track-compact .pat-duration,
	3659	.post-album-tracks .post-audio-track .pat-duration {
	3660	font-size: .72rem;
	3661	}
	3662	/* Queue items in expand-sheet */
	3663	.audio-sheet-queue-item { padding: .4rem .45rem; gap: .55rem; }
	3664	.audio-sheet-queue-cover { width: 32px; height: 32px; }
	3665	.audio-sheet-queue-title { font-size: .85rem; }
	3666	.audio-sheet-queue-artist { font-size: .7rem; }
	3667	}
	3668
	3669	/* External track (SoundCloud / YouTube / Spotify / etc) — klikbaar maar link-naar-platform */
	3670	.post-audio-external {
	3671	display: flex;
	3672	align-items: center;
	3673	gap: .75rem;
	3674	padding: .65rem .85rem;
	3675	background: var(--paper-2, color-mix(in srgb, var(--ink) 4%, transparent));
	3676	border: 1px solid var(--rule, rgba(0,0,0,.08));
	3677	border-radius: 10px;
	3678	margin: .75rem 0;
	3679	text-decoration: none;
	3680	color: var(--ink);
	3681	transition: background .15s, border-color .15s;
	3682	}
	3683	.post-audio-external:hover {
	3684	border-color: var(--accent);
	3685	background: color-mix(in srgb, var(--accent) 5%, var(--paper-2, transparent));
	3686	}
	3687	.post-audio-external .pae-icon {
	3688	flex-shrink: 0;
	3689	width: 42px;
	3690	height: 42px;
	3691	border-radius: 8px;
	3692	display: inline-flex;
	3693	align-items: center;
	3694	justify-content: center;
	3695	background: var(--platform-color, #555);
	3696	color: #fff;
	3697	font-size: 1.2rem;
	3698	}
	3699	.post-audio-external .pae-icon-svg svg {
	3700	width: 60%;
	3701	height: 60%;
	3702	fill: currentColor;
	3703	}
	3704	/* Per-platform vult de box net wat anders — brand-specifiek geoptimaliseerd */
	3705	.post-audio-external[data-platform="soundcloud"] .pae-icon-svg svg { width: 72%; height: auto; }
	3706	.post-audio-external[data-platform="spotify"] .pae-icon-svg svg { width: 72%; height: 72%; }
	3707	.post-audio-external[data-platform="youtube"] .pae-icon-svg svg { width: 68%; height: auto; }
	3708	.post-audio-external[data-platform="bandcamp"] .pae-icon-svg svg { width: 62%; height: auto; }
	3709	.post-audio-external[data-platform="apple"] .pae-icon-svg svg { width: 58%; height: 58%; }
	3710	.post-audio-external[data-platform="tidal"] .pae-icon-svg svg { width: 68%; height: auto; }
	3711	.post-audio-external[data-platform="deezer"] .pae-icon-svg svg { width: 65%; height: auto; }
	3712	.post-audio-external[data-platform="mixcloud"] .pae-icon-svg svg { width: 75%; height: auto; }
	3713	.post-audio-external[data-platform="soundcloud"] .pae-icon { background: #ff5500; }
	3714	.post-audio-external[data-platform="spotify"] .pae-icon { background: #1db954; }
	3715	.post-audio-external[data-platform="youtube"] .pae-icon { background: #ff0000; }
	3716	.post-audio-external[data-platform="bandcamp"] .pae-icon { background: #1da0c3; }
	3717	.post-audio-external[data-platform="apple"] .pae-icon { background: #fa243c; }
	3718	.post-audio-external[data-platform="tidal"] .pae-icon { background: #000; }
	3719	.post-audio-external[data-platform="deezer"] .pae-icon { background: #a238ff; }
	3720	.post-audio-external[data-platform="mixcloud"] .pae-icon { background: #314359; }
	3721	.post-audio-external[data-platform="other"] .pae-icon { background: #555; }
	3722	.post-audio-external .pae-meta {
	3723	flex: 1;
	3724	min-width: 0;
	3725	display: flex;
	3726	flex-direction: column;
	3727	gap: 2px;
	3728	}
	3729	.post-audio-external .pae-title {
	3730	display: block;
	3731	font-weight: 600;
	3732	overflow: hidden;
	3733	text-overflow: ellipsis;
	3734	white-space: nowrap;
	3735	color: var(--ink);
	3736	}
	3737	.post-audio-external .pae-platform {
	3738	display: block;
	3739	font-size: .78rem;
	3740	opacity: .65;
	3741	text-transform: capitalize;
	3742	}
	3743	.post-audio-external .pae-go {
	3744	flex-shrink: 0;
	3745	opacity: .5;
	3746	font-size: 1.1rem;
	3747	}
	3748
	3749	/* =========================================================================
	3750	v9.0 — Video player (inline)
	3751	========================================================================= */
	3752
	3753	.post-video-figure {
	3754	margin: 1.25rem 0;
	3755	max-width: 100%;
	3756	}
	3757
	3758	.post-video {
	3759	display: block;
	3760	width: 100%;
	3761	max-width: 100%;
	3762	height: auto;
	3763	border-radius: 10px;
	3764	background: #000;
	3765	box-shadow: 0 4px 20px rgba(0,0,0,.15);
	3766	}
	3767
	3768	.post-video-caption {
	3769	margin-top: .5rem;
	3770	font-size: .88rem;
	3771	color: var(--ink-muted, color-mix(in srgb, var(--ink) 60%, transparent));
	3772	text-align: center;
	3773	line-height: 1.5;
	3774	}
	3775
	3776	.post-video-caption strong {
	3777	display: inline;
	3778	font-weight: 600;
	3779	color: var(--ink);
	3780	}
	3781
	3782	@media (max-width: 640px) {
	3783	.post-video-figure { margin: .75rem -.5rem; }
	3784	.post-video { border-radius: 6px; }
	3785	}
	3786
	3787	/* v9.3 — Floating "Bewerken" knop voor album-blokken in de post-editor.
	3788	Verschijnt bij hover over een .post-album binnen #visual en wordt via JS
	3789	geplaatst op de rechterbovenhoek van het blok. Niet in de opgeslagen HTML. */
	3790	.pcms-album-edit-overlay {
	3791	position: absolute;
	3792	z-index: 1000;
	3793	transform: translateX(-100%);
	3794	display: inline-flex;
	3795	align-items: center;
	3796	gap: .35rem;
	3797	padding: .35rem .7rem;
	3798	background: var(--accent, #c2410c);
	3799	color: #fff;
	3800	border: none;
	3801	border-radius: 6px;
	3802	font-size: .82rem;
	3803	font-weight: 600;
	3804	cursor: pointer;
	3805	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	3806	transition: transform .12s ease, box-shadow .12s ease;
	3807	}
	3808	.pcms-album-edit-overlay:hover {
	3809	transform: translateX(-100%) translateY(-1px);
	3810	box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
	3811	}
	3812	.pcms-album-edit-overlay:active {
	3813	transform: translateX(-100%) translateY(0);
	3814	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	3815	}
	3816
	3817	/* v9.3 — Drag-and-drop in de album-builder selected-lijst */
	3818	.ab-selected-row { cursor: default; }
	3819	.ab-selected-row .ab-drag-handle {
	3820	display: inline-flex;
	3821	align-items: center;
	3822	justify-content: center;
	3823	width: 18px;
	3824	height: 100%;
	3825	color: color-mix(in srgb, currentColor 40%, transparent);
	3826	cursor: grab;
	3827	user-select: none;
	3828	font-size: .9rem;
	3829	letter-spacing: -2px;
	3830	flex-shrink: 0;
	3831	}
	3832	.ab-selected-row:hover .ab-drag-handle {
	3833	color: color-mix(in srgb, currentColor 70%, transparent);
	3834	}
	3835	.ab-selected-row.is-dragging {
	3836	opacity: .35;
	3837	cursor: grabbing;
	3838	}
	3839	.ab-selected-row.is-dragging .ab-drag-handle { cursor: grabbing; }
	3840	/* Drop-indicator lijnen boven/onder de target rij */
	3841	.ab-selected-row.is-drag-target-before {
	3842	box-shadow: 0 -2px 0 0 var(--accent, #c2410c) inset, 0 2px 0 0 var(--accent, #c2410c);
	3843	/* Gebruik outline voor cross-browser zichtbaarheid */
	3844	position: relative;
	3845	}
	3846	.ab-selected-row.is-drag-target-before::before {
	3847	content: "";
	3848	position: absolute;
	3849	top: -1px; left: 0; right: 0;
	3850	height: 2px;
	3851	background: var(--accent, #c2410c);
	3852	pointer-events: none;
	3853	}
	3854	.ab-selected-row.is-drag-target-after::after {
	3855	content: "";
	3856	position: absolute;
	3857	bottom: -1px; left: 0; right: 0;
	3858	height: 2px;
	3859	background: var(--accent, #c2410c);
	3860	pointer-events: none;
	3861	}
	3862	.ab-selected-row.is-drag-target-after { position: relative; }
	3863
	3864	/* v9.3 — Playlist fallback states (missing of empty playlist reference in post) */
	3865	.post-playlist-missing, .post-playlist-empty {
	3866	padding: 1rem;
	3867	margin: .75rem 0;
	3868	background: color-mix(in srgb, var(--accent, #c2410c) 8%, transparent);
	3869	border: 1px dashed color-mix(in srgb, var(--accent, #c2410c) 30%, transparent);
	3870	border-radius: 8px;
	3871	font-size: .9rem;
	3872	}
	3873	.post-playlist-missing em, .post-playlist-empty em {
	3874	opacity: .8;
	3875	}
	3876
	3877	/* v9.3 — Install-app footer-knop */
	3878	.site-footer-install {
	3879	display: flex;
	3880	justify-content: center;
	3881	padding: 1rem 1rem 1.25rem;
	3882	border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
	3883	margin-top: .5rem;
	3884	}
	3885
	3886	/* v9.4 — Cooler install-knop: gradient + shimmer + perfect centering.
	3887	Twee kleur-stops voor diepte, animated shimmer-streep om aandacht te trekken,
	3888	icon perfect verticaal gecentreerd via flex (was: net iets te hoog tov tekst). */
	3889	.install-app-btn {
	3890	position: relative;
	3891	display: inline-flex;
	3892	align-items: center;
	3893	justify-content: center;
	3894	gap: .55rem;
	3895	padding: .8rem 1.6rem;
	3896	background: linear-gradient(135deg,
	3897	var(--accent, #c2410c),
	3898	color-mix(in srgb, var(--accent, #c2410c) 80%, #000));
	3899	color: #fff;
	3900	border: none;
	3901	border-radius: 999px;
	3902	font: inherit;
	3903	font-weight: 600;
	3904	font-size: .95rem;
	3905	line-height: 1;
	3906	letter-spacing: .01em;
	3907	cursor: pointer;
	3908	overflow: hidden;
	3909	isolation: isolate;
	3910	box-shadow:
	3911	0 1px 0 rgba(255,255,255,.15) inset,
	3912	0 -2px 0 rgba(0,0,0,.1) inset,
	3913	0 4px 14px color-mix(in srgb, var(--accent, #c2410c) 40%, transparent),
	3914	0 1px 3px rgba(0,0,0,.18);
	3915	transition:
	3916	transform .15s cubic-bezier(.4, 0, .2, 1),
	3917	box-shadow .2s ease,
	3918	filter .15s ease;
	3919	}
	3920	.install-app-btn svg {
	3921	flex-shrink: 0;
	3922	/* subtle bounce-on-hover trigger, separate animation */
	3923	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
	3924	}
	3925	.install-app-btn span {
	3926	line-height: 1;
	3927	}
	3928
	3929	/* Shimmer-streep die langzaam over de knop loopt — "alive" effect */
	3930	.install-app-btn::before {
	3931	content: "";
	3932	position: absolute;
	3933	top: 0;
	3934	left: -100%;
	3935	width: 60%;
	3936	height: 100%;
	3937	background: linear-gradient(110deg,
	3938	transparent 30%,
	3939	rgba(255,255,255,.25) 50%,
	3940	transparent 70%);
	3941	z-index: -1;
	3942	animation: pcmsInstallShimmer 4s ease-in-out infinite;
	3943	pointer-events: none;
	3944	}
	3945	@keyframes pcmsInstallShimmer {
	3946	0%, 35% { left: -100%; }
	3947	65%, 100% { left: 200%; }
	3948	}
	3949
	3950	.install-app-btn:hover {
	3951	transform: translateY(-2px) scale(1.02);
	3952	filter: brightness(1.06);
	3953	box-shadow:
	3954	0 1px 0 rgba(255,255,255,.2) inset,
	3955	0 -2px 0 rgba(0,0,0,.1) inset,
	3956	0 8px 24px color-mix(in srgb, var(--accent, #c2410c) 55%, transparent),
	3957	0 2px 6px rgba(0,0,0,.2);
	3958	}
	3959	.install-app-btn:hover svg {
	3960	transform: translateY(-2px);
	3961	}
	3962	.install-app-btn:active {
	3963	transform: translateY(0) scale(.98);
	3964	transition-duration: .05s;
	3965	}
	3966	.install-app-btn:focus-visible {
	3967	outline: 2px solid var(--accent, #c2410c);
	3968	outline-offset: 3px;
	3969	}
	3970
	3971	/* Reduced motion: shimmer uit, alleen statisch */
	3972	@media (prefers-reduced-motion: reduce) {
	3973	.install-app-btn::before { animation: none; left: -100%; }
	3974	.install-app-btn:hover { transform: none; }
	3975	.install-app-btn:hover svg { transform: none; }
	3976	}
	3977
	3978	/* Install-instructions modal */
	3979	.install-modal {
	3980	position: fixed;
	3981	inset: 0;
	3982	z-index: 10000;
	3983	display: flex;
	3984	align-items: center;
	3985	justify-content: center;
	3986	padding: 1rem;
	3987	}
	3988	.install-modal-backdrop {
	3989	position: absolute;
	3990	inset: 0;
	3991	background: rgba(0,0,0,.55);
	3992	backdrop-filter: blur(3px);
	3993	}
	3994	.install-modal-panel {
	3995	position: relative;
	3996	z-index: 1;
	3997	background: var(--paper);
	3998	color: var(--ink);
	3999	border: 1px solid var(--rule);
	4000	border-radius: 14px;
	4001	padding: 1.5rem;
	4002	max-width: 440px;
	4003	width: 100%;
	4004	max-height: 90vh;
	4005	overflow-y: auto;
	4006	box-shadow: 0 20px 60px rgba(0,0,0,.4);
	4007	}
	4008	.install-modal-panel h3 { font-size: 1.15rem; color: var(--ink); }
	4009	.install-modal-panel h4 {
	4010	margin: 1rem 0 .4rem;
	4011	font-size: .92rem;
	4012	letter-spacing: .03em;
	4013	text-transform: uppercase;
	4014	opacity: .7;
	4015	color: var(--ink);
	4016	}
	4017	.install-modal-panel p { color: var(--ink); }
	4018	.install-steps {
	4019	margin: 0;
	4020	padding-left: 1.35rem;
	4021	display: flex;
	4022	flex-direction: column;
	4023	gap: .45rem;
	4024	font-size: .95rem;
	4025	line-height: 1.45;
	4026	color: var(--ink);
	4027	}
	4028	.install-steps li::marker { color: var(--accent); font-weight: 700; }
	4029	.install-apk-block {
	4030	margin-top: 1.25rem;
	4031	padding-top: 1rem;
	4032	border-top: 1px dashed var(--rule);
	4033	}
	4034	.install-apk-link {
	4035	display: inline-flex;
	4036	align-items: center;
	4037	margin-top: .4rem;
	4038	padding: .6rem 1rem;
	4039	background: var(--accent);
	4040	color: #fff;
	4041	border-radius: 8px;
	4042	text-decoration: none;
	4043	font-weight: 600;
	4044	}
	4045	.install-apk-link:hover { filter: brightness(1.08); }
	4046	.install-modal-actions {
	4047	display: flex;
	4048	justify-content: flex-end;
	4049	margin-top: 1.25rem;
	4050	}
	4051	.install-modal-actions .btn {
	4052	padding: .5rem 1rem;
	4053	background: var(--paper-2);
	4054	border: 1px solid var(--rule);
	4055	border-radius: 8px;
	4056	color: var(--ink);
	4057	cursor: pointer;
	4058	font: inherit;
	4059	font-weight: 500;
	4060	}
	4061	.install-modal-actions .btn:hover {
	4062	background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
	4063	border-color: var(--accent);
	4064	color: var(--accent);
	4065	}
	4066
	4067	@media (max-width: 520px) {
	4068	.install-modal-panel { padding: 1.2rem; }
	4069	.install-app-btn { width: 100%; justify-content: center; }
	4070	}
	4071
	4072	/* v9.3 — Install-modal: choice-blocks met voor/nadelen */
	4073	.install-choice {
	4074	margin-top: 1.25rem;
	4075	padding: 1rem;
	4076	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	4077	border-radius: 10px;
	4078	background: color-mix(in srgb, currentColor 3%, transparent);
	4079	}
	4080	.install-choice + .install-choice { margin-top: 1rem; }
	4081	.install-choice h4 {
	4082	margin: 0 0 .75rem;
	4083	font-size: 1rem;
	4084	letter-spacing: 0;
	4085	text-transform: none;
	4086	opacity: 1;
	4087	}
	4088	.install-pros-cons {
	4089	display: flex;
	4090	gap: 1rem;
	4091	margin: .5rem 0 1rem;
	4092	}
	4093	.install-pros,
	4094	.install-cons {
	4095	flex: 1;
	4096	min-width: 0;
	4097	font-size: .85rem;
	4098	line-height: 1.45;
	4099	}
	4100	.install-pros strong,
	4101	.install-cons strong {
	4102	display: block;
	4103	margin-bottom: .35rem;
	4104	font-size: .82rem;
	4105	letter-spacing: .02em;
	4106	}
	4107	.install-pros strong { color: #16a34a; }
	4108	.install-cons strong { color: #dc2626; }
	4109	.install-pros ul,
	4110	.install-cons ul {
	4111	margin: 0;
	4112	padding-left: 1.1rem;
	4113	display: flex;
	4114	flex-direction: column;
	4115	gap: .25rem;
	4116	}
	4117	.install-pros li::marker { color: #16a34a; }
	4118	.install-cons li::marker { color: #dc2626; }
	4119
	4120	.install-choice-cta {
	4121	display: inline-flex;
	4122	align-items: center;
	4123	justify-content: center;
	4124	gap: .35rem;
	4125	margin-top: .5rem;
	4126	padding: .7rem 1.1rem;
	4127	background: var(--accent, #c2410c);
	4128	color: #fff;
	4129	border: none;
	4130	border-radius: 8px;
	4131	text-decoration: none;
	4132	font: inherit;
	4133	font-weight: 600;
	4134	font-size: .95rem;
	4135	cursor: pointer;
	4136	transition: filter .12s ease;
	4137	}
	4138	.install-choice-cta:hover { filter: brightness(1.08); }
	4139	.install-choice-note {
	4140	margin: .5rem 0 0;
	4141	padding: .6rem .8rem;
	4142	background: color-mix(in srgb, currentColor 4%, transparent);
	4143	border-left: 3px solid var(--accent, #c2410c);
	4144	border-radius: 4px;
	4145	font-size: .9rem;
	4146	line-height: 1.45;
	4147	}
	4148
	4149	@media (max-width: 520px) {
	4150	.install-pros-cons { flex-direction: column; gap: .75rem; }
	4151	}
	4152
	4153	/* v9.4 — Soft fade-overgang tussen posts bij navigatie.
	4154	Fade-out is rustig (450ms): oude content vervaagt geleidelijk terwijl
	4155	de scroll-naar-top loopt. Fade-in is snel (180ms) met een lichte blur-
	4156	onscherp → scherp animatie zodat de nieuwe content niet abrupt verschijnt. */
	4157	#pcms-main {
	4158	transition: opacity .45s ease-out;
	4159	}
	4160	#pcms-main.is-pcms-transitioning-out {
	4161	opacity: 0;
	4162	}
	4163	#pcms-main.is-pcms-transitioning-in {
	4164	opacity: 0;
	4165	filter: blur(6px);
	4166	animation: pcmsFadeIn .18s ease-out forwards;
	4167	will-change: opacity, filter;
	4168	}
	4169	@keyframes pcmsFadeIn {
	4170	from { opacity: 0; filter: blur(6px); }
	4171	to { opacity: 1; filter: blur(0); }
	4172	}
	4173
	4174	/* Respecteer reduced-motion voorkeur (iOS/Android accessibility setting) */
	4175	@media (prefers-reduced-motion: reduce) {
	4176	#pcms-main {
	4177	transition: opacity .15s ease-out;
	4178	}
	4179	#pcms-main.is-pcms-transitioning-in {
	4180	filter: none;
	4181	animation: none;
	4182	opacity: 1;
	4183	}
	4184	}

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Klonkt/src/assets/css/style.css@ d5b9d2a

Download in other formats: