/**
 * Styling voor de eigen Elementor-widgets: alfabetfilter, boekencarrousel
 * en artikelenrooster.
 */

/* ==========================================================================
   Alfabetfilter
   ========================================================================== */
.enno-alfabet {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 6px;
    padding: 18px 20px;
    /* Zonder maximum staan de letters op een brede pagina 94px uit elkaar. */
    max-width: var(--enno-alfabet-breedte, 940px);
    border: 1px solid var(--enno-rand);
    border-radius: 4px;
    background: #fff;
}

/* Weinig letters: geen raster maar een rij, anders valt de rechterkant weg. */
.enno-alfabet.is-kort {
    display: flex;
    flex-wrap: wrap;
}

.enno-alfabet.is-kort .enno-letter {
    width: 44px;
}

.enno-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.enno-letter:hover {
    background: var(--box-bg);
    color: var(--primary-color);
}

.enno-letter:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.enno-letter.is-actief {
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.enno-letter.is-leeg {
    color: #c9c0b6;
    cursor: default;
}

/* ==========================================================================
   Carrousel
   ========================================================================== */
.enno-carrousel {
    --kaarten: 5;
    --kaart-gat: 22px;
    position: relative;
}

.enno-carrousel-spoor {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--kaarten) - 1) * var(--kaart-gat)) / var(--kaarten));
    gap: var(--kaart-gat);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    /* scrollbar verbergen, de pijlen en puntjes doen het werk */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.enno-carrousel-spoor::-webkit-scrollbar {
    display: none;
}

.enno-carrousel-spoor:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 4px;
}

.enno-boek {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--enno-rand);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.enno-boek:hover {
    box-shadow: 0 10px 28px rgba(49, 63, 48, 0.12);
    transform: translateY(-3px);
}

.enno-boek-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.enno-boek-omslag {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--box-bg);
    border-bottom: 1px solid var(--enno-rand);
    overflow: hidden;
}

.enno-boek-omslag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.enno-boek-titel {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    line-height: 1.35;
    color: var(--text-color);
    padding: 13px 16px 0;
}

.enno-boek-link:hover .enno-boek-titel {
    color: var(--primary-color);
}

.enno-boek-cats {
    display: block;
    font-size: 0.78rem;
    color: #8a8a8a;
    padding: 5px 16px 0;
}

.enno-boek-datum {
    display: block;
    font-size: 0.78rem;
    color: #a09589;
    padding: 10px 16px 14px;
    margin-top: auto;
}

/* Pijlen */
button.enno-carrousel-knop {
    position: absolute;
    top: 38%;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--enno-rand);
    border-radius: 50%;
    background: #fff;
    color: var(--text-color);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.enno-carrousel-knop.is-vorige { left: -20px; }
.enno-carrousel-knop.is-volgende { right: -20px; }

.enno-carrousel-knop:hover:not(:disabled) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Na het klikken houdt de pijl focus; dan weer zijn rustkleur. */
.enno-carrousel-knop:focus:not(:hover):not(:disabled) {
    background: #fff;
    border-color: var(--enno-rand);
    color: var(--text-color);
}

.enno-carrousel-knop:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Puntjes */
.enno-carrousel-punten {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

button.enno-punt {
    color: inherit;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d6cbbe;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.enno-punt:hover { background: #b8a894; }

.enno-punt.is-actief,
.enno-punt.is-actief:hover,
.enno-punt.is-actief:focus {
    background: var(--primary-color);
    transform: scale(1.15);
}

.enno-punt:focus:not(:hover):not(.is-actief) { background: #d6cbbe; }

/* ==========================================================================
   Artikelenrooster
   ========================================================================== */
.enno-artikelen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.enno-artikel {
    display: flex;
    flex-direction: column;
}

.enno-artikel-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.enno-artikel-beeld {
    display: block;
    aspect-ratio: 5 / 4;
    border-radius: 4px;
    overflow: hidden;
    background: var(--box-bg);
    margin-bottom: 14px;
}

.enno-artikel-beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.enno-artikel-link:hover .enno-artikel-beeld img {
    transform: scale(1.04);
}

.enno-artikel-titel {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text-color);
}

.enno-artikel-link:hover .enno-artikel-titel {
    color: var(--primary-color);
}

.enno-artikel-tag {
    display: block;
    margin-top: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-color);
}

.enno-artikel-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.76rem;
    color: #8a8a8a;
}

/* ==========================================================================
   Responsief
   ========================================================================== */
@media (max-width: 1200px) {
    .enno-carrousel-knop.is-vorige { left: -8px; }
    .enno-carrousel-knop.is-volgende { right: -8px; }
}

@media (max-width: 992px) {
    .enno-alfabet {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        padding: 16px;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .enno-alfabet {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
        padding: 14px;
    }
    .enno-letter {
        height: 32px;
        font-size: 0.88rem;
    }
    .enno-carrousel { --kaart-gat: 14px; }
    button.enno-carrousel-knop { display: none; }
    .enno-artikelen { gap: 18px; }
}

/* ==========================================================================
   Berichtenoverzicht (pagina Boeken / Essays)
   ========================================================================== */
.enno-overzicht-aantal {
    margin: 0 0 22px;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent-color);
}

.enno-overzicht-paginering {
    margin-top: 55px;
    padding-top: 30px;
    border-top: 1px solid var(--enno-rand);
}

.enno-overzicht-paginering .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.enno-overzicht-paginering .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--enno-rand);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-color);
    background: #fff;
    text-decoration: none;
}

.enno-overzicht-paginering .page-numbers:hover {
    border-color: var(--primary-color);
}

.enno-overzicht-paginering .page-numbers.current {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.enno-overzicht-paginering .page-numbers.dots {
    border-color: transparent;
}

/* De kaarten uit blog.css hebben hier ook hun rooster nodig. */
.enno-overzicht .enno-grid,
.elementor-widget-enno-overzicht .enno-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 40px 30px;
}

@media (max-width: 640px) {
    .enno-overzicht-paginering {
        margin-top: 40px;
    }
}

/* ==========================================================================
   Aforismen
   ========================================================================== */
.enno-aforismen-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--enno-rand);
}

button.enno-filterknop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--enno-rand);
    border-radius: 2px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.enno-filterknop span {
    font-size: 0.68rem;
    color: #a09589;
}

/* Hover krijgt het goudbruine accent; de actieve knop blijft donkergroen,
   net als de actieve letter in het alfabet. */
.enno-filterknop:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.enno-filterknop:hover span { color: rgba(255, 255, 255, 0.75); }

.enno-filterknop.is-actief {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.enno-filterknop.is-actief span { color: rgba(255, 255, 255, 0.7); }

/* Een knop houdt focus na het klikken; de actieve knop mag daardoor niet de
   hoverkleur vasthouden. Actief blijft donkergroen, hover is goudbruin. */
.enno-filterknop.is-actief:hover,
.enno-filterknop.is-actief:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.enno-filterknop.is-actief:hover span,
.enno-filterknop.is-actief:focus span { color: rgba(255, 255, 255, 0.7); }

.enno-aforismen-telling {
    margin: 0 0 26px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent-color);
}

/* Kolommen als in een citatenboek; een citaat mag nooit in tweeën breken. */
.enno-aforismen-lijst {
    column-count: 2;
    column-gap: 60px;
}

.enno-aforisme {
    break-inside: avoid;
    page-break-inside: avoid;
    padding-left: 22px;
    border-left: 1px solid rgba(192, 120, 88, 0.35);
}

/* De zoekpagina verwijst naar een los aforisme met #aforisme-123. De kop
   schuift mee en dekt de bovenkant af, vandaar dezelfde marge als bij het
   contactformulier. */
.enno-aforisme { scroll-margin-top: 150px; }

/* En dan even aanwijzen welke het was: tussen 177 citaten is een landing
   zonder markering niet te volgen. De gloed dooft vanzelf. */
.enno-aforisme:target {
    border-left-color: var(--accent-color);
    border-left-width: 3px;
    padding-left: 20px;
    animation: enno-aforisme-aanwijzen 2.4s ease-out 1;
}

@keyframes enno-aforisme-aanwijzen {
    from { background: rgba(192, 120, 88, 0.14); }
    to   { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .enno-aforisme:target { animation: none; }
}

/* Elementor zet margin: 0 op elke figure binnen een widget, met een selector van
   vier klassen plus een element. Een enkele klasse verliest daarvan, dus staat
   het hele pad hier. De ruimte zelf komt uit een variabele, die de schuifknop
   "Ruimte tussen citaten" in de editor zet. */
.elementor .elementor-widget .enno-aforismen .enno-aforismen-lijst figure.enno-aforisme {
    margin: 0 0 var(--enno-aforisme-ruimte, 34px);
}

.enno-aforisme blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-lees);
    font-size: 1.14rem;
    line-height: 1.62;
    color: #26241f;
}

.enno-aforisme blockquote p { margin: 0 0 0.6em; }
.enno-aforisme blockquote p:last-child { margin-bottom: 0; }

.enno-aforisme figcaption {
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    line-height: 1.5;
}

.enno-aforisme-auteur {
    display: block;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-color);
}

.enno-aforisme-auteur.is-lang {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.78rem;
    color: #8a8078;
}

.enno-aforisme-werk {
    display: block;
    margin-top: 2px;
    font-family: var(--font-lees);
    font-style: italic;
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: 0;
    color: #8a8078;
}

/* --- Scheiding tussen de citaten --- */
.enno-scheiding {
    --scheiding-kleur: rgba(160, 140, 110, 0.55);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 26px;
}

/* Laatste citaat hoeft geen afsluiting; is-laatste wordt door het filter
   gezet omdat :last-child naar de DOM kijkt en niet naar wat zichtbaar is. */
.enno-aforisme:last-child .enno-scheiding,
.enno-aforisme.is-laatste .enno-scheiding { display: none; }

/* Ornament: twee uitvloeiende lijnen met een ruitje ertussen. */
.scheiding-ornament .enno-scheiding::before,
.scheiding-ornament .enno-scheiding::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--scheiding-kleur), transparent);
}

.scheiding-ornament .enno-scheiding i {
    width: 5px;
    height: 5px;
    background: var(--scheiding-kleur);
    transform: rotate(45deg);
}

/* Dunne lijn over de volle breedte. */
.scheiding-lijn .enno-scheiding {
    height: 1px;
    background: var(--scheiding-kleur);
}

.scheiding-lijn .enno-scheiding i { display: none; }

/* Drie puntjes, klassiek als passagescheiding. */
.scheiding-punt .enno-scheiding i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--scheiding-kleur);
    box-shadow:
        -14px 0 0 var(--scheiding-kleur),
        14px 0 0 var(--scheiding-kleur);
}

.enno-aforismen-leeg {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #7a7a7a;
}

@media (max-width: 900px) {
    .enno-aforismen-lijst { column-gap: 40px; }
}

@media (max-width: 640px) {
    .enno-aforismen-lijst { column-count: 1; }
    .enno-aforisme { padding-left: 16px; }
    .elementor .elementor-widget .enno-aforismen .enno-aforismen-lijst figure.enno-aforisme {
        margin-bottom: var(--enno-aforisme-ruimte, 26px);
    }
    .enno-aforisme blockquote { font-size: 1.06rem; }
    .enno-aforismen-filter { gap: 6px; padding-bottom: 20px; margin-bottom: 20px; }
    button.enno-filterknop { font-size: 0.72rem; padding: 6px 11px; }
}

/* ==========================================================================
   In memoriam-pagina: leestypografie op een gewone Elementor-pagina
   ========================================================================== */

/* Zelfde leesletter en ritme als de artikelpagina's, maar hier via een
   CSS-klasse die je in Elementor op een widget kunt zetten.
   Dubbele klasse omdat Elementor zijn eigen post-CSS na dit bestand inlaadt met
   .elementor-widget-text-editor op dezelfde specificiteit; die zou anders winnen. */
.enno-memoriam-tekst.enno-memoriam-tekst {
    font-family: var(--font-lees);
    font-size: 1.24rem;
    line-height: 1.75;
    color: #26241f;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.enno-memoriam-tekst p { margin: 0 0 1.1em; }
.enno-memoriam-tekst p + p { text-indent: 1.6em; margin-top: -0.35em; }
.enno-memoriam-tekst p:last-child { margin-bottom: 0; }

.enno-memoriam-tekst em { font-style: italic; }
.enno-memoriam-tekst strong { font-weight: 600; }

/* Openingsalinea met kapitaal, zoals bij de essays. */
.enno-memoriam-tekst.heeft-kapitaal > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 4em;
    line-height: 0.8;
    padding: 0.07em 0.1em 0 0;
    color: #26241f;
}

/* Ondertekening onder de grafrede. */
.enno-signatuur.enno-signatuur {
    font-family: var(--font-lees);
    font-style: italic;
    font-size: 1.06rem;
    color: #6f665b;
}

/* Ornament als passagescheiding. */
.enno-scheidingsteken {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.enno-scheidingsteken::before,
.enno-scheidingsteken::after {
    content: '';
    width: 64px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(160, 140, 110, 0.75), transparent);
}

.enno-scheidingsteken i {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

/* ==========================================================================
   Downloadlijst
   ========================================================================== */
.enno-downloads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.enno-download {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--enno-rand);
    border-radius: 3px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}

.enno-download:hover {
    border-color: var(--primary-color);
    background: var(--box-bg);
    transform: translateY(-2px);
}

.enno-download-icoon {
    flex-shrink: 0;
    color: var(--accent-color);
    margin-top: 2px;
}

.enno-download-tekst {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.enno-download-titel {
    font-family: var(--font-heading);
    font-size: 1.06rem;
    line-height: 1.3;
    color: var(--text-color);
}

.enno-download-toelichting {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #6f665b;
}

.enno-download-detail {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a09589;
    margin-top: 2px;
}

@media (max-width: 640px) {
    /* Dubbele klasse, net als de basisregel: anders wint die van deze override. */
    .enno-memoriam-tekst.enno-memoriam-tekst {
        text-align: left;
        font-size: 1.12rem;
        line-height: 1.7;
    }
    .enno-memoriam-tekst.enno-memoriam-tekst p + p { text-indent: 1.2em; }
    .enno-memoriam-tekst.heeft-kapitaal > p:first-of-type::first-letter { font-size: 3.3em; }
    .enno-downloads { grid-template-columns: 1fr; }
    .enno-scheidingsteken::before,
    .enno-scheidingsteken::after { width: 44px; }
}

/* Ingelijst beeld op een gewone Elementor-pagina (portret, plaathoes). */
.enno-ingelijst img {
    padding: 10px;
    background: #fffefb;
    border: 1px solid rgba(180, 165, 140, 0.5);
    box-shadow: 0 18px 34px -20px rgba(60, 50, 35, 0.55);
    box-sizing: border-box;
}

/* ==========================================================================
   Gedichten
   --------------------------------------------------------------------------
   Zelfde leesletter als de artikelen en de in memoriam-pagina, maar links
   uitgelijnd en met de regelval van het origineel: elke strofe is een
   alinea, de regels erin gescheiden met een regeleinde.
   ========================================================================== */
/* Klasse verdubbeld: de post-CSS van Elementor laadt later en zet zelf een
   letter op de teksteditor. Zonder deze verzwaring valt het gedicht terug op
   Inter. Zelfde reden als bij .enno-memoriam-tekst. */
.enno-gedicht.enno-gedicht {
    font-family: var(--font-lees);
    font-size: 1.2rem;
    line-height: 1.74;
    color: #26241f;
    text-align: left;
    hyphens: none;
}

.enno-gedicht p { margin: 0 0 1.4em; }
.enno-gedicht p:last-child { margin-bottom: 0; }
.enno-gedicht em { font-style: italic; }

/* Nummer boven een gedicht: Romeins, klein en terughoudend. */
.enno-gedicht-nr {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a09589;
}

/* ==========================================================================
   Onderschrift bij beeld
   ========================================================================== */
.enno-beeldtekst {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #6f665b;
}

.enno-beeldtekst em { font-style: italic; }

/* ==========================================================================
   Feitenlijst (het boek, in de zijkolom)
   ========================================================================== */
.enno-feiten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.5;
}

.enno-feiten dt {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a09589;
    padding-top: 2px;
    white-space: nowrap;
}

.enno-feiten dd {
    margin: 0;
    color: #4a453d;
}

/* ==========================================================================
   Bibliografie
   ========================================================================== */
.enno-bibliografie {
    column-count: 2;
    column-gap: 52px;
}

.enno-biblio-regel {
    display: flex;
    gap: 14px;
    align-items: baseline;
    break-inside: avoid;
    padding: 9px 0;
    border-bottom: 1px solid rgba(180, 165, 140, 0.28);
}

.enno-biblio-nr {
    flex: 0 0 1.8em;
    font-family: var(--font-body);
    font-size: 0.66rem;
    letter-spacing: 1px;
    color: #b3a899;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.enno-biblio-tekst { display: block; }

.enno-biblio-titel {
    font-family: var(--font-lees);
    font-size: 1.04rem;
    line-height: 1.45;
    color: #26241f;
}

.enno-biblio-jaar {
    display: inline-block;
    margin-left: 9px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    color: #8a8075;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.enno-biblio-legenda {
    margin: 22px 0 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: #8a8075;
}

/* ==========================================================================
   Manuscriptkaarten
   ========================================================================== */
.enno-manuscript {
    border: 1px solid var(--enno-rand);
    border-top: 2px solid var(--accent-color);
    background: #fffdf9;
}

.enno-manuscript-tekst {
    font-family: var(--font-body);
    font-size: 0.86rem;
    line-height: 1.65;
    color: #5c554b;
}

.enno-manuscript-tekst ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.enno-manuscript-tekst li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}

.enno-manuscript-tekst li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

@media (max-width: 900px) {
    .enno-bibliografie { column-count: 1; }
}

@media (max-width: 640px) {
    .enno-gedicht.enno-gedicht { font-size: 1.08rem; line-height: 1.68; }
    .enno-feiten { grid-template-columns: 1fr; gap: 2px 0; }
    .enno-feiten dd { margin-bottom: 10px; }
}

/* ==========================================================================
   Reisverslagen
   --------------------------------------------------------------------------
   Raster met fotoalbums. De filterknoppen zijn dezelfde als bij de aforismen;
   .enno-filterrij is de algemene variant van .enno-aforismen-filter zodat de
   rij ook elders gebruikt kan worden.

   Kolommen, foto-hoogte en tussenruimte staan in CSS-variabelen op de wortel.
   Elementor zet die per breedte via de widgetinstellingen; de bezoeker kan ze
   inline overschrijven met de knoppen. Een variabele kan zo overschreven
   worden, een gewone eigenschap niet, want de per-pagina CSS van Elementor
   weegt zwaarder dan dit bestand.
   ========================================================================== */
.enno-reisverslagen {
    --enno-reis-kolommen: 4;
    --enno-reis-hoogte: 240px;
    --enno-reis-ruimte: 24px;
}

.enno-filterrij {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--enno-rand);
}

/* Balk onder het jaarfilter: links de telling, rechts de knoppen. */
.enno-reizen-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 18px 0 26px;
}

.enno-reizen-telling {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent-color);
}

.enno-reizen-bediening {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.enno-keuze-label {
    font-family: var(--font-body);
    font-size: 0.66rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a09589;
}

.enno-keuze-label + .enno-keuze { margin-right: 8px; }

/* Segmentknoppen: één omlijning om de hele groep. */
.enno-keuze {
    display: inline-flex;
    border: 1px solid var(--enno-rand);
    border-radius: 2px;
    overflow: hidden;
    background: #fff;
}

button.enno-keuzeknop {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 12px;
    border: 0;
    border-left: 1px solid var(--enno-rand);
    border-radius: 0;
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.76rem;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

button.enno-keuzeknop:first-child { border-left: 0; }

button.enno-keuzeknop:hover:not(.is-actief):not(:disabled) {
    background-color: var(--accent-color);
    color: #fff;
}

/* Focus na een muisklik mag de hoverkleur niet vasthouden. */
button.enno-keuzeknop:focus:not(:hover):not(.is-actief) {
    background: #fff;
    color: var(--text-color);
}

button.enno-keuzeknop:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

button.enno-keuzeknop.is-actief,
button.enno-keuzeknop.is-actief:hover,
button.enno-keuzeknop.is-actief:focus {
    background-color: var(--primary-color);
    color: #fff;
}

button.enno-keuzeknop:disabled {
    opacity: 0.35;
    cursor: default;
}

.enno-keuzeknop svg { flex-shrink: 0; }

/* De kolomkiezer toont alleen het getal, de weergavekiezer alleen het icoon. */
.enno-keuze[data-enno-weergave] .enno-keuzeknop-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==========================================================================
   Het raster
   ========================================================================== */
.enno-reizen {
    display: grid;
    grid-template-columns: repeat(var(--enno-reis-kolommen), minmax(0, 1fr));
    gap: calc(var(--enno-reis-ruimte) + 4px) var(--enno-reis-ruimte);
}

/* De kolomkiezer van de bezoeker zet --enno-reis-keuze inline. Die geldt alleen
   op ruimere schermen; op een telefoon houdt de instelling uit Elementor de
   regie, anders levert een keuze van zes kolommen daar duimnagels op. */
@media (min-width: 768px) {
    .enno-reizen {
        grid-template-columns: repeat(var(--enno-reis-keuze, var(--enno-reis-kolommen)), minmax(0, 1fr));
    }
}

.enno-reis {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--enno-rand);
    background: #fff;
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.enno-reis:hover,
.enno-reis:focus-visible {
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 22px 34px -26px rgba(60, 50, 35, 0.55);
}

.enno-reis-beeld {
    position: relative;
    display: block;
    height: var(--enno-reis-hoogte);
    overflow: hidden;
    background: var(--box-bg);
}

/* Elementor zet .elementor img { height: auto } en dat weegt zwaarder dan een
   enkele klasse. Met de ouder erbij wint deze regel en vult de foto het vak. */
.enno-reis-beeld .enno-reis-foto {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.enno-reis:hover .enno-reis-foto { transform: scale(1.045); }

/* Pijltje dat aangeeft dat het album in een nieuw tabblad opent. */
.enno-reis-pijl {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-color);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.enno-reis:hover .enno-reis-pijl,
.enno-reis:focus-visible .enno-reis-pijl {
    opacity: 1;
    transform: translateY(0);
}

.enno-reis-tekst {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 18px;
}

.enno-reis-plaats {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    line-height: 1.32;
    color: var(--text-color);
    transition: color 0.25s ease;
}

.enno-reis:hover .enno-reis-plaats { color: var(--primary-color); }

.enno-reis-datum {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #a09589;
}

.enno-reizen-leeg {
    margin: 30px 0 0;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #7a7a7a;
}

/* ==========================================================================
   Weergave: mozaïek
   --------------------------------------------------------------------------
   Foto's vlak tegen elkaar, de plaatsnaam als opschrift over de onderkant.
   Altijd zichtbaar, niet alleen bij hover, want op een aanraakscherm bestaat
   hover niet.
   ========================================================================== */
[data-weergave="mozaiek"] .enno-reizen {
    gap: 6px;
}

[data-weergave="mozaiek"] .enno-reis {
    border: 0;
    background: none;
}

[data-weergave="mozaiek"] .enno-reis:hover {
    transform: none;
    box-shadow: none;
}

[data-weergave="mozaiek"] .enno-reis-beeld {
    height: calc(var(--enno-reis-hoogte) + 20px);
}

[data-weergave="mozaiek"] .enno-reis-tekst {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 2px;
    padding: 34px 14px 12px;
    background: linear-gradient(to top, rgba(22, 20, 16, 0.82), rgba(22, 20, 16, 0.45) 45%, rgba(22, 20, 16, 0));
    pointer-events: none;
}

[data-weergave="mozaiek"] .enno-reis-plaats {
    font-size: 0.98rem;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-weergave="mozaiek"] .enno-reis:hover .enno-reis-plaats { color: #fff; }

[data-weergave="mozaiek"] .enno-reis-datum {
    font-size: 0.62rem;
    letter-spacing: 1.4px;
    color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   Weergave: lijst
   --------------------------------------------------------------------------
   Eén regel per verslag met een kleine foto ervoor. Het aantal kolommen doet
   hier niet mee; de kolomkiezer wordt daarom uitgeschakeld.
   ========================================================================== */
[data-weergave="lijst"] .enno-reizen {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--enno-rand);
}

[data-weergave="lijst"] .enno-reis {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    border: 0;
    border-bottom: 1px solid var(--enno-rand);
    padding: 11px 6px;
}

[data-weergave="lijst"] .enno-reis:hover {
    transform: none;
    box-shadow: none;
    background: var(--box-bg);
}

[data-weergave="lijst"] .enno-reis-beeld {
    flex: 0 0 auto;
    width: 96px;
    height: 66px;
    border-radius: 2px;
}

[data-weergave="lijst"] .enno-reis-pijl {
    top: 50%;
    right: 8px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background: none;
    color: var(--accent-color);
}

[data-weergave="lijst"] .enno-reis-tekst {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: baseline;
    gap: 18px;
    padding: 0 40px 0 0;
}

[data-weergave="lijst"] .enno-reis-plaats { font-size: 1.06rem; }

[data-weergave="lijst"] .enno-reis-datum {
    margin-left: auto;
    white-space: nowrap;
}

/* ==========================================================================
   Smallere schermen
   --------------------------------------------------------------------------
   Kolommen en hoogte komen van de variabelen, die Elementor per breedte zet;
   hier alleen wat niet in een variabele past.
   ========================================================================== */
@media (max-width: 900px) {
    .enno-reizen-balk { padding: 16px 0 22px; }
    .enno-keuze-label { display: none; }
    .enno-keuze-label + .enno-keuze { margin-right: 0; }
}

@media (max-width: 640px) {
    .enno-filterrij { gap: 6px; padding-bottom: 18px; }
    .enno-reizen-balk { gap: 12px; padding: 14px 0 18px; }
    .enno-reis-tekst { padding: 12px 13px 14px; gap: 4px; }
    .enno-reis-plaats { font-size: 0.95rem; }
    .enno-reis-datum { font-size: 0.62rem; letter-spacing: 1.2px; }
    button.enno-keuzeknop { padding: 7px 10px; font-size: 0.72rem; }

    [data-weergave="lijst"] .enno-reis-beeld { width: 74px; height: 54px; }
    [data-weergave="lijst"] .enno-reis-tekst {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding-right: 28px;
    }
    [data-weergave="lijst"] .enno-reis-datum { margin-left: 0; }
}

/* ==========================================================================
   Leeslijst
   --------------------------------------------------------------------------
   Genummerde regels met een beeld links en de toelichting rechts. Breedte van
   het beeld en de tussenruimte staan in variabelen, die de widget per breedte
   zet; een variabele kan overschreven worden waar een gewone eigenschap van de
   per-pagina CSS van Elementor zou verliezen.
   ========================================================================== */
.enno-leeslijst {
    --enno-lezen-beeld: 150px;
    --enno-lezen-ruimte: 46px;
}

.enno-lezen {
    display: grid;
    grid-template-columns: 56px var(--enno-lezen-beeld) minmax(0, 1fr);
    align-items: start;
    gap: 0 28px;
    padding: var(--enno-lezen-ruimte) 0;
}

.enno-lezen + .enno-lezen {
    border-top: 1px solid var(--enno-rand);
}

.enno-lezen:first-child { padding-top: 0; }
.enno-lezen:last-child { padding-bottom: 0; }

/* Grote Playfair-cijfer in de linkermarge, als een kapittelnummer. */
.enno-lezen-nr {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    line-height: 1;
    color: #cbbfae;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-top: 2px;
}

/* Hetzelfde nummer, maar dan voor de titel; alleen op smalle schermen zichtbaar. */
.enno-lezen-nr-inline { display: none; }

.enno-lezen-beeld {
    margin: 0;
    padding: 8px;
    background: #fffefb;
    border: 1px solid rgba(180, 165, 140, 0.5);
    box-shadow: 0 16px 30px -20px rgba(60, 50, 35, 0.55);
    box-sizing: border-box;
}

/* Elementor zet .elementor img { height: auto; max-width: 100% } met een
   zwaardere selector dan een enkele klasse; vandaar de ouder erbij. */
.enno-lezen-beeld .enno-lezen-foto {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}

.enno-lezen-tekst { min-width: 0; }

.enno-lezen-titel {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 400;
    color: var(--text-color);
}

.enno-lezen-onder {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a09589;
}

.enno-lezen-body {
    font-family: var(--font-lees);
    font-size: 1.14rem;
    line-height: 1.68;
    color: #26241f;
}

.enno-lezen-body p { margin: 0 0 0.9em; }
.enno-lezen-body p:last-child { margin-bottom: 0; }
.enno-lezen-body em { font-style: italic; }

/* Verwijzing naar de bespreking, als losse regel onder de tekst. */
.enno-lezen-bron {
    margin: 16px 0 0 !important;
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6f665b;
}

.enno-lezen-bron a {
    color: var(--primary-color);
    border-bottom: 1px solid rgba(49, 63, 48, 0.25);
}

.enno-lezen-bron a:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.enno-lezen-bron a + a { margin-left: 14px; }

@media (max-width: 900px) {
    .enno-lezen {
        grid-template-columns: var(--enno-lezen-beeld) minmax(0, 1fr);
        gap: 0 22px;
    }
    .enno-lezen-nr { display: none; }
    .enno-lezen-nr-inline {
        display: inline;
        color: #cbbfae;
        margin-right: 6px;
    }
}

@media (max-width: 560px) {
    .enno-lezen {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .enno-lezen-beeld { width: var(--enno-lezen-beeld); }
    .enno-lezen-titel { font-size: 1.3rem; }
    .enno-lezen-body { font-size: 1.06rem; line-height: 1.62; }
}

/* ==========================================================================
   Rubriekkaarten
   ========================================================================== */
.enno-rubrieken {
    --enno-rubriek-kolommen: 3;
    display: grid;
    grid-template-columns: repeat(var(--enno-rubriek-kolommen), minmax(0, 1fr));
    gap: 16px;
}

.enno-rubriek {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 46px 22px 24px;
    border: 1px solid var(--enno-rand);
    border-left: 2px solid var(--accent-color);
    background: #fff;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.enno-rubriek:hover {
    background: var(--box-bg);
    transform: translateY(-2px);
}

.enno-rubriek-naam {
    font-family: var(--font-heading);
    font-size: 1.24rem;
    line-height: 1.25;
    color: var(--text-color);
}

.enno-rubriek-omschrijving {
    font-family: var(--font-body);
    font-size: 0.84rem;
    line-height: 1.5;
    color: #6f665b;
}

.enno-rubriek-aantal {
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #a09589;
}

.enno-rubriek-pijl {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -8px;
    color: var(--accent-color);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.enno-rubriek:hover .enno-rubriek-pijl {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 900px) {
    .enno-rubrieken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .enno-rubrieken { grid-template-columns: 1fr; gap: 12px; }
    .enno-rubriek { padding: 18px 42px 18px 20px; }
}

/* ==========================================================================
   Contactformulier
   ========================================================================== */
.enno-formulier { scroll-margin-top: 160px; }

.enno-formulier-melding {
    margin: 0 0 26px;
    padding: 14px 18px;
    border-left: 3px solid var(--primary-color);
    background: var(--box-bg);
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-color);
}

.enno-formulier-melding.is-fout {
    border-left-color: var(--accent-color);
}

.enno-formulier-melding a {
    color: var(--primary-color);
    border-bottom: 1px solid rgba(49, 63, 48, 0.3);
}

.enno-velden {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
}

.enno-veld {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 20px;
}

.enno-veld label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6f665b;
}

/* Reset.css zet border en padding op invoervelden met een attribuutselector;
   die weegt even zwaar als een klasse, dus staat de ouder hier erbij. */
.enno-veld input[type="text"],
.enno-veld input[type="email"],
.enno-veld select,
.enno-veld textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--enno-rand);
    border-radius: 2px;
    background: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.enno-veld textarea {
    min-height: 170px;
    resize: vertical;
    font-family: var(--font-lees);
    font-size: 1.06rem;
    line-height: 1.6;
}

.enno-veld input:focus,
.enno-veld select:focus,
.enno-veld textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(49, 63, 48, 0.08);
}

.enno-veld.heeft-aandacht label { color: var(--accent-color); }

.enno-veld.heeft-aandacht input,
.enno-veld.heeft-aandacht textarea {
    border-color: var(--accent-color);
    background: rgba(192, 120, 88, 0.04);
}

/* Het valstrikveld hoort niemand te zien, ook niet met een schermlezer die
   alleen de zichtbare volgorde volgt; vandaar buiten beeld in plaats van
   display: none, want dat vullen sommige robots juist wel in. */
.enno-valstrik {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.enno-formulier-voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin: 8px 0 0;
}

button.enno-formulier-knop {
    padding: 14px 30px;
    border: 1px solid var(--primary-color);
    border-radius: 3px;
    background-color: var(--primary-color);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

button.enno-formulier-knop:hover,
button.enno-formulier-knop:focus {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

.enno-formulier-klein {
    flex: 1 1 240px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: #8a8075;
}

/* ==========================================================================
   Contactgegevens in de zijkolom
   ========================================================================== */
.enno-contactregel {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--enno-rand);
}

.enno-contactregel:first-child { padding-top: 0; }
.enno-contactregel:last-child { border-bottom: 0; }

.enno-contactregel-icoon {
    flex-shrink: 0;
    color: var(--accent-color);
    margin-top: 2px;
}

.enno-contactregel-tekst {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #4a453d;
}

.enno-contactregel-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a09589;
}

.enno-contactregel a {
    color: var(--primary-color);
    border-bottom: 1px solid rgba(49, 63, 48, 0.25);
}

.enno-contactregel a:hover {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Lijst met waarvoor je iemand kunt bereiken. */
.enno-waarvoor {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.6;
    color: #4a453d;
}

.enno-waarvoor li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 10px;
}

.enno-waarvoor li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    background: var(--accent-color);
    transform: rotate(45deg);
}

@media (max-width: 640px) {
    .enno-velden { grid-template-columns: 1fr; gap: 0; }
    .enno-veld textarea { min-height: 140px; }
    button.enno-formulier-knop { width: 100%; }
}

/* ==========================================================================
   Portret in de inleiding op de homepage
   --------------------------------------------------------------------------
   Op een telefoon staat het beeld boven de tekst en werd het 468px hoog. Hier
   begrensd en bijgesneden vanaf de bovenkant, zodat een gezicht in beeld blijft
   als er een echte foto in komt. De klasse is verdubbeld omdat Elementor
   .elementor img { height: auto } met een zwaardere selector zet.
   ========================================================================== */
/* De kolom ernaast bepaalt de hoogte en rekt het beeld daarmee op: 306x448
   waar bij de verhouding 306x459 hoort. Twee procent uitrekken zie je in een
   gezicht meteen, een uitsnede van twee procent niet. Iets boven het midden,
   want daar zit bij een portret het hoofd. */
.enno-introbeeld.enno-introbeeld img {
    object-fit: cover;
    object-position: center 22%;
}

@media (max-width: 767px) {
    /* Alleen max-height: de pagina-CSS van Elementor zet height: 100% met drie
       klassen en wint daarvan, maar max-height zet die niet. */
    .enno-introbeeld.enno-introbeeld img {
        max-height: 270px;
    }
}

/* ==========================================================================
   Biografie: cijfers en onderwerpen
   ========================================================================== */
.enno-cijfers {
    display: grid;
    grid-template-columns: repeat(var(--enno-cijfer-kolommen, 5), minmax(0, 1fr));
    gap: 0;
}

.enno-cijfer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 4px 14px;
    text-align: center;
}

.enno-cijfer + .enno-cijfer {
    border-left: 1px solid rgba(180, 165, 140, 0.35);
}

.enno-cijfer-getal {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.enno-cijfer-label {
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a09589;
    line-height: 1.4;
}

/* Onderwerpen waarover hij zelf schreef, met een staafje op schaal. */
.enno-onderwerpen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.enno-onderwerp {
    display: grid;
    grid-template-columns: 1fr 42px;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.enno-onderwerp-naam {
    font-family: var(--font-lees);
    font-size: 1.08rem;
    color: #26241f;
    transition: color 0.25s ease;
}

.enno-onderwerp:hover .enno-onderwerp-naam { color: var(--accent-color); }

.enno-onderwerp-balk {
    grid-column: 1 / -1;
    height: 3px;
    background: rgba(180, 165, 140, 0.22);
    overflow: hidden;
}

.enno-onderwerp-balk i {
    display: block;
    height: 100%;
    background: var(--accent-color);
    opacity: 0.75;
}

.enno-onderwerp-aantal {
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    color: #a09589;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Kaarten onderaan: het werk van anderen dat hij uitgaf. */
.enno-naast {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 26px 26px;
    border: 1px solid var(--enno-rand);
    border-top: 2px solid var(--accent-color);
    background: #fffdf9;
    text-decoration: none;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.enno-naast:hover {
    background: var(--box-bg);
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .enno-cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 0; }
    .enno-cijfer:nth-child(3n+1) { border-left: 0; }
    .enno-cijfer-getal { font-size: 2.1rem; }
}

@media (max-width: 520px) {
    .enno-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enno-cijfer:nth-child(3n+1) { border-left: 1px solid rgba(180, 165, 140, 0.35); }
    .enno-cijfer:nth-child(odd) { border-left: 0; }
    .enno-cijfer-getal { font-size: 1.9rem; }
}

/* ==========================================================================
   Register bij het alfabet
   --------------------------------------------------------------------------
   Boven de letters een zoekveld, onder de letters een paneel dat per letter de
   schrijvers en boektitels toont. Het paneel verschijnt bij hover en bij een
   klik, en blijft staan zolang de muis erin is.
   ========================================================================== */
/* Verborgen is verborgen: [hidden] uit reset.css verliest het anders van de
   display-regels hieronder, die een elementnaam of extra klasse hebben. */
.enno-letterlijst [hidden] {
    display: none;
}

.enno-letterlijst {
    --enno-alfabet-breedte: 940px;
    position: relative;
    max-width: var(--enno-alfabet-breedte);
    container-type: inline-size;
}

.enno-letterlijst-balk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 16px;
}

/* ---------- zoekveld ---------- */
.enno-letterlijst-zoek {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 320px;
    max-width: 420px;
    border-bottom: 1px solid var(--enno-rand);
    transition: border-color 0.25s ease;
}

.enno-letterlijst-zoek:focus-within {
    border-bottom-color: var(--accent-color);
    box-shadow: inset 0 -1px 0 0 var(--accent-color);
    background: rgba(192, 120, 88, 0.05);
}

.enno-letterlijst-loep {
    display: flex;
    flex-shrink: 0;
    margin-right: 2px;
    color: var(--accent-color);
    opacity: 0.8;
}

/* Het attribuut in reset.css (input[type="search"]) weegt net zo zwaar als
   een klasse; zonder de elementnaam erbij houdt het veld zijn grijze kader. */
input[type="search"].enno-letterlijst-veld {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 9px 4px 9px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--font-lees);
    font-size: 1.04rem;
    line-height: 1.4;
    color: var(--text-color);
    outline: none;
}

/* Bij focus tekent reset.css een donkere rand; die hoort hier niet. */
input[type="search"].enno-letterlijst-veld:focus {
    border: 0;
    box-shadow: none;
}

.enno-letterlijst-veld::placeholder {
    color: #a09589;
    font-style: italic;
}

/* Het kruisje van de browser weg; we hebben een eigen wisknop. */
.enno-letterlijst-veld::-webkit-search-cancel-button { -webkit-appearance: none; }

button.enno-letterlijst-wissen {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(180, 165, 140, 0.2);
    color: #6f665b;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

button.enno-letterlijst-wissen:hover,
button.enno-letterlijst-wissen:focus {
    background: var(--accent-color);
    color: #fff;
}

.enno-letterlijst-telling {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a09589;
    white-space: nowrap;
}

/* ---------- het paneel ---------- */
.enno-letterlijst-paneel {
    position: absolute;
    z-index: 40;
    left: 0;
    width: 100%;
    margin-top: -1px;
    background: #fffdf9;
    border: 1px solid var(--enno-rand);
    border-top: 2px solid var(--accent-color);
    box-shadow: 0 26px 46px -28px rgba(60, 50, 35, 0.55);
}

.enno-letterlijst-kop {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 20px 11px;
    border-bottom: 1px solid rgba(180, 165, 140, 0.35);
}

.enno-letterlijst-hoofdletter {
    font-family: var(--font-heading);
    font-size: 1.32rem;
    line-height: 1;
    color: var(--accent-color);
}

.enno-letterlijst-aantal {
    flex: 1 1 auto;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a09589;
}

button.enno-letterlijst-sluit {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: #8a8075;
    cursor: pointer;
    align-self: center;
}

button.enno-letterlijst-sluit:hover,
button.enno-letterlijst-sluit:focus {
    background: var(--box-bg);
    color: var(--accent-color);
}

/* Twee kolommen met een scheiding; bij veel titels schuift het paneel. */
.enno-letterlijst-inhoud {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    align-content: start;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 0;
}

.enno-letterlijst-regel {
    display: block;
    min-width: 0;
    padding: 7px 20px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.enno-letterlijst-regel:hover,
.enno-letterlijst-regel:focus {
    background: var(--box-bg);
    border-left-color: var(--accent-color);
    outline: none;
}

/* Wie met het toetsenbord door de lijst loopt heeft meer nodig dan dezelfde
   tint als bij hover. */
.enno-letterlijst-regel:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.enno-letterlijst-regel-naam {
    display: block;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--primary-color);
}

.enno-letterlijst-regel-titel {
    display: block;
    margin-top: 1px;
    font-family: var(--font-lees);
    font-size: 1.02rem;
    line-height: 1.35;
    color: #26241f;
}

/* Wat het zoeken raakte. */
.enno-letterlijst-regel mark {
    background: rgba(192, 120, 88, 0.18);
    color: inherit;
    padding: 0 1px;
    border-radius: 1px;
}

.enno-letterlijst-leeg {
    margin: 0;
    padding: 18px 20px 22px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #7a7a7a;
}

/* Een letter waar het zoeken iets in vond. De omlijning is een inset-schaduw:
   .enno-letter heeft geen rand, dus border-color alleen tekent niets, en een
   echte rand zou de letters 2px opschuiven. */
.enno-letter.heeft-treffer {
    background: rgba(192, 120, 88, 0.14);
    box-shadow: inset 0 0 0 1px var(--accent-color);
    color: var(--accent-color);
}

/* De letter waarvan het paneel open staat. Het zwaardere .enno-register ervoor
   is nodig in de zijkolom van een bijdrage: article.css zet daar
   .enno-register .enno-letter.is-actief (0,3,0) op de eigen letter, en dat won
   het anders van deze status. */
.enno-letter.is-open,
.enno-register .enno-letter.is-open {
    background: var(--accent-color);
    color: #fff;
}

/* In de zijkolom van een bijdrage (article.css) is het maar 180px breed; een
   zoekveld past daar niet. De letters met hun paneel zijn daar genoeg. */
.enno-register .enno-letterlijst-balk {
    display: none;
}

/* Smal register, bijvoorbeeld naast een bijdrage: het paneel breekt uit de
   kolom en opent naar links, zodat titel en schrijver er nog in passen. */
@container (max-width: 560px) {
    .enno-letterlijst-paneel {
        left: auto;
        right: 0;
        width: max(100%, min(420px, 86vw));
    }
}

/* Deze staat hier en niet bij de andere 992px-regels bovenaan: daar zou de
   basisregel van .enno-letterlijst verderop in dit bestand hem overschrijven. */
@media (max-width: 992px) {
    .enno-letterlijst { --enno-alfabet-breedte: 100%; }
}

@media (max-width: 900px) {
    .enno-letterlijst-inhoud { grid-template-columns: 1fr; max-height: min(56vh, 420px); }
    .enno-letterlijst-balk { margin-bottom: 14px; }
}

@media (max-width: 640px) {
    .enno-letterlijst-zoek { flex-basis: 100%; max-width: 100%; }
    .enno-letterlijst-telling { display: none; }
    .enno-letterlijst-regel { padding: 8px 16px; }
    .enno-letterlijst-kop { padding: 11px 16px 9px; }
}

/* Portret op de kaart "Over Enno Nuy": daar is het beeld breed en laag, dus er
   wordt een band van ongeveer een kwart uit een staande foto gesneden. Op het
   midden valt die band op de hals; 32% van boven zet hem op de ogen.

   De !important is hier niet te vermijden: Elementor schrijft in de pagina-css
   .elementor-9 .elementor-element.elementor-element-hoverImg img met gewicht
   (0,3,1), en dat bestand laadt ná dit bestand. De keuzelijst van het widget
   zelf kent alleen hele hoeken als "top center", en die zet de band boven de
   ogen. */
.enno-kaartportret.enno-kaartportret img {
    object-fit: cover !important;
    object-position: center 32% !important;
}

/* Het jaarfilter zet hidden op de albums die weg moeten, maar .enno-reis heeft
   display: flex en dat weegt even zwaar als [hidden] uit reset.css — en het
   laadt later, dus het wint. Met de omhullende klasse erbij (0,2,0) verliest
   het niet meer. Zelfde valstrik als bij het kruisje in het letterregister. */
.enno-reizen [hidden] {
    display: none;
}

/* ==========================================================================
   Filter op jaar
   --------------------------------------------------------------------------
   Staat onder de letterbalk in de overzichten. Elk jaar met het aantal erbij,
   zodat je ziet wat je krijgt voor je klikt. De keuze gaat via de URL, dus hij
   werkt ook zonder JavaScript en je kunt hem bewaren of doorsturen.
   ========================================================================== */
.enno-jaren {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 26px;
    max-width: var(--enno-alfabet-breedte, 940px);
}

/* --------------------------------------------------------------------------
   De jaarbalk onder de letters
   --------------------------------------------------------------------------
   Op de overzichtspagina's staan de jaartallen in hetzelfde kader als het
   alfabet: het zijn twee manieren om dezelfde stapel door te snijden, en dan
   horen ze bij elkaar in plaats van als twee losse blokken onder elkaar. De
   letters laten hun onderrand los, het schap sluit het kader af, en tussen de
   twee staat een haarlijn.
   -------------------------------------------------------------------------- */
.enno-letterlijst.heeft-jaren .enno-alfabet {
    padding-bottom: 14px;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Hetzelfde stramien als het alfabet erboven: veertien kolommen, waarvan het
   label de eerste inneemt en de jaartallen de rest. Zo staat elk jaar onder een
   letter in plaats van ergens in een rij die halverwege afbreekt, en dat is het
   verschil tussen een balk en een net raster. */
.enno-jaarschap {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 6px;
    /* Op de regel van de jaartallen zelf, niet op het midden van een vakje dat
       ook nog een aantal onder zich heeft. */
    align-items: baseline;
    max-width: var(--enno-alfabet-breedte, 940px);
    padding: 10px 20px 14px;
    border: 1px solid var(--enno-rand);
    border-top: 1px solid rgba(180, 165, 140, 0.34);
    border-radius: 0 0 4px 4px;
    background: #fff;
}

.enno-jaarschap-label {
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a09589;
}

/* De nav houdt zijn eigen vak, maar deelt de kolommen van het schap; subgrid
   houdt de jaartallen daarmee recht onder de letters. Waar subgrid niet werkt
   komt de regel erboven te staan: dertien gelijke kolommen, wat op deze breedte
   op hetzelfde neerkomt. */
.enno-jaarschap .enno-jaren {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    grid-template-columns: subgrid;
    gap: 6px;
    margin: 0;
    max-width: none;
}

/* Binnen het kader hoeven de jaartallen geen eigen omlijning meer; net als de
   letters erboven staan ze vrij, en pas bij aanwijzen komt er een vlak.
   Het aantal gaat onder het jaartal staan: naast elkaar wordt "2018 219" bijna
   twee keer zo breed als "2017 1" en dan staat er van kolommen niets meer
   overeind. Onder elkaar heeft elk vakje dezelfde opbouw. */
.enno-jaarschap a.enno-jaar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 5px 2px 6px;
    border-color: transparent;
    border-radius: 4px;
    background: none;
}

.enno-jaarschap a.enno-jaar:hover,
.enno-jaarschap a.enno-jaar:focus-visible {
    border-color: transparent;
    background: var(--box-bg);
}

.enno-jaarschap a.enno-jaar.is-actief {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.enno-jaarschap .enno-jaar-getal { font-size: 0.78rem; line-height: 1.25; }
.enno-jaarschap .enno-jaar-aantal { font-size: 0.56rem; line-height: 1.2; }

/* Het alfabet gaat op deze breedtes naar negen en zeven kolommen; het schap
   loopt mee, zolang er ruimte blijft voor een jaartal met zijn aantal. */
@media (max-width: 992px) {
    .enno-jaarschap {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        max-width: 100%;
        padding: 8px 16px 12px;
    }

    .enno-jaarschap .enno-jaren {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-columns: subgrid;
    }
}

@media (max-width: 640px) {
    /* Zeven kolommen laat te weinig over voor "2026 23"; hier dus vier, met het
       label op zijn eigen regel erboven. */
    .enno-jaarschap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 10px 14px 14px;
    }

    .enno-jaarschap-label {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }

    .enno-jaarschap .enno-jaren {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
    }
}

/* Elementor zet zijn containers op een telefoon op flex-wrap: wrap. Een
   kolomcontainer die mag afbreken rekent zijn hoogte uit met de smalste stand
   van wat erin staat, en dat is bij twee balken met omslaande knoppen honderden
   pixels meer dan er werkelijk staat. Het gevolg was een wit gat van 345px
   onder het filterkader. Afbreken heeft hier geen zin: er zit maar één widget
   in. */
@media (max-width: 767px) {
    .e-con:has(> .elementor-element > .elementor-widget-container > .enno-letterlijst) {
        flex-wrap: nowrap;
    }
}

a.enno-jaar {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--enno-rand);
    border-radius: 3px;
    background: #fff;
    font-family: var(--font-body);
    text-decoration: none;
    color: var(--text-color);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

a.enno-jaar:hover,
a.enno-jaar:focus-visible {
    border-color: var(--accent-color);
    background: var(--box-bg);
    color: var(--primary-color);
}

a.enno-jaar:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

a.enno-jaar.is-actief {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.enno-jaar-getal {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* Het aantal blijft ondergeschikt aan het jaartal zelf. */
.enno-jaar-aantal {
    font-size: 0.68rem;
    font-weight: 600;
    color: #a09589;
}

a.enno-jaar.is-actief .enno-jaar-aantal {
    color: rgba(255, 255, 255, 0.7);
}

a.enno-jaar:hover .enno-jaar-aantal {
    color: var(--accent-color);
}

@media (max-width: 640px) {
    .enno-jaren { gap: 5px; margin-bottom: 20px; }
    a.enno-jaar { padding: 6px 9px; }
    .enno-jaar-getal { font-size: 0.8rem; }
}