@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --ink:#22241e; --cream:#f7f4ed; --orange:#ff7043; --line:#d9d5ca; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; } .nav { height:82px; padding:0 6.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .logo { font-size:25px; font-weight:700; letter-spacing:-2px; } .logo span { color:var(--orange); } nav { display:flex; gap:32px; font-size:14px; } nav a:hover, footer a:hover { color:var(--orange); } .nav-cta { font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:4px; } .nav-cta span { color:var(--orange); font-size:18px; }
.hero { min-height:620px; position:relative; overflow:hidden; padding:92px 11vw 55px; background:#d8dfb7; } .eyebrow { margin:0; color:#68695f; font:11px "DM Mono",monospace; letter-spacing:.03em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { position:relative; z-index:2; margin:28px 0 58px; font-size:clamp(58px,8.4vw,125px); line-height:.91; letter-spacing:-.075em; font-weight:500; } em { font-family:"Playfair Display",serif; font-weight:500; letter-spacing:-.07em; } .hero-bottom { position:relative; z-index:2; display:flex; align-items:end; gap:45px; } .hero-bottom p { max-width:275px; margin:0; font-size:16px; line-height:1.5; } .round-link { width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:22px; transition:.2s; } .round-link:hover { background:var(--ink); color:white; } .orb { position:absolute; border-radius:50%; } .orb-one { width:300px;height:300px;right:7%;top:70px;background:var(--orange); } .orb-two { width:100px;height:100px;right:26%;bottom:38px;background:#5271bd; }
.section { padding:105px 6.5vw; } .section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:42px; } h2 { margin:0; font-size:clamp(38px,4.8vw,65px); line-height:.98; letter-spacing:-.065em; font-weight:500; } .project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .project-card { min-width:0; } .project-art { height:300px; position:relative; overflow:hidden; padding:19px; display:flex; justify-content:space-between; font:13px "DM Mono",monospace; } .project-art b { align-self:center; font-size:170px; font-family:"Playfair Display",serif; font-weight:500; line-height:1; } .orange .project-art { background:#f7b44c; } .blue .project-art { background:#a9c7c3; } .pink .project-art { background:#efb1b3; } .orange b { color:#e75f35; } .blue b { color:#356a71; } .pink b { color:#c85769; } .project-card h3 { margin:17px 0 3px; font-size:22px; font-weight:500; letter-spacing:-.04em; } .project-card p { margin:0; color:#68695f; font-size:14px; }
.about { display:grid; grid-template-columns:1fr 2fr; gap:65px; border-top:1px solid var(--line); } .about h2 { max-width:630px; } .about div>p { max-width:445px; margin:34px 0 30px; line-height:1.6; color:#56574f; font-size:16px; } .about div>a { font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:5px; } .about span { color:var(--orange); font-size:18px; }
.account { background:#ece8db; }.account h2 { margin:24px 0; }.account>p:not(.eyebrow) { color:#56574f; }.auth-form,.project-form { max-width:460px; display:grid; gap:15px; }.auth-form label { color:#56574f; }.auth-form input,.project-form input,.project-form select { border:0; border-bottom:1px solid #aaa69d; padding:10px 0; background:transparent; outline:0; font:15px "DM Sans",sans-serif; }.auth-form button,.project-form button { margin-top:5px; }.auth-status { margin:0; color:#b83e23; font-size:14px; }.switch-button,.account-button { border:0; background:none; padding:0; margin-top:20px; font:14px "DM Sans",sans-serif; text-decoration:underline; cursor:pointer; }.account-button { margin:0; }.project-form { margin-top:50px; padding:25px; background:#ebe7dc; grid-template-columns:1.2fr 1.2fr .8fr auto; align-items:end; }.project-form strong { grid-column:1/-1; font-weight:500; }.project-form button { justify-self:stretch; padding:10px; }
.contact { padding:95px 11vw; background:var(--ink); color:var(--cream); display:grid; grid-template-columns:1fr 1fr; gap:80px; } .contact .eyebrow { color:#b9b9ad; } .contact h2 { margin-top:31px; } .contact em { color:#d8dfb7; } form { display:grid; gap:19px; } label { display:grid; gap:7px; font:11px "DM Mono",monospace; text-transform:uppercase; color:#b9b9ad; } input,textarea { border:0; border-bottom:1px solid #6b6c63; border-radius:0; padding:8px 0; background:transparent; color:var(--cream); outline:0; font:15px "DM Sans",sans-serif; resize:vertical; } input:focus,textarea:focus { border-color:#d8dfb7; } button { margin-top:8px; border:0; padding:14px 18px; justify-self:start; background:var(--orange); color:var(--ink); font:500 14px "DM Sans",sans-serif; cursor:pointer; } button:hover { background:#ff8b67; } button span { margin-left:28px; font-size:19px; } .form-status { margin:0; color:#d8dfb7; font-size:13px; } footer { padding:28px 6.5vw; display:flex; justify-content:space-between; align-items:center; font-size:12px; } footer p { margin:0; color:#77776d; } footer div { display:flex; gap:18px; }
@media (max-width:700px) { .nav { padding:0 7vw; } nav { display:none; } .hero { min-height:590px; padding:75px 7vw 45px; } .orb-one { width:170px; height:170px; right:-25px; top:115px; opacity:.9; } .orb-two { right:12%; bottom:75px; width:72px; height:72px; } .hero-bottom { display:block; } .round-link { margin-top:28px; } .section { padding:72px 7vw; } .section-heading { display:block; } .section-heading h2 { margin-top:24px; } .project-grid { grid-template-columns:1fr; gap:35px; } .project-art { height:260px; } .about,.contact { grid-template-columns:1fr; gap:38px; } .contact { padding:70px 7vw; } .project-form { grid-template-columns:1fr; } footer { padding:25px 7vw; } footer p { display:none; } }