:root {
           --primary-gold: #D4AF37;
           --deep-gold: #B8960C;
           --light-gold: #F4E6A7;
           --charcoal: #2C2C2C;
           --soft-charcoal: #3A3A3A;
           --warm-white: #FEFEFE;
           --cream: #FAF8F3;
           --sage: #8B9A8B;
           --light-sage: #A8B5A8;
           --blush: #F5E6E0;
           --shadow-light: rgba(212, 175, 55, 0.15);
           --shadow-medium: rgba(44, 44, 44, 0.2);
           --shadow-heavy: rgba(44, 44, 44, 0.4);
       }

       * {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
       }

       body {
           margin-top: 5%;
           font-family: 'Inter', sans-serif;
           background: var(--cream);
           color: var(--charcoal);
           line-height: 1.6;
       }

       .container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 20px;
       }

       /* Header */
       .header {
           background: var(--warm-white);
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
           position: sticky;
           top: 0;
           z-index: 100;
       }

       .nav-container {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 15px 0;
       }

       .nav-logo {
           font-family: 'Playfair Display', serif;
           font-size: 1.8rem;
           font-weight: 700;
           color: var(--primary-gold);
       }

       .nav-menu {
           display: flex;
           gap: 2rem;
       }

       .nav-link {
           text-decoration: none;
           color: var(--charcoal);
           font-weight: 500;
           position: relative;
           transition: all 0.3s ease;
       }

       .nav-link::after {
           content: '';
           position: absolute;
           bottom: -5px;
           left: 0;
           width: 0;
           height: 2px;
           background: var(--primary-gold);
           transition: width 0.3s ease;
       }

       .nav-link:hover::after {
           width: 100%;
       }

       /* Recipe Hero Section */
       .recipe-hero {
           padding: 40px 0 0 0;
       }

       .recipe-hero-content {
           display: grid;
           grid-template-columns: 1fr 1fr;
           gap: 40px;
           align-items: center;
       }

       .recipe-image-container {
           position: relative;
           border-radius: 15px;
           overflow: hidden;
           box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
       }

       .recipe-main-image {
           width: 100%;
           height: 400px;
           object-fit: cover;
           display: block;
       }

       .recipe-info {
           padding: 20px;
       }

       .recipe-title {
           font-family: 'Playfair Display', serif;
           font-size: 2.8rem;
           font-weight: 700;
           color: var(--charcoal);
           margin-bottom: 15px;
           line-height: 1.2;
       }

       .recipe-meta {
           display: flex;
           flex-wrap: wrap;
           gap: 20px;
           margin-bottom: 25px;
       }

       .meta-item {
           display: flex;
           align-items: center;
           gap: 8px;
           color: var(--sage);
           font-size: 0.95rem;
       }

       .recipe-description {
           color: var(--soft-charcoal);
           margin-bottom: 25px;
           line-height: 1.7;
       }

       .recipe-controls {
           display: flex;
           display: none;
           flex-wrap: wrap;
           gap: 15px;
           margin-bottom: 25px;
           align-items: center;
       }

       .serving-control {
           display: flex;
           align-items: center;
           gap: 10px;
           background: var(--warm-white);
           padding: 8px 15px;
           border-radius: 50px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       }

       .serving-btn {
           background: none;
           border: none;
           font-size: 1.2rem;
           cursor: pointer;
           color: var(--charcoal);
           width: 30px;
           height: 30px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           transition: all 0.3s ease;
       }

       .serving-btn:hover {
           background: var(--primary-gold);
           color: var(--warm-white);
       }

       .serving-value {
           font-weight: 600;
           min-width: 30px;
           text-align: center;
       }

       .unit-toggle {
           background: var(--warm-white);
           padding: 8px 15px;
           border-radius: 50px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
           display: flex;
           gap: 10px;
       }

       .unit-btn {
           background: none;
           border: none;
           cursor: pointer;
           padding: 5px 10px;
           border-radius: 20px;
           transition: all 0.3s ease;
       }

       .unit-btn.active {
           background: var(--primary-gold);
           color: var(--warm-white);
       }

       .author-info {
           display: flex;
           align-items: center;
           gap: 15px;
           margin-top: 25px;
           padding-top: 25px;
           border-top: 1px solid rgba(0, 0, 0, 0.1);
       }

       .author-avatar {
           width: 50px;
           height: 50px;
           border-radius: 50%;
           object-fit: cover;
           border: 2px solid var(--primary-gold);
       }

       .author-details {
           flex: 1;
       }

       .author-name {
           font-weight: 600;
           color: var(--charcoal);
           margin-bottom: 5px;
       }

       .post-date {
           font-size: 0.9rem;
           color: var(--sage);
       }

       /* Recipe Content */
       .recipe-content {
           max-width: 1000px;
           margin: 4rem auto;
           padding: 0 2rem;
       }

       .ingredients-section {
           background: var(--warm-white);
           padding: 30px;
           border-radius: 15px;
           box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
           margin-bottom: 40px;
       }

       .section-title {
           font-family: 'Playfair Display', serif;
           font-size: 2rem;
           font-weight: 600;
           color: var(--charcoal);
           margin-bottom: 20px;
           position: relative;
           padding-bottom: 10px;
       }

       .section-title::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 0;
           width: 60px;
           height: 3px;
           background: var(--primary-gold);
       }

       .ingredients-list {
           list-style-type: none;
           margin-bottom: 30px;
       }

       .ingredients-list li {
           margin-bottom: 12px;
           position: relative;
           display: flex;
           align-items: center;
       }

       .ingredient-amount {
           min-width: 100px;
           font-weight: 600;
           color: var(--primary-gold);
       }

       .ingredient-name {
           flex: 1;
           padding-left: 25px;
           padding-top: 3px;
       }

       .ingredients-list li::before {
           content: '';
           position: absolute;
           left: 0;
           top: 10px;
           width: 12px;
           height: 12px;
           background: var(--primary-gold);
           border-radius: 50%;
       }

       /* Directions Section */
       .directions-section {
           margin-top: 40px;
       }

       .step-card {
           background: var(--warm-white);
           border-radius: 15px;
           box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
           padding: 30px;
           margin-bottom: 40px;
       }

       .step-header {
           display: flex;
           align-items: center;
           margin-bottom: 20px;
       }

       .step-number {
           font-family: 'Playfair Display', serif;
           font-size: 3rem;
           font-weight: 700;
           color: var(--primary-gold);
           margin-right: 20px;
       }

       .step-text {
           line-height: 1.8;
           color: var(--soft-charcoal);
           margin-bottom: 20px;
       }

       .step-images {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
           gap: 15px;
       }

       .step-image {
           border-radius: 10px;
           overflow: hidden;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       }

       .step-image img {
           width: 100%;
           height: 350px;
           object-fit: cover;
           display: block;
       }

       /* Footer */
       .footer {
           background-color: var(--charcoal);
           color: var(--warm-white);
           padding: 60px 0 20px;
           margin-top: 60px;
       }

       .footer-content {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
           gap: 40px;
           margin-bottom: 40px;
       }

       .footer-brand h2 {
           font-family: 'Playfair Display', serif;
           font-size: 1.8rem;
           margin-bottom: 15px;
           color: var(--primary-gold);
       }

       .footer-brand p {
           max-width: 300px;
           line-height: 1.6;
           color: var(--light-sage);
       }

       .footer-nav h4,
       .footer-social h4 {
           margin-bottom: 15px;
           color: var(--warm-white);
       }

       .footer-nav ul,
       .footer-social ul {
           list-style: none;
           padding: 0;
       }

       .footer-nav ul li,
       .footer-social ul li {
           margin-bottom: 10px;
       }

       .footer-nav ul li a {
           color: var(--light-sage);
           text-decoration: none;
           transition: color 0.3s ease;
       }

       .footer-nav ul li a:hover {
           color: var(--primary-gold);
       }

       .social-icons {
           display: flex;
           gap: 15px;
       }

       .social-icons a {
           color: var(--light-sage);
           font-size: 1.2rem;
           transition: color 0.3s ease;
       }

       .social-icons a:hover {
           color: var(--primary-gold);
       }

       .footer-bottom {
           text-align: center;
           padding-top: 20px;
           border-top: 1px solid var(--soft-charcoal);
           color: var(--light-sage);
           font-size: 0.9rem;
       }

       .recipe-note {
           background-color: #fff8e1;
           border-left: 5px solid #ffc107;
           padding: 20px;
           margin: 30px 0;
           border-radius: 8px;
       }

       .recipe-note .note-content {
           font-size: 16px;
           line-height: 1.6;
           color: #555;
       }


       /* Responsive Design */
       @media (max-width: 992px) {

        .step-image img{
            height: 100%;
        }
           .recipe-hero-content {
               grid-template-columns: 1fr;
               gap: 30px;
           }

           .recipe-title {
               font-size: 2.3rem;
           }
       }

       @media (max-width: 768px) {
        body{
            margin: 20% auto;
        }
           .recipe-content {
               padding: 0 1rem;
           }

           .nav-menu {
               display: none;
           }

           .recipe-title {
               font-size: 2rem;
           }

           .section-title {
               font-size: 1.6rem;
           }

           .recipe-controls {
               flex-direction: column;
               align-items: flex-start;
           }

           .ingredients-list li {
               flex-direction: column;
               align-items: flex-start;
               gap: 5px;
           }

           .ingredient-amount {
               min-width: auto;
           }

           .step-images {
               grid-template-columns: 1fr;
           }
       }