@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');


/* =========================================================
   NOURISH — VISUAL IDENTITY
   Bold / scientific / human / opinionated
========================================================= */

:root {
    --cream: #f5f1e8;
    --paper: #ffffff;

    --green: #18382a;
    --ink: #172019;

    --pink: #e94f8a;
    --pink-light: #f9dce7;

    --line: #d8d2c7;
    --shadow: #d8d1c6;
}


/* =========================================================
   GENERAL
========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    background-color: var(--cream);
    color: var(--ink);
}

h1,
h2,
h3,
h4 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
}

a {
    color: inherit;
}


/* =========================================================
   NOURISH — HEADER / MASTHEAD
========================================================= */

header {
    position: relative;

    padding: 40px 20px 45px;

    text-align: center;

    background-color: var(--cream);
}

header::before {
    content: "NOURISH YOUR CURIOSITY";

    display: block;

    margin-bottom: 22px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 3px;

    color: var(--pink);
}

header h1 {
    font-size: clamp(64px, 10vw, 60px);

    font-weight: 700;

    letter-spacing: 8px;

    line-height: 0.9;

    margin: 0;
}

header h1 a {
    color: var(--green);

    text-decoration: none;

}

header p {
    font-size: 17px;

    margin: 10px 0 0;

    color: var(--green);

    letter-spacing: 0.5px;
}

.language-switch {
    margin-top: 28px;

    font-size: 12px;

    letter-spacing: 1.5px;
}

.language-switch a {
    color: var(--green);

    text-decoration: none;
}

.language-switch a:hover {
    color: var(--pink);

    text-decoration: underline;

    text-underline-offset: 4px;
}

.language-switch .active {
    color: var(--pink);

    font-weight: 700;
}

.brand-dot {
    display: inline-block;
 
    width: 0.25em;
    height: 0.25em;
 
    margin-left: 0.1em;
 
    background-color: var(--pink);
    border-radius: 50%;
 
    vertical-align: baseline;
}


/* =========================================================
   LANGUAGE SWITCH
========================================================= */

.language-switch {
    margin-top: 22px;
    font-size: 13px;
    letter-spacing: 1px;
}

.language-switch a {
    color: var(--green);
    text-decoration: none;
}

.language-switch a:hover {
    color: var(--pink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.language-switch .active {
    font-weight: 700;
    color: var(--pink);
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */
nav {
    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    padding: 18px 0;

    background-color: var(--cream);
}

nav ul {
    display: flex;

    justify-content: center;

    gap: 42px;

    list-style: none;

    margin: 0;
    padding: 0;
}

nav a {
    position: relative;

    color: var(--green);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 3px;

    background-color: var(--pink);

    transition: width 0.2s ease;
}

nav a:hover::after {
    width: 100%;
}

nav a.active {
    color: var(--pink);
}



/* =========================================================
   MAIN
========================================================= */

main {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 25px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    background-color: var(--green);
    color: var(--cream);

    padding: 100px 70px 110px;
    margin: 0 -25px;

    overflow: hidden;
}

.hero-label {
    position: relative;
    z-index: 1;

    font-size: 20px !important;
    font-weight: 700;

    letter-spacing: 3px;

    color: var(--pink);

    margin: 0 0 35px !important;
}

.hero h2 {
    position: relative;
    z-index: 1;

    max-width: 900px;

    font-size: clamp(58px, 9vw, 105px);
    line-height: 0.9;

    letter-spacing: -4px;

    margin: 0 0 40px;

    color: var(--cream);
}

.hero-text {
    position: relative;
    z-index: 1;

    font-size: 21px !important;
    line-height: 1.55 !important;

    max-width: 580px !important;

    margin: 0 0 35px !important;

    color: var(--cream);
}

.hero .button {
    position: relative;
    z-index: 1;

    display: inline-block;

    background-color: var(--pink);
    color: #ffffff;

    padding: 16px 30px;

    text-decoration: none;
    font-weight: 700;

    border: 2px solid var(--pink);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.hero .button:hover {
    transform: translate(-4px, -4px);
    background-color: var(--green);
    box-shadow: 7px 7px 0 var(--pink);
}

.hero::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    background-color: var(--pink);

    right: -90px;
    bottom: -120px;

    border-radius: 50%;
}

/* =========================================================
   NOURISH IDEA
========================================================= */

.nourish-idea {
    padding: 110px 20px 120px;
}

.section-label {
    font-size: 25px !important;
    font-weight: 700;

    letter-spacing: 3px;
    text-transform: uppercase;

    color: var(--pink);

    margin: 0 0 30px !important;
}

.nourish-idea > h2 {
    font-size: clamp(48px, 7vw, 82px);

    line-height: 0.95;
    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 70px;
}

.nourish-idea-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.idea-step {
    padding: 35px 35px 40px;

    border-right: 1px solid var(--line);
}

.idea-step:last-child {
    border-right: none;
}

.idea-step span {
    display: block;

    font-size: 13px;
    font-weight: 700;

    color: var(--pink);

    letter-spacing: 2px;

    margin-bottom: 30px;
}

.idea-step h3 {
    font-size: 38px;

    color: var(--green);

    margin: 0 0 20px;

    letter-spacing: -1px;
}

.idea-step p {
    font-size: 17px;

    line-height: 1.7;

    max-width: 300px;

    margin: 0;
}

.nourish-idea-ending {
    font-size: 21px !important;

    line-height: 1.5 !important;

    max-width: 600px !important;

    margin: 55px 0 0 !important;

    color: var(--green);
}

.nourish-idea-ending strong {
    color: var(--pink);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .nourish-idea {
        padding: 80px 10px 90px;
    }

    .nourish-idea > h2 {
        font-size: 50px;
        margin-bottom: 50px;
    }

    .nourish-idea-content {
        grid-template-columns: 1fr;
    }

    .idea-step {
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .idea-step:last-child {
        border-bottom: none;
    }

}

/* =========================================================
   FEATURED INVESTIGATION
========================================================= */

.featured-investigation {
    background-color: var(--paper);

    margin: 0 -25px;

    padding: 35px 50px 90px;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.featured-label {
    display: flex;
    justify-content: space-between;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--line);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: var(--pink);
}

.featured-content {
    display: grid;

    grid-template-columns: 1.7fr 0.8fr;

    gap: 90px;

    max-width: 1050px;

    margin: 70px auto 0;
}

.featured-category {
    font-size: 12px !important;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: var(--pink);

    margin: 0 0 30px !important;
}

.featured-text h2 {
    font-size: clamp(48px, 7vw, 82px);

    line-height: 0.93;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}

.featured-text p {
    font-size: 18px !important;

    line-height: 1.75 !important;

    max-width: 600px !important;

    color: var(--ink);

    margin-bottom: 25px !important;
}

.featured-link {
    display: inline-block;

    margin-top: 20px;

    padding-bottom: 5px;

    color: var(--green);

    font-weight: 700;

    text-decoration: none;

    border-bottom: 3px solid var(--pink);

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.featured-link:hover {
    color: var(--pink);

    transform: translateX(5px);
}

.featured-note {
    align-self: center;

    padding: 35px;

    border: 1px solid var(--line);

    border-left: 8px solid var(--pink);

    box-shadow: 8px 8px 0 var(--shadow);
}

.featured-note span {
    display: block;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);

    margin-bottom: 25px;
}

.featured-note p {
    font-size: 22px !important;

    line-height: 1.4 !important;

    color: var(--green);

    margin: 0 0 20px !important;
}

.featured-note strong {
    font-size: 17px;

    line-height: 1.5;

    color: var(--green);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .featured-investigation {
        margin: 0 -20px;

        padding: 30px 25px 70px;
    }

    .featured-content {
        grid-template-columns: 1fr;

        gap: 50px;

        margin-top: 55px;
    }

    .featured-text h2 {
        font-size: 50px;
    }

}

/* =========================================================
   QUESTION SECTION
========================================================= */

.question-section {
    padding: 120px 20px 130px;
}

.question-header {
    max-width: 800px;

    margin-bottom: 70px;
}

.question-header h2 {
    font-size: clamp(50px, 7vw, 82px);

    line-height: 0.95;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 25px;
}

.question-header h2 span {
    color: var(--pink);
}

.question-header > p:last-child {
    font-size: 20px !important;

    line-height: 1.5 !important;

    margin: 0 !important;

    color: var(--ink);
}


/* =========================================================
   QUESTION CARDS
========================================================= */

.question-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.question-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 390px;

    padding: 35px;

    background-color: var(--paper);

    border: 1px solid var(--line);

    box-shadow: 7px 7px 0 var(--shadow);

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.question-card:hover {
    transform: translate(-5px, -5px);

    box-shadow: 11px 11px 0 var(--pink);
}

.question-number {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);

    margin-bottom: auto;
}

.question-card h3 {
    font-size: 35px;

    line-height: 1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 50px 0 25px;
}

.question-card p {
    font-size: 16px !important;

    line-height: 1.65 !important;

    color: var(--ink);

    margin: 0 !important;

    max-width: 300px;
}

.question-arrow {
    align-self: flex-end;

    margin-top: 30px;

    font-size: 28px;

    font-weight: 400;

    color: var(--green);

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.question-card:hover .question-arrow {
    transform: translateX(7px);

    color: var(--pink);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .question-section {
        padding: 90px 10px 100px;
    }

    .question-header {
        margin-bottom: 50px;
    }

    .question-header h2 {
        font-size: 50px;
    }

    .question-grid {
        grid-template-columns: 1fr;
    }

    .question-card {
        min-height: 320px;
    }

}

/* =========================================================
   LATEST INVESTIGATIONS
========================================================= */

.latest-investigations {
    padding: 110px 20px 120px;
}

.latest-header {
    max-width: 1050px;
    margin: 0 auto 65px;
}

.latest-header h2 {
    font-size: clamp(48px, 7vw, 78px);
    line-height: 0.92;
    letter-spacing: -3px;
    color: var(--green);
    margin: 0;
}


/* =========================================================
   INVESTIGATION LIST
========================================================= */

.investigation-list {
    max-width: 1050px;
    margin: 0 auto;
}

.investigation-item {
    display: grid;

    grid-template-columns: 70px 1fr 50px;

    align-items: center;

    gap: 30px;

    padding: 35px 0;

    border-top: 1px solid var(--line);

    text-decoration: none;

    transition:
        padding 0.2s ease,
        border-color 0.2s ease;
}

.investigation-item:last-child {
    border-bottom: 1px solid var(--line);
}

.investigation-item:hover {
    padding-left: 10px;
    border-color: var(--pink);
}

.investigation-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--pink);
}

.investigation-category {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--pink);
    margin: 0 0 10px !important;
}

.investigation-info h3 {
    font-size: 30px;
    line-height: 1.1;
    color: var(--green);
    margin: 0 0 10px;
}

.investigation-info > p:last-child {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--ink);
    max-width: 600px;
    margin: 0 !important;
}

.investigation-arrow {
    justify-self: end;

    font-size: 30px;

    color: var(--green);

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.investigation-item:hover .investigation-arrow {
    transform: translateX(7px);
    color: var(--pink);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .latest-investigations {
        padding: 90px 10px 100px;
    }

    .latest-header h2 {
        font-size: 50px;
    }

    .investigation-item {
        grid-template-columns: 40px 1fr 30px;
        gap: 15px;
        padding: 30px 0;
    }

    .investigation-info h3 {
        font-size: 25px;
    }

}

/* =========================================================
   PAGE INTRO
========================================================= */

.page-intro {
    text-align: left;
    padding: 80px 20px 60px;
}

.page-intro h2 {
    font-size: clamp(48px, 7vw, 76px);
    line-height: 0.98;
    letter-spacing: -2px;
    margin-bottom: 25px;
    color: var(--green);
}

.page-intro p {
    font-size: 20px;
    line-height: 1.65;
    max-width: 650px;
    margin: 0;
}

/* =========================================================
   ABOUT PAGE
========================================================= */

.about-intro,
.about-story,
.about-philosophy,
.about-ending {
    max-width: 1050px;
    margin: 0 auto;
}

.about-intro {
    background-color: var(--paper);
    max-width: none;
    margin: 0 -25px;
    padding: 70px 50px 90px;
    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.about-intro-label,
.about-story-label,
.about-philosophy-label {
    max-width: 1050px;
    margin: 0 auto 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--pink);
}

.about-intro-content {
    max-width: 1050px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 100px;
}

.about-intro-content h3 {
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--green);
    margin: 0;
}

.about-intro-content p,
.about-story-content p,
.about-philosophy-content p,
.about-ending > p {
    font-size: 18px !important;
    line-height: 1.75 !important;
    max-width: 600px;
    margin: 0 0 25px !important;
}


/* =========================================================
   BIG STATEMENT
========================================================= */

.about-statement {
    padding: 130px 20px;
    max-width: 1050px;
    margin: 0 auto;
}

.about-statement h2 {
    font-size: clamp(52px, 8vw, 90px);
    line-height: .92;
    letter-spacing: -4px;
    color: var(--green);
    max-width: 850px;
    margin: 0 0 35px;
}

.about-statement > p:last-child {
    font-size: 24px !important;
    color: var(--pink);
    font-weight: 700;
}


/* =========================================================
   STORY
========================================================= */

.about-story {
    padding: 100px 20px 120px;
    border-top: 2px solid var(--green);
}

.about-story-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.about-philosophy {
    padding: 100px 20px 120px;
}

.about-philosophy-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 100px;
}

.about-philosophy-content h3 {
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1;
    letter-spacing: -2px;
    color: var(--green);
    margin: 0;
}


/* =========================================================
   ENDING
========================================================= */

.about-ending {
    padding: 100px 20px 140px;
    
}

.about-ending h2 {
    font-size: clamp(55px, 8vw, 90px);
    line-height: .92;
    letter-spacing: -4px;
    color: var(--green);
    margin: 0 0 45px;
}

.about-ending > p {
    max-width: 650px;
}

.about-ending .about-final {
    margin-top: 55px !important;
    max-width: 700px;
    font-size: 25px !important;
    line-height: 1.45 !important;
    color: var(--green);
}

.about-ending .about-final strong {
    color: var(--pink);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px) {

    .about-intro {
        margin: 0 -20px;
        padding: 60px 25px 70px;
    }

    .about-intro-content,
    .about-story-content,
    .about-philosophy-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-statement {
        padding: 90px 10px;
    }

    .about-statement h2 {
        font-size: 52px;
    }

    .about-story,
    .about-philosophy,
    .about-ending {
        padding: 80px 10px 100px;
    }

    .about-ending h2 {
        font-size: 54px;
    }

}

/* =========================================================
   TOPICS
========================================================= */

.topics {
    padding: 70px 0;
}

.topics > h2 {
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 35px;
}

.topic-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.topic-card {
    background-color: var(--paper);

    padding: 40px;

    border: 1px solid var(--line);

    box-shadow: 7px 7px 0 var(--shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.topic-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 11px 11px 0 var(--pink);
}

.topic-card h3 {
    font-size: 30px;
    line-height: 1.1;

    margin: 0 0 20px;

    color: var(--green);
}

.topic-card p {
    line-height: 1.65;
}

.topic-card a {
    display: inline-block;

    margin-top: 15px;

    color: var(--green);

    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.topic-card a:hover {
    transform: translateX(5px);
    color: var(--pink);
}


/* =========================================================
   ARTICLES
========================================================= */

.articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding-bottom: 90px;
}

.article-card {
    background-color: var(--paper);

    padding: 35px 40px;

    border: 1px solid var(--line);

    box-shadow: 7px 7px 0 var(--shadow);

    text-align: left;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.article-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 11px 11px 0 var(--pink);
}

.article-card h3 {
    font-size: 27px;
    line-height: 1.1;

    margin: 0 0 20px;

    color: var(--green);
}

.article-card p {
    line-height: 1.65;
    margin-bottom: 25px;
}

.article-card a {
    display: inline-block;

    color: var(--green);

    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.article-card a:hover {
    transform: translateX(5px);
    color: var(--pink);
}


/* =========================================================
   LATEST ARTICLES
========================================================= */

.latest {
    background-color: var(--paper);

    padding: 80px 50px 100px;

    margin: 0 -25px;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.latest > h2 {
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1;
    letter-spacing: -2px;

    margin: 0 0 50px;

    color: var(--green);
}

.latest-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.latest-card {
    background-color: transparent;

    padding: 30px 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.latest-card:hover {
    transform: translateY(-4px);
    border-color: var(--pink);
}

.latest-card h3 {
    font-size: 25px;
    line-height: 1.15;

    margin: 0 0 18px;

    color: var(--green);
}

.latest-card p {
    line-height: 1.65;
}

.latest-card a {
    display: inline-block;

    color: var(--green);

    font-weight: 700;
    text-decoration: none;

    margin-top: 15px;
}

.latest-card a:hover {
    color: var(--pink);
}


/* =========================================================
   FULL ARTICLE
========================================================= */

.full-article {
    max-width: 820px;
    margin: 80px auto;
    padding: 0 30px;
}

.full-article h2 {
    font-size: clamp(52px, 7vw, 72px);
    font-weight: 600;

    line-height: 0.98;

    margin: 15px 0 35px;

    letter-spacing: -2.5px;

    color: var(--green);
}

.full-article h3 {
    position: relative;

    font-size: 32px;
    font-weight: 600;

    line-height: 1.2;

    margin-top: 90px;
    margin-bottom: 35px;

    padding-top: 18px;

    border-top: 1px solid var(--line);

    letter-spacing: -0.5px;

    color: var(--green);
}

.full-article > h3:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 70px;
}

.full-article p,
.full-article li {
    font-size: 18px;
    line-height: 1.85;

    max-width: 680px;
}

.full-article p {
    margin-bottom: 25px;
}

.full-article ul {
    padding-left: 25px;
    margin-bottom: 30px;
}


/* =========================================================
   ARTICLE CATEGORY
========================================================= */

.article-category {
    font-size: 12px !important;
    font-weight: 700;

    letter-spacing: 2.5px;

    color: var(--pink);

    margin-bottom: 25px !important;
}


/* =========================================================
   ARTICLE INTRO
========================================================= */

.article-intro {
    font-size: 24px !important;
    line-height: 1.6 !important;

    margin-bottom: 55px !important;

    max-width: 700px !important;

    color: var(--green);
}


/* =========================================================
   ARTICLE NAVIGATION
========================================================= */

.article-nav {
    margin-bottom: 65px;

    padding: 0 0 25px;

    border-bottom: 1px solid var(--line);
}

.article-nav h3 {
    border-top: none;

    padding-top: 0;

    margin: 0 0 18px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--pink);
}

.article-nav ul {
    display: flex;
    flex-wrap: wrap;

    gap: 8px 25px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.article-nav li {
    margin: 0;
}

.article-nav a {
    color: var(--green);

    text-decoration: none;

    font-size: 16px;
}

.article-nav a:hover {
    color: var(--pink);
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* =========================================================
   MACRO LIST
========================================================= */

.macro-list {
    list-style: none;

    padding: 0;
    margin: 30px auto;

    text-align: center;

    max-width: none;
}

.macro-list li {
    max-width: none;
    margin: 12px 0;
}


/* =========================================================
   TAKEAWAY
========================================================= */

.takeaway {
    position: relative;

    background-color: var(--paper);

    padding: 35px 40px 35px 45px;

    margin: 65px 0;

    border: 1px solid var(--line);

    border-left: 7px solid var(--pink);

    box-shadow: 7px 7px 0 var(--shadow);
}

.takeaway::before {
    content: "TAKEAWAY";

    display: block;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);

    margin-bottom: 15px;
}

.takeaway h3 {
    margin-top: 0;
    margin-bottom: 18px;

    padding-top: 0;

    border-top: none;

    font-size: 27px;
}

.takeaway p {
    margin-bottom: 0;
}


/* =========================================================
   DEEP DIVE
========================================================= */

.deep-dive {
    margin: 70px 0;

    padding: 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.deep-dive summary {
    padding: 27px 0;

    font-size: 20px;
    font-weight: 700;

    cursor: pointer;

    list-style: none;

    color: var(--green);
}

.deep-dive summary::-webkit-details-marker {
    display: none;
}

.deep-dive summary::after {
    content: "+";

    float: right;

    font-size: 26px;
    font-weight: normal;

    color: var(--pink);
}

.deep-dive[open] summary::after {
    content: "−";
}

.deep-dive-content {
    padding: 5px 0 35px;
}

.deep-dive-content h4 {
    font-size: 24px;
    line-height: 1.3;

    margin-top: 20px;

    color: var(--green);
}

.deep-dive-content p {
    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   SOURCES
========================================================= */

.sources {
    background-color: var(--paper);

    padding: 40px;

    margin-top: 80px;

    border: 1px solid var(--line);

    box-shadow: 7px 7px 0 var(--shadow);
}

.sources h2 {
    margin-top: 0;
    margin-bottom: 25px;

    font-size: 36px;

    color: var(--green);
}

.sources ol {
    margin: 0;
    padding-left: 25px;
}

.sources li {
    margin-bottom: 15px;
    line-height: 1.6;
}

.sources li:last-child {
    margin-bottom: 0;
}

.sources a {
    color: var(--green);
    text-decoration: underline;
}

.sources a:hover {
    color: var(--pink);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    background-color: var(--green);

    color: var(--cream);

    margin-top: 0;

    padding: 70px 50px 35px;

    position: relative;

    overflow: hidden;
}

footer::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    background-color: var(--pink);

    right: -60px;
    bottom: -70px;

    border-radius: 50%;
}

.footer-brand {
    max-width: 1050px;

    margin: 0 auto;

    padding-bottom: 55px;

    border-bottom: 1px solid rgba(245, 241, 232, 0.3);
}

.footer-brand h2 {
    font-size: 58px;

    line-height: 1;

    letter-spacing: 6px;

    color: var(--cream);

    margin: 0 0 10px;
}

.footer-brand p {
    font-size: 16px;

    margin: 0;

    color: var(--pink);
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-links {
    max-width: 1050px;

    margin: 30px auto 50px;

    display: flex;

    gap: 30px;

    flex-wrap: wrap;
}

.footer-links a {
    color: var(--cream);

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--pink);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    max-width: 1050px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 12px;
}

.footer-bottom p {
    margin: 0;

    color: var(--cream);

    opacity: 0.65;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    footer {
        padding: 60px 25px 30px;
    }

    .footer-brand {
        padding-bottom: 40px;
    }

    .footer-brand h2 {
        font-size: 44px;
        letter-spacing: 5px;
    }

    .footer-links {
        gap: 20px;

        margin-bottom: 40px;
    }

    .footer-bottom {
        display: block;
    }

    .footer-bottom p:last-child {
        margin-top: 10px;
    }

}

/* =========================================================
   CATEGORY HERO
========================================================= */

.category-hero {
    padding: 100px 20px 120px;

    max-width: 1050px;

    margin: 0 auto;
}

.category-hero h2 {
    font-size: clamp(58px, 9vw, 105px);

    line-height: 0.9;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 40px;
}

.category-hero > p:last-child {
    font-size: 21px !important;

    line-height: 1.6 !important;

    max-width: 650px;

    margin: 0 !important;
}


/* =========================================================
   CATEGORY INTRO
========================================================= */

.category-intro {
    background-color: var(--paper);

    margin: 0 -25px;

    padding: 70px 50px 80px;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.category-intro-label {
    max-width: 1050px;

    margin: 0 auto 50px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: var(--pink);
}

.category-intro-content {
    max-width: 1050px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 100px;
}

.category-intro-content h3 {
    font-size: clamp(38px, 5vw, 58px);

    line-height: 1;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0;
}

.category-intro-content p {
    font-size: 18px !important;

    line-height: 1.75 !important;

    max-width: 520px;

    margin: 0 0 25px !important;
}


/* =========================================================
   CATEGORY ARTICLES
========================================================= */

.category-articles {
    padding: 110px 20px 130px;

    max-width: 1050px;

    margin: 0 auto;
}

.category-articles-header {
    margin-bottom: 60px;
}

.category-articles-header h2 {
    font-size: clamp(48px, 7vw, 76px);

    line-height: 0.95;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ARTICLE LIST
========================================================= */

.category-article-list {
    border-top: 2px solid var(--green);
}

.category-article {
    display: grid;

    grid-template-columns: 60px 1fr 40px;

    gap: 30px;

    align-items: center;

    padding: 35px 0;

    border-bottom: 1px solid var(--line);

    text-decoration: none;

    transition:
        padding 0.2s ease,
        border-color 0.2s ease;
}

.category-article:hover {
    padding-left: 10px;

    border-color: var(--pink);
}

.category-article-number {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.category-article-type {
    font-size: 11px !important;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);

    margin: 0 0 10px !important;
}

.category-article-content h3 {
    font-size: 30px;

    line-height: 1.1;

    color: var(--green);

    margin: 0 0 10px;
}

.category-article-content > p:last-child {
    font-size: 16px !important;

    line-height: 1.6 !important;

    max-width: 650px;

    margin: 0 !important;
}

.category-article-arrow {
    justify-self: end;

    font-size: 30px;

    color: var(--green);

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}

.category-article:hover .category-article-arrow {
    transform: translateX(7px);

    color: var(--pink);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .category-hero {
        padding: 75px 10px 90px;
    }

    .category-hero h2 {
        font-size: 54px;
    }

    .category-intro {
        margin: 0 -20px;

        padding: 60px 25px 70px;
    }

    .category-intro-content {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .category-articles {
        padding: 80px 10px 100px;
    }

    .category-article {
        grid-template-columns: 35px 1fr 30px;

        gap: 15px;

        padding: 30px 0;
    }

    .category-article-content h3 {
        font-size: 25px;
    }

}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-to-top {
    position: fixed;

    right: 25px;
    bottom: 30px;

    width: 45px;
    height: 45px;

    background-color: var(--pink);

    color: #ffffff;

    border: none;
    border-radius: 0;

    font-size: 20px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-4px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    header {
        padding-top: 40px;
    }

    header h1 {
        font-size: 44px;
        letter-spacing: 5px;
    }

    nav ul {
        gap: 15px;
        flex-wrap: wrap;
    }

    main {
        padding: 0 20px;
    }

    .hero {
        padding: 80px 30px 90px;
        margin: 0 -20px;
    }

    .hero h2 {
        font-size: 52px;
        letter-spacing: -2px;
    }

    .page-intro {
        padding: 60px 10px 45px;
    }

    .page-intro h2 {
        font-size: 48px;
    }

    .topic-container {
        grid-template-columns: 1fr;
    }

    .articles {
        grid-template-columns: 1fr;
    }

    .latest {
        margin: 0 -20px;
        padding: 60px 25px 80px;
    }

    .latest-container {
        grid-template-columns: 1fr;
    }

    .full-article {
        padding: 0 10px;
        margin: 60px auto;
    }

    .full-article h2 {
        font-size: 50px;
    }

    .full-article h3 {
        font-size: 28px;
    }

    .takeaway {
        padding: 30px 25px 30px 30px;
    }

    .sources {
        padding: 30px 25px;
    }

}

/* =========================================================
   NOURISH — VITAMIN ARTICLE
   Editorial / bold / scientific / internet-native
========================================================= */

.vitamin-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.vitamin-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}



.vitamin-article em {
    color: var(--green);
}

.vitamin-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}


/* =========================================================
   HERO
========================================================= */

.vitamin-hero {
    min-height: 720px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vitamin-hero h2 {
    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.vitamin-hero h2 span {
    color: var(--pink);
}

.vitamin-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.vitamin-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING
========================================================= */

.vitamin-opening {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.vitamin-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.vitamin-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.vitamin-reading {
    max-width: 700px;
}

.vitamin-question {
    max-width: 900px;

    margin: 90px 0;

    font-size: clamp(45px, 7vw, 82px);

    line-height: .9;

    letter-spacing: -4px;

    color: var(--green);
}

.vitamin-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}

.pink-line {
    color: var(--pink) !important;

    font-size: 21px !important;

    font-weight: 700;

    margin-top: 45px !important;
}

.pink-line.large {
    font-size: 38px !important;
}


/* =========================================================
   STANDARD SECTIONS
========================================================= */

.vitamin-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.vitamin-section-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.vitamin-section .vitamin-reading > h3 {
    max-width: 850px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 55px;
}

.vitamin-statement {
    max-width: 850px;

    margin: 110px 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(45px, 7vw, 82px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--green);

    font-weight: 600;
}

.vitamin-statement span {
    color: var(--pink);
}

.vitamin-statement.compact {
    font-size: clamp(38px, 5vw, 62px);
}


/* =========================================================
   B VITAMIN WALL
========================================================= */

.vitamin-wall {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin: 70px 0;

    border-top: 2px solid var(--green);
    border-left: 2px solid var(--green);
}

.vitamin-wall div {
    min-height: 130px;

    padding: 25px 20px;

    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.vitamin-wall strong {
    display: block;

    font-size: 42px;

    line-height: 1;

    color: var(--pink);

    margin-bottom: 15px;
}

.vitamin-wall span {
    display: block;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: 1px;

    color: var(--green);
}


/* =========================================================
   FAT / WATER SOLUBLE
========================================================= */

.vitamin-map {
    margin: 0 -25px;

    padding: 125px 50px 140px;

    background-color: var(--cream);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.vitamin-map-header {
    max-width: 1000px;

    margin: 0 auto 80px;
}

.vitamin-map-header h3 {
    font-size: clamp(58px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.vitamin-map-body {
    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 70px 1fr;
}

.vitamin-map-side {
    padding: 45px;

    min-height: 350px;

    background-color: var(--green);

    color: var(--cream);
}

.vitamin-map-side.water {
    background-color: var(--pink-light);

    color: var(--green);
}

.map-number {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.vitamin-map-side h4 {
    font-size: 38px;

    line-height: 1;

    margin: 45px 0 35px;

    color: inherit;
}

.map-vitamins {
    display: flex;

    gap: 10px;

    margin-bottom: 40px;
}

.map-vitamins span {
    display: flex;

    width: 55px;
    height: 55px;

    align-items: center;
    justify-content: center;

    border: 2px solid currentColor;

    font-size: 20px;

    font-weight: 700;
}

.vitamin-map-side p {
    color: inherit;

    font-size: 16px !important;
    line-height: 1.6 !important;

    margin: 0 !important;
}

.map-vs {
    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.vitamin-map-text {
    max-width: 1000px;

    margin: 75px auto 0;
}

.vitamin-map-text p {
    margin-bottom: 25px;
}


/* =========================================================
   DEFICIENCY
========================================================= */

.deficiency-list {
    margin: 65px 0;

    border-top: 2px solid var(--green);
}

.deficiency-list div {
    display: grid;

    grid-template-columns: 150px 1fr;

    gap: 30px;

    padding: 23px 0;

    border-bottom: 1px solid var(--line);
}

.deficiency-list span {
    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--pink);
}

.deficiency-list p {
    font-size: 16px !important;
    line-height: 1.55 !important;

    margin: 0 !important;
}


/* =========================================================
   NUMBERS
========================================================= */

.vitamin-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.vitamin-numbers-heading h3 {
    font-size: clamp(58px, 8vw, 92px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0;
}

.vitamin-numbers .vitamin-reading p {
    color: var(--cream);
}

.vitamin-numbers strong {
    color: var(--pink);
}

.number-moment {
    margin: 75px 0;

    padding: 35px 0;

    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--pink);
}

.number-moment span {
    display: block;

    font-size: clamp(65px, 9vw, 110px);

    line-height: .8;

    letter-spacing: -5px;

    color: var(--pink);

    font-weight: 700;
}

.number-moment p {
    margin: 20px 0 0 !important;

    font-size: 15px !important;
}

.number-moment small {
    display: block;

    margin-top: 15px;

    font-size: 12px;

    opacity: .7;
}

.number-question {
    margin-top: 75px;

    padding-top: 35px;

    border-top: 1px solid rgba(245, 241, 232, .4);
}

.number-question p {
    font-size: 16px !important;

    margin-bottom: 15px !important;
}

.number-question strong {
    display: block;

    font-size: 24px;

    line-height: 1.3;

    margin-bottom: 35px;

    color: var(--cream);
}


/* =========================================================
   DIRECTORY
========================================================= */

.vitamin-directory {
    padding: 140px 20px 80px;
}

.vitamin-directory > h3 {
    font-size: clamp(55px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0 0 70px;
}

.vitamin-directory-copy {
    max-width: 700px;
    margin-left: auto;
    margin-right: 8%;
}

.vitamin-directory-copy p {
    margin-bottom: 27px;
}


/* =========================================================
   INDIVIDUAL VITAMINS
========================================================= */

.vitamin-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 110px 0;

    border-top: 2px solid var(--green);
}

.vitamin-feature-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);
}

.vitamin-feature-number {
    padding-top: 5px;

    font-size: 48px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.vitamin-feature .vitamin-reading h4 {
    font-size: clamp(50px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0 0 60px;
}

.vitamin-feature-statement {
    max-width: 800px;

    margin: 70px 0;

    padding: 35px 0 35px 30px;

    border-left: 5px solid var(--pink);

    font-size: 40px;

    line-height: 1.2;

    color: var(--pink);

    font-weight: 800;
}

.vitamin-side-note {
    margin: 65px 0;

    padding: 25px 0;

    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--pink);

    font-size: 24px;

    line-height: 1.3;

    color: var(--green);
}

.vitamin-feature-green {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--green);

    color: var(--cream);
}

.vitamin-feature-green .vitamin-reading p {
    color: var(--cream);
}

.vitamin-feature-green .vitamin-reading h4 {
    color: var(--cream);
}

.vitamin-feature-green strong {
    color: var(--pink);
}

.vitamin-d-statement {
    margin: 65px 0;

    font-size: clamp(42px, 6vw, 72px);

    line-height: .88;

    letter-spacing: -4px;

    color: var(--cream);
}

.vitamin-d-statement span {
    color: var(--pink);
}


/* =========================================================
   B FUNCTIONS
========================================================= */

.b-function-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0 50px;

    margin: 70px 0;

    border-top: 2px solid var(--green);
}

.b-function-list div {
    padding: 25px 0;

    border-bottom: 1px solid var(--line);
}

.b-function-list span {
    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--pink);
}

.b-function-list p {
    font-size: 15px !important;
    line-height: 1.55 !important;

    margin: 12px 0 0 !important;
}


/* =========================================================
   SUPPLEMENT TWIST
========================================================= */

.vitamin-twist {
    margin: 120px -25px;

    padding: 150px 70px;

    background-color: var(--pink);
}

.vitamin-twist .vitamin-label {
    color: var(--green);
}

.vitamin-twist h3 {
    max-width: 1000px;

    font-size: clamp(65px, 10vw, 120px);

    line-height: .8;

    letter-spacing: -6px;

    color: var(--green);

    margin: 0;
}

.vitamin-twist h3 span {
    color: var(--cream);
}

.vitamin-twist-copy {
    max-width: 700px;

    margin: 90px 0 0 auto;
}

.vitamin-twist-copy p {
    color: var(--green);
}

.vitamin-twist-copy .vitamin-question-small {
    color: var(--green);
}


/* =========================================================
   LOGIC
========================================================= */

.logic-chain {
    margin: 60px 0;

    border-top: 2px solid var(--green);
}

.logic-chain div {
    padding: 25px 0;

    border-bottom: 1px solid var(--line);

    font-size: 22px;

    line-height: 1.3;

    color: var(--green);
}

.logic-chain div:last-child {
    color: var(--pink);

    font-weight: 700;
}

.fuel-analogy {
    margin: 80px 0;

    padding: 40px;

    border: 2px solid var(--green);

    background-color: var(--paper);
}

.fuel-bar {
    display: flex;

    height: 55px;

    margin: 35px 0;

    border: 2px solid var(--green);
}

.fuel-bar span {
    display: flex;

    align-items: center;

    padding: 0 18px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}

.fuel-bar span:first-child {
    width: 35%;

    background-color: var(--pink-light);

    color: var(--green);
}

.fuel-bar span:last-child {
    width: 65%;

    justify-content: flex-end;

    background-color: var(--green);

    color: var(--cream);
}


/* =========================================================
   EVIDENCE
========================================================= */

.vitamin-evidence {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.vitamin-evidence-heading h3 {
    font-size: clamp(52px, 7vw, 82px);

    line-height: .84;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0;
}

.evidence-source {
    margin: 65px 0;

    padding: 30px;

    background-color: var(--cream);

    border-top: 7px solid var(--pink);

    box-shadow: 9px 9px 0 var(--green);
}

.evidence-source > span {
    display: block;

    margin-bottom: 20px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.evidence-source p {
    margin: 0 !important;

    font-size: 18px !important;
}

.evidence-interruption {
    margin: 70px 0;

    font-size: clamp(40px, 6vw, 68px);

    line-height: .88;

    letter-spacing: -3px;

    color: var(--green);
}

.evidence-interruption span {
    color: var(--pink);
}

.evidence-conclusion {
    margin-top: 70px;

    padding-top: 35px;

    border-top: 2px solid var(--green);

    font-size: 26px;

    line-height: 1.25;

    color: var(--green);
}


/* =========================================================
   REASONS
========================================================= */

.reason-list {
    margin: 65px 0;

    border-top: 2px solid var(--green);
}

.reason-list div {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 15px;

    padding: 22px 0;

    border-bottom: 1px solid var(--line);
}

.reason-list span {
    font-size: 20px;

    font-weight: 700;

    color: var(--pink);
}

.reason-list p {
    font-size: 18px !important;

    line-height: 1.4 !important;
    font-weight: 600;

    margin: 0 !important;
}

.two-question {
    margin: 80px 0 50px;

    padding-top: 35px;

    border-top: 2px solid var(--green);
}

.two-question p {
    margin-bottom: 10px !important;
}

.two-question strong {
    display: block;

    font-size: 34px;

    line-height: 1.05;

    margin-bottom: 40px;
}

.two-question strong:last-child {
    color: var(--pink);
}


/* =========================================================
   MULTIVITAMIN
========================================================= */

.multivitamin {
    display: grid;

    grid-template-columns: 160px 1fr;

    gap: 70px;

    margin: 0 -25px;

    padding: 120px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.multivitamin-number {
    font-size: 100px;

    line-height: .8;

    letter-spacing: -6px;

    color: var(--pink);

    font-weight: 700;
}

.multivitamin-content {
    max-width: 700px;
}

.multivitamin-content h3 {
    font-size: clamp(55px, 8vw, 90px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0 0 60px;
}

.multivitamin-content p {
    color: var(--cream);
}

.multivitamin-content strong {
    color: var(--pink);
}

.multivitamin-punch {
    margin: 70px 0;

    font-size: clamp(40px, 6vw, 68px);

    line-height: .88;

    letter-spacing: -3px;

    color: var(--pink);

    font-weight: 700;
}


/* =========================================================
   TABLE RETURN
========================================================= */

.table-return {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    border-bottom: 2px solid var(--green);
}

.table-return-heading h3 {
    font-size: clamp(52px, 7vw, 82px);

    line-height: .84;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0;
}

.wrong-message {
    margin: 60px 0;

    padding: 30px 0;

    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--pink);

    font-size: 32px;

    line-height: .98;

    color: var(--pink);

    font-weight: 600;
}

.right-message {
    margin: 50px 0;

    padding: 35px;

    background-color: var(--green);

    color: var(--cream);

    font-size: 25px;

    line-height: 1.25;
}

.information-statement {
    margin-top: 80px;

    padding-top: 40px;

    border-top: 2px solid var(--green);

    font-size: clamp(40px, 6vw, 65px);

    line-height: .88;

    letter-spacing: -3px;

    color: var(--green);

    font-weight: 600;
}

.information-statement span {
    color: var(--pink);
}


/* =========================================================
   WHAT I LEARNED
========================================================= */

.vitamin-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    background-color: var(--paper);
}

.vitamin-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.learned-statement {
    margin: 70px 0 35px;

    font-size: 34px;

    line-height: 1;

    color: var(--pink);

    font-weight: 700;
}

.learned-points {
    border-top: 2px solid var(--green);

    margin-bottom: 65px;
}

.learned-points div {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 15px;

    padding: 24px 0;

    border-bottom: 1px solid var(--line);
}

.learned-points span {
    font-size: 18px;

    font-weight: 700;

    color: var(--pink);
}

.learned-points p {
    margin: 0 !important;
    font-weight: 600;
}

.learned-not {
    margin: 60px 0;

    padding-left: 30px;

    border-left: 5px solid var(--pink);
}

.learned-not p {
    margin-bottom: 10px !important;

    color: var(--pink);

    font-weight: 700;
}

.learned-final {
    margin-top: 70px;

    font-size: 32px;

    line-height: 1.1;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   ENDING
========================================================= */

.vitamin-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.vitamin-ending > .vitamin-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.vitamin-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(60px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.vitamin-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.vitamin-ending-copy p {
    color: var(--cream);
}

.ending-questions {
    margin: 80px 0;

    padding: 30px 0;

    border-top: 1px solid rgba(245,241,232,.4);
    border-bottom: 1px solid rgba(245,241,232,.4);
}



.ending-questions p {
    margin: 18px 0 !important;

    font-size: 23px !important;

    line-height: 1.35 !important;

    color: var(--pink) !important;

    font-weight: 600;
}

.ending-questions .old-question {
    color: var(--cream) !important;

    opacity: .45;
}


.ending-questions span {
    display: block;

    margin: 30px 0;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--cream);
}

.ending-pull {
    margin: 80px 0;

    font-size: clamp(42px, 6vw, 70px);

    line-height: .86;

    letter-spacing: -3px;

    color: var(--pink);

    font-weight: 700;
}

.vitamin-ending-final {
    max-width: 1000px;

    margin: 130px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(50px, 8vw, 95px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    font-weight: 600;
}

.vitamin-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES
========================================================= */

.vitamin-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.vitamin-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.vitamin-sources ol {
    margin: 0;

    padding-left: 25px;
}

.vitamin-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .vitamin-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .vitamin-hero {
        min-height: 620px;

        padding: 55px 10px 70px;
    }

    .vitamin-hero h2 {
        font-size: 57px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .vitamin-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .vitamin-opening,
    .vitamin-section,
    .vitamin-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 10px;
    }

    .vitamin-section-paper,
    .vitamin-feature-paper {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .vitamin-section .vitamin-reading > h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .vitamin-question {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 70px 0;
    }

    .vitamin-question-small {
        font-size: 31px;
    }

    .vitamin-statement {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 80px 0;
    }

    .vitamin-wall {
        grid-template-columns: repeat(2, 1fr);
    }

    .vitamin-map {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 25px 90px;
    }

    .vitamin-map-header h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .vitamin-map-body {
        grid-template-columns: 1fr;
    }

    .map-vs {
        min-height: 50px;
    }

    .vitamin-map-side {
        min-height: auto;

        padding: 30px;
    }

    .vitamin-numbers {
        grid-template-columns: 1fr;

        gap: 60px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .vitamin-numbers-heading h3 {
        font-size: 58px;
    }

    .vitamin-directory {
        padding: 90px 10px 60px;
    }

    .vitamin-directory > h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .vitamin-directory-copy {
        margin-left: 0;
    }

    .vitamin-feature {
        padding: 75px 10px;
    }

    .vitamin-feature-paper,
    .vitamin-feature-green {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .vitamin-feature .vitamin-reading h4 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .b-function-list {
        grid-template-columns: 1fr;
    }

    .vitamin-d-statement {
        font-size: 48px;

        letter-spacing: -3px;
    }

    .vitamin-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px;
    }

    .vitamin-twist h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .vitamin-twist-copy {
        margin-top: 60px;
    }

    .vitamin-evidence {
        grid-template-columns: 1fr;

        gap: 55px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .vitamin-evidence-heading h3 {
        font-size: 52px;
    }

    .multivitamin {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .multivitamin-number {
        font-size: 75px;
    }

    .multivitamin-content h3 {
        font-size: 55px;
    }

    .table-return,
    .vitamin-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .table-return-heading h3,
    .vitamin-learned-heading h3 {
        font-size: 55px;
    }

    .vitamin-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .vitamin-ending h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .ending-questions p {
        font-size: 20px !important;
    }

    .vitamin-ending-final {
        font-size: 45px;

        letter-spacing: -3px;
    }

    .vitamin-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — CALORIES ARTICLE
   Same visual language as the vitamin investigation
========================================================= */

.calorie-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.calorie-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.calorie-article em {
    color: var(--green);
}

.calorie-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}


/* =========================================================
   HERO
========================================================= */

.calorie-hero {
    min-height: 650px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calorie-hero h2 {
    max-width: 1000px;

    font-size: clamp(75px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.calorie-hero h2 span {
    color: var(--pink);
}

.calorie-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.calorie-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING
========================================================= */

.calorie-opening {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.calorie-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.calorie-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.calorie-reading {
    max-width: 700px;
}

.calorie-question {
    max-width: 900px;

    margin: 90px 0;

    font-size: clamp(45px, 7vw, 82px);

    line-height: .9;

    letter-spacing: -4px;

    color: var(--green);
}


/* =========================================================
   STANDARD SECTIONS
========================================================= */

.calorie-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.calorie-section .calorie-reading > h3 {
    max-width: 850px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 55px;
}


/* =========================================================
   PAPER SECTIONS
========================================================= */

.calorie-section-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}


/* =========================================================
   BIG STATEMENTS
========================================================= */

.calorie-statement {
    max-width: 850px;

    margin: 110px 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(45px, 7vw, 82px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--green);

    font-weight: 600;
}

.calorie-statement span {
    color: var(--pink);
}

.calorie-statement.compact {
    font-size: clamp(35px, 5vw, 58px);
}

.calorie-highlight {
    max-width: 800px;

    margin: 70px 0;

    padding: 30px 0 30px 30px;

    border-left: 5px solid var(--pink);

    font-size: 24px !important;

    line-height: 1.35 !important;

    color: var(--green);
}

.pink-line {
    color: var(--pink) !important;

    font-size: 21px !important;

    font-weight: 700;

    margin-top: 50px !important;
}

.pink-line.large {
    font-size: 38px !important;

    line-height: 1.1 !important;
}


/* =========================================================
   MACRONUTRIENTS
========================================================= */

.calorie-macro-list {
    margin: 70px 0;

    border-top: 2px solid var(--green);
}

.calorie-macro-list div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 24px 0;

    border-bottom: 1px solid var(--line);
}

.calorie-macro-list span {
    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--green);
}

.calorie-macro-list strong {
    font-size: 27px;

    color: var(--green);
}

.calorie-macro-list .accent strong {
    color: var(--pink);
}

.calorie-small-note {
    font-size: 15px !important;

    line-height: 1.6 !important;

    color: #59615a;
}


/* =========================================================
   ENERGY MAP
========================================================= */

.calorie-map {
    margin: 0 -25px;

    padding: 125px 50px 140px;

    background-color: var(--cream);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.calorie-map-header {
    max-width: 1000px;

    margin: 0 auto 80px;
}

.calorie-map-header h3 {
    font-size: clamp(58px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.calorie-map-copy {
    max-width: 700px;

    margin-left: auto;

    margin-right: 8%;
}


/* =========================================================
   CAR / CELL COMPARISON
========================================================= */

.calorie-comparison {
    display: grid;

    grid-template-columns: 1fr 1fr;

    margin: 75px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.calorie-comparison > div {
    padding: 35px;

    border-right: 1px solid var(--line);
}

.calorie-comparison > div:last-child {
    border-right: none;
}

.calorie-comparison span {
    display: block;

    margin-bottom: 25px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: var(--pink);
}

.calorie-comparison strong {
    display: block;

    font-size: 22px;

    line-height: 1.5;

    color: var(--green);
}

.calorie-comparison b {
    color: var(--pink);

    padding: 0 5px;
}


/* =========================================================
   ENERGY / BODY EXPENDITURE
========================================================= */

.calorie-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.calorie-numbers-heading h3 {
    font-size: clamp(58px, 8vw, 92px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0;
}

.calorie-numbers .calorie-reading p {
    color: var(--cream);
}

.calorie-numbers strong {
    color: var(--pink);
}


/* =========================================================
   EXPENDITURE LIST
========================================================= */

.calorie-expenditure-list {
    margin: 65px 0;

    border-top: 2px solid var(--pink);
}

.calorie-expenditure-list > div {
    display: grid;

    grid-template-columns: 45px 220px 1fr;

    gap: 25px;

    padding: 27px 0;

    border-bottom: 1px solid rgba(245, 241, 232, .35);
}

.calorie-expenditure-list span {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.calorie-expenditure-list h4 {
    margin: 0;

    font-size: 21px;

    line-height: 1.2;

    color: var(--cream);
}

.calorie-expenditure-list p {
    margin: 0 !important;

    font-size: 15px !important;

    line-height: 1.6 !important;

    color: var(--cream);
}


/* =========================================================
   ADAPTATION
========================================================= */

.calorie-final-statement {
    max-width: 850px;

    margin: 110px 0 35px;

    padding-top: 40px;

    border-top: 2px solid var(--green);

    font-size: clamp(50px, 7vw, 82px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--pink);

    font-weight: 600;
}


/* =========================================================
   WHAT I LEARNED
========================================================= */

.calorie-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.calorie-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.calorie-learned-copy {
    max-width: 700px;
}

.calorie-learned-statement {
    margin: 75px 0 40px;

    padding-top: 35px;

    border-top: 2px solid var(--green);

    font-size: 30px;

    line-height: 1.1;

    color: var(--green);

    font-weight: 600;
}

.calorie-learned-punch {
    margin: 70px 0;

    font-size: clamp(42px, 6vw, 68px);

    line-height: .88;

    letter-spacing: -3px;

    color: var(--green);

    font-weight: 600;
}

.calorie-learned-punch span {
    color: var(--pink);
}


/* =========================================================
   ENDING
========================================================= */

.calorie-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.calorie-ending > .calorie-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.calorie-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(65px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.calorie-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.calorie-ending-copy p {
    color: var(--cream);
}

.calorie-ending-pull {
    margin: 90px 0;

    font-size: clamp(42px, 6vw, 70px);

    line-height: .86;

    letter-spacing: -3px;

    color: var(--pink);

    font-weight: 700;
}

.calorie-ending-pull span {
    color: var(--pink);
}


/* =========================================================
   SOURCES
========================================================= */

.calorie-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.calorie-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.calorie-sources ol {
    margin: 0;

    padding-left: 25px;
}

.calorie-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .calorie-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .calorie-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .calorie-hero h2 {
        font-size: 58px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .calorie-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .calorie-opening,
    .calorie-section {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 10px;
    }

    .calorie-section-paper {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .calorie-section .calorie-reading > h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .calorie-question {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 70px 0;
    }

    .calorie-statement {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 80px 0;
    }

    .calorie-statement.compact {
        font-size: 38px;
    }

    .calorie-map {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 25px 90px;
    }

    .calorie-map-header h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .calorie-map-copy {
        margin-left: 0;
        margin-right: 0;
    }

    .calorie-comparison {
        grid-template-columns: 1fr;
    }

    .calorie-comparison > div {
        border-right: none;

        border-bottom: 1px solid var(--line);
    }

    .calorie-comparison > div:last-child {
        border-bottom: none;
    }

    .calorie-numbers {
        grid-template-columns: 1fr;

        gap: 60px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .calorie-numbers-heading h3 {
        font-size: 58px;
    }

    .calorie-expenditure-list > div {
        grid-template-columns: 35px 1fr;

        gap: 15px;
    }

    .calorie-expenditure-list p {
        grid-column: 2;
    }

    .calorie-final-statement {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .calorie-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .calorie-learned-heading h3 {
        font-size: 55px;
    }

    .calorie-learned-punch {
        font-size: 45px;
    }

    .calorie-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .calorie-ending h3 {
        font-size: 60px;

        letter-spacing: -3px;
    }

    .calorie-ending-pull {
        font-size: 45px;

        letter-spacing: -3px;
    }

    .calorie-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — CARBS ARTICLE
   Same visual language as the vitamin / calorie investigations
   Append this block to the end of style.css
========================================================= */

.carb-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.carb-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.carb-article em {
    color: var(--green);
}

.carb-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}


/* =========================================================
   HERO
========================================================= */

.carb-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.carb-hero h2 {
    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.carb-hero h2 span {
    color: var(--pink);
}

.carb-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.carb-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING / STANDARD SECTIONS
========================================================= */

.carb-opening,
.carb-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.carb-section-number {
    padding-top: 8px;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.carb-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 14px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.carb-reading {
    max-width: 700px;
}

.carb-section .carb-reading > h3 {
    max-width: 850px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 55px;
}

.carb-section-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.carb-question {
    max-width: 900px;

    margin: 90px 0;

    font-size: clamp(45px, 7vw, 82px);

    line-height: .9;

    letter-spacing: -4px;

    color: var(--green);
}

.carb-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   BIG STATEMENTS
========================================================= */

.carb-statement {
    max-width: 850px;

    margin: 110px 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(45px, 7vw, 82px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--green);

    font-weight: 600;
}

.carb-statement span {
    color: var(--pink);
}

.carb-statement.compact {
    font-size: clamp(38px, 5vw, 62px);
}


/* =========================================================
   THREE-WAY MAP (sugars / starches / fibre)
========================================================= */

.carb-map {
    margin: 0 -25px;

    padding: 125px 50px 140px;

    background-color: var(--cream);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.carb-map-header {
    max-width: 1000px;

    margin: 0 auto 80px;
}

.carb-map-header h3 {
    font-size: clamp(58px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.carb-map-body {
    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.carb-map-panel {
    padding: 40px 32px;

    min-height: 260px;

    background-color: var(--green);

    color: var(--cream);
}

.carb-map-panel.accent {
    background-color: var(--pink-light);

    color: var(--green);
}

.carb-map-panel h4 {
    font-size: 30px;

    line-height: 1;

    margin: 0 0 25px;

    color: inherit;
}

.carb-map-panel p {
    color: inherit;

    font-size: 15px !important;
    line-height: 1.6 !important;

    margin: 0 !important;
}

.carb-map-text {
    max-width: 1000px;

    margin: 75px auto 0;
}

.carb-map-text p {
    margin-bottom: 25px;
}


/* =========================================================
   NUMBERS
========================================================= */

.carb-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.carb-numbers-heading h3 {
    font-size: clamp(58px, 8vw, 92px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0;
}

.carb-numbers .carb-reading p {
    color: var(--cream);
}

.carb-numbers strong {
    color: var(--pink);
}


/* =========================================================
   INDIVIDUAL CARB FEATURES (fibre / sugar / starch)
========================================================= */

.carb-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 110px 0;

    border-top: 2px solid var(--green);
}

.carb-feature-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);
}

.carb-feature-number {
    padding-top: 5px;

    font-size: 48px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.carb-feature .carb-reading h4 {
    font-size: clamp(46px, 6vw, 72px);

    line-height: .9;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 60px;
}

.carb-feature-statement {
    max-width: 800px;

    margin: 70px 0;

    padding: 35px 0 35px 30px;

    border-left: 5px solid var(--pink);

    font-size: 36px;

    line-height: 1.2;

    color: var(--pink);

    font-weight: 800;
}

.carb-side-note {
    margin: 65px 0;

    padding: 25px 0;

    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--pink);

    font-size: 24px;

    line-height: 1.3;

    color: var(--green);
}


/* =========================================================
   TWIST
========================================================= */

.carb-twist {
    margin: 120px -25px;

    padding: 150px 70px;

    background-color: var(--pink);
}

.carb-twist .carb-label {
    color: var(--green);
}

.carb-twist h3 {
    max-width: 1000px;

    font-size: clamp(65px, 10vw, 120px);

    line-height: .8;

    letter-spacing: -6px;

    color: var(--green);

    margin: 0;
}

.carb-twist h3 span {
    color: var(--cream);
}

.carb-twist-copy {
    max-width: 700px;

    margin: 90px 0 0 auto;
}

.carb-twist-copy p {
    color: var(--green);
}

.carb-twist-copy .carb-question-small {
    color: var(--green);
}


/* =========================================================
   WHAT I LEARNED
========================================================= */

.carb-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;
}

.carb-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING
========================================================= */

.carb-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.carb-ending > .carb-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.carb-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(60px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.carb-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.carb-ending-copy p {
    color: var(--cream);
}

.carb-ending-final {
    max-width: 1000px;

    margin: 130px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(50px, 8vw, 95px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    font-weight: 600;
}

.carb-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES
========================================================= */

.carb-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.carb-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.carb-sources ol {
    margin: 0;

    padding-left: 25px;
}

.carb-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .carb-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .carb-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .carb-hero h2 {
        font-size: 57px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .carb-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .carb-opening,
    .carb-section,
    .carb-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 10px;
    }

    .carb-section-paper,
    .carb-feature-paper {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .carb-section .carb-reading > h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .carb-question {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 70px 0;
    }

    .carb-question-small {
        font-size: 31px;
    }

    .carb-statement {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 80px 0;
    }

    .carb-map {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 25px 90px;
    }

    .carb-map-header h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .carb-map-body {
        grid-template-columns: 1fr;
    }

    .carb-numbers {
        grid-template-columns: 1fr;

        gap: 60px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .carb-numbers-heading h3 {
        font-size: 58px;
    }

    .carb-feature {
        padding: 75px 10px;
    }

    .carb-feature .carb-reading h4 {
        font-size: 46px;

        letter-spacing: -2px;
    }

    .carb-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px;
    }

    .carb-twist h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .carb-twist-copy {
        margin-top: 60px;
    }

    .carb-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .carb-learned-heading h3 {
        font-size: 55px;
    }

    .carb-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .carb-ending h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .carb-ending-final {
        font-size: 45px;

        letter-spacing: -3px;
    }

    .carb-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — PROTEIN ARTICLE

   FIXED SPINE (must match vitamins.html / calories.html exactly):
   hero, twist ("the question I actually came for"), learned
   ("so, what did I actually learn?"), ending ("and maybe that's
   the part I was looking for"), sources.

   ROTATING (free per article, same palette/materials only):
   intro, jobs grid, amino panel, stat strip, myth cards, timeline,
   evidence, context.

   Append this block to the end of style.css
========================================================= */

.protein-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.protein-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.protein-article h3 {
    max-width: 850px;

    font-size: clamp(46px, 6vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}

.protein-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.protein-reading {
    max-width: 700px;
}

.protein-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   HERO — FIXED SPINE
   Kicker label, giant green headline with a pink accent word,
   two-line dek below, on cream. Ghost number is this article's
   quiet background watermark.
========================================================= */

.protein-hero {
    position: relative;

    overflow: hidden;

    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.protein-hero .protein-label {
    position: relative;
    z-index: 1;
}

.protein-hero-ghost {
    position: absolute;

    top: 40px;
    right: -10px;

    font-size: clamp(160px, 26vw, 300px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -10px;

    color: rgba(24, 56, 42, 0.06);

    z-index: 0;

    pointer-events: none;
}

.protein-hero h2 {
    position: relative;
    z-index: 1;

    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.protein-hero h2 span {
    color: var(--pink);
}

.protein-hero-intro {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.protein-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   INTRO — rotating
========================================================= */

.protein-intro {
    max-width: 700px;

    margin: 0 auto;

    padding: 110px 20px 100px;
}

.protein-intro-question {
    font-size: 26px !important;
    line-height: 1.4 !important;

    color: var(--green) !important;

    font-weight: 600;

    margin-top: 45px !important;
}


/* =========================================================
   FOUR JOBS — rotating (card grid)
========================================================= */

.protein-jobs {
    padding: 20px 20px 120px;

    max-width: 1000px;

    margin: 0 auto;
}

.protein-jobs-intro {
    max-width: 700px !important;

    margin-bottom: 55px !important;
}

.protein-jobs-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    margin-bottom: 55px;
}

.protein-job-card {
    padding: 30px 24px;

    background-color: var(--paper);

    border: 1px solid var(--line);

    box-shadow: 6px 6px 0 var(--shadow);
}

.protein-job-card.accent {
    background-color: var(--green);

    color: var(--cream);

    box-shadow: 6px 6px 0 var(--pink);
}

.protein-job-card span {
    display: block;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--pink);

    margin-bottom: 20px;
}

.protein-job-card h4 {
    font-size: 24px;

    margin: 0 0 12px;

    color: inherit;
}

.protein-job-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;

    margin: 0 !important;

    max-width: none;

    color: inherit;
}


/* =========================================================
   AMINO ACID PANEL — rotating (nutrition-label styling)
========================================================= */

.protein-panel-section {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: start;

    margin: 0 -25px;

    padding: 110px 50px 130px;

    background-color: var(--cream);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.protein-panel-intro h3 {
    margin-bottom: 35px;
}

.amino-panel {
    background-color: var(--paper);

    border: 3px solid var(--green);

    padding: 30px 32px 26px;
}

.amino-panel-title h4 {
    font-size: 22px;

    letter-spacing: -0.5px;

    color: var(--green);

    margin: 0 0 6px;
}

.amino-panel-title p {
    font-size: 13px !important;

    color: #59615a;

    margin: 0 !important;
    max-width: none;
}

.amino-panel-thickrule {
    height: 8px;

    background-color: var(--green);

    margin: 18px 0;
}

.amino-panel-row {
    display: flex;

    justify-content: space-between;

    align-items: baseline;

    gap: 18px;

    padding: 14px 0;

    border-bottom: 1px solid var(--line);
}

.amino-name {
    font-size: 17px;

    font-weight: 700;

    color: var(--green);

    white-space: nowrap;
}

.amino-role {
    font-size: 14px;

    line-height: 1.5;

    color: var(--ink);

    text-align: right;
}

.amino-panel-footnote {
    font-size: 12px !important;
    line-height: 1.6 !important;

    color: #59615a;

    margin: 18px 0 0 !important;

    max-width: none;
}


/* =========================================================
   STAT STRIP — rotating
========================================================= */

.protein-strip {
    padding: 120px 20px 60px;

    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}

.protein-strip-row {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.protein-strip-item {
    padding: 45px 30px;

    border-right: 1px solid var(--line);
}

.protein-strip-item:last-child {
    border-right: none;
}

.protein-strip-item.accent {
    background-color: var(--green);

    color: var(--cream);
}

.protein-strip-item span {
    display: block;

    font-size: clamp(34px, 5vw, 48px);

    font-weight: 700;

    letter-spacing: -2px;

    color: var(--pink);

    margin-bottom: 18px;
}

.protein-strip-item p {
    font-size: 14px !important;
    line-height: 1.55 !important;

    margin: 0 auto !important;

    max-width: 220px;

    color: inherit;
}

.protein-strip-note {
    margin: 35px auto 0 !important;

    font-size: 14px !important;

    color: #59615a;

    max-width: none;
}


/* =========================================================
   MYTH CARDS — rotating
========================================================= */

.protein-myths {
    padding: 100px 20px 120px;

    max-width: 1050px;

    margin: 0 auto;
}

.myth-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

    margin-top: 55px;
}

.myth-card {
    padding: 40px;

    background-color: var(--paper);

    border: 1px solid var(--line);

    border-top: 6px solid var(--pink);

    box-shadow: 8px 8px 0 var(--shadow);
}

.myth-tag {
    font-size: 11px !important;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);

    margin: 0 0 10px !important;
    max-width: none;
}

.myth-tag.fact {
    color: var(--green);

    margin-top: 30px !important;
}

.myth-line {
    font-size: 22px !important;
    line-height: 1.3 !important;

    color: var(--green);

    font-weight: 600;

    margin: 0 0 10px !important;
    max-width: none;

    text-decoration: line-through;

    text-decoration-color: var(--pink);

    text-decoration-thickness: 2px;
}

.myth-card p {
    font-size: 15px !important;
    line-height: 1.65 !important;

    max-width: none;

    margin-bottom: 16px !important;
}


/* =========================================================
   TIMELINE — rotating
========================================================= */

.protein-timeline-section {
    margin: 0 -25px;

    padding: 120px 50px 130px;

    background-color: var(--green);

    color: var(--cream);
}

.protein-timeline-section .protein-label {
    color: var(--pink);
}

.protein-timeline-section h3 {
    color: var(--cream);

    max-width: 1000px;

    margin: 0 auto 65px;
}

.protein-timeline-section > p {
    max-width: 1000px !important;

    margin: 55px auto 0 !important;

    color: var(--cream);

    opacity: .85;
}

.protein-timeline {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    max-width: 1000px;

    margin: 0 auto;

    border-top: 2px solid rgba(245, 241, 232, .4);

    padding-top: 40px;
}

.timeline-point {
    padding-right: 20px;
}

.timeline-point.accent {
    color: var(--pink);
}

.timeline-marker {
    display: block;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 18px;

    color: var(--pink);
}

.timeline-point.accent .timeline-marker {
    color: var(--cream);
}

.timeline-point p {
    font-size: 15px !important;
    line-height: 1.6 !important;

    color: inherit;

    max-width: none;

    margin: 0 !important;
    opacity: .95;
}


/* =========================================================
   TWIST — FIXED SPINE
   Same recipe as vitamin-twist / carb-twist: full-bleed pink,
   kicker + giant headline, copy pinned right, question-small.
========================================================= */

.protein-twist {
    margin: 120px -25px;

    padding: 150px 70px;

    background-color: var(--pink);
}

.protein-twist .protein-label {
    color: var(--green);
}

.protein-twist h3 {
    max-width: 1000px;

    font-size: clamp(65px, 10vw, 120px);

    line-height: .8;

    letter-spacing: -6px;

    color: var(--green);

    margin: 0;
}

.protein-twist h3 span {
    color: var(--cream);
}

.protein-twist-copy {
    max-width: 700px;

    margin: 90px 0 0 auto;
}

.protein-twist-copy p {
    color: var(--green);
}

.protein-twist-copy .protein-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE — rotating
========================================================= */

.protein-evidence {
    max-width: 700px;

    margin: 0 auto;

    padding: 110px 20px 60px;
}


/* =========================================================
   CONTEXT — rotating
========================================================= */

.protein-context {
    max-width: 700px;

    margin: 0 auto;

    padding: 60px 20px 100px;
}


/* =========================================================
   LEARNED — FIXED SPINE
   Same recipe as vitamin-learned / calorie-learned: two-column
   grid, heading left, reading + learned-points/not/final right.
========================================================= */

.protein-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    background-color: var(--paper);
}

.protein-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING — FIXED SPINE
   Same recipe as vitamin-ending / calorie-ending: full-bleed
   dark green, centred kicker + headline, narrow copy column,
   ending-questions, ending-pull, bordered final line.
========================================================= */

.protein-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.protein-ending > .protein-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.protein-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(60px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.protein-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.protein-ending-copy p {
    color: var(--cream);
}

.protein-ending-final {
    max-width: 1000px;

    margin: 130px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(50px, 8vw, 95px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    font-weight: 600;
}

.protein-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES — FIXED SPINE
   Same recipe as vitamin-sources / calorie-sources.
========================================================= */

.protein-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.protein-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.protein-sources ol {
    margin: 0;

    padding-left: 25px;
}

.protein-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .protein-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .protein-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .protein-hero-ghost {
        font-size: 130px;

        top: 10px;
    }

    .protein-hero h2 {
        font-size: 57px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .protein-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .protein-question-small {
        font-size: 31px;
    }

    .protein-intro {
        padding: 70px 5px 70px;
    }

    .protein-intro-question {
        font-size: 22px !important;
    }

    .protein-jobs {
        padding: 10px 5px 90px;
    }

    .protein-jobs-grid {
        grid-template-columns: 1fr 1fr;
    }

    .protein-panel-section {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 70px 22px 80px;
    }

    .amino-panel {
        padding: 24px 20px 20px;
    }

    .amino-panel-row {
        flex-direction: column;

        gap: 4px;
    }

    .amino-role {
        text-align: left;
    }

    .protein-strip {
        padding: 80px 5px 40px;
    }

    .protein-strip-row {
        grid-template-columns: 1fr;
    }

    .protein-strip-item {
        border-right: none;

        border-bottom: 1px solid var(--line);
    }

    .protein-strip-item:last-child {
        border-bottom: none;
    }

    .protein-myths {
        padding: 70px 5px 90px;
    }

    .myth-grid {
        grid-template-columns: 1fr;
    }

    .protein-timeline-section {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 22px 90px;
    }

    .protein-timeline {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .protein-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px;
    }

    .protein-twist h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .protein-twist-copy {
        margin-top: 60px;
    }

    .protein-evidence,
    .protein-context {
        padding-left: 5px;
        padding-right: 5px;
    }

    .protein-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .protein-learned-heading h3 {
        font-size: 55px;
    }

    .protein-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .protein-ending h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .protein-ending-final {
        font-size: 45px;

        letter-spacing: -3px;
    }

    .protein-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — FAT ARTICLE

   FIXED SPINE (matches vitamins.html / calories.html exactly):
   hero, twist ("the question I actually came for"), learned
   ("so, what did I actually learn?"), ending ("and maybe that's
   the part I was looking for"), sources.

   ROTATING (free per article, same palette/materials only):
   opening, start-here, three-way map, numbers, guideline
   timeline, myth cards (generic .myth-grid/.myth-card reused
   as-is), evidence, context.

   Append this block to the end of style.css
========================================================= */

.fat-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.fat-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.fat-article em {
    color: var(--green);
}

.fat-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}


/* =========================================================
   HERO — FIXED SPINE
========================================================= */

.fat-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fat-hero h2 {
    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.fat-hero h2 span {
    color: var(--pink);
}

.fat-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.fat-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING / STANDARD SECTIONS — rotating
========================================================= */

.fat-opening,
.fat-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.fat-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.fat-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.fat-reading {
    max-width: 700px;
}

.fat-section .fat-reading > h3 {
    max-width: 850px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 55px;
}

.fat-question {
    max-width: 900px;

    margin: 90px 0;

    font-size: clamp(45px, 7vw, 82px);

    line-height: .9;

    letter-spacing: -4px;

    color: var(--green);
}

.fat-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   BIG STATEMENTS — rotating
========================================================= */

.fat-statement {
    max-width: 850px;

    margin: 110px 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(45px, 7vw, 82px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--green);

    font-weight: 600;
}

.fat-statement span {
    color: var(--pink);
}


/* =========================================================
   THREE-WAY MAP (saturated / unsaturated / trans) — rotating
========================================================= */

.fat-map {
    margin: 0 -25px;

    padding: 125px 50px 140px;

    background-color: var(--cream);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.fat-map-header {
    max-width: 1000px;

    margin: 0 auto 80px;
}

.fat-map-header h3 {
    font-size: clamp(58px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.fat-map-body {
    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.fat-map-panel {
    padding: 40px 32px;

    min-height: 260px;

    background-color: var(--green);

    color: var(--cream);
}

.fat-map-panel.accent {
    background-color: var(--pink-light);

    color: var(--green);
}

.fat-map-panel h4 {
    font-size: 30px;

    line-height: 1;

    margin: 0 0 25px;

    color: inherit;
}

.fat-map-panel p {
    color: inherit;

    font-size: 15px !important;
    line-height: 1.6 !important;

    margin: 0 !important;
}

.fat-map-text {
    max-width: 1000px;

    margin: 75px auto 0;
}

.fat-map-text p {
    margin-bottom: 25px;
}


/* =========================================================
   NUMBERS — rotating
========================================================= */

.fat-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.fat-numbers-heading h3 {
    font-size: clamp(58px, 8vw, 92px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0;
}

.fat-numbers .fat-reading p {
    color: var(--cream);
}

.fat-numbers strong {
    color: var(--pink);
}


/* =========================================================
   GUIDELINE TIMELINE — rotating
========================================================= */

.fat-timeline-section {
    padding: 120px 20px 60px;

    max-width: 1050px;

    margin: 0 auto;
}

.fat-timeline-section h3 {
    max-width: 900px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 65px;
}

.fat-timeline {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    border-top: 2px solid var(--green);

    padding-top: 40px;

    margin-bottom: 55px;
}

.fat-timeline-point {
    padding-right: 15px;
}

.fat-timeline-point.accent {
    color: var(--pink);
}

.fat-timeline-marker {
    display: block;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: -0.5px;

    margin-bottom: 18px;

    color: var(--pink);
}

.fat-timeline-point.accent .fat-timeline-marker {
    color: var(--green);
}

.fat-timeline-point p {
    font-size: 15px !important;
    line-height: 1.6 !important;

    max-width: none;

    margin: 0 !important;
}


/* =========================================================
   MYTH CARDS — rotating (uses generic .myth-grid / .myth-card)
========================================================= */

.fat-myths {
    padding: 40px 20px 120px;

    max-width: 1050px;

    margin: 0 auto;
}

.fat-myths h3 {
    max-width: 850px;

    font-size: clamp(46px, 6vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   TWIST — FIXED SPINE
========================================================= */

.fat-twist {
    margin: 120px -25px;

    padding: 150px 70px;

    background-color: var(--pink);
}

.fat-twist .fat-label {
    color: var(--green);
}

.fat-twist h3 {
    max-width: 1000px;

    font-size: clamp(65px, 10vw, 120px);

    line-height: .8;

    letter-spacing: -6px;

    color: var(--green);

    margin: 0;
}

.fat-twist h3 span {
    color: var(--cream);
}

.fat-twist-copy {
    max-width: 700px;

    margin: 90px 0 0 auto;
}

.fat-twist-copy p {
    color: var(--green);
}

.fat-twist-copy .fat-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE — rotating
========================================================= */

.fat-evidence {
    max-width: 700px;

    margin: 0 auto;

    padding: 110px 20px 60px;
}

.fat-evidence h3 {
    max-width: 850px;

    font-size: clamp(46px, 6vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   CONTEXT — rotating
========================================================= */

.fat-context {
    max-width: 700px;

    margin: 0 auto;

    padding: 60px 20px 100px;
}

.fat-context h3 {
    max-width: 850px;

    font-size: clamp(46px, 6vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   LEARNED — FIXED SPINE
========================================================= */

.fat-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    background-color: var(--paper);
}

.fat-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING — FIXED SPINE
========================================================= */

.fat-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.fat-ending > .fat-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.fat-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(60px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.fat-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.fat-ending-copy p {
    color: var(--cream);
}

.fat-ending-final {
    max-width: 1000px;

    margin: 130px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(50px, 8vw, 95px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    font-weight: 600;
}

.fat-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES — FIXED SPINE
========================================================= */

.fat-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.fat-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.fat-sources ol {
    margin: 0;

    padding-left: 25px;
}

.fat-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .fat-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .fat-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .fat-hero h2 {
        font-size: 57px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .fat-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .fat-opening,
    .fat-section {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 10px;
    }

    .fat-section .fat-reading > h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .fat-question {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 70px 0;
    }

    .fat-question-small {
        font-size: 31px;
    }

    .fat-statement {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 80px 0;
    }

    .fat-map {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 25px 90px;
    }

    .fat-map-header h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .fat-map-body {
        grid-template-columns: 1fr;
    }

    .fat-numbers {
        grid-template-columns: 1fr;

        gap: 60px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .fat-numbers-heading h3 {
        font-size: 58px;
    }

    .fat-timeline-section {
        padding: 80px 5px 40px;
    }

    .fat-timeline-section h3 {
        font-size: 50px;
    }

    .fat-timeline {
        grid-template-columns: 1fr 1fr;

        gap: 30px;
    }

    .fat-myths {
        padding: 30px 5px 90px;
    }

    .fat-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px;
    }

    .fat-twist h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .fat-twist-copy {
        margin-top: 60px;
    }

    .fat-evidence,
    .fat-context {
        padding-left: 5px;
        padding-right: 5px;
    }

    .fat-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .fat-learned-heading h3 {
        font-size: 55px;
    }

    .fat-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .fat-ending h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .fat-ending-final {
        font-size: 45px;

        letter-spacing: -3px;
    }

    .fat-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — CRAVINGS ARTICLE (THE MIND)

   FIXED SPINE (site-wide, matches vitamins.html / calories.html):
   hero, twist ("the question I actually came for"), learned
   ("so, what did I actually learn?"), ending ("and maybe that's
   the part I was looking for"), sources.

   ROTATING (free per article, same palette/materials only):
   opening, start-here, hunger-vs-craving map, the number,
   the chocolate experiment feature, myth cards (generic
   .myth-grid/.myth-card reused as-is), evidence, context.

   Append this block to the end of style.css
========================================================= */

.craving-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.craving-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.craving-article em {
    color: var(--green);
}

.craving-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}


/* =========================================================
   HERO — FIXED SPINE
========================================================= */

.craving-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.craving-hero h2 {
    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.craving-hero h2 span {
    color: var(--pink);
}

.craving-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.craving-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING / STANDARD SECTIONS — rotating
========================================================= */

.craving-opening,
.craving-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.craving-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.craving-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.craving-reading {
    max-width: 700px;
}

.craving-section .craving-reading > h3 {
    max-width: 850px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 55px;
}

.craving-question {
    max-width: 900px;

    margin: 90px 0;

    font-size: clamp(45px, 7vw, 82px);

    line-height: .9;

    letter-spacing: -4px;

    color: var(--green);
}

.craving-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   BIG STATEMENTS — rotating
========================================================= */

.craving-statement {
    max-width: 850px;

    margin: 110px 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(45px, 7vw, 82px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--green);

    font-weight: 600;
}

.craving-statement span {
    color: var(--pink);
}


/* =========================================================
   HUNGER VS CRAVING MAP — rotating
========================================================= */

.craving-map {
    margin: 0 -25px;

    padding: 125px 50px 140px;

    background-color: var(--cream);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.craving-map-header {
    max-width: 1000px;

    margin: 0 auto 80px;
}

.craving-map-header h3 {
    font-size: clamp(58px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.craving-map-body {
    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 70px 1fr;
}

.craving-map-side {
    padding: 45px;

    min-height: 260px;

    background-color: var(--green);

    color: var(--cream);
}

.craving-map-side.accent {
    background-color: var(--pink-light);

    color: var(--green);
}

.craving-map-side h4 {
    font-size: 38px;

    line-height: 1;

    margin: 0 0 30px;

    color: inherit;
}

.craving-map-side p {
    color: inherit;

    font-size: 16px !important;
    line-height: 1.6 !important;

    margin: 0 !important;
}

.craving-map-text {
    max-width: 1000px;

    margin: 75px auto 0;
}

.craving-map-text p {
    margin-bottom: 25px;
}


/* =========================================================
   THE NUMBER — rotating
========================================================= */

.craving-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.craving-numbers-heading h3 {
    font-size: clamp(58px, 8vw, 92px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0;
}

.craving-numbers .craving-reading p {
    color: var(--cream);
}

.craving-numbers strong {
    color: var(--pink);
}


/* =========================================================
   THE CHOCOLATE EXPERIMENT — rotating (single feature)
========================================================= */

.craving-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 110px 0;

    border-top: 2px solid var(--green);
}

.craving-feature-number {
    padding-top: 5px;

    font-size: 48px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.craving-feature .craving-reading h4 {
    font-size: clamp(42px, 6vw, 66px);

    line-height: .95;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 60px;
}

.craving-feature-statement {
    max-width: 800px;

    margin: 70px 0;

    padding: 35px 0 35px 30px;

    border-left: 5px solid var(--pink);

    font-size: 34px;

    line-height: 1.25;

    color: var(--pink);

    font-weight: 800;
}


/* =========================================================
   MYTH CARDS — rotating (uses generic .myth-grid / .myth-card)
========================================================= */

.craving-myths {
    padding: 40px 20px 120px;

    max-width: 1050px;

    margin: 0 auto;
}

.craving-myths h3 {
    max-width: 850px;

    font-size: clamp(46px, 6vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   TWIST — FIXED SPINE
========================================================= */

.craving-twist {
    margin: 120px -25px;

    padding: 150px 70px;

    background-color: var(--pink);
}

.craving-twist .craving-label {
    color: var(--green);
}

.craving-twist h3 {
    max-width: 1000px;

    font-size: clamp(65px, 10vw, 120px);

    line-height: .8;

    letter-spacing: -6px;

    color: var(--green);

    margin: 0;
}

.craving-twist h3 span {
    color: var(--cream);
}

.craving-twist-copy {
    max-width: 700px;

    margin: 90px 0 0 auto;
}

.craving-twist-copy p {
    color: var(--green);
}

.craving-twist-copy .craving-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE — rotating
========================================================= */

.craving-evidence {
    max-width: 700px;

    margin: 0 auto;

    padding: 110px 20px 60px;
}

.craving-evidence h3 {
    max-width: 850px;

    font-size: clamp(46px, 6vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   CONTEXT — rotating
========================================================= */

.craving-context {
    max-width: 700px;

    margin: 0 auto;

    padding: 60px 20px 100px;
}

.craving-context h3 {
    max-width: 850px;

    font-size: clamp(46px, 6vw, 68px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   LEARNED — FIXED SPINE
========================================================= */

.craving-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    background-color: var(--paper);
}

.craving-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING — FIXED SPINE
========================================================= */

.craving-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.craving-ending > .craving-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.craving-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(60px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.craving-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.craving-ending-copy p {
    color: var(--cream);
}

.craving-ending-final {
    max-width: 1000px;

    margin: 130px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(50px, 8vw, 95px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    font-weight: 600;
}

.craving-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES — FIXED SPINE
========================================================= */

.craving-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.craving-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.craving-sources ol {
    margin: 0;

    padding-left: 25px;
}

.craving-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .craving-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .craving-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .craving-hero h2 {
        font-size: 57px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .craving-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .craving-opening,
    .craving-section,
    .craving-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 10px;
    }

    .craving-section .craving-reading > h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .craving-question {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 70px 0;
    }

    .craving-question-small {
        font-size: 31px;
    }

    .craving-statement {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 80px 0;
    }

    .craving-map {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 25px 90px;
    }

    .craving-map-header h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .craving-map-body {
        grid-template-columns: 1fr;
    }

    .craving-map-side {
        min-height: auto;

        padding: 30px;
    }

    .craving-numbers {
        grid-template-columns: 1fr;

        gap: 60px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .craving-numbers-heading h3 {
        font-size: 58px;
    }

    .craving-feature {
        padding: 75px 10px;
    }

    .craving-feature .craving-reading h4 {
        font-size: 42px;

        letter-spacing: -2px;
    }

    .craving-myths {
        padding: 30px 5px 90px;
    }

    .craving-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px;
    }

    .craving-twist h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .craving-twist-copy {
        margin-top: 60px;
    }

    .craving-evidence,
    .craving-context {
        padding-left: 5px;
        padding-right: 5px;
    }

    .craving-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .craving-learned-heading h3 {
        font-size: 55px;
    }

    .craving-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .craving-ending h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .craving-ending-final {
        font-size: 45px;

        letter-spacing: -3px;
    }

    .craving-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — EMOTIONAL EATING ARTICLE (THE MIND)

   FIXED SPINE (site-wide, matches vitamins.html / calories.html):
   hero, twist ("the question I actually came for"), learned
   ("so, what did I actually learn?"), ending ("and maybe that's
   the part I was looking for"), sources.

   ROTATING — deliberately quieter than usual here: a muted
   two-column signal list instead of big colour-blocked panels,
   restrained use of the pink accent, more white space.

   Append this block to the end of style.css
========================================================= */

.emo-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.emo-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.emo-article em {
    color: var(--green);
}

.emo-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}


/* =========================================================
   HERO — FIXED SPINE
========================================================= */

.emo-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.emo-hero h2 {
    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.emo-hero h2 span {
    color: var(--pink);
}

.emo-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.emo-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING / STANDARD SECTIONS — rotating
========================================================= */

.emo-opening,
.emo-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.emo-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.emo-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.emo-reading {
    max-width: 700px;
}

.emo-section .emo-reading > h3 {
    max-width: 850px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 55px;
}

.emo-question {
    max-width: 780px;

    margin: 70px 0;

    font-size: clamp(34px, 5vw, 54px);

    line-height: 1.1;

    letter-spacing: -2px;

    color: var(--green);

    font-weight: 600;
}

.emo-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   BIG STATEMENTS — rotating (used sparingly here)
========================================================= */

.emo-statement {
    max-width: 850px;

    margin: 90px 0;

    padding: 45px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(32px, 4.5vw, 48px);

    line-height: 1.2;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}

.emo-statement span {
    color: var(--pink);
}


/* =========================================================
   TWO SIGNALS — rotating, deliberately quiet
========================================================= */

.emo-signals-section {
    padding: 40px 20px 120px;

    max-width: 1000px;

    margin: 0 auto;
}

.emo-signals-section h3 {
    max-width: 800px;

    font-size: clamp(38px, 5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 55px;
}

.emo-signals {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.emo-signals-col {
    padding: 40px 45px;
}

.emo-signals-col:first-child {
    border-right: 1px solid var(--line);
}

.emo-signals-col h4 {
    font-size: 17px;

    font-weight: 700;

    letter-spacing: 0.5px;

    color: var(--green);

    margin: 0 0 22px;
}

.emo-signals-col ul {
    margin: 0;

    padding: 0;

    list-style: none;
}

.emo-signals-col li {
    padding: 12px 0;

    border-top: 1px solid var(--line);

    font-size: 15px;

    line-height: 1.5;

    color: var(--ink);
}

.emo-signals-col li:first-child {
    border-top: none;
}

.emo-signals-note {
    margin: 30px 0 0 !important;

    font-size: 14px !important;

    color: #59615a;

    max-width: none;
}


/* =========================================================
   COMFORT FOOD FEATURE — rotating
========================================================= */

.emo-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 40px 0 110px;

    border-top: 2px solid var(--green);
}

.emo-feature-number {
    padding-top: 5px;

    font-size: 48px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.emo-feature .emo-reading h4 {
    font-size: clamp(38px, 5vw, 56px);

    line-height: 1.05;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 50px;
}

.emo-feature-statement {
    max-width: 780px;

    margin: 55px 0;

    padding: 28px 0 28px 28px;

    border-left: 5px solid var(--pink);

    font-size: 26px;

    line-height: 1.35;

    color: var(--green);

    font-weight: 700;
}


/* =========================================================
   MYTH CARDS — rotating (uses generic .myth-grid / .myth-card)
========================================================= */

.emo-myths {
    padding: 20px 20px 120px;

    max-width: 1050px;

    margin: 0 auto;
}

.emo-myths h3 {
    max-width: 850px;

    font-size: clamp(40px, 5.5vw, 60px);

    line-height: 1.05;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   TWIST — FIXED SPINE
========================================================= */

.emo-twist {
    margin: 120px -25px;

    padding: 150px 70px;

    background-color: var(--pink);
}

.emo-twist .emo-label {
    color: var(--green);
}

.emo-twist h3 {
    max-width: 1000px;

    font-size: clamp(65px, 10vw, 120px);

    line-height: .8;

    letter-spacing: -6px;

    color: var(--green);

    margin: 0;
}

.emo-twist h3 span {
    color: var(--cream);
}

.emo-twist-copy {
    max-width: 700px;

    margin: 90px 0 0 auto;
}

.emo-twist-copy p {
    color: var(--green);
}

.emo-twist-copy .emo-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE — rotating
========================================================= */

.emo-evidence {
    max-width: 700px;

    margin: 0 auto;

    padding: 110px 20px 60px;
}

.emo-evidence h3 {
    max-width: 850px;

    font-size: clamp(40px, 5.5vw, 60px);

    line-height: 1.05;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   CONTEXT — rotating
========================================================= */

.emo-context {
    max-width: 700px;

    margin: 0 auto;

    padding: 60px 20px 100px;
}

.emo-context h3 {
    max-width: 850px;

    font-size: clamp(40px, 5.5vw, 60px);

    line-height: 1.05;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   LEARNED — FIXED SPINE
========================================================= */

.emo-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    background-color: var(--paper);
}

.emo-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING — FIXED SPINE
========================================================= */

.emo-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.emo-ending > .emo-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.emo-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(60px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.emo-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.emo-ending-copy p {
    color: var(--cream);
}

.emo-ending-final {
    max-width: 1000px;

    margin: 130px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(46px, 7vw, 80px);

    line-height: .9;

    letter-spacing: -3px;

    color: var(--cream);

    font-weight: 600;
}

.emo-ending-final span {
    color: var(--pink);
}


/* =========================================================
   COMING SOON TEASER — quiet, rotating
========================================================= */

.emo-teaser {
    max-width: 700px;

    margin: 0 auto 60px;

    padding: 45px 40px;

    background-color: var(--paper);

    border: 1px solid var(--line);

    border-left: 5px solid var(--pink);
}

.emo-teaser h3 {
    font-size: 28px;

    line-height: 1.2;

    letter-spacing: -0.5px;

    color: var(--green);

    margin: 0 0 20px;

    max-width: none;
}

.emo-teaser p {
    max-width: none;

    margin-bottom: 18px;
}

.emo-teaser p:last-child {
    margin-bottom: 0;
}

.emo-teaser a {
    color: var(--green);

    font-weight: 700;

    text-decoration: none;

    border-bottom: 2px solid var(--pink);

    padding-bottom: 2px;
}

.emo-teaser a:hover {
    color: var(--pink);
}

.emo-teaser-note {
    font-size: 14px !important;
    line-height: 1.6 !important;

    color: #59615a;

    padding-top: 18px;

    border-top: 1px solid var(--line);
}


/* =========================================================
   SOURCES — FIXED SPINE
========================================================= */

.emo-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.emo-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.emo-sources ol {
    margin: 0;

    padding-left: 25px;
}

.emo-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}

.emo-sources-note {
    margin: 35px 0 0 !important;

    padding-top: 30px;

    border-top: 1px solid var(--line);

    font-size: 14px !important;
    line-height: 1.6 !important;

    color: #59615a;

    max-width: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .emo-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .emo-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .emo-hero h2 {
        font-size: 57px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .emo-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .emo-opening,
    .emo-section,
    .emo-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 10px;
    }

    .emo-section .emo-reading > h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .emo-question {
        font-size: 34px;

        margin: 55px 0;
    }

    .emo-question-small {
        font-size: 31px;
    }

    .emo-statement {
        font-size: 32px;

        margin: 65px 0;
    }

    .emo-signals-section {
        padding: 20px 5px 90px;
    }

    .emo-signals {
        grid-template-columns: 1fr;
    }

    .emo-signals-col:first-child {
        border-right: none;

        border-bottom: 1px solid var(--line);
    }

    .emo-feature {
        padding: 30px 10px 75px;
    }

    .emo-myths {
        padding: 10px 5px 90px;
    }

    .emo-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px;
    }

    .emo-twist h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .emo-twist-copy {
        margin-top: 60px;
    }

    .emo-evidence,
    .emo-context {
        padding-left: 5px;
        padding-right: 5px;
    }

    .emo-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .emo-learned-heading h3 {
        font-size: 55px;
    }

    .emo-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .emo-ending h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .emo-ending-final {
        font-size: 42px;
    }

    .emo-teaser {
        margin-left: 5px;
        margin-right: 5px;

        padding: 30px 25px;
    }

    .emo-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — EATING DISORDERS ARTICLE (THE MIND)

   FIXED SPINE (site-wide, matches vitamins.html / calories.html):
   hero, twist ("the question I actually came for"), learned
   ("so, what did I actually learn?"), ending ("and maybe that's
   the part I was looking for"), sources.

   ROTATING — quiet and restrained throughout, like the
   emotional eating article: muted lists over bold colour
   blocks, generous white space, sparing use of pink.

   Append this block to the end of style.css
========================================================= */

.edis-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.edis-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.edis-article em {
    color: var(--green);
}

.edis-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.edis-reading {
    max-width: 700px;
}


/* =========================================================
   HERO — FIXED SPINE
========================================================= */

.edis-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.edis-hero h2 {
    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.edis-hero h2 span {
    color: var(--pink);
}

.edis-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.edis-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING / STANDARD SECTIONS — rotating
========================================================= */

.edis-opening,
.edis-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 110px 0;

    border-top: 1px solid var(--line);
}

.edis-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.edis-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.edis-section .edis-reading > h3 {
    max-width: 850px;

    font-size: clamp(46px, 6.5vw, 74px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 50px;
}

.edis-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   BIG STATEMENTS — rotating, used with restraint
========================================================= */

.edis-statement {
    max-width: 780px;

    margin: 80px 0;

    padding: 40px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(30px, 4.2vw, 46px);

    line-height: 1.18;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}

.edis-statement span {
    color: var(--pink);
}


/* =========================================================
   A FEW RECOGNISED FORMS — rotating, quiet vertical list
========================================================= */

.edis-forms-section {
    padding: 30px 20px 110px;

    max-width: 850px;

    margin: 0 auto;
}

.edis-forms-section h3 {
    font-size: clamp(38px, 5vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 30px;
}

.edis-forms-intro {
    font-size: 17px !important;

    color: #444b46;

    margin-bottom: 50px !important;
}

.edis-forms {
    border-top: 1px solid var(--line);
}

.edis-form-row {
    padding: 26px 0;

    border-bottom: 1px solid var(--line);
}

.edis-form-row h4 {
    font-size: 20px;

    font-weight: 700;

    color: var(--green);

    margin: 0 0 10px;
}

.edis-form-row p {
    font-size: 16px !important;
    line-height: 1.6 !important;

    max-width: none;

    margin: 0 !important;

    color: var(--ink);
}

.edis-forms-note {
    margin: 35px 0 0 !important;

    font-size: 15px !important;

    color: #59615a;

    max-width: none;
}


/* =========================================================
   THE NUMBER — rotating
========================================================= */

.edis-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 120px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.edis-numbers-heading h3 {
    font-size: clamp(52px, 7.5vw, 86px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--cream);

    margin: 0;
}

.edis-numbers .edis-reading p {
    color: var(--cream);
}

.edis-numbers strong {
    color: var(--pink);
}


/* =========================================================
   THE STEREOTYPE PROBLEM — rotating (single feature)
========================================================= */

.edis-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 105px 0;

    border-top: 2px solid var(--green);
}

.edis-feature-number {
    padding-top: 5px;

    font-size: 44px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.edis-feature .edis-reading h4 {
    font-size: clamp(36px, 5vw, 52px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 45px;
}

.edis-feature-statement {
    max-width: 780px;

    margin: 50px 0;

    padding: 26px 0 26px 26px;

    border-left: 5px solid var(--pink);

    font-size: 24px;

    line-height: 1.4;

    color: var(--green);

    font-weight: 700;
}


/* =========================================================
   MYTH CARDS — rotating (three-column variant)
========================================================= */

.edis-myths {
    padding: 20px 20px 115px;

    max-width: 1050px;

    margin: 0 auto;
}

.edis-myths h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}

.myth-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}


/* =========================================================
   TWIST — FIXED SPINE
========================================================= */

.edis-twist {
    margin: 115px -25px;

    padding: 140px 70px;

    background-color: var(--pink);
}

.edis-twist .edis-label {
    color: var(--green);
}

.edis-twist h3 {
    max-width: 1000px;

    font-size: clamp(58px, 9vw, 105px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.edis-twist h3 span {
    color: var(--cream);
}

.edis-twist-copy {
    max-width: 700px;

    margin: 85px 0 0 auto;
}

.edis-twist-copy p {
    color: var(--green);
}

.edis-twist-copy .edis-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE — rotating
========================================================= */

.edis-evidence {
    max-width: 700px;

    margin: 0 auto;

    padding: 105px 20px 55px;
}

.edis-evidence h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   WHAT ACTUALLY HELPS — rotating
========================================================= */

.edis-context {
    max-width: 700px;

    margin: 0 auto;

    padding: 55px 20px 100px;
}

.edis-context h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   LEARNED — FIXED SPINE
========================================================= */

.edis-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 125px 20px;

    background-color: var(--paper);
}

.edis-learned-heading h3 {
    font-size: clamp(50px, 7vw, 78px);

    line-height: .88;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING — FIXED SPINE
========================================================= */

.edis-ending {
    margin: 0 -25px;

    padding: 145px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.edis-ending > .edis-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.edis-ending h3 {
    max-width: 1000px;

    margin: 0 auto 75px;

    font-size: clamp(54px, 8vw, 98px);

    line-height: .86;

    letter-spacing: -5px;

    color: var(--cream);
}

.edis-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.edis-ending-copy p {
    color: var(--cream);
}

.edis-ending-final {
    max-width: 1000px;

    margin: 120px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(42px, 6.5vw, 74px);

    line-height: .92;

    letter-spacing: -2.5px;

    color: var(--cream);

    font-weight: 600;
}

.edis-ending-final span {
    color: var(--pink);
}


/* =========================================================
   RELATED READING
========================================================= */

.edis-related {
    max-width: 700px;

    margin: 0 auto;

    padding: 55px 20px 0;
}

.edis-related p {
    max-width: none;

    font-size: 15px !important;

    color: #59615a;

    margin: 0 !important;
}

.edis-related a {
    color: var(--green);

    font-weight: 700;

    text-decoration: none;

    border-bottom: 2px solid var(--pink);
}

.edis-related a:hover {
    color: var(--pink);
}


/* =========================================================
   SOURCES — FIXED SPINE
========================================================= */

.edis-sources {
    max-width: 900px;

    margin: 70px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.edis-sources h3 {
    font-size: 40px;

    color: var(--green);

    margin: 0 0 32px;
}

.edis-sources ol {
    margin: 0;

    padding-left: 25px;
}

.edis-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}

.edis-sources-note {
    margin: 35px 0 0 !important;

    padding-top: 30px;

    border-top: 1px solid var(--line);

    font-size: 14px !important;
    line-height: 1.6 !important;

    color: #59615a;

    max-width: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .edis-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .edis-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .edis-hero h2 {
        font-size: 55px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .edis-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .edis-opening,
    .edis-section,
    .edis-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 75px 10px;
    }

    .edis-question-small {
        font-size: 30px;
    }

    .edis-statement {
        font-size: 30px;

        margin: 60px 0;
    }

    .edis-forms-section {
        padding: 20px 5px 90px;
    }

    .edis-numbers {
        grid-template-columns: 1fr;

        gap: 55px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 75px 25px;
    }

    .edis-numbers-heading h3 {
        font-size: 52px;
    }

    .edis-feature {
        padding: 70px 10px;
    }

    .edis-myths {
        padding: 10px 5px 85px;
    }

    .myth-grid.cols-3 {
        grid-template-columns: 1fr;
    }

    .edis-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 22px;
    }

    .edis-twist h3 {
        font-size: 52px;

        letter-spacing: -3px;
    }

    .edis-twist-copy {
        margin-top: 55px;
    }

    .edis-evidence,
    .edis-context {
        padding-left: 5px;
        padding-right: 5px;
    }

    .edis-learned {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 80px 10px;
    }

    .edis-learned-heading h3 {
        font-size: 48px;
    }

    .edis-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px 75px;
    }

    .edis-ending h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .edis-ending-final {
        font-size: 38px;
    }

    .edis-related {
        padding-left: 5px;
        padding-right: 5px;
    }

    .edis-sources {
        margin-top: 60px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — MINERALS ARTICLE
   Same visual language and structure as the vitamin
   investigation, mirrored under a mineral- namespace.
   Append this block to the end of style.css
========================================================= */

.mineral-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.mineral-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.mineral-article em {
    color: var(--green);
}

.mineral-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}


/* =========================================================
   HERO
========================================================= */

.mineral-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mineral-hero h2 {
    max-width: 1000px;

    font-size: clamp(70px, 10vw, 125px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--green);

    margin: 70px 0;
}

.mineral-hero h2 span {
    color: var(--pink);
}

.mineral-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.mineral-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING
========================================================= */

.mineral-opening {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.mineral-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.mineral-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.mineral-reading {
    max-width: 700px;
}

.mineral-question {
    max-width: 900px;

    margin: 90px 0;

    font-size: clamp(45px, 7vw, 82px);

    line-height: .9;

    letter-spacing: -4px;

    color: var(--green);
}

.mineral-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}


/* =========================================================
   STANDARD SECTIONS
========================================================= */

.mineral-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 120px 0;

    border-top: 1px solid var(--line);
}

.mineral-section-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.mineral-section .mineral-reading > h3 {
    max-width: 850px;

    font-size: clamp(52px, 7vw, 82px);

    line-height: .87;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 55px;
}

.mineral-statement {
    max-width: 850px;

    margin: 110px 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);

    font-size: clamp(45px, 7vw, 82px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--green);

    font-weight: 600;
}

.mineral-statement span {
    color: var(--pink);
}


/* =========================================================
   MACROMINERAL WALL
========================================================= */

.mineral-wall {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin: 70px 0;

    border-top: 2px solid var(--green);
    border-left: 2px solid var(--green);
}

.mineral-wall div {
    min-height: 130px;

    padding: 25px 20px;

    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.mineral-wall strong {
    display: block;

    font-size: 42px;

    line-height: 1;

    color: var(--pink);

    margin-bottom: 15px;
}

.mineral-wall span {
    display: block;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: 1px;

    color: var(--green);
}


/* =========================================================
   MACRO / TRACE MAP
========================================================= */

.mineral-map {
    margin: 0 -25px;

    padding: 125px 50px 140px;

    background-color: var(--cream);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.mineral-map-header {
    max-width: 1000px;

    margin: 0 auto 80px;
}

.mineral-map-header h3 {
    font-size: clamp(58px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.mineral-map-body {
    max-width: 1000px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 70px 1fr;
}

.mineral-map-side {
    padding: 45px;

    min-height: 350px;

    background-color: var(--green);

    color: var(--cream);
}

.mineral-map-side.accent {
    background-color: var(--pink-light);

    color: var(--green);
}

.mineral-map-side h4 {
    font-size: 38px;

    line-height: 1;

    margin: 45px 0 35px;

    color: inherit;
}

/* Generic square badge, an alias of .map-vitamins with a
   topic-neutral name for reuse outside the vitamin article. */
.map-badges {
    display: flex;

    gap: 10px;

    margin-bottom: 40px;
}

.map-badges span {
    display: flex;

    width: 55px;
    height: 55px;

    align-items: center;
    justify-content: center;

    border: 2px solid currentColor;

    font-size: 20px;

    font-weight: 700;
}

.mineral-map-side p {
    color: inherit;

    font-size: 16px !important;
    line-height: 1.6 !important;

    margin: 0 !important;
}

.mineral-map-text {
    max-width: 1000px;

    margin: 75px auto 0;
}

.mineral-map-text p {
    margin-bottom: 25px;
}


/* =========================================================
   NUMBERS
========================================================= */

.mineral-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.mineral-numbers-heading h3 {
    font-size: clamp(58px, 8vw, 92px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0;
}

.mineral-numbers .mineral-reading p {
    color: var(--cream);
}

.mineral-numbers strong {
    color: var(--pink);
}


/* =========================================================
   DIRECTORY
========================================================= */

.mineral-directory {
    padding: 140px 20px 80px;
}

.mineral-directory > h3 {
    font-size: clamp(55px, 8vw, 95px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0 0 70px;
}

.mineral-directory-copy {
    max-width: 700px;
    margin-left: auto;
    margin-right: 8%;
}

.mineral-directory-copy p {
    margin-bottom: 27px;
}


/* =========================================================
   INDIVIDUAL MINERALS
========================================================= */

.mineral-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 110px 0;

    border-top: 2px solid var(--green);
}

.mineral-feature-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);
}

.mineral-feature-number {
    padding-top: 5px;

    font-size: 48px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.mineral-feature .mineral-reading h4 {
    font-size: clamp(46px, 6.5vw, 76px);

    line-height: .9;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0 0 60px;
}

.mineral-feature-statement {
    max-width: 800px;

    margin: 70px 0;

    padding: 35px 0 35px 30px;

    border-left: 5px solid var(--pink);

    font-size: 36px;

    line-height: 1.2;

    color: var(--pink);

    font-weight: 800;
}

.mineral-feature-green {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--green);

    color: var(--cream);
}

.mineral-feature-green .mineral-reading p {
    color: var(--cream);
}

.mineral-feature-green .mineral-reading h4 {
    color: var(--cream);
}

.mineral-feature-green strong {
    color: var(--pink);
}


/* =========================================================
   SUPPLEMENT TWIST
========================================================= */

.mineral-twist {
    margin: 120px -25px;

    padding: 150px 70px;

    background-color: var(--pink);
}

.mineral-twist .mineral-label {
    color: var(--green);
}

.mineral-twist h3 {
    max-width: 1000px;

    font-size: clamp(65px, 10vw, 120px);

    line-height: .8;

    letter-spacing: -6px;

    color: var(--green);

    margin: 0;
}

.mineral-twist h3 span {
    color: var(--cream);
}

.mineral-twist-copy {
    max-width: 700px;

    margin: 90px 0 0 auto;
}

.mineral-twist-copy p {
    color: var(--green);
}

.mineral-twist-copy .mineral-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE
========================================================= */

.mineral-evidence {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 125px 70px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.mineral-evidence-heading h3 {
    font-size: clamp(52px, 7vw, 82px);

    line-height: .84;

    letter-spacing: -4px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   THE SALT SPOTLIGHT
   (same recipe as the .multivitamin section: numbered slab,
   dark green, large content column — renamed for this topic)
========================================================= */

.mineral-spotlight {
    display: grid;

    grid-template-columns: 160px 1fr;

    gap: 70px;

    margin: 0 -25px;

    padding: 120px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.mineral-spotlight-number {
    font-size: 100px;

    line-height: .8;

    letter-spacing: -6px;

    color: var(--pink);

    font-weight: 700;
}

.mineral-spotlight-content {
    max-width: 700px;
}

.mineral-spotlight-content h3 {
    font-size: clamp(55px, 8vw, 90px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    margin: 0 0 60px;
}

.mineral-spotlight-content p {
    color: var(--cream);
}

.mineral-spotlight-content strong {
    color: var(--pink);
}

.mineral-spotlight-punch {
    margin: 70px 0;

    font-size: clamp(40px, 6vw, 68px);

    line-height: .88;

    letter-spacing: -3px;

    color: var(--pink);

    font-weight: 700;
}


/* =========================================================
   WHAT I LEARNED
========================================================= */

.mineral-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 130px 20px;

    background-color: var(--paper);
}

.mineral-learned-heading h3 {
    font-size: clamp(55px, 7vw, 85px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING
========================================================= */

.mineral-ending {
    margin: 0 -25px;

    padding: 150px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.mineral-ending > .mineral-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.mineral-ending h3 {
    max-width: 1000px;

    margin: 0 auto 80px;

    font-size: clamp(60px, 9vw, 110px);

    line-height: .82;

    letter-spacing: -6px;

    color: var(--cream);
}

.mineral-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.mineral-ending-copy p {
    color: var(--cream);
}

.mineral-ending-final {
    max-width: 1000px;

    margin: 130px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(50px, 8vw, 95px);

    line-height: .82;

    letter-spacing: -5px;

    color: var(--cream);

    font-weight: 600;
}

.mineral-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES
========================================================= */

.mineral-sources {
    max-width: 900px;

    margin: 100px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.mineral-sources h3 {
    font-size: 42px;

    color: var(--green);

    margin: 0 0 35px;
}

.mineral-sources ol {
    margin: 0;

    padding-left: 25px;
}

.mineral-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .mineral-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .mineral-hero {
        min-height: 620px;

        padding: 55px 10px 70px;
    }

    .mineral-hero h2 {
        font-size: 57px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .mineral-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .mineral-opening,
    .mineral-section,
    .mineral-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 80px 10px;
    }

    .mineral-section-paper,
    .mineral-feature-paper {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .mineral-section .mineral-reading > h3 {
        font-size: 50px;

        letter-spacing: -3px;
    }

    .mineral-question {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 70px 0;
    }

    .mineral-question-small {
        font-size: 31px;
    }

    .mineral-statement {
        font-size: 47px;

        letter-spacing: -3px;

        margin: 80px 0;
    }

    .mineral-wall {
        grid-template-columns: repeat(2, 1fr);
    }

    .mineral-map {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 25px 90px;
    }

    .mineral-map-header h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .mineral-map-body {
        grid-template-columns: 1fr;
    }

    .mineral-map-side {
        min-height: auto;

        padding: 30px;
    }

    .mineral-numbers {
        grid-template-columns: 1fr;

        gap: 60px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .mineral-numbers-heading h3 {
        font-size: 58px;
    }

    .mineral-directory {
        padding: 90px 10px 60px;
    }

    .mineral-directory > h3 {
        font-size: 54px;

        letter-spacing: -3px;
    }

    .mineral-directory-copy {
        margin-left: 0;
    }

    .mineral-feature {
        padding: 75px 10px;
    }

    .mineral-feature-paper,
    .mineral-feature-green {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .mineral-feature .mineral-reading h4 {
        font-size: 46px;

        letter-spacing: -3px;
    }

    .mineral-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px;
    }

    .mineral-twist h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .mineral-twist-copy {
        margin-top: 60px;
    }

    .mineral-evidence {
        grid-template-columns: 1fr;

        gap: 55px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .mineral-evidence-heading h3 {
        font-size: 52px;
    }

    .mineral-spotlight {
        grid-template-columns: 1fr;

        gap: 35px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 30px;
    }

    .mineral-spotlight-number {
        font-size: 75px;
    }

    .mineral-spotlight-content h3 {
        font-size: 55px;
    }

    .mineral-learned {
        grid-template-columns: 1fr;

        gap: 55px;

        padding: 85px 10px;
    }

    .mineral-learned-heading h3 {
        font-size: 55px;
    }

    .mineral-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 90px 30px 80px;
    }

    .mineral-ending h3 {
        font-size: 58px;

        letter-spacing: -3px;
    }

    .mineral-ending-final {
        font-size: 45px;

        letter-spacing: -3px;
    }

    .mineral-sources {
        margin-top: 75px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — GUT MICROBIOME ARTICLE

   FIXED SPINE (site-wide, matches vitamins.html / calories.html):
   hero, twist ("the question I actually came for"), learned
   ("so, what did I actually learn?"), ending ("and maybe that's
   the part I was looking for"), sources.

   ROTATING — its own composition: a corrected-stat block, a
   quiet two-column "menu" list, a stat-strip of outputs, a
   process chain, a single deep-dive feature, and myth cards.

   Append this block to the end of style.css
========================================================= */

.microbiome-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.microbiome-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.microbiome-article em {
    color: var(--green);
}

.microbiome-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.microbiome-reading {
    max-width: 700px;
}


/* =========================================================
   HERO — FIXED SPINE
========================================================= */

.microbiome-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.microbiome-hero h2 {
    max-width: 1000px;

    font-size: clamp(66px, 9.5vw, 118px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 70px 0;
}

.microbiome-hero h2 span {
    color: var(--pink);
}

.microbiome-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.microbiome-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING / STANDARD SECTIONS — rotating
========================================================= */

.microbiome-opening,
.microbiome-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 110px 0;

    border-top: 1px solid var(--line);
}

.microbiome-section-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.microbiome-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.microbiome-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.microbiome-section .microbiome-reading > h3 {
    max-width: 850px;

    font-size: clamp(46px, 6.5vw, 72px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 50px;
}

.microbiome-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}

.microbiome-statement {
    max-width: 780px;

    margin: 60px 0;

    padding: 32px 0 32px 28px;

    border-left: 5px solid var(--pink);

    font-size: clamp(26px, 3.6vw, 38px);

    line-height: 1.3;

    letter-spacing: -1px;

    color: var(--green);

    font-weight: 600;
}

.microbiome-statement span {
    display: block;

    margin-top: 10px;

    color: var(--pink);
}


/* =========================================================
   THE ACTUAL NUMBER — rotating
========================================================= */

.microbiome-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 120px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.microbiome-numbers-heading h3 {
    font-size: clamp(52px, 7.5vw, 84px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--cream);

    margin: 0;
}

.microbiome-numbers .microbiome-reading p {
    color: var(--cream);
}

.microbiome-numbers strong {
    color: var(--pink);
}


/* =========================================================
   THE MENU — rotating (quiet two-column list)
========================================================= */

.microbiome-menu-section {
    padding: 30px 20px 110px;

    max-width: 900px;

    margin: 0 auto;
}

.microbiome-menu-section h3 {
    max-width: 700px;

    font-size: clamp(42px, 6vw, 62px);

    line-height: 1;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 30px;
}

.microbiome-menu-intro {
    max-width: 680px !important;

    margin-bottom: 50px !important;
}

.microbiome-menu {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.microbiome-menu-col {
    padding: 35px 40px;
}

.microbiome-menu-col:first-child {
    border-right: 1px solid var(--line);
}

.microbiome-menu-col h4 {
    font-size: 16px;

    font-weight: 700;

    color: var(--green);

    margin: 0 0 20px;
}

.microbiome-menu-col ul {
    margin: 0;

    padding: 0;

    list-style: none;
}

.microbiome-menu-col li {
    padding: 11px 0;

    border-top: 1px solid var(--line);

    font-size: 15px;

    line-height: 1.5;

    color: var(--ink);
}

.microbiome-menu-col li:first-child {
    border-top: none;
}

.microbiome-menu-note {
    margin: 30px 0 0 !important;

    font-size: 15px !important;

    color: #444b46;

    max-width: 780px !important;
}


/* =========================================================
   THE OUTPUT — rotating (stat strip)
========================================================= */

.microbiome-output {
    padding: 20px 20px 110px;

    max-width: 1050px;

    margin: 0 auto;
}

.microbiome-output h3 {
    max-width: 800px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.05;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 45px;
}

.microbiome-output-row {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}

.microbiome-output-item {
    padding: 32px 26px;

    background-color: var(--paper);

    border: 1px solid var(--line);

    box-shadow: 6px 6px 0 var(--shadow);
}

.microbiome-output-item.accent {
    background-color: var(--green);

    color: var(--cream);

    box-shadow: 6px 6px 0 var(--pink);
}

.microbiome-output-item span {
    display: block;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    color: var(--pink);

    margin-bottom: 18px;
}

.microbiome-output-item p {
    font-size: 15px !important;
    line-height: 1.6 !important;

    margin: 0 !important;

    max-width: none;

    color: inherit;
}


/* =========================================================
   THE PIPELINE — rotating (process chain)
========================================================= */

.process-chain {
    max-width: 900px;

    margin: 65px 0;

    padding: 35px 30px;

    background-color: var(--cream);

    border: 2px solid var(--green);

    font-size: clamp(16px, 2.2vw, 20px);

    font-weight: 700;

    line-height: 1.6;

    color: var(--green);
}

.process-chain span {
    color: var(--pink);

    margin: 0 8px;
}


/* =========================================================
   DEEP-DIVE FEATURE — rotating
========================================================= */

.microbiome-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 105px 0;

    border-top: 2px solid var(--green);
}

.microbiome-feature-number {
    padding-top: 5px;

    font-size: 44px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.microbiome-feature .microbiome-reading h4 {
    font-size: clamp(38px, 5.5vw, 58px);

    line-height: 1;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 50px;
}

.microbiome-feature-statement {
    max-width: 780px;

    margin: 55px 0;

    padding: 28px 0 28px 28px;

    border-left: 5px solid var(--pink);

    font-size: 26px;

    line-height: 1.4;

    color: var(--pink);

    font-weight: 700;
}


/* =========================================================
   TWIST — FIXED SPINE
========================================================= */

.microbiome-twist {
    margin: 115px -25px;

    padding: 145px 70px;

    background-color: var(--pink);
}

.microbiome-twist .microbiome-label {
    color: var(--green);
}

.microbiome-twist h3 {
    max-width: 1000px;

    font-size: clamp(58px, 9vw, 105px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.microbiome-twist h3 span {
    color: var(--cream);
}

.microbiome-twist-copy {
    max-width: 700px;

    margin: 85px 0 0 auto;
}

.microbiome-twist-copy p {
    color: var(--green);
}

.microbiome-twist-copy .microbiome-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE — rotating
========================================================= */

.microbiome-evidence {
    max-width: 700px;

    margin: 0 auto;

    padding: 105px 20px 55px;
}

.microbiome-evidence h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   CONTEXT — rotating
========================================================= */

.microbiome-context {
    max-width: 700px;

    margin: 0 auto;

    padding: 55px 20px 100px;
}

.microbiome-context h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   MYTH CARDS — rotating (uses generic .myth-grid / .myth-card
   and the .cols-3 modifier)
========================================================= */

.microbiome-myths {
    padding: 20px 20px 115px;

    max-width: 1050px;

    margin: 0 auto;
}

.microbiome-myths h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   LEARNED — FIXED SPINE
========================================================= */

.microbiome-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 125px 20px;

    background-color: var(--paper);
}

.microbiome-learned-heading h3 {
    font-size: clamp(48px, 7vw, 76px);

    line-height: .9;

    letter-spacing: -3.5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING — FIXED SPINE
========================================================= */

.microbiome-ending {
    margin: 0 -25px;

    padding: 145px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.microbiome-ending > .microbiome-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.microbiome-ending h3 {
    max-width: 1000px;

    margin: 0 auto 75px;

    font-size: clamp(52px, 8vw, 96px);

    line-height: .86;

    letter-spacing: -4.5px;

    color: var(--cream);
}

.microbiome-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.microbiome-ending-copy p {
    color: var(--cream);
}

.microbiome-ending-final {
    max-width: 1000px;

    margin: 120px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(42px, 6.5vw, 74px);

    line-height: .92;

    letter-spacing: -2.5px;

    color: var(--cream);

    font-weight: 600;
}

.microbiome-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES — FIXED SPINE
========================================================= */

.microbiome-sources {
    max-width: 900px;

    margin: 90px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.microbiome-sources h3 {
    font-size: 40px;

    color: var(--green);

    margin: 0 0 32px;
}

.microbiome-sources ol {
    margin: 0;

    padding-left: 25px;
}

.microbiome-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .microbiome-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .microbiome-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .microbiome-hero h2 {
        font-size: 52px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .microbiome-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .microbiome-opening,
    .microbiome-section,
    .microbiome-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 75px 10px;
    }

    .microbiome-section-paper {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .microbiome-question-small {
        font-size: 30px;
    }

    .microbiome-numbers {
        grid-template-columns: 1fr;

        gap: 55px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 75px 25px;
    }

    .microbiome-numbers-heading h3 {
        font-size: 48px;
    }

    .microbiome-menu-section {
        padding: 20px 5px 85px;
    }

    .microbiome-menu {
        grid-template-columns: 1fr;
    }

    .microbiome-menu-col:first-child {
        border-right: none;

        border-bottom: 1px solid var(--line);
    }

    .microbiome-output {
        padding: 10px 5px 85px;
    }

    .microbiome-output-row {
        grid-template-columns: 1fr;
    }

    .process-chain {
        padding: 25px 20px;

        font-size: 15px;
    }

    .microbiome-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 22px;
    }

    .microbiome-twist h3 {
        font-size: 52px;

        letter-spacing: -3px;
    }

    .microbiome-twist-copy {
        margin-top: 55px;
    }

    .microbiome-evidence,
    .microbiome-context {
        padding-left: 5px;
        padding-right: 5px;
    }

    .microbiome-myths {
        padding: 10px 5px 85px;
    }

    .microbiome-learned {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 80px 10px;
    }

    .microbiome-learned-heading h3 {
        font-size: 44px;
    }

    .microbiome-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px 75px;
    }

    .microbiome-ending h3 {
        font-size: 48px;

        letter-spacing: -3px;
    }

    .microbiome-ending-final {
        font-size: 36px;
    }

    .microbiome-sources {
        margin-top: 60px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — FOOD CULTURE ARTICLE

   FIXED SPINE (site-wide, matches vitamins.html / calories.html):
   hero, twist ("the question I actually came for"), learned
   ("so, what did I actually learn?"), ending ("and maybe that's
   the part I was looking for"), sources.

   ROTATING — its own composition: a life-events ritual list, the
   "Proust pathway" (reusing the generic .process-chain component
   introduced in the microbiome article), a nostalgia deep-dive,
   and myth cards.

   Depends on the generic .process-chain (microbiome article) and
   .myth-grid / .myth-card / .cols-3 (protein / eating-disorders
   articles) already being in style.css.

   Append this block to the end of style.css
========================================================= */

.culture-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.culture-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.culture-article em {
    color: var(--green);
}

.culture-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.culture-reading {
    max-width: 700px;
}


/* =========================================================
   HERO — FIXED SPINE
========================================================= */

.culture-hero {
    min-height: 680px;

    padding: 70px 20px 90px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.culture-hero h2 {
    max-width: 1000px;

    font-size: clamp(66px, 9.5vw, 118px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 70px 0;
}

.culture-hero h2 span {
    color: var(--pink);
}

.culture-hero-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    border-top: 2px solid var(--green);

    padding-top: 25px;
}

.culture-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;

    margin: 0 !important;

    color: var(--green);
}


/* =========================================================
   OPENING / STANDARD SECTIONS — rotating
========================================================= */

.culture-opening,
.culture-section {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 110px 0;

    border-top: 1px solid var(--line);
}

.culture-section-paper {
    margin-left: -25px;
    margin-right: -25px;

    padding-left: 50px;
    padding-right: 50px;

    background-color: var(--paper);

    border-top: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
}

.culture-section-number {
    padding-top: 8px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--pink);
}

.culture-section-number span {
    display: block;

    margin-top: 18px;

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;
}

.culture-section .culture-reading > h3 {
    max-width: 850px;

    font-size: clamp(46px, 6.5vw, 72px);

    line-height: .92;

    letter-spacing: -3px;

    color: var(--green);

    margin: 0 0 50px;
}

.culture-question {
    max-width: 850px;

    margin: 85px 0;

    font-size: clamp(40px, 6vw, 66px);

    line-height: .96;

    letter-spacing: -2.5px;

    color: var(--green);
}

.culture-question-small {
    max-width: 720px;

    margin: 55px 0;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.03;

    letter-spacing: -1.5px;

    color: var(--green);

    font-weight: 600;
}

.culture-statement {
    max-width: 780px;

    margin: 60px 0;

    padding: 32px 0 32px 28px;

    border-left: 5px solid var(--pink);

    font-size: clamp(26px, 3.6vw, 38px);

    line-height: 1.3;

    letter-spacing: -1px;

    color: var(--green);

    font-weight: 600;
}

.culture-statement span {
    display: block;

    margin-top: 10px;

    color: var(--pink);
}


/* =========================================================
   THE PROUST PATHWAY — rotating
   (reuses the generic .process-chain component)
========================================================= */

.culture-pathway {
    padding: 20px 20px 110px;

    max-width: 950px;

    margin: 0 auto;
}

.culture-pathway h3 {
    max-width: 750px;

    font-size: clamp(34px, 5vw, 50px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}

.culture-pathway-note {
    margin: 30px 0 0 !important;

    font-size: 15px !important;

    color: #444b46;

    max-width: 780px !important;
}


/* =========================================================
   MARKED WITH FOOD — rotating (quiet ritual list)
========================================================= */

.culture-ritual-section {
    padding: 20px 20px 110px;

    max-width: 850px;

    margin: 0 auto;
}

.culture-ritual-section h3 {
    font-size: clamp(38px, 5.5vw, 58px);

    line-height: 1.1;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 35px;
}

.culture-ritual-intro {
    max-width: 680px !important;

    margin-bottom: 50px !important;
}

.culture-ritual-list {
    border-top: 1px solid var(--line);
}

.culture-ritual-row {
    display: grid;

    grid-template-columns: 170px 1fr;

    gap: 25px;

    padding: 24px 0;

    border-bottom: 1px solid var(--line);
}

.culture-ritual-row h4 {
    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.5px;

    color: var(--pink);

    margin: 0;
}

.culture-ritual-row p {
    font-size: 16px !important;
    line-height: 1.55 !important;

    max-width: none;

    margin: 0 !important;
}


/* =========================================================
   THE NUMBER — rotating
========================================================= */

.culture-numbers {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    margin: 0 -25px;

    padding: 120px 70px;

    background-color: var(--green);

    color: var(--cream);
}

.culture-numbers-heading h3 {
    font-size: clamp(52px, 7.5vw, 84px);

    line-height: .86;

    letter-spacing: -4px;

    color: var(--cream);

    margin: 0;
}

.culture-numbers .culture-reading p {
    color: var(--cream);
}

.culture-numbers strong {
    color: var(--pink);
}


/* =========================================================
   DEEP-DIVE FEATURE — rotating
========================================================= */

.culture-feature {
    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 55px;

    padding: 105px 0;

    border-top: 2px solid var(--green);
}

.culture-feature-number {
    padding-top: 5px;

    font-size: 44px;

    line-height: 1;

    font-weight: 700;

    color: var(--pink);
}

.culture-feature .culture-reading h4 {
    font-size: clamp(38px, 5.5vw, 58px);

    line-height: 1;

    letter-spacing: -2px;

    color: var(--green);

    margin: 0 0 50px;
}

.culture-feature-statement {
    max-width: 780px;

    margin: 55px 0;

    padding: 28px 0 28px 28px;

    border-left: 5px solid var(--pink);

    font-size: 26px;

    line-height: 1.4;

    color: var(--pink);

    font-weight: 700;
}


/* =========================================================
   MYTH CARDS — rotating (uses generic .myth-grid / .myth-card
   and the .cols-3 modifier)
========================================================= */

.culture-myths {
    padding: 20px 20px 115px;

    max-width: 1050px;

    margin: 0 auto;
}

.culture-myths h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   TWIST — FIXED SPINE
========================================================= */

.culture-twist {
    margin: 115px -25px;

    padding: 145px 70px;

    background-color: var(--pink);
}

.culture-twist .culture-label {
    color: var(--green);
}

.culture-twist h3 {
    max-width: 1000px;

    font-size: clamp(58px, 9vw, 105px);

    line-height: .84;

    letter-spacing: -5px;

    color: var(--green);

    margin: 0;
}

.culture-twist h3 span {
    color: var(--cream);
}

.culture-twist-copy {
    max-width: 700px;

    margin: 85px 0 0 auto;
}

.culture-twist-copy p {
    color: var(--green);
}

.culture-twist-copy .culture-question-small {
    color: var(--green);
}


/* =========================================================
   EVIDENCE — rotating
========================================================= */

.culture-evidence {
    max-width: 700px;

    margin: 0 auto;

    padding: 105px 20px 55px;
}

.culture-evidence h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   CONTEXT — rotating
========================================================= */

.culture-context {
    max-width: 700px;

    margin: 0 auto;

    padding: 55px 20px 100px;
}

.culture-context h3 {
    max-width: 850px;

    font-size: clamp(38px, 5.2vw, 56px);

    line-height: 1.1;

    letter-spacing: -1.5px;

    color: var(--green);

    margin: 0 0 40px;
}


/* =========================================================
   LEARNED — FIXED SPINE
========================================================= */

.culture-learned {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    padding: 125px 20px;

    background-color: var(--paper);
}

.culture-learned-heading h3 {
    font-size: clamp(48px, 7vw, 76px);

    line-height: .9;

    letter-spacing: -3.5px;

    color: var(--green);

    margin: 0;
}


/* =========================================================
   ENDING — FIXED SPINE
========================================================= */

.culture-ending {
    margin: 0 -25px;

    padding: 145px 70px 110px;

    background-color: var(--green);

    color: var(--cream);
}

.culture-ending > .culture-label {
    max-width: 1000px;

    margin-left: auto !important;
    margin-right: auto !important;
}

.culture-ending h3 {
    max-width: 1000px;

    margin: 0 auto 75px;

    font-size: clamp(52px, 8vw, 96px);

    line-height: .86;

    letter-spacing: -4.5px;

    color: var(--cream);
}

.culture-ending-copy {
    max-width: 700px;

    margin: 0 auto;
}

.culture-ending-copy p {
    color: var(--cream);
}

.culture-ending-final {
    max-width: 1000px;

    margin: 120px auto 0;

    padding-top: 45px;

    border-top: 2px solid var(--pink);

    font-size: clamp(42px, 6.5vw, 74px);

    line-height: .92;

    letter-spacing: -2.5px;

    color: var(--cream);

    font-weight: 600;
}

.culture-ending-final span {
    color: var(--pink);
}


/* =========================================================
   SOURCES — FIXED SPINE
========================================================= */

.culture-sources {
    max-width: 900px;

    margin: 90px auto 0;

    padding: 55px 0;

    border-top: 2px solid var(--green);
}

.culture-sources h3 {
    font-size: 40px;

    color: var(--green);

    margin: 0 0 32px;
}

.culture-sources ol {
    margin: 0;

    padding-left: 25px;
}

.culture-sources li {
    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .culture-article {
        padding-left: 10px;
        padding-right: 10px;
    }

    .culture-hero {
        min-height: 600px;

        padding: 55px 10px 70px;
    }

    .culture-hero h2 {
        font-size: 52px;

        letter-spacing: -3px;

        margin: 60px 0;
    }

    .culture-hero-intro {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .culture-opening,
    .culture-section,
    .culture-feature {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 75px 10px;
    }

    .culture-section-paper {
        margin-left: -10px;
        margin-right: -10px;

        padding-left: 25px;
        padding-right: 25px;
    }

    .culture-question {
        font-size: 38px;
    }

    .culture-question-small {
        font-size: 30px;
    }

    .culture-pathway {
        padding: 10px 5px 85px;
    }

    .culture-ritual-section {
        padding: 10px 5px 85px;
    }

    .culture-ritual-row {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .culture-numbers {
        grid-template-columns: 1fr;

        gap: 55px;

        margin-left: -10px;
        margin-right: -10px;

        padding: 75px 25px;
    }

    .culture-numbers-heading h3 {
        font-size: 48px;
    }

    .culture-twist {
        margin-left: -10px;
        margin-right: -10px;

        padding: 80px 22px;
    }

    .culture-twist h3 {
        font-size: 52px;

        letter-spacing: -3px;
    }

    .culture-twist-copy {
        margin-top: 55px;
    }

    .culture-evidence,
    .culture-context {
        padding-left: 5px;
        padding-right: 5px;
    }

    .culture-myths {
        padding: 10px 5px 85px;
    }

    .culture-learned {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 80px 10px;
    }

    .culture-learned-heading h3 {
        font-size: 44px;
    }

    .culture-ending {
        margin-left: -10px;
        margin-right: -10px;

        padding: 85px 25px 75px;
    }

    .culture-ending h3 {
        font-size: 48px;

        letter-spacing: -3px;
    }

    .culture-ending-final {
        font-size: 36px;
    }

    .culture-sources {
        margin-top: 60px;

        padding: 40px 10px;
    }

}

/* =========================================================
   NOURISH — DIGESTION ARTICLE (THE BODY)

   FIXED SPINE (site-wide): hero, twist, learned, ending, sources.
   ROTATING: a quiet route list, a myth-busting feature, a stat
   block, and myth cards.

   Append this block to the end of style.css
========================================================= */

.digest-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.digest-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.digest-article em {
    color: var(--green);
}

.digest-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.digest-reading {
    max-width: 700px;
}


/* HERO — FIXED SPINE */

.digest-hero {
    min-height: 680px;
    padding: 70px 20px 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.digest-hero h2 {
    max-width: 1000px;
    font-size: clamp(70px, 10vw, 125px);
    line-height: .82;
    letter-spacing: -6px;
    color: var(--green);
    margin: 70px 0;
}

.digest-hero h2 span {
    color: var(--pink);
}

.digest-hero-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-top: 2px solid var(--green);
    padding-top: 25px;
}

.digest-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: var(--green);
}


/* OPENING / STANDARD SECTIONS — rotating */

.digest-opening,
.digest-section {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 110px 0;
    border-top: 1px solid var(--line);
}

.digest-section-number {
    padding-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--pink);
}

.digest-section-number span {
    display: block;
    margin-top: 18px;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 1.5px;
}

.digest-section .digest-reading > h3 {
    max-width: 850px;
    font-size: clamp(46px, 6.5vw, 72px);
    line-height: .92;
    letter-spacing: -3px;
    color: var(--green);
    margin: 0 0 50px;
}

.digest-question-small {
    max-width: 720px;
    margin: 55px 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.03;
    letter-spacing: -1.5px;
    color: var(--green);
    font-weight: 600;
}

.digest-statement {
    max-width: 780px;
    margin: 60px 0;
    padding: 32px 0 32px 28px;
    border-left: 5px solid var(--pink);
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.3;
    letter-spacing: -1px;
    color: var(--green);
    font-weight: 600;
}

.digest-statement span {
    display: block;
    margin-top: 10px;
    color: var(--pink);
}


/* STOP BY STOP — rotating (quiet vertical list) */

.digest-route-section {
    padding: 20px 20px 110px;
    max-width: 850px;
    margin: 0 auto;
}

.digest-route-section h3 {
    font-size: clamp(38px, 5.5vw, 58px);
    line-height: 1.1;
    letter-spacing: -2px;
    color: var(--green);
    margin: 0 0 40px;
}

.digest-route {
    border-top: 1px solid var(--line);
}

.digest-route-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 25px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.digest-route-row h4 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--pink);
    margin: 0;
}

.digest-route-row p {
    font-size: 16px !important;
    line-height: 1.55 !important;
    max-width: none;
    margin: 0 !important;
}


/* FEATURE — rotating */

.digest-feature {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 105px 0;
    border-top: 2px solid var(--green);
}

.digest-feature-number {
    padding-top: 5px;
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: var(--pink);
}

.digest-feature .digest-reading h4 {
    font-size: clamp(36px, 5.2vw, 54px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 50px;
}

.digest-feature-statement {
    max-width: 780px;
    margin: 55px 0;
    padding: 28px 0 28px 28px;
    border-left: 5px solid var(--pink);
    font-size: 26px;
    line-height: 1.4;
    color: var(--pink);
    font-weight: 700;
}


/* THE NUMBER — rotating */

.digest-numbers {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    margin: 0 -25px;
    padding: 120px 70px;
    background-color: var(--green);
    color: var(--cream);
}

.digest-numbers-heading h3 {
    font-size: clamp(52px, 7.5vw, 84px);
    line-height: .86;
    letter-spacing: -4px;
    color: var(--cream);
    margin: 0;
}

.digest-numbers .digest-reading p {
    color: var(--cream);
}


/* MYTH CARDS — rotating */

.digest-myths {
    padding: 20px 20px 115px;
    max-width: 1050px;
    margin: 0 auto;
}

.digest-myths h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* TWIST — FIXED SPINE */

.digest-twist {
    margin: 115px -25px;
    padding: 145px 70px;
    background-color: var(--pink);
}

.digest-twist .digest-label {
    color: var(--green);
}

.digest-twist h3 {
    max-width: 1000px;
    font-size: clamp(58px, 9vw, 105px);
    line-height: .84;
    letter-spacing: -5px;
    color: var(--green);
    margin: 0;
}

.digest-twist h3 span {
    color: var(--cream);
}

.digest-twist-copy {
    max-width: 700px;
    margin: 85px 0 0 auto;
}

.digest-twist-copy p {
    color: var(--green);
}

.digest-twist-copy .digest-question-small {
    color: var(--green);
}


/* EVIDENCE — rotating */

.digest-evidence {
    max-width: 700px;
    margin: 0 auto;
    padding: 105px 20px 55px;
}

.digest-evidence h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* CONTEXT — rotating */

.digest-context {
    max-width: 700px;
    margin: 0 auto;
    padding: 55px 20px 100px;
}

.digest-context h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* LEARNED — FIXED SPINE */

.digest-learned {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    padding: 125px 20px;
    background-color: var(--paper);
}

.digest-learned-heading h3 {
    font-size: clamp(48px, 7vw, 76px);
    line-height: .9;
    letter-spacing: -3.5px;
    color: var(--green);
    margin: 0;
}


/* ENDING — FIXED SPINE */

.digest-ending {
    margin: 0 -25px;
    padding: 145px 70px 110px;
    background-color: var(--green);
    color: var(--cream);
}

.digest-ending > .digest-label {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.digest-ending h3 {
    max-width: 1000px;
    margin: 0 auto 75px;
    font-size: clamp(52px, 8vw, 96px);
    line-height: .86;
    letter-spacing: -4.5px;
    color: var(--cream);
}

.digest-ending-copy {
    max-width: 700px;
    margin: 0 auto;
}

.digest-ending-copy p {
    color: var(--cream);
}

.digest-ending-final {
    max-width: 1000px;
    margin: 120px auto 0;
    padding-top: 45px;
    border-top: 2px solid var(--pink);
    font-size: clamp(42px, 6.5vw, 74px);
    line-height: .92;
    letter-spacing: -2.5px;
    color: var(--cream);
    font-weight: 600;
}

.digest-ending-final span {
    color: var(--pink);
}


/* SOURCES — FIXED SPINE */

.digest-sources {
    max-width: 900px;
    margin: 90px auto 0;
    padding: 55px 0;
    border-top: 2px solid var(--green);
}

.digest-sources h3 {
    font-size: 40px;
    color: var(--green);
    margin: 0 0 32px;
}

.digest-sources ol {
    margin: 0;
    padding-left: 25px;
}

.digest-sources li {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 700px) {

    .digest-article { padding-left: 10px; padding-right: 10px; }
    .digest-hero { min-height: 600px; padding: 55px 10px 70px; }
    .digest-hero h2 { font-size: 52px; letter-spacing: -3px; margin: 60px 0; }
    .digest-hero-intro { grid-template-columns: 1fr; gap: 15px; }
    .digest-opening, .digest-section, .digest-feature { grid-template-columns: 1fr; gap: 25px; padding: 75px 10px; }
    .digest-question-small { font-size: 30px; }
    .digest-route-section { padding: 10px 5px 85px; }
    .digest-route-row { grid-template-columns: 1fr; gap: 8px; }
    .digest-numbers { grid-template-columns: 1fr; gap: 55px; margin-left: -10px; margin-right: -10px; padding: 75px 25px; }
    .digest-numbers-heading h3 { font-size: 48px; }
    .digest-myths { padding: 10px 5px 85px; }
    .digest-twist { margin-left: -10px; margin-right: -10px; padding: 80px 22px; }
    .digest-twist h3 { font-size: 52px; letter-spacing: -3px; }
    .digest-twist-copy { margin-top: 55px; }
    .digest-evidence, .digest-context { padding-left: 5px; padding-right: 5px; }
    .digest-learned { grid-template-columns: 1fr; gap: 50px; padding: 80px 10px; }
    .digest-learned-heading h3 { font-size: 44px; }
    .digest-ending { margin-left: -10px; margin-right: -10px; padding: 85px 25px 75px; }
    .digest-ending h3 { font-size: 48px; letter-spacing: -3px; }
    .digest-ending-final { font-size: 36px; }
    .digest-sources { margin-top: 60px; padding: 40px 10px; }

}

/* =========================================================
   NOURISH — METABOLISM ARTICLE (THE BODY)

   FIXED SPINE (site-wide): hero, twist, learned, ending, sources.
   ROTATING: a life-stages timeline, myth cards, and a feature
   deep-dive.

   Append this block to the end of style.css
========================================================= */

.meta-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.meta-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.meta-article em {
    color: var(--green);
}

.meta-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.meta-reading {
    max-width: 700px;
}


/* HERO — FIXED SPINE */

.meta-hero {
    min-height: 680px;
    padding: 70px 20px 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.meta-hero h2 {
    max-width: 1000px;
    font-size: clamp(70px, 10vw, 125px);
    line-height: .82;
    letter-spacing: -6px;
    color: var(--green);
    margin: 70px 0;
}

.meta-hero h2 span {
    color: var(--pink);
}

.meta-hero-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-top: 2px solid var(--green);
    padding-top: 25px;
}

.meta-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: var(--green);
}


/* OPENING / STANDARD SECTIONS — rotating */

.meta-opening,
.meta-section {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 110px 0;
    border-top: 1px solid var(--line);
}

.meta-section-number {
    padding-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--pink);
}

.meta-section-number span {
    display: block;
    margin-top: 18px;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 1.5px;
}

.meta-section .meta-reading > h3 {
    max-width: 850px;
    font-size: clamp(46px, 6.5vw, 72px);
    line-height: .92;
    letter-spacing: -3px;
    color: var(--green);
    margin: 0 0 50px;
}

.meta-question-small {
    max-width: 720px;
    margin: 55px 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.03;
    letter-spacing: -1.5px;
    color: var(--green);
    font-weight: 600;
}

.meta-statement {
    max-width: 780px;
    margin: 60px 0;
    padding: 32px 0 32px 28px;
    border-left: 5px solid var(--pink);
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.3;
    letter-spacing: -1px;
    color: var(--green);
    font-weight: 600;
}

.meta-statement span {
    display: block;
    margin-top: 10px;
    color: var(--pink);
}


/* THE FOUR STAGES — rotating (timeline) */

.meta-timeline-section {
    margin: 0 -25px;
    padding: 115px 50px 120px;
    background-color: var(--green);
    color: var(--cream);
}

.meta-timeline-section .meta-label {
    color: var(--pink);
}

.meta-timeline-section h3 {
    max-width: 900px;
    font-size: clamp(38px, 5.5vw, 58px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--cream);
    margin: 0 0 30px;
}

.meta-timeline-intro {
    max-width: 750px !important;
    color: var(--cream) !important;
    opacity: .9;
    margin-bottom: 55px !important;
}

.meta-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    border-top: 2px solid rgba(245, 241, 232, .35);
    padding-top: 40px;
}

.meta-timeline-point {
    padding-right: 15px;
}

.meta-timeline-point.accent {
    color: var(--pink);
}

.meta-timeline-marker {
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    color: var(--pink);
}

.meta-timeline-point.accent .meta-timeline-marker {
    color: var(--cream);
}

.meta-timeline-point p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: none;
    margin: 0 !important;
    color: inherit;
    opacity: .95;
}

.meta-timeline-section > p.pink-line {
    max-width: 900px !important;
    margin-top: 50px !important;
}


/* MYTH CARDS — rotating */

.meta-myths {
    padding: 100px 20px 115px;
    max-width: 1050px;
    margin: 0 auto;
}

.meta-myths h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* FEATURE — rotating */

.meta-feature {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 100px 0 105px;
    border-top: 2px solid var(--green);
}

.meta-feature-number {
    padding-top: 5px;
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: var(--pink);
}

.meta-feature .meta-reading h4 {
    font-size: clamp(34px, 4.8vw, 50px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 50px;
}

.meta-feature-statement {
    max-width: 780px;
    margin: 55px 0;
    padding: 28px 0 28px 28px;
    border-left: 5px solid var(--pink);
    font-size: 24px;
    line-height: 1.4;
    color: var(--pink);
    font-weight: 700;
}


/* TWIST — FIXED SPINE */

.meta-twist {
    margin: 115px -25px;
    padding: 145px 70px;
    background-color: var(--pink);
}

.meta-twist .meta-label {
    color: var(--green);
}

.meta-twist h3 {
    max-width: 1000px;
    font-size: clamp(58px, 9vw, 105px);
    line-height: .84;
    letter-spacing: -5px;
    color: var(--green);
    margin: 0;
}

.meta-twist h3 span {
    color: var(--cream);
}

.meta-twist-copy {
    max-width: 700px;
    margin: 85px 0 0 auto;
}

.meta-twist-copy p {
    color: var(--green);
}

.meta-twist-copy .meta-question-small {
    color: var(--green);
}


/* EVIDENCE — rotating */

.meta-evidence {
    max-width: 700px;
    margin: 0 auto;
    padding: 105px 20px 55px;
}

.meta-evidence h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* CONTEXT — rotating */

.meta-context {
    max-width: 700px;
    margin: 0 auto;
    padding: 55px 20px 100px;
}

.meta-context h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* LEARNED — FIXED SPINE */

.meta-learned {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    padding: 125px 20px;
    background-color: var(--paper);
}

.meta-learned-heading h3 {
    font-size: clamp(48px, 7vw, 76px);
    line-height: .9;
    letter-spacing: -3.5px;
    color: var(--green);
    margin: 0;
}


/* ENDING — FIXED SPINE */

.meta-ending {
    margin: 0 -25px;
    padding: 145px 70px 110px;
    background-color: var(--green);
    color: var(--cream);
}

.meta-ending > .meta-label {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.meta-ending h3 {
    max-width: 1000px;
    margin: 0 auto 75px;
    font-size: clamp(52px, 8vw, 96px);
    line-height: .86;
    letter-spacing: -4.5px;
    color: var(--cream);
}

.meta-ending-copy {
    max-width: 700px;
    margin: 0 auto;
}

.meta-ending-copy p {
    color: var(--cream);
}

.meta-ending-final {
    max-width: 1000px;
    margin: 120px auto 0;
    padding-top: 45px;
    border-top: 2px solid var(--pink);
    font-size: clamp(42px, 6.5vw, 74px);
    line-height: .92;
    letter-spacing: -2.5px;
    color: var(--cream);
    font-weight: 600;
}

.meta-ending-final span {
    color: var(--pink);
}


/* SOURCES — FIXED SPINE */

.meta-sources {
    max-width: 900px;
    margin: 90px auto 0;
    padding: 55px 0;
    border-top: 2px solid var(--green);
}

.meta-sources h3 {
    font-size: 40px;
    color: var(--green);
    margin: 0 0 32px;
}

.meta-sources ol {
    margin: 0;
    padding-left: 25px;
}

.meta-sources li {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 700px) {

    .meta-article { padding-left: 10px; padding-right: 10px; }
    .meta-hero { min-height: 600px; padding: 55px 10px 70px; }
    .meta-hero h2 { font-size: 52px; letter-spacing: -3px; margin: 60px 0; }
    .meta-hero-intro { grid-template-columns: 1fr; gap: 15px; }
    .meta-opening, .meta-section, .meta-feature { grid-template-columns: 1fr; gap: 25px; padding: 75px 10px; }
    .meta-question-small { font-size: 30px; }
    .meta-timeline-section { margin-left: -10px; margin-right: -10px; padding: 80px 22px 90px; }
    .meta-timeline { grid-template-columns: 1fr 1fr; gap: 30px; }
    .meta-myths { padding: 10px 5px 85px; }
    .meta-twist { margin-left: -10px; margin-right: -10px; padding: 80px 22px; }
    .meta-twist h3 { font-size: 52px; letter-spacing: -3px; }
    .meta-twist-copy { margin-top: 55px; }
    .meta-evidence, .meta-context { padding-left: 5px; padding-right: 5px; }
    .meta-learned { grid-template-columns: 1fr; gap: 50px; padding: 80px 10px; }
    .meta-learned-heading h3 { font-size: 44px; }
    .meta-ending { margin-left: -10px; margin-right: -10px; padding: 85px 25px 75px; }
    .meta-ending h3 { font-size: 48px; letter-spacing: -3px; }
    .meta-ending-final { font-size: 36px; }
    .meta-sources { margin-top: 60px; padding: 40px 10px; }

}

/* =========================================================
   NOURISH — HUNGER ARTICLE (THE BODY)

   FIXED SPINE (site-wide): hero, twist, learned, ending, sources.
   ROTATING: a hormone card grid, a feature deep-dive on GLP-1
   drugs, and myth cards.

   Append this block to the end of style.css
========================================================= */

.hunger-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.hunger-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.hunger-article em {
    color: var(--green);
}

.hunger-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.hunger-reading {
    max-width: 700px;
}


/* HERO — FIXED SPINE */

.hunger-hero {
    min-height: 680px;
    padding: 70px 20px 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hunger-hero h2 {
    max-width: 1000px;
    font-size: clamp(70px, 10vw, 125px);
    line-height: .82;
    letter-spacing: -6px;
    color: var(--green);
    margin: 70px 0;
}

.hunger-hero h2 span {
    color: var(--pink);
}

.hunger-hero-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-top: 2px solid var(--green);
    padding-top: 25px;
}

.hunger-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: var(--green);
}


/* OPENING / STANDARD SECTIONS — rotating */

.hunger-opening,
.hunger-section {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 110px 0;
    border-top: 1px solid var(--line);
}

.hunger-section-number {
    padding-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--pink);
}

.hunger-section-number span {
    display: block;
    margin-top: 18px;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 1.5px;
}

.hunger-section .hunger-reading > h3 {
    max-width: 850px;
    font-size: clamp(46px, 6.5vw, 72px);
    line-height: .92;
    letter-spacing: -3px;
    color: var(--green);
    margin: 0 0 50px;
}

.hunger-question-small {
    max-width: 720px;
    margin: 55px 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.03;
    letter-spacing: -1.5px;
    color: var(--green);
    font-weight: 600;
}

.hunger-statement {
    max-width: 780px;
    margin: 60px 0;
    padding: 32px 0 32px 28px;
    border-left: 5px solid var(--pink);
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.3;
    letter-spacing: -1px;
    color: var(--green);
    font-weight: 600;
}

.hunger-statement span {
    display: block;
    margin-top: 10px;
    color: var(--pink);
}


/* THE MESSENGERS — rotating (card grid) */

.hunger-messengers {
    padding: 20px 20px 115px;
    max-width: 1000px;
    margin: 0 auto;
}

.hunger-messengers h3 {
    max-width: 800px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 45px;
}

.hunger-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hunger-card {
    padding: 28px 22px;
    background-color: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 6px 6px 0 var(--shadow);
}

.hunger-card.accent {
    background-color: var(--green);
    color: var(--cream);
    box-shadow: 6px 6px 0 var(--pink);
}

.hunger-card span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--pink);
    margin-bottom: 18px;
}

.hunger-card h4 {
    font-size: 21px;
    margin: 0 0 12px;
    color: inherit;
}

.hunger-card p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    max-width: none;
    color: inherit;
}


/* FEATURE — rotating */

.hunger-feature {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 100px 0 105px;
    border-top: 2px solid var(--green);
}

.hunger-feature-number {
    padding-top: 5px;
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: var(--pink);
}

.hunger-feature .hunger-reading h4 {
    font-size: clamp(34px, 4.8vw, 50px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 50px;
}

.hunger-feature-statement {
    max-width: 780px;
    margin: 55px 0;
    padding: 28px 0 28px 28px;
    border-left: 5px solid var(--pink);
    font-size: 24px;
    line-height: 1.4;
    color: var(--pink);
    font-weight: 700;
}


/* MYTH CARDS — rotating */

.hunger-myths {
    padding: 20px 20px 115px;
    max-width: 1050px;
    margin: 0 auto;
}

.hunger-myths h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* TWIST — FIXED SPINE */

.hunger-twist {
    margin: 115px -25px;
    padding: 145px 70px;
    background-color: var(--pink);
}

.hunger-twist .hunger-label {
    color: var(--green);
}

.hunger-twist h3 {
    max-width: 1000px;
    font-size: clamp(58px, 9vw, 105px);
    line-height: .84;
    letter-spacing: -5px;
    color: var(--green);
    margin: 0;
}

.hunger-twist h3 span {
    color: var(--cream);
}

.hunger-twist-copy {
    max-width: 700px;
    margin: 85px 0 0 auto;
}

.hunger-twist-copy p {
    color: var(--green);
}

.hunger-twist-copy .hunger-question-small {
    color: var(--green);
}


/* EVIDENCE — rotating */

.hunger-evidence {
    max-width: 700px;
    margin: 0 auto;
    padding: 105px 20px 55px;
}

.hunger-evidence h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* CONTEXT — rotating */

.hunger-context {
    max-width: 700px;
    margin: 0 auto;
    padding: 55px 20px 100px;
}

.hunger-context h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* LEARNED — FIXED SPINE */

.hunger-learned {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    padding: 125px 20px;
    background-color: var(--paper);
}

.hunger-learned-heading h3 {
    font-size: clamp(48px, 7vw, 76px);
    line-height: .9;
    letter-spacing: -3.5px;
    color: var(--green);
    margin: 0;
}


/* ENDING — FIXED SPINE */

.hunger-ending {
    margin: 0 -25px;
    padding: 145px 70px 110px;
    background-color: var(--green);
    color: var(--cream);
}

.hunger-ending > .hunger-label {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hunger-ending h3 {
    max-width: 1000px;
    margin: 0 auto 75px;
    font-size: clamp(52px, 8vw, 96px);
    line-height: .86;
    letter-spacing: -4.5px;
    color: var(--cream);
}

.hunger-ending-copy {
    max-width: 700px;
    margin: 0 auto;
}

.hunger-ending-copy p {
    color: var(--cream);
}

.hunger-ending-final {
    max-width: 1000px;
    margin: 120px auto 0;
    padding-top: 45px;
    border-top: 2px solid var(--pink);
    font-size: clamp(42px, 6.5vw, 74px);
    line-height: .92;
    letter-spacing: -2.5px;
    color: var(--cream);
    font-weight: 600;
}

.hunger-ending-final span {
    color: var(--pink);
}


/* SOURCES — FIXED SPINE */

.hunger-sources {
    max-width: 900px;
    margin: 90px auto 0;
    padding: 55px 0;
    border-top: 2px solid var(--green);
}

.hunger-sources h3 {
    font-size: 40px;
    color: var(--green);
    margin: 0 0 32px;
}

.hunger-sources ol {
    margin: 0;
    padding-left: 25px;
}

.hunger-sources li {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 700px) {

    .hunger-article { padding-left: 10px; padding-right: 10px; }
    .hunger-hero { min-height: 600px; padding: 55px 10px 70px; }
    .hunger-hero h2 { font-size: 52px; letter-spacing: -3px; margin: 60px 0; }
    .hunger-hero-intro { grid-template-columns: 1fr; gap: 15px; }
    .hunger-opening, .hunger-section, .hunger-feature { grid-template-columns: 1fr; gap: 25px; padding: 75px 10px; }
    .hunger-question-small { font-size: 30px; }
    .hunger-messengers { padding: 10px 5px 85px; }
    .hunger-grid { grid-template-columns: 1fr 1fr; }
    .hunger-myths { padding: 10px 5px 85px; }
    .hunger-twist { margin-left: -10px; margin-right: -10px; padding: 80px 22px; }
    .hunger-twist h3 { font-size: 52px; letter-spacing: -3px; }
    .hunger-twist-copy { margin-top: 55px; }
    .hunger-evidence, .hunger-context { padding-left: 5px; padding-right: 5px; }
    .hunger-learned { grid-template-columns: 1fr; gap: 50px; padding: 80px 10px; }
    .hunger-learned-heading h3 { font-size: 44px; }
    .hunger-ending { margin-left: -10px; margin-right: -10px; padding: 85px 25px 75px; }
    .hunger-ending h3 { font-size: 48px; letter-spacing: -3px; }
    .hunger-ending-final { font-size: 36px; }
    .hunger-sources { margin-top: 60px; padding: 40px 10px; }

}

/* =========================================================
   NOURISH — BODY FAT ARTICLE (THE BODY)

   FIXED SPINE (site-wide): hero, twist, learned, ending, sources.
   ROTATING: a feature reveal, the process-chain equation
   (generic component from the microbiome article), and myth cards.

   Depends on the generic .process-chain and .myth-grid / .myth-card
   / .cols-3 already being in style.css.

   Append this block to the end of style.css
========================================================= */

.fatloss-article {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 25px 140px;
}

.fatloss-article p {
    font-size: 18px;
    line-height: 1.82;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 27px;
}

.fatloss-article em {
    color: var(--green);
}

.fatloss-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 25px !important;
}

.fatloss-reading {
    max-width: 700px;
}


/* HERO — FIXED SPINE */

.fatloss-hero {
    min-height: 680px;
    padding: 70px 20px 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fatloss-hero h2 {
    max-width: 1000px;
    font-size: clamp(70px, 10vw, 125px);
    line-height: .82;
    letter-spacing: -6px;
    color: var(--green);
    margin: 70px 0;
}

.fatloss-hero h2 span {
    color: var(--pink);
}

.fatloss-hero-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-top: 2px solid var(--green);
    padding-top: 25px;
}

.fatloss-hero-intro p {
    font-size: 22px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: var(--green);
}


/* OPENING / STANDARD SECTIONS — rotating */

.fatloss-opening,
.fatloss-section {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 110px 0;
    border-top: 1px solid var(--line);
}

.fatloss-section-number {
    padding-top: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--pink);
}

.fatloss-section-number span {
    display: block;
    margin-top: 18px;
    font-size: 9px;
    line-height: 1.4;
    letter-spacing: 1.5px;
}

.fatloss-section .fatloss-reading > h3 {
    max-width: 850px;
    font-size: clamp(46px, 6.5vw, 72px);
    line-height: .92;
    letter-spacing: -3px;
    color: var(--green);
    margin: 0 0 50px;
}

.fatloss-question-small {
    max-width: 720px;
    margin: 55px 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.03;
    letter-spacing: -1.5px;
    color: var(--green);
    font-weight: 600;
}

.fatloss-statement {
    max-width: 780px;
    margin: 60px 0;
    padding: 32px 0 32px 28px;
    border-left: 5px solid var(--pink);
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.3;
    letter-spacing: -1px;
    color: var(--green);
    font-weight: 600;
}

.fatloss-statement span {
    display: block;
    margin-top: 10px;
    color: var(--pink);
}


/* FEATURE — rotating */

.fatloss-feature {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 55px;
    padding: 105px 0;
    border-top: 2px solid var(--green);
}

.fatloss-feature-number {
    padding-top: 5px;
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: var(--pink);
}

.fatloss-feature .fatloss-reading h4 {
    font-size: clamp(36px, 5.2vw, 54px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 50px;
}

.fatloss-feature-statement {
    max-width: 780px;
    margin: 55px 0;
    padding: 28px 0 28px 28px;
    border-left: 5px solid var(--pink);
    font-size: 26px;
    line-height: 1.4;
    color: var(--pink);
    font-weight: 700;
}


/* THE EQUATION — rotating (uses generic .process-chain) */

.fatloss-equation-section {
    padding: 20px 20px 110px;
    max-width: 950px;
    margin: 0 auto;
}

.fatloss-equation-section h3 {
    max-width: 750px;
    font-size: clamp(34px, 5vw, 50px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}

.fatloss-equation-note {
    margin: 30px 0 0 !important;
    font-size: 15px !important;
    color: #444b46;
    max-width: 780px !important;
}


/* THE NUMBER — rotating */

.fatloss-numbers {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    margin: 0 -25px;
    padding: 120px 70px;
    background-color: var(--green);
    color: var(--cream);
}

.fatloss-numbers-heading h3 {
    font-size: clamp(52px, 7.5vw, 84px);
    line-height: .86;
    letter-spacing: -4px;
    color: var(--cream);
    margin: 0;
}

.fatloss-numbers .fatloss-reading p {
    color: var(--cream);
}


/* MYTH CARDS — rotating */

.fatloss-myths {
    padding: 20px 20px 115px;
    max-width: 1050px;
    margin: 0 auto;
}

.fatloss-myths h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* TWIST — FIXED SPINE */

.fatloss-twist {
    margin: 115px -25px;
    padding: 145px 70px;
    background-color: var(--pink);
}

.fatloss-twist .fatloss-label {
    color: var(--green);
}

.fatloss-twist h3 {
    max-width: 1000px;
    font-size: clamp(58px, 9vw, 105px);
    line-height: .84;
    letter-spacing: -5px;
    color: var(--green);
    margin: 0;
}

.fatloss-twist h3 span {
    color: var(--cream);
}

.fatloss-twist-copy {
    max-width: 700px;
    margin: 85px 0 0 auto;
}

.fatloss-twist-copy p {
    color: var(--green);
}

.fatloss-twist-copy .fatloss-question-small {
    color: var(--green);
}


/* EVIDENCE — rotating */

.fatloss-evidence {
    max-width: 700px;
    margin: 0 auto;
    padding: 105px 20px 55px;
}

.fatloss-evidence h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* CONTEXT — rotating */

.fatloss-context {
    max-width: 700px;
    margin: 0 auto;
    padding: 55px 20px 100px;
}

.fatloss-context h3 {
    max-width: 850px;
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--green);
    margin: 0 0 40px;
}


/* LEARNED — FIXED SPINE */

.fatloss-learned {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 100px;
    padding: 125px 20px;
    background-color: var(--paper);
}

.fatloss-learned-heading h3 {
    font-size: clamp(48px, 7vw, 76px);
    line-height: .9;
    letter-spacing: -3.5px;
    color: var(--green);
    margin: 0;
}


/* ENDING — FIXED SPINE */

.fatloss-ending {
    margin: 0 -25px;
    padding: 145px 70px 110px;
    background-color: var(--green);
    color: var(--cream);
}

.fatloss-ending > .fatloss-label {
    max-width: 1000px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.fatloss-ending h3 {
    max-width: 1000px;
    margin: 0 auto 75px;
    font-size: clamp(52px, 8vw, 96px);
    line-height: .86;
    letter-spacing: -4.5px;
    color: var(--cream);
}

.fatloss-ending-copy {
    max-width: 700px;
    margin: 0 auto;
}

.fatloss-ending-copy p {
    color: var(--cream);
}

.fatloss-ending-final {
    max-width: 1000px;
    margin: 120px auto 0;
    padding-top: 45px;
    border-top: 2px solid var(--pink);
    font-size: clamp(42px, 6.5vw, 74px);
    line-height: .92;
    letter-spacing: -2.5px;
    color: var(--cream);
    font-weight: 600;
}

.fatloss-ending-final span {
    color: var(--pink);
}


/* SOURCES — FIXED SPINE */

.fatloss-sources {
    max-width: 900px;
    margin: 90px auto 0;
    padding: 55px 0;
    border-top: 2px solid var(--green);
}

.fatloss-sources h3 {
    font-size: 40px;
    color: var(--green);
    margin: 0 0 32px;
}

.fatloss-sources ol {
    margin: 0;
    padding-left: 25px;
}

.fatloss-sources li {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 700px) {

    .fatloss-article { padding-left: 10px; padding-right: 10px; }
    .fatloss-hero { min-height: 600px; padding: 55px 10px 70px; }
    .fatloss-hero h2 { font-size: 52px; letter-spacing: -3px; margin: 60px 0; }
    .fatloss-hero-intro { grid-template-columns: 1fr; gap: 15px; }
    .fatloss-opening, .fatloss-section, .fatloss-feature { grid-template-columns: 1fr; gap: 25px; padding: 75px 10px; }
    .fatloss-question-small { font-size: 30px; }
    .fatloss-equation-section { padding: 10px 5px 85px; }
    .fatloss-numbers { grid-template-columns: 1fr; gap: 55px; margin-left: -10px; margin-right: -10px; padding: 75px 25px; }
    .fatloss-numbers-heading h3 { font-size: 48px; }
    .fatloss-myths { padding: 10px 5px 85px; }
    .fatloss-twist { margin-left: -10px; margin-right: -10px; padding: 80px 22px; }
    .fatloss-twist h3 { font-size: 52px; letter-spacing: -3px; }
    .fatloss-twist-copy { margin-top: 55px; }
    .fatloss-evidence, .fatloss-context { padding-left: 5px; padding-right: 5px; }
    .fatloss-learned { grid-template-columns: 1fr; gap: 50px; padding: 80px 10px; }
    .fatloss-learned-heading h3 { font-size: 44px; }
    .fatloss-ending { margin-left: -10px; margin-right: -10px; padding: 85px 25px 75px; }
    .fatloss-ending h3 { font-size: 48px; letter-spacing: -3px; }
    .fatloss-ending-final { font-size: 36px; }
    .fatloss-sources { margin-top: 60px; padding: 40px 10px; }

}