:root{
  --bg:#e9dfd0;
  --paper:#f4eddf;
  --ink:#15130f;
  --muted:#6e6254;
  --line:rgba(21,19,15,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
  letter-spacing:.02em;
}
img{width:100%;display:block}
.topbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 5vw;
  background:linear-gradient(to bottom,rgba(233,223,208,.96),rgba(233,223,208,.7),transparent);
}
.logo{
  text-decoration:none;
  color:var(--ink);
  font-family:"Cormorant Garamond",serif;
  text-align:center;
}
.logo span{
  display:block;
  font-size:30px;
  letter-spacing:.17em;
}
.logo em{
  display:block;
  margin-top:-7px;
  font-size:15px;
  letter-spacing:.28em;
}
nav{display:flex;gap:28px}
nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.18em;
}
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:6vw;
  align-items:center;
  padding:125px 6vw 70px;
}
.kicker{
  margin:0 0 24px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.26em;
  text-transform:uppercase;
}
h1,h2,h3{
  font-family:"Cormorant Garamond",serif;
  font-weight:400;
}
h1{
  margin:0;
  font-size:clamp(58px,7vw,118px);
  line-height:.92;
}
.lead{
  max-width:510px;
  margin:28px 0 0;
  font-size:18px;
  line-height:1.85;
  color:var(--muted);
}
.cta,button{
  display:inline-block;
  margin-top:34px;
  padding:16px 28px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.18em;
  cursor:pointer;
}
.heroImage img{
  aspect-ratio:1/1;
  object-fit:cover;
  box-shadow:0 34px 90px rgba(0,0,0,.20);
}
.statement{
  padding:100px 8vw;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:7vw;
}
.statement h2,.waitlist h2{
  margin:0;
  font-size:clamp(40px,5.2vw,78px);
  line-height:.98;
}
.statementText p{
  color:var(--muted);
  font-size:18px;
  line-height:2;
}
.collection{
  padding:90px 6vw;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
.collection article{
  background:rgba(255,255,255,.17);
  border:1px solid var(--line);
}
.collection article img{
  aspect-ratio:1/1;
  object-fit:cover;
}
.collection article div{padding:24px}
.collection h3{
  margin:0 0 8px;
  font-size:36px;
}
.collection p{
  margin:0;
  color:var(--muted);
  line-height:1.75;
}
.waitlist{
  max-width:940px;
  margin:0 auto 90px;
  padding:92px 8vw;
  text-align:center;
  background:var(--paper);
  border:1px solid var(--line);
}
.waitlist>p{
  color:var(--muted);
  line-height:1.8;
}
form{
  margin:42px auto 22px;
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:14px;
  text-align:left;
}
label{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
input{
  width:100%;
  margin-top:8px;
  padding:16px;
  border:1px solid var(--line);
  background:#fff8ec;
  font-size:15px;
}
form button{margin-top:19px}
small{color:var(--muted);line-height:1.7}
footer{
  padding:32px 6vw;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
}
@media(max-width:900px){
  .topbar{padding:18px 22px}
  nav{display:none}
  .hero,.statement,.collection{grid-template-columns:1fr}
  .hero{padding-top:120px}
  .statement{padding:80px 7vw}
  form{grid-template-columns:1fr}
  footer{display:block;line-height:2}
}