:root{--fg:#111;--mute:#777;--bg:#fff;--gut:clamp(16px,3vw,40px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{opacity:.55}
header{display:flex;justify-content:space-between;align-items:baseline;padding:var(--gut)}
header nav{display:flex;gap:28px}
header a.on{text-decoration:underline;text-underline-offset:4px}
main{padding:0 var(--gut) 12vh}
footer{padding:var(--gut);color:var(--mute);font-size:12px}
.intro{max-width:34em;margin:8vh 0 14vh}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:9vh var(--gut);align-items:end}
.grid figure,.stack figure{margin:0}
.grid figcaption,.stack figcaption{margin-top:10px;font-size:12px;color:var(--mute)}
.ph{background:#f1f1f1;width:100%;aspect-ratio:4/5}
.ph.wide{aspect-ratio:3/2}
img,video{display:block;max-width:100%;height:auto}
.stack{display:grid;gap:8vh;margin-top:4vh}
.meta{display:grid;grid-template-columns:1fr;gap:4px;max-width:34em;margin:4vh 0 10vh}
.meta h1{font-size:14px;font-weight:400;margin:0}
.meta .k{color:var(--mute)}
h2{font-size:12px;font-weight:400;color:var(--mute);margin:12vh 0 4vh}
.text{max-width:34em}
/* project description: a centred block on a very light grey panel so it stands apart from the white page */
.text{box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:42em;padding:clamp(22px,4vw,44px);background:#f6f6f5}
.text p{margin:0}
@media(min-width:900px){.meta{grid-template-columns:1fr 1fr;max-width:none}}
.hero{margin:2vh 0 0;display:flex;flex-direction:column;align-items:center}
.hero a{display:block;text-align:center}
.hero img,.hero video{width:auto;height:auto;max-width:100%;max-height:74vh;margin:0 auto}
.hero figcaption{margin-top:12px;font-size:12px;color:var(--mute)}
.center{margin-left:auto;margin-right:auto;text-align:center;margin-top:10vh}
.contact p{margin:0 0 22px}
.contact .k{color:var(--mute);margin-right:6px}
.cv{margin:4vh 0 0 14vw;max-width:36em}
.cv .row{display:grid;grid-template-columns:8em 1fr;gap:16px;padding:6px 0}
@media(max-width:700px){.cv{margin-left:0}}
.wall{display:flex;flex-wrap:wrap;gap:8vh var(--gut);margin-top:4vh}
.wall::after{content:"";flex-grow:1000}
.wall figure{margin:0;flex-grow:var(--r);flex-basis:calc(var(--r) * 260px);min-width:0}
.wall img,.wall video{width:100%;height:auto}
.wall figcaption{margin-top:10px;font-size:12px;color:var(--mute)}
.viewer .slide{margin:0;cursor:pointer}
.viewer .slide.video{cursor:default}
.viewer .slide img,.viewer .slide video{width:auto;height:auto;max-width:100%;max-height:calc(100vh - 330px);margin:0 auto}
.viewer:not(.js) .slide{margin-bottom:8vh}
/* project pages: material + dimensions sit small, right-aligned, directly under the picture */
.viewer .details{margin:8px auto 0;max-width:100%;text-align:right;font-size:11.5px;line-height:1.5;color:var(--fg)}
.viewer .details .k{color:var(--mute)}
.viewer .ctl{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;color:var(--mute);font-size:12px}
.viewer button{all:unset;cursor:pointer;color:var(--fg)}
.viewer button:hover{opacity:.55}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:12vh;font-size:12px}
.video-field{margin-top:10vh;grid-template-columns:1fr 1fr;gap:var(--gut)}
@media(max-width:700px){.video-field{grid-template-columns:1fr}}
/* Works page list: small square thumbnails, left-aligned, one under another. Hovering (or,
   for keyboard/touch, focusing the link) reveals a big panel to the right with a second image
   from the project and a short description. Doesn't push other rows around - it floats over
   whatever is there, and disappears again on mouse-leave. */
.works-stack{gap:6vh}
.works-stack figure{width:440px;max-width:100%;position:relative}
.works-stack > figure > a img,.works-stack > figure > a video{width:440px;max-width:100%;height:440px;object-fit:cover}
/* hover panel: fixed to the screen, filling the space between the thumbnail column and the right
   edge of the page, so the second image is as large as the screen allows and sits centred in that space */
.works-stack .hover-panel{position:fixed;top:var(--gut);bottom:var(--gut);left:calc(var(--gut) * 2 + 440px);right:var(--gut);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
/* the second image sits faded behind the description, scaled to fit inside the panel (not cropped),
   and the description is laid over it, centred both ways - so it always lands on the middle of the picture */
.works-stack .hover-panel img,.works-stack .hover-panel video{width:100%;height:100%;object-fit:contain;opacity:.28}
.works-stack .hover-panel .desc{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:32px max(64px,calc((100% - 30em) / 2));font-size:18px;line-height:1.65;color:var(--fg)}
.works-stack figure:hover .hover-panel,.works-stack figure:focus-within .hover-panel{opacity:1}
@media(max-width:1000px){.works-stack .hover-panel{display:none}}

.broll{margin-top:10vh}
.broll summary{cursor:pointer;color:var(--mute);font-size:12px;list-style:none}
.broll summary::-webkit-details-marker{display:none}
.broll summary:hover{opacity:.55}
.broll[open] summary{margin-bottom:6vh}
.broll .stack{margin-top:0}


.home{display:grid;grid-template-columns:minmax(200px,270px) 1fr;gap:var(--gut);align-items:start;margin-top:2vh}
.side{font-size:11.5px;line-height:1.5}
.side h3{font-size:11px;font-weight:400;color:var(--mute);margin:36px 0 12px}
.side h3:first-child{margin-top:0}
.side .row{display:grid;grid-template-columns:6em 1fr;gap:8px;padding:5px 0}
.home .hero{margin:0}
@media(max-width:800px){.home{grid-template-columns:1fr}.side{order:2;margin-top:6vh}}

/* masonry, not rows: figures fill each column top-to-bottom at their own height, so items of
   very different shapes (photos next to clips) never have to line up with their neighbours */
.wall.scatter{display:block;column-count:3;column-gap:calc(var(--gut) * 1.5);margin-top:16vh}
.wall.scatter::after{content:none}
.wall.scatter figure{break-inside:avoid;margin:0 0 7vh}
@media(max-width:1000px){.wall.scatter{column-count:2}}
@media(max-width:560px){.wall.scatter{column-count:1}}

.hover-preview{position:fixed;top:0;left:0;width:220px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50}
.hover-preview.show{opacity:1}
.hover-preview img{display:block;width:100%;height:auto;background:#f1f1f1}
@media(hover:none){.hover-preview{display:none}}