Context Navigation

style.css@ 03bfdce

main

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

Hub: always render chrome + CSS toggle (body.on-hub) → hub nav via htmx (no audio jumping)

In hub mode, topnav/view-switcher are now always in the DOM; CSS hides them
on the hub landing (body.on-hub, also toggled in the htmx body-class swap).
Roster, main card, feed, and brand links are now htmx → navigating between
hub-home and an artist happens in-place, so the persistent audio player
stays alive (no jumping). Solo/circle completely unchanged
(renderChrome = !bareChrome there).

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

Property mode set to 100644

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

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

Context Navigation

source: Klonkt/src/assets/css/style.css@ 03bfdce

Download in other formats: