/*!
 * Scheldebroeders — publieke pagina's: landing, registratie, uitleg, fouten.
 *
 * @author Ferhat Remory
 * @link   https://ferhat.io
 */

.page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 55% at 50% -8%, #2a1d15 0%, transparent 62%),
        var(--ground);
}

.shell { width: min(1080px, 100% - 40px); margin-inline: auto; }
.shell-narrow { width: min(460px, 100% - 40px); margin-inline: auto; }

/* --------------------------------------------------------------- Header -- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(18, 15, 13, .88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-header .inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding-block: 10px;
}
.brand {
    font-family: var(--display);
    font-size: 21px;
    color: var(--brass);
    letter-spacing: .02em;
}
.brand:hover { text-decoration: none; }
.site-header nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.site-header nav a.link { color: var(--muted); font-size: 15px; white-space: nowrap; }
.site-header nav a.link:hover { color: var(--text); text-decoration: none; }
.site-header .btn { white-space: nowrap; }

/* Inloggen en registreren staan buiten het uitklapmenu, zodat ze op een
   telefoon blijven staan. Op een breed scherm sluiten ze gewoon achter de
   links aan. */
.head-act { display: flex; flex: none; align-items: center; gap: 10px; }

.site-header nav[data-nav] { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; align-items: center; gap: 10px; }
.nav-foot,
.nav-sign,
.nav-act { display: none; }

/* De geslepen steen voor de naam: dezelfde tekening als het app-pictogram en
   de favicon, uit dezelfde functie in tools/appicoon.py. Het is de munt van het
   spel en het maakt van de merknaam een merk in plaats van een woord. */
.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.brand-mark { display: block; flex: none; width: auto; height: 15px; }

/* ----------------------------------------------------------- De taal ----- */

/* Hiervoor stonden er drie codes naast elkaar: NL EN FR. Dat leest als drie
   losse links tussen de andere links, en op een telefoon nam het de breedte in
   van een knop terwijl bijna niemand van taal wisselt. Eén wereldbol met de
   taal waarin je kijkt zegt hetzelfde in een derde van de ruimte. */
.lang-pick { position: relative; flex: none; }

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    cursor: pointer;
}
.lang-btn:hover { color: var(--text); border-color: var(--brass-dim); }
.lang-btn svg { width: 16px; height: 16px; }
.lang-now { font: 600 12px/1 var(--mono); letter-spacing: .08em; }
.lang-btn[aria-expanded="true"] { color: var(--brass); border-color: var(--brass-dim); }

.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    display: grid;
    gap: 2px;
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(18, 15, 13, .98);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--muted);
}
.lang-menu a:hover { background: var(--raised); color: var(--text); text-decoration: none; }
.lang-menu a[aria-current="true"] { color: var(--brass); }
.lang-menu .lang-code {
    font: 600 11px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--faint);
    min-width: 1.6em;
}
.lang-menu a[aria-current="true"] .lang-code { color: var(--brass); }
.lang-menu .lang-name { font-size: 14px; }

/* ----------------------------------------------------------------- Hero -- */

/* =========================================================== De haven ====
 |
 | De landingspagina leunt op één beeld: de Schelde bij nacht. De tekst ligt
 | eroverheen met een verloop eronder, zodat hij leesbaar blijft zonder dat
 | het beeld eronder verdwijnt. Op een telefoon staat het beeld bovenaan en
 | de tekst eronder — over een smalle foto lezen werkt niet.
 * ======================================================================= */

/* De kop vult het scherm. De film is het eerste wat iemand van dit spel ziet
   en een strook van 400 pixels maakt daar een banner van; op volle hoogte is
   het een plek. svh en niet vh: op een telefoon telt vh de adresbalk mee, en
   dan valt de knop net onder de rand weg. */
.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(80px, 12vh, 140px) 0 clamp(76px, 12vh, 120px);
    overflow: hidden;
}

/* De kopbalk plakt bovenaan en ligt over de film heen. Boven de film is hij
   helemaal doorzichtig — het donker onder de merknaam komt uit de sluier over
   het beeld, niet uit een tweede verloop hier. Dat scheelde een zichtbare
   onderrand halverwege het beeld.

   Hij wordt pas een balk zodra je scrollt, en hij vloeit erheen: eerst
   verwisselde hij een verloop voor een vlak, en die sprong zag je. */
.page:has(.hero) .site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.page:has(.hero) .site-header[data-stuck] {
    background: rgba(18, 15, 13, .92);
    border-bottom-color: var(--line);
    backdrop-filter: blur(10px);
}

.hero-art { display: block; }
.hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.hero-inner {
    position: relative;
    z-index: 2;
}

.hero .kicker { margin-bottom: 12px; }

.hero h1 {
    font-size: clamp(38px, 8vw, 66px);
    line-height: .98;
    letter-spacing: .005em;
    text-wrap: balance;
    max-width: 16ch;
    margin-bottom: 16px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}

.hero p.lead {
    font-size: clamp(16px, 2.2vw, 19px);
    line-height: 1.55;
    color: #d5cabb;
    max-width: 46ch;
    margin-bottom: 26px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--faint);
}

/* De drie cijfers onder de knoppen: één streep, geen kaartjes. */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 30px 0 0;
    border-top: 1px solid var(--line);
}
.stat {
    flex: 1 1 8rem;
    padding: 14px 18px 0 0;
    margin-right: 18px;
}
.stat + .stat { border-left: 1px solid var(--line); padding-left: 18px; }
.stat dt {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 4px;
}
.stat dd {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1;
    color: var(--brass);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Secties -- */

.section { padding: clamp(44px, 7vw, 76px) 0; }
.section-sunk { background: #100d0b; border-block: 1px solid var(--line); }

.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brass-dim);
    margin-bottom: 10px;
}

.section > .shell > h2 {
    font-size: clamp(27px, 4.4vw, 38px);
    line-height: 1.08;
    text-wrap: balance;
    margin-bottom: 10px;
}
.section > .shell > p.intro {
    color: var(--muted);
    max-width: 56ch;
    margin-bottom: 30px;
    font-size: 16px;
}

/* ------------------------------------------------------------ Pijlers -- */

.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.pillar {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
}
.pillar:hover { border-color: var(--brass-dim); transform: translateY(-2px); }

.pillar-art { display: block; position: relative; }
.pillar-art img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* Het beeld loopt onderaan weg in de kaart, zodat de rand niet snijdt. */
.pillar-art::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, var(--surface), transparent);
}

.pillar-txt { padding: 4px 18px 20px; }
.pillar-txt h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    margin-bottom: 8px;
}
.pillar-txt h3 svg { width: 18px; height: 18px; color: var(--brass); flex: none; }
.pillar-txt p { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ------------------------------------------------------------- Wijken -- */

.district-list { display: grid; gap: 8px; }

.district-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--wijk);
    border-radius: 10px;
    background: var(--surface);
}
.district-row.is-free { border-left-style: dashed; }

.district-name { min-width: 0; }
.district-name b { display: block; font-size: 17px; }
.district-name small { font-size: 14px; color: var(--muted); }

.district-right {
    margin-left: auto;
    text-align: right;
    display: grid;
    gap: 2px;
}
.district-right .owner {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wijk);
}
.district-row.is-free .owner { color: var(--faint); }
.district-right .income { font-family: var(--mono); font-size: 14px; color: var(--cash); }

.district-note { margin-top: 16px; font-size: 14px; color: var(--faint); }

/* ----------------------------------------------------------- Families -- */

/* Een familie was een streepje met een naam erachter, over de volle breedte —
   met één familie in de lijst werd dat een lege balk. Nu is het een kaart met
   een wapen en drie cijfers: leden, wijken, inkomsten. Daaraan ziet een
   bezoeker of hij bij een macht aanklopt of aan een lege naam. */
/* auto-fill en niet auto-fit: bij auto-fit vallen lege kolommen weg en rekt
   één familie zich uit tot de volle breedte — precies de lege balk waar dit
   vanaf moest. Nu houdt hij de maat van een kaart, hoeveel families er ook
   zijn. */
.family-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.family-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--fam) 13%, transparent) 0%, transparent 60%),
        var(--surface);
    transition: border-color .2s ease, transform .2s ease;
}
.family-card:hover { border-color: color-mix(in srgb, var(--fam) 55%, var(--line)); transform: translateY(-2px); }

/* Een streep in de kleur van de familie langs de bovenrand. Bij de oude kaart
   zat die links en verdween hij zodra de kaart breed werd. */
.family-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--fam), transparent 80%);
}

.family-head { display: flex; align-items: center; gap: 13px; }

.family-crest {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 50px;
    border: 1px solid color-mix(in srgb, var(--fam) 60%, transparent);
    border-radius: 8px 8px 14px 14px;
    background: color-mix(in srgb, var(--fam) 12%, var(--ground));
    font: 600 12px/1 var(--mono);
    letter-spacing: .08em;
    color: var(--fam);
}

.family-id { min-width: 0; }
.family-id b { display: block; font-size: 17px; line-height: 1.2; }
.family-id small { font-size: 12px; color: var(--faint); }

.family-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.family-figures dt {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 3px;
}
.family-figures dd {
    margin: 0;
    font-family: var(--display);
    font-size: 21px;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.family-figures dd.is-cash { color: var(--cash); font-size: 17px; }

/* Wie niets bezit hoort niet even luid te klinken als wie de halve stad heeft. */
.family-card:not(.has-land) .family-figures dd { color: var(--muted); }

/* ------------------------------------------------------------- Slot ---- */

.closing {
    padding: clamp(52px, 8vw, 88px) 0;
    text-align: center;
    border-top: 1px solid var(--line);
    background: radial-gradient(90% 130% at 50% 100%, #241a12 0%, transparent 65%);
}
.closing h2 {
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.06;
    text-wrap: balance;
    margin-bottom: 12px;
}
.closing p {
    color: var(--muted);
    max-width: 48ch;
    margin: 0 auto 26px;
    font-size: 16px;
}

@media (max-width: 700px) {
    .hero h1 { max-width: none; }
    .stat { flex: 1 1 100%; padding-right: 0; margin-right: 0; }
    .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
    .district-right { margin-left: 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .pillar:hover { transform: none; }
}

/* ------------------------------------------------------------ Formulieren */

/* Links het beeld, rechts het formulier. De twee helften zijn even breed en
   even hoog: het beeld vult zijn helft met object-fit, zodat de verhouding van
   de foto niet bepaalt hoe lang de pagina wordt. Onder 900px komt het beeld
   als strook boven het formulier te liggen. */
.auth-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: min(1120px, 100% - 40px);
    margin: 40px auto 64px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}

.auth-art { position: relative; isolation: isolate; overflow: hidden; }

/* Het beeld ligt los in zijn vak. Stond het in de stroom, dan zou de
   verhouding van de foto de hoogte van de pagina bepalen: bij een kolom van
   700px werd een beeld van 900x1195 ruim 900px hoog en scrollde het scherm. */
.auth-art picture,
.auth-art img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Een verloop van onderaf, zodat de regel leesbaar blijft op elk beeld. */
.auth-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 9, 8, .92) 0%, rgba(11, 9, 8, .35) 38%, rgba(11, 9, 8, 0) 70%);
    pointer-events: none;
}

.auth-art-line {
    position: absolute;
    z-index: 1;
    left: 26px;
    right: 26px;
    bottom: 22px;
    margin: 0;
    font-family: var(--display);
    font-size: 21px;
    line-height: 1.35;
    color: var(--text);
    text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}

.auth-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    padding: 34px 30px;
}

/* Het formulier mag niet meegroeien met het venster: op een breed scherm
   wordt een invoerveld van 600px onleesbaar. De kolom is dus breed, de
   inhoud erin niet. */
.auth-pane-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    width: min(400px, 100%);
}

/* Dit scherm moet in één venster passen, ook met het codeveld open en op een
   lage laptop. Het formulier staat daarom strakker dan elders in de site. */
.auth-pane .auth-card > p.intro { margin-bottom: 18px; }
.auth-pane .auth-card .field { margin-bottom: 13px; }
.auth-pane .auth-alt { margin-top: 14px; }

.auth-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    font-size: 13px;
    color: var(--faint);
}
.auth-legal a { color: var(--faint); }
.auth-legal a:hover { color: var(--brass); }

/* De kaart zit al in de tweedeling, dus hij hoeft zelf geen rand meer. */
.auth-pane .auth-card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

/* Op een groot scherm vult dit scherm het venster: van rand tot rand en tot
   onderaan. Er staat geen voet onder, dus de kolom kan de hele resterende
   hoogte pakken. */
/* --------------------------------------------- Wachtwoord en naam ------- */

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; width: 100%; }

.pw-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--faint);
    cursor: pointer;
}
.pw-eye:hover { color: var(--brass); }
.pw-eye svg { width: 19px; height: 19px; }

/* Twee iconen op dezelfde plek; welk je ziet hangt af van de stand. */
.pw-eye .pw-eye-off { display: none; }
.pw-eye.is-on .pw-eye-on { display: none; }
.pw-eye.is-on .pw-eye-off { display: block; }
.pw-eye.is-on { color: var(--brass); }

.pw-strength {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.pw-strength.is-leeg { visibility: hidden; }

.pw-bar {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: var(--raised);
    overflow: hidden;
}
.pw-bar i {
    display: block;
    height: 100%;
    width: 25%;
    border-radius: 3px;
    background: var(--blood);
    transition: width .18s ease, background-color .18s ease;
}
.pw-strength[data-score="1"] .pw-bar i { width: 50%;  background: var(--nerve); }
.pw-strength[data-score="2"] .pw-bar i { width: 75%;  background: var(--brass); }
.pw-strength[data-score="3"] .pw-bar i { width: 100%; background: var(--cash); }

.pw-word { font-size: 12px; color: var(--muted); }
.pw-strength[data-score="3"] .pw-word { color: var(--cash); }

/* Of de naam nog vrij is. Het blokje is leeg tot de server antwoordt, dus het
   mag geen ruimte innemen zolang er niets staat. */
.name-slot:empty { display: none; }
.name-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 13px;
}
.name-state svg { width: 14px; height: 14px; }
.name-state.is-free { color: var(--cash); }
.name-state.is-taken { color: #e58c80; }
.name-state.is-invalid { color: var(--faint); }

/* De aanwijzing eronder zegt hetzelfde nog eens zodra er een oordeel staat. */
.field:has(.name-state) .hint { display: none; }

/* De code van een vriend. Het veld mag leeg blijven, dus het staat er gewoon. */
.field-ref input { text-transform: uppercase; letter-spacing: .12em; }
.field-ref input::placeholder { letter-spacing: .12em; text-transform: none; }

.page.is-auth { min-height: 100dvh; }

/* main moet zelf ook meegroeien. Zonder dit blijft het op de hoogte van zijn
   inhoud staan, en dan vult een kort formulier als dat van het aanmelden maar
   de halve pagina terwijl het lange registratieformulier toevallig wel klopt. */
.page.is-auth main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.page.is-auth .auth-split { flex: 1 1 auto; }

@media (min-width: 900px) {
    .auth-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        min-height: 0;
    }
    .auth-pane { padding: 30px 40px; }

    /* De pagina zelf schuift hier niet: het scherm staat vast in het venster.
       Past het formulier er op een lage laptop niet in, dan schuift alleen de
       rechterkolom, zodat de knop altijd bereikbaar blijft. */
    .page.is-auth { height: 100dvh; overflow: hidden; }
    .page.is-auth main { min-height: 0; }
    .page.is-auth .auth-pane { overflow-y: auto; }
}

/* Op een smal scherm mag het beeld niet de halve pagina opeten, en hoort het
   geheel geen kaart te zijn. Een kaart met marges eromheen op een scherm van
   360 pixels betekent dat het formulier in een venstertje in een venster staat;
   de pagina ís het formulier, dus die neemt de volle breedte. */
@media (max-width: 899px) {
    .auth-split {
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }
    .auth-art { height: 190px; }
    .auth-art-line { font-size: 19px; left: 22px; right: 22px; bottom: 16px; }
    .auth-pane { padding: 28px 20px 36px; }
}

.auth-page { padding: 48px 0 64px; }
.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 24px;
}
.auth-card h1 {
    font-family: var(--display);
    color: var(--brass);
    font-size: 30px;
    margin-bottom: 8px;
}
.auth-card > p.intro { color: var(--muted); margin-bottom: 24px; }
.auth-alt { margin-top: 20px; text-align: center; color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------ Foutpagina - */

.error-page { padding: 80px 0; text-align: center; }
.error-page .code {
    font-family: var(--display);
    font-size: 72px;
    color: var(--brass-dim);
    line-height: 1;
}
.error-page h1 { font-size: 26px; margin: 12px 0 8px; }
.error-page p { color: var(--muted); margin-bottom: 24px; }

/* --------------------------------------------------------------- Footer -- */

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding: 28px 0;
    font-size: 14px;
    color: var(--faint);
}
.site-footer .inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.site-footer .inner .right { margin-left: auto; }

/* Hier stond dat de tekstlinks op een smal scherm verdwijnen, zodat de kop op
   één regel paste. Dat was de oplossing zolang er geen menuknop was: de links
   gingen weg en kwamen nergens terug. Nu klapt de knop ze uit, dus ze blijven. */

@media (max-width: 620px) {
    .shell { width: calc(100% - 28px); }
    .brand { font-size: 18px; }
    .site-header .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
}

/* Hier stond dat de aanmeldknop op een smal scherm een gewone link werd,
   omdat hij er niet naast paste. Hij staat daar niet meer: op een telefoon
   zitten inloggen en registreren onderaan het uitklapscherm, waar ze allebei
   een echte knop zijn. */

/* Onthoud-mij links, wachtwoord-vergeten rechts. */
.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.field-row .quiet { font-size: 14px; color: var(--muted); }
.field-row .quiet:hover { color: var(--brass); }

/* Wie via een aanbrenglink komt, ziet dat meteen. */
.ref-note {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 0 0 16px;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid var(--brass-dim);
    background: rgba(201, 162, 74, .08);
    font-size: 14px;
    color: var(--text);
}
.ref-note svg { width: 16px; height: 16px; flex: none; color: var(--brass); }

/* --------------------------------------------------- Kleine lettertjes -- */

.legal { padding: 48px 0 72px; }
.legal h1 { font-family: var(--display); font-size: 40px; color: var(--brass); margin: 0 0 6px; }
.legal-date { margin: 0 0 28px; font: 13px var(--mono); color: var(--faint); }
.legal-lead { font-size: 17px; line-height: 1.7; color: var(--text); margin: 0 0 32px; }
.legal h2 {
    margin: 34px 0 10px;
    font-family: var(--display);
    font-size: 24px;
    color: var(--brass);
}
.legal h3 { margin: 22px 0 6px; font-size: 16px; color: var(--text); }
.legal p { margin: 0 0 14px; font-size: 15px; line-height: 1.75; color: var(--muted); }
.legal strong { color: var(--text); }
.legal a { color: var(--brass); text-decoration: underline; text-underline-offset: 2px; }
.legal-list { margin: 0 0 16px; padding-left: 20px; }
.legal-list li { margin-bottom: 7px; font-size: 15px; line-height: 1.7; color: var(--muted); }

.site-footer .right a + a { margin-left: 14px; }

/* ===================================================== De nieuwe kop ===== */

/* Achter de kop staat bewegend beeld met een foto eronder. De foto is geen
   tweede keus maar de bodem: wie de film niet krijgt — trage verbinding,
   besparingsstand, of een browser die autoplay weigert — ziet hem en merkt
   niets. */
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg > .hero-art,
.hero-bg > .hero-film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-film { opacity: 0; transition: opacity 1.2s ease; }
.hero-film[data-playing] { opacity: 1; }

/* Drie lagen: donker onder de tekst links, donker langs de onder- en bovenrand
   zodat de kopbalk en de pijl leesbaar blijven, en een lichte vignettering die
   het midden van het beeld vrijlaat. */
.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(10, 9, 8, .92) 0%, rgba(10, 9, 8, .66) 42%, rgba(10, 9, 8, .3) 100%),
        linear-gradient(0deg, var(--ground) 1%, rgba(10, 9, 8, .25) 30%, transparent 55%),
        linear-gradient(180deg, rgba(10, 9, 8, .6) 0%, transparent 22%);
}

/* Eén kolom. Hier stond een tweede met een formulier erin; dat vroeg iemand
   zijn naam voordat hij wist waarvoor. Nu wijzen twee knoppen naar de schermen
   waar dat formulier hoort, en de kop kan ademen. */
.hero-inner {
    position: relative;
    max-width: 62ch;
}

/* Wat er op de film ligt komt traag binnen, van onder naar boven, één na één.
   Zonder dat verschijnt de hele kop in één klap over een beeld dat nog aan het
   opkomen is. */
@media (prefers-reduced-motion: no-preference) {
    .hero-inner > * { animation: hero-op .9s cubic-bezier(.22, .8, .3, 1) both; }
    .hero-inner > :nth-child(2) { animation-delay: .06s; }
    .hero-inner > :nth-child(3) { animation-delay: .12s; }
    .hero-inner > :nth-child(4) { animation-delay: .18s; }
    .hero-inner > :nth-child(5) { animation-delay: .24s; }
    .hero-inner > :nth-child(6) { animation-delay: .30s; }
}

@keyframes hero-op {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* De pijl onderaan. Het scherm is vol, dus niets verraadt dat er meer onder
   staat; dit doet dat, en het is tegelijk de eerste sectielink. */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    transform: translateX(-50%);
    color: var(--faint);
}
.hero-scroll:hover { color: var(--brass); text-decoration: none; }
.hero-scroll span {
    display: block;
    width: 1px;
    height: 34px;
    background: linear-gradient(transparent, var(--brass-dim));
}
.hero-scroll svg { width: 18px; height: 18px; transform: rotate(90deg); }

@media (prefers-reduced-motion: no-preference) {
    .hero-scroll svg { animation: wenk 2.4s ease-in-out infinite; }
}
@keyframes wenk {
    0%, 100% { transform: rotate(90deg) translateX(0); }
    50%      { transform: rotate(90deg) translateX(4px); }
}

@media (max-height: 640px) {
    .hero-scroll { display: none; }
}

/* ------------------------------------------------------ Wat je doet ----- */

.section-lead { max-width: 62ch; margin: 0 0 22px; color: var(--muted); }

.doings { display: grid; gap: 12px; }

@media (min-width: 760px) {
    .doings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.doing {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .2s ease, transform .2s ease;
}
.doing:hover { border-color: var(--brass-dim); transform: translateY(-2px); }

/* Het beeld staat los op de kaart: geen vakje eromheen, geen rand, geen eigen
   ondergrond. Die lijst maakte van acht tekeningen acht knoppen. */
.doing-ico { display: block; }
.doing-ico img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55));
}
.doing-txt h3 { margin: 2px 0 4px; font-size: 17px; }
.doing-txt p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.doing-lvl {
    align-self: start;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--faint);
    background: var(--ground);
}

/* --------------------------------------------------------- De rangen --- */

.ranks {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: rang;
}

@media (min-width: 620px) {
    .ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
    .ranks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.rank {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 14px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    text-align: center;
}
.rank-lvl {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--ground);
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}
.rank-name { font-size: 14px; }
.rank.is-top { border-color: var(--brass-dim); }
.rank.is-top .rank-lvl { color: var(--brass); border-color: var(--brass-dim); }
.rank.is-top .rank-name { color: var(--brass); }

/* Sectielinks in de kopbalk springen naar een anker; die hoeven geen
   onderstreping bij het zweven maar wel een kleur. */
.site-header .link.is-jump { letter-spacing: .02em; }

/* ==================================================== Vragen en antwoorden ==
 |
 | Open en leesbaar, niet achter een uitklap. Dit zijn precies de vragen die
 | iemand stelt vóór hij zich aanmeldt; verstop je ze, dan leest hij ze niet en
 | een antwoordmachine evenmin.
 * ========================================================================= */

.faq {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

@media (min-width: 820px) {
    .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 34px; }
}

.faq-item {
    padding-left: 16px;
    border-left: 2px solid var(--brass-dim);
}
.faq-item h3 { margin: 0 0 6px; font-size: 17px; }
.faq-item p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ------------------------------------------------------------- Knoppen --- */

/* De kop en het slot dragen de belangrijkste knop van de site. Die mag groter
   dan een knop in een formulier. */
.btn-lg {
    min-height: 54px;
    padding: 0 28px;
    font-size: 17px;
}

/* ---------------------------------------------- Naar een sectie springen -- */

/* Klikken op een sectielink glijdt naar die sectie in plaats van er hard heen
   te springen. De kopbalk plakt bovenaan, dus elke sectie houdt zijn hoogte
   vrij — anders schuift de titel eronder. */
html { scroll-behavior: smooth; }
:target,
.section,
.hero,
.closing { scroll-margin-top: 78px; }

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

/* ====================================================== Menu op smal =======
 |
 | Op een telefoon werd dit een uitklaplijstje onder de kopbalk: zes regels op
 | een rij, hetzelfde als op elke andere site. Het is nu een eigen scherm. De
 | secties staan genummerd als een dossier-index, ze komen één voor één binnen,
 | en de film loopt er donker achter door.
 |
 | Wat er in de balk blijft staan is met opzet gekozen: de merknaam, de taal,
 | inloggen en registreren. Alleen de sectielinks gaan achter de knop.
 * ========================================================================= */

.nav-toggle {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

/* Twee streepjes die bij het openen een kruis worden. Een pictogram dat
   omklapt zegt zonder woorden dat dezelfde knop het weer dichtdoet. */
.nav-bars { display: block; position: relative; width: 18px; height: 12px; }
.nav-bars i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .28s cubic-bezier(.22, .8, .3, 1), top .2s ease;
}
.nav-bars i:first-child { top: 0; }
.nav-bars i:last-child  { top: 10.5px; }

.nav-toggle[aria-expanded="true"] { color: var(--brass); border-color: var(--brass-dim); }
.nav-toggle[aria-expanded="true"] .nav-bars i:first-child { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-bars i:last-child  { top: 5px; transform: rotate(-45deg); }

@media (max-width: 980px) {
    .nav-toggle { display: flex; }

    /* Inloggen en registreren stonden hier naast de taal. Samen met de
       merknaam en de menuknop werd dat vijf dingen op 360 pixels — te druk.
       Ze staan nu onderaan het uitklapscherm; in de balk blijven de naam, de
       taal en de knop. */
    .lang-pick { margin-left: auto; }
    .head-act { display: none; }

    /* Het uitklapscherm hangt onder de balk en loopt door tot onderaan.

       Absoluut en niet vast: de kopbalk draagt een backdrop-filter, en dat
       maakt hem het houvast voor alles wat `fixed` staat. Het scherm kromp
       daardoor tot een strook van niets. De balk plakt zelf al bovenaan, dus
       absoluut eraan vast doet hetzelfde werk. */
    .site-header nav[data-nav] {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: calc(100vh - var(--kop, 64px));
        height: calc(100svh - var(--kop, 64px));
        z-index: 25;
        display: flex;
        flex-direction: column;
        /* De rij hierboven staat gecentreerd; in een kolom betekent dat
           gecentreerd in de breedte, en dan zweefden de links in het midden. */
        align-items: stretch;
        gap: 0;
        padding: 26px 22px 26px;
        background: linear-gradient(180deg, rgba(12, 10, 9, .985) 0%, rgba(12, 10, 9, .94) 100%);
        backdrop-filter: blur(14px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-header nav[data-nav][hidden] { display: none; }

    .nav-links {
        display: grid;
        gap: 0;
        counter-reset: sectie;
    }

    /* Genummerd als een index. Het nummer komt uit een teller, dus de volgorde
       klopt altijd met de volgorde in de kop — ook als er een sectie bijkomt. */
    .site-header nav a.link {
        counter-increment: sectie;
        display: grid;
        grid-template-columns: 2.6rem minmax(0, 1fr);
        align-items: baseline;
        gap: 2px;
        padding: 15px 2px;
        font-family: var(--display);
        font-size: 26px;
        line-height: 1.1;
        color: var(--text);
        border-bottom: 1px solid var(--line);
        white-space: normal;
    }
    .site-header nav a.link::before {
        content: counter(sectie, decimal-leading-zero);
        font: 600 11px/1 var(--mono);
        letter-spacing: .14em;
        color: var(--brass-dim);
    }
    .site-header nav a.link:hover,
    .site-header nav a.link:active { color: var(--brass); }

    /* De juridische regels onderaan het scherm, zodat niemand ervoor naar de
       voet van de pagina hoeft. */
    /* De twee knoppen onderaan het scherm: daar vindt een duim ze, en daar
       staan ze niet in de weg van de index erboven. */
    .nav-act {
        display: grid;
        gap: 10px;
        margin: auto 0 0;
        padding-top: 28px;
    }
    .nav-act .btn { min-height: 50px; font-size: 16px; }
    .nav-act .btn-ghost { border-color: var(--brass-dim); color: var(--brass); }

    .nav-sign {
        display: block;
        margin: 22px 0 0;
        padding-top: 0;
        font: 600 11px/1 var(--mono);
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--brass-dim);
    }

    .nav-foot {
        display: flex;
        gap: 18px;
        margin-top: 14px;
        font-size: 13px;
    }
    .nav-foot a { color: var(--faint); }
    .nav-foot a:hover { color: var(--muted); }

    /* Eén voor één binnen, van boven naar beneden. */
    @media (prefers-reduced-motion: no-preference) {
        .site-header nav[data-nav]:not([hidden]) a.link,
        .site-header nav[data-nav]:not([hidden]) .nav-sign,
        .site-header nav[data-nav]:not([hidden]) .nav-foot {
            animation: menu-in .42s cubic-bezier(.22, .8, .3, 1) both;
        }
        .site-header nav a.link:nth-child(1) { animation-delay: .02s; }
        .site-header nav a.link:nth-child(2) { animation-delay: .06s; }
        .site-header nav a.link:nth-child(3) { animation-delay: .10s; }
        .site-header nav a.link:nth-child(4) { animation-delay: .14s; }
        .site-header nav a.link:nth-child(5) { animation-delay: .18s; }
        .site-header nav a.link:nth-child(6) { animation-delay: .22s; }
        .site-header nav[data-nav]:not([hidden]) .nav-sign { animation-delay: .26s; }
        .site-header nav[data-nav]:not([hidden]) .nav-foot { animation-delay: .30s; }
    }

    /* Het menu ligt over de pagina, dus die mag er niet onder wegschuiven. */
    body.menu-open { overflow: hidden; }
}

@keyframes menu-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Op de smalste toestellen moet er van alles naast elkaar: de merknaam, de
   taal, twee knoppen en de menuknop. De merknaam geeft als eerste mee — die
   staat er ook nog als steen naast. */
/* Vijf dingen naast elkaar op 360 pixels: de steen, de naam, de taal, twee
   knoppen en de menuknop. Alles geeft een beetje mee; niets valt weg, want
   alle vijf zijn ze de reden dat iemand deze balk aankijkt. */
@media (max-width: 480px) {
    .brand { font-size: 17px; }
    .site-header nav a.link { font-size: 23px; grid-template-columns: 2.2rem minmax(0, 1fr); }
}

/* ------------------------------------------------- De kop op smal scherm -- */

/* Ook op een telefoon en een tablet vult de film het eerste scherm. Het beeld
   is breed en het scherm is smal, dus er wordt flink weggesneden aan de zijkant
   — de twee mannen staan in het midden en die moeten blijven. Daarom staat het
   uitsnijpunt op het midden, en iets boven het midden verticaal: dan staan ze
   in de bovenste helft en ligt de tekst eronder in plaats van erover. */
@media (max-width: 899px) {
    /* De inhoud zakt naar de onderkant en het beeld schuift omhoog: de twee
       mannen staan dan in de bovenste helft, boven de tekst in plaats van
       erachter. */
    .hero {
        align-items: end;
        padding: clamp(74px, 11vh, 96px) 0 26px;
    }

    .hero-bg > .hero-art img,
    .hero-bg > .hero-film { object-position: 50% 30%; }

    /* Van boven open zodat de mannen zichtbaar blijven, van onder dicht zodat
       de tekst leesbaar wordt. Links-donker heeft hier geen zin: de tekst loopt
       over de volle breedte. */
    .hero-veil {
        background:
            linear-gradient(0deg, var(--ground) 4%, rgba(10, 9, 8, .93) 40%, rgba(10, 9, 8, .45) 62%, transparent 86%),
            linear-gradient(180deg, rgba(10, 9, 8, .78) 0%, transparent 16%);
    }

    .hero-inner { max-width: none; }
    .hero h1 { font-size: clamp(34px, 9vw, 46px); }
    .hero p.lead { font-size: 16px; margin-bottom: 20px; }
    .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .hero-actions .btn { padding: 0 12px; font-size: 15px; }
    .hero-scroll { display: none; }

    /* De drie cijfers blijven op één regel. Stapelden ze, dan werd de kop drie
       schermen hoog en stond de film nergens meer. */
    .hero .stats { margin-top: 20px; }
    .hero .stat {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 10px 0 0;
        margin-right: 10px;
    }
    .hero .stat + .stat {
        border-left: 1px solid var(--line);
        border-top: 0;
        padding-left: 10px;
    }
    .hero .stat dt { font-size: 10px; letter-spacing: .1em; }
    .hero .stat dd { font-size: clamp(22px, 6vw, 28px); }
}