:root{
  --bg:#F5ECDB;
  --surface:#FFFFFF;
  --surface-2:#EFE1C6;
  --ink:#241C15;
  --muted:#7A6C52;
  --brass:#A97A2E;
  --brass-strong:#8C611F;
  --border: rgba(36,28,21,0.18);
  --radius: 6px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1E1811; --surface:#2A231B; --surface-2:#332B20; --ink:#F2E7D3; --muted:#BDAD8C;
    --brass:#D9A94B; --brass-strong:#E8C077; --border: rgba(242,231,211,0.16);
  }
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height:1.6;
}
.wrap{ max-width: 680px; margin:0 auto; padding: 2.5rem 1.25rem 4rem; }
.mark{ font-family: var(--font-display); font-weight:600; font-size:1.4rem; color: var(--brass-strong); text-decoration:none; }
h1{ font-family: var(--font-display); font-weight:600; font-size: clamp(2rem, 6vw, 2.75rem); margin: 1.5rem 0 .5rem; }
.tag{ color: var(--muted); margin-bottom: 1.25rem; }
.intro{ font-size:1.05rem; margin-bottom: 2rem; }
h2{ font-family: var(--font-display); font-weight:600; font-size:1.3rem; margin: 2rem 0 .75rem; }
ul.ings, ol.steps{ padding-left: 1.25rem; }
ul.ings li, ol.steps li{ margin-bottom: .5rem; }
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.btn{
  display:inline-block; margin-top: 1rem; padding: .75rem 1.25rem;
  background: var(--brass); color:#fff; border-radius: var(--radius);
  text-decoration:none; font-weight:600;
}
.list-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.list-grid a{
  display:block; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.25rem; text-decoration:none; color: var(--ink);
}
.list-grid .name{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; }
.list-grid .tag{ font-size:.85rem; margin-top:.25rem; }
footer{ margin-top: 3rem; color: var(--muted); font-size:.9rem; }