:root { --paper:#fffdf8; --ink:#223025; --muted:#687368; --red:#b32f27; --green:#456a41; --line:#e6dccd; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Georgia, "Times New Roman", serif; }
.recipe { max-width:760px; margin:0 auto; padding:env(safe-area-inset-top) 20px calc(28px + env(safe-area-inset-bottom)); }
.topline { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:12px 0 18px; font-family:"Avenir Next", Helvetica, sans-serif; font-weight:800; }
.brand { font-size:20px; letter-spacing:-.04em; }.close { justify-self:start; border:0; background:transparent; color:var(--red); font:inherit; font-size:16px; padding:8px 0; }
.hero { padding-bottom:26px; border-bottom:1px solid var(--line); }.dish { display:block; width:100%; aspect-ratio:1.32; object-fit:cover; border-radius:24px; background:#eee7da; }
.goal { display:inline-block; margin:22px 0 12px; color:var(--green); font-family:"Avenir Next", Helvetica, sans-serif; font-size:14px; font-weight:800; }
h1 { margin:0; color:var(--red); font-size:clamp(38px, 10.5vw, 67px); line-height:.94; letter-spacing:-.06em; text-wrap:balance; }.summary { margin:18px 0 0; color:var(--muted); font-size:18px; line-height:1.45; }
.facts { display:grid; grid-template-columns:repeat(2, 1fr); gap:9px; margin-top:23px; font-family:"Avenir Next", Helvetica, sans-serif; }.fact { min-height:58px; border:1px solid var(--line); border-radius:15px; display:grid; place-items:center; text-align:center; padding:9px; font-size:14px; font-weight:800; }
section { padding:28px 0; border-bottom:1px solid var(--line); }h2 { color:var(--green); margin:0 0 17px; font-size:31px; letter-spacing:-.04em; }.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }.section-head span { color:var(--muted); font-family:"Avenir Next", Helvetica, sans-serif; font-size:13px; font-weight:700; }
.ingredients { list-style:none; padding:0; margin:0; font-family:"Avenir Next", Helvetica, sans-serif; }.ingredients li { display:flex; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px dotted var(--line); font-size:16px; }.ingredients li:last-child { border-bottom:0; }.ingredients strong { white-space:nowrap; font-weight:800; }
.steps { list-style:none; padding:0; margin:0; counter-reset:step; }.steps li { counter-increment:step; display:grid; grid-template-columns:42px 1fr; gap:14px; font-size:18px; line-height:1.5; margin:0 0 21px; }.steps li::before { content:counter(step); display:grid; place-items:center; width:38px; height:38px; border:1px solid #b7cbb1; border-radius:50%; color:var(--green); font-family:"Avenir Next", Helvetica, sans-serif; font-weight:800; }.note p { margin:0; color:var(--muted); font-size:17px; line-height:1.5; }
.bottom { padding-top:27px; }.bottom button { width:100%; min-height:58px; border:0; border-radius:16px; background:var(--red); color:white; font-family:"Avenir Next", Helvetica, sans-serif; font-size:18px; font-weight:800; }.empty { padding:70px 20px; color:var(--muted); text-align:center; font-family:"Avenir Next", Helvetica, sans-serif; }
@media (max-width:390px) { .recipe { padding-left:16px; padding-right:16px; }.dish { border-radius:19px; }h1 { font-size:42px; }.steps li { font-size:17px; }.ingredients li { font-size:15px; } }