/* ---- Design tokens ---- */
:root{
  --paper: #F6F1E2;
  --paper-row: #EFE7D2;
  --ink: #23301C;
  --ink-soft: #55604B;
  --herb: #55713A;
  --herb-dark: #3E5429;
  --paprika: #A23E28;
  --mustard: #C98A2E;
  --rule: #D9CFB0;
  --font-display: 'Bitter', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, Segoe UI, sans-serif;
  --max: 760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:var(--herb-dark);}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--paprika); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 22px;}

h1,h2,h3{font-family:var(--font-display); color:var(--ink); line-height:1.2; margin:0 0 10px;}
h1{font-size:2.1rem;}
h2{font-size:1.5rem; margin-top:0;}
p{margin:0 0 14px;}
.lede{font-size:1.05rem; color:var(--ink-soft); max-width:60ch;}

/* ---- Masthead ---- */
.masthead{
  border-bottom:1px solid var(--rule);
  padding:26px 0 20px;
}
.masthead-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap;
}
.brand{display:flex; gap:14px; align-items:center;}
.brand-mark{
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--herb); color:var(--herb-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  flex:none;
}
.brand-name{font-family:var(--font-display); font-size:1.3rem; font-weight:700; margin:0;}
.brand-tag{color:var(--ink-soft); font-size:0.92rem; margin:2px 0 0;}

nav{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:4px;}
nav a{
  color:var(--ink); text-decoration:none; font-size:0.95rem;
  border-bottom:1px solid transparent; margin-right:18px;
}
nav a:last-of-type{margin-right:0;}
.tags .tag{margin-left:8px;}
.tags .tag:first-child{margin-left:0;}
.footer-socials a{margin-right:16px;}
nav a:hover{border-bottom-color:var(--ink);}

.btn{
  display:inline-block; background:var(--paprika); color:var(--paper);
  font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  padding:10px 20px; border-radius:3px; text-decoration:none;
  border:none; cursor:pointer;
}
.btn:hover{background:var(--herb-dark);}
.btn-outline{
  display:inline-block; background:transparent; color:var(--ink);
  border:1px solid var(--ink); padding:9px 19px; border-radius:3px;
  text-decoration:none; font-size:0.95rem;
}

/* ---- Sections ---- */
section{padding:38px 0;}
section + section{border-top:1px solid var(--rule);}

/* ---- Menu board (ledger rows) ---- */
.menu-row{
  border-top:1px solid var(--rule);
  padding:16px 0;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.menu-row:last-child{border-bottom:1px solid var(--rule);}
.menu-row-main{flex:1 1 320px;}
.menu-row-main h3{font-size:1.08rem; margin:0 0 4px;}
.menu-row-main p{margin:0; color:var(--ink-soft); font-size:0.95rem;}
.tags{display:flex; gap:8px; flex-wrap:wrap; align-self:flex-start;}
.tag{
  font-size:0.78rem; color:var(--herb-dark); border:1px solid var(--herb);
  border-radius:3px; padding:2px 8px; white-space:nowrap;
}
.menu-category{
  margin:26px 0 0; font-family:var(--font-display); font-size:1.1rem;
  color:var(--herb-dark);
}
.menu-category:first-child{margin-top:0;}

/* ---- Steps (a real sequence — numbering is earned here) ---- */
.steps{list-style:none; margin:0; padding:0;}
.step{
  display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--rule);
}
.step:last-child{border-bottom:1px solid var(--rule);}
.step-num{
  font-family:var(--font-display); font-size:1.4rem; color:var(--herb);
  flex:none; width:30px;
}
.step h3{font-size:1.02rem; margin:0 0 4px;}
.step p{margin:0; color:var(--ink-soft); font-size:0.95rem;}

/* ---- Waitlist / CTA block ---- */
.cta-block{
  border-top:3px solid var(--paprika); background:var(--paper-row);
  padding:26px; border-radius:3px;
}
.cta-block h2{margin-bottom:6px;}
.cta-block p{color:var(--ink-soft);}

/* ---- FAQ ---- */
.faq-item{border-top:1px solid var(--rule); padding:16px 0;}
.faq-item:last-child{border-bottom:1px solid var(--rule);}
.faq-item h3{font-size:1rem; margin:0 0 6px;}
.faq-item p{margin:0; color:var(--ink-soft); font-size:0.95rem;}

/* ---- Footer ---- */
footer{border-top:1px solid var(--rule); padding:26px 0 40px; margin-top:10px;}
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.footer-socials a{margin-right:16px; color:var(--ink-soft); font-size:0.9rem; text-decoration:none;}
.footer-socials a:hover{color:var(--ink);}
.footer-fine{color:var(--ink-soft); font-size:0.82rem; margin-top:14px;}

/* ---- Forms ---- */
.email-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.email-row input[type=email]{
  flex:1 1 220px; padding:10px 12px; border:1px solid var(--rule);
  border-radius:3px; font-family:var(--font-body); font-size:0.95rem;
  background:var(--paper);
}

@media (max-width:560px){
  h1{font-size:1.7rem;}
  .masthead-row{flex-direction:column;}
}