:root{--orange:#F47B20;--orange-d:#C95A0C;--paper:#FFFDF8;--bg:#FBF6EE;--ink:#1F2A24;--muted:#5E665F;--red:#D63A3A;--blue:#9DB7DE;--herb:#2E6A4E;
--display:"Bricolage Grotesque",system-ui,sans-serif;--body:"Figtree",system-ui,sans-serif;--hand:"Caveat",cursive;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800}h2{font-size:1.6rem}h3{font-size:1.1rem}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hand{font-family:var(--hand);font-weight:600}
.top{background:var(--orange);color:#fff;padding-top:env(safe-area-inset-top)}.top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:62px;gap:12px}
.brand{font-family:var(--display);font-weight:800;font-size:1.15rem;text-decoration:none;display:flex;align-items:center;gap:10px}
.dots{display:inline-flex;gap:5px}.dots i{width:8px;height:8px;border-radius:50%;background:#fff}
.ig{font-size:.9rem;text-decoration:none;opacity:.95}
.hero{background:var(--orange);color:#1F0F02;padding:28px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero .eyebrow{color:#5A2200}.lead{font-size:1.15rem;max-width:52ch;margin:14px 0 22px}
.btn{display:inline-block;background:#1F0F02;color:var(--orange);text-decoration:none;font-weight:600;padding:12px 20px;border-radius:999px}
.index-card{background:var(--paper);border-radius:14px;padding:18px 18px 18px;transform:rotate(-3deg);box-shadow:0 18px 40px rgba(90,34,0,.3);
 background-image:linear-gradient(var(--red),var(--red)),repeating-linear-gradient(transparent 0 33px,var(--blue) 33px 35px);background-size:100% 3px,100% 100%;background-position:0 70px,0 82px;background-repeat:no-repeat,repeat}
.index-card .big{font-size:2.3rem;line-height:1;color:var(--ink);display:block;margin:4px 0 34px}
.index-card img{border-radius:8px;aspect-ratio:4/3;object-fit:cover;width:100%}
.group{margin-top:48px}.ghead{display:flex;align-items:baseline;gap:12px;border-bottom:3px solid var(--ink);padding-bottom:8px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.rc{background:var(--paper);border-radius:14px;overflow:hidden;text-decoration:none;position:relative;box-shadow:0 2px 10px rgba(31,42,36,.08);transition:transform .2s}
.rc:hover{transform:translateY(-3px) rotate(-.5deg)}.rc img{aspect-ratio:4/3;object-fit:cover;width:100%}
.rc .num{position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-family:var(--mono);font-weight:700;font-size:.8rem;padding:3px 9px;border-radius:999px}
.rb{padding:12px 14px 16px;display:grid;gap:4px}
footer{padding-bottom:env(safe-area-inset-bottom);margin-top:70px;background:var(--ink);color:#EDEFEA}footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:26px;padding-bottom:26px}
footer .hand{font-size:1.8rem;color:var(--orange)}footer .mono{color:#AEB6AF}
.recipe .back{display:inline-block;margin:22px 0 14px;text-decoration:none}
.rhero{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center}.rhero img{border-radius:18px;aspect-ratio:4/3;object-fit:cover;width:100%}
.meta{display:flex;border:1px solid #E6DED0;border-radius:12px;background:var(--paper);overflow:hidden}.meta div{flex:1;padding:10px 14px;border-right:1px dashed #E6DED0}.meta div:last-child{border:0}.meta b{display:block;font-family:var(--display);font-size:1.15rem}
.cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;margin-top:40px;align-items:start}
.paper{background:var(--paper);border-radius:14px;padding:22px 22px 14px;border-top:4px solid var(--red)}
.ing{list-style:none;padding:0;margin:12px 0 0}.ing label{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #D9E3F2;cursor:pointer}
.ing input{width:19px;height:19px;accent-color:var(--herb);flex:none;margin-top:3px}.ing input:checked+span{text-decoration:line-through;color:var(--muted)}
.steps{list-style:none;padding:0;margin:14px 0 0;counter-reset:s;display:grid;gap:16px}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:12px}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--display);font-weight:800;display:grid;place-items:center}
.tip{margin-top:22px;background:var(--paper);border-left:4px solid var(--herb);padding:12px 16px;border-radius:0 10px 10px 0}.tip .hand{font-size:1.5rem;color:var(--herb)}
.orig{margin-top:44px}.orig h2{margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.cards img{border-radius:10px;transform:rotate(-1deg);box-shadow:0 8px 24px rgba(31,42,36,.15)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.gal img{border-radius:10px;aspect-ratio:1;object-fit:cover;width:100%}
.igline{margin-top:30px;font-weight:600}.igline a{color:var(--orange-d)}
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:18px;border-top:1px solid #E6DED0;flex-wrap:wrap}.pn a{text-decoration:none;font-weight:600}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (max-width:760px){.hero-grid,.rhero,.cols{grid-template-columns:1fr}.index-card{max-width:420px}.ig{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}