.recipes-scene{position:relative;isolation:isolate;min-height:100svh;padding:110px 6% 130px;background:radial-gradient(ellipse at 32% 42%,#65307c30,transparent 55%),var(--bg)}
.recipes-scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,var(--bg) 0%,#100d1366 18%,#100d1350 55%,#100d13c9 85%,var(--bg) 100%),linear-gradient(90deg,#100d1326,#100d137a),url('assets/burger-background.png') center/cover no-repeat}
.recipes-heading{text-align:center;margin-bottom:15px}
.recipes-heading h2{font-size:clamp(42px,5vw,88px);margin-bottom:20px}
.recipes-heading p{color:var(--muted);font-size:clamp(16px,1.5vw,22px)}
.recipe-showcase{display:grid;grid-template-columns:58% 42%;align-items:center;max-width:1400px;margin:0 auto 15px;min-height:490px;gap:0}
.recipe-plate{width:100%;max-width:560px;aspect-ratio:1;background:url('assets/recipes/plate-0.png') center/contain no-repeat;filter:drop-shadow(0 30px 25px #0008)}
.recipe-detail{padding:20px 0 20px 40px}
.recipe-detail .eyebrow{color:#ba9ad8;font-size:10px;line-height:1.6}
.recipe-detail h3{font-size:clamp(25px,2.6vw,42px);font-weight:600;line-height:1.2;letter-spacing:-.025em;margin:20px 0 40px;max-width:470px}
.recipe-metrics{display:flex;gap:clamp(18px,2.5vw,40px);margin:0}
.recipe-metrics>div{display:flex;flex-direction:column-reverse;gap:9px}
.recipe-metrics dt{font-size:12px;color:#bfb0c8}
.recipe-metrics dd{margin:0;font-size:clamp(24px,2.3vw,34px);white-space:nowrap;letter-spacing:-.04em}
.recipe-metrics small{font-size:14px;letter-spacing:0;margin-left:4px}
.nutrition-note{color:#ac9fb5;font-size:11px;margin-top:25px}
.recipe-picker{max-width:1320px;margin:auto}
.recipe-picker-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;color:#d6c9df;font-size:14px}
.recipe-picker-header>span{font-size:56px;font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--text)}
.recipe-controls{display:flex;gap:12px}
.recipe-controls button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff30;background:#ffffff05;font-size:20px}
.recipe-controls button:hover{background:#8b46ff33}
.recipe-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#755888 transparent;padding:5px 3px 20px;overscroll-behavior-x:contain}
.recipe-card{position:relative;flex:0 0 calc((100% - 100px)/6);aspect-ratio:3/4;min-width:0;overflow:hidden;border:1px solid #e1c0fc30;border-radius:16px;background:#241c25;text-align:left;padding:0;scroll-snap-align:start;transition:border-color .2s,box-shadow .2s}
.recipe-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.recipe-card::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#100914e8)}
.recipe-card span{position:absolute;bottom:17px;left:15px;right:12px;z-index:1;font-size:14px;font-weight:600;line-height:1.35}
.recipe-card[aria-pressed="true"]{border-color:#c396ff;box-shadow:0 0 0 2px #9455e8,0 0 24px #9455e82b}
.recipe-card:hover img{transform:scale(1.04)}
@media(max-width:1050px){.recipe-card{flex-basis:calc((100% - 60px)/4)}.recipe-detail{padding-left:24px}.recipe-showcase{min-height:410px}.recipe-metrics{gap:17px}}
@media(max-width:700px){.recipes-scene{padding:90px 22px 110px}.recipes-heading h2{font-size:44px}.recipe-showcase{grid-template-columns:1fr;margin-bottom:35px;min-height:0}.recipe-plate{max-width:420px;justify-self:center;margin:-10px 0 -40px}.recipe-detail{padding:0;text-align:center}.recipe-detail h3{font-size:27px;max-width:360px;margin:18px auto 26px}.recipe-metrics{justify-content:center;gap:28px}.recipe-metrics dd{font-size:27px}.recipe-metrics small{font-size:12px}.recipe-metrics dt{font-size:11px}.recipe-card{flex-basis:70%;max-width:280px;aspect-ratio:3/4}.recipe-card span{font-size:18px;bottom:22px;left:20px}.recipe-track{gap:18px}.recipe-picker-header{font-size:13px}.burger-caption .scroll-cue{align-self:center}}
/* Compensate for transparent space in the plate atlas as well as layout gaps. */
.recipes-heading{margin-bottom:6px}
.recipes-heading h2{margin-bottom:8px}
.recipe-showcase{min-height:0;margin-bottom:6px}
.recipe-plate{margin-top:-90px;margin-bottom:-45px}
.recipe-picker-header{margin-bottom:9px}
@media(min-width:701px){.recipes-scene{padding-top:130px}}
@media(max-width:700px){
  .recipes-scene{padding-top:36px}
  .recipe-showcase{min-height:0;margin-bottom:14px}
  .recipe-plate{margin-top:-60px;margin-bottom:-40px}
  .recipe-track{display:none}
  .recipe-picker-header>span{display:none}
  .recipe-picker-header{justify-content:center}
  .recipe-showcase{touch-action:pan-y pinch-zoom}
  .recipes-scene{padding-bottom:50px}
}
@media(prefers-reduced-motion:reduce){.recipe-card,.recipe-card img{transition:none}}