/* #last edited 2026-09-21T14:32:47+01:00 */

.tld-ingredient-directory {
    --tld-dir-paper: #fbfaf6;
    --tld-dir-paper-alt: #f1ede2;
    --tld-dir-ink: #252624;
    --tld-dir-copy: #4b4a45;
    --tld-dir-muted: #716f68;
    --tld-dir-green: #264a3a;
    --tld-dir-rust: #a94c32;
    --tld-dir-line: rgb(37 38 36 / 18%);
    --tld-dir-shell: 1480px;
    --tld-dir-gutter: clamp(20px, 4vw, 64px);
    color: var(--tld-dir-ink);
    background: var(--tld-dir-paper);
    font-family: "Josefin Sans", Arial, sans-serif;
    overflow: clip;
}

.tld-ingredient-directory *,
.tld-ingredient-directory *::before,
.tld-ingredient-directory *::after {
    box-sizing: border-box;
}

.tld-ingredient-directory a {
    color: inherit;
}

.tld-ingredient-directory__shell {
    width: min(calc(100% - (2 * var(--tld-dir-gutter))), var(--tld-dir-shell));
    margin-inline: auto;
}

.tld-ingredient-directory__kicker,
.tld-ingredient-directory__index-label {
    margin: 0;
    color: var(--tld-dir-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.25;
    text-transform: uppercase;
}

.tld-ingredient-directory__hero {
    border-bottom: 1px solid var(--tld-dir-line);
    background:
        radial-gradient(circle at 76% 42%, rgb(38 74 58 / 10%), transparent 34%),
        linear-gradient(116deg, transparent 68%, rgb(169 76 50 / 5%) 68%),
        var(--tld-dir-paper);
}

.tld-ingredient-directory__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: clamp(40px, 8vw, 130px);
    align-items: center;
    min-height: clamp(600px, 72vh, 820px);
    padding-block: clamp(70px, 8vw, 120px);
}

.tld-ingredient-directory__hero-copy {
    position: relative;
    z-index: 2;
    max-width: 720px;
    animation: tld-dir-copy-in .7s .08s cubic-bezier(.2, .7, .2, 1) both;
}

.tld-ingredient-directory__hero h1 {
    margin: 18px 0 22px;
    font-family: "Special Elite", Georgia, serif;
    font-size: clamp(64px, 9vw, 138px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .88;
}

.tld-ingredient-directory__hero-copy > p:not(.tld-ingredient-directory__kicker) {
    max-width: 58ch;
    margin: 0;
    color: var(--tld-dir-copy);
    font-size: clamp(18px, 1.45vw, 24px);
    line-height: 1.55;
}

.tld-ingredient-directory__cta,
.tld-ingredient-directory__footer a {
    display: inline-flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 34px;
    padding: 14px 22px;
    color: #fff !important;
    background: var(--tld-dir-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease, transform .2s ease;
}

.tld-ingredient-directory__cta:hover,
.tld-ingredient-directory__footer a:hover {
    background: #18372b;
    transform: translateY(-2px);
}

.tld-ingredient-directory__hero-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 480px;
    margin: 0;
    animation: tld-dir-art-in .9s cubic-bezier(.2, .7, .2, 1) both;
}

.tld-ingredient-directory__hero-art::before {
    position: absolute;
    width: min(82%, 570px);
    aspect-ratio: 1;
    border: 1px solid rgb(38 74 58 / 22%);
    border-radius: 50%;
    content: "";
}

.tld-ingredient-directory__hero-art img {
    position: relative;
    z-index: 1;
    width: min(100%, 660px);
    max-height: 650px;
    object-fit: contain;
    filter: saturate(.72) contrast(.94);
}

.tld-ingredient-directory__index {
    position: sticky;
    z-index: 8;
    top: var(--tld-header-height, 0px);
    border-bottom: 1px solid var(--tld-dir-line);
    background: rgb(251 250 246 / 95%);
    backdrop-filter: blur(12px);
}

.tld-ingredient-directory__index .tld-ingredient-directory__shell {
    display: flex;
    gap: 30px;
    align-items: center;
    min-height: 70px;
}

.tld-ingredient-directory__index nav {
    display: flex;
    gap: 8px 24px;
    overflow-x: auto;
    padding-block: 16px;
    scrollbar-width: none;
}

.tld-ingredient-directory__index nav::-webkit-scrollbar {
    display: none;
}

.tld-ingredient-directory__index a {
    flex: 0 0 auto;
    color: var(--tld-dir-copy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
}

.tld-ingredient-directory__index a:hover,
.tld-ingredient-directory__index a:focus-visible {
    color: var(--tld-dir-rust);
}

.tld-ingredient-directory__group {
    padding-block: clamp(72px, 9vw, 132px);
    scroll-margin-top: 92px;
}

.tld-ingredient-directory__group:nth-child(even) {
    background: var(--tld-dir-paper-alt);
}

.tld-ingredient-directory__group-heading {
    display: grid;
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr);
    gap: 12px clamp(40px, 8vw, 130px);
    align-items: end;
    margin-bottom: clamp(38px, 5vw, 72px);
}

.tld-ingredient-directory__group-heading .tld-ingredient-directory__kicker {
    grid-column: 1;
}

.tld-ingredient-directory__group-heading h2 {
    grid-column: 1;
    margin: 0;
    font-family: "Special Elite", Georgia, serif;
    font-size: clamp(38px, 4.5vw, 70px);
    font-weight: 400;
    line-height: .98;
    text-wrap: balance;
}

.tld-ingredient-directory__group-heading > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    max-width: 56ch;
    margin: 0;
    color: var(--tld-dir-copy);
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.65;
}

.tld-ingredient-directory__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 5vw, 80px);
}

.tld-ingredient-directory-card {
    display: grid;
    grid-template-columns: clamp(112px, 13vw, 190px) minmax(0, 1fr);
    min-height: 220px;
    border-top: 1px solid var(--tld-dir-line);
    text-decoration: none;
    transition: border-color .25s ease, transform .25s ease;
}

.tld-ingredient-directory-card:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--tld-dir-line);
}

.tld-ingredient-directory-card:hover,
.tld-ingredient-directory-card:focus-visible {
    border-color: var(--tld-dir-rust);
    outline: none;
    transform: translateX(5px);
}

.tld-ingredient-directory-card__art {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 22px 16px 22px 0;
}

.tld-ingredient-directory-card__art img {
    width: 100%;
    max-width: 160px;
    height: 170px;
    object-fit: contain;
    filter: saturate(.72) contrast(.96);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.tld-ingredient-directory-card:hover .tld-ingredient-directory-card__art img {
    transform: scale(1.035) rotate(-1deg);
}

.tld-ingredient-directory-card__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 30px 42px 30px 24px;
}

.tld-ingredient-directory-card__number {
    position: absolute;
    top: 22px;
    right: 0;
    color: var(--tld-dir-muted);
    font-family: "Special Elite", Georgia, serif;
    font-size: 13px;
}

.tld-ingredient-directory-card__copy strong {
    max-width: 19ch;
    font-family: "Special Elite", Georgia, serif;
    font-size: clamp(23px, 2vw, 32px);
    font-weight: 400;
    line-height: 1.05;
}

.tld-ingredient-directory-card__copy em {
    margin-top: 6px;
    color: var(--tld-dir-muted);
    font-size: 13px;
}

.tld-ingredient-directory-card__copy > span:not(.tld-ingredient-directory-card__number, .tld-ingredient-directory-card__link) {
    margin-top: 13px;
    color: var(--tld-dir-copy);
    font-size: 14px;
    line-height: 1.45;
}

.tld-ingredient-directory-card__link {
    margin-top: 16px;
    color: var(--tld-dir-green);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.tld-ingredient-directory__footer {
    padding-block: clamp(72px, 9vw, 128px);
    color: #fff;
    background: var(--tld-dir-green);
    text-align: center;
}

.tld-ingredient-directory__footer .tld-ingredient-directory__kicker {
    color: rgb(255 255 255 / 68%);
}

.tld-ingredient-directory__footer h2 {
    max-width: 18ch;
    margin: 14px auto 0;
    font-family: "Special Elite", Georgia, serif;
    font-size: clamp(38px, 5vw, 72px);
    font-weight: 400;
    line-height: 1;
}

.tld-ingredient-directory__footer a {
    border: 1px solid rgb(255 255 255 / 62%);
    background: transparent;
}

.tld-ingredient-directory__footer a:hover {
    color: var(--tld-dir-green) !important;
    background: #fff;
}

@keyframes tld-dir-copy-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tld-dir-art-in {
    from { opacity: 0; transform: scale(.97) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 900px) {
    .tld-ingredient-directory__hero-inner {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
        padding-top: 72px;
    }

    .tld-ingredient-directory__hero-art {
        min-height: 380px;
    }

    .tld-ingredient-directory__hero-art img {
        max-height: 440px;
    }

    .tld-ingredient-directory__index-label {
        display: none;
    }

    .tld-ingredient-directory__group-heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .tld-ingredient-directory__group-heading > p:last-child {
        grid-column: 1;
        grid-row: auto;
        margin-top: 12px;
    }

    .tld-ingredient-directory__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tld-ingredient-directory-card:nth-last-child(2) {
        border-bottom: 0;
    }
}

@media (max-width: 560px) {
    .tld-ingredient-directory__hero h1 {
        font-size: clamp(52px, 18vw, 82px);
    }

    .tld-ingredient-directory__hero-art {
        min-height: 290px;
    }

    .tld-ingredient-directory__index .tld-ingredient-directory__shell {
        width: 100%;
        padding-inline: var(--tld-dir-gutter);
    }

    .tld-ingredient-directory-card {
        grid-template-columns: 100px minmax(0, 1fr);
        min-height: 190px;
    }

    .tld-ingredient-directory-card__art {
        padding-right: 12px;
    }

    .tld-ingredient-directory-card__art img {
        height: 125px;
    }

    .tld-ingredient-directory-card__copy {
        padding: 24px 28px 24px 16px;
    }

    .tld-ingredient-directory-card__copy > span:not(.tld-ingredient-directory-card__number, .tld-ingredient-directory-card__link) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tld-ingredient-directory__hero-copy,
    .tld-ingredient-directory__hero-art {
        animation: none;
    }

    .tld-ingredient-directory-card,
    .tld-ingredient-directory-card__art img,
    .tld-ingredient-directory__cta,
    .tld-ingredient-directory__footer a {
        transition: none;
    }
}