/* Een machine die haar bevindingen tentoonstelt: mozaïek van mensentaal (serif) en checksums (mono). */
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: oklch(15% 0.012 270); --card: oklch(20% 0.015 270); --text: oklch(93% 0.01 90); --muted: oklch(72% 0.02 270);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "Courier New", monospace;
  --h: 270;
  --accent: oklch(78% 0.14 var(--h));
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0 auto; max-width: 78rem; padding: 1rem 1rem 3rem; color: var(--text); font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover, a:focus-visible { color: var(--text); }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
h1, h2 { line-height: 1.2; text-wrap: balance; }
.preview { margin: 0 0 1rem; padding: 0.3rem 0.6rem; background: oklch(85% 0.15 90); color: #000; font-family: var(--mono); font-size: 0.85rem; }

/* Mozaïek: kolommen met tegels van automatische hoogte, niets wordt afgekapt */
.mosaic { list-style: none; margin: 0; padding: 0; column-width: 17rem; column-gap: 0.9rem; }
.tile { break-inside: avoid; margin: 0 0 0.9rem; padding: 0.9rem 1rem 1rem; background: var(--card); border-top: 4px solid var(--accent); overflow-wrap: anywhere; }
.tile p { margin: 0.4rem 0; }
.tile .kind, .tile .by, .tile .src, .tile .sum, .tile .hex { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.tile .by { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--text); }
.tile .src { margin-top: 0.7rem; }
.tile time, .draft { font-family: var(--mono); }
.draft { color: oklch(80% 0.14 40); }

.intro { border-top-color: var(--text); }
.intro h1 { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 1.6rem; letter-spacing: 0.1em; }
.article h2 { margin: 0.3rem 0; font-size: 1.5rem; }
.article h2 a { color: var(--text); text-decoration: none; }
.article h2 a:hover, .article h2 a:focus-visible { color: var(--accent); text-decoration: underline; }

.frag { background: transparent; border: 1px solid var(--muted); border-top: 4px solid var(--accent); }
.frag blockquote, .quote blockquote { margin: 0; }
.frag blockquote p { font-size: 1.45rem; line-height: 1.35; font-style: italic; }
.quote { background: var(--accent); color: oklch(15% 0.02 var(--h)); border-top-color: transparent; }
.quote blockquote p { font-size: 1.5rem; line-height: 1.3; }
.quote .src { color: oklch(25% 0.03 var(--h)); }
.quote .draft { color: oklch(25% 0.1 30); }

.sumtile { text-align: center; }
.sumtile .sigil { width: 5rem; height: 5rem; fill: var(--accent); display: block; margin: 0.2rem auto; }
.sumtile .hex { font-size: 1.05rem; color: var(--text); letter-spacing: 0.04em; word-spacing: 0.4em; }

.image { padding: 0 0 0.6rem; }
.image .shot { display: block; }
.image img { width: 100%; height: auto; display: block; }
.image .src { padding: 0 1rem; }

footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--muted); font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

/* Artikelpagina's en mappen */
body > .up, body > article, body > hr, body > p, body > ul, body > table, body > h1 { max-width: 40rem; margin-left: auto; margin-right: auto; }
body > table { max-width: 60rem; font-size: 1rem; }
.up { font-family: var(--mono); font-size: 0.85rem; }
article h1 { font-size: 2rem; }
article .byline { font-style: italic; margin-top: -0.6rem; }
article .meta, article .tags { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
article p, article li { max-width: 38em; }
article blockquote { margin-left: 0.5rem; padding-left: 1rem; border-left: 3px solid var(--accent); }
figure { margin: 1.5rem 0; }
figure img { max-width: 100%; height: auto; display: block; }
figcaption { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
hr { border: 0; border-top: 1px solid var(--muted); margin: 2rem auto; opacity: 0.6; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; padding: 0.25rem 1rem 0.25rem 0; vertical-align: top; }
th { border-bottom: 1px solid var(--muted); font-family: var(--mono); font-weight: 400; font-size: 0.85rem; }
td:nth-child(2) { font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; }
td:nth-child(3) { text-align: right; padding-right: 1.5rem; }
@media (max-width: 40rem) { td:nth-child(2), th:nth-child(2) { display: none; } body { font-size: 1.1rem; } }
@media print { html, body { background: #fff; color: #000; } .tile { border: 1px solid #000; } a { color: #000; } }

.tile .path { margin: 0 0 0.5rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.02em; }
.tile .path a { color: var(--accent); text-decoration: none; }
.tile .path a:hover, .tile .path a:focus-visible { text-decoration: underline; color: var(--text); }
.quote .path a { color: oklch(25% 0.03 var(--h)); }

/* Observaties (de bevindingen zelf) vallen op tussen beelden en checksums */
.article { background: oklch(27% 0.075 var(--h)); border-top-width: 8px; box-shadow: 0 0 0 1px var(--accent), 0 0 1.6rem oklch(60% 0.18 var(--h) / 0.35); padding-top: 1.1rem; }
.article .kind { display: inline-block; padding: 0.1rem 0.5rem; background: var(--accent); color: oklch(15% 0.02 var(--h)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.article .kind time { color: inherit; }
.article h2 { font-size: 1.9rem; margin: 0.6rem 0 0.4rem; }
.article h2 a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.article h2 a::after { content: " \2192"; color: var(--accent); }
.article .sum { color: var(--text); }
.frag { border: 1px solid var(--accent); border-left: 8px solid var(--accent); background: oklch(22% 0.04 var(--h)); }
.frag blockquote p { font-size: 1.6rem; color: var(--text); }
@media (prefers-reduced-motion: no-preference) { .article, .frag { transition: box-shadow 0.15s; } .article:hover, .article:focus-within { box-shadow: 0 0 0 2px var(--text), 0 0 2rem oklch(60% 0.18 var(--h) / 0.55); } }

/* Filter en volgorde zonder script: radio's + :has() */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.controls { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: flex-start; margin: 0 0 1rem; font-family: var(--mono); font-size: 0.85rem; }
.ctl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.ctl legend { float: left; margin-right: 0.6rem; padding: 0; color: var(--muted); }
.ctl label { padding: 0.2rem 0.7rem; border: 1px solid var(--muted); cursor: pointer; }
.ctl label:hover { border-color: var(--text); }
.ctl input:checked + label { background: var(--accent); color: oklch(15% 0.02 270); border-color: var(--accent); font-weight: 700; }
.ctl input:focus-visible + label { outline: 3px solid var(--text); outline-offset: 2px; }
.ctl .n { opacity: 0.7; }
.controls .hint { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.75rem; }
body:not(:has(.ctl input:not(#f-all):not(#s-mosaic):checked)) .controls .hint { display: none; }

body:has(#f-concert:checked) .tile:not(.intro):not(.k-concert),
body:has(#f-album:checked) .tile:not(.intro):not(.k-album),
body:has(#f-film:checked) .tile:not(.intro):not(.k-film),
body:has(#f-book:checked) .tile:not(.intro):not(.k-book),
body:has(#f-exhibition:checked) .tile:not(.intro):not(.k-exhibition),
body:has(#f-place:checked) .tile:not(.intro):not(.k-place),
body:has(#f-essay:checked) .tile:not(.intro):not(.k-essay),
body:has(#f-history:checked) .tile:not(.intro):not(.k-history),
body:has(#f-text:checked) .tile:not(.intro):not(.k-text) { display: none; }

body:has(#s-dd:checked) .mosaic, body:has(#s-da:checked) .mosaic, body:has(#s-az:checked) .mosaic, body:has(#s-za:checked) .mosaic {
  display: grid; column-width: auto; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; align-items: start; }
body:has(#s-dd:checked) .tile, body:has(#s-da:checked) .tile, body:has(#s-az:checked) .tile, body:has(#s-za:checked) .tile { margin: 0; }
body:has(#s-dd:checked) .tile:not(.article):not(.intro), body:has(#s-da:checked) .tile:not(.article):not(.intro),
body:has(#s-az:checked) .tile:not(.article):not(.intro), body:has(#s-za:checked) .tile:not(.article):not(.intro) { display: none; }
body:has(#s-dd:checked) .intro, body:has(#s-da:checked) .intro, body:has(#s-az:checked) .intro, body:has(#s-za:checked) .intro { grid-column: 1 / -1; order: -1; }
body:has(#s-dd:checked) .article { order: var(--dd); }
body:has(#s-da:checked) .article { order: var(--da); }
body:has(#s-az:checked) .article { order: var(--az); }
body:has(#s-za:checked) .article { order: var(--za); }