:root{--bg:#f5f3ef;--ink:#1b1a18;--muted:#8a857d;--line:#dcd7cf}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:72rem;margin:0 auto;padding-inline:1.5rem}
nav{display:flex;justify-content:space-between;align-items:center;padding-block:1.5rem;border-bottom:1px solid var(--line)}
.name{font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:.85rem}
nav div a{margin-left:1.75rem;font-size:.85rem;color:var(--muted)}
nav div a:hover{color:var(--ink)}
.intro{padding-block:4rem 2.5rem}
h1{font-weight:300;font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;letter-spacing:-.02em;max-width:40rem;margin:0}
.intro p{color:var(--muted);margin-top:1rem}
figure{margin:0}
figure svg{display:block;width:100%;height:auto}
.feature svg{aspect-ratio:12/5;max-width:100%}
figcaption{font-size:.8rem;color:var(--muted);padding-top:.6rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;padding-block:3.5rem}
.grid figure svg{transition:transform .4s ease}
.grid figure:hover svg{transform:scale(1.02)}
.about{display:grid;grid-template-columns:12rem 1fr;gap:2rem;padding-block:3rem;border-top:1px solid var(--line)}
.about h2{font-weight:500;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;margin:0}
.about p{margin:0;max-width:40rem;font-size:1.1rem}
footer{padding-block:3rem;border-top:1px solid var(--line)}
footer b{font-weight:500}
.small{font-size:.8rem;color:var(--muted)}
@media (max-width:48rem){.grid{grid-template-columns:1fr 1fr}.about{grid-template-columns:1fr;gap:.75rem}}