@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lora:wght@600&display=swap');

:root{
  --charcoal:#111817;
  --panel:#1c2825;
  --white:#f2f7f5;
  --muted:#b6c5c0;
  --green:#55c497;
  --amber:#e6ad57;
  --line:rgba(255,255,255,.14);
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--white);
  background:var(--charcoal);
  font-family:Inter,sans-serif;
}

nav{
  padding:1.3rem max(1.3rem,5vw);
  border-bottom:1px solid var(--line);
}

nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.3rem;
  margin:0;
  padding:0;
  list-style:none;
}

nav a{
  color:var(--green);
  font-weight:600;
  text-decoration:none;
}

header{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:68vh;
}

header img{
  width:100%;
  height:68vh;
  object-fit:cover;
}

header > div{
  align-self:center;
  padding:4rem max(1.5rem,6vw);
  background:var(--panel);
}

.eyebrow{
  color:var(--amber);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  font-weight:600;
}

h1,h2{font-family:Lora,serif}

h1{
  margin:.5rem 0 1rem;
  font-size:clamp(3.3rem,8vw,7rem);
  line-height:.92;
}

.intro{
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.7;
}

main{
  max-width:72rem;
  margin:auto;
  padding:5rem 2rem 7rem;
}

article{
  columns:2 25rem;
  column-gap:4rem;
  color:#cbd7d3;
  font-size:1.04rem;
  line-height:1.85;
}

article h2{
  column-span:all;
  color:var(--green);
  font-size:2.4rem;
}

article p{break-inside:avoid}

@media(max-width:760px){
  header{grid-template-columns:1fr}
  header img{height:42vh}
}