:root{
  --bg:#0C0C0C;--bg-hover:#121211;--fg:#F4F2EE;--fg-2:#C9C7C1;--muted:#9A9891;--line:#222220;
  --pad:clamp(20px,5vw,80px);--ease:cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);-webkit-font-smoothing:antialiased}
body{color:var(--fg);min-height:100vh;display:flex;flex-direction:column;font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.5;letter-spacing:-0.005em}
a{color:var(--fg);text-decoration:none;transition:color 140ms}
a:hover{color:var(--muted)}
::selection{background:var(--fg);color:var(--bg)}
a:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
@keyframes pv-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page{animation:none!important}}

header.site{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;padding:24px var(--pad)}
header.site .brand{font-weight:600;font-size:15px;letter-spacing:0.01em;white-space:nowrap;color:var(--fg)}
header.site nav{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(18px,3vw,40px);font-size:14px;font-weight:500;margin-left:auto}
header.site nav a{color:var(--muted)}
header.site nav a:hover,header.site nav a[aria-current="page"]{color:var(--fg)}

main{flex:1;display:flex;flex-direction:column}
.page{flex:1;display:flex;flex-direction:column;animation:pv-in 500ms var(--ease) both}
h1{font-weight:500;line-height:1.05;letter-spacing:-0.03em;margin:0;color:var(--fg);text-wrap:balance}
.eyebrow{font-size:13px;color:var(--muted);font-weight:500}

/* Home */
.hero{padding:clamp(56px,14vh,200px) var(--pad) clamp(48px,10vh,120px);max-width:1200px}
.hero h1{font-size:clamp(38px,5.4vw,84px);line-height:1.02;letter-spacing:-0.035em;margin:0 0 32px}
.hero p{margin:0;max-width:56ch;font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:var(--muted)}
.areas{margin-top:auto;border-top:1px solid var(--line)}
.areas .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.area{display:flex;flex-direction:column;gap:14px;padding:clamp(32px,4vw,48px) var(--pad);border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--fg);transition:background 200ms}
.area:hover{background:var(--bg-hover);color:var(--fg)}
.area .title{font-weight:500;font-size:22px;letter-spacing:-0.02em;line-height:1.2}
.area .body{font-size:15px;color:var(--muted);line-height:1.5;max-width:36ch}

/* Section titles */
.title-block{padding:clamp(64px,12vh,140px) var(--pad) clamp(40px,6vh,64px)}
.title-block h1{font-size:clamp(34px,4.4vw,64px)}

/* Portfolio */
.portfolio{padding:0 var(--pad) clamp(80px,12vh,140px)}
.portfolio .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{background:var(--bg);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px,3vw,40px);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;transition:background 200ms}
.card:hover{background:var(--bg-hover)}
.card .meta{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted);font-weight:500}
.card .meta span:first-child{flex:1;white-space:nowrap}
.card .meta span:last-child{flex-shrink:0;white-space:nowrap}
.card .name{font-weight:500;font-size:clamp(26px,2.4vw,34px);letter-spacing:-0.025em;line-height:1.1;margin-bottom:12px}
.card .desc{font-size:15px;color:var(--muted);line-height:1.5;max-width:34ch}

/* Two-column intro (About, Contact) */
.two-col{padding:clamp(64px,12vh,140px) var(--pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(40px,6vw,120px)}
.two-col h1{font-size:clamp(34px,4.4vw,64px)}
.prose{display:flex;flex-direction:column;gap:24px;font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:var(--fg-2);max-width:58ch}
.prose p{margin:0}

/* Principles */
.principles{border-top:1px solid var(--line);padding:clamp(48px,8vh,96px) var(--pad) clamp(80px,12vh,140px)}
.principles .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(32px,4vw,64px)}
.principle{display:flex;flex-direction:column;gap:12px}
.principle .title{font-weight:500;font-size:20px;letter-spacing:-0.02em}
.principle .body{font-size:15px;color:var(--muted);line-height:1.55;max-width:36ch}

/* Contact */
.contact-details{display:flex;flex-direction:column;gap:40px}
.contact-details .item{display:flex;flex-direction:column;gap:8px}
.contact-details .email{font-weight:500;font-size:clamp(22px,2.2vw,32px);letter-spacing:-0.02em;overflow-wrap:anywhere}
.contact-details .loc{font-size:clamp(18px,1.4vw,22px);color:var(--fg-2)}
.contact-details .note{margin:0;font-size:15px;color:var(--muted);line-height:1.55;max-width:44ch}

footer.site{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px var(--pad);font-size:13px;color:var(--muted)}
footer.site span{white-space:nowrap}