/* Dadi's Rasoi: desktop layout. Everything is inside the >=1000px query so phones and tablets (mobile layout) are untouched.
   Page DOM: main.rs > nav.crumb, section.rs-hero (> .rs-kick, h1, p, .rs-key, .s2-cta), nav.rs-toc, div.rs-list (> article.rs-r > .rs-pic + .rs-body), p.rs-safe, div.rs-links
   Cook mode DOM (studio2.js): div.rs-studio.s2-studio > .s2-bar, .rs-head, .rs-seg, .rs-panes (> section.rs-need, section.rs-steps), p.rs-tip, .pz-nav
   Page rules use the main.rs prefix because the cook-mode div also carries the class rs. */
@media (min-width:1000px){

/* ================= recipes page ================= */
main.rs{max-width:1560px;padding:8px 40px 72px;display:grid;grid-template-columns:clamp(220px,18vw,260px) minmax(0,1fr);column-gap:32px;align-items:start}
main.rs>.crumb{grid-column:1/-1;grid-row:1}

main.rs>.rs-hero{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);column-gap:56px;align-items:center;padding:48px 56px;border-radius:32px;margin-bottom:32px}
main.rs .rs-hero>.rs-kick{grid-column:1;grid-row:1;justify-self:start}
main.rs .rs-hero>h1{grid-column:1;grid-row:2;font-size:clamp(48px,5vw,76px)}
main.rs .rs-hero>p{grid-column:1;grid-row:3;font-size:18px;max-width:58ch;margin-top:14px}
main.rs .rs-hero>.rs-key{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-start;align-self:end;gap:10px;margin:0}
main.rs .rs-hero>.rs-key span{font-size:15px;padding:9px 16px}
main.rs .rs-hero>.s2-cta{grid-column:2;grid-row:3;align-self:start;margin:18px 0 0}

/* recipe index: sticky vertical list in the left rail */
main.rs>.rs-toc{grid-column:1;grid-row:3;position:sticky;top:88px;align-self:start;flex-direction:column;flex-wrap:nowrap;gap:6px;margin:0;counter-reset:rt}
main.rs>.rs-toc::before{content:"Recipes";font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#5A6573;padding:0 6px 8px}
main.rs>.rs-toc a{counter-increment:rt;justify-content:flex-start;gap:12px;min-height:46px;padding:0 14px;border-radius:14px;background:#FBF9F4;color:#16202C;border:1px solid rgba(22,32,44,.10)}
main.rs>.rs-toc a::before{content:counter(rt);display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#145C63;color:#fff;font:700 12px/1 Inter,system-ui,sans-serif}
main.rs>.rs-toc a:hover{background:#fff}
main.rs>.rs-toc a:focus-visible{outline:3px solid #E8590C;outline-offset:2px}
main.rs:has(#besan-ladoo:target) .rs-toc a[href="#besan-ladoo"],main.rs:has(#coconut-ladoo:target) .rs-toc a[href="#coconut-ladoo"],main.rs:has(#kheer:target) .rs-toc a[href="#kheer"],main.rs:has(#shakarpara:target) .rs-toc a[href="#shakarpara"],main.rs:has(#chivda:target) .rs-toc a[href="#chivda"],main.rs:has(#kaju-katli:target) .rs-toc a[href="#kaju-katli"]{background:#145C63;color:#fff;border-color:#145C63}
main.rs:has(#besan-ladoo:target) .rs-toc a[href="#besan-ladoo"]::before,main.rs:has(#coconut-ladoo:target) .rs-toc a[href="#coconut-ladoo"]::before,main.rs:has(#kheer:target) .rs-toc a[href="#kheer"]::before,main.rs:has(#shakarpara:target) .rs-toc a[href="#shakarpara"]::before,main.rs:has(#chivda:target) .rs-toc a[href="#chivda"]::before,main.rs:has(#kaju-katli:target) .rs-toc a[href="#kaju-katli"]::before{background:#fff;color:#145C63}

main.rs>.rs-list{grid-column:2;grid-row:3;margin:0;gap:24px}
main.rs .rs-r{grid-template-columns:minmax(0,1fr);border-radius:22px}
main.rs .rs-r:target{box-shadow:0 0 0 2px #145C63,0 8px 24px rgba(22,32,44,.05)}
main.rs .rs-pic{flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;padding:20px 26px}
main.rs .rs-pic .em{font-size:52px}
main.rs .rs-pic h2{font-size:30px;margin:0}
main.rs .rs-body{display:flex;flex-direction:column;padding:24px 28px}
main.rs .rs-body>.rs-cookcta{margin-top:auto;padding-top:14px}
main.rs>.rs-safe{grid-column:1/-1;grid-row:4;margin-top:40px}
main.rs>.rs-links{grid-column:1/-1;grid-row:5}

@media (min-width:1360px){
  main.rs>.rs-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
}
@media (min-width:1360px) and (max-width:1499px){
  main.rs .rs-cols{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ================= cook mode: ingredients left, big steps right ================= */
.rs-studio.s2-studio{display:grid;grid-template-columns:clamp(300px,28vw,420px) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:16px 24px;align-items:stretch;padding:14px 32px 24px!important}
.rs-studio.s2-studio>.s2-bar{grid-column:1/-1;grid-row:1}
.rs-studio.s2-studio>.rs-head{grid-column:1/-1;grid-row:2;width:auto;max-width:none;margin:0;padding:18px 28px;border-radius:20px;gap:18px}
.rs-studio.s2-studio .rs-hem{font-size:56px}
.rs-studio.s2-studio .rs-ht h2{font-size:32px}
.rs-studio.s2-studio .rs-ht i{font-size:15px}
.rs-studio.s2-studio .rs-tags .rs-tag{font-size:13px;padding:6px 12px}
.rs-studio.s2-studio>.rs-panes{display:contents}
.rs-studio.s2-studio .rs-need,.rs-studio.s2-studio .rs-steps{min-height:0;overflow:auto;border:1px solid rgba(22,32,44,.10);border-radius:20px;box-sizing:border-box}
.rs-studio.s2-studio .rs-need{grid-column:1;grid-row:3;background:#FBF9F4;padding:24px 26px}
.rs-studio.s2-studio .rs-steps{grid-column:2;grid-row:3/5;background:#fff;padding:26px 32px}
.rs-studio.s2-studio .rs-panes h3{margin:0 0 14px}
.rs-studio.s2-studio .rs-need ul{font-size:clamp(16px,2.3vh,21px);line-height:1.5;padding-left:22px}
.rs-studio.s2-studio .rs-fun{font-size:15px}
.rs-studio.s2-studio .rs-steps ol{list-style:none;padding:0;counter-reset:rst;display:grid;gap:10px;font-size:clamp(18px,2.6vh,26px);line-height:1.45}
.rs-studio.s2-studio .rs-steps li{counter-increment:rst;position:relative;margin:0;padding:14px 18px 14px 68px;border-radius:16px;background:#F4F1EA}
.rs-studio.s2-studio .rs-steps li.kid{background:#E3F0E0}
.rs-studio.s2-studio .rs-steps li.big{background:#FBE1E7}
.rs-studio.s2-studio .rs-steps li::before{content:counter(rst);position:absolute;left:18px;top:12px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#16202C;color:#fff;font:700 15px/1 Inter,system-ui,sans-serif}
.rs-studio.s2-studio .rs-steps li.kid::before{background:#3F6B3A}
.rs-studio.s2-studio .rs-steps li.big::before{background:#9E3550}
.rs-studio.s2-studio>.rs-tip{grid-column:1;grid-row:4;width:auto;max-width:none;max-height:none;margin:0;padding:16px 18px;font-size:15px;line-height:1.5;overflow:visible;border:1px solid rgba(22,32,44,.06)}
.rs-studio.s2-studio>.rs-tip::before{content:"Tip";display:block;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#9A6B12;margin-bottom:6px}
.rs-studio.s2-studio>.pz-nav{grid-column:1/-1;grid-row:5;justify-self:center;width:100%;max-width:980px;margin:0;gap:14px}
.rs-studio.s2-studio .pz-nav .pz-btn{flex:0 0 auto;min-width:156px;min-height:52px;font-size:16px}
.rs-studio.s2-studio .pz-nav .pz-btn:not(.ghost){background:#145C63}
.rs-studio.s2-studio .pz-nav .pz-btn.ghost{background:#fff;box-shadow:inset 0 0 0 1px rgba(22,32,44,.12)}
.rs-studio.s2-studio .pz-nav .pz-btn:disabled{opacity:.4}
.rs-studio.s2-studio .pz-cnt{flex:1;font-size:15px}

@media (prefers-reduced-motion:no-preference){
  main.rs .rs-r,main.rs>.rs-toc a{transition:box-shadow .2s,background-color .2s}
  main.rs .rs-r:hover{box-shadow:0 12px 30px rgba(22,32,44,.10)}
}
}