:root{--bg:#fff;--fg:#111;--mute:#777;--line:#e6e6e6;--pad:clamp(20px,6vw,154px);--gap:clamp(16px,2vw,52px)}
:root[data-theme=dark]{--bg:#0d0d0d;--fg:#ececec;--mute:#8a8a8a;--line:#262626}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:300 clamp(14px,1.1vw,18px)/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;transition:background .3s,color .3s;min-height:100vh}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
img{display:block;max-width:100%}
header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:28px var(--pad);background:var(--bg);transition:background .3s}
header::before,.progress_fill{content:"";position:absolute;left:var(--pad);bottom:0;height:1px}
header::before{right:var(--pad);background:var(--line)}
.progress_fill{width:calc((100% - 2*var(--pad))*var(--p,0));background:var(--fg)}
header nav{display:flex;gap:clamp(16px,3.2vw,80px)}
nav a[aria-current=page]{border-bottom:1px solid currentColor}
#theme{background:none;border:0;font:inherit;color:inherit;text-transform:inherit;cursor:pointer;padding:0}
main{min-width:0;padding:clamp(28px,4vw,70px) 0 80px}
.cap{margin-top:clamp(14px,2vw,40px);line-height:1.15}
.cap small{display:block;font-size:inherit}
/* carousel (Flickity) */
.slider-clip{overflow:hidden}
.tricks-slider{padding-left:var(--pad)}
.flickity-enabled{position:relative}
.flickity-viewport{overflow:visible;position:relative;height:100%}
.flickity-slider{position:absolute;width:100%;height:100%}
.flickity-enabled.is-draggable{-webkit-user-select:none;user-select:none;cursor:grab}
.flickity-enabled.is-draggable:active{cursor:grabbing}
.tricks-slider_slide{display:block;width:min(40vw,calc((100svh - 230px)*1.2));margin-right:var(--gap)}
.tricks-slider_slide:last-child{margin-right:var(--pad)}
.frame{position:relative;overflow:hidden;aspect-ratio:6/5;background:var(--line)}
.tricks-slider .image{max-width:none;position:absolute;top:0;left:0;width:150%;height:100%;object-fit:cover;pointer-events:none;will-change:transform}
.flickity-enabled:focus,.flickity-viewport:focus,.tricks-slider_slide:focus:not(:focus-visible){outline:none}
.tricks-slider{-webkit-tap-highlight-color:transparent}
/* grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,52px) var(--gap);margin:0 var(--pad)}
.grid .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.grid a:hover img{transform:scale(1.03)}
/* project */
.hero{aspect-ratio:16/9;max-height:80vh;width:100%;object-fit:cover}
.pmeta{display:grid;grid-template-columns:1fr 2fr;gap:var(--gap);margin:clamp(24px,3vw,56px) var(--pad)}
.pmeta p{text-transform:none;max-width:62ch}
.gallery{display:grid;gap:var(--gap);margin:0 var(--pad)}
.next{display:block;margin:clamp(48px,8vw,120px) var(--pad) 0;padding-top:24px;border-top:1px solid var(--line)}
/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gap)*2);margin:0 var(--pad);align-items:start}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--line)}
.about p{text-transform:none;max-width:56ch;margin-bottom:1.2em}
.about a{border-bottom:1px solid currentColor}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.tricks-slider_slide{width:min(70vw,calc((100svh - 230px)*1.2))}}
@media(max-width:640px){
 header{padding:20px var(--pad)}
 .grid{grid-template-columns:1fr}.tricks-slider_slide{width:min(80vw,calc((100svh - 230px)*.8))}.tricks-slider .frame{aspect-ratio:4/5}
 .pmeta,.about{grid-template-columns:1fr}
 .hero{aspect-ratio:4/3}
 
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.tricks-slider .image{transform:none!important}}

body{overflow-x:clip}
header,header a,#theme{white-space:nowrap}
body[data-page=home]{display:flex;flex-direction:column;min-height:100svh}
body[data-page=home] main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0}
@media(max-width:640px){header{gap:12px}header nav{gap:14px}}
@media(max-width:400px){header{font-size:12px}header nav{gap:10px}}
/* about: image ~75% of viewport height, vertically centered */
body[data-page=about]{display:flex;flex-direction:column;min-height:100svh}
body[data-page=about] main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0}
.about{grid-template-columns:auto minmax(0,60ch);justify-content:start;align-items:center}
.about img{width:auto;height:75svh;max-width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:900px){.about{grid-template-columns:1fr}.about img{width:100%;aspect-ratio:auto}body[data-page=about] main{padding-bottom:48px}}