/*
Theme Name: Rene Gonkel Fotografie
Author: De Website Coach
Description: Minimaal en snel portfoliothema voor Rene Gonkel Fotografie.
Version: 1.0
Requires at least: 6.5
*/
:root{--bar:#a5a5a5;--ink:#111;--soft:#555;--mark:#f3f3f3;--bg:#fff;--font:"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* balk bovenaan */
.bar{background:var(--bar);height:30px;display:flex;align-items:center;justify-content:center}
.bar a{color:#fff;font-size:16px;font-weight:300;letter-spacing:.95em;text-transform:uppercase;margin-right:-.95em}

/* home */
.home{position:relative;overflow:hidden;padding:0 16px 80px;min-height:calc(100vh - 30px)}
.mark{position:absolute;left:50%;top:190px;width:min(740px,78vw);transform:translateX(-50%);z-index:0;pointer-events:none}
.mark svg{display:block;width:100%;height:auto;fill:var(--mark)}
.contact{position:relative;z-index:1;text-align:center;padding-top:26px;line-height:1.45}
.contact h1{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:0 0 22px}
.contact p{margin:0 0 16px;font-size:18px}
.contact strong{font-weight:700}
.contact .mail{font-size:24px;font-weight:700;margin-top:6px}
.contact .mail a{margin-left:.6em}
.contact .mail a:hover,.cats a:hover{text-decoration:underline;text-underline-offset:4px}
.tiles{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin:96px auto 0;max-width:1480px}
.tile{display:flex;flex-direction:column;align-items:center}
.tile .thumb{display:block;height:clamp(180px,20.7vw,342px);background:#e9e9e9;min-width:120px}
.tile .thumb img{height:100%;width:auto;transition:opacity .2s}
.tile:hover .thumb img{opacity:.85}
.tile .label{margin-top:50px;font-size:19px;font-weight:300;color:var(--soft)}
@media (max-width:700px){
  .tiles{gap:22px 14px;margin-top:56px}
  .tile .thumb{height:42vw}
  .tile .label{margin-top:14px;font-size:16px}
  .contact .mail{font-size:19px}
  .contact p{font-size:16px}
}

/* categoriepagina */
.cats{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 28px;max-width:1480px;margin:0 auto;padding:22px 16px 0}
.cats .name{font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.02em}
.cats .links{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:17px;font-weight:300;color:var(--soft)}
.cats [aria-current]{color:var(--ink);font-weight:400}
.photos{display:flex;flex-direction:column;align-items:center;gap:12vh;padding:9vh 16px 14vh}
.photos > *{margin:0}
.photos figure{margin:0;display:flex;justify-content:center;max-width:100%}
.photos img{width:auto;height:auto;max-width:min(100%,1600px);max-height:86vh}
.soon{text-align:center;color:var(--soft);font-weight:300;padding:20vh 16px}