:root  {
    --green:#294c29;
    --green-dark:#19381f;
    --orange:#c47b2e;
    --cream:#faf8f3;
    --ink:#1c201b;
    --muted:#72756e;
    --line:#ebe9e2
}


*  {
    box-sizing:border-box
}


html  {
    scroll-behavior:smooth
}


body  {
    margin:0;
    background:#fffdfa;
    color:var(--ink);
    font:15px/1.55 'DM Sans',Arial,sans-serif
}


a  {
    text-decoration:none;
    color:inherit
}


button,input  {
    font:inherit
}


button  {
    cursor:pointer
}


.wrap  {
    width:min(1190px,calc(100% - 64px));
    margin:auto
}


h1,h2,h3  {
    font-family:'Playfair Display',Georgia,serif;
    line-height:1.2
}


h2  {
    font-size:30px;
    margin:7px 0 0
}


.site-header  {
    background:#fffdf9;
    border-bottom:1px solid #f0eee7;
    position:relative;
    z-index:3
}


.nav  {
    height:82px;
    display:flex;
    align-items:center;
    gap:36px
}


.logo  {
    font-family:'Playfair Display',Georgia,serif;
    font-size:27px;
    font-weight:800;
    color:var(--green-dark);
    font-style:italic;
    white-space:nowrap;
    letter-spacing:-1.7px
}


.logo-dot  {
    color:#d24c2c
}


.navlinks  {
    display:flex;
    align-items:center;
    gap:28px;
    margin:auto
}


.navlinks a  {
    font-size:13px;
    font-weight:700
}


.navlinks .current  {
    color:#c8563c;
    border-bottom:2px solid #c8563c
}


.nav-search  {
    border:1px solid #ece9e3;
    box-shadow:0 3px 13px #00000009;
    border-radius:30px;
    padding:8px 14px;
    display:flex;
    gap:8px;
    align-items:center
}


.nav-search span  {
    font-size:24px;
    line-height:1
}


.nav-search input  {
    width:150px;
    border:0;
    outline:0;
    background:none;
    font-size:12px
}


.nav-fav  {
    font-size:29px;
    color:#d45146
}


.hamburger  {
    display:none
}


.hero  {
    background:linear-gradient(100deg,#fffefa,#f6efe4);
    overflow:hidden
}


.hero-layout  {
    min-height:450px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:30px
}


.hero-copy  {
    padding:35px 0
}


.eyebrow  {
    color:#ae732c;
    font-size:11px;
    font-weight:800;
    letter-spacing:2px
}


.hero h1  {
    font-size:clamp(36px,4vw,56px);
    letter-spacing:-1.6px;
    margin:12px 0 20px
}


.hero p  {
    max-width:410px;
    font-size:15px;
    line-height:1.75;
    margin-bottom:25px
}


.btn  {
    display:inline-flex;
    align-items:center;
    gap:18px;
    background:var(--green);
    color:white;
    border:0;
    border-radius:10px;
    padding:13px 23px;
    font-weight:700;
    font-size:13px
}


.btn:hover  {
    background:var(--green-dark)
}


.hero-photo  {
    height:430px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center
}


.hero-photo:before  {
    content:'';
    position:absolute;
    background:#efe5d6;
    border-radius:50%;
    width:450px;
    height:370px;
    transform:rotate(-13deg)
}


.hero-photo img  {
    position:relative;
    width:92%;
    height:92%;
    object-fit:cover;
    border-radius:50%;
    box-shadow:0 16px 45px #36281526
}


.hero-sticker  {
    position:absolute;
    right:0;
    top:45px;
    transform:rotate(14deg);
    font-family:Georgia,serif;
    font-weight:bold;
    font-style:italic;
    font-size:19px;
    text-align:center
}


.category-strip  {
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:14px;
    padding-top:28px;
    padding-bottom:25px
}


.category-pill  {
    text-align:center;
    font-size:12px
}


.category-pill strong  {
    display:block;
    margin-top:10px;
    font-weight:700
}


.category-icon  {
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    border-radius:50%;
    margin:auto;
    font-size:29px;
    color:#c66a1b;
    background:#fff0e1
}


.c1,.c4,.c6  {
    background:#eff2e9;
    color:#5c7e48
}


.c3,.c7  {
    background:#fcebe8;
    color:#c45748
}


.c5  {
    background:#e8f4f3;
    color:#33888b
}


.section-space  {
    padding-top:42px;
    padding-bottom:34px
}


.section-head  {
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin-bottom:21px;
    gap:15px
}


.view-link  {
    font-size:12px;
    font-weight:800;
    color:var(--green)
}


.card-grid  {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px
}


.food-card  {
    background:#fff;
    border:1px solid #efede8;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 14px #00000006
}


.card-picture  {
    height:185px;
    position:relative
}


.card-picture img  {
    width:100%;
    height:100%;
    object-fit:cover
}


.heart  {
    position:absolute;
    right:10px;
    top:10px;
    border:0;
    background:white;
    border-radius:50%;
    width:35px;
    height:35px;
    font-size:24px;
    line-height:1;
    color:#e05148;
    box-shadow:0 2px 10px #0002
}


.heart.is-saved,.outline-btn.is-saved  {
    color:#df4944
}


.card-copy  {
    padding:12px 13px 15px
}


.card-name  {
    display:block;
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    min-height:38px
}


.stars  {
    color:#f19a22;
    letter-spacing:1px
}


.card-rating  {
    margin-top:4px
}


.card-rating small,.rating-line small  {
    color:#767872
}


.card-time  {
    font-size:12px;
    color:#61675f;
    margin-top:7px
}


.banner  {
    height:280px;
    background:var(--green-dark);
    border-radius:13px;
    overflow:hidden;
    position:relative;
    margin-top:10px;
    display:flex;
    align-items:center
}


.banner>img  {
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:55%;
    object-fit:cover;
    mask-image:linear-gradient(to right,transparent,black 50%)
}


.banner-copy  {
    position:relative;
    z-index:1;
    padding:45px 55px;
    color:white;
    max-width:490px
}


.banner-copy .eyebrow  {
    color:#e7cf93
}


.banner h2  {
    font-size:34px;
    margin:10px 0
}


.banner p  {
    font-size:14px
}


.btn-light  {
    background:#fff1d9;
    color:var(--green-dark);
    margin-top:6px
}


.category-grid  {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px
}


.category-card  {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    text-align:center;
    background:#fff;
    padding-bottom:12px
}


.category-card img  {
    height:110px;
    width:100%;
    object-fit:cover
}


.category-card strong  {
    display:block;
    font-size:13px;
    margin-top:7px
}


.category-card small  {
    font-size:11px;
    color:var(--muted)
}


.latest  {
    padding-bottom:80px
}


.site-footer  {
    border-top:1px solid var(--line);
    background:#f6f5ef;
    padding:40px 0
}


.footer-row  {
    display:flex;
    justify-content:space-between
}


.footer-row p  {
    color:var(--muted);
    font-size:13px
}


.footer-row>div:last-child  {
    display:flex;
    gap:25px;
    font-size:13px;
    font-weight:700
}


.recipe-main  {
    padding-top:22px
}


.breadcrumb  {
    font-size:12px;
    color:#7d8179;
    margin-bottom:22px
}


.breadcrumb a  {
    color:#50584e
}


.recipe-hero  {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:36px;
    align-items:start
}


.main-image  {
    position:relative;
    height:360px;
    border-radius:12px;
    overflow:hidden
}


.main-image>img  {
    width:100%;
    height:100%;
    object-fit:cover
}


.big-heart  {
    width:44px;
    height:44px;
    font-size:30px
}


.watch-video  {
    position:absolute;
    right:13px;
    bottom:13px;
    background:#1d201fe6;
    color:white;
    padding:8px 16px;
    border-radius:25px;
    font-size:12px;
    font-weight:700
}


.thumb-row  {
    display:flex;
    gap:8px;
    margin-top:10px
}


.thumb-row img  {
    height:67px;
    width:calc(25% - 6px);
    object-fit:cover;
    border-radius:9px
}


.badges  {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}


.badges span  {
    background:#edf0e8;
    border-radius:30px;
    padding:5px 11px;
    color:#52634a;
    font-size:11px
}


.badges span:nth-child(2)  {
    background:#fceae5;
    color:#bc6559
}


.recipe-intro h1  {
    font-size:clamp(31px,3vw,43px);
    margin:16px 0 10px;
    letter-spacing:-1px
}


.rating-line  {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px
}


.recipe-intro>p  {
    font-size:15px;
    line-height:1.75;
    color:#51554f;
    margin:19px 0
}


.stats-row  {
    display:flex;
    justify-content:space-between;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:19px 0;
    margin:20px 0
}


.stats-row>div  {
    display:grid;
    grid-template-columns:30px 1fr;
    column-gap:5px;
    align-items:center
}


.stat-symbol  {
    grid-row:span 2;
    font-size:27px;
    color:#819269
}


.stats-row b  {
    font-size:13px
}


.stats-row small  {
    font-size:10px;
    color:#797e75
}


.recipe-buttons  {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap
}


.outline-btn  {
    background:white;
    border:1px solid var(--line);
    border-radius:10px;
    padding:11px 14px;
    font-weight:700;
    font-size:13px
}


.recipe-body  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    padding-top:65px
}


.column-title  {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}


.recipe-body h2  {
    font-size:27px;
    margin:0 0 20px
}


.servings  {
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    border-radius:9px;
    overflow:hidden;
    font-size:12px;
    white-space:nowrap
}


.servings button  {
    border:0;
    background:#fff;
    padding:7px 10px
}


.servings span  {
    font-weight:800
}


.servings small  {
    margin:0 7px 0 4px
}


.ingredient-list label  {
    display:flex;
    align-items:start;
    gap:12px;
    margin:0 0 17px;
    font-size:14px;
    cursor:pointer
}


.ingredient-list input  {
    appearance:none;
    border:1px solid #c7cbc4;
    width:18px;
    height:18px;
    border-radius:5px;
    flex-shrink:0;
    margin:2px 0 0
}


.ingredient-list input:checked  {
    background:var(--green);
    border-color:var(--green)
}


.ingredient-list input:checked:after  {
    content:'✓';
    color:white;
    font-size:13px;
    display:block;
    text-align:center
}


.ingredient-list label.done .ingredient-name  {
    text-decoration:line-through;
    color:#aaa
}


.step  {
    display:grid;
    grid-template-columns:27px 1fr;
    gap:14px;
    margin-bottom:23px
}


.step-num  {
    background:var(--green);
    color:#fff;
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:700
}


.step h3  {
    font:800 14px 'DM Sans',sans-serif;
    margin:1px 0 5px
}


.step p  {
    font-size:13px;
    line-height:1.7;
    color:#646962;
    margin:0
}


.step-image  {
    width:100%;
    max-width:350px;
    border-radius:10px;
    margin-top:12px
}


.pro-tip  {
    display:flex;
    gap:15px;
    background:#eeefe5;
    border-radius:12px;
    padding:19px 22px;
    margin:28px 0
}


.pro-tip>span  {
    font-size:24px;
    color:var(--green)
}


.pro-tip strong  {
    font-size:15px
}


.pro-tip p  {
    margin:3px 0;
    font-size:13px;
    color:#62685d
}


.extra-info  {
    padding:12px 0;
    max-width:850px
}


.extra-info h2  {
    font-size:25px
}


.extra-info p  {
    color:#5b6158;
    line-height:1.8
}


.related  {
    padding-top:45px;
    padding-bottom:80px
}


.video-section  {
    max-width:850px;
    margin:40px auto
}


.video-section video  {
    width:100%;
    background:black;
    border-radius:12px;
    max-height:470px
}


@media(max-width:850px)  {
    .nav  {
    gap:15px
}


.navlinks  {
    gap:12px
}


.nav-search input  {
    width:100px
}


.hero-layout  {
    min-height:370px
}


.hero-photo  {
    height:340px
}


.card-grid  {
    grid-template-columns:repeat(2,1fr)
}


.category-strip  {
    grid-template-columns:repeat(4,1fr)
}


.category-grid  {
    grid-template-columns:repeat(3,1fr)
}


.recipe-hero  {
    gap:22px
}


.recipe-body  {
    gap:25px
}

}


@media(max-width:600px)  {
    .wrap  {
    width:calc(100% - 32px)
}


.nav  {
    height:66px;
    gap:12px
}


.hamburger  {
    display:block;
    border:0;
    background:transparent;
    font-size:24px;
    margin-left:auto
}


.navlinks  {
    display:none;
    position:absolute;
    top:66px;
    left:0;
    right:0;
    background:white;
    padding:20px;
    box-shadow:0 10px 15px #0001;
    flex-direction:column;
    align-items:start
}


.navlinks.open  {
    display:flex
}


.nav-search  {
    display:none
}


.nav-fav  {
    font-size:25px
}


.hero-layout  {
    grid-template-columns:1fr;
    gap:0
}


.hero-copy  {
    padding:45px 0 10px
}


.hero h1  {
    font-size:39px
}


.hero-photo  {
    height:280px
}


.hero-photo:before  {
    width:290px;
    height:240px
}


.hero-photo img  {
    height:95%;
    width:75%
}


.hero-sticker  {
    font-size:13px;
    right:5px
}


.category-strip  {
    gap:12px 5px
}


.category-icon  {
    width:51px;
    height:51px
}


.category-pill  {
    font-size:10px
}


.section-space  {
    padding-top:27px
}


.section-head h2  {
    font-size:24px
}


.card-grid  {
    gap:12px
}


.card-picture  {
    height:135px
}


.card-name  {
    font-size:12px
}


.card-copy  {
    padding:10px
}


.banner  {
    height:275px
}


.banner-copy  {
    padding:25px;
    max-width:80%
}


.banner h2  {
    font-size:27px
}


.banner>img  {
    width:65%;
    opacity:.4
}


.category-grid  {
    gap:10px
}


.category-card img  {
    height:80px
}


.category-card strong  {
    font-size:11px
}


.recipe-hero,.recipe-body  {
    grid-template-columns:1fr
}


.main-image  {
    height:280px
}


.recipe-intro h1  {
    font-size:34px
}


.recipe-body  {
    padding-top:38px
}


.recipe-intro>p  {
    margin:14px 0
}


.footer-row  {
    display:block
}


.footer-row>div:last-child  {
    margin-top:20px
}


.related  {
    padding-bottom:45px
}

}


@media print  {
    .site-header,.site-footer,.recipe-buttons,.related,.heart,.watch-video,.thumb-row  {
    display:none!important
}


.recipe-hero,.recipe-body  {
    display:block
}


.main-image  {
    height:220px
}


.wrap  {
    width:100%
}

}


/* Readability and responsive refinements */
body  {
    font-size:16px;
    line-height:1.7;
    color:#242923;
    background:#fffefa
}


.navlinks a,.view-link  {
    font-size:14px
}


.nav-search input  {
    font-size:14px
}


.hero p,.recipe-intro>p  {
    font-size:17px;
    line-height:1.8;
    color:#444b42
}


.hero p  {
    color:#3b433a
}


.eyebrow  {
    font-size:12px;
    letter-spacing:1.6px
}


.category-pill  {
    font-size:13px
}


.card-name  {
    font-size:16px;
    min-height:44px
}


.card-rating,.card-time  {
    font-size:14px
}


.card-rating small  {
    font-size:13px
}


.category-card strong  {
    font-size:15px
}


.category-card small  {
    font-size:12px
}


.breadcrumb  {
    font-size:14px
}


.badges span  {
    font-size:13px
}


.recipe-intro h1  {
    font-size:clamp(34px,3.4vw,48px)
}


.rating-line  {
    font-size:15px
}


.stats-row b  {
    font-size:15px
}


.stats-row small  {
    font-size:12px
}


.recipe-body h2  {
    font-size:30px
}


.ingredient-list label  {
    font-size:16px;
    line-height:1.65;
    margin-bottom:18px
}


.step  {
    grid-template-columns:34px 1fr;
    gap:16px;
    margin-bottom:29px
}


.step-num  {
    width:34px;
    height:34px;
    font-size:15px
}


.step h3  {
    font-size:17px;
    line-height:1.5
}


.step p  {
    font-size:16px;
    line-height:1.85;
    color:#4b5449
}


.pro-tip p,.extra-info p  {
    font-size:16px;
    line-height:1.8
}


.food-card,.category-card  {
    transition:transform .18s,box-shadow .18s
}


.food-card:hover,.category-card:hover  {
    transform:translateY(-3px);
    box-shadow:0 12px 25px #00000012
}


.card-picture img,.category-card img,.main-image img  {
    background:#f1ede5
}


@media(max-width:600px)  {
    .hero p,.recipe-intro>p  {
    font-size:16px
}


.card-name  {
    font-size:14px;
    min-height:40px
}


.card-rating,.card-time  {
    font-size:12px
}


.category-card strong  {
    font-size:13px
}


.ingredient-list label,.step p  {
    font-size:16px
}


.recipe-body  {
    gap:40px
}


.recipe-main  {
    padding-top:16px
}


.stats-row  {
    gap:10px
}


.stats-row>div  {
    grid-template-columns:24px 1fr
}


.stat-symbol  {
    font-size:22px
}


.card-picture  {
    height:150px
}

}


/* =========================================================
   HOMEPAGE V4 — COMPACT EDITORIAL LAYOUT (NO GIANT HERO)
   ========================================================= */
.welcome-section   {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    padding-top: 50px;
    padding-bottom: 30px;
}


.welcome-section h1   {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(34px, 4vw, 53px);
    line-height: 1.15;
    margin: 9px 0 13px;
}


.welcome-section p   {
    color: #62695e;
    font-size: 17px;
    line-height: 1.7;
    margin: 0;
    max-width: 620px;
}


.welcome-section .btn   {
    flex-shrink: 0;
}


.category-strip   {
    padding-top: 22px;
    padding-bottom: 22px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.editorial-grid   {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 24px;
}


.editorial-feature   {
    position: relative;
    min-height: 395px;
    border-radius: 16px;
    overflow: hidden;
    background: #edf0e7;
}


.editorial-feature > a   {
    display: block;
    height: 100%;
}


.editorial-feature img   {
    display: block;
    width: 100%;
    height: 395px;
    object-fit: cover;
}


.editorial-feature-copy   {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    padding: 68px 28px 25px;
    background: linear-gradient(transparent, rgba(0,0,0,.78));
}


.editorial-feature-copy .eyebrow   {
    color: #ffdc9b;
}


.editorial-feature-copy h3   {
    font: 700 29px/1.25 'Playfair Display', Georgia, serif;
    margin: 9px 0;
}


.editorial-feature-copy > span:last-child   {
    font-size: 14px;
}


.editorial-side   {
    display: grid;
    gap: 14px;
}


.editorial-mini   {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 17px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}


.editorial-mini img   {
    display: block;
    width: 145px;
    height: 105px;
    object-fit: cover;
    border-radius: 9px;
}


.editorial-mini h3   {
    font: 700 18px/1.35 'Playfair Display', Georgia, serif;
    margin: 7px 0;
}


.editorial-mini small   {
    color: #657061;
    font-size: 13px;
}


.card-name   {
    line-height: 1.45;
}


@media (max-width: 850px)   {
    .editorial-grid   {
    grid-template-columns: 1fr;
}


.editorial-side   {
    grid-template-columns: repeat(3, minmax(0,1fr));
}


.editorial-mini   {
    grid-template-columns: 1fr;
}


.editorial-mini img   {
    width: 100%;
    height: 130px;
}

}


@media (max-width: 600px)   {
    .welcome-section   {
    display: block;
    padding-top: 30px;
}


.welcome-section .btn   {
    margin-top: 20px;
}


.welcome-section p   {
    font-size: 16px;
}


.editorial-feature, .editorial-feature img   {
    min-height: 270px;
    height: 270px;
}


.editorial-feature-copy h3   {
    font-size: 23px;
}


.editorial-side   {
    grid-template-columns: 1fr;
}


.editorial-mini   {
    grid-template-columns: 110px 1fr;
}


.editorial-mini img   {
    width: 110px;
    height: 95px;
}


.editorial-mini h3   {
    font-size: 16px;
}

}


/* ============================================================
   HOMEPAGE V5: Compact discovery header + three equal image cards
   No oversized hero or dominant featured recipe.
   ============================================================ */
.discovery-top   {
    padding-top: 42px;
}


.discovery-heading   {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 32px;
    margin-bottom: 26px;
}


.discovery-heading h1   {
    font-size: clamp(31px, 3.7vw, 48px);
    margin: 8px 0 8px;
    letter-spacing: -1px;
}


.discovery-heading p   {
    font-size: 16px;
    color: #666c63;
    margin: 0;
}


.discovery-search   {
    display: flex;
    min-width: 385px;
    padding: 5px;
    background: #fff;
    border: 1px solid #e7e7de;
    border-radius: 12px;
    box-shadow: 0 5px 22px #1b30100a;
}


.discovery-search input   {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    padding: 11px 12px;
    font-size: 14px;
}


.discovery-search button   {
    background: #294c29;
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    font-weight: 700;
    white-space: nowrap;
}


.discovery-grid   {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}


.discovery-card   {
    position: relative;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    background: #e9e6df;
}


.discovery-card a, .discovery-card img   {
    display: block;
    width: 100%;
    height: 100%;
}


.discovery-card img   {
    object-fit: cover;
    transition: transform .35s ease;
}


.discovery-card:hover img   {
    transform: scale(1.045);
}


.discovery-card:after   {
    content: '';
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, rgba(0,0,0,.79));
    pointer-events: none;
}


.discovery-card-content   {
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 22px;
    right: 22px;
    color: #fff;
}


.discovery-card-content span   {
    color: #f5d4a2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}


.discovery-card-content h2   {
    font-size: 23px;
    margin: 7px 0;
    line-height: 1.25;
}


.discovery-card-content small   {
    font-size: 12px;
}


@media (max-width: 850px)   {
    .discovery-heading   {
    display: block;
}


.discovery-search   {
    margin-top: 20px;
    min-width: 0;
    max-width: 550px;
}


.discovery-card   {
    height: 250px;
}


.discovery-card-content h2   {
    font-size: 19px;
}

}


@media (max-width: 600px)   {
    .discovery-top   {
    padding-top: 26px;
}


.discovery-heading h1   {
    font-size: 34px;
}


.discovery-grid   {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}


.discovery-card   {
    height: 230px;
}


.discovery-card:first-child   {
    grid-column: 1 / -1;
    height: 275px;
}


.discovery-card-content   {
    left: 13px;
    right: 13px;
    bottom: 13px;
}


.discovery-card-content h2   {
    font-size: 18px;
}


.discovery-search button   {
    padding: 10px;
    font-size: 12px;
}

}


/* V6: editorial sections and supplied Fordelish identity */
.brand-logo  {
    display:block;
    width:154px;
    height:65px;
    object-fit:contain;
    object-position:center
}


.site-footer .brand-logo  {
    width:170px;
    height:86px
}


.nav .logo  {
    display:flex;
    align-items:center;
    flex:0 0 auto
}


.section-subtitle  {
    font-size:14px;
    color:#777b71;
    margin:8px 0 0
}


.popular-editorial  {
    display:grid;
    grid-template-columns:1.55fr 1fr 1fr;
    grid-template-rows:220px 220px;
    gap:16px
}


.popular-tile  {
    position:relative;
    min-width:0;
    overflow:hidden;
    border-radius:15px;
    background:#213a27
}


.popular-tile-lead  {
    grid-row:span 2
}


.popular-tile>a  {
    display:block;
    width:100%;
    height:100%
}


.popular-tile img  {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s
}


.popular-tile:hover img,.category-editorial-card:hover img  {
    transform:scale(1.055)
}


.popular-tile:after  {
    content:"";
    position:absolute;
    inset:30% 0 0;
    background:linear-gradient(transparent,rgba(0,0,0,.78));
    pointer-events:none
}


.popular-tile-copy  {
    position:absolute;
    z-index:1;
    bottom:20px;
    left:20px;
    right:18px;
    color:#fff
}


.popular-tile-copy h3  {
    font-size:20px;
    line-height:1.25;
    margin:6px 0 9px;
    color:white
}


.popular-tile-lead .popular-tile-copy  {
    bottom:29px;
    left:30px
}


.popular-tile-lead .popular-tile-copy h3  {
    font-size:34px
}


.tile-kicker  {
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:800;
    color:#f6c47d
}


.tile-details  {
    font-size:12px;
    color:#f4f0e8
}


.category-editorial  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:17px
}


.category-editorial-card  {
    height:230px;
    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#e8e7df
}


.category-editorial-card img  {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s
}


.category-editorial-card:after  {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(19,38,22,.83),transparent 85%)
}


.category-editorial-card>div  {
    position:absolute;
    z-index:1;
    left:28px;
    top:50%;
    transform:translateY(-50%);
    color:white
}


.category-editorial-card span  {
    font-size:10px;
    letter-spacing:2px;
    color:#eac88f;
    font-weight:800
}


.category-editorial-card h3  {
    font-size:28px;
    margin:7px 0 10px;
    color:white
}


.category-editorial-card small  {
    font-size:13px
}


.fresh-section  {
    padding-bottom:90px
}


.fresh-layout  {
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:38px
}


.fresh-spotlight  {
    background:#f6f2e9;
    border-radius:15px;
    overflow:hidden
}


.fresh-spotlight>img  {
    display:block;
    width:100%;
    height:310px;
    object-fit:cover
}


.fresh-spotlight-body  {
    padding:24px 28px 30px
}


.fresh-spotlight-body h3  {
    font-size:29px;
    margin:8px 0
}


.fresh-spotlight-body p  {
    font-size:14px;
    color:#62685e;
    line-height:1.7
}


.fresh-spotlight-body strong  {
    font-size:13px;
    color:#294c29
}


.fresh-list  {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px
}


.fresh-list-item  {
    display:grid;
    grid-template-columns:125px 1fr;
    align-items:center;
    gap:18px;
    padding-bottom:13px;
    border-bottom:1px solid #ece9e0
}


.fresh-list-item img  {
    width:125px;
    height:96px;
    object-fit:cover;
    border-radius:10px
}


.fresh-list-item h3  {
    font:700 17px/1.3 'DM Sans',sans-serif;
    margin:6px 0 7px
}


.fresh-list-item small  {
    font-size:12px;
    color:#74786e
}


@media(max-width:850px)  {
    .popular-editorial  {
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3,205px)
}


.popular-tile-lead  {
    grid-column:span 2;
    grid-row:auto
}


.fresh-layout  {
    gap:22px
}


.fresh-list-item  {
    grid-template-columns:95px 1fr
}


.fresh-list-item img  {
    width:95px;
    height:86px
}

}


@media(max-width:600px)  {
    .brand-logo  {
    width:116px;
    height:56px
}


.popular-editorial  {
    grid-template-columns:1fr 1fr;
    grid-template-rows:290px repeat(2,180px);
    gap:10px
}


.popular-tile-copy  {
    left:12px;
    right:10px;
    bottom:12px
}


.popular-tile-copy h3  {
    font-size:15px
}


.popular-tile-lead .popular-tile-copy h3  {
    font-size:26px
}


.popular-tile-lead .popular-tile-copy  {
    left:20px;
    bottom:20px
}


.category-editorial  {
    grid-template-columns:1fr;
    gap:12px
}


.category-editorial-card  {
    height:175px
}


.fresh-layout  {
    grid-template-columns:1fr
}


.fresh-spotlight>img  {
    height:240px
}


.fresh-list-item  {
    grid-template-columns:105px 1fr
}


.fresh-list-item img  {
    width:105px;
    height:90px
}

}


/* Final Fordelish logo: wide artwork with no unnecessary transparent margins */
.site-header .nav   {
    min-height: 88px;
    height: auto;
}


.site-header .brand-logo   {
    width: 155px;
    height: auto;
    max-height: 86px;
    object-fit: contain;
}


.site-footer .brand-logo   {
    width: 245px;
    height: auto;
    max-height: 110px;
    object-fit: contain;
}


@media (max-width: 850px)   {
    .site-header .nav   {
    gap: 16px;
}


.site-header .brand-logo   {
    width: 135px;
    max-height: 74px;
}

}


@media (max-width: 600px)   {
    .site-header .nav   {
    min-height: 70px;
}


.site-header .brand-logo   {
    width: 130px;
    max-height: 68px;
}


.site-footer .brand-logo   {
    width: 215px;
}

}


/* Shared navigation and footer */
.brand-logo  {
    max-width: 175px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}


.footer-columns  {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    align-items: start;
}


.footer-links  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}


.footer-links strong  {
    font-size: 14px;
    color: #19381f;
    margin-bottom: 7px;
}


.footer-links a  {
    font-size: 13px;
    font-weight: 500;
    color: #596457;
}


.footer-links a:hover  {
    color: #c47b2e;
}


.footer-bottom  {
    border-top: 1px solid #e4e5dc;
    margin-top: 32px;
    padding-top: 19px;
    color: #72756e;
    font-size: 12px;
}


@media (max-width: 700px)  {
    .footer-columns  {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


.footer-brand  {
    grid-column: 1 / -1;
}

}