/* Operette in Nederland — "programmaboekje": the site as a typeset theatre
   programme. Warm paper, warm ink, stage-curtain bordeaux as the only accent,
   brass hairlines. Fraunces (display) + Newsreader (text), serif fallbacks. */

/* Fonts: SELF-HOSTED since 2026-08-15 (was Google Fonts). One fewer
   third party, no visitor-IP leak to Google (the GDPR ruling on Fonts
   embeds), faster first paint. Variable WOFF2s in static/, subset
   latin + latin-ext; URLs are style.css-relative, and both land in
   the site root. Refresh recipe: scratchpad selfhost_fonts.py flow --
   fetch css2 with a modern UA, keep latin/latin-ext, mirror files. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fraunces-italic-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fraunces-normal-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('newsreader-italic-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('newsreader-normal-latin.woff2') format('woff2');
  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;
}

:root {
  --paper: #f8f2e4;
  --paper-deep: #efe6d1;
  --ink: #251c12;
  --muted: #78684f;
  --accent: #8e2030;      /* stage-curtain bordeaux */
  --brass: #a9894a;
  --hairline: #cbb896;
  --display: "Fraunces", "Georgia", serif;
  --text: "Newsreader", "Georgia", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  /* Paper depth: a faint warm vignette, no images. */
  background-image:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(255, 252, 240, 0.9), transparent 60%),
    radial-gradient(ellipse 140% 100% at 50% 110%, rgba(160, 120, 60, 0.10), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.075rem;
  line-height: 1.55;
  padding: 0 1.25rem;
}

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); text-decoration-color: var(--brass); }

/* ---------- masthead: the playbill cover ---------- */
.masthead {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.75rem 0 1.4rem;
  text-align: center;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.masthead::after {           /* double rule, programme style */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  border-bottom: 3px solid var(--ink);
}
.overline {
  font-family: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
/* de masthead-overline is sinds de mobiel-pas (2026-08-15) drie spans met
   punt-spans ertussen; de marges vervangen de oude spaties in de tekst */
.masthead .overline .sep { color: var(--brass); margin: 0 0.45rem; }
.site-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-variation-settings: "opsz" 100;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
  line-height: 1.05;
}
.site-title a { color: var(--ink); text-decoration: none; }
.site-title a:hover { color: var(--accent); }
.site-nav {
  /* 1rem sinds 2026-08-16 (was 0.92): een tikje groter leest ruimer,
     zeker voor het oudere publiek van de site. */
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 1.1rem;
}
/* three fixed rows; a long row may still wrap on a narrow phone, but the
   grouping never reshuffles */
.site-nav .nav-rij { margin: 0 0 0.3rem; }
.site-nav .nav-rij:last-child { margin-bottom: 0; }
/* inline-block met verticale padding: het tikdoel groeit zonder dat de
   tekst breder wordt -- oudere duimen (curator 2026-08-16) */
.site-nav a { color: var(--ink); text-decoration: none; display: inline-block; padding: 0.2rem 0.1rem; }
/* Het smal-exemplaar van Componisten (zie base.html) bestaat op breed
   scherm niet: zonder deze regel stond hij er dubbel (2026-08-16). */
.site-nav .alleen-smal { display: none; }
.site-nav a:hover { color: var(--accent); }
.site-nav .sep { color: var(--brass); margin: 0 0.65rem; }

main { max-width: 46rem; margin: 0 auto; padding: 2rem 0 3rem; }

/* ---------- section furniture ---------- */
/* Kopje links, al het andere als groep rechts (curator 2026-08-16):
   space-between parkeerde met drie kinderen de middelste chip in het
   midden; de auto-marge op het kopje houdt de twee chips bijeen. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.section-head h2 { margin-right: auto; }
h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2rem;
  margin: 0 0 0.5rem;
}
.month {
  font-family: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.2rem 0 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hairline);
}
/* Inklapbare langstaart-secties op de gezelschappenpagina (curator
   2026-08-09): dicht bij binnenkomst zodat alle kopjes zonder scrollen
   te zien zijn; het driehoekje en de telling in het kopje dragen de
   uitnodiging. De summary neemt de .month-opmaak over en de h3 erin
   wordt inline, zodat het kopje naast het driehoekje op één regel
   staat en de onderstreping de hele regel houdt. */
details.inklap > summary {
  cursor: pointer;
  margin: 2.2rem 0 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hairline);
}
details.inklap > summary > .month {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
}
details.inklap > summary::marker { color: var(--accent); }

/* ---------- agenda: seizoensstrook (maandstrip) ---------- */
/* Eén kolom per maand, één stip per productie: het seizoen in één blik,
   klikken springt naar het maandkopje. Zelfde stip-vocabulaire als de
   werk-tijdlijn: gevuld messing = kern, hol = randprogramma. */
.maandstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.3rem 1.15rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.2rem 0.6rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.strip-maand {
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
}
.strip-label {
  font-family: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.strip-maand:hover .strip-label { color: var(--accent); }
.strip-stippen { display: flex; gap: 0.2rem; min-height: 0.42rem; }
.strip-stippen i {
  width: 0.42rem; height: 0.42rem;
  border-radius: 50%;
  background: var(--brass);
}
.strip-stippen i.stip-rand { background: var(--paper); border: 1.5px solid var(--brass); }
body.hide-adjacent .strip-stippen i.stip-rand { display: none; }
body.hide-beroeps .strip-stippen i.stip-beroeps { display: none; }
/* maanden achter de vouw ("Kijk verder vooruit") tonen gedempt */
.strip-maand.strip-ver { opacity: 0.55; }
.strip-maand.strip-ver:hover { opacity: 1; }

/* ---------- archief: jaarbalk (histogram) + jaartellingen ---------- */
/* Eén staafje per kalenderjaar, gaten blijven open sleuven. Messing = kern,
   leigrijs = randprogramma (dezelfde kleur als de badge); het leigrijze deel
   verdwijnt met de laan-schakelaar. De schaal (drukste jaar = 100%) is op
   kern+rand samen berekend en verspringt dus niet bij het omschakelen. */
/* Geen schuifbakje: de balk krimpt altijd mee met de kolom. Op smalle
   schermen sluiten de staafjes aaneen (gap 0) tot één silhouet — daar is
   het een plaatje, geen aanwijsinstrument. */
.jaarbalk-wrap { margin: 1.2rem 0 1.6rem; }
.jaarbalk {
  display: flex;
  align-items: flex-end;
  /* Geen voegen, op geen enkele breedte (curator 2026-08-18): bij ~160
     staafjes is elke staaf maar een paar pixels breed, en onder
     Windows-schermschaling (125/150%) rondt de browser elke rand op
     APPARAATpixels af -- buren worden dan onvermijdelijk 4 naast 5
     apparaatpixels breed, wat CSS niet kan repareren (een eerdere
     round()-poging maakte alleen de CSS-pixels gelijk). Aaneengesloten
     staafjes hebben geen zichtbare grens, dus ook geen zichtbaar
     verschil; hover kleurt het jaar onder de muis en toont de grens
     precies wanneer die ertoe doet. */
  gap: 0;
  height: 5.5rem;
  border-bottom: 1px solid var(--hairline);
}
.jb-jaar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Geen voeg tussen de segmenten (curator 2026-08-18): sinds het
     aaneengesloten silhouet strooiden de interne papiervoegen witte
     spikkels op wisselende hoogtes door de balk. De kleurgrens zelf is
     de scheiding. */
  gap: 0;
  position: relative;
}
.jb-kern, .jb-kern-ber, .jb-rand { display: block; min-height: 2px; }
/* Verzacht naar het papier toe (curator 2026-08-18: het aaneengesloten
   silhouet werd te zwaar op vol pigment); hover zet het jaar onder de
   muis weer op volle sterkte. De kale kleur ervoor is de terugval voor
   browsers zonder color-mix. Stempels en badges houden hun eigen,
   onverzachte kleuren. */
.jb-kern { background: var(--brass);
           background: color-mix(in srgb, var(--brass) 72%, var(--paper)); }
/* beroepskern: de tekstkleur van de badge-org-stempel (--muted), zodat
   balk en stempel hetzelfde vocabulaire spreken -- warm bruingrijs,
   duidelijk geen messing en geen leigrijs. */
.jb-kern-ber { background: var(--muted);
               background: color-mix(in srgb, var(--muted) 68%, var(--paper)); }
.jb-rand { background: #33566b;
           background: color-mix(in srgb, #33566b 72%, var(--paper)); }
/* Eén hoverkleur voor de hele jaarstaaf (curator 2026-08-18: accent
   naast inkt in één hover las als drie klassen extra): de kolom licht
   als geheel op, de tooltip draagt de aantallen per klasse. */
a.jb-jaar:hover .jb-kern, a.jb-jaar:focus-visible .jb-kern,
a.jb-jaar:hover .jb-kern-ber, a.jb-jaar:focus-visible .jb-kern-ber,
a.jb-jaar:hover .jb-rand, a.jb-jaar:focus-visible .jb-rand { background: var(--accent); }
body.hide-adjacent .jb-rand { display: none; }
body.hide-beroeps .jb-ber { display: none; }
/* line-height 1: het label (0.78rem) moet binnen de asregel passen, anders
   steekt er 2px onder de wrap uit -- op Windows werd dat een schuifbalkje */
.jaarbalk-as { position: relative; height: 1rem; margin-top: 0.2rem; }
.jaarbalk-as .tl-jaar { line-height: 1; }
/* tooltipwissel: de schakelaars laten het getal meebewegen met de lijst --
   vier standen voor twee knoppen */
body.hide-adjacent:not(.hide-beroeps) .jb-jaar::after { content: attr(data-kern); }
body.hide-beroeps:not(.hide-adjacent) .jb-jaar::after { content: attr(data-zb); }
body.hide-adjacent.hide-beroeps .jb-jaar::after { content: attr(data-kzb); }
/* Verborgen tooltips mogen geen overloop maken: een visibility:hidden-doos
   telt mee in de schuifbreedte van de pagina en toverde op middelbrede
   schermen een schuifbalk tevoorschijn. Dus echt weg (display) tot de
   muisaanwijzer erop staat; op aanraakschermen (smal) blijft hij weg —
   daar navigeert de tik. */
/* Sinds 2026-08-15 geldt de regel voor alle drie tooltipdragers: ook de
   werk-tijdlijnstippen en kaartstippen maakten met hun onzichtbare
   (visibility:hidden) nowrap-tooltips schuifbreedte op werk- en
   gezelschappenpagina's — "je kunt naar rechts scrollen maar er is daar
   niets" (curator, mobiel-pas ronde drie). */
.wtl-dot[data-label]::after, .kaart-stip[data-label]::after,
a.jb-jaar::after { display: none; }
@media (min-width: 34rem) {
  .wtl-dot[data-label]:hover::after, .wtl-dot[data-label]:focus-visible::after,
  .kaart-stip[data-label]:hover::after, .kaart-stip[data-label]:focus-visible::after,
  a.jb-jaar:hover::after, a.jb-jaar:focus-visible::after { display: block; }
}
/* staven bij de uiteinden: tooltip aan de balkkant uitlijnen, niet centreren,
   anders steekt hij alsnog buiten de pagina */
.jb-jaar:nth-child(-n+20)::after { left: 0; transform: none; }
.jb-jaar:nth-last-child(-n+20)::after { left: auto; right: 0; transform: none; }

/* telling naast het jaarkopje; de vier varianten wisselen met de twee
   schakelaars, zelfde vier standen als de jaarbalk-tooltip */
.jaar-n { color: var(--muted); font-weight: 400; letter-spacing: 0.08em; text-transform: none; }
.jaar-n .n-kern, .jaar-n .n-zb, .jaar-n .n-kzb { display: none; }
body.hide-adjacent .jaar-n .n-alles,
body.hide-beroeps .jaar-n .n-alles { display: none; }
body.hide-adjacent:not(.hide-beroeps) .jaar-n .n-kern { display: inline; }
body.hide-beroeps:not(.hide-adjacent) .jaar-n .n-zb { display: inline; }
body.hide-adjacent.hide-beroeps .jaar-n .n-kzb { display: inline; }

/* ---------- agenda entries ---------- */
.entries { list-style: none; margin: 0; padding: 0; }
.entry {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px dotted var(--hairline);
  animation: rise 0.5s ease-out both;
}
.entry:nth-child(1) { animation-delay: 0.03s; }
.entry:nth-child(2) { animation-delay: 0.08s; }
.entry:nth-child(3) { animation-delay: 0.13s; }
.entry:nth-child(4) { animation-delay: 0.18s; }
.entry:nth-child(5) { animation-delay: 0.23s; }
.entry:nth-child(n+6) { animation-delay: 0.28s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(0.4rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entry { animation: none; }
}
.days {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  text-align: right;
  padding-top: 0.15rem;
  font-variant-numeric: oldstyle-nums;
}
/* Scheurkalenderblokje op de agenda (archief houdt de kale .days): maand
   als bandje boven, dagen eronder — leest meteen als kalender, zonder de
   ingetogen programma-opmaak te overstemmen. */
.days.datumblok {
  align-self: start;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 252, 240, 0.55);
}
.datum-maand {
  font-family: var(--text);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--hairline);
  padding: 0.14rem 0.3rem 0.1rem;
}
.datum-dagen {
  font-size: 1.05rem;
  line-height: 1.3;
  padding: 0.22rem 0.4rem 0.3rem;
}
.what .work {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
}
.what .work:hover { color: var(--accent); }
.who { color: var(--muted); font-size: 0.95rem; margin-top: 0.1rem; }
.who a { color: var(--muted); }
.who a:hover { color: var(--accent); }

/* lane toggle + badges. The toggle is a gez-chip since 2026-08-17
   (same pill as the gezelschappen filters, the badge as label word);
   only the non-chip extras live here. Roomier padding than the plain
   chips: a badge inside a pill needs air around it (curator). */
.lane-toggle { user-select: none; }
.gez-chip.lane-toggle { padding: 0.42rem 1rem; }
/* the badge's global vertical-align (0.25em, tuned for the big italic
   titles) rides high inside the chip's small text and makes the gap
   below look bigger than above -- re-seat it on the baseline here */
.gez-chip.lane-toggle .badge { margin-left: 0.15rem; vertical-align: baseline; }
body.hide-adjacent .entry.adjacent { display: none; }
body.hide-beroeps .entry.beroeps { display: none; }
/* een maand die alleen randprogramma bevat verdwijnt mee met haar rijen:
   kopje, (lege) lijst en maandstrip-link tegelijk */
body.hide-adjacent .maand-rand { display: none; }
/* Dezelfde lege-kopje-wacht voor de beroepsknop, plus de gecombineerde
   stand: een maand/jaar waarvan elke rij rand OF beroeps is, leegt pas
   wanneer BEIDE filters verbergen. */
body.hide-beroeps .maand-beroeps { display: none; }
body.hide-adjacent.hide-beroeps .maand-rand-of-beroeps { display: none; }
.badge {
  display: inline-block;
  font-family: var(--text);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem 0.14rem;
  margin-left: 0.45rem;
  vertical-align: 0.25em;
  border-radius: 2px;
}
.badge-adjacent { color: #33566b; border: 1px solid #33566b55; }
.badge-rumour { color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); font-style: italic; }
.badge-cancelled { color: #8a3d33; border: 1px solid #8a3d3355; }
/* org-class stamp on agenda rows: neutral, quieter than the lane badges.
   A FLOAT inside .what, not an absolute corner (curator screenshots
   2026-08-15): it sits level with the title's first line whatever the
   date card's height, and the title flows to its natural width -- the
   line breaks only on real collision, never for a reserved gutter, so
   equal rows get equal shapes. Works at any viewport, no media query. */
.badge-org { color: var(--muted); border: 1px solid var(--hairline); }
.entry-stempels { float: right; margin: 0.2rem 0 0.25rem 0.7rem; }
.entry-stempels .badge { margin-left: 0.3rem; }
/* de vorm naast het rand-stempel: specificatie, geen tweede stempel */

.empty, .aside { color: var(--muted); }
.aside { margin-top: 2.25rem; font-size: 0.95rem; }
/* Direct onder een paginakop hoeft de intro geen 2.25rem lucht: die
   maat stamt uit de tijd dat de sorteerknoppen naast de kop stonden
   (curator 2026-08-18, knoppen verhuisden naar boven de lijst). */
.section-head + .aside { margin-top: 0.6rem; }

/* ---------- playbill (detail pages) ---------- */
.playbill-head {
  text-align: center;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.5rem;
}
.work-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 0.3rem 0 0.2rem;
  line-height: 1.1;
  /* Laatste redmiddel tegen zijwaarts scrollen: grijpt alleen in
     wanneer een woord letterlijk niet op zijn regel past. De
     woordenboek-afbreking (hyphens) staat ALLEEN in het mobiele blok:
     op breed scherm maakt de kaart-reservering de titelkolom smaller
     en brak de browser 'Muziektheatervereniging' onnodig af, terwijl
     gewoon omslaan naar de tweede regel daar ruimte genoeg heeft
     (curator 2026-08-16). */
  overflow-wrap: break-word;
}
.composer {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.composer::before, .composer::after { content: " — "; color: var(--brass); }
.by { margin: 0.15rem 0; }
.by-onbekend { color: var(--muted); }
/* why-rand line under the production page's stamp */
.rand-reden {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.playbill h3 {
  font-family: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2rem 0 0.6rem;
}

.speellijst { width: 100%; border-collapse: collapse; }
.speellijst td { padding: 0.4rem 0.6rem 0.4rem 0; vertical-align: baseline; }
.speellijst tr { border-bottom: 1px dotted var(--hairline); }
.speellijst .d { white-space: nowrap; font-variant-numeric: oldstyle-nums; }
.speellijst .t { color: var(--muted); white-space: nowrap; }
.speellijst .p { color: var(--muted); }
.speellijst .voorbij { opacity: 0.55; }
.speellijst .voorbij .d { text-decoration: line-through; text-decoration-color: var(--hairline); }

.sources ul, .proflist { list-style: none; padding: 0; margin: 0; }
.sources li, .proflist li { padding: 0.25rem 0; border-bottom: 1px dotted var(--paper-deep); }
/* Registerlijsten (werkpagina): elke regel is louter link, en doorlopend
   onderstreept werd dat één rode muur (curator ontwerppas 2026-08-16).
   De linkkleur blijft; de streep komt bij aanwijzen of toetsfocus terug.
   De hangende inspringing houdt een omgeslagen regel bij zijn jaartal
   vandaan, zodat elke uitvoering één blokje blijft. */
.proflist a { text-decoration: none; }
.proflist a:hover, .proflist a:focus-visible { text-decoration: underline; }
.proflist li { padding-left: 1.4rem; text-indent: -1.4rem; }
/* text-indent ERFT: in een badge (inline-block, eigen blokdoos) schoof
   de geërfde -1.4rem de stempeltekst uit zijn kader, over de regel
   ervoor heen (curator screenshot 2026-08-16, Czaar Peter-pagina). */
.proflist .badge { text-indent: 0; }
.checked { color: var(--muted); font-size: 0.9rem; }

.orglist { list-style: none; padding: 0; margin: 0; }
/* Jaren actief naast de naam (curator 2026-08-17): zelfde stem als de
   tl-jaren op de tijdlijn -- gedempt, klein, geen link. */
.orglist .org-jaren { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.orglist li { padding: 0.55rem 0; border-bottom: 1px dotted var(--hairline); }
.orglist .work {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--ink);
}
.orglist .work:hover { color: var(--accent); }
.orglist .who { display: block; }
/* Componistenkopjes in de lijstletter van .orglist .work, niet in
   .month-kapitalen: dertig rode kapitaalregels onder elkaar schreeuwden
   (curator ontwerppas 2026-08-16). Inline, zodat het kopje naast het
   inklap-driehoekje op één regel blijft. */
.comp-naam {
  display: inline;
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.15rem;
}
/* Componistenkopjes wijken af van de inklap-basis (curator 2026-08-18):
   dertig dichte tabs onder elkaar zijn een lijst, geen sectiekoppen --
   de haarlijn onder elk kopje en de 2.2rem lucht erboven lazen als
   dertig losse strepen. Dichtgeklapt: geen streep, bescheiden afstand.
   De streep verschijnt pas als de tab opengaat en zijn werkenlijst een
   scheiding van het kopje verdient. */
details.componist > summary { margin: 0.7rem 0 0.2rem; border-bottom: none; }
details.componist[open] > summary { border-bottom: 1px solid var(--hairline); }

.prose p { margin: 0.9rem 0; }
.techniek { font-size: 0.92rem; color: var(--muted); }

.correction {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ---------- colofon ---------- */
.colofon {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}
.fleuron { color: var(--brass); font-size: 1.3rem; margin-bottom: 0.4rem; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--accent); }

@media (max-width: 34rem) {
  /* Mobiel-pas (curator 2026-08-15, van echte telefoonschermen af): */
  /* 0. Sorteer-/weergaveknoppen op mobiel: rij vullen (flex). LET OP:
     dit blok staat VÓÓR de pil-basisregels in dit bestand, dus een
     gedeelde eigenschap verliest hier op bronvolgorde -- er stond tot
     2026-08-18 dode telefoonmaat (font-size, min-height) die nooit
     rendert. Wat mobiel moet afwijken staat in het pillenblok NA de
     basisregels (zoek 'Mobiele pilmaten'); hier alleen wat de basis
     niet zet. */
  .sort-toggle { flex: 1 1 100%; }
  .sort-toggle button { flex: 1 1 0; }
  /* Vier knoppen onder de gezelschappen-lijstkop: als 2×2-blok, elke
     knop een halve rij -- drie-plus-één oogde gehavend. */
  .gez-lijstkop .sort-toggle button { flex-basis: 40%; }
  /* Panorama eerst het beeld (curator 2026-08-18, van telefoon):
     kaart of tijdlijn bovenaan, de legenda ('Elke stip...') en het
     filterblok ('Standaard tonen we...' + chips) erónder -- boven de
     kaart duwden ze het beeld onder de vouw. Alleen volgorde, geen
     andere opmaak: flex-column met order. */
  #gez-panorama { display: flex; flex-direction: column; }
  #gez-panorama .gez-filters { order: 2; }
  .gez-paneel { display: flex; flex-direction: column; }
  .gez-paneel .aside { order: 2; }
  /* 1. Masthead-overline: één kleine regel (curator 2026-08-16; het
     stapelen van de eerste mobiel-pas vrat drie regels hoogte en las
     als klikbare knoppen). Kleiner en strakker gespatieerd zodat de
     drie termen samen op 360px passen. */
  .masthead .overline { font-size: 0.58rem; letter-spacing: 0.14em; }
  .masthead .overline .sep { margin: 0 0.3rem; }
  /* 2. Nav: klein genoeg dat de langste rij (Gezelschappen · Operettes ·
     Componisten) op ÉÉN regel past, ook op 360px-telefoons — elke
     afbreking strandt een punt aan een regeleinde en oogt scheef
     (curator 2026-08-15, tweede ronde). De <wbr>'s in de template
     blijven als vangnet voor extreem smalle schermen. */
  /* 0.8rem sinds 2026-08-16 (was 0.72): 0.72 was voor oudere ogen te
     klein. De rij van drie paste daarop tóch niet: Componisten verhuist
     op smal scherm naar de leesrij (2/2/3) via het dubbele exemplaar in
     de template -- geen scheve afbrekingen meer. */
  .site-nav { font-size: 0.8rem; letter-spacing: 0.02em; }
  .site-nav .sep { margin: 0 0.3rem; }
  .site-nav .nav-rij { margin-bottom: 0.15rem; }
  .site-nav .alleen-breed { display: none; }
  .site-nav a.alleen-smal { display: inline-block; }
  .site-nav span.alleen-smal { display: inline; }
  /* 3. Knoppenrijen dicht opeen (0.5rem); de maandstrip eronder krijgt
     juist ruimte (1rem, curator tweede ronde): de knoppen horen bij het
     kopje, de strip begint het eigenlijke overzicht. Links uitgelijnd
     (curator ronde vier probeerde rechts en kwam erop terug): flex-start
     in plaats van het geërfde space-between, dat twee chips op één regel
     uit elkaar trok. */
  .section-head { gap: 0.5rem 1rem; justify-content: flex-start; }
  /* zonder de auto-marge: deelt een chip de kopregel, dan hoort hij
     hier links naast het kopje, niet tegen de rechterrand */
  .section-head h2 { margin-right: 0; }
  .maandstrip { margin-top: 1rem; }
  .entry { grid-template-columns: 1fr; gap: 0; }
  .days { text-align: left; font-size: 0.95rem; color: var(--accent); }
  /* het blokje wordt één regel: [sep | 5 t/m 8], smal en boven de titel.
     max-width breekt de grid-cyclus: zonder rem duwt een lange dagenreeks
     ("2 t/m 6, 10 t/m 13, ...") de hele pagina breder dan het scherm.
     stretch in plaats van baseline: het maandbandje moet de volle hoogte
     van het kaartje kleuren, ook wanneer de dagenreeks over twee regels
     wikkelt (curator 2026-08-15, agenda én archief). */
  .days.datumblok {
    flex-direction: row;
    align-items: stretch;
    align-self: start;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.3rem;
    color: var(--ink);
  }
  .datum-maand { display: flex; align-items: center; border-bottom: none; border-right: 1px solid var(--hairline); padding: 0.1rem 0.4rem; }
  .datum-dagen { font-size: 0.95rem; padding: 0.1rem 0.45rem; min-width: 0; }
  /* 5. Componistenkopjes: naam, operettetelling en uitvoeringentelling
     elk op hun eigen regel in plaats van rare afbrekingen. */
  .componist .checked .comp-tel { display: block; }
  /* 6. Speellijst (ronde drie): een tabel krimpt niet onder haar
     inhoudsbreedte, dus drie nowrap-kolommen duwden de pagina breed
     (TulipTown, Zarewitsch). Elke voorstelling wordt twee regels:
     datum + tijd, zaal eronder. */
  .speellijst tr { display: block; padding: 0.35rem 0; }
  .speellijst td { display: inline; padding: 0; }
  .speellijst .t { margin-left: 0.4rem; }
  .speellijst .p { display: block; }
  /* 8. 'Muziektheatervereniging' op 2rem is breder dan een
     telefoonscherm: woordenboek-afbreking (html lang=nl), alleen hier
     -- op breed scherm slaat de titel gewoon om. */
  .work-title { hyphens: auto; }
  /* 7. Stempels (ronde vier): op smal scherm niet meer als float in de
     tekstkolom -- daar kreeg elke rij een eigen vorm doordat de titel
     eromheen wikkelde. Het stempel verhuist naar de dode ruimte rechts
     naast het datumblokje; zo heeft elke rij dezelfde drie regels
     (datum+stempel / titel / wie-waar), met of zonder stempel. De
     max-width houdt een lange dagenreeks uit de stempelzone; 6rem is
     genoeg sinds het stempel "beroeps" zegt in plaats van
     "beroepsgezelschap" (dat lange woord viel over het datumblokje). */
  .entry { position: relative; }
  .entry-stempels { float: none; position: absolute; top: 1.05rem; right: 0; margin: 0; }
  .entry:has(.entry-stempels) .days.datumblok { max-width: calc(100% - 6rem); }
}

/* ---------- agenda: the far tail folds behind a click ---------- */
details.agenda-more { position: relative; }
details.agenda-more:not([open])::before {
  /* fade the last visible month into the paper */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -3.5rem; height: 3.5rem;
  background: linear-gradient(to bottom, rgba(248, 242, 228, 0), var(--paper));
  pointer-events: none;
}
details.agenda-more > summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  color: var(--accent);
  padding: 0.55rem 0 0.75rem;
  border-top: 1px solid var(--hairline);
}
details.agenda-more > summary::-webkit-details-marker { display: none; }
details.agenda-more > summary::after { content: " ▾"; color: var(--brass); }
details.agenda-more[open] > summary { color: var(--muted); }
details.agenda-more[open] > summary::after { content: " ▴"; }

/* ---------- werken: sort toggle (JS reveals it) ---------- */
.sort-toggle { display: flex; gap: 0.4rem; }
/* Rij voor een losse sorteerknoppengroep onder de intro, vlak boven de
   lijst (curator 2026-08-18): rechts uitgelijnd zoals de knoppen in de
   gezelschappen-lijstkop. Zonder JS blijft de toggle hidden en mag de
   lege rij geen ruimte innemen. */
.sorteer-rij {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.8rem;
  /* Haarlijn tussen de knoppen en de lijst die ze sorteren (curator
     2026-08-18): zonder streep zweefden knoppen en eerste lijstregel
     in dezelfde witruimte. */
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--hairline);
}
.sorteer-rij:has(.sort-toggle[hidden]) { display: none; }
/* De lijstkop scheidt de gezelschappenlijst van het panorama
   (2026-08-17); de vier sorteerknoppen staan rechts en mogen op smalle
   schermen doorschuiven. */
.gez-lijstkop { margin-top: 1.8rem; }
.gez-lijstkop .sort-toggle { flex-wrap: wrap; }
.sort-toggle button {
  font-family: var(--text);
  /* Eén maat voor ALLE pillen op breed scherm (curator 2026-08-18,
     tweede ronde): 0.95rem -- gelijk aan de aside-tekst, net onder de
     lopende tekst; 1rem duwde de gezelschappen-chips van hun regel.
     Twee tekstregels hoog (min-height) met iets bredere voering, maar
     elke knoppengroep blijft op één regel. */
  font-size: 0.95rem;
  line-height: 1.2;
  /* Twee maten site-breed (curator 2026-08-18, slotronde, beide
     schermbreedtes gelijk): operettes/componisten-pillen ~1.7 regel
     (2.45em); alles op de gezelschappenpagina -- toggle, sortering,
     chips (ook de agenda/archief-lanetoggles, zelfde chipklasse) --
     ~1.5 regel (2.25em). */
  min-height: 2.45em;
  /* Alleen déze knoppen buiten de font-boost van mobiele browsers
     houden (curator 2026-08-18): de heuristiek vergrootte dezelfde
     knoppenklasse op werken/componisten wél en op gezelschappen niet,
     drie maten uit één regel CSS. De rest van de pagina houdt zijn
     boost (leesbaarheid); de knoppenmaat op telefoons staat expliciet
     in het 34rem-blok. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  padding: 0.12rem 0.8rem;
  cursor: pointer;
}
.sort-toggle button:hover { color: var(--ink); border-color: var(--brass); }
.sort-toggle button.active { color: var(--accent); border-color: var(--accent); }
/* Alle tien gezelschappen-knoppen (kaart/tijdlijn, vier chips, vier
   sorteerknoppen) op de laagste maat: ~1.5 regel. */
#gez-view button, .gez-lijstkop .sort-toggle button { min-height: 2.25em; }

/* ---------- gezelschappen: tijdlijn ---------- */
.tijdlijn { margin: 0.8rem 0 1.5rem; }
.tl-as {
  position: relative;
  height: 1.2rem;
  margin-left: 11rem;
  margin-right: 4rem;
}
.tl-jaar {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: var(--muted);
}
.tl-rij {
  display: grid;
  grid-template-columns: 11rem 1fr 4rem;
  align-items: center;
  gap: 0;
  padding: 0.18rem 0;
}
.tl-naam {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.6rem;
  text-align: right;
}
.tl-spoor {
  position: relative;
  height: 0.7rem;
}
.tl-lijn {
  position: absolute;
  top: -0.2rem; bottom: -0.2rem;
  width: 1px;
  background: var(--hairline);
}
.tl-balk {
  position: absolute;
  top: 0.05rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--brass);
  min-width: 4px;
}
.tl-balk.tl-loopt { background: var(--accent); }
.tl-balk.tl-vaag {
  /* end year unknown: the bar trails off instead of stopping */
  background: linear-gradient(to right, var(--brass) 40%, rgba(0, 0, 0, 0));
  border-radius: 999px 0 0 999px;
}
.tl-balk.tl-vaag-start {
  /* founding year unknown: the bar starts at the first documented year
     and fades into the past */
  background: linear-gradient(to left, var(--brass) 40%, rgba(0, 0, 0, 0));
  border-radius: 0 999px 999px 0;
}
.tl-balk.tl-loopt.tl-vaag-start {
  background: linear-gradient(to left, var(--accent) 40%, rgba(0, 0, 0, 0));
}
.tl-balk.tl-vaag.tl-vaag-start {
  /* open at both ends: only the documented middle stretch is solid */
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0), var(--brass) 35% 65%, rgba(0, 0, 0, 0));
  border-radius: 0;
}
.tl-balk.tl-kern.tl-vaag-start { border-radius: 0; }
.tl-jaren {
  font-size: 0.78rem;
  color: var(--muted);
  padding-left: 0.5rem;
  white-space: nowrap;
}

@media (max-width: 34rem) {
  /* 4. (mobiel-pas 2026-08-15) De jaarlabels ("1948–nu") houden hun eigen
     kolom rechts naast de balk -- HERZIEN (curator 2026-08-18, van
     telefoon): elke org is nu een strak tweeregelig blok, naam links
     en jaartallen rechts op regel één, de balk op volle breedte
     eronder. De decennium-streepjes per rij gaan uit: door de
     tussenliggende naamregels vormden ze nooit doorlopende lijnen,
     alleen onrustige streepjes-hagel (de as bovenaan en het
     jaartal per rij dragen de datering al). Geldt ook voor de
     solo-tijdlijn op de organisatiepagina. */
  /* As en sporen krijgen DEZELFDE inzet van 0.8rem (een halve
     jaartalbreedte) aan beide kanten: alle jaartallen blijven
     gecentreerd op hun streep (gelijke tussenruimte), het eerste en
     laatste vallen binnen de kantlijn, en de balken verschuiven mee
     omdat hun percentages op de spoorbreedte staan. Eerdere pas
     (alleen 1880/2020 verschuiven) maakte de spatiering ongelijk. */
  .tl-as { margin-left: 0.8rem; margin-right: 0.8rem; }
  .tl-lijn { display: none; }
  .tl-rij { grid-template-columns: 1fr auto; padding: 0.35rem 0 0.15rem; }
  .tl-naam { grid-column: 1; grid-row: 1; text-align: left; padding-right: 0.6rem; }
  .tl-rij .tl-jaren { grid-column: 2; grid-row: 1; }
  .tl-rij .tl-spoor { grid-column: 1 / -1; grid-row: 2; margin: 0 0.8rem; }
}

/* open state swaps the summary label: invitation vs "fold back up" */
details.agenda-more > summary .more-open { display: none; }
details.agenda-more[open] > summary .more-dicht { display: none; }
details.agenda-more[open] > summary .more-open { display: inline; }

/* ---------- werkpagina: een stip per uitvoering ---------- */
.werk-tl { margin: 0.4rem 0 0.8rem; }
.werk-tl .tl-as { margin: 0 0 0.2rem; }
.wtl-spoor {
  position: relative;
  height: 2.3rem;
  border-bottom: 1px solid var(--hairline);
}
.wtl-dot {
  position: absolute;
  bottom: 0.35rem;
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: var(--brass);
  transform: translateX(-50%);
}
.wtl-dot:hover { background: var(--accent); }
.wtl-dot.wtl-rand { background: var(--paper); border: 2px solid var(--brass); }
.wtl-dot.wtl-rand:hover { border-color: var(--accent); }

/* leeft nog, maar zingt musical: gearceerde staart op hetzelfde spoor */
.tl-balk.tl-kern { border-radius: 999px 0 0 999px; }
.tl-balk.tl-musical {
  background: repeating-linear-gradient(-55deg,
    var(--brass) 0 1.5px, transparent 1.5px 5px);
  border-radius: 0 999px 999px 0;
  opacity: 0.9;
}
/* pivot met onbekend overstapjaar: kern vloeit over in arcering --
   solid brass covers the hatch on the left and fades off it rightward,
   so the boundary is deliberately nowhere */
.tl-balk.tl-overgang {
  background:
    linear-gradient(to right, var(--brass) 20%, rgba(0, 0, 0, 0) 80%),
    repeating-linear-gradient(-55deg,
      var(--brass) 0 1.5px, transparent 1.5px 5px);
  border-radius: 999px;
}

/* ---------- gezelschappen: op de kaart ---------- */
.kaart { position: relative; max-width: 21rem; margin: 0.6rem auto 1.2rem; }
.kaart svg { width: 100%; height: auto; display: block; }
.kaart-land {
  fill: var(--paper-deep);
  stroke: var(--hairline);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
/* dots are HTML on top of the SVG so the tooltip below works */
.kaart-stip {
  position: absolute;
  width: 0.7rem; height: 0.7rem;
  margin: -0.35rem 0 0 -0.35rem;
  border-radius: 50%;
}
.kaart-stip.kaart-actief { background: var(--accent); }
.kaart-stip.kaart-actief:hover { background: var(--ink); }
/* leeft nog, zingt musical: dezelfde arcering als op de tijdlijn */
.kaart-stip.kaart-musical {
  background: repeating-linear-gradient(-55deg,
    var(--brass) 0 1.5px, transparent 1.5px 4px);
  border: 1px solid var(--brass);
}
.kaart-stip.kaart-musical:hover { border-color: var(--accent); }
.kaart-stip.kaart-weg { background: var(--paper); border: 1.5px solid var(--hairline); }
.kaart-stip.kaart-weg:hover { border-color: var(--accent); }

/* clusters: crowded cities collapse to one <details> whose summary IS the
   dot -- tap/click opens a card of named links, so every society stays
   clickable (curator 2026-08-08). Native details: works without JS, and
   name="kaart-tros" gives one-open-at-a-time where supported. */
.kaart-tros { position: absolute; width: 0; height: 0; }
/* solo fallbacks ship hidden; the guard keeps [hidden] winning */
.kaart-stip[hidden] { display: none; }
.kaart-tros[open] { z-index: 40; }
.kaart-tros > .tros-knop {
  list-style: none;
  cursor: pointer;
  width: 1.05rem; height: 1.05rem;
  margin: -0.525rem 0 0 -0.525rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 600; line-height: 1;
  color: var(--paper);
}
.kaart-tros > .tros-knop::-webkit-details-marker { display: none; }
.kaart-tros > .tros-knop.kaart-weg { color: var(--muted); }
.kaart-tros > .tros-knop.kaart-musical { color: var(--ink); }
.tros-kaartje {
  position: absolute; left: 0.5rem; top: 0.5rem;
  z-index: 41;
  margin: 0; padding: 0.4rem 0.65rem;
  list-style: none;
  min-width: 11rem; max-width: 15rem; width: max-content;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(37, 28, 18, 0.18);
  font-size: 0.8rem;
  text-align: left;
}
.tros-links .tros-kaartje { left: auto; right: 0.5rem; }
.tros-boven .tros-kaartje { top: auto; bottom: 0.5rem; }
/* Three COLUMNS, no row wrap (curator 2026-08-15, twice over): the dot
   stays on the first line, the name wraps INSIDE its own box beside it,
   the vorm sits muted at the right and wraps inside its box too. Both
   earlier attempts failed differently -- a nowrap vorm overflowed the
   card; flex-wrap made the whole name link jump below its dot. min-width
   lets flexbox actually shrink the text boxes (its default refuses). */
.tros-rij { display: flex; gap: 0.45rem; align-items: flex-start; padding: 0.14rem 0; }
.tros-rij > a, .tros-rij > span:not(.tros-vorm) { flex: 1 1 auto; min-width: 0; }
.tros-rij .tros-vorm { color: var(--muted); font-size: 0.82em; flex: 0 1 auto; min-width: 0; }
.tros-rij .mini-stip {
  flex: none;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  /* rows top-align so wrapped names hang under their first line; this
     centers the dot on that first line instead of the row box */
  margin-top: 0.28rem;
}
.tros-rij .mini-stip.kaart-actief { background: var(--accent); }
.tros-rij .mini-stip.kaart-musical {
  background: repeating-linear-gradient(-55deg,
    var(--brass) 0 1.5px, transparent 1.5px 4px);
  border: 1px solid var(--brass);
}
.tros-rij .mini-stip.kaart-weg { background: var(--paper); border: 1.5px solid var(--hairline); }
/* the four filters hide card rows exactly like timeline rows */
#gez-panorama.verberg-weg .tros-rij.rij-weg:not(.rij-onbekend),
#gez-panorama.verberg-musical .tros-rij.rij-musical:not(.rij-onbekend),
#gez-panorama.verberg-prof .tros-rij.rij-prof:not(.rij-onbekend) { display: none; }

/* native title tooltips wait a second; this one doesn't. Guarded on
   [data-label]: the org page's mini-map dot is decorative and carries no
   label, and an unguarded attr(data-label) renders as an empty ink box
   above the dot on hover (curator 2026-08-14). */
.wtl-dot[data-label]::after, .kaart-stip[data-label]::after, a.jb-jaar::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 0.45rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.55rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 90ms;
  pointer-events: none;
  z-index: 2;
}
.wtl-dot[data-label]:hover::after, .wtl-dot[data-label]:focus-visible::after,
.kaart-stip[data-label]:hover::after, .kaart-stip[data-label]:focus-visible::after,
a.jb-jaar:hover::after, a.jb-jaar:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* ---------- gezelschappen: panorama (tijdlijn + kaart bovenaan) ---------- */
/* Curator 2026-08-08, superseding the 2026-08-06 kaart-only checkbox. With
   JS: one panel visible at a time (tab toggle in the section head), filters
   apply to both. Without JS: no .js/.kies-* classes land, so both panels
   render in full and every row and dot shows. */
/* Filter chips (curator 2026-08-14): the four opt-ins in the same pill
   idiom as the sort/lane toggles. The input stays a real checkbox --
   visually hidden but focusable -- so site.js and keyboard users keep
   the exact control the old grid had. */
.gez-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.gez-chip {
  position: relative;
  /* Zelfde maat en hoogte als de sorteerknoppen (curator 2026-08-18,
     tweede ronde): 0.95rem, twee tekstregels hoog. Een label centreert
     zijn tekst niet vanzelf zoals een button -- vandaar inline-flex.
     Ook buiten de mobiele font-boost, zodat de maat overal gelijk is. */
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1.2;
  /* De FILTERS zijn de laagste pil: ~1.5 tekstregel, op elk scherm
     (curator 2026-08-18, vierde ronde -- 'filters' bleken de chips,
     niet de kaart/tijdlijn-toggle). */
  min-height: 2.25em;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  /* Smaller voering dan de sorteerknoppen (0.55 vs 0.8): de vier
     chip-labels zijn lang en moeten samen op één regel van de
     46rem-kolom passen. */
  padding: 0.12rem 0.55rem;
  cursor: pointer;
}
.gez-chip:hover { color: var(--ink); border-color: var(--brass); }
.gez-chip input { position: absolute; opacity: 0; pointer-events: none; }
.gez-chip:has(input:checked) { color: var(--accent); border-color: var(--accent); }
.gez-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

#gez-panorama .aside { margin-top: 0.6rem; }
#gez-panorama.js .gez-paneel > .month { display: none; } /* the tab is the label */
#gez-panorama.kies-tijdlijn #paneel-kaart { display: none; }
#gez-panorama.kies-kaart #paneel-tijdlijn { display: none; }
/* :not(.tros-knop): the kind-hides govern solo dots only. A tros button
   carries the kind of its best member, but the cluster's visibility is
   owned by site.js's member recount -- hiding the button here would blank
   a cluster that still has visible members of OTHER kinds. */
#gez-panorama.verberg-weg .tl-rij.rij-weg:not(.rij-onbekend),
#gez-panorama.verberg-weg .kaart-stip.kaart-weg:not(.tros-knop):not(.rij-onbekend) { display: none; }
#gez-panorama.verberg-musical .tl-rij.rij-musical:not(.rij-onbekend),
#gez-panorama.verberg-musical .kaart-stip.kaart-musical:not(.tros-knop):not(.rij-onbekend) { display: none; }
/* The open-question dots (Bestaan ze nog? + zonder-data, 2026-08-16)
   answer only to their own checkbox -- their kind class is their look,
   not their filter, hence the :not() guards above. */
#gez-panorama.verberg-onbekend .rij-onbekend { display: none; }
/* the prof hook sits on rows, dots AND the zonder-jaar name spans, so
   one selector covers all three. The hides compose as AND:
   a dead professional carries rij-weg and rij-prof, and stays hidden
   until BOTH boxes are ticked. EXCEPT rij-onbekend: the open-question
   hook is exclusive (site.js counts it that way), so an unverified
   professional answers only to the open-vragen box. */
#gez-panorama.verberg-prof .rij-prof:not(.rij-onbekend) { display: none; }
.gez-filters .gez-tel { opacity: 0.6; }
/* zonder-jaar names lead with their own comma; the first shows none */
.zj:first-child .zj-sep { display: none; }
/* The symmetry pass (2026-08-16): dead names hide behind the weg box
   like their kaart dots; site.js marks the first VISIBLE span so a
   hidden first name cannot strand its neighbour's leading comma. */
#gez-panorama.verberg-weg .zj.rij-weg:not(.rij-onbekend) { display: none; }
.zj.zj-eerste .zj-sep { display: none; }
#gez-panorama .kaart { max-width: 24rem; }
/* The panorama sits INSIDE the 46rem column like everything else
   (curator 2026-08-14, dropping the -9rem wide-screen breakout: it was
   the only breach of the single-column design, and the timeline already
   renders at this width on every viewport below 72rem). */

/* ---------- organisatiepagina: eigen tijdlijn + mini-kaart ---------- */
/* One bar, no name column: the page heading IS the name. Same axis and
   vocabulary as the gezelschappen chart. */
.playbill-head { position: relative; }
.playbill-head .tijdlijn { margin: 1.6rem 0 0; }
.tijdlijn-solo .tl-as { margin-left: 0; margin-right: 4rem; }
.tijdlijn-solo .tl-rij { grid-template-columns: 1fr 4rem; }
.kaart-mini {
  position: absolute;
  top: 0; right: 0;
  width: 5.5rem;
  margin: 0;
  opacity: 0.9;
}
/* the corner vignette needs the corner: on narrow screens it would sit on
   top of the (centered) titles, so it steps aside */
@media (max-width: 46rem) { .kaart-mini { display: none; } }
/* ...but a long society name collides with it on WIDE screens too, because
   an absolutely-positioned map reserves no space: "Stichts Muziektheater
   Vereniging Polyhymnia" wraps the full header width and runs underneath.
   Padding on .playbill-head cannot fix it -- an absolute child offsets from
   the PADDING box, so the map would just move inward with the text, and the
   header also holds the full-width tijdlijn, which must not be squeezed.
   So reserve the corner on the text children only, symmetrically, keeping
   the playbill centred. Scoped to pages that actually carry a map. */
@media (min-width: 46rem) {
  /* De kaart-reservering maakt de titelkolom 13rem smaller; op 3rem
     past 'Muziektheatervereniging' daar net niet en brak hij kaal af
     (curator 2026-08-16). Een iets lagere bovengrens houdt ook het
     langste orgwoord heel -- omslaan tussen woorden mag, breken niet. */
  .playbill-head:has(.kaart-mini) > .work-title { font-size: clamp(2rem, 5vw, 2.6rem); }
  .playbill-head:has(.kaart-mini) > .overline,
  .playbill-head:has(.kaart-mini) > .work-title,
  .playbill-head:has(.kaart-mini) > .by {
    max-width: calc(100% - 13rem);
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- weetjes ---------- */
.weetje-card {
  margin: 1.4rem 0 2rem;
  padding: 0.9rem 1.2rem 1rem;
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
}
.weetje-card .overline { margin: 0 0 0.4rem; }
.weetje-tekst { margin: 0; }
/* an org page can hold several weetjes in one card; each may trail its
   own bron line */
.weetje-tekst + .weetje-tekst,
.weetje-bron + .weetje-tekst { margin-top: 0.55rem; }
/* the public provenance line, on every surface a weetje appears */
.weetje-bron { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--muted); }
.weetje-meer { margin: 0.55rem 0 0; font-size: 0.95rem; }
/* Inklappen (curator ontwerppas 2026-08-16, dezelfde dag verbreed van
   alleen-mobiel naar overal): ingeklapt toont een kaart de eerste tekst,
   geklemd op 8 regels breed en 3 smal; verdere weetjes en bronregels
   wachten achter "lees verder". De knop bestaat alleen wanneer site.js
   .klapbaar zet EN er werkelijk iets te klappen valt (overloop of een
   tweede weetje) -- zonder JS blijft elke kaart volledig. Zelfde
   checkbox-in-label-idioom als de chips; alles op klassen, want de
   org-pagina's dragen dezelfde kaart zonder de homepage-ids. */
.weetje-klap { display: none; font-size: 0.9rem; color: var(--accent); cursor: pointer; }
.weetje-klap input { position: absolute; opacity: 0; pointer-events: none; }
.weetje-klap:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.weetje-card:has(.weetje-klap input:checked) .klap-dicht { display: none; }
.weetje-card:not(:has(.weetje-klap input:checked)) .klap-open { display: none; }
.weetje-card.klapbaar .weetje-klap { display: inline-block; margin-top: 0.35rem; }
.weetje-card.klapbaar:not(:has(.weetje-klap input:checked)) .weetje-tekst {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.weetje-card.klapbaar:not(:has(.weetje-klap input:checked)) .weetje-tekst ~ .weetje-tekst,
.weetje-card.klapbaar:not(:has(.weetje-klap input:checked)) .weetje-bron { display: none; }
@media (max-width: 34rem) {
  .weetje-card.klapbaar:not(:has(.weetje-klap input:checked)) .weetje-tekst { -webkit-line-clamp: 3; }
}
.weetjes-intro { color: var(--muted); font-style: italic; }
.weetje { margin: 0 0 1.5rem; }
.weetje-kop {
  font-family: var(--display);
  font-size: 1.15rem;
  margin: 0 0 0.3rem;
}
.weetje-link { white-space: nowrap; }