Context Navigation

style.css@ 8f6a61d

main

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

User-menu dropdown frosted blur now works: masthead backdrop-filter removed

Root cause: the masthead (ancestor) had backdrop-filter:blur(12px), which
blocks the backdrop-filter of child elements below it (an element cannot
blur the page if an ancestor already has a backdrop-filter). The masthead
is nearly opaque anyway → backdrop-filter removed, bg set to 94%. Dropdown
now blur(34px)/60%. CSS cache-buster v5.

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

Property mode set to 100644

File size: 125.2 KB

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

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

Context Navigation

source: Klonkt/src/assets/css/style.css@ 8f6a61d

Download in other formats: