:root{
    --bg:#fff; --ink:#1a1a1a; --muted:#6b7280;
    --accent:#ff6a88; --card:#f7f7f7; --chip:#eef2ff; --warn:#ffe6e1;
    --radius:16px; --shadow:0 10px 25px rgba(0,0,0,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family: "Sen", sans-serif;
    line-height:1.35;
}
.wrap{ width:min(1100px,92vw); margin:2rem auto;}

.site-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:1rem 1.25rem; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:5;
}
.brand{font-weight:700}
.site-nav a{color:var(--muted); text-decoration:none; padding:.5rem .75rem}
.site-nav a[aria-current="page"]{color:var(--ink); font-weight:700}

.panel{background:#fff; border-radius:0; box-shadow:var(--shadow); overflow:hidden;}
.panel__heading{margin:1rem 1.25rem 0; color:var(--muted)}

.hero{padding-bottom:1rem}
.hero__image{
    aspect-ratio:16/9; width:100%; background-size:cover; background-position:center;
    border-bottom:1px solid #eee;
    background-image: url("https://img.hellofresh.com/hellofresh_s3/image/prosciutto-wrapped-swiss-chicken-731243f3.jpg")
    }

.hero__text{text-align:center; padding:1rem 1.25rem 1.5rem}
.title{margin:.25rem 0 0; font-size: clamp(1.6rem, 2.5vw + 1rem, 2.6rem);}
.subtitle{color:var(--muted); margin:.35rem 0 0}

.meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1rem }
.chips{display:flex; gap:.5rem; padding:0; margin:0; list-style:none; flex-wrap:wrap}
.chip{background:var(--chip); border-radius:999px; padding:.4rem .8rem}
.chip--warn{background:var(--warn)}
.servings-switch{display:flex; align-items:center; gap:.5rem; color:var(--muted)}
.qty{border:1px solid #e5e7eb; background:#fff; border-radius:8px; padding:.35rem .6rem; cursor:pointer}
.qty.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}

.triple{display:grid; gap:1rem; grid-template-columns:1fr; padding:1rem}
@media (min-width:800px){
    .triple{
    grid-template-columns: 0.6fr 1.5fr 0.9fr;
    }
}
.card{background:var(--card); border-radius:0; padding:1rem; box-shadow:var(--shadow)}
.card h2{margin:.25rem 0 1rem}
.list{margin:0; padding-left:1.1rem}
.two-col{columns:2; column-gap:2rem} @media (max-width:580px){.two-col{columns:1}}

.explore{padding-bottom:.5rem}
.thumbs{
    margin: .75rem 1.25rem 1.25rem; padding:0; list-style:none;
    display:grid; grid-auto-flow:column; grid-auto-columns:70%;
    gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
}
.thumbs > li{scroll-snap-align:start}
.thumbs img{width:100%; height:180px; object-fit:cover; border-radius:0; display:block; box-shadow:var(--shadow)}
.thumbs figcaption{font-size:.95rem; margin:.4rem .2rem 0; color:var(--muted)}
@media (min-width:1000px){
    .thumbs{grid-auto-flow:initial; grid-template-columns:repeat(4,1fr); overflow:visible}
}

.steps{padding:1rem}
.steps__title{margin:.25rem 0 .75rem}
.steps__grid{list-style:none; padding:0; margin:0; display:grid; gap:1rem; grid-template-columns:1fr}
@media (min-width:700px){.steps__grid{ grid-template-columns:repeat(2,1fr)}}
.step figure{margin:0; background:#fff; border:1px solid #eee; border-radius:0; overflow:hidden; box-shadow:var(--shadow)}
.step img{width:100%; height:220px; object-fit:cover; display:block}
.step figcaption{padding:.8rem 1rem; color:#333}
.step figcaption strong{display:block; margin-bottom:.25rem}

.site-footer{text-align:center; color:var(--muted); padding:2rem 1rem; border-top:1px solid #eee}

.img{max-width:100%; height:auto}