/* OVER MIJ — De enige pagina met echt lange tekst, dus de enige pagina waar de leestekst in IBM Plex Serif staat in plaats van Space Grotesk. Koppen en labels blijven schreefloos, zoals op de rest van de site. Wil je dat toch niet: haal de font-family in .overmij-tekst p, .overmij-lede en .overmij-toekomst-box p weg. Geen scroll-animaties. Dit is een leespagina. */

/* PAGINATOKENS — Aanvulling op shared.css, alleen voor deze pagina. */

:root {
    --over-breed: min(calc(100% - (2 * var(--site-gutter))), 1080px);
    --over-lees: 62ch;
    --over-lijn: rgba(255, 255, 255, 0.075);
    --over-lijn-zacht: rgba(255, 255, 255, 0.05);
    --over-tekst: rgba(255, 255, 255, 0.7);
    --over-ruimte: clamp(58px, 7vw, 92px);
}

.overmij-hero,
.overmij-verhaal,
.overmij-staat,
.overmij-toekomst,
.overmij-slot {
    position: relative;
    z-index: 2;
    font-family: var(--avdb-font-sans), sans-serif;
}

/* Het kleine woord boven een kop. Eén keer op de hele pagina. */

.overmij-eyebrow {
    display: block;
    margin-bottom: 15px;
    font-family: var(--avdb-font-mono), monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: rgba(246, 212, 81, 0.55);
}

/* OPENING — De kop staat vol op de breedte, de tekst begint op dezelfde kolom als de blokken eronder. Dat scheelt een tweede inleiding. */

.overmij-hero {
    padding-top: clamp(74px, 11vw, 138px);
    padding-bottom: clamp(50px, 6vw, 80px);
}

.overmij-hero-box {
    width: var(--over-breed);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.overmij-hero h1 {
    max-width: 18ch;
    margin-inline: auto;
    font-size: clamp(34px, 5vw, 62px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1.9px;
    text-align: center;
    color: var(--avdb-text);
}

.overmij-portret {
    width: clamp(176px, 17vw, 224px);
    margin-top: clamp(30px, 4vw, 48px);
}

.overmij-portret-beeld {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background-color: rgba(18, 18, 20, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    box-shadow: var(--paneel-schaduw);
}

.overmij-portret-beeld::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -1px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30), transparent);
    pointer-events: none;
}

.overmij-portret img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.overmij-opening {
    width: min(100%, var(--over-lees));
    margin: clamp(32px, 4vw, 50px) auto 0;
    text-align: center;
}

.overmij-opening p {
    margin-top: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--over-tekst);
}

.overmij-opening p:first-child { margin-top: 0; }

.overmij-opening .overmij-lede {
    font-size: clamp(16px, 1.5vw, 17.5px);
    color: rgba(255, 255, 255, 0.82);
}

/* Naam en rol onder het portret. */

.overmij-naam {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: var(--avdb-text);
}

.overmij-rol {
    font-family: var(--avdb-font-mono), monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(246, 212, 81, 0.6);
}

/* HET VERHAAL — Label links, leeskolom rechts, haarlijn tussen de blokken. */

.overmij-verhaal {
    width: var(--over-breed);
    margin: 0 auto;
}

.overmij-blok {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(38px, 4.6vw, 62px) 0;
    border-top: 1px solid var(--over-lijn);
}

.overmij-blok:last-child { border-bottom: 1px solid var(--over-lijn); }

.overmij-label {
    padding-top: 7px;
    font-family: var(--avdb-font-mono), monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

.overmij-tekst { min-width: 0; }

.overmij-tekst h2 {
    max-width: 26ch;
    font-size: clamp(22px, 2.5vw, 31px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.9px;
    color: var(--avdb-text);
}

.overmij-tekst p {
    max-width: var(--over-lees);
    margin-top: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--over-tekst);
}

/* De nuance na een stellige alinea. Iets stiller, met een streepje ervoor. */

.overmij-tekst .overmij-nuance {
    margin-top: 22px;
    padding-left: 18px;
    border-left: 1px solid rgba(246, 212, 81, 0.28);
    font-size: 14.75px;
    color: rgba(255, 255, 255, 0.58);
}

/* Doorverwijzing naar een andere pagina */

.overmij-door {
    margin-top: 22px;
    font-family: var(--avdb-font-sans), sans-serif;
    font-size: 13.5px;
}

.overmij-door a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(246, 212, 81, 0.3);
    color: var(--gold);
    transition: border-color 0.2s ease;
}

.overmij-door a span { display: inline-block; transition: transform 0.22s ease; }

.overmij-door a:hover { border-color: var(--gold); }

.overmij-door a:hover span { transform: translateX(4px); }

.overmij-door a:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
    border-radius: 3px;
}

/* WAAR AVDB VOOR STAAT — Drie uitgangspunten naast elkaar, alleen haarlijnen. */

.overmij-staat { padding: var(--over-ruimte) 0 0; }

.overmij-staat-box {
    width: var(--over-breed);
    margin: 0 auto;
}

.overmij-staat-box h2 {
    max-width: 18ch;
    font-size: clamp(25px, 2.9vw, 36px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.1px;
    color: var(--avdb-text);
}

.overmij-waarden {
    margin-top: clamp(28px, 3.4vw, 44px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 44px);
}

.overmij-waarden > div {
    padding-top: 18px;
    border-top: 1px solid var(--over-lijn-zacht);
}

.overmij-waarden dt {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: rgba(255, 255, 255, 0.92);
}

.overmij-waarden dd {
    margin-top: 9px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.62);
}

/* WAAR HET NAARTOE GAAT — Eén rustig paneel. Dit gaat over later, niet over nu. */

.overmij-toekomst { padding: var(--over-ruimte) 0 0; }

.overmij-toekomst-box {
    width: var(--over-breed);
    margin: 0 auto;
    padding: clamp(30px, 4vw, 52px);
    background-color: rgba(18, 18, 20, 0.42);
    border: 1px solid var(--over-lijn);
    border-radius: 18px;
    box-shadow: var(--paneel-schaduw);
}

.overmij-toekomst-box h2 {
    max-width: 20ch;
    font-size: clamp(22px, 2.5vw, 31px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.9px;
    color: var(--avdb-text);
}

.overmij-toekomst-box p {
    max-width: var(--over-lees);
    margin-top: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--over-tekst);
}

/* SLOT */

.overmij-slot {
    padding: clamp(60px, 8vw, 104px) 0 clamp(78px, 9vw, 122px);
}

.overmij-slot-box {
    width: var(--over-breed);
    margin: 0 auto;
    text-align: center;
}

.overmij-slot-box h2 {
    max-width: 24ch;
    margin-inline: auto;
    font-size: clamp(24px, 3.1vw, 40px);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -1.2px;
    color: var(--avdb-text);
}

.overmij-slot-box > p {
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
}

.overmij-cta {
    min-height: var(--touch-target);
    margin-top: clamp(26px, 3vw, 36px);
    padding: 13px 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background-color: transparent;
    border: 1px solid var(--gold);
    border-radius: var(--avdb-pill);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--gold);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.overmij-cta:hover {
    border-color: #fbe07a;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px rgba(246, 212, 81, 0.85);
}

.overmij-cta span { display: inline-block; transition: transform 0.22s ease; }

.overmij-cta:hover span { transform: translateX(4px); }

.overmij-cta:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 4px;
}

/* SMALLERE SCHERMEN — responsive.css kent deze klassen niet, dus alles staat hier. */

@media (max-width: 980px) {

    .overmij-waarden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {

    .overmij-hero { padding-top: clamp(58px, 16vw, 96px); }

    .overmij-opening { width: min(100%, var(--over-lees)); }

    .overmij-hero h1 { max-width: 18ch; }

    .overmij-blok {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .overmij-label { padding-top: 0; }

    .overmij-tekst h2 { max-width: none; }

    .overmij-waarden { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 640px) {

    .overmij-tekst p,
    .overmij-opening p,
    .overmij-toekomst-box p { font-size: 15px; line-height: 1.85; }
}

@media (max-width: 430px) {

    .overmij-portret { width: min(52vw, 172px); }

    .overmij-cta { width: 100%; min-height: 48px; }

    .overmij-tekst .overmij-nuance { padding-left: 14px; }
}

/* RUST VOOR WIE DAAROM VRAAGT */

@media (prefers-reduced-motion: reduce) {

    .overmij-cta,
    .overmij-cta span,
    .overmij-door a,
    .overmij-door a span { transition: none; }

    .overmij-cta:hover { transform: none; }

    .overmij-cta:hover span,
    .overmij-door a:hover span { transform: none; }
}