:root{--paper:#f0eee9; --ink:#3d3c45; --fairway:#3d3c45; --clay:#3d3c45; --grey:#7a7a82; --hairline:rgba(61,60,69,.15);}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif; line-height:1.5;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--fairway);color:var(--paper);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
a:focus-visible, button:focus-visible{outline:2px solid var(--fairway); outline-offset:4px;}
.wrap{max-width:1280px; margin:0 auto; padding:0 clamp(20px, 5vw, 64px);}
header{padding:24px 0; border-bottom:1px solid var(--hairline); position:relative; z-index:10; background:var(--paper);}
header .wrap{display:flex; justify-content:space-between; align-items:center;}
nav ul{display:flex; list-style:none; gap:32px;}
nav a{font-size:14px; color:var(--grey); transition:color .3s;}
nav a:hover{color:var(--ink);}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
.pill-nav{position:fixed; top:20px; left:0; right:0; z-index:50; display:flex; justify-content:center; gap:10px; padding:0 20px; pointer-events:none;}
.pill{pointer-events:auto; display:flex; align-items:center; gap:8px; background:rgba(240,238,233,.85); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:11px 20px; font-size:13.5px; color:var(--ink); box-shadow:0 8px 24px rgba(20,20,15,.08); transition:background .3s;}
.pill:hover{background:rgba(240,238,233,.98);}
.pill svg{width:14px; height:14px;}
.pill-title{gap:10px;}
.pill-title .idx{color:var(--grey); font-variant-numeric:tabular-nums;}
.pill-title .sep{color:var(--hairline);}
.pill-title .name{font-family:'Newsreader',Georgia,'Times New Roman',serif; font-size:14px;}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:flex-start; padding:calc(env(safe-area-inset-top,0px) + 24px) 2.4vw 0;pointer-events:none}
.nav a,.nav button{pointer-events:auto}
.logo{text-decoration:none;font-family:var(--serif,'Newsreader',serif);font-weight:300;font-size:clamp(22px,1.4vw,32px);letter-spacing:-.05em;line-height:.9;color:var(--ink)}
.logo img{display:block;width:clamp(44px,3.2vw,64px);height:auto;border-radius:2px}
.links{display:flex;align-items:center;gap:clamp(16px,2.4vw,48px);font-size:clamp(13px,.8vw,18px);padding-top:6px}
.links a{text-decoration:none;color:var(--ink)}
.links a:hover,.links a[aria-current]{color:var(--fairway);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.progress{position:fixed;right:0;top:0;width:5px;height:52px;background:var(--fairway);z-index:60;will-change:transform}
@media (max-width: 780px){
  .links{flex-wrap:wrap;justify-content:flex-end;row-gap:6px;}
  .pill-nav{top:calc(env(safe-area-inset-top,0px) + 108px);}
  .pill{padding:9px 14px;font-size:12px;}
  .pill-title .name{font-size:12.5px;}
  .pill svg{width:12px;height:12px;}
}
.hero-grow-track{position:relative;}
.hero-grow-sticky{position:sticky; top:0; height:100vh; overflow:hidden;}
.hero-title{position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); text-align:center; z-index:2; will-change:opacity, transform;}
.hero-title .roman{display:block; font-family:'Newsreader',Georgia,'Times New Roman',serif; font-size:16px; color:var(--grey); margin-bottom:18px;}
.hero-title h1{font-family:'Newsreader',Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(48px, 8vw, 110px); letter-spacing:-0.02em; line-height:1; white-space:nowrap;}
.hero-grow-frame{position:absolute; left:50%; bottom:0; overflow:hidden; z-index:1; will-change:width, height, transform;}
.hero-caption{padding:56px 0 8px; text-align:center;}
.hero-caption p{font-family:'Newsreader',Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(19px, 2vw, 25px); line-height:1.5; max-width:44ch; margin:0 auto; color:var(--ink);}
.hero-caption .meta-line{justify-content:center; margin-top:18px;}
.meta-line{font-size:13.5px; color:var(--grey); display:flex; flex-wrap:wrap;}
.meta-line span{padding-right:14px; margin-right:14px; border-right:1px solid var(--hairline);}
.meta-line span:last-child{padding-right:0; margin-right:0; border-right:none;}
.gallery{padding:64px 0; display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.gallery-item{position:relative; overflow:hidden; aspect-ratio:4/3;}
.gallery-item.full{grid-column:1 / -1; aspect-ratio:16/9;}
.other-projects{border-top:1px solid var(--hairline); padding:64px 0 56px;}
.other-projects .op-heading{font-family:'Newsreader',Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(28px, 3.2vw, 44px); letter-spacing:-0.01em; margin:0 0 32px;}
.op-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.op-card{display:block; text-decoration:none; color:var(--ink);}
.op-card .op-img{width:100%; height:clamp(220px, 22vw, 320px); overflow:hidden; margin-bottom:16px;}
.op-card .op-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1);}
.op-card:hover .op-img img{transform:scale(1.04);}
.op-loc{display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); margin-bottom:6px;}
.op-name{display:block; font-family:'Newsreader',Georgia,'Times New Roman',serif; font-size:clamp(18px, 1.6vw, 24px); letter-spacing:-0.01em;}
@media (max-width:780px){
  .op-grid{grid-template-columns:1fr; gap:32px;}
  .op-card .op-img{height:64vw;}
}
@media (max-width: 780px){
  .hero-title h1{white-space:normal; font-size:clamp(32px, 9vw, 56px); padding:0 24px;}
  .gallery{grid-template-columns:1fr; gap:16px;}
  .gallery-item.full{aspect-ratio:4/3;}
  nav ul{gap:20px;}
}
.foot{position:relative;z-index:30;background:var(--paper);padding:10vh 2.4vw 4vh}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:6vh;padding-bottom:9vh}
.foot-social{display:flex;gap:12px}
.foot-social a{width:clamp(38px,2.6vw,50px);height:clamp(38px,2.6vw,50px);border-radius:50%;background:var(--ink);color:var(--paper); display:flex;align-items:center;justify-content:center;text-decoration:none;transition:opacity .2s}
.foot-social a:hover{opacity:.8}
.foot-social svg{width:44%;height:44%}
.foot-contact{text-align:right}
.foot-contact .label{margin:0 0 6px;font-weight:800;font-size:clamp(13px,.85vw,18px)}
.foot-contact .email{margin:0;font-family:'Newsreader',Georgia,'Times New Roman',serif;font-size:clamp(26px,3vw,58px);letter-spacing:-.02em;text-decoration:none;display:inline-block;color:var(--ink)}
.foot-contact .email:hover{text-decoration:underline;text-underline-offset:6px}
.foot-locations{display:flex;gap:5vw;flex-wrap:wrap;padding-bottom:10vh}
.foot-location h4{margin:0 0 10px;font-weight:800;font-size:clamp(13px,.85vw,18px)}
.foot-location p{margin:0 0 8px;font-size:clamp(14px,.85vw,20px);line-height:1.5}
.foot-location a{text-decoration:underline;text-underline-offset:4px;font-size:clamp(14px,.85vw,20px)}
.foot-cta{display:block;text-decoration:none}
.foot-cta .big-cta{margin:0;font-family:'Newsreader',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(70px,15vw,300px);line-height:.85;letter-spacing:-.03em;color:var(--ink)}
.foot-cta .big-cta .talk{font-style:italic}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2vh; margin-top:6vh;padding-top:3vh;border-top:1px solid var(--hairline);font-size:clamp(12px,.78vw,16px)}
.foot-bottom a{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){
  .foot-contact{text-align:left}
  .foot-locations{gap:8vw}
}
.hero-caption .writeup{font-family:inherit; font-size:clamp(15px,1.05vw,18px); line-height:1.65; max-width:62ch; margin:26px auto 0; color:var(--ink);}
.hero-caption .writeup a{text-decoration:underline; text-underline-offset:3px;}
.hero-caption .live-link{font-family:inherit; font-size:13.5px; margin-top:14px;}
.hero-caption .live-link a{text-decoration:underline; text-underline-offset:4px;}
.hero-caption .meta-line{font-family:inherit; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); max-width:none; margin-top:20px;}
@media (max-width:780px){
  .hero-caption{padding-left:22px; padding-right:22px;}
}