Context Navigation

style.css@ 93d6345

main

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

Theme scrollbar + install button in the footer row (no longer a separate row)

Slim, rounded theme scrollbar (scrollbar-width/color + ::-webkit-scrollbar) instead of the default chunky browser scrollbar; works on page + internal scrollers.
"Install app" moved from its own row below the footer to the centre of the footer row (compact variant) → saves vertical space.

CSS cache-buster v8.

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

Property mode set to 100644

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

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

Context Navigation

source: Klonkt/src/assets/css/style.css@ 93d6345

Download in other formats: