*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        :root{
            --max-w: 680px;
            --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --c-text: #000000;
            --c-muted: #888888;
            --c-border: #e8e8e8;
            --c-bg: #ffffff;
            --c-accent: #0055FF;
        }
        html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
        body{font-family:var(--font);color:var(--c-text);background:var(--c-bg);line-height:1.5;font-weight:400;letter-spacing:-0.01em}
        img{max-width:100%;height:auto;display:block}
        a{color:var(--c-accent);text-decoration:none;transition: opacity 0.2s ease}
        a:hover{opacity:0.7}

        .wrap{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
        
        /* HEADER */
        header{border-bottom:1px solid var(--c-border);padding:2rem 0; text-align: center;}
        header a{font-size:0.85rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-text)}
        
        nav.breadcrumb{font-size:.7rem;color:var(--c-muted);padding:1.5rem 0;text-transform:uppercase;letter-spacing:0.1em}
        nav.breadcrumb a{color:var(--c-text)}
        nav.breadcrumb span::before{content:"→";margin:0 .75rem;font-size:0.8rem;vertical-align:middle}
        
        main{padding:3rem 0}
        footer{border-top:1px solid var(--c-border);padding:2rem 0;font-size:.75rem;color:var(--c-muted);text-align:center;letter-spacing:0.02em}

        /* HERO */
        .recipe-hero img{width:100%;aspect-ratio:3/2;object-fit:cover;opacity:0.9}
        .recipe-hero h1{
            font-family: var(--font);
            font-size: 2.5rem; 
            margin: 2rem 0 1rem; 
            line-height: 1.1; 
            font-weight: 200;
            letter-spacing: -0.03em;
            text-align: center;
            color: var(--c-text);
        }
        .recipe-meta{
            display: flex; 
            justify-content: center; 
            flex-wrap:wrap;
            gap: .25rem 1rem; 
            font-size:.7rem; 
            color:var(--c-muted); 
            margin-bottom: 2rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-weight: 500;
        }
        .recipe-meta time,.recipe-meta span{white-space:nowrap}

        /* SUMMARY */
        .recipe-summary{font-size:1rem;margin-bottom:3rem; text-align: center; font-weight: 300; color: #444; line-height: 1.8;}
        .recipe-summary p{margin-bottom:1.5rem}

        /* INFO CARD */
        .recipe-card{
            display: flex; 
            justify-content: center;
            flex-wrap: wrap;
            gap: 1.5rem 3rem;
            background: transparent;
            border:none;
            border-top: 1px solid var(--c-border);
            border-bottom: 1px solid var(--c-border);
            padding:1.5rem 0;
            margin-bottom:3rem;
        }
        .recipe-card div { text-align: center; }
        .recipe-card dt{font-size:.65rem;text-transform:uppercase;letter-spacing:0.15em;color:var(--c-muted);margin-bottom: 0.25rem; font-weight: 500;}
        .recipe-card dd{font-size:1.25rem;margin:0;font-weight:300;letter-spacing:-0.02em}

        .recipe-section{margin-bottom:3rem}
        .recipe-section h2{
            font-size: 0.75rem; 
            margin-bottom:1.5rem; 
            padding-bottom:0;
            border-bottom:none;
            text-align: center;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--c-text);
        }

        /* INGREDIENTS */
        .ingredients-list{list-style:none;padding:0;font-size:0.9rem;font-weight:400}
        .ingredients-list li{padding:.6rem 0;border-bottom:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:baseline}
        .ingredients-list li::before{content:"";display:none}
        .ingredients-list li span { color: var(--c-muted); font-size: 0.8rem; text-align: right; max-width: 40%; }

        /* INSTRUCTIONS */
        .instructions-list{list-style:none;counter-reset:steps;padding:0}
        .instructions-list li{
            counter-increment:steps;
            padding:0 0 2rem 3.5rem; /* Space on the left for numbers */
            border:none;
            position: relative;
            text-align: left; /* Left aligned text */
        }
        .instructions-list li::before{
            content: counter(steps); 
            position: absolute;
            left: 0; 
            top: 0;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--c-accent); /* Bright Blue Accent */
            font-family: var(--font);
            letter-spacing: -0.02em;
        }
        .instructions-list li p { font-size: 0.95rem; line-height: 1.7; }
        .instructions-list li strong { font-weight: 600; color: var(--c-text); display: block; margin-bottom: 0.25rem; }

        /* NOTES */
        .recipe-notes{
            background:transparent;
            border-left:1px solid var(--c-border);
            padding:0 0 0 1.5rem;
            font-size: 0.9rem;
            color: var(--c-muted);
            border-radius:0;
        }
        .recipe-notes h3{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;color:var(--c-text);font-weight:600}
        .recipe-notes ul{list-style:none}
        .recipe-notes li{margin:.5rem 0}

        /* NUTRITION */
        .nutrition-grid{
            display: flex; 
            flex-wrap: wrap; 
            justify-content: center; 
            gap: 0.75rem; 
            font-size: 0.75rem; 
            padding-top: 0.5rem;
        }
        .nutrition-grid div{
            background: transparent;
            padding: 0;
            border: 1px solid var(--c-border);
            border-radius: 2rem;
            padding: 0.5rem 1rem;
            text-align: center;
            min-width: 80px;
        }
        .nutrition-grid .n-label{display:block;font-size:.6rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.1rem}
        .nutrition-grid .n-value{font-weight:500;color:var(--c-text);display:block;font-size:0.9rem}

        /* RATINGS */
        .rating-section { text-align: center; }
        .rating-stars{color:var(--c-border);font-size:1rem;letter-spacing:0.2em}
        .rating-stars .active { color: var(--c-text); }
        .reviews-list{margin-top:2rem;text-align:left;border-top:1px solid var(--c-border);padding-top:1rem}
        .review-item{padding:1.5rem 0;border-bottom:1px solid var(--c-border)}
        .review-item cite{font-style:normal;font-weight:600;font-size:0.9rem;letter-spacing:0.02em}
        .review-item time{font-size:.7rem;color:var(--c-muted);margin-left:.5rem;text-transform:uppercase}
        .review-item p{margin-top:.5rem;font-size:0.9rem;color:#444;line-height:1.6}
        .review-item .rating-stars { font-size: 0.6rem; }

        .jump-link{
            display:inline-block;
            background: transparent;
            color: var(--c-text);
            padding: 0;
            border-radius: 0;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.7rem;
            margin: 0 0 1rem 0;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            border-bottom: 1px solid var(--c-text);
        }
        .jump-link:hover{color:var(--c-accent);border-color:var(--c-accent);opacity:1}

        .print-btn{
            background:none;
            border:none;
            padding:0;
            font-size:0.7rem;
            text-transform:uppercase;
            letter-spacing:0.1em;
            float:none;
            display:block;
            margin:0 auto 1.5rem;
            color:var(--c-muted);
            font-family:var(--font);
            font-weight:500
        }

        /* FAQ */
        .faq-section details{border-bottom:1px solid var(--c-border);padding:1rem 0}
        .faq-section summary{font-weight:400;font-size:1rem;letter-spacing:-0.01em}
        .faq-section summary::after{content:"+" ;font-size:1.2rem;color:var(--c-accent);font-weight:300;float:right}
        .faq-section details[open] summary::after{content:"−"}
        .faq-section details p{margin:.75rem 0 .25rem;color:var(--c-muted);font-size:0.9rem;padding-left:0}

        /* CTA BOX */
        .cta-box{
            background:var(--c-text);
            color:var(--c-bg);
            border:none;
            padding: 2.5rem 1.5rem;
            text-align: center;
            margin: 3rem 0;
        }
        .cta-box h3{font-weight:300;font-size:1.5rem;margin-bottom:0.5rem;letter-spacing:-0.02em;color:#fff}
        .cta-box p{font-size:.7rem;color:rgba(255,255,255,0.7);margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:0.15em}
        .cta-box a{
            background:transparent;
            color:var(--c-accent);
            padding:0;
            font-weight:500;
            font-size:0.8rem;
            text-transform:uppercase;
            letter-spacing:0.1em;
            border-bottom: 1px solid var(--c-accent);
        }

        /* AD SLOT */
        .ad-slot{background:#fafafa;border:none;padding:2rem;text-align:center;font-size:.7rem;color:var(--c-border);margin:2rem 0;letter-spacing:0.2em;text-transform:uppercase}

        /* RELATED */
        .related-grid{display:block;margin-top:1rem}
        .related-card{
            display:flex;
            align-items:center;
            gap:1.5rem;
            border:none;
            border-bottom:1px solid var(--c-border);
            padding:1.25rem 0;
            color:var(--c-text)
        }
        .related-card img{
            width:48px;
            height:48px;
            flex-shrink: 0; /* Prevent image from squishing */
            aspect-ratio:1/1;
            object-fit:cover;
            border-radius:0;
            opacity:0.8;
        }
        .related-card .related-info{
            padding:0;
            flex-grow: 1;
            min-width: 0; /* Crucial for text truncation in flexbox */
            overflow: hidden; /* Hide the overflowing text */
        }
        .related-card .related-info h3{
            font-size:1rem;
            font-weight:400;
            letter-spacing:-0.01em;
            margin-bottom:0.15rem;
            white-space: nowrap; /* Keep text on one line */
            overflow: hidden;
            text-overflow: ellipsis; /* Add ... for long titles */
        }
        .related-card .related-info span{font-size:.65rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:0.1em;font-weight:500}

        @media print{
            header,footer,nav,.jump-link,.print-btn,.rating-section,.reviews-list,.ad-slot,.cta-box,.related-section{display:none}
            body{font-size:12pt;color:#000}
            .recipe-section h2{text-transform:none;letter-spacing:0;font-weight:bold}
        }