/* Dish page, on top of article.css. */
.dish section{padding:0}
.dh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:48px 0 24px}
.dh h1{font-size:clamp(40px,5.4vw,76px)}
.credit{color:var(--grey);margin-top:16px}.credit b{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:28px 0}
.facts li{background:var(--card);border-radius:20px;padding:14px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:2px}
.facts i{font-size:20px;color:var(--emberText)}
.facts b{font-family:var(--display);font-size:clamp(16px,1.5vw,22px);line-height:1.1;overflow-wrap:normal;hyphens:none}
.facts li{min-width:0}.facts b{font-size:clamp(14px,1.25vw,20px)}
.facts small{color:var(--grey);font-size:13px}
.dh-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:32px;box-shadow:var(--shadow)}
.cook{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding:56px 0;scroll-margin-top:80px}
.ings{position:sticky;top:96px;align-self:start;background:var(--card);border-radius:28px;padding:24px;box-shadow:inset 0 0 0 1px var(--line)}
.ings-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cook h2{font-size:30px}
.seg{display:flex;background:var(--ground);border-radius:999px;padding:4px}
.seg button{border:0;background:none;font:700 14px var(--body);color:var(--grey);padding:8px 14px;border-radius:999px;min-height:36px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--ground)}
.svs{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font-weight:600}
.svs span{flex:1;color:var(--grey)}
.svs b{font-family:var(--display);font-size:24px;min-width:2ch;text-align:center}
.sv-b{width:40px;height:40px;border-radius:50%;border:0;background:var(--t-orange);color:var(--emberText);font-size:18px;display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease)}
.sv-b:active{transform:scale(.92)}
.ing li{border-top:1.5px solid var(--line)}
.ing label{display:flex;gap:12px;align-items:center;padding:11px 0;cursor:pointer;min-height:44px}
.ing input{accent-color:var(--ember);width:18px;height:18px;flex:none}
.ing .in{flex:1}.ing .q{font-weight:700;white-space:nowrap}
.ing input:checked~span{color:var(--grey);text-decoration:line-through}
.macro{margin-top:18px}.macro .pd-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px}
.mac{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:14px;font-weight:600}
.mac i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.macro small{color:var(--grey);font-size:13px}
.steps-d{display:grid;gap:10px;margin-top:20px}
.st{display:flex;gap:16px;width:100%;text-align:left;border:0;background:var(--card);border-radius:22px;padding:18px 20px;font:inherit;font-size:18px;line-height:1.6;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background-color 200ms var(--ease)}
.sn{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ember);color:var(--onEmber);font-weight:800;display:grid;place-items:center;transition:background-color 200ms var(--ease)}
.st[aria-pressed=true]{background:var(--t-green)}.st[aria-pressed=true] .sn{background:#17703D;color:#fff}
.st[aria-pressed=true] .tx{color:var(--grey)}
@media (max-width:900px){.dh,.cook{grid-template-columns:minmax(0,1fr)}.dh-img{order:-1;border-radius:24px}.ings{position:static}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dish .rel{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width:900px){.dish .rel{grid-template-columns:minmax(0,1fr)}}