:root{
  --cream:#F3EEE2;
  --green-deep:#1E3A2C;
  --green-mid:#3F6B4D;
  --sand:#C2A877;
  --flag:#CB5034;
  --ink:#20231F;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
}

body{
  font-family:'IBM Plex Mono', monospace;
  color:var(--cream);
  background:var(--green-deep);
  width:100%;
  overflow-x:hidden;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}

/* ---- hero ---- */

.hero{
  padding:clamp(60px,12vw,110px) 20px clamp(40px,8vw,70px);
  text-align:center;
}

.hero h1{
  margin:0;
  font-weight:400;
}

.arc{ margin-bottom:clamp(16px,3vw,28px); }
.arc svg{ width:clamp(180px,28vw,300px); height:auto; display:inline-block; }

.word{
  display:block;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:clamp(42px,11vw,108px);
  line-height:1.05;
  letter-spacing:0.01em;
  text-transform:uppercase;
  white-space:nowrap;
}

.oball{ position:relative; display:inline-block; width:0.78em; }
.ohide{ color:transparent; }
.oball svg{ position:absolute; top:0.05em; left:0; width:0.78em; height:0.78em; }

.tagline{
  margin:clamp(18px,3vw,26px) 0 0;
  font-size:clamp(13px,1.6vw,17px);
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.7;
}

/* ---- positioning line ---- */

.positioning{
  max-width:560px;
  margin:0 auto;
  padding:0 24px clamp(50px,8vw,80px);
  text-align:center;
  font-size:clamp(15px,2vw,18px);
  line-height:1.7;
  opacity:0.92;
}

/* ---- roast pills ---- */

.roasts{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  padding:0 20px clamp(56px,9vw,90px);
}

.pill{
  border:1.5px solid var(--cream);
  border-radius:30px;
  padding:12px 26px;
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---- signup ---- */

.signup{
  background:var(--cream);
  color:var(--green-deep);
  padding:clamp(50px,9vw,80px) 24px;
  text-align:center;
}

.klaviyo-form-Xq6kiL{
  max-width:420px;
  margin:0 auto;
}

.signup-line{
  margin:18px 0 0;
  font-size:13px;
  letter-spacing:0.04em;
  opacity:0.7;
}

.instagram-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  padding:13px 26px;
  border:1.5px solid var(--green-deep);
  border-radius:30px;
  color:var(--green-deep);
  text-decoration:none;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.instagram-btn svg{ width:18px; height:18px; }

.instagram-btn:hover{
  background:var(--green-deep);
  color:var(--cream);
}

/* ---- footer ---- */

.footer{
  text-align:center;
  padding:30px 20px 40px;
  font-size:11px;
  letter-spacing:0.06em;
  opacity:0.45;
}

/* ---- small screens ---- */

@media (max-width:380px){
  .word{ font-size:38px; }
}