/* rubenverhagen.nl v3.1 (12 October 2026). White, image only; the RV monogram turns on the hero. */
@font-face{font-family:"Hanken";src:url(/assets/fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{--paper:#ffffff;--ink:#0b0a09;--grey:#77736b;--line:#e4e1db;--gutter:16px;--top:72px;color-scheme:light}
@media (min-width:900px){:root{--gutter:40px;--top:88px}}

*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hanken","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
figure{margin:0}
.mono{font-family:"Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.g{color:var(--grey)}
.word{font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.row a,.row span{display:inline-flex;min-height:44px;align-items:center}
.row{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center}

/* Top bar: white text with difference, so it reads black on white and white over a photo. */
.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px;color:#fff;mix-blend-mode:difference}
.top nav{display:flex;gap:22px}
.top nav a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.top nav a[aria-current]{text-decoration:underline}
.top .mark{display:inline-flex;height:44px;align-items:center;color:#fff}
.top .mark svg{width:clamp(140px,14vw,190px);height:auto;aspect-ratio:714/58;fill:currentColor}

/* Hero: the monogram turning, alone on white */
.hero{height:100svh;min-height:520px;display:grid;place-items:center;background:var(--paper)}
.hero h1{margin:0}
.stage{display:block;position:relative;width:min(56vw,46vh,440px);aspect-ratio:680/696;perspective:1400px}
.coin{display:block;position:absolute;inset:0;transform-style:preserve-3d;animation:spin 9s linear infinite;will-change:transform}
.coin .l{position:absolute;inset:0;width:100%;height:100%;fill:#2a2826;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.coin .l.o{fill:var(--ink)}
.coin .l.f{transform:translateZ(calc(var(--z) * 1px))}
.coin .l.b{transform:rotateY(180deg) translateZ(calc(var(--z) * 1px))}
.shadow{display:block;position:absolute;left:18%;right:18%;bottom:-11%;height:7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(11,10,9,.22),rgba(11,10,9,0));animation:breathe 4.5s ease-in-out infinite}
.rv3d{position:absolute;left:-10%;top:-10%;width:120%;height:120%;opacity:0;transition:opacity .9s ease}
.stage.is-3d .rv3d{opacity:1}
.stage .coin{transition:opacity .9s ease}
.stage.is-3d .coin{opacity:0;animation-play-state:paused}
.stage.is-3d .shadow{animation:none;transition:transform .1s linear}
@keyframes spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes breathe{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.18);opacity:.55}}

/* Gallery: photos only, an editorial 12-column rhythm on white */
.gallery{padding:0 var(--gutter);display:flex;flex-direction:column;gap:clamp(56px,10vw,160px)}
.gr{display:grid;gap:16px}
.f img{width:100%}
@media (min-width:900px){
  .gallery .gr{grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
  .c1-7{grid-column:1/7}.c9-13{grid-column:9/13}.c1-13{grid-column:1/13}.c4-10{grid-column:4/10}
  .c7-13{grid-column:7/13}.c1-6{grid-column:1/6;grid-row:1}.c2-8{grid-column:2/8}.c1-5{grid-column:1/5}
  .c5-9{grid-column:5/9}.c3-11{grid-column:3/11}.c8-13{grid-column:8/13}.c5-10{grid-column:5/10}.c6-13{grid-column:6/13}
  .down{margin-top:22vh}.up{margin-top:0}
}
@media (max-width:899px){
  .gallery .gr .f:nth-child(2){width:78%;margin-left:auto}
  .gallery .gr .f:nth-child(3){width:78%}
}

/* Footer: one line */
.foot{padding:clamp(80px,12vw,180px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 24px);color:var(--grey)}

/* Inner pages */
.page{padding:calc(var(--top) + 24px) var(--gutter) 0;max-width:1440px}
.bio-grid{display:grid;gap:40px}
@media (min-width:900px){.bio-grid{grid-template-columns:5fr 7fr;gap:56px;align-items:start}.bio-photo{position:sticky;top:var(--top)}}
.bio-photo figcaption{margin-top:12px}
.page h1{font-size:clamp(40px,7vw,110px);margin-bottom:28px}
.lead{max-width:56ch;margin:0 0 40px}
.bio-block{border-top:1px solid var(--line);padding:22px 0 30px;display:flex;flex-direction:column;gap:12px}
.bio-text{margin:0;max-width:64ch;font-size:18px}
.copy,.send{align-self:flex-start;background:none;border:1px solid var(--ink);color:var(--ink);padding:0 18px;min-height:44px;cursor:pointer}
.copy:hover,.send:hover{background:var(--ink);color:var(--paper)}

/* Contact form */
.form{display:flex;flex-direction:column;gap:10px;max-width:560px;margin-bottom:40px}
.form input,.form textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:12px 14px;min-height:48px;border-radius:0}
.form input:focus,.form textarea:focus{border-color:var(--ink)}
.form label{margin-top:12px}
.form .send{margin-top:18px}
.form .send[disabled]{opacity:.5;cursor:wait}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.status{min-height:1.5em;margin:6px 0 0}

/* 404 */
.nf{min-height:70svh;display:flex;flex-direction:column;justify-content:center;gap:24px}

/* Arrival: a slow fade as photos come into view; only with JavaScript, never under reduced motion. */
.js .r{opacity:0;transform:translateY(28px);transition:opacity 1.2s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.js .r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .coin,.shadow{animation:none}
  .js .r{opacity:1;transform:none;transition:none}
}