:root{--bg:#fbf6ee;--paper:#fffdf9;--ink:#2d2118;--muted:#76675a;--line:#eadfce;--brown:#8a4a1f;--wheat:#e9c98f;--green:#4f7d3a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 Georgia,"Times New Roman",serif}
a{color:var(--brown)}a:hover{color:var(--green)}:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.wrap{width:min(1080px,calc(100% - 32px));margin-inline:auto}header{background:var(--paper);border-bottom:1px solid var(--line)}
.top{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;min-height:74px;padding:8px 0}.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:var(--ink)}
.brand svg{width:42px;height:42px}.brand b{font-size:1.5rem;display:block;line-height:1}.brand small{font:13px/1.2 system-ui,Arial,sans-serif;color:var(--muted)}
nav{display:flex;flex-wrap:wrap;gap:4px 18px;font:600 15px/1.4 system-ui,Arial,sans-serif}nav a{text-decoration:none;color:var(--ink)}nav a[aria-current]{color:var(--brown);text-decoration:underline;text-underline-offset:.35em}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700}h1{font-size:clamp(2rem,5vw,3.1rem)}h2{font-size:1.5rem;margin-top:1.4em}h3{font-size:1.15rem}
.small,.label{font:14px/1.5 system-ui,Arial,sans-serif;color:var(--muted)}.label{text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--green)}
main{padding:36px 0 64px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}.hero svg{width:100%;height:auto}.lead{font-size:1.2rem;color:#4a3a2c;max-width:58ch}
.btn{display:inline-block;background:var(--brown);color:#fff;text-decoration:none;font:700 16px/1 system-ui,Arial,sans-serif;padding:14px 22px;border-radius:10px}.btn:hover{background:#6d3a18;color:#fff}.btn.ghost{background:transparent;color:var(--brown);border:2px solid var(--brown)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--brown);color:var(--ink)}.card svg{width:100%;height:auto;margin-bottom:10px}.card p{margin:0;color:var(--muted);font-size:.95rem}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps3 div{border-top:3px solid var(--wheat);padding-top:12px}
table{border-collapse:collapse;width:100%;font:16px/1.5 system-ui,Arial,sans-serif}td,th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}th{color:var(--muted);font-weight:600}
.recipe{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:start}.recipe aside{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;position:sticky;top:16px}
.recipe ol li{margin-bottom:.7em}.box{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--green);border-radius:12px;padding:16px 20px;margin:20px 0}
.calc{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:22px;font:16px/1.5 system-ui,Arial,sans-serif}.calc label{display:block;margin:8px 0}.calc input{font:inherit;width:120px;padding:6px 8px;border:1px solid var(--line);border-radius:8px}
dl.gloss div{padding:14px 0;border-bottom:1px solid var(--line)}dl.gloss dt{font-weight:700}dl.gloss dd{margin:4px 0 0}
details{border-bottom:1px solid var(--line);padding:12px 0}summary{cursor:pointer;font-weight:700}
footer{border-top:1px solid var(--line);background:var(--paper);padding:26px 0 40px}footer p{max-width:80ch}
@media (max-width:860px){.hero,.recipe{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}.steps3{grid-template-columns:1fr}.recipe aside{position:static}}
@media (max-width:520px){.cards{grid-template-columns:1fr}body{font-size:16px}}
@media print{header,footer,.row,.calc{display:none}body{background:#fff}}