:root{
    --paper:#f7f6f2;
    --white:#fff;
    --ink:#171715;
    --muted:#716f68;
    --line:rgba(23,23,21,.14);
    --accent:#8a725f;
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

html{background:var(--paper)}
html.modal-open{overflow:hidden}

body{
    margin:0;
    color:var(--ink);
    background:var(--paper);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

button,input,select,textarea{
    font:inherit;
}

button{color:inherit}
a{color:inherit}

.wordmark{
    color:inherit;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
    letter-spacing:.19em;
}

.topbar{
    position:sticky;
    top:0;
    z-index:30;
    min-height:66px;
    padding:0 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:rgba(247,246,242,.91);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(15px);
}

.top-actions{
    display:flex;
    align-items:center;
    gap:24px;
}

.text-button{
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    color:var(--ink);
    text-decoration:none;
    font-size:13px;
}

.text-button:hover{
    text-decoration:underline;
    text-underline-offset:5px;
}

.text-button.subtle{
    color:var(--muted);
}

.gallery-hero{
    max-width:1000px;
    margin:0 auto;
    padding:clamp(84px,12vw,165px) 24px clamp(68px,9vw,118px);
    text-align:center;
}

.kicker{
    margin:0 0 20px;
    color:var(--accent);
    font-size:11px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.gallery-hero h1,
.login-panel h1{
    margin:0;
    font-family:var(--sans);
    font-weight:300;
    letter-spacing:-.045em;
    line-height:.96;
}

.gallery-hero h1{
    font-size:clamp(52px,8vw,108px);
}

.hero-video-action{
    display:flex;
    justify-content:center;
    margin-top:34px;
}

.video-button{
    min-width:190px;
    padding:14px 24px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:#fff;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    letter-spacing:.02em;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.video-button:hover{
    background:transparent;
    color:var(--ink);
    transform:translateY(-1px);
}

.gallery-hero>p:not(.kicker){
    max-width:560px;
    margin:28px auto 0;
    color:var(--muted);
    font-family:var(--sans);
    font-size:clamp(17px,1.8vw,23px);
    font-weight:300;
    line-height:1.5;
}

.hero-meta{
    margin-top:28px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.masonry{
    padding:0 14px 80px;
    columns:3 340px;
    column-gap:14px;
}

.tile{
    width:100%;
    margin:0 0 14px;
    padding:0;
    display:block;
    break-inside:avoid;
    border:0;
    background:#e8e6df;
    overflow:hidden;
    cursor:zoom-in;
}

.tile img{
    display:block;
    width:100%;
    height:auto;
    transition:transform .45s ease,opacity .45s ease;
}

.tile:hover img{
    transform:scale(1.012);
    opacity:.94;
}

.footer{
    padding:28px 30px 44px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--muted);
    border-top:1px solid var(--line);
    font-size:11px;
    letter-spacing:.04em;
}

.empty{
    min-height:40vh;
    display:grid;
    place-items:center;
    color:var(--muted);
}

.viewer,
.video-modal{
    position:fixed;
    inset:0;
    z-index:100;
    background:#0b0b0a;
}

.viewer[hidden],
.video-modal[hidden]{
    display:none;
}

.viewer{
    display:grid;
    place-items:center;
    padding:48px 74px;
}

.viewer figure{
    margin:0;
    max-width:100%;
    max-height:100%;
    display:grid;
    place-items:center;
    gap:14px;
}

.viewer img{
    max-width:100%;
    max-height:calc(100vh - 115px);
    object-fit:contain;
}

.viewer figcaption{
    color:rgba(255,255,255,.65);
    font-size:11px;
    letter-spacing:.15em;
}

.viewer-close,
.video-close{
    position:fixed;
    top:18px;
    right:22px;
    z-index:3;
    width:42px;
    height:42px;
    border:0;
    background:none;
    color:#fff;
    font-size:34px;
    font-weight:300;
    cursor:pointer;
}

.viewer-nav{
    position:fixed;
    top:50%;
    z-index:3;
    transform:translateY(-50%);
    width:56px;
    height:80px;
    border:0;
    background:none;
    color:rgba(255,255,255,.78);
    font-size:54px;
    font-weight:300;
    cursor:pointer;
}

.viewer-prev{left:8px}
.viewer-next{right:8px}

.video-modal{
    display:grid;
    place-items:center;
    padding:64px 4vw 34px;
}

.video-stage{
    width:min(94vw,1500px);
}

.video-stage video{
    display:block;
    width:100%;
    max-height:86vh;
    background:#000;
}

.login-page{
    min-height:100vh;
    background:var(--paper);
}

.wordmark-login{
    position:fixed;
    top:28px;
    left:30px;
}

.login-wrap{
    min-height:100vh;
    padding:80px 24px 42px;
    display:grid;
    place-items:center;
}

.login-panel{
    width:min(100%,590px);
    padding:clamp(42px,7vw,72px);
    background:rgba(255,255,255,.76);
    border:1px solid var(--line);
}

.login-panel h1{
    font-size:clamp(44px,7vw,75px);
}

.login-copy{
    max-width:450px;
    margin:28px 0 40px;
    color:var(--muted);
    font-family:var(--sans);
    font-size:18px;
    font-weight:300;
    line-height:1.55;
}

.login-form{
    display:grid;
    gap:22px;
}

.login-form label{
    display:grid;
    gap:8px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.login-form input{
    width:100%;
    padding:13px 0 11px;
    border:0;
    border-bottom:1px solid var(--ink);
    border-radius:0;
    outline:0;
    background:transparent;
    color:var(--ink);
    font-size:17px;
}

.login-form button{
    justify-self:start;
    margin-top:12px;
    padding:13px 22px;
    border:1px solid var(--ink);
    background:var(--ink);
    color:#fff;
    cursor:pointer;
}

.error{
    margin:-12px 0 24px;
    padding:12px 14px;
    background:#f6e8e4;
    color:#7c3129;
}

@media(max-width:720px){
    .topbar{
        padding:0 16px;
        min-height:58px;
    }

    .top-actions{
        gap:13px;
    }

    .text-button{
        font-size:11px;
    }

    .text-button.subtle{
        display:none;
    }

    .gallery-hero{
        padding-top:82px;
        padding-bottom:70px;
    }

    .hero-video-action{
        margin-top:26px;
    }

    .video-button{
        width:min(100%,260px);
    }

    .masonry{
        padding-inline:6px;
        column-gap:6px;
        columns:2 150px;
    }

    .tile{
        margin-bottom:6px;
    }

    .viewer{
        padding:50px 10px 35px;
    }

    .footer{
        padding-inline:16px;
    }

    .wordmark-login{
        top:20px;
        left:20px;
    }

    .login-wrap{
        padding-inline:14px;
    }

    .login-panel{
        padding:38px 26px;
    }
}


/* Login Logo */
.login-logo{
    display:block;
    width:min(220px,65%);
    margin:0 auto 46px;
    text-align:center;
}

.login-logo img{
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
}


/* Horizontale, formatgerechte Galerie */
.justified-gallery{
    padding:0 14px 80px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-start;
}

.justified-gallery .tile{
    margin:0;
    padding:0;
    display:block;
    flex:0 0 auto;
    border:0;
    background:#e8e6df;
    overflow:hidden;
    cursor:zoom-in;
}

.justified-gallery .tile img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#e8e6df;
}

@media(max-width:720px){
    .justified-gallery{
        padding-inline:6px;
        gap:6px;
    }
}