/* één met de natuur · website
   Alle kleuren, letters, maten en lijnen komen uit brand/css/tokens.css (gegenereerd uit de huisstijl).
   Hier staan alleen samenstelling en beweging. Logo's worden altijd als origineel bestand geladen, nooit nagetekend. */

/* ========== 1. basis ========== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-text); font-size: var(--text-body-size); line-height: var(--text-body-line);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, dl, dd { margin: 0; }
img { display: block; width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--color-link); text-underline-offset: 0.2em; text-decoration-thickness: var(--line-fine); }
a:hover { text-decoration-thickness: var(--line-ground); }
:focus-visible { outline: var(--line-ground) solid var(--color-accent); outline-offset: var(--space-3xs); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--layout-max-width); margin: 0 auto; padding: 0 var(--layout-margin-mobile); }
@media (min-width: 900px) { .wrap { padding: 0 var(--layout-margin-desktop); } }
.grid { display: grid; grid-template-columns: repeat(var(--layout-grid-columns), minmax(0, 1fr)); column-gap: var(--layout-gutter); }

/* ========== 2. typografische rollen ========== */
.display { font-family: var(--font-display); font-weight: var(--text-display-weight); font-size: var(--text-display-size); line-height: var(--text-display-line); letter-spacing: var(--text-display-tracking); }
.mega { font-family: var(--font-display); font-weight: var(--text-display-weight); font-size: calc(var(--text-display-size) * 1.3); line-height: var(--text-display-line); letter-spacing: var(--text-display-tracking); }
.h1 { font-family: var(--font-display); font-weight: var(--text-h1-weight); font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-tracking); }
.h2 { font-family: var(--font-text); font-weight: var(--text-h2-weight); font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); }
.h3 { font-family: var(--font-text); font-weight: var(--text-h3-weight); font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
.lead { font-size: var(--text-lead-size); line-height: var(--text-lead-line); }
.small { font-size: var(--text-small-size); line-height: var(--text-small-line); }
.label { font-family: var(--font-mono); font-weight: var(--text-label-weight); font-size: var(--text-label-size); line-height: var(--text-label-line); letter-spacing: var(--text-label-tracking); text-transform: uppercase; }
.data { font-family: var(--font-mono); font-weight: var(--text-data-weight); font-size: var(--text-data-size); line-height: var(--text-data-line); letter-spacing: var(--text-data-tracking); font-variant-numeric: tabular-nums; }
.latin { font-family: var(--font-botanical); font-style: italic; font-size: var(--text-latin-size); line-height: var(--text-latin-line); font-variant-ligatures: no-common-ligatures no-discretionary-ligatures; }
.muted { color: var(--color-text-muted); }
p { max-width: var(--layout-measure-ch); }

/* ========== 3. knoppen ========== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--space-xl); padding: 0 var(--space-m);
  font-family: var(--font-mono); font-weight: var(--text-label-weight); font-size: var(--text-data-size); letter-spacing: var(--text-data-tracking);
  text-decoration: none; background: var(--color-bg-inverse); color: var(--color-text-inverse);
  border: var(--line-fine) solid var(--color-bg-inverse); cursor: pointer;
  transition: background-color calc(var(--motion-fade) * .2) ease, border-color calc(var(--motion-fade) * .2) ease;
}
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn--inverse { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.btn--inverse:hover { background: var(--color-accent-inverse); border-color: var(--color-accent-inverse); color: var(--color-text); }
.tekstknop { appearance: none; background: none; border: 0; padding: var(--space-2xs) 0; color: var(--color-link); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: var(--line-fine); }

/* ========== 4. paardenbloem (origineel logobestand, draait mee met het scrollen) ========== */
.bloem { pointer-events: none; aspect-ratio: 1; }
.bloem .ontluik, .bloem .draai, .bloem img { width: 100%; height: 100%; }
.draai { will-change: transform; }

/* ========== 5. verschijnen bij scrollen ========== */
.js-motion .reveal { opacity: 0; transform: translateY(var(--space-m)); transition: opacity var(--motion-fade) var(--motion-ease), transform var(--motion-fade) var(--motion-ease); transition-delay: var(--rd, 0s); }
.js-motion .reveal.in { opacity: 1; transform: none; }
/* foto's schuiven open als een luik, de foto zelf beweegt licht mee (parallax) */
.js-motion .photo.reveal { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path calc(var(--motion-draw) * .8) var(--motion-ease); }
.js-motion .photo.reveal.in { clip-path: inset(0 0 0 0); }
.js-motion .hero .ontluik { animation: ontluiken calc(var(--motion-draw) * 1.1) var(--motion-ease) both; }
@keyframes ontluiken { from { opacity: 0; transform: scale(.86) rotate(-50deg); } to { opacity: 1; transform: none; } }

/* ========== 6. kop ========== */
.site-header { position: relative; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-top: var(--space-m); padding-bottom: var(--space-m); }
.site-header .logo { display: block; width: 220px; flex: none; }
.nav { display: flex; align-items: center; gap: var(--space-l); }
.nav a:not(.btn) { color: var(--color-text); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--color-accent); }
.nav a span { color: var(--color-text-muted); margin-right: var(--space-3xs); }
.menu-toggle { display: none; }

/* ========== 7. opening ========== */
.hero { --bloem-b: min(46vw, 640px); position: relative; min-height: calc(100svh - 96px); display: flex; align-items: flex-end; padding-bottom: var(--space-3xl); overflow: hidden; }
.hero .bloem { position: absolute; z-index: 0; width: var(--bloem-b); right: calc(var(--bloem-b) * -0.12); top: 50%; margin-top: calc(var(--bloem-b) * -0.55); }
.hero .wrap { position: relative; z-index: 1; width: 100%; }
.hero .coords { display: flex; gap: var(--space-l); flex-wrap: wrap; color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.hero h1 { max-width: min(9em, 50vw); }
.hero .intro, .hero .coords { max-width: 56vw; }
.hero .intro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-m) var(--space-xl); margin-top: var(--space-xl); }
.hero .intro p { max-width: 30em; color: var(--color-text-muted); }
.hero .scroll-hint { position: absolute; left: 50%; bottom: var(--space-l); transform: translateX(-50%); color: var(--color-text-muted); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); }
.hero .scroll-hint[hidden] { display: none; }
.hero .scroll-hint::after { content: ""; width: 0; height: var(--space-l); border-left: var(--line-fine) solid var(--color-line); transform-origin: top; }
.js-motion .hero .scroll-hint::after { animation: zakken 2.4s var(--motion-ease) infinite; }
@keyframes zakken { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ========== 8. een jaar in de tuin ========== */
.jaar { position: relative; height: 360vh; background: var(--color-bg-alt); }
.no-js .jaar { height: auto; padding: var(--space-4xl) 0; }
.jaar .stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.no-js .jaar .stick { position: static; height: auto; }
.jaar .wrap { width: 100%; }
.jaar .kop { grid-column: 1 / span 8; margin-bottom: var(--space-l); }
.jaar .kop p { margin-top: var(--space-s); color: var(--color-text-muted); }
.kalender { --naam-b: 200px; --spoor-gap: var(--space-m); grid-column: 1 / span 8; }
.paneel { grid-column: 10 / span 3; align-self: start; min-height: 420px; }

.seizoen-rij, .maanden, .rij, .aanbod { display: grid; grid-template-columns: var(--naam-b) minmax(0, 1fr); column-gap: var(--spoor-gap); align-items: center; }
.seizoen-rij .spoor { display: grid; grid-template-columns: 2fr 3fr 3fr 3fr 1fr; color: var(--color-tagline); height: auto; }
.seizoen-rij .spoor span { border-left: var(--line-hair) solid var(--color-tagline); padding-left: var(--space-3xs); white-space: nowrap; overflow: hidden; }
.maanden .spoor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: auto; }
.maand-knop { appearance: none; background: none; border: 0; padding: var(--space-xs) 0 var(--space-s); text-align: left; letter-spacing: inherit; color: var(--color-text-muted); cursor: pointer; transition: color calc(var(--motion-fade) * .3) ease; }
.maand-knop:hover { color: var(--color-text); }
.maand-knop[aria-pressed="true"] { color: var(--color-accent); }
.maand-knop .kort { display: none; }

.kalender-lijf { position: relative; }
.rij { padding: var(--space-xs) 0; border-top: var(--line-hair) solid var(--color-line); color: var(--color-text-muted); transition: color calc(var(--motion-fade) * .4) ease, opacity calc(var(--motion-fade) * .4) ease; }
.rij.actief { color: var(--color-text); }
.kalender.heeft-keuze .rij:not(.gekozen) { opacity: .45; }
.rij .naam { appearance: none; background: none; border: 0; padding: var(--space-3xs) 0; text-align: left; cursor: pointer; min-width: 0; }
.rij .naam .latin, .rij .naam .data { display: block; }
.rij .naam .latin { text-decoration: underline transparent; text-underline-offset: 0.2em; text-decoration-thickness: var(--line-fine); transition: text-decoration-color calc(var(--motion-fade) * .3) ease; }
.rij .naam:hover .latin, .rij.gekozen .naam .latin { text-decoration-color: currentColor; }
.spoor { position: relative; height: var(--space-l); }
.rij .spoor, .aanbod .spoor { background-image: linear-gradient(to right, var(--color-line) var(--line-hair), transparent var(--line-hair)); background-size: calc(100% / 12) 100%; }
.balk { position: absolute; top: 50%; height: calc(var(--line-ground) * 3); margin-top: calc(var(--line-ground) * -1.5); background: var(--color-text-muted); transform-origin: left center; transition: background-color calc(var(--motion-fade) * .4) ease, transform var(--motion-draw) var(--motion-ease); transition-delay: 0s, var(--bd, 0s); }
.rij.actief .balk { background: var(--color-text); }
.balk.extra { height: 0; margin-top: 0; background: none; border-top: var(--line-ground) dashed var(--color-tagline); }
.js-motion .jaar:not(.getekend) .balk { transform: scaleX(0); }

/* voedselaanbod: hoeveel er per maand te halen valt */
.aanbod { padding: var(--space-s) 0 0; border-top: var(--line-fine) solid var(--color-text); }
.aanbod .naam { color: var(--color-text-muted); }
.aanbod .spoor { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; height: var(--space-xl); }
.staaf { margin: 0 22%; height: calc(var(--h) * 100%); min-height: var(--line-fine); background: var(--color-line); transform-origin: bottom; transition: background-color calc(var(--motion-fade) * .3) ease, transform var(--motion-draw) var(--motion-ease); transition-delay: 0s, var(--bd, 0s); }
.staaf.nu { background: var(--color-accent); }
.js-motion .jaar:not(.getekend) .staaf { transform: scaleY(0); }

/* cursor: een beemdkroonblauwe lijn met de paardenbloem als kop */
.cursorvlak { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--naam-b) + var(--spoor-gap)); pointer-events: none; }
.cursor { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: var(--line-ground) solid var(--color-accent); will-change: left; }
.cursor .bloem { position: absolute; width: var(--space-l); top: calc(var(--space-l) * -0.5); left: calc(var(--space-l) * -0.5 - var(--line-ground) * 0.5); background: var(--color-bg-alt); border-radius: 50%; }

/* paneel naast de kalender */
.paneel .maand { display: block; color: var(--color-accent); }
.paneel h3 { margin: var(--space-2xs) 0 var(--space-m); }
.paneel ul { list-style: none; margin: 0; padding: 0; }
.paneel li { padding: var(--space-xs) 0; border-top: var(--line-hair) solid var(--color-line); }
.paneel li .latin { display: block; }
.paneel li .data { color: var(--color-text-muted); }
.paneel .nieuw { animation: opkomen calc(var(--motion-fade) * .6) var(--motion-ease) both; animation-delay: var(--ld, 0s); }
.paneel .leeg { color: var(--color-text-muted); }
.paneel .samenvatting { display: none; color: var(--color-text-muted); }
@keyframes opkomen { from { opacity: 0; transform: translateY(var(--space-2xs)); } to { opacity: 1; transform: none; } }
.kaart img { width: 120px; margin: 0 0 var(--space-s) calc(var(--space-2xs) * -1); }
.kaart .latin { display: block; }
.kaart > span.data { display: block; color: var(--color-text-muted); }
.kaart p { margin-top: var(--space-s); color: var(--color-text-muted); font-size: var(--text-small-size); line-height: var(--text-small-line); }
.kaart dl { margin-top: var(--space-s); display: grid; grid-template-columns: auto 1fr; gap: var(--space-3xs) var(--space-s); }
.kaart dt { color: var(--color-text-muted); }
.kaart .tekstknop { margin-top: var(--space-s); }

/* ========== 8b. Bloeiboog: dezelfde tabel, nu als werkinstrument ========== */
.jaar.bloeiboog { height: auto; padding: var(--space-4xl) 0; }
.bloeiboog .kop { grid-column: 1 / span 8; margin-bottom: var(--space-l); }
.bloeiboog .kalender { --naam-b: 220px; grid-column: 1 / span 8; }
.zoekpaneel { grid-column: 9 / span 4; padding-left: var(--space-m); align-self: start; position: sticky; top: var(--space-m); }

/* jouw tuin: licht en bodem */
.standplaats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-xl); padding: var(--space-s) 0; margin-bottom: var(--space-l); border-top: var(--line-fine) solid var(--color-text); border-bottom: var(--line-hair) solid var(--color-line); }
.keuzes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.keuzes legend { float: left; margin-right: var(--space-2xs); }
.keuzes label { position: relative; cursor: pointer; }
.keuzes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuzes span { display: inline-flex; align-items: center; min-height: var(--space-l); padding: 0 var(--space-xs); border: var(--line-hair) solid var(--color-line); font-family: var(--font-mono); font-size: var(--text-data-size); letter-spacing: var(--text-data-tracking); transition: background-color calc(var(--motion-fade) * .2) ease, color calc(var(--motion-fade) * .2) ease; }
.keuzes label:hover span { border-color: var(--color-text); }
.keuzes input:checked + span { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-color: var(--color-bg-inverse); }
.keuzes input:focus-visible + span { outline: var(--line-ground) solid var(--color-accent); outline-offset: var(--space-3xs); }

/* rijen */
.bloeiboog .rij { padding: var(--space-2xs) 0; color: var(--color-text); }
.bloeiboog .rij .naam { display: flex; align-items: flex-start; gap: var(--space-3xs); min-width: 0; }
.naam-knop { appearance: none; background: none; border: 0; padding: var(--space-3xs) 0; text-align: left; cursor: pointer; flex: 1; min-width: 0; }
.naam-knop .nl, .r-tekst .nl, .suggesties .nl { display: block; font-family: var(--font-text); }
.naam-knop .latin, .r-tekst .latin { display: block; font-size: var(--text-small-size); line-height: var(--text-small-line); color: var(--color-text-muted); }
.naam-knop:hover .nl, .naam-knop[aria-expanded="true"] .nl { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: var(--line-fine); }
.weg { appearance: none; flex: none; width: var(--space-l); height: var(--space-l); border: 0; background: none; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-lead-size); line-height: 1; cursor: pointer; }
.weg:hover { color: var(--color-accent); }
.bloeiboog .rij .spoor { align-self: center; }
.bloeiboog .balk { background: var(--color-text); }
.bloeiboog .balk.extra { background: none; }
.bloeiboog .rij.actief .naam-knop .nl { color: var(--color-accent); }
.onbekend { position: absolute; left: var(--space-2xs); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); }
.js-motion .bloeiboog .rij.nieuw .balk { animation: tekenen var(--motion-draw) var(--motion-ease) both; }
@keyframes tekenen { from { transform: scaleX(0); } to { transform: none; } }
.rij .detail { grid-column: 1 / -1; padding: var(--space-xs) 0 var(--space-s); }
.rij .detail dl, .kaart dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-m); }
.rij .detail dt { color: var(--color-text-muted); }
.bron { color: var(--color-tagline); }
.bb-leeg { padding: var(--space-l) 0; border-top: var(--line-hair) solid var(--color-line); color: var(--color-text-muted); }
.bb-leeg .tekstknop { padding: 0; }

/* voedselrij onderaan */
.bloeiboog .aanbod { margin-top: 0; padding-top: var(--space-l); }
.bloeiboog .aanbod .spoor { height: calc(var(--space-xl) + var(--space-s)); }
.bloeiboog .staaf { position: relative; height: calc(var(--h) * (100% - var(--space-s))); min-height: var(--line-ground); }
.bloeiboog .staaf b { position: absolute; left: 50%; bottom: calc(100% + var(--space-3xs)); transform: translateX(-50%); font: var(--text-data-weight) var(--text-label-size) / 1 var(--font-mono); color: var(--color-text-muted); }
.staaf.geen { background: none; border-top: var(--line-ground) dotted var(--color-tagline); }
.staaf.weinig { background: var(--color-line); }
.staaf.sterk { background: var(--color-text-muted); }
.bloeiboog .staaf.nu { background: var(--color-accent); }
.bloeiboog .staaf.nu b { color: var(--color-accent); }
.cursor.stil { opacity: .5; }

.kalender-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-m); padding-top: var(--space-s); margin-top: var(--space-xs); border-top: var(--line-hair) solid var(--color-line); color: var(--color-text-muted); }
.kalender-voet .acties { display: flex; gap: var(--space-m); }
.kalender-voet .tekstknop { padding: 0; }
.sleutel { display: inline-block; vertical-align: middle; width: var(--space-m); height: calc(var(--line-ground) * 3); margin: 0 var(--space-3xs) 0 var(--space-xs); background: var(--color-text); }
.sleutel.wind { height: 0; background: none; border-top: var(--line-ground) dashed var(--color-tagline); }
.sleutel.geen { height: 0; background: none; border-top: var(--line-ground) dotted var(--color-tagline); margin-left: 0; }
.sleutel.weinig { background: var(--color-line); margin-left: 0; }
.sleutel.sterk { background: var(--color-text-muted); margin-left: 0; }

/* analyse en suggesties */
.analyse { margin-top: var(--space-xl); }
.analyse-kop h3 { margin: var(--space-2xs) 0 var(--space-s); }
.analyse-kop p { color: var(--color-text-muted); }
.analyse-kop .tekstknop { padding: 0; }
.niveaus { list-style: none; margin: 0 0 var(--space-s); padding: 0; }
.niveaus li { padding: var(--space-3xs) 0; }
.niveaus b { font-weight: var(--text-label-weight); color: var(--color-text); margin-right: var(--space-3xs); }
.advies { margin-top: var(--space-l); }
.advies > .data { margin-top: var(--space-2xs); }
.suggesties { list-style: none; margin: var(--space-s) 0 0; padding: 0; border-top: var(--line-fine) solid var(--color-text); }
.suggesties li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-m); align-items: center; padding: var(--space-s) 0; border-bottom: var(--line-hair) solid var(--color-line); }
.suggesties .nl { display: inline; }
.suggesties .latin { font-size: var(--text-small-size); color: var(--color-text-muted); }
.suggesties .data { display: block; }
.suggesties p { margin-top: var(--space-3xs); color: var(--color-text-muted); }
.btn--klein { min-height: var(--space-l); padding: 0 var(--space-s); }

/* zoekpaneel */
.zoekpaneel h3 { margin-bottom: var(--space-s); }
.zoekveld { width: 100%; padding: var(--space-xs) 0; border: 0; border-bottom: var(--line-fine) solid var(--color-text); background: transparent; color: var(--color-text); font: var(--text-lead-weight) var(--text-lead-size) / var(--text-lead-line) var(--font-text); border-radius: 0; }
.zoekveld::placeholder { color: var(--color-text-muted); opacity: .8; }
.zoekveld:focus-visible { outline: none; border-bottom-color: var(--color-accent); box-shadow: 0 var(--line-fine) 0 var(--color-accent); }
.zoekfilters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-m); margin: var(--space-s) 0; }
.zoekfilters select { min-height: var(--space-l); padding: 0 var(--space-xs); border: var(--line-hair) solid var(--color-line); background: var(--color-bg-alt); color: var(--color-text); border-radius: 0; }
.vinkje { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; }
.vinkje input { accent-color: var(--color-accent); width: var(--space-s); height: var(--space-s); margin: 0; }
.resultaten { list-style: none; margin: var(--space-xs) 0 0; padding: 0; border-top: var(--line-hair) solid var(--color-line); max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; }
.resultaten li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-s); align-items: center; padding: var(--space-xs) 0; border-bottom: var(--line-hair) solid var(--color-line); }
.r-tekst .data { display: block; margin-top: var(--space-3xs); }
.mini { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; width: 120px; margin-top: var(--space-2xs); }
.mini i { height: calc(var(--line-ground) * 2); background: var(--color-line); opacity: .45; }
.mini i.aan { background: var(--color-text); opacity: 1; }
.mini i.wind { background: var(--color-tagline); opacity: .8; }
.toevoegen { appearance: none; min-height: var(--space-l); padding: 0 var(--space-xs); border: var(--line-hair) solid var(--color-text); background: none; color: var(--color-text); cursor: pointer; white-space: nowrap; }
.toevoegen:hover { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.toevoegen[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.toevoegen[aria-pressed="true"]:hover { background: var(--color-accent); color: var(--color-bg); }
#bb-meer { margin-top: var(--space-s); }
.laadt .zoekpaneel #bb-teller::after { content: ""; display: inline-block; width: var(--space-s); height: 0; margin-left: var(--space-2xs); border-top: var(--line-ground) solid var(--color-accent); animation: laden 1.2s var(--motion-ease) infinite; transform-origin: left; }
@keyframes laden { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.bloeiboog .bronnen { grid-column: 1 / -1; margin-top: var(--space-2xl); padding-top: var(--space-s); border-top: var(--line-hair) solid var(--color-line); color: var(--color-text-muted); max-width: none; }

@media (max-width: 960px) {
  .bloeiboog .kop, .bloeiboog .kalender, .zoekpaneel { grid-column: 1 / -1; }
  .zoekpaneel { position: static; padding-left: 0; margin-top: var(--space-2xl); order: 3; }
  .bloeiboog .kalender { order: 2; }
  .bloeiboog .standplaats { order: 1; }
  .bloeiboog .kop { order: 0; }
  .bloeiboog .bronnen { order: 4; }
  .resultaten { max-height: 70vh; }
}
@media (max-width: 720px) {
  .jaar.bloeiboog { padding: var(--space-2xl) 0; }
  .bloeiboog .kalender { --naam-b: 128px; }
  .bloeiboog .rij .naam-knop .latin { display: none; }
  .bloeiboog .rij .naam-knop .nl { font-size: var(--text-small-size); line-height: var(--text-small-line); }
  .weg { width: 28px; }
  .standplaats { gap: var(--space-s); }
  .keuzes legend { float: none; width: 100%; margin-bottom: var(--space-3xs); }
  .kalender-voet .legende { order: 3; }
  .suggesties li { grid-template-columns: 1fr; gap: var(--space-xs); }
  .suggesties .btn { justify-self: start; }
}

/* ========== 8f. verhaal (redactionele tekst onder de hero) ==========
   Uitsneden uit de originele plaat brand/graphics/plates/TARoff.svg (viewBox 300 × 500).
   Het bestand zelf blijft ongewijzigd: de figuur toont via overflow een venster van
   --w × --h eenheden vanaf (--x, --y). */
.schets { margin: 0; overflow: hidden; aspect-ratio: var(--w) / var(--h); pointer-events: none; }
.schets img { max-width: none; width: calc(300 / var(--w) * 100%); height: auto;
  margin-left: calc(var(--x) / var(--w) * -100%); margin-top: calc(var(--y) / var(--w) * -100%); }

.verhaal { padding: var(--space-4xl) 0 var(--space-3xl); }
.verhaal .hoofdstuk { align-items: start; }
.verhaal .hoofdstuk + .hoofdstuk { margin-top: var(--space-4xl); }
.verhaal p { max-width: 36em; }
.verhaal .lead { color: var(--color-text); }
.verhaal .nadruk { font-family: var(--font-display); font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); color: var(--color-text); }

/* 1 · meer leven: titel links, nadruk verspringt naar rechts onder een gemeten lijn */
.h-leven .kop { grid-column: 1 / span 7; grid-row: 1; }
.h-leven .p1 { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--space-l); }
.h-leven .p2 { grid-column: 8 / span 4; grid-row: 3; margin-top: var(--space-xl); padding-top: var(--space-s); border-top: var(--line-hair) solid var(--color-line); }

/* 2 · samenwerken: titel rechts uitgelijnd, twee verspringende kolommen, slotzin in het midden */
.h-samen .kop { grid-column: 5 / -1; grid-row: 1; text-align: right; }
.h-samen .p1 { grid-column: 1 / span 5; grid-row: 2; margin-top: var(--space-xl); }
.h-samen .p2 { grid-column: 7 / span 5; grid-row: 2; margin-top: var(--space-3xl); }
.h-samen .p3 { grid-column: 3 / span 7; grid-row: 3; margin-top: var(--space-2xl); }

/* 3 · van visie tot tuin: titel links, tweede alinea lager en achter een verticale lijn */
.h-visie .kop { grid-column: 1 / span 6; grid-row: 1; }
.h-visie .p1 { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--space-l); }
.h-visie .p2 { grid-column: 8 / span 5; grid-row: 2; margin-top: var(--space-3xl); padding-left: var(--space-m); border-left: var(--line-hair) solid var(--color-line); }

/* 4 · paardenbloem: de volledige plant links, tekst rechts, laatste alinea iets ingesprongen */
.h-paardenbloem .schets-plant { grid-column: 1 / span 4; grid-row: 1 / span 3; width: 100%; max-width: 300px; align-self: center; }
.h-paardenbloem .kop { grid-column: 6 / -1; grid-row: 1; }
.h-paardenbloem .p1 { grid-column: 6 / span 6; grid-row: 2; margin-top: var(--space-l); }
.h-paardenbloem .p2 { grid-column: 7 / span 6; grid-row: 3; margin-top: var(--space-l); }

/* slot: de zin boven het maaiveld, de wortels eronder */
.verhaal .slot { margin-top: var(--space-4xl); display: flex; flex-direction: column; align-items: center; text-align: center; }
.verhaal .slot-tekst { max-width: 14em; }
.verhaal .schets-wortels { width: min(70vw, 340px); margin-top: var(--space-l); }

/* ========== 9. visie ========== */
.visie { padding: var(--space-4xl) 0; }
.visie .statement { grid-column: 1 / span 9; }
.photo { overflow: hidden; }
.photo img { height: 112%; object-fit: cover; }
.visie .photo { grid-column: 1 / span 5; margin-top: var(--space-3xl); aspect-ratio: 4 / 5; }
.visie .text { grid-column: 7 / span 5; margin-top: var(--space-3xl); align-self: end; }
.visie .text p + p { margin-top: var(--space-s); }
.visie .text .lead { margin-bottom: var(--space-m); }

/* ========== 10. principes ========== */
.principes { padding: var(--space-4xl) 0; background: var(--color-bg-alt); }
.principes .intro { grid-column: 1 / span 4; }
.principes .intro .sticky { position: sticky; top: var(--space-xl); }
.principes .intro p { margin-top: var(--space-m); }
.principes .lijst { grid-column: 6 / span 7; position: relative; }
.principes ul { list-style: none; margin: 0; padding: 0; border-top: var(--line-fine) solid var(--color-text); }
.principes li { display: grid; grid-template-columns: var(--space-xl) minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-m); padding: var(--space-l) 0; border-bottom: var(--line-hair) solid var(--color-line); }
.principes li .data { color: var(--color-text-muted); padding-top: var(--space-3xs); }
.principes li p { color: var(--color-text-muted); }

/* ========== 11. inheemse soorten ========== */
.soorten { padding: var(--space-4xl) 0; }
.soorten .head { grid-column: 1 / span 6; }
.soorten .head p { margin-top: var(--space-m); }
.platen-wrap { position: relative; margin-top: var(--space-3xl); border-top: var(--line-hair) solid var(--color-line); }
.platen { list-style: none; margin: 0; padding: var(--space-m) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--layout-gutter); }
.platen img { max-width: 220px; margin: 0 auto var(--space-m); }
.platen .latin { display: block; }
.platen p { margin-top: var(--space-xs); color: var(--color-text-muted); font-size: var(--text-small-size); line-height: var(--text-small-line); }

/* ========== 12. diensten en werkwijze ========== */
.diensten { padding: var(--space-4xl) 0 var(--space-3xl); background: var(--color-bg-alt); position: relative; overflow: hidden; }
.diensten .head { grid-column: 1 / span 5; }
.diensten .head p { margin-top: var(--space-m); }
.diensten .plan { grid-column: 7 / span 6; align-self: end; }
.diensten .plan figcaption { margin-top: var(--space-xs); color: var(--color-tagline); }
.dienst-wrap { position: relative; margin-top: var(--space-3xl); }
.dienst-list { list-style: none; margin: 0; padding: 0; border-top: var(--line-fine) solid var(--color-text); }
.dienst { padding: var(--space-l) 0 var(--space-xl); border-bottom: var(--line-hair) solid var(--color-line); }
.dienst .data.code { grid-column: 1 / span 1; color: var(--color-text-muted); padding-top: var(--space-2xs); }
.dienst h3 { grid-column: 2 / span 4; }
.dienst > p { grid-column: 6 / span 4; color: var(--color-text-muted); }
.dienst ul { grid-column: 10 / span 3; list-style: none; margin: 0; padding: 0; }
.dienst ul li { padding: var(--space-3xs) 0; }

.werkwijze { padding: var(--space-3xl) 0 var(--space-4xl); background: var(--color-bg-alt); }
.werkwijze .head { grid-column: 1 / span 4; }
.stappen { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--layout-gutter); }
.stappen li { border-top: var(--line-hair) solid var(--color-line); padding-top: var(--space-s); }
.stappen .data { display: block; color: var(--color-text-muted); margin-bottom: var(--space-s); }
.stappen h3 { margin-bottom: var(--space-2xs); }
.stappen p { color: var(--color-text-muted); }

/* ========== 13. over mij ========== */
.over { padding: var(--space-4xl) 0; }
.over .photo { grid-column: 2 / span 4; aspect-ratio: 3 / 4; }
.over .text { grid-column: 7 / span 5; align-self: center; }
.over .text .h1 { margin-bottom: var(--space-l); }
.over .text .lead { margin-bottom: var(--space-m); }
.over .text p + p { margin-top: var(--space-s); }

/* ========== 14. contact en voet ========== */
.contact { --bloem-b: min(52vw, 640px); position: relative; overflow: hidden; background: var(--color-bg-inverse); color: var(--color-text-inverse); padding: var(--space-4xl) 0 var(--space-l); }
.contact a { color: var(--color-accent-inverse); }
.contact .bloem { position: absolute; width: var(--bloem-b); right: calc(var(--bloem-b) * -0.22); top: var(--space-2xl); }
.contact .btn--inverse { color: var(--color-text); }
.contact .wrap { position: relative; z-index: 1; }
.contact .head { grid-column: 1 / span 6; }
.contact .head p { margin-top: var(--space-m); }
.contact .details { grid-column: 1 / span 5; margin-top: var(--space-2xl); }
.contact .details .label { display: block; color: var(--color-accent-inverse); }
.contact .details .mail { display: inline-block; font-size: var(--text-lead-size); margin: var(--space-2xs) 0 var(--space-l); }
.contact .details .plaats { margin: var(--space-2xs) 0 var(--space-l); }
.footer { position: relative; margin-top: var(--space-4xl); padding-top: var(--space-m); border-top: var(--line-hair) solid var(--color-text-muted); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); }
.footer .logo { display: block; width: 220px; }
.footer .social { display: flex; gap: var(--space-m); }

/* kleine paardenbloem: naar boven */
.naar-boven { position: fixed; right: var(--space-m); bottom: var(--space-m); z-index: 30; width: var(--space-2xl); height: var(--space-2xl); padding: var(--space-2xs); border: 0; border-radius: 50%; background: var(--color-bg); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity calc(var(--motion-fade) * .4) ease, visibility 0s linear calc(var(--motion-fade) * .4); }
.naar-boven.zichtbaar { opacity: 1; visibility: visible; transition-delay: 0s; }
.naar-boven .bloem { display: block; width: 100%; }
.menu-open .naar-boven { opacity: 0; visibility: hidden; }

/* ========== 15. beestjes: lijntekeningen in inkt ========== */
.zwerm { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.beestje, .kruiper { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.beestje svg, .kruiper svg { display: block; overflow: visible; fill: var(--color-bg); stroke: var(--color-text); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.beestje .stip, .kruiper .stip { fill: var(--color-text); stroke: none; }
.bij { width: 34px; }
.bij .vleugels { transform-box: fill-box; transform-origin: 50% 100%; animation: fladder .07s linear infinite alternate; stroke: var(--color-text-muted); }
.bij .streep { fill: none; stroke: var(--color-tagline); stroke-width: 2; }
@keyframes fladder { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.kruiper { z-index: 3; }
.contact .kruiper svg { fill: var(--color-bg-inverse); stroke: var(--color-text-inverse); }
.contact .kruiper .stip { fill: var(--color-text-inverse); }
.lieveheersbeestje { width: 30px; }
.mier { width: 38px; }
.kruiper .poot-a, .kruiper .poot-b { transform-box: fill-box; transform-origin: 50% 0; }
.kruiper.loopt .poot-a { animation: stap .22s ease-in-out infinite alternate; }
.kruiper.loopt .poot-b { animation: stap .22s ease-in-out infinite alternate-reverse; }
.mier.loopt .poot-a, .mier.loopt .poot-b { animation-duration: .14s; }
@keyframes stap { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.kruiper .voelsprieten { transform-box: fill-box; transform-origin: 0 100%; animation: voel 1.6s ease-in-out infinite alternate; }
@keyframes voel { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
/* gasten in de zwerm: af en toe een vliegend lieveheersbeestje, een mier of een regenworm in plaats van een bij */
.lieveheersbeestje.vliegt { width: 28px; }
.lieveheersbeestje.vliegt .vleugels { transform-box: fill-box; transform-origin: 50% 100%; animation: fladder .09s linear infinite alternate; stroke: var(--color-text-muted); }
.zwerm .mier { width: 34px; }
.worm { width: 48px; }
.worm svg { overflow: visible; }
.worm .lijf { fill: none; stroke: var(--color-text); stroke-width: 5.4; stroke-linecap: round; stroke-linejoin: round; }
.worm .lijf-binnen { fill: none; stroke: var(--color-bg); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.worm .zadel { fill: none; stroke: var(--color-tagline); stroke-width: 3.2; stroke-linecap: round; }

/* ========== 16. tablet ========== */
@media (max-width: 960px) {
  .nav { display: none; }
  .nav.open { display: flex; position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; gap: var(--space-l); background: var(--color-bg); font-size: var(--text-lead-size); }
  .menu-toggle { display: inline-flex; position: relative; z-index: 50; min-height: var(--space-xl); align-items: center; padding: 0 var(--space-3xs); background: none; border: 0; color: var(--color-text); cursor: pointer; }
  .jaar .kop, .kalender, .paneel,
  .visie .statement, .visie .photo, .visie .text,
  .principes .intro, .principes .lijst,
  .soorten .head, .diensten .head, .diensten .plan,
  .werkwijze .head, .stappen,
  .over .photo, .over .text,
  .contact .head, .contact .details { grid-column: 1 / -1; }
  .paneel { margin-top: var(--space-m); min-height: 0; }
  .paneel h3 { display: none; }
  .paneel ul, .paneel .kaart { display: none; }
  .paneel .samenvatting { display: block; margin-top: var(--space-3xs); }
  /* verhaal: één kolom, de schetsen wisselen van kant */
  .verhaal .hoofdstuk > * { grid-column: 1 / -1; grid-row: auto; margin-top: var(--space-m); }
  .verhaal .hoofdstuk > .kop { margin-top: 0; }
  .verhaal .hoofdstuk + .hoofdstuk { margin-top: var(--space-3xl); }
  .h-samen .kop { text-align: left; }
    .h-visie .p2 { padding-left: var(--space-s); }
  .h-paardenbloem .schets-plant { width: 180px; justify-self: center; margin: 0 0 var(--space-l); }
  .verhaal .slot { margin-top: var(--space-3xl); }
  .visie .photo { margin-top: var(--space-2xl); max-width: 520px; }
  .visie .text { margin-top: var(--space-xl); }
  .principes .intro .sticky { position: static; }
  .principes .lijst { margin-top: var(--space-xl); }
  .platen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diensten .plan { margin-top: var(--space-xl); }
  .dienst .data.code, .dienst h3, .dienst > p, .dienst ul { grid-column: 1 / -1; }
  .dienst h3 { margin-top: var(--space-2xs); }
  .dienst > p { margin-top: var(--space-xs); }
  .dienst ul { margin-top: var(--space-s); }
  .stappen { margin-top: var(--space-xl); }
  .over .photo { max-width: 420px; }
  .over .text { margin-top: var(--space-xl); }
}

/* ========== 17. gsm ========== */
@media (max-width: 720px) {
  .site-header .logo { width: 160px; }
  .hero { --bloem-b: 84vw; display: block; min-height: 0; padding-bottom: var(--space-2xl); }
  .hero .bloem { position: relative; top: auto; right: auto; margin: var(--space-s) -28vw var(--space-l) auto; }
  .hero h1, .hero .intro, .hero .coords { max-width: none; }
  .hero .coords { margin-bottom: var(--space-m); }
  .hero .scroll-hint { display: none; }
  .jaar { height: 320vh; }
  .jaar .kop { margin-bottom: var(--space-s); }
  .kalender { --naam-b: 92px; --spoor-gap: var(--space-xs); }
  .seizoen-rij { display: none; }
  .maand-knop { padding: var(--space-2xs) 0 var(--space-s); min-height: 40px; }
  .cursor .bloem { width: var(--space-m); top: calc(var(--space-m) * -0.5); left: calc(var(--space-m) * -0.5 - var(--line-ground) * 0.5); }
  .maand-knop .kort { display: inline; }
  .maand-knop .lang { display: none; }
  .rij { padding: var(--space-3xs) 0; }
  .rij .naam .latin { font-size: var(--text-small-size); }
  .rij .naam .data { display: none; }
  .aanbod .spoor { height: var(--space-l); }
  .aanbod .naam { font-size: var(--text-label-size); }
  .principes li { grid-template-columns: var(--space-xl) minmax(0, 1fr); }
  .principes li p { grid-column: 2; }
  .platen { grid-template-columns: 1fr; }
  .platen img { max-width: 180px; }
  .stappen { grid-template-columns: 1fr; gap: var(--space-l); }
  .hero .btn, .contact .btn { width: 100%; }
  .bij { width: 26px; }
  .contact { --bloem-b: 62vw; padding-top: var(--space-xl); }
  .contact .bloem { position: relative; top: auto; right: auto; margin: 0 -16vw var(--space-l) auto; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .jaar .kop p { display: none; }
}

/* ========== 18. minder beweging ========== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .zwerm { display: none; }
}
.r-tekst .zeldzaam { display: block; color: var(--color-tagline); }

/* ========== Bloeiboog · Belgische bloei (9 nov 2026) ========== */
.bloeiboog .balk.rand { background: var(--color-text-muted); opacity: .4; }
.bloeiboog .balk.soms { background: none; height: 0; margin-top: 0; border-top: var(--line-ground) dotted var(--color-text-muted); }
.bloeiboog .balk.extra.rand { opacity: .6; }
.bloeiboog .balk.referentie { background: none; height: calc(var(--line-ground) * 4); margin-top: calc(var(--line-ground) * -2); border: var(--line-fine) solid var(--color-tagline); }
.bloeiboog .ref-label { position: absolute; top: calc(50% + var(--space-2xs)); font-size: var(--text-label-size); line-height: 1; color: var(--color-tagline); white-space: nowrap; pointer-events: none; }
.bloeiboog .ref-label.onzeker { color: var(--color-text-muted); }
.mini i.ref { background: none; border-top: var(--line-fine) solid var(--color-tagline); opacity: 1; }
.sleutel.rand { background: var(--color-text-muted); opacity: .4; margin-left: var(--space-xs); }
.sleutel.ref { height: calc(var(--line-ground) * 3); background: none; border: var(--line-fine) solid var(--color-tagline); }
.kalender-voet .legende { line-height: 2; }
/* source credit only in the left column: the sticky search panel never scrolls over it */
@media (min-width: 961px) { .bloeiboog .bronnen { grid-column: 1 / span 8; } }
.bloeiboog .ref-label .kort { display: none; }
@media (max-width: 720px) { .bloeiboog .ref-label .lang { display: none; } .bloeiboog .ref-label .kort { display: inline; } }

/* ========== Inheemse Bloeiboog · compactere tabel, tooltip, zeer droog, eigenschappen (9 nov 2026) ========== */
.bloeiboog .rij { padding: var(--space-3xs) 0; }
.bloeiboog .spoor { height: var(--space-m); }
.naam-knop { padding: var(--space-3xs) 0; }
.weg { height: var(--space-m); }
/* scientific name: subtle tooltip on hover and keyboard focus (touch: tap the name → details) */
.naam-knop .nl { position: relative; }
.naam-knop .nl::after { content: attr(data-latin); position: absolute; left: 0; bottom: calc(100% + var(--space-3xs)); z-index: 4; padding: var(--space-3xs) var(--space-2xs);
  background: var(--color-bg); border: var(--line-hair) solid var(--color-line); color: var(--color-text-muted);
  font: italic var(--text-small-size) / 1.2 var(--font-botanical); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(var(--space-3xs));
  transition: opacity calc(var(--motion-fade) * .2) ease, transform calc(var(--motion-fade) * .2) ease; }
@media (hover: hover) { .naam-knop:hover .nl::after { opacity: 1; transform: none; } }
.naam-knop:focus-visible .nl::after { opacity: 1; transform: none; }
.standplaats-uitleg { flex-basis: 100%; margin: 0; max-width: 60ch; }
@media (max-width: 720px) { .bloeiboog .rij { padding: 2px 0; } }
/* details above the month-marker line, readable on phones */
.bloeiboog .rij .detail { position: relative; z-index: 2; background: var(--color-bg-alt); }
@media (max-width: 720px) {
  .rij .detail dl { grid-template-columns: 1fr; gap: 0; }
  .rij .detail dt { margin-top: var(--space-2xs); }
}

/* 8e Bloeiboog: one filter (type + properties), simplified plant info */
.filter { position: relative; }
.filterknop { appearance: none; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--space-l); max-width: 100%; padding: 0 var(--space-xs); border: var(--line-hair) solid var(--color-line); background: var(--color-bg-alt); color: var(--color-text); cursor: pointer; text-align: left; }
.filterknop .tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.filterknop .pijl { width: .45em; height: .45em; border-right: var(--line-fine) solid currentColor; border-bottom: var(--line-fine) solid currentColor; transform: translateY(-25%) rotate(45deg); flex: none; transition: transform calc(var(--motion-fade) * .2) ease; }
.filterknop[aria-expanded="true"] .pijl { transform: translateY(15%) rotate(-135deg); }
.filterknop.actief { border-color: var(--color-accent); color: var(--color-accent); }
.filterpaneel { position: absolute; z-index: 20; top: calc(100% + var(--space-3xs)); left: 0; width: min(22rem, calc(100vw - 2 * var(--space-m))); padding: var(--space-s); background: var(--color-bg); border: var(--line-hair) solid var(--color-line); box-shadow: 0 var(--space-2xs) var(--space-m) rgb(0 0 0 / .08); }
.filtergroep { border: 0; padding: 0; margin: 0 0 var(--space-s); display: grid; gap: var(--space-2xs); }
.filtergroep legend { margin-bottom: var(--space-2xs); color: var(--color-text-muted); }
.filtergroep.eigenschappen { padding-top: var(--space-s); border-top: var(--line-hair) solid var(--color-line); }
.filtergroep.eigenschappen .vinkje input { border-radius: 50%; }
.filtergroep .vinkje .muted { margin-left: auto; padding-left: var(--space-xs); }
.filtergroep .vinkje { display: flex; }
.filtergroep .vinkje.leeg { opacity: .55; cursor: default; }
.resultaten .via { font-style: italic; }
.detail .meer { margin-top: var(--space-xs); }
.detail .meer summary { cursor: pointer; color: var(--color-text-muted); padding: var(--space-3xs) 0; }
.detail .meer summary:hover { color: var(--color-text); }
.detail .meer dl { margin-top: var(--space-2xs); color: var(--color-text-muted); }