/*
 * mokumnacht.nl — Amsterdam by district.
 *
 * Written as modules: each block below is one part of the page, and the parts do not
 * borrow each other's rules. One neighbour composes utilities, another keeps its CSS inside
 * the layout, a third writes BEM — which of those a site does is one of the axes they
 * are kept apart on.
 *
 * Almost nothing here is a class. The markup leans on elements and their position
 * (article h3, dl dt, nav a), so the document reads as HTML rather than as a list of
 * class names — and two sites cannot share a class vocabulary they do not have.
 */

/* ---- 1. ground ---------------------------------------------------------- */

:root {
    --paper: #fbf7f0;
    --ink: #241d16;
    --soft: #6f6353;
    --line: #e3d9c8;
    --tint: #f3ece0;
    --accent: #b4661f;
    --accent-soft: #f0dcc4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    /* A column at least as tall as the window, with the sheet below taking the slack.
       Without it the footer sits wherever the content happened to end, and a page shorter
       than the window — the age check, the rules, a 404, a place with nothing in it yet —
       leaves a band of bare ground under it. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    /* A geometric grotesque, and nothing fetched: a webfont would be one request every
       page of every site makes to the same third party. */
    font: 16px/1.65 Roboto, "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0.01em;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

main, header > div, footer > div {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: 22px;
}

/* ---- 2. masthead: one column, nothing fixed ----------------------------- */

header {
    border-bottom: 1px solid var(--line);
    background: var(--tint);
}

header > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Allowed to wrap: the wordmark and the two links together are close to the width of
       a small phone, and a flex item does not shrink below its content — one long word in
       either would push the page wider than the screen rather than move to a second line. */
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-block: 18px;
}

/* The wordmark: two lines, one weight, one colour — no accent inside the word and no
   letterspacing. The monogram sits beside it in a square. */
header a[rel="home"] {
    display: flex;
    align-items: center;
    gap: 12px;
}

header a[rel="home"] b {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: var(--ink);
    color: var(--paper);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

header a[rel="home"] span {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.05;
    text-transform: lowercase;
}

header nav {
    display: flex;
    gap: 20px;
    font-size: 15px;
}

header nav a { color: var(--soft); padding-block: 4px; }
header nav a:hover { color: var(--ink); }
header nav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }

/* ---- 3. page furniture -------------------------------------------------- */

main { padding-block: 34px 60px; }

h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    margin-block: 34px 14px;
}

main > p { color: var(--soft); max-width: 64ch; margin-top: 10px; }

/* ---- 4. facts: small caps rather than pills ----------------------------- */

ul[role="list"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    margin-top: 16px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soft);
}

ul[role="list"] strong { color: var(--ink); font-weight: 600; }

/* ---- 5. the listing: a masonry column flow ------------------------------ */

/* Cards of uneven height fill the columns instead of lining up in a grid: a photograph
   keeps its own proportions and the page has no ragged bottom edge. */
/* Een raster, geen kolommen. `columns` verdeelde de kaarten over drie stromen en liet
   ze op ongelijke hoogte eindigen: bij vier buren stond er één laag, één hoog en twee
   ertussen, met gaten ertussenin die als een fout worden gelezen — niet als opzet.

   De hoogte komt nu van de foto, die overal dezelfde verhouding krijgt; wat de kaarten
   onderling nog scheelt is de naam, en die staat op één regel. */
section[id="listing"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 14px;
    margin-top: 20px;
}

section[id="listing"] article {
    /* Elke kaart even hoog, met de naam onderaan uitgelijnd: anders zweeft de tekst van
       de ene kaart hoger dan die van de buurkaart. */
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
}

section[id="listing"] article img {
    width: 100%;
    /* Vaste verhouding: zonder deze regel bepaalt elke foto haar eigen hoogte en eindigen
       de kaarten op ongelijke hoogte — precies wat het raster hierboven moest oplossen. */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    /* Bijgesneden naar boven: dit zijn zelfgemaakte portretten, het gezicht zit in het
       bovenste derde deel en een gecentreerde snede houdt de vloer over. */
    object-position: 50% 18%;
    display: block;
    border-radius: 0;
}

section[id="listing"] article > div { padding: 12px 14px 14px; }

/* Het strookje voor een kaart met film. De anker is de plaatsingsbasis; zonder
   `position` zou het strookje tegen de pagina worden geplaatst in plaats van tegen de foto. */
section[id="listing"] article a { position: relative; display: block; }

/* Onderaan links en niet rechtsboven: het gezicht zit in het bovenste derde deel van deze
   portretten (zie `object-position` hierboven), dus daar dekt een merkje precies af
   waarvoor de kaart er staat. Onderaan ligt kleding of achtergrond.

   ⚠️ Het woord staat erbij. Alleen het driehoekje stond hier eerder en las als een
   pijltje — een vorm zonder letters zegt niet wát erachter zit. De driehoek blijft
   ervoor staan, zodat de vorm al werkt voordat iemand leest. */
section[id="listing"] article a span[data-film] {
    /* In de stroom en NIET absoluut. Absoluut geplaatst rekent de browser vanaf de anker,
       en die is hoger dan de foto — het strookje kwam over de leeftijd te staan in plaats
       van over het beeld. Nu staat het direct na de <img>, en een negatieve marge tilt het
       de onderrand van de foto op; dat werkt bij elke hoogte die de verhouding oplevert. */
    position: relative;
    z-index: 1;
    /* De hoogte staat vast en de drie getallen tellen op tot nul: 24 hoog, 32 omhoog,
       8 terug. Het strookje neemt dus geen ruimte in de stroom en ligt 8px boven de
       onderrand van de foto. Zonder VASTE hoogte hangt die van het lettertype af —
       gemeten 24,14 — en dan staat de naam van een kaart mét film twee pixels lager dan
       die van de buurkaart, wat als een fout leest en niet als opzet. */
    box-sizing: border-box;
    height: 24px;
    margin-top: -32px;
    margin-bottom: 8px;
    width: fit-content;
    left: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px 0 7px;
    /* Tegen de rand aan, met alleen de rechterhoek af: een strookje dat aan de linkerkant
       uit de foto loopt hoort bij het beeld, een zwevend blokje ligt erop. */
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* De foto's eronder zijn donker én licht; zonder schaduw versmelt het vlak met een
       donkere foto langs zijn onderrand. */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Een driehoek uit randen, geen letter: een glyph verschilt per lettertype en per
   besturingssysteem, en op één daarvan staat er een leeg vierkant. */
section[id="listing"] article a span[data-film]::before {
    content: "";
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent currentColor;
}

section[id="listing"] h3 {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

section[id="listing"] article p {
    margin-top: 2px;
    font-size: 13px;
    color: var(--soft);
}

/* ---- 5c. pager: a full row, not a lone corner link ---------------------- */

/* Left-aligned rather than centred or matched to the grid's own right edge: the tile
   grid is `auto-fill` with `1fr` tracks, and an empty trailing track on a row that does
   not fill evenly would sit to the right of the last real tile — centring or
   right-aligning against the CONTAINER would then miss the tiles themselves. Left is
   exact here because `main` gives both the listing and this row the same padding, with
   nothing in between narrowing either one. */
nav[id="pager"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    /* ~40px clear of the last row of tiles, well past the 32px the review asked for. */
    margin-top: 40px;
}

nav[id="pager"] ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

nav[id="pager"] a,
nav[id="pager"] span[aria-current],
nav[id="pager"] span[data-gap] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

nav[id="pager"] ol a {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

nav[id="pager"] ol a:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* The current page: filled rather than bordered, and not a link — the box that cannot
   be clicked reads differently from the ones that can, before anyone reads the number. */
nav[id="pager"] span[aria-current] {
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
}

nav[id="pager"] span[data-gap] {
    color: var(--soft);
    border: none;
}

/* ---- 5b. the cover ------------------------------------------------------ */

/* The opening screen: what the site holds, said in words on one side and shown on the
   other. Text first in the source so a narrow screen reads the sentence before the
   photographs, and so the crawler meets the heading before three images. */
section[id="cover"] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 34px;
    /* Aligned to the top, not centred. The two columns are of unlike height — a few lines
       against a block of photographs — and centring the short one hangs it in the middle
       of a band of empty paper with the heading nowhere near the masthead. */
    align-items: start;
    margin-top: 10px;
}

section[id="cover"] h1 { font-size: 46px; letter-spacing: -0.025em; }

section[id="cover"] > div > p {
    color: var(--soft);
    max-width: 34ch;
    margin-top: 14px;
    font-size: 17px;
}

/* The way in, sized like a door rather than a link in a sentence. */
p[id="lead"] { margin-top: 28px; }

p[id="lead"] a {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
}

p[id="lead"] a:hover { background: var(--accent); }
p[id="lead"] span { font-weight: 400; font-size: 14px; opacity: 0.72; }

/* Three panels, the first twice the height of the two beside it — the shape says which
   one is the picture and which two are company, without a caption to explain it. */
section[id="cover"] figure {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    margin: 0;
    /* Wider than tall, and deliberately not as tall as the photographs would like to be.
       These are portraits, so a box shaped to suit them stands far below the end of the
       text beside it and leaves a column of empty paper under the button — the text is
       four short lines and cannot be stretched to meet it. */
    aspect-ratio: 3 / 2;
}

section[id="cover"] figure a:first-child { grid-row: span 2; }

/* Three is what the filter usually yields, not what it promises: only profiles whose
   photograph carries no other site's mark are eligible, and that set moves as the drip
   publishes. With two the bottom-right cell would stand empty inside the box, with one
   the whole right-hand column would — so the grid drops a column or a row instead of
   holding a gap the shape of a missing photograph. */
section[id="cover"] figure:has(a:nth-child(3)) { grid-template-columns: 3fr 2fr; }

section[id="cover"] figure:not(:has(a:nth-child(3))) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

section[id="cover"] figure:not(:has(a:nth-child(3))) a:first-child { grid-row: auto; }

section[id="cover"] figure:not(:has(a:nth-child(2))) { grid-template-columns: 1fr; }

section[id="cover"] figure a {
    overflow: hidden;
    border-radius: 14px;
    background: var(--tint);
}

section[id="cover"] figure img {
    width: 100%;
    height: 100%;
    /* Cropped from the top rather than the middle. These are portraits taken by their
       subjects, so the face sits in the upper third; a centred crop of a standing figure
       cuts the head off and keeps the floor. */
    object-fit: cover;
    object-position: 50% 22%;
    border-radius: 0;
    margin: 0;
    transition: transform 240ms ease;
}

section[id="cover"] figure a:hover img { transform: scale(1.04); }

/* ---- 6. districts: a line on the cover, an index on their own page ------- */

/* On the cover a district is a way in rather than an entry, so it is one wrapping row of
   names. The full list keeps the bordered index below, which is what a page devoted to
   them should be. */
nav[id="districts"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-block: 18px;
    border-block: 1px solid var(--line);
}

nav[id="districts"] a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
}

nav[id="districts"] a:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

nav[id="districts"] strong { font-weight: 600; font-size: 15px; }

nav[id="districts"] small {
    color: var(--soft);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

ol[id="districts"] {
    list-style: none;
    margin-top: 18px;
    border-top: 1px solid var(--line);
}

ol[id="districts"] li { border-bottom: 1px solid var(--line); }

ol[id="districts"] a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 2px;
}

ol[id="districts"] a:hover strong { color: var(--accent); }
ol[id="districts"] strong { font-weight: 600; }
ol[id="districts"] em { font-style: normal; color: var(--soft); font-size: 14px; }
ol[id="districts"] small { color: var(--soft); font-variant-numeric: tabular-nums; }

/* ---- 7. one profile ----------------------------------------------------- */

figure { margin-top: 22px; }

figure[id="gallery"] a:hover img { transform: scale(1.04); }

/* ---- the viewer -------------------------------------------------------- */

/* A dialog rather than a div: the browser handles the top layer, the focus trap and
   Escape, none of which is worth writing again. */
dialog[id="viewer"] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
    border: 0;
    background: rgba(20, 16, 12, 0.94);
    /* The photograph sits in the middle; the buttons are placed against the edges. */
    display: grid;
    place-items: center;
}

dialog[id="viewer"]:not([open]) { display: none; }
dialog[id="viewer"]::backdrop { background: rgba(20, 16, 12, 0.94); }

/* De speler krijgt dezelfde grenzen als de foto. Zonder die regel staat een rechtop
   gedraaide film hoger dan het scherm en vallen de bedieningsknoppen onder de onderrand
   weg — de bezoeker ziet beeld dat hij niet kan stoppen. */
dialog[id="viewer"] video {
    max-width: 94vw;
    max-height: 88dvh;
    width: auto;
    height: auto;
    border-radius: 14px;
    background: #000;
}

dialog[id="viewer"] img {
    max-width: 94vw;
    /* Room left below for the thumb on a phone, and above for the close button. */
    max-height: 88dvh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
}

dialog[id="viewer"] button {
    position: fixed;
    border: 0;
    background: rgba(251, 247, 240, 0.9);
    color: #241d16;
    font-family: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
}

dialog[id="viewer"] button[value="close"] {
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    font-size: 22px;
}

/* The accent rather than a fuller white: the base is already that same cream at 90%,
   so going to full opacity changed nothing a reader could see. */
dialog[id="viewer"] button:hover { background: var(--accent); color: #fbf7f0; }

/* Op een telefoon houdt de foto wat hoogte in: onderaan begint de duim, en een beeld
   tot aan de rand laat geen plek om het venster te sluiten. */
@media (max-width: 560px) {
    dialog[id="viewer"] img,
    dialog[id="viewer"] video { max-height: 74dvh; }
}

dl {
    margin-top: 14px;
    border-top: 1px solid var(--line);
}

dl > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
}

dt { color: var(--soft); font-size: 14px; }
dd { font-size: 14px; text-align: right; }

/* Services read as a sentence rather than as tags: one line, comma-separated by the
   template, which is markup written for this site alone. */
p[lang] { color: var(--soft); }

/* ---- 7. one profile ----------------------------------------------------- */

figure { margin-top: 22px; }

/* The gallery: a grid of panels rather than a column of full-size photographs.
   Stacked at their natural size, eight photographs made the page some fifteen screens
   long and put the text below them out of reach — and every one of them was shown at a
   size nobody asked for. A panel is a thumbnail; the photograph at full size is one
   click away, which is the moment a visitor chose it.

   Addressed by its id rather than as a bare `figure`: the home page's cover is a figure
   of anchors too, and it composes them into a 3:2 mosaic with cells of deliberately
   unequal size. An unscoped rule here would reach it — later in the file and equally
   specific — and give every cell a 3/4 shape it was never meant to hold. */
/* Eén groot beeld met een strook miniaturen eronder, uit dezelfde lijst. Alleen het
   item met `data-at` staat in beeld; de rest blijft in de opmaak staan zodat een lezer
   zonder JavaScript ze alle onder elkaar krijgt, elk nog een gewone link naar het
   bestand. */
div[id="stage"] {
    position: relative;
    /* Geen vaste verhouding. Die stond hier en gaf elk beeld dezelfde bak: een staande
       foto kreeg lege vlakken ernaast, een liggende foto zweefde in een leeg veld boven
       en onder zich. Het beeld bepaalt nu zelf zijn hoogte, begrensd door het scherm. */
    /* Geen `justify-content: center`. De sceneblok is zo breed als de kolom (1120px), en
       gecentreerd stond de foto midden in die breedte terwijl de strook miniaturen
       eronder gewoon links begon — twee blokken die bij elkaar horen, uitgelijnd op
       verschillende randen. Beide beginnen nu links, zoals de rest van de pagina. */
    display: flex;
    justify-content: flex-start;
    /* Zo breed als de foto zelf, niet als de kolom: anders vangen de lege vlakken naast
       het beeld de klikken op en staan de pijlen tegen de kolomrand in plaats van tegen
       de foto. */
    width: fit-content;
    max-height: 72dvh;
    margin: 0 0 8px;
}

ul[id="frames"] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: inherit;
}

ul[id="frames"] li { display: none; }
ul[id="frames"] li[data-at] { display: block; max-height: inherit; }

ul[id="frames"] a {
    display: block;
    position: relative;
    max-height: inherit;
}

ul[id="frames"] img {
    /* Het beeld draagt zijn eigen maat: zo hoog als het scherm toelaat, zo breed als
       daarbij hoort. Geen bak eromheen, dus ook geen lege vlakken. */
    display: block;
    max-height: 72dvh;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 14px;
}

/* Het vlak zonder stilstaand beeld: dezelfde verhouding als een staande foto, in de
   kleuren van de site — geen leeg kader dat om het teken heen inzakt. Begrensd door
   dezelfde hoogte als de foto's ernaast. */
ul[id="frames"] li[data-film] span[data-blank] {
    display: block;
    width: 480px;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 72dvh;
    background: linear-gradient(135deg, var(--ink), var(--accent));
    border-radius: 14px;
}

/* De knop op een film: een ronde vlek met een driehoek, groot genoeg om als knop te
   lezen. Zonder deze markering is een film een stilstaand beeld tussen stilstaande
   beelden. */
ul[id="frames"] li[data-film] span[data-sign] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

ul[id="frames"] li[data-film] span[data-sign]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

/* De pijlen staan naast het beeld, half doorzichtig tot de muis erop komt. */
div[id="stage"] button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: #241c16;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

button[id="back"] { left: 8px; }
button[id="on"] { right: 8px; }

/* De strook: kleine vierkante miniaturen in één rij. */
figure[id="gallery"] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px;
}

figure[id="gallery"] a {
    display: block;
    position: relative;
    flex: none;
    width: 62px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--tint);
    /* De gekozen miniatuur draagt een rand, anders is er geen teken van waar de bezoeker
       in de reeks staat. */
    outline: 2px solid transparent;
}

figure[id="gallery"] a[aria-current] { outline-color: var(--ink, #241c16); }

figure[id="gallery"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    margin: 0;
    border-radius: 0;
}

/* Zonder stilstaand beeld krijgt de miniatuur dezelfde kleuren als het grote vlak
   hierboven, in plaats van de lichte grondkleur van een lege tegel. */
figure[id="gallery"] a[data-film]:not(:has(img)) {
    background: linear-gradient(135deg, var(--ink), var(--accent));
}

/* Klein teken op de miniatuur van een film — de knop hoort op het grote beeld. */
figure[id="gallery"] a[data-film] span {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

figure[id="gallery"] a[data-film] span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
}


/* ---- 8. buttons --------------------------------------------------------- */

a[data-action] {
    display: inline-block;
    /* Uitgelijnd op het midden van de knop, niet op de basislijn van de tekst: een
       inline-block met verticale padding gaat met zijn ONDERkant op de regel staan, en
       dan hangt "+31 6 …" tegen de onderrand van de knop in plaats van ernaast. */
    vertical-align: middle;
    padding: 11px 20px;
    background: var(--accent);
    color: var(--paper);
    font-size: 15px;
    font-weight: 600;
    border-radius: 2px;
}

a[data-action] { line-height: 1.2; }

/* Het nummerfragment: een regel boven de knop, in de toon van bijschriften. */
p[id="teaser"] {
    color: var(--soft);
    margin-bottom: 8px;
}

/* De knoppen naast elkaar, met een afbreekpunt. Onder elkaar lieten ze op een breed
   scherm een kolom lege ruimte ernaast staan; `wrap` zet ze op een telefoon alsnog
   onder elkaar, zonder tweede regel in de opmaak. */
p[id="acts"] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

a[data-action="quiet"] {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

/* ---- 9. footer ---------------------------------------------------------- */

footer {
    border-top: 1px solid var(--line);
    background: var(--tint);
    margin-top: 50px;
    padding-block: 22px 34px;
    font-size: 14px;
    color: var(--soft);
}

footer > div { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; }
footer a:hover { color: var(--ink); }

/* ---- 10. small screens -------------------------------------------------- */

/* The cover folds before the listing does: two columns of text and photographs need more
   room than two columns of cards, and at 900px the sentence is already down to a few
   words per line. */
@media (max-width: 900px) {
    section[id="cover"] { grid-template-columns: 1fr; gap: 22px; }
    section[id="cover"] h1 { font-size: 32px; }
    section[id="cover"] > div > p { max-width: 60ch; }
    section[id="cover"] figure { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
    section[id="listing"] { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    h1 { font-size: 25px; }
    section[id="cover"] h1 { font-size: 26px; }
    /* Taller than wide, because a phone has height to spare and the photographs are
       portraits: at 16/9 each panel became a letterbox slice of one. */
    section[id="cover"] figure { aspect-ratio: 4 / 3; }
    nav[id="districts"] { margin-top: 20px; padding-block: 14px; }
    header > div { padding-block: 14px; }
}

/* De foto terwijl de volgende onderweg is — via PHP uit de opslag, ruim een seconde
   bij een koud bestand. De oude blijft al die tijd in beeld, dus zonder dit lijkt er
   niets te gebeuren. */
#viewer img[aria-busy] { opacity: 0.44; transition: opacity 0.1s ease; }

/* Takes the slack, so the footer below reaches the bottom of a short page. */
main { flex: 1 0 auto; }

/* Een video is in de strook een miniatuur als elke andere, met een teken erop. */
figure[id="gallery"] a[data-film] {
    position: relative;
}