:root{--font-display:"Anton","Arial Narrow",Impact,sans-serif;--font-body:"Karla",system-ui,sans-serif;--font-mono:"IBM Plex Mono",monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--ns-paper,#fbf6ec);color:var(--ink,#2a1f17);font:17px/1.6 var(--font-body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--manjano-700,#7d5000)}
.flag{display:block;height:14px;background:linear-gradient(to right,#14100d 0 30%,#fff 30% 35%,#bb0000 35% 65%,#fff 65% 70%,#006600 70% 100%)}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;max-width:1100px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font:400 26px/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase;color:#19110a;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:4px solid #2a1f17;border-radius:50%;background:var(--manjano,#e8a317);font-size:20px}
.top nav a{margin-left:18px;font-weight:700;text-decoration:none;color:#2a1f17}
main{max-width:1100px;margin:0 auto;padding:0 20px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;padding:36px 0 56px}
.eyebrow{margin:0 0 8px;font:500 14px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--manjano-700,#7d5000)}
h1,h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;margin:0 0 14px;color:#19110a}
h1{font-size:clamp(40px,7vw,76px)}h2{font-size:clamp(32px,5vw,52px)}h3{font:700 20px var(--font-body);margin:20px 0 8px}
.lead{font-size:20px;max-width:34em}.lead.small{font-size:18px}
.btn{display:inline-block;padding:12px 22px;border:4px solid #2a1f17;border-radius:14px;background:var(--manjano,#e8a317);color:#19110a;font:700 17px var(--font-body);text-decoration:none;box-shadow:6px 6px 0 #2a1f17;cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 #2a1f17}.btn-ghost{background:#fff}
.hero-art img{border:6px solid #2a1f17;border-radius:28px;box-shadow:12px 12px 0 var(--manjano,#e8a317);background:#fff}
.block{padding:48px 0;border-top:6px solid #2a1f17}.block.alt{background:var(--ns-stone,#f3ebdb);margin:0 -20px;padding:48px 20px}
.recipe{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.recipe img{border:6px solid #2a1f17;border-radius:24px;box-shadow:10px 10px 0 var(--burgundy,#6b1230)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}.chips span{padding:4px 12px;border-radius:999px;border:3px solid #2a1f17;background:#fff;font:500 13px var(--font-mono);text-transform:uppercase}
.list{margin:0;padding-left:20px}.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;background:#fff;border:4px solid #2a1f17;border-radius:16px;padding:14px 16px 14px 64px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:36px;height:36px;border-radius:50%;background:var(--manjano,#e8a317);border:3px solid #2a1f17;display:grid;place-items:center;font:400 20px var(--font-display)}
.steps b{display:block}.steps .tip{color:var(--ink-soft,#5a4938);font-size:15px}
.note{color:var(--ink-soft,#5a4938)}.soon{padding:14px 16px;border:4px dashed #2a1f17;border-radius:16px;background:#fff}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:20px 0}
.product{background:#fff;border:4px solid #2a1f17;border-radius:18px;padding:16px;box-shadow:6px 6px 0 var(--manjano,#e8a317)}
.product h3{margin:0 0 4px}.product .tag{font:500 12px var(--font-mono);text-transform:uppercase;color:var(--manjano-700,#7d5000)}
.order{max-width:560px;background:#fff;border:4px solid #2a1f17;border-radius:20px;padding:20px;display:grid;gap:12px}
.order h3{margin:0}label{display:grid;gap:4px;font-weight:700}input,select,textarea{font:400 16px var(--font-body);padding:10px;border:3px solid #2a1f17;border-radius:10px;background:#fffdf8}
.hp{position:absolute;left:-9999px}#order-msg{margin:0;font-weight:700}
footer{max-width:1100px;margin:0 auto;padding:28px 20px 48px;border-top:6px solid #2a1f17;color:var(--ink-soft,#5a4938);font-size:14px}
@media(max-width:760px){.hero,.recipe{grid-template-columns:1fr}.top nav a{margin-left:12px}}