/* ═══════════════════════════════════════════════════════════
   boudceysens.be — Patina in huisstijl
   De huisstijl van het certificaatmapje (drukbestand Ceysens_Certificaat_Brochure.pdf):
   nachtblauw, koper, de witte lijn en het gordijn.
   Het logo en het beeld van de voorkant komen rechtstreeks uit dat bestand (SVG en WebP).
   De kleuren zijn de CMYK-waarden van het mapje, omgezet met het profiel Coated FOGRA39.
   Saira op 125 % breedte vervangt Microgramma, de brede letter van het mapje.
   ═══════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Saira';
    src: url(../fonts/saira.woff2) format('woff2');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
    /* Het blauw van het mapje is C95 M70 Y40, met 40 % zwart bovenaan en 85 % onderaan */
    --blauw-boven: #193954;   /* K 40 */
    --blauw-onder: #041220;   /* K 85 */
    --nacht: #122B40;         /* K 60 */
    --nacht-diep: #0A1D2E;    /* K 75 */
    --koper: #C88818;         /* C25 M50 Y100 */
    --koper-donker: #835C0B;  /* zelfde koper met 45 % zwart, voor tekst op wit */
    --wit: #FFFFFF;
    --grijs: #A3AEBB;
    --papier: #FFFFFF;        /* de binnenkant van het mapje */
    --inkt: #1D1D1B;          /* K 100 */
    --inkt-2: #5B6168;

    --sans: 'Saira', 'Helvetica Neue', Arial, sans-serif;

    --wrap: 1320px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* Kleurrollen: donker is de standaard, .licht is een binnenpagina van het mapje.
   --accent is koper voor tekst (op wit donkerder, voor genoeg contrast), --vlak is koper
   voor knoppen, lijnen en grote titels, met --op-vlak als tekst erop. */
body,
.voet,
.nav-balk,
.lightbox {
    --kleur: var(--wit);
    --zacht: var(--grijs);
    --accent: var(--koper);
    --op-accent: var(--nacht);
    --vlak: var(--koper);
    --op-vlak: var(--nacht);
    --lijn: rgba(255, 255, 255, 0.16);
}
.licht {
    --kleur: var(--inkt);
    --zacht: var(--inkt-2);
    --accent: var(--koper-donker);
    --op-accent: var(--papier);
    --vlak: var(--koper);
    --op-vlak: var(--inkt);
    --lijn: rgba(29, 29, 27, 0.16);
    background: var(--papier);
    color: var(--kleur);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--nacht);
    color: var(--kleur);
    font: 400 1.0625rem/1.7 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--koper); color: var(--nacht); }

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

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    background: var(--koper);
    color: var(--nacht);
    padding: 0.6rem 1rem;
    z-index: 100;
}
.skip:focus { top: 1rem; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Typografie ── */
.breed {
    font-weight: 300;
    font-stretch: 125%;
    line-height: 1.1;
    letter-spacing: 0.005em;
}
h2.breed {
    font-size: clamp(2.3rem, 4.8vw, 4rem);
    color: var(--kleur);
}
.licht h2.breed { color: var(--zacht); }
.lead {
    font-size: clamp(1.125rem, 1.6vw, 1.3rem);
    line-height: 1.65;
    font-weight: 300;
    color: var(--kleur);
    max-width: 36em;
}
.muted { color: var(--zacht); }

.link {
    display: inline-block;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--lijn);
    padding-bottom: 0.15rem;
    transition: border-color 0.25s;
}
.link:hover { border-color: var(--accent); }

.knop {
    display: inline-block;
    padding: 0.95rem 1.8rem;
    border: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font: 500 0.9375rem/1 var(--sans);
    letter-spacing: 0.02em;
    background: transparent;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.knop:hover,
.knop-vol {
    background: var(--vlak);
    border-color: var(--vlak);
    color: var(--op-vlak);
}
.knop-vol:hover { background: var(--kleur); border-color: var(--kleur); color: var(--op-accent); }

/* ── Logo: het origineel uit het drukbestand (script "Ceysens" en "kunst") ── */
.logo { display: block; flex-shrink: 0; }
.logo img { height: 3.75rem; width: auto; }   /* in het menu enkel het script: "kunst" wordt daar te klein */

/* ═══ Navigatie ═══ */
.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding-block: 1.75rem;
}
.nav .wrap {
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.nav-links {
    display: flex;
    gap: 2.25rem;
    list-style: none;
    font-size: 0.9375rem;
    margin-left: auto;
}
.nav-links a {
    text-decoration: none;
    color: var(--zacht);
    transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a[aria-current] { color: var(--kleur); }

/* Op de galeriepagina: een effen balk boven het lichte papier */
.nav-balk {
    position: relative;
    background: var(--nacht);
    padding-block: 1.25rem;
}
.nav-balk .wrap { max-width: var(--wrap); }

/* ═══ Hero: de voorkant van het mapje ═══
   .hero-cover is de voorkant (431,96 × 623,16 pt), op de hoogte van het scherm. Het logo en
   het beeld staan erin op dezelfde plaats als in het drukbestand (percentages van de voorkant).
   De witte lijn (12 pt) loopt achter het beeld, door de opening ervan (op het mapje loopt ze
   ervoor, door het hoofd: bewust niet overgenomen). Links van de lijn loopt het blauwe vlak
   door tot de rand van het scherm, rechts het gordijn. */
.hero {
    --hero-h: max(min(100svh, 1150px), 720px);
    --cover-top: 3rem;
    --cover-h: calc(var(--hero-h) - var(--cover-top));
    --cover-b: calc(var(--cover-h) * 0.69318);              /* 431,96 / 623,16 */
    --lijn-x: 46%;                                          /* linkerrand van de lijn */
    --lijn-b: calc(var(--cover-b) * 0.02778);               /* 12 / 431,96 */
    --cover-x: calc(var(--lijn-x) - var(--cover-b) * 0.46152);
    --beeld-x: calc(var(--lijn-x) - var(--cover-b) * 0.2198);   /* linkerrand van het beeld */
    position: relative;
    min-height: var(--hero-h);
    overflow: hidden;
    background: linear-gradient(to bottom,
        var(--blauw-boven) calc(var(--cover-top) + var(--cover-h) * 0.27),
        var(--blauw-onder) calc(var(--cover-top) + var(--cover-h) * 0.98));
}
.hero-gordijn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--lijn-x) + var(--lijn-b) / 2);
    right: 0;
    background:
        linear-gradient(to bottom, rgba(4, 18, 32, 0) 60%, rgba(4, 18, 32, 0.6)),
        url(../img/gordijn.webp) left top / cover no-repeat,
        var(--blauw-onder);
}
.hero-lijn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--lijn-x);
    width: var(--lijn-b);
    background: var(--wit);
    box-shadow: 0.2em 0 0.5em rgba(2, 8, 15, 0.45);
    transform-origin: top;
    animation: lijn-trekken 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.15s both;
}
@keyframes lijn-trekken {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
.hero-cover {
    position: absolute;
    top: var(--cover-top);
    left: var(--cover-x);
    width: var(--cover-b);
    height: var(--cover-h);
}
.hero-logo {
    position: absolute;
    left: 6.075%;
    top: 6.818%;
    width: 82.836%;
    z-index: 2;
}
.hero-logo img { width: 100%; height: auto; }
.hero-beeld {
    position: absolute;
    left: 24.172%;
    top: 56.693%;
    width: 48.899%;
    height: auto;
    z-index: 1;
    animation: licht-aan 2.4s cubic-bezier(0.3, 0, 0.2, 1) 0.9s both;
}
@keyframes licht-aan {
    from { filter: brightness(0.05) saturate(0.4); }
    40% { filter: brightness(0.35) saturate(0.6); }
    to { filter: brightness(1) saturate(1); }
}
.hero-tekst {
    position: absolute;
    left: var(--gutter);
    bottom: 3.5rem;
    width: min(26rem, calc(var(--beeld-x) - var(--gutter) - 2.5rem));
    z-index: 3;
    color: var(--grijs);
    font-weight: 300;
}
.hero-tekst strong { color: var(--wit); font-weight: 400; }
.hero-acties {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.hero-logo,
.hero-tekst {
    animation: opkomen 1.2s ease-out 1.6s both;
}
@keyframes opkomen {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-lijn,
    .hero-beeld,
    .hero-logo,
    .hero-tekst { animation: none; }
}

/* Smal scherm: de voorkant op de volle breedte, de tekst eronder */
@media (max-width: 960px) {
    .hero {
        --cover-top: 4.5rem;
        --cover-b: min(100vw, 34rem);
        --cover-h: calc(var(--cover-b) * 1.44264);              /* 623,16 / 431,96 */
        --lijn-x: calc(50% - var(--cover-b) * 0.03848);         /* voorkant in het midden */
        min-height: 0;
        padding-top: calc(var(--cover-top) + var(--cover-h));
    }
    /* Het menu staat boven de voorkant, op het blauwe vlak */
    .hero-gordijn,
    .hero-lijn {
        top: var(--cover-top);
        bottom: auto;
        height: var(--cover-h);
    }
    .hero-tekst {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        max-width: calc(34rem + 2 * var(--gutter));
        margin-inline: auto;
        padding: 2.5rem var(--gutter) 3.5rem;
    }
}

/* ═══ Secties ═══ */
.sectie { padding-block: clamp(5rem, 10vw, 9rem); }
.sectie-diep { background: var(--nacht-diep); }

.kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
}
.kop p { max-width: 34em; }

/* ── Over Boud: het linkerluik van het certificaatmapje ── */
.over {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 7rem);
    align-items: start;
}
.over-titel {
    font-stretch: 125%;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1.1;
    color: var(--koper);
}
.over-titel span { display: block; font-weight: 300; }
.over-titel b { display: block; font-weight: 800; }
.citaat {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    font-stretch: 125%;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    line-height: 1.25;
    color: var(--wit);
    max-width: 13em;
}
.citaat-bron {
    margin-top: 1.25rem;
    color: var(--zacht);
    font-size: 0.9375rem;
    max-width: 26em;
}
.over-tekst p + p { margin-top: 1.25rem; }
.over-tekst .lead { margin-bottom: 1.5rem; }
.over-tekst p { max-width: 36em; }
.atelier {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 11rem));
    gap: 0.75rem;
}
.atelier img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
.atelier figcaption {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
    font-size: 0.875rem;
    color: var(--zacht);
    max-width: 24rem;
}

/* ── Collectie: de lichte "Gallerij"-pagina ── */
.zaal + .zaal { margin-top: clamp(4.5rem, 8vw, 7rem); }
.zaal-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.zaal-kop h3 {
    font-weight: 700;
    font-stretch: 125%;
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    line-height: 1.2;
    color: var(--vlak);   /* vet en minstens 20 px: koper op wit haalt 3:1 */
}
.plank {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--lijn) transparent;
}
.plank li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
/* De beelden staan op één plank: de lijn onder elke foto op dezelfde hoogte (--plank is de
   hoogste foto), de titels hangen eronder, ook als er een over twee regels loopt. */
.plank img {
    height: var(--h, 24rem);
    margin-top: calc(var(--plank, 0rem) - var(--h, 24rem));
    width: auto;
    max-width: none;
    border-bottom: 2px solid var(--vlak);
}
.plank figcaption {
    padding-top: 0.9rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--zacht);
    max-width: 16rem;
}
.plank figcaption b {
    display: block;
    font-weight: 500;
    color: var(--kleur);
    font-size: 1rem;
}

/* ── In opdracht ── */
.opdracht {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.opdracht-foto img {
    width: 100%;
    height: auto;
}
.opdracht-foto figcaption {
    margin-top: 0.9rem;
    font-size: 0.875rem;
    color: var(--zacht);
    max-width: 38em;
}
.opdracht-foto figcaption b { color: var(--kleur); font-weight: 500; }
.opdracht-lijst {
    list-style: none;
    margin-top: 2.5rem;
}
.opdracht-lijst li {
    padding-block: 1rem;
    border-top: 1px solid var(--lijn);
}
.opdracht-lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.opdracht-lijst .breed {
    display: block;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--kleur);
}
.opdracht-lijst span:not(.breed) {
    font-size: 0.9375rem;
    color: var(--zacht);
}
.awards {
    margin-top: clamp(4rem, 8vw, 6rem);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: end;
}
.awards img { width: 100%; height: auto; }
.awards figcaption {
    margin-top: 0.8rem;
    font-size: 0.875rem;
    color: var(--zacht);
}
.awards figcaption b { display: block; color: var(--kleur); font-weight: 500; font-size: 1rem; }

/* ── Gieterij ── */
.gieterij {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}
.gieterij-tekst .lead { margin-top: 2rem; }
.gieterij-tekst p + p { margin-top: 1.25rem; }
.gieterij-tekst .knop { margin-top: 2rem; }
.gietwerk {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    list-style: none;
}
.gietwerk li:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
.gietwerk img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 9 / 10;
}

/* ── Pers ── */
.pers {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}
.video {
    display: block;
    position: relative;
    text-decoration: none;
}
.video img { width: 100%; height: auto; }
.video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 29, 46, 0.88), rgba(10, 29, 46, 0) 55%);
}
.video-tekst {
    position: absolute;
    z-index: 1;
    left: 1.25rem;
    bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--wit);
}
.video-tekst::before {
    content: '';
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--koper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231B212C'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
    flex: none;
    transition: transform 0.25s;
}
.video:hover .video-tekst::before { transform: scale(1.06); }
.video-tekst span { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.pers-lijst { list-style: none; }
.pers-lijst li {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem;
    padding-block: 0.9rem;
    border-top: 1px solid var(--lijn);
}
.pers-lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.pers-lijst time { color: var(--zacht); font-size: 0.875rem; padding-top: 0.15rem; }

/* ── Bezoek ── */
.bezoek {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 7rem);
}
.adres {
    font-style: normal;
    font-size: 1.125rem;
    line-height: 1.6;
    margin-top: 2rem;
}
.adres a { text-decoration: none; border-bottom: 1px solid var(--lijn); }
.adres a:hover { border-color: var(--accent); }
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
    font-size: 0.9375rem;
}
.status::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--zacht);
}
.status[data-state='open']::before {
    background: var(--koper);
    box-shadow: 0 0 0 4px rgba(200, 136, 24, 0.25);
}
.uren {
    margin-top: 1.5rem;
    border-collapse: collapse;
    width: 100%;
    max-width: 26rem;
    font-size: 0.9375rem;
}
.uren caption {
    text-align: left;
    font-size: 0.875rem;
    padding-bottom: 0.25rem;
}
.uren th,
.uren td {
    text-align: left;
    font-weight: 400;
    padding: 0.55rem 0;
    border-top: 1px solid var(--lijn);
}
.uren td { text-align: right; color: var(--zacht); }
.uren tr[aria-current] th,
.uren tr[aria-current] td { color: var(--accent); }
.bezoek .knop { margin-top: 2rem; }

.form { display: grid; gap: 1.5rem; }
.form h3 {
    font-weight: 300;
    font-stretch: 125%;
    font-size: 1.75rem;
    line-height: 1.15;
}
.veld { display: grid; gap: 0.5rem; }
.veld label { font-size: 0.875rem; color: var(--zacht); }
.veld input,
.veld textarea {
    font: inherit;
    color: var(--kleur);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--lijn);
    padding: 0.6rem 0;
    transition: border-color 0.2s;
}
.veld textarea { min-height: 8rem; resize: vertical; }
.veld input:focus,
.veld textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.form .knop { justify-self: start; }
.veld label span { opacity: 0.75; }
.veld [aria-invalid='true'] { border-color: #E5604A; }
.form-status {
    border-left: 2px solid var(--accent);
    padding: 0.4rem 0 0.4rem 1rem;
    font-size: 0.9375rem;
}
.form-status.is-fout { border-color: #E5604A; }
.form-noot { font-size: 0.8125rem; color: var(--zacht); }
.form-noot a { color: inherit; }
.form button[disabled] { opacity: 0.6; cursor: progress; }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tijdelijke mededeling bij de openingsuren, in te stellen in het beheer */
.mededeling {
    margin-top: 2rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--accent);
    color: var(--kleur);
    max-width: 26rem;
    font-size: 0.9375rem;
}

/* ── Voet ── */
.voet {
    background: var(--nacht-diep);
    color: var(--zacht);
    padding-block: 4rem 6.5rem;
}
.voet .wrap {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
}
.voet .logo img { height: 6.5rem; }
.voet ul { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.voet a { text-decoration: none; }
.voet ul a:hover { color: var(--kleur); }

/* ═══ Galeriepagina ═══ */
.galerie-kop {
    padding-top: clamp(3.5rem, 7vw, 6rem);
    padding-bottom: 3rem;
}
.galerie-kop h1 {
    font-weight: 300;
    font-stretch: 125%;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    line-height: 1;
    color: var(--zacht);
}
.galerie-kop p { margin-top: 1.25rem; }
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
}
.filters a {
    font: 400 0.9375rem/1 var(--sans);
    text-decoration: none;
    color: var(--zacht);
    background: transparent;
    border: 1px solid var(--lijn);
    padding: 0.7rem 1.1rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.filters a:hover { color: var(--kleur); border-color: var(--accent); }
.filters a[aria-current] {
    background: var(--vlak);
    border-color: var(--vlak);
    color: var(--op-vlak);
}
.teller { margin-top: 1.5rem; color: var(--zacht); font-size: 0.9375rem; }
.raster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;   /* alle foto's even hoog: zo staan de lijnen gelijk, ook bij een lange titel */
    gap: 3rem clamp(1.25rem, 2.5vw, 2.5rem);
    padding-bottom: 8rem;
}
.work { width: min-content; }
.work-open {
    display: block;
    border: 0;
    padding: 0;
    background: rgba(29, 29, 27, 0.05);
    cursor: zoom-in;
}
.work-open img {
    height: clamp(11rem, 19vw, 16rem);
    width: auto;
    max-width: none;
    aspect-ratio: var(--ratio);
    border-bottom: 2px solid var(--vlak);
    transition: filter 0.3s;
}
.work-open:hover img { filter: brightness(1.05); }
.work figcaption { padding-top: 0.75rem; font-size: 0.875rem; line-height: 1.45; min-width: 8rem; }
.work-title { display: block; color: var(--kleur); font-size: 1rem; font-weight: 500; }
.work-meta { display: block; color: var(--zacht); }
.galerie-fout { color: var(--zacht); }

.lightbox {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    background: rgba(10, 29, 46, 0.97);
    color: var(--kleur);
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }
.lb-binnen {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 22rem;
    gap: 2rem;
    padding: 2rem;
}
.lb-img {
    width: 100%;
    height: calc(100vh - 4rem);
    object-fit: contain;
}
.lb-info {
    align-self: end;
    display: grid;
    gap: 0.75rem;
    padding-bottom: 1rem;
}
.lb-title {
    font-weight: 300;
    font-stretch: 125%;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--accent);
}
.lb-text { color: var(--zacht); font-size: 0.9375rem; }
.lb-text:empty { display: none; }
.lb-pos { color: var(--zacht); font-size: 0.875rem; }
.lb-knoppen { display: flex; gap: 0.5rem; margin-top: 1rem; }
.lb-knoppen button {
    font: 400 0.9375rem/1 var(--sans);
    color: var(--kleur);
    background: transparent;
    border: 1px solid var(--lijn);
    padding: 0.75rem 1rem;
    cursor: pointer;
}
.lb-knoppen button:hover { border-color: var(--accent); color: var(--accent); }
.lb-close { margin-left: auto; }

/* ═══ Tekstpagina's: privacy, niet gevonden ═══ */
.tekstpagina {
    max-width: calc(44rem + 2 * var(--gutter));
    padding-block: clamp(3.5rem, 7vw, 6rem) 8rem;
}
.tekstpagina h1 {
    font-weight: 300;
    font-stretch: 125%;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.05;
    color: var(--zacht);
    margin-bottom: 2rem;
}
.tekstpagina h2 {
    font-weight: 700;
    font-stretch: 125%;
    font-size: 1.15rem;
    color: var(--accent);
    margin: 2.5rem 0 0.6rem;
}
.tekstpagina p + p { margin-top: 1rem; }
.tekstpagina a { color: var(--accent); }

/* ═══ Responsief ═══ */
@media (max-width: 1000px) {
    .over,
    .opdracht,
    .gieterij,
    .pers,
    .bezoek { grid-template-columns: 1fr; }
    .nav-links { gap: 1.25rem; }
}

@media (max-width: 760px) {
    .nav .wrap { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .nav-links {
        width: 100%;
        overflow-x: auto;
        gap: 1.25rem;
        padding-bottom: 0.25rem;
        margin-left: 0;
    }
    .nav-links a { white-space: nowrap; }
    .nav-balk .logo img { height: 3.25rem; }

    .awards { grid-template-columns: 1fr 1fr; }
    .awards figure:last-child { display: none; }
    .lb-binnen { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 1rem; }
    .lb-img { height: 62vh; }
    .lb-title { font-size: 1.6rem; }
    .pers-lijst li { grid-template-columns: 1fr; gap: 0.15rem; }
}