@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;1,400&family=Alegreya+Sans:wght@400;500;700&display=swap');

:root{
  --limewash:#F3ECDF;
  --paper:#FBF7EE;
  --clay:#C26B3C;
  --copper:#8C5A3B;
  --olive:#525B41;
  --charcoal:#2E2A22;
  --gold:#B8923F;
  --line:#DCD0B8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--limewash);
  color:var(--charcoal);
  font-family:'Alegreya', serif;
  font-size:18px;
  line-height:1.65;
}

h1,h2,h3{
  font-family:'Alegreya', serif;
  font-weight:700;
  margin:0 0 .4em;
  color:var(--charcoal);
}
h1{font-size:2.6rem; line-height:1.15;}
h2{font-size:1.9rem;}
h3{font-size:1.3rem; color:var(--copper);}

p{margin:0 0 1.1em;}
a{color:var(--clay); text-decoration:none;}
a:hover{text-decoration:underline;}

.eyebrow{
  font-family:'Alegreya Sans', sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--olive);
  margin-bottom:.6em;
  display:block;
}

header.site{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.nav-wrap{
  max-width:980px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
}
.brand{
  font-family:'Alegreya', serif;
  font-weight:700; font-size:1.3rem;
  color:var(--charcoal); display:flex; align-items:center; gap:10px;
}
.brand svg{width:30px; height:30px;}
nav.links{
  font-family:'Alegreya Sans', sans-serif;
  display:flex; gap:22px; font-size:.92rem;
}
nav.links a{color:var(--charcoal); letter-spacing:.02em;}
nav.links a.active{color:var(--clay); border-bottom:2px solid var(--clay); padding-bottom:3px;}

main{max-width:760px; margin:0 auto; padding:60px 24px 100px;}

.hero{
  max-width:980px; margin:0 auto; padding:70px 24px 30px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;
}
.hero p.lead{font-size:1.18rem; color:var(--olive); max-width:48ch;}
.still-art{width:100%; height:auto;}

.divider{
  max-width:980px; margin:50px auto; padding:0 24px;
  display:flex; align-items:center; gap:16px; color:var(--copper);
}
.divider .line{flex:1; height:1px; background:var(--line);}
.divider svg{width:34px; height:34px; flex-shrink:0;}

.card-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:30px 0;
}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:22px 24px;
}
.card h3{margin-top:0;}

.mantinada{
  background:var(--paper);
  border-left:3px solid var(--gold);
  padding:20px 28px; margin:26px 0; position:relative;
  font-style:italic; font-size:1.15rem; color:var(--charcoal);
}
.mantinada .leaf{
  position:absolute; left:-1px; top:-12px; width:24px; height:24px; color:var(--gold);
}
.mantinada footer{
  font-style:normal; font-family:'Alegreya Sans',sans-serif; font-size:.78rem;
  color:var(--olive); margin-top:10px; letter-spacing:.04em;
}

.steps{counter-reset:step; padding:0; list-style:none; margin:30px 0;}
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:44px 1fr; gap:16px;
  margin-bottom:22px; align-items:start;
}
.steps li::before{
  content:counter(step);
  font-family:'Alegreya Sans', sans-serif; font-weight:700;
  background:var(--olive); color:var(--paper);
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem;
}

table.recipe{width:100%; border-collapse:collapse; margin:20px 0;}
table.recipe th, table.recipe td{
  text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);
  font-family:'Alegreya Sans',sans-serif; font-size:.92rem;
}
table.recipe th{color:var(--olive); font-weight:700;}

footer.site{
  border-top:1px solid var(--line); background:var(--paper);
  text-align:center; padding:34px 24px; margin-top:60px;
  font-family:'Alegreya Sans', sans-serif; font-size:.85rem; color:var(--olive);
}

@media(max-width:720px){
  .hero{grid-template-columns:1fr; padding-top:40px;}
  .card-grid{grid-template-columns:1fr;}
  nav.links{display:none;}
  h1{font-size:2.1rem;}
}