/* =====================================================
   Basis — één scherm hoog waar het past, en anders
   schuift de pagina netjes door in plaats van af te snijden
   ===================================================== */

:root {
    --nacht:  #0D0D10;
    --krijt:  #F3F0EA;
    --grijs:  #9C978D;
    --accent: #FFB020;                 /* komt uit config.php */
    --lijn:   rgba(243, 240, 234, .14);
    --blauw:  #1298BD;
    --blauw-diep: #0B5F76;                 /* tekst op wit */

    /* Sluier over de achtergrondfoto. Bovenin bijna doorzichtig, zodat de
       zonsondergang blijft branden; naar onderen dieper, zodat de agenda
       en de voettekst rustig blijven staan. */
    --sluier-boven:  rgba(13, 13, 16, .16);
    --sluier-midden: rgba(16, 12, 14, .34);
    --sluier-onder:  rgba(13, 13, 16, .56);

    --display: 'Syne', 'Trebuchet MS', sans-serif;
    --tekst:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;
    --sier:    'Fraunces', Georgia, 'Times New Roman', serif;

    --wrap: 720px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;                /* het brede logo mag niet horizontaal duwen */
}

body {
    color: var(--krijt);
    font-family: var(--tekst);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /* De enige achtergrond: de foto, met een verloopsluier erover. */
    background:
        linear-gradient(180deg,
            var(--sluier-boven)  0%,
            var(--sluier-midden) 42%,
            var(--sluier-onder)  100%),
        url('../images/background.png') center / cover no-repeat fixed,
        var(--nacht);
}

/* Op een telefoon staat de foto rechtop in beeld in plaats van liggend;
   background12.png is daarop bijgesneden. Zelfde sluier eroverheen. */
@media (max-width: 620px) {
    body {
        background:
            linear-gradient(180deg,
                var(--sluier-boven)  0%,
                var(--sluier-midden) 42%,
                var(--sluier-onder)  100%),
            url('../images/background12.png') center / cover no-repeat fixed,
            var(--nacht);
    }
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.scherm {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* =====================================================
   Taalschakelaar
   ===================================================== */

.talen {
    position: absolute;
    top: 14px;
    right: 20px;
    z-index: 5;
    display: flex;
    gap: 6px;
}

.vlag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 5px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: rgba(20, 20, 25, .6);
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-decoration: none;
    color: var(--grijs);
    opacity: .55;
    transition: opacity .2s ease, color .2s ease, border-color .2s ease;
}

.vlag svg {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.vlag:hover { opacity: .85; color: var(--krijt); }

.vlag.is-aan {
    opacity: 1;
    color: var(--krijt);
    border-color: rgba(243, 240, 234, .3);
}

/* =====================================================
   Introtekst
   ===================================================== */

.intro {
    max-width: 560px;
    margin: clamp(8px, 1.4vh, 16px) auto 0;
}

/* De eerste alinea zet de sfeer. De tweede is de praktische opvolger
   en blijft in de broodletter staan. */
.intro p:first-child {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1rem, .8rem + .8vw, 1.45rem);
    line-height: 1.16;
    letter-spacing: -.018em;
    text-wrap: balance;
    color: var(--krijt);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

/* Het accentwoord uit includes/taal.php */
.intro em {
    font-style: normal;
    color: var(--accent);
}

.intro p + p {
    max-width: 500px;
    margin: 14px auto 0;
    font-size: .78rem;
    line-height: 1.55;
    color: rgba(243, 240, 234, .72);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

/* =====================================================
   Logo — breekt uit de kolom, twee keer zo groot als eerst
   ===================================================== */

.kop {
    flex: 0 0 auto;
    text-align: center;
    padding: clamp(10px, 1.8vh, 24px) 0 clamp(8px, 1.4vh, 16px);
}

/* Het logo krijgt een gouden lichtstreep die van links naar rechts loopt.
   De gloed is met een masker uitgesneden op de vorm van het logo, dus hij
   volgt de letters en niet het rechthoekige kader eromheen. */
.kop__merk {
    position: relative;
    display: block;
    width: min(1240px, 96vw);
    margin-left: 50%;                  /* uit de 720px-kolom stappen */
    transform: translateX(-50%);
    filter: drop-shadow(0 0 30px rgba(255, 176, 32, .22));
}

.kop__glans {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask: url('../images/logo.png') center / contain no-repeat;
    mask: url('../images/logo.png') center / contain no-repeat;
}

.kop__glans::before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 42%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 214, 138, .35) 30%,
        rgba(255, 246, 224, .95) 50%,
        rgba(255, 214, 138, .35) 70%,
        transparent 100%);
    filter: blur(7px);
    transform: translateX(-170%);
    animation: glans 4s cubic-bezier(.5, 0, .5, 1) infinite;
}

@keyframes glans {
    0%        { transform: translateX(-170%); }
    72%, 100% { transform: translateX(340%); }
}

/* Zonder mask-ondersteuning zou de gloed als blok over het logo lopen. */
@supports not ((-webkit-mask: url('')) or (mask: url(''))) {
    .kop__glans { display: none; }
}

.kop__logo {
    width: 100%;
    max-height: clamp(130px, 40vh, 440px);
    object-fit: contain;
    height: auto;
    margin: 0 auto;
}

.kop__tagline {
    margin: 12px auto 0;
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}

/* =====================================================
   Agenda
   ===================================================== */

.agenda {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lijst {
    list-style: none;
    margin: 0;
    padding: 0 2px 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leeg {
    padding: 26px 0;
    color: var(--grijs);
    text-align: center;
}

/* Kaartje bij de deur: geperforeerde rand tussen datum en tekst */
.evt {
    --stub: 78px;
    display: grid;
    grid-template-columns: var(--stub) 1fr auto;
    align-items: center;
    gap: 0 18px;
    background: rgba(13, 13, 16, .72);
    border: 1px solid transparent;
    border-radius: 10px;
    padding-right: 20px;
    transition: background .2s ease, border-color .2s ease;
}

.evt:hover {
    background: rgba(24, 24, 30, .86);
    border-color: transparent;
}

@supports (mask-composite: intersect) {
    .evt {
        border: 0;
        mask-image:
            radial-gradient(circle 8px at var(--stub) 0, transparent 98%, #000 100%),
            radial-gradient(circle 8px at var(--stub) 100%, transparent 98%, #000 100%);
        mask-composite: intersect;
    }
}

.evt__datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border-right: 1px dashed rgba(243, 240, 234, .28);
    text-align: center;
}

.evt__dag {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--krijt);
}

.evt__maand {
    margin-top: 3px;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .18em;
    color: var(--grijs);
}

.evt__body { padding: 13px 0; min-width: 0; }

.evt__titel {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.evt__meta {
    margin: 4px 0 0;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--grijs);
}

/* De ticketlink is zelf een kaartje: gouden rand, geperforeerd icoon.
   Dit is de enige knopvorm op de pagina, dus verder blijft alles rustig. */
.evt__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px 9px 13px;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--nacht);
    font-family: var(--display);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: -.005em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.evt__link:hover {
    background: #E6E2D9;
    border-color: #E6E2D9;
    color: var(--nacht);
}

.evt__ticket {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
}

/* Kleine kanteling: het kaartje wordt aangereikt. */
.evt__link:hover .evt__ticket { transform: rotate(-8deg) scale(1.06); }

/* =====================================================
   Voettekst
   ===================================================== */

.voet {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
    padding: 13px 0 14px;
    border-top: 1px solid var(--lijn);
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grijs);
}

/* De bovenste regel: merk, contact en jaartal naast elkaar. */
.voet__rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

/* Eigen regel eronder: wie de site gemaakt heeft. */
.voet__maker {
    margin: 0;
    text-align: center;
    font-size: .92em;
    color: rgba(156, 151, 141, .72);
}

.voet__maker a {
    text-transform: none;
    letter-spacing: .06em;
    text-decoration: none;
    color: var(--grijs);
    transition: color .2s ease;
}

.voet__maker a:hover { color: var(--krijt); }

/* Links in de voet staat het merk zelf, als link naar Instagram. */
.voet__merk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--grijs);
    transition: color .2s ease;
}

.voet__merk:hover { color: var(--krijt); }

.voet__merk svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.voet__links {
    display: flex;
    align-items: center;
    gap: 18px;
}

.voet__links a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--grijs);
    transition: color .2s ease;
}

.voet__links a:hover { color: var(--accent); }

.voet__links svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.voet__jaar { font-variant-numeric: tabular-nums; }

/* =====================================================
   Klein scherm
   ===================================================== */

@media (max-width: 620px) {
    .voet {
        font-size: .6rem;
        gap: 7px;
        padding: 11px 0 13px;
    }
    .voet__rij { gap: 10px; }
    .voet__links { gap: 12px; }
    .voet__jaar { display: none; }
}

@media (max-width: 560px) {
    .evt {
        --stub: 64px;
        grid-template-columns: var(--stub) 1fr;
        padding-right: 16px;
    }
    .evt__link {
        grid-column: 2;
        justify-self: start;
        margin: 0 0 13px;
        padding: 8px 13px 8px 11px;
        font-size: .8rem;
    }
    .evt__ticket { width: 17px; height: 17px; }
    .evt__body { padding-bottom: 6px; }
    .evt__dag { font-size: 1.45rem; }
    .kop__tagline { font-size: .82rem; letter-spacing: .26em; }
}

@media (prefers-reduced-motion: reduce) {
    .evt, .evt__link, .evt__ticket { transition: none; }
    .evt__link:hover .evt__ticket { transform: none; }
    .kop__glans::before { animation: none; opacity: 0; }
}

/* =====================================================
   Twee frames naast elkaar, elk met een eigen film
   ===================================================== */

.posts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 460px;
    margin: clamp(14px, 2.4vh, 26px) auto 0;
}

.post {
    background: rgba(20, 20, 25, .82);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
}

.post__kop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

/* De hele kop is de link naar het profiel. */
.post__profiel {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.post__profiel:hover .post__naam { color: var(--accent); }

.post__avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 0deg, #F9CE34, #EE2A7B, #6228D7, #F9CE34);
}

.post__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--nacht);
}

.post__naam {
    font-size: .78rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease;
}

.post__beeld {
    position: relative;
    height: clamp(90px, 15vh, 170px);
    background: #000;
}

.post__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post__acties {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 0;
}

.knopje {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    color: var(--krijt);
    transition: transform .15s ease, color .2s ease;
}

.knopje svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .9;
}

.knopje:active { transform: scale(.86); }

/* Plop: drie keer opveren bij een klik */
.knopje.is-plop svg { animation: plop .72s cubic-bezier(.3, 1.6, .4, 1); }

@keyframes plop {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.5); }
    28%  { transform: scale(.82); }
    44%  { transform: scale(1.28); }
    58%  { transform: scale(.9); }
    74%  { transform: scale(1.13); }
    88%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

.knopje.is-aan { color: #FF3B5C; }
.knopje.is-aan svg { fill: currentColor; opacity: 1; }

.knopje.duim.is-aan { color: var(--accent); }

.post__telling {
    margin-left: auto;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--grijs);
}

/* Het hart dat opbloeit bij een dubbelklik op het beeld */
.post__klap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
}

.post__klap svg {
    width: 72px;
    height: 72px;
    fill: #FFF;
    stroke: none;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5));
}

.post__klap.is-aan { animation: klap .9s ease-out; }

@keyframes klap {
    0%   { opacity: 0; transform: scale(.4); }
    18%  { opacity: 1; transform: scale(1.15); }
    32%  { transform: scale(.95); }
    45%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

.post__reacties {
    list-style: none;
    margin: 0;
    padding: 6px 10px 10px;
    font-size: .74rem;
    line-height: 1.45;
    color: rgba(243, 240, 234, .78);
}

.post__reacties li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post__reacties b {
    font-weight: 500;
    color: var(--krijt);
}

@media (max-width: 480px) {
    .posts { gap: 10px; }
    .post__kop { padding: 6px 8px; }
    .post__naam { font-size: .7rem; }
    .post__acties { padding: 6px 8px 0; gap: 6px; }
    .knopje svg { width: 17px; height: 17px; }
    .post__reacties { padding: 4px 8px 8px; font-size: .68rem; }
    .post__klap svg { width: 54px; height: 54px; }
}

@media (max-width: 480px) {
    .intro { max-width: 100%; }
    .intro p + p { font-size: .71rem; }
    .talen { top: 10px; right: 14px; gap: 4px; }
}
/* =====================================================
   Fotoboek — album.php
   Zelfde donkere kaartjes als de agenda; alleen de vorm
   verschilt, want hier is het beeld de inhoud.
   ===================================================== */

.albumkop {
    flex: 0 0 auto;
    padding: 26px 0 18px;
}

.albumkop__terug {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--grijs);
    transition: color .2s ease;
}

.albumkop__terug:hover { color: var(--krijt); }

.albumkop__titel {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.7rem, 5.5vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}

.albumkop__meta {
    margin: 8px 0 0;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grijs);
}

.albumkop__tekst {
    margin: 12px 0 0;
    max-width: 560px;
    font-family: var(--sier);
    color: rgba(243, 240, 234, .82);
}

.albuminhoud {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 8px;
}

/* ---------- Overzicht ---------- */

.albumlijst {
    list-style: none;
    margin: 0;
    padding: 0 2px 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.albumkaart {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: stretch;
    gap: 0 18px;
    background: rgba(16, 16, 21, .84);
    border: 1px solid var(--lijn);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.albumkaart:hover {
    background: rgba(28, 28, 34, .86);
    border-color: rgba(243, 240, 234, .28);
}

.albumkaart__beeld {
    display: block;
    background: rgba(243, 240, 234, .06);
    overflow: hidden;
}

.albumkaart__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.albumkaart:hover .albumkaart__beeld img { transform: scale(1.05); }

.albumkaart__tekst {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 16px 20px 16px 0;
    min-width: 0;
}

.albumkaart__titel {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: -.01em;
}

.albumkaart__meta {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--grijs);
}

/* ---------- Foto's: polaroids ---------- */

.fotos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 2px 4px;
}

/* Het lijstje is de link zelf: wit vlak met een brede onderrand, zoals
   een polaroid waar je op schrijft. Die rand kost hoogte — een polaroid
   is ongeveer 130% van de foto erin — dus de foto's worden bij vier
   kolommen kleiner dan ze bij drie zonder rand zouden zijn. */
.foto {
    display: block;
    padding: 8px 8px 30px;
    background: var(--krijt);
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transition: transform .2s ease, box-shadow .2s ease;
}

.foto:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .55);
}

.foto img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: rgba(13, 13, 16, .08);
}

/* ---------- Vergroten ---------- */

.vergroot {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}

.vergroot::backdrop { background: rgba(8, 8, 11, .92); }

.vergroot img {
    max-width: calc(100% - 96px);
    max-height: calc(100% - 64px);
    margin: auto;
    position: absolute;
    inset: 0;
    border-radius: 6px;
    object-fit: contain;
}

.vergroot__dicht,
.vergroot__pijl {
    position: absolute;
    z-index: 2;
    border: 1px solid var(--lijn);
    border-radius: 50%;
    background: rgba(16, 16, 21, .8);
    color: var(--krijt);
    cursor: pointer;
    line-height: 1;
    transition: background .2s ease, border-color .2s ease;
}

.vergroot__dicht:hover,
.vergroot__pijl:hover {
    background: rgba(40, 40, 48, .9);
    border-color: rgba(243, 240, 234, .32);
}

.vergroot__dicht {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
}

.vergroot__pijl {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    font-size: 1.7rem;
}

.vergroot__pijl--vorige   { left: 12px; }
.vergroot__pijl--volgende { right: 12px; }

/* ---------- Klein scherm ---------- */

@media (max-width: 560px) {
    .albumkaart { grid-template-columns: 76px 1fr; gap: 0 14px; }
    .vergroot img { max-width: calc(100% - 24px); }
    .vergroot__pijl { width: 38px; height: 38px; }
    .vergroot__pijl--vorige   { left: 6px; }
    .vergroot__pijl--volgende { right: 6px; }
}

/* =====================================================
   Doorstapje naar het fotoboek — index.php
   ===================================================== */

/* Gestippelde rand, geen vol vlak: de agendakaartjes zijn de inhoud van
   die pagina en een dichte knop eronder zou daarmee concurreren. Zo
   leest het als 'er is hier nog meer'. */
.naaralbum {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 2px 0;
    padding: 13px 16px;
    border: 1px dashed rgba(243, 240, 234, .28);
    border-radius: 10px;
    text-decoration: none;
    color: var(--krijt);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: border-color .2s ease, background .2s ease;
}

.naaralbum:hover {
    border-color: rgba(243, 240, 234, .5);
    background: rgba(16, 16, 21, .6);
}

.naaralbum svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.naaralbum__pijl {
    color: var(--grijs);
    transition: transform .2s ease, color .2s ease;
}

.naaralbum:hover .naaralbum__pijl {
    color: var(--krijt);
    transform: translateX(3px);
}

@media (max-width: 430px) {
    /* Op smalle schermen past de zin niet meer naast beide tekens. */
    .naaralbum { font-size: .58rem; gap: 8px; padding: 12px 10px; }
    .naaralbum__pijl { display: none; }
}

/* ---------- Donkere pagina ---------- */

/* De body van de site laadt background.png; op het fotoboek zou die foto
   met de foto's in het album gaan concurreren. Vandaar een klasse op de
   body in plaats van een aanpassing aan de body-regel zelf: index.php
   blijft daardoor ongemoeid. */
body.donker {
    background: var(--nacht);
}

/* ---------- Klein scherm ---------- */

@media (max-width: 860px) {
    .fotos { grid-template-columns: repeat(3, 1fr); gap: 13px; }
}

@media (max-width: 560px) {
    /* Vier polaroids naast elkaar op een telefoon wordt per stuk 80 pixels;
       dan zie je niet meer wat erop staat. */
    .fotos { grid-template-columns: repeat(2, 1fr); gap: 11px; }
    .foto { padding: 6px 6px 22px; }
}