/* Robbert Koene photography — layout modelled on Format's "Horizon Left" theme */
:root{
  --h: min(550px, calc(100vh - 150px)); /* image row height */
  --left: 50px;                         /* gap from window edge */
  --nav-w: 224px;
  --gap: 5px;
  --accent: #ee0006;
  --ink: #000;
  --text: #555;
  --panel: rgba(255,255,255,.72);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#fff}
body{color:var(--text);font:14px/1.45 "Helvetica Neue",Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit}

/* ---------- Navigation panel (overlays the left of the image row) ---------- */
.nav{position:fixed;z-index:20;left:var(--left);top:calc(50vh - var(--h)/2);width:var(--nav-w);height:var(--h);
  background:var(--panel);padding:22px 14px 12px;display:flex;flex-direction:column}
.logo{margin:0;font-size:20px;line-height:22px;font-weight:400;color:var(--ink);letter-spacing:0}
.logo a:hover{color:var(--accent)}
.menu-toggle{display:none}
.menu_wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.main_nav{margin-top:29px}
.main_nav li{margin:0 0 3px;font-size:12px;line-height:18px}
.main_nav a{padding:3px 6px 3px 1px;color:var(--ink);transition:color .15s}
.main_nav a:hover,.main_nav .selected a{color:var(--accent)}
.copyright{font-size:11px;line-height:16px;color:#888;margin:18px 0 0 1px}
.nav_bottom{margin-top:auto;padding-bottom:2px}
.social{display:flex;gap:4px;margin-bottom:6px}
.social a{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;transition:background .15s}
.social a:hover{background:#000}
.social svg{width:10px;height:10px}
.share{border:0;border-radius:10px;background:#000;color:#fff;font-size:10px;font-weight:700;padding:3px 9px;cursor:pointer}
.share-pop{position:fixed;z-index:30;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18);padding:8px 0;min-width:150px;font-size:12px}
.share-pop a,.share-pop button{display:block;width:100%;text-align:left;padding:5px 14px;background:none;border:0;color:var(--ink);cursor:pointer}
.share-pop a:hover,.share-pop button:hover{color:var(--accent)}

/* ---------- Horizontal gallery ---------- */
.strip{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;
  scrollbar-width:thin;scrollbar-color:#bbb transparent;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:#bbb;border-radius:3px}
.track{display:flex;gap:var(--gap);height:var(--h);padding:0 var(--left)}
.track::after{content:"";flex:0 0 1px} /* keeps right padding when scrolled to the end */
.photo{position:relative;height:100%;flex:0 0 auto;background:#f3f3f3}
.photo img{display:block;height:100%;width:auto;opacity:0;transition:opacity .4s}
.photo img.loaded{opacity:1}
.photo.loaded{background:none}
.cap-btn{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.85);border:0;font-size:11px;padding:2px 7px;cursor:pointer;color:var(--ink)}
.caption{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.92);color:#333;font-size:12px;line-height:1.5;padding:10px 30px 10px 12px}
.caption .x{position:absolute;right:6px;top:4px;border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:#333}
.empty{position:fixed;left:calc(var(--left) + var(--nav-w) + 40px);top:50%;transform:translateY(-50%);color:#999;font-size:13px;max-width:420px}

/* ---------- Text pages (About/contact) ---------- */
.page{padding:71px 50px 60px calc(var(--left) + var(--nav-w) + 40px);max-width:1250px}
.page_row{display:grid;grid-template-columns:7fr 5fr;gap:30px;align-items:start}
.page_row.noimg{grid-template-columns:minmax(0,640px)}
.page img{max-width:100%;height:auto;display:block}
.page .text{color:#333;font-size:14px;line-height:20px}
.page .text p{margin:0 0 20px}
.page .text a{color:#1a6fc4;text-decoration:underline}
.page .text a:hover{color:var(--accent)}
.notfound{padding-top:120px}

/* ---------- Phones & small tablets ---------- */
@media (max-width:767px){
  :root{--left:0px}
  .nav{position:sticky;top:0;left:0;width:100%;height:auto;background:#fff;padding:16px 18px;border-bottom:1px solid #eee}
  .nav_top{display:flex;align-items:center;justify-content:space-between}
  .logo{font-size:18px}
  .menu-toggle{display:block;width:30px;height:24px;border:0;background:none;position:relative;cursor:pointer;padding:0}
  .menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{position:absolute;left:4px;right:4px;height:2px;background:#555;content:"";transition:transform .2s,opacity .2s}
  .menu-toggle span{top:11px}
  .menu-toggle span::before{left:0;right:0;top:-7px}
  .menu-toggle span::after{left:0;right:0;top:7px}
  .nav.open .menu-toggle span{background:transparent}
  .nav.open .menu-toggle span::before{transform:translateY(7px) rotate(45deg)}
  .nav.open .menu-toggle span::after{transform:translateY(-7px) rotate(-45deg)}
  .menu_wrap{display:none;padding:6px 0 4px}
  .nav.open .menu_wrap{display:flex}
  .main_nav{margin-top:10px}
  .main_nav li{font-size:15px;line-height:26px}
  .nav_bottom{margin-top:14px}
  .strip{position:static;overflow:visible;display:block}
  .track{display:flex;flex-direction:column;height:auto;padding:10px;gap:10px}
  .track::after{display:none}
  .photo{height:auto;width:100%}
  .photo img{width:100%;height:auto}
  .empty{position:static;transform:none;padding:30px 18px}
  .page{padding:24px 18px 50px}
  .page_row{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){.photo img{transition:none}}