:root{--bg:#fff;--fg:#000;--p:#4b1d8f;--mut:#777;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:#000;font-family:"Cormorant Garamond",Georgia,serif;font-size:18px}
a{color:inherit;text-decoration:none}
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:baseline;padding:14px 22px;background:rgba(255,255,255,.92);font-family:Helvetica,Arial,sans-serif}
.logo{font-size:15px;letter-spacing:.12em;font-family:Georgia,serif;font-style:italic;cursor:pointer}
nav{display:flex;gap:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
nav .it{position:relative;cursor:pointer;padding-bottom:6px}
nav .it:hover>a,nav a.on{color:var(--p)}
.sub{display:none;position:absolute;top:100%;left:-8px;background:#fff;padding:10px 12px;min-width:170px;border-top:1px solid var(--p)}
.it:hover .sub,.it:focus-within .sub{display:block}
.sub a{display:block;padding:5px 0;white-space:nowrap}
.sub a:hover{color:var(--p);padding-left:4px}
main{padding-top:64px;min-height:100vh;opacity:1;transition:opacity .35s}
main.out{opacity:0}
#curtain{position:fixed;inset:0;background:var(--p);z-index:50;transform:translateY(100%);pointer-events:none}
#curtain span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-style:italic;font-size:clamp(32px,8vw,90px)}
#curtain.in{transition:transform .5s cubic-bezier(.7,0,.2,1);transform:translateY(0)}
#curtain.leave{transition:transform .5s cubic-bezier(.7,0,.2,1);transform:translateY(-100%)}
.collage{columns:4 220px;column-gap:6px;padding:6px}
.tile{break-inside:avoid;margin-bottom:6px;position:relative;overflow:hidden;cursor:pointer;display:block}
.tile img{width:100%;display:block;transition:transform .6s,filter .4s}
.tile:hover img{transform:scale(1.06);filter:saturate(1.3)}
.tile b{position:absolute;left:0;right:0;bottom:0;padding:10px;color:#fff;background:linear-gradient(transparent,rgba(75,29,143,.85));font:600 11px Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:.3s}
.tile:hover b{opacity:1}
h1,h2{font-weight:400;margin:0}
.page{padding:20px 28px 70px}
.page>h1{font-size:clamp(38px,7vw,84px);font-style:italic;line-height:1}
.page>h1:after{content:"";display:block;width:70px;height:3px;background:var(--p);margin-top:14px}
section.sec{margin-top:46px}
section.sec h2{font:600 12px Helvetica,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--p);margin-bottom:12px}
.row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px}
.row .tile{flex:0 0 auto;height:340px;margin:0;scroll-snap-align:start}
.row .tile img{height:100%;width:auto}
.row::-webkit-scrollbar{height:3px}.row::-webkit-scrollbar-thumb{background:var(--p)}
.proj h1{font-size:clamp(34px,6vw,70px);font-style:italic}
.proj p{max-width:640px;font-size:20px;line-height:1.55}
.proj .tag{font:11px Helvetica,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--p);margin-bottom:10px}
.back{cursor:pointer;font:11px Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.back:hover{color:var(--p)}
.about{max-width:760px;margin:0 auto;text-align:center;padding:20px 24px 60px}
.about .pic{width:96px;height:96px;border-radius:50%;margin:0 auto 12px;overflow:hidden;border:2px solid var(--p)}
.about .pic img{width:100%;height:100%;object-fit:cover}
.about h1{font-size:44px;font-style:italic}
.about p{font-size:20px;line-height:1.65;margin:0 0 18px}
.about .lead{font-size:26px;color:var(--p);font-style:italic}
.resume{max-width:760px;margin:30px auto 0;text-align:left;border-top:1px solid #000;padding-top:30px}
.resume h2{font:600 12px Helvetica,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--p);margin:28px 0 10px}
.job{margin-bottom:14px}.job b{font-size:20px}.job i{color:var(--mut);display:block;font-size:16px}
.job ul,.resume ul{margin:6px 0;padding-left:20px;font-size:17px;line-height:1.5}
form{max-width:600px;display:grid;gap:18px;margin-top:30px;font-family:Helvetica,Arial,sans-serif;font-size:14px}
fieldset{border:1px solid #000;padding:14px;display:flex;flex-wrap:wrap;gap:8px 18px}
legend{font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:0 6px}
label{display:flex;gap:6px;align-items:center;cursor:pointer}
input[type=checkbox]{accent-color:var(--p)}
input[type=text],input[type=email],textarea{width:100%;border:0;border-bottom:1px solid #000;padding:10px 0;font:inherit;background:none;border-radius:0}
input:focus,textarea:focus{outline:0;border-bottom:2px solid var(--p)}
button.go{background:#000;color:#fff;border:0;padding:15px;font:12px Helvetica,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.3s}
button.go:hover{background:var(--p)}
.note{font:12px Helvetica,sans-serif;color:var(--mut)}
@media(max-width:700px){header{flex-direction:column;gap:8px}nav{gap:10px;flex-wrap:wrap}main{padding-top:92px}.sub{position:static;display:none}}
@media(prefers-color-scheme:dark){:root{--mut:#999}}