@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
 --canopy:#1F3A2C;
 --parchment:#EFE9DC;
 --light:#F6F3EA;
 --ink:#211D16;
 --laterite:#A6672B;
 --hairline:#C8C0AC;
}

*{box-sizing:border-box}

body{
margin:0;
background:var(--parchment);
color:var(--ink);
font-family:'IBM Plex Sans',sans-serif;
}

.wrap{
max-width:1180px;
margin:auto;
padding:0 32px;
}

header{
background:var(--canopy);
color:var(--light);
}

.nav-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 0;
}

.brand{
font-family:'Source Serif 4',serif;
font-size:20px;
}

.brand small,
nav a,
.eyebrow{
font-family:'IBM Plex Mono',monospace;
letter-spacing:.1em;
text-transform:uppercase;
font-size:11px;
}

.brand small{
display:block;
opacity:.7;
}

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav a{
color:var(--light);
text-decoration:none;
}

.hero{
background:var(--canopy);
color:var(--light);
padding:70px 0;
}

.eyebrow{
color:#d8b36a;
}

h1,h2,h3{
font-family:'Source Serif 4',serif;
font-weight:500;
}

h1{
font-size:clamp(38px,5vw,56px);
max-width:18ch;
}

.hero p{
max-width:60ch;
line-height:1.7;
}

.badges span{
display:inline-block;
border:1px solid rgba(246,243,234,.4);
padding:8px 12px;
margin:20px 8px 0 0;
font-family:'IBM Plex Mono',monospace;
font-size:11px;
}

section{
padding:55px 0;
border-bottom:1px solid var(--hairline);
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.card,
.brief{
background:var(--light);
border:1px solid var(--hairline);
padding:28px;
}

.brief{
border-left:5px solid var(--laterite);
}

li{
margin:8px 0;
}

@media(max-width:800px){
.grid{
grid-template-columns:1fr;
}

nav{
display:none;
}
}