@import url('compact.css');
:root { --paper:#f4eddc; --ink:#173f45; --sun:#f1b642; --clay:#d86b4e; --mist:#c9d8ca; --serif:'Libre Baskerville',Georgia,serif; --sans:'DM Sans',Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 var(--sans); } a { color:inherit; text-decoration:none; }
.masthead { position:relative; z-index:5; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; padding:24px 5vw 20px; border-bottom:1px solid rgba(23,63,69,.3); }.wordmark { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:700; line-height:.9; letter-spacing:.08em; text-transform:uppercase; }.sun-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--sun); color:var(--ink); font:700 19px var(--serif); }.masthead-note { margin:0; color:rgba(23,63,69,.65); font-size:10px; line-height:1.35; text-align:center; letter-spacing:.1em; text-transform:uppercase; }.menu-button { justify-self:end; border:0; background:none; color:var(--ink); font:700 10px var(--sans); letter-spacing:.13em; text-transform:uppercase; cursor:pointer; }.menu-button span { margin-left:8px; color:var(--clay); font-size:18px; }.nav { position:absolute; top:74px; right:5vw; display:none; flex-direction:column; gap:13px; min-width:150px; padding:18px; background:var(--ink); color:var(--paper); }.nav.is-open { display:flex; }.nav a { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.hero { min-height:calc(100vh - 81px); padding:35px 5vw 22px; display:flex; flex-direction:column; }.hero-top,.hero-bottom { display:flex; justify-content:space-between; color:rgba(23,63,69,.58); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.hero-content { flex:1; display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:7vw; max-width:1380px; width:100%; margin:0 auto; }.eyebrow { margin:0 0 22px; color:var(--clay); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.hero-copy h1,.section-intro h2,.footer h2 { margin:0; font:400 clamp(70px,10vw,150px)/.82 var(--serif); letter-spacing:-.045em; }.hero-copy h1 em,.section-intro h2 em,.footer h2 em { color:var(--clay); font-style:italic; }.hero-text { max-width:360px; margin:44px 0 28px; font-size:16px; }.text-link { display:inline-flex; gap:20px; align-items:center; color:var(--clay); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }.text-link span { font-size:19px; }.hero-image { position:relative; min-height:470px; overflow:hidden; background:var(--ink); }.hero-image img { width:100%; height:100%; min-height:470px; object-fit:cover; filter:saturate(.72) sepia(.12); }.image-caption { position:absolute; right:17px; bottom:15px; color:var(--paper); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }.hero-bottom { padding-top:17px; border-top:1px solid rgba(23,63,69,.3); }
section:not(.hero) { padding:110px 10vw; border-top:1px solid rgba(23,63,69,.3); }.section-label { margin-bottom:55px; color:var(--clay); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }.section-intro { display:grid; grid-template-columns:1fr 1.4fr .7fr; align-items:end; gap:30px; margin-bottom:60px; }.section-intro .eyebrow { margin:0; }.section-intro h2 { font-size:clamp(60px,8vw,120px); }.section-intro>p:last-child { margin:0; max-width:250px; color:rgba(23,63,69,.72); }.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.project-image { aspect-ratio:1.2; overflow:hidden; background:var(--mist); }.project-image img { width:100%; height:100%; object-fit:cover; filter:saturate(.68); transition:transform .4s; }.project-grid article:hover img { transform:scale(1.05); }.project-grid article>p { margin:18px 0 7px; color:var(--clay); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.project-grid h3 { margin:0 0 5px; font:400 clamp(23px,2.4vw,34px) var(--serif); }.project-grid article>span { color:rgba(23,63,69,.65); font-size:12px; }
.principles { display:grid; grid-template-columns:.5fr 1.5fr; gap:8vw; background:var(--ink); color:var(--paper); }.principles .section-label { color:var(--sun); }.principle-list>div { display:grid; grid-template-columns:45px 1fr 1fr; gap:20px; align-items:baseline; padding:25px 0; border-bottom:1px solid rgba(244,237,220,.25); }.principle-list>div:first-child { border-top:1px solid rgba(244,237,220,.25); }.principle-list b { color:var(--sun); font-size:11px; }.principle-list h3 { margin:0; font:400 clamp(25px,3vw,42px) var(--serif); }.principle-list p { margin:0; color:rgba(244,237,220,.7); font-size:13px; }
.footer { display:grid; grid-template-columns:1.4fr .8fr auto; align-items:end; gap:40px; padding:90px 10vw 45px; background:var(--sun); color:var(--ink); }.footer h2 { font-size:clamp(65px,8vw,120px); }.footer .eyebrow { color:var(--ink); }.footer p { font-size:14px; line-height:1.7; }.footer .text-link { color:var(--ink); }.footer small { align-self:start; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:800px) { .masthead { grid-template-columns:1fr auto; padding:20px 6vw; }.masthead-note { display:none; }.nav { top:66px; right:6vw; }.hero { min-height:0; padding:28px 6vw 20px; }.hero-content { display:block; }.hero-copy { padding:60px 0 55px; }.hero-copy h1 { font-size:clamp(62px,18vw,110px); }.hero-text { margin-top:30px; }.hero-image,.hero-image img { min-height:300px; }.hero-bottom span:last-child { display:none; } section:not(.hero) { padding:75px 6vw; }.section-intro { display:block; margin-bottom:45px; }.section-intro h2 { margin:25px 0; font-size:clamp(58px,16vw,100px); }.project-grid { display:block; }.project-grid article { margin-bottom:42px; }.principles { display:block; }.principles .section-label { margin-bottom:35px; }.principle-list>div { grid-template-columns:35px 1fr; gap:10px; }.principle-list p { grid-column:2; }.footer { display:block; padding:75px 6vw 35px; }.footer>div:nth-child(2) { margin-top:50px; }.footer small { display:block; margin-top:50px; } }