/* Dish page v2 additions (gen-dish2.mjs), on top of dish.css. */
.answer{font-size:clamp(17px,1.4vw,20px);line-height:1.55;margin-top:18px;max-width:52ch}
.credit a{color:var(--emberText);text-decoration:underline;text-underline-offset:3px}
.dish .d2-intro,.dish .d2-sec{padding:72px 0 0}
.dish .cook{padding:72px 0 0}.dish .related{padding:72px 0 96px}
.dish .art-cta{margin-top:32px}
.d2-intro h2,.d2-sec h2{font-size:30px;margin-bottom:14px}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.6;max-width:62ch;margin-bottom:18px}
.d2-sub{color:var(--grey);margin:-6px 0 18px;max-width:60ch}
.d2-chips{display:flex;flex-wrap:wrap;gap:8px}
.d2-chips li{display:flex;align-items:center;gap:8px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:9px 16px;font-weight:600;font-size:15px}
.d2-chips i{color:var(--emberText);font-size:18px}
.d2-chips li.ok{background:var(--t-green)}.d2-chips li.ok i{color:#17703D}
.d2-alg{display:flex;gap:8px;align-items:center;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--line);font-weight:600;font-size:15px}
.d2-alg i{color:var(--emberText);font-size:20px}
.d2-box{background:var(--t-orange);border-radius:24px;padding:22px 24px;margin:20px 0}
.d2-box h3{display:flex;gap:10px;align-items:center;font-size:20px;margin-bottom:10px}
.d2-box ul{display:grid;gap:8px;padding-left:20px;list-style:disc}
.d2-box li{line-height:1.6}
.d2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.d2-card{background:var(--card);border-radius:22px;padding:20px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:8px;line-height:1.55}
.d2-card i{font-size:24px;color:var(--emberText)}
.d2-card a{color:var(--emberText);text-decoration:underline}
.d2-swaps,.d2-faq{display:grid;gap:10px;max-width:820px}
.d2-swaps details,.d2-faq details{background:var(--card);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);padding:4px 20px}
.d2-swaps summary,.d2-faq summary{cursor:pointer;padding:14px 0;font-weight:700;display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center;list-style:none}
.d2-swaps summary::-webkit-details-marker,.d2-faq summary::-webkit-details-marker{display:none}
.d2-swaps summary::after,.d2-faq summary::after{content:"+";font-size:22px;color:var(--emberText);flex:none}
details[open]>summary::after{content:"–"}
.d2-swaps summary span{color:var(--grey);font-weight:500;margin-left:auto}
.d2-swaps ul{display:grid;gap:12px;padding:0 0 16px}
.d2-swaps li small{color:var(--grey);font-weight:600}
.d2-swaps li p{color:var(--grey);margin-top:4px;line-height:1.5}
.d2-swaps .warn{color:#B84A0C}
.d2-swaps .note{padding:0 0 16px;font-style:italic}
.d2-faq p{padding:0 0 16px;line-height:1.6}
.dish .rel{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.dish .rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dish .rel{grid-template-columns:minmax(0,1fr)}}
.d2-gw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.d2-gw a{display:flex;flex-direction:column;background:var(--card);border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);transition:transform 200ms var(--ease)}
.d2-gw a:hover{transform:translateY(-3px)}
.d2-gw img{width:100%;aspect-ratio:3/4;object-fit:cover}
.d2-gw span{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.d2-gw small{color:var(--grey);font-weight:600}
@media (max-width:900px){.d2-gw{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Dish photos are 3:4 with the plate in the middle: show them close to that shape so every plate sits centred. */
.dish .dh-img{aspect-ratio:3/4;object-position:50% 50%;max-width:540px;justify-self:end;margin-top:40px}
@media (max-width:900px){.dish .dh-img{max-width:none;margin-top:0;height:auto;aspect-ratio:3/4}}
.dish .rel img,.d2-gw img{aspect-ratio:3/4;object-fit:cover;object-position:50% 50%}