/* Minimal, neutral stylesheet for a clean gallery site */
:root{
    --text:#111;
    --muted:#666;
    --accent:#000;
    --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    color:var(--text);
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    background: #fff;
    line-height:1.45;
}

/* Layout */
.site{
    max-width:var(--max-width);
    margin:0 auto;
    padding:6vh 4vw;
}

/* Header */
.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:4vh;
}
.site-title{
    font-weight:600;
    letter-spacing:0.06em;
    text-decoration:none;
    color:var(--accent);
    font-size:1rem;
}
.site-title img{height:36px;width:auto;display:block}
.nav{
    display:flex;
    gap:1rem;
}
.nav a{
    color:var(--muted);
    text-decoration:none;
    font-size:0.95rem;
}
.nav a:hover{color:var(--text)}

/* Simple hero / index image */
.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:6vh 0;
}
.hero img{max-width:100%;height:auto;border-radius:4px}

/* Gallery grid used on werken.html */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:18px;
}
.thumb{
    display:block;
    background:#f6f6f6;
    padding:6px;
    border-radius:4px;
    overflow:hidden;
}
.thumb img{width:100%;height:180px;object-fit:cover;display:block;border-radius:2px;cursor:pointer}

/* Section heading */
h2.section-title{font-size:1.1rem;font-weight:600;margin:28px 0 8px;color:var(--text)}

/* Modal / lightbox (works page) */
.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.85);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:1000;
}
.modal.open{display:flex}
.modal-content{
    max-width:1200px;
    width:100%;
    /* ensure modal content doesn't exceed viewport height */
    max-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* Image sizing: respect both width and height constraints and preserve aspect ratio */
.modal img{
    display:block;
    margin:0 auto;
    width:auto;
    height:auto;
    max-width:90vw;
    max-height:90vh;
    object-fit:contain;
    border-radius:4px;
}
.modal .meta{color:#fff;margin-top:12px;font-size:0.95rem}
.modal .close{position:absolute;top:22px;right:22px;color:#fff;font-size:22px;cursor:pointer}

/* Footer */
.footer{margin-top:6vh;padding:4vh 0 2vh;border-top:1px solid #eee;color:var(--muted);font-size:0.9rem;text-align:center}

/* Utilities */
.muted{color:var(--muted)}

@media (max-width:600px){
    .header{padding:0 0 16px 0}
    .thumb img{height:140px}
}

/* Horizontal carousel variant (keeps JS carousel behavior) */
.carousel{
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding:8px 2px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}
.carousel .thumb{min-width:200px;flex:0 0 auto;scroll-snap-align:center}
.carousel .thumb img{height:160px;object-fit:cover}

@media (max-width:600px){
    .carousel .thumb img{height:120px}
}

/* Increase modal close button size and hit area for touch devices */
@media (max-width:600px){
    .modal .close{
        font-size:28px;
        top:14px;
        right:14px;
        padding:8px;
    }
}