:root{
  --paper:#f5f3ee;
  --ink:#22211f;
  --muted:#77736c;
  --line:#9b978f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
  font-weight:300;
}
a{color:inherit;text-decoration:none}
.hero{
  width:100%;
  min-height:100vh;
  background:url("assets/hero.jpg") center center / cover no-repeat;
}
.manifesto{
  text-align:center;
  max-width:820px;
  margin:0 auto;
  padding:120px 24px;
}
.eyebrow{
  margin:0 0 24px;
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.manifesto h1,
.feature h2,
.contact h2{
  font-family:"Cormorant Garamond",serif;
  font-weight:300;
  line-height:1.05;
  margin:0;
}
.manifesto h1{
  font-size:clamp(42px,5vw,72px);
}
.line{
  display:block;
  width:34px;
  height:1px;
  margin:30px auto;
  background:var(--line);
}
.intro{
  max-width:650px;
  margin:0 auto;
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
}
.feature{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  min-height:720px;
  align-items:stretch;
  background:#ebe7df;
}
.feature-pool{
  grid-template-columns:.65fr 1.35fr;
  background:#1b1b19;
  color:#f4f1ea;
}
.image-wrap{
  overflow:hidden;
  min-height:720px;
}
.image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s ease;
}
.feature:hover img{transform:scale(1.02)}
.caption{
  padding:8vw 5vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.caption p{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 28px;
  opacity:.7;
}
.caption h2{
  font-size:clamp(38px,4.2vw,66px);
}
.contact{
  text-align:center;
  padding:115px 24px 100px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.contact h2{
  font-size:clamp(40px,4.5vw,68px);
}
.contact a{
  font-size:14px;
  line-height:1.8;
}
.instagram{
  margin-top:20px;
  font-size:11px!important;
  letter-spacing:.12em;
  text-transform:uppercase;
}
@media(max-width:850px){
  .hero{min-height:72vh;background-position:center}
  .manifesto{padding:85px 22px}
  .feature,.feature-pool{
    grid-template-columns:1fr;
    min-height:0;
  }
  .feature-pool .caption{order:2}
  .feature-pool .image-wrap{order:1}
  .image-wrap{min-height:60vh}
  .caption{padding:70px 24px}
  .contact{padding:85px 22px}
}