Context Navigation

style.css@ d2c43f9

main

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

Circles: scope toggle centered instead of left-aligned (margin-right:auto removed)

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

Property mode set to 100644

File size: 124.7 KB

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

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

Context Navigation

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

Download in other formats: