:root{
  --ink:#262019;
  --bone:#efe6d0;
  --aegean:#2b5876;
  --aegean-dark:#1d3f54;
  --olive:#74823c;
  --line:#c9b995;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
}

h1, h2{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  margin:0 0 .3em;
}

.meander{
  height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18'%3E%3Cpath d='M0,9 H6 V3 H14 V15 H20' fill='none' stroke='%2374823c' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:center;
}

.hero{
  text-align:center;
  padding:3.5rem 1.5rem 2.5rem;
}

.kicker{
  color:var(--olive);
  font-size:.9rem;
  margin:0 0 .6em;
}

h1{
  font-style:italic;
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  color:var(--aegean-dark);
}

.tagline{
  max-width:34rem;
  margin:0 auto;
  color:#4a4030;
}

.wrap{
  max-width:38rem;
  margin:0 auto;
  padding:1rem 1.5rem 3rem;
}

.recipe{
  background:#fbf7ec;
  border:1px solid var(--line);
  border-radius:4px;
  padding:2rem;
}

.ingredients{ padding-left:1.1em; }
.ingredients li{ margin-bottom:.3em; }

.hint{
  font-style:italic;
  color:#6b5f48;
  margin-top:1.6em;
}

.button{
  display:inline-block;
  margin-top:.6em;
  padding:.7em 1.4em;
  background:var(--aegean);
  color:#fdf9ef;
  text-decoration:none;
  border-radius:3px;
  font-weight:600;
}
.button:hover{ background:var(--aegean-dark); }

.shard{
  margin-top:1.5rem;
  background:#fbf7ec;
  border:1px dashed var(--line);
  border-radius:4px;
  padding:1.3rem 1.6rem;
}

.shard-label{
  margin:0 0 .7em;
  font-style:italic;
  color:#6b5f48;
  font-size:.9rem;
}

.shard dl{ margin:0; }
.shard dl div{
  display:flex;
  gap:.8em;
  font-family:monospace;
  font-size:.92rem;
  padding:.15em 0;
}
.shard dt{
  color:var(--olive);
  min-width:3.4em;
}
.shard dd{
  margin:0;
  color:var(--aegean-dark);
  word-break:break-all;
}

footer{
  text-align:center;
  padding:1.5rem;
  color:#6b5f48;
  font-size:.92rem;
}
footer a, .back{ color:var(--aegean); }

/* locked / recipe result pages (served by api/index.py) */
.eyebrow{ color:var(--olive); margin:0 0 .4em; }

.flag{
  font-family:monospace;
  background:#fbf7ec;
  border:1px solid var(--line);
  padding:.8em 1em;
  border-radius:4px;
  display:inline-block;
  color:var(--aegean-dark);
  font-size:1.05rem;
}