:root {
    color-scheme: light;
    --paper: #f8f2e8;
    --paper-deep: #eee3d2;
    --surface: #fffaf2;
    --surface-strong: #fffdf8;
    --ink: #302b25;
    --ink-soft: #6f675e;
    --herb: #596747;
    --herb-dark: #3f4d32;
    --sage: #aeb99a;
    --sage-soft: #e7ecde;
    --clay: #c56d4f;
    --clay-dark: #934c37;
    --clay-soft: #f4dfd5;
    --honey: #d9a541;
    --honey-soft: #f5e7c6;
    --line: #dfd3c1;
    --shadow-sm: 0 0.45rem 1.4rem rgb(71 55 37 / 7%);
    --shadow-md: 0 1.2rem 3rem rgb(71 55 37 / 12%);
    --radius-sm: 0.75rem;
    --radius-md: 1.25rem;
    --radius-lg: 2rem;
    --font-body: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: var(--font-body);
    font-family: var(--font-body);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 20rem;
    margin: 0;
    background:
        radial-gradient(circle at 8% 18%, rgb(217 165 65 / 8%), transparent 24rem),
        radial-gradient(circle at 92% 8%, rgb(89 103 71 / 7%), transparent 28rem),
        var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--honey-soft);
    color: var(--ink);
}

a {
    color: inherit;
}

a:focus-visible {
    border-radius: 0.2rem;
    outline: 0.2rem solid var(--honey);
    outline-offset: 0.25rem;
}

img {
    max-width: 100%;
}

.container {
    width: min(100% - 2rem, 78rem);
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: var(--ink);
    color: white;
    transform: translateY(-180%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid rgb(111 103 94 / 18%);
    background: rgb(255 250 242 / 88%);
    backdrop-filter: blur(1rem) saturate(120%);
}

.site-header__inner {
    display: flex;
    min-height: 5.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem 1rem;
}

.brand,
.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}

.brand {
    text-decoration: none;
}

.brand__mark {
    width: 3.25rem;
    height: 3.25rem;
    filter: drop-shadow(0 0.35rem 0.55rem rgb(71 55 37 / 12%));
    transition: transform 220ms ease;
}

.brand:hover .brand__mark {
    transform: rotate(-4deg) scale(1.04);
}

.brand__text,
.site-footer__brand div {
    display: grid;
    line-height: 1.1;
}

.brand__name,
.site-footer__brand strong {
    color: var(--herb-dark);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.brand__claim,
.site-footer__brand span {
    margin-top: 0.28rem;
    color: var(--clay-dark);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.navigation {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
}

.navigation a {
    display: inline-flex;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.navigation a:hover,
.navigation a[aria-current="page"] {
    background: var(--sage-soft);
    color: var(--herb-dark);
}

.navigation__task--first {
    margin-left: .25rem;
    padding-left: .7rem;
    border-left: 1px solid var(--line);
}

.household-status {
    display: inline-flex;
    flex: 0 0 auto;
    gap: .35rem;
    align-items: center;
    padding: .4rem .65rem;
    border-radius: 999px;
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.household-status span {
    color: var(--herb);
    font-size: .6rem;
}

.content {
    min-height: 68vh;
    padding-block: clamp(3.5rem, 7vw, 7rem);
}

.content h1,
.content h2,
.content h3 {
    color: var(--ink);
    font-family: var(--font-display);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.content--page-1 {
    display: grid;
    min-height: 72vh;
    align-items: center;
}

.content--page-1 > .frame:first-child {
    position: relative;
    overflow: hidden;
    max-width: 72rem;
    padding: clamp(2rem, 7vw, 6rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(120deg, rgb(255 253 248 / 97%) 0 58%, rgb(231 236 222 / 78%)),
        var(--surface);
    box-shadow: var(--shadow-md);
    isolation: isolate;
}

.content--page-1 > .frame:first-child::before {
    display: block;
    margin-bottom: 1rem;
    color: var(--clay-dark);
    content: "Kochen · Erinnern · Weitergeben";
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.content--page-1 > .frame:first-child::after {
    position: absolute;
    z-index: -1;
    right: clamp(-4rem, 1vw, 2rem);
    bottom: -4.5rem;
    width: clamp(15rem, 34vw, 27rem);
    aspect-ratio: 1;
    background: url("../Images/brand-mark.svg") center / contain no-repeat;
    content: "";
    opacity: 0.17;
    transform: rotate(-8deg);
}

.content--page-1 h1,
.content--page-1 h2 {
    max-width: 13ch;
    margin: 0;
    font-size: clamp(2.7rem, 7vw, 5.5rem);
}

.content--page-1 .frame p {
    max-width: 38rem;
    margin: 1.5rem 0 0;
    color: var(--ink-soft);
    font-size: clamp(1.08rem, 2.2vw, 1.35rem);
}

.content--page-1 .frame p:has(.home-cta) {
    margin-top: 2rem;
}

.home-cta {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.75rem 1.15rem;
    background: var(--herb);
    box-shadow: 0 0.45rem 1rem rgb(63 77 50 / 18%);
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 160ms ease, transform 160ms ease;
}

.home-cta:hover {
    background: var(--herb-dark);
    transform: translateY(-0.12rem);
}

.site-footer {
    border-top: 1px solid var(--line);
    background: rgb(238 227 210 / 45%);
    color: var(--ink-soft);
    padding-block: 2.5rem;
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-footer__brand img {
    width: 2.75rem;
    height: 2.75rem;
}

.site-footer__brand strong {
    font-size: 1.25rem;
}

.site-footer p {
    max-width: 32rem;
    margin: 0;
    text-align: right;
}

.cookbook-header {
    position: relative;
    max-width: 58rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    padding-left: clamp(0rem, 5vw, 3.5rem);
}

.cookbook-header::before {
    position: absolute;
    top: 0.25rem;
    bottom: 0.4rem;
    left: 0;
    width: 0.35rem;
    border-radius: 999px;
    background: linear-gradient(var(--clay), var(--honey));
    content: "";
}

.cookbook-header h1,
.recipe-detail__header h1 {
    margin-block: 0.15rem 1.2rem;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: -0.045em;
}

.cookbook-header > p:last-child {
    max-width: 44rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.cookbook-kicker {
    margin: 0;
    color: var(--clay-dark);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.recipe-search {
    display: grid;
    margin-bottom: 1.25rem;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--herb) 30%, var(--line));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 96% 10%, rgb(217 165 65 / 14%), transparent 13rem),
        var(--surface);
    box-shadow: var(--shadow-sm);
    grid-template-columns: minmax(15rem, 0.68fr) minmax(22rem, 1.32fr);
    gap: clamp(1.5rem, 5vw, 4rem);
}

.recipe-search__intro h2 {
    margin-block: 0.35rem 0.75rem;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
}

.recipe-search__intro > p:last-child {
    margin: 0;
    color: var(--ink-soft);
}

.recipe-search__form,
.recipe-search__query {
    display: grid;
    gap: 0.45rem;
}

.recipe-search__form label {
    color: var(--herb-dark);
    font-size: 0.82rem;
    font-weight: 800;
}

.recipe-search__form input[type="text"],
.recipe-search__form select {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.68rem 0.85rem;
    background: var(--surface-strong);
    color: var(--ink);
    font: inherit;
}

.recipe-search__form input[type="text"]:focus,
.recipe-search__form select:focus {
    border-color: var(--herb);
    outline: 0.18rem solid rgb(174 185 154 / 34%);
    outline-offset: 0.1rem;
}

.recipe-search__filters {
    display: grid;
    margin-top: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.8rem;
}

.recipe-search__filters > div {
    display: grid;
    gap: 0.4rem;
}

.recipe-search__checkbox {
    display: flex;
    min-height: 2.7rem;
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

.recipe-search__checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--herb);
}

.recipe-search__actions {
    display: flex;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.recipe-search__submit {
    min-height: 2.85rem;
    border: 1px solid var(--herb);
    border-radius: 999px;
    padding: 0.65rem 1rem;
    background: var(--herb);
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
}

.recipe-search__submit--ai {
    border-color: var(--clay);
    background: var(--clay);
}

.recipe-search__submit:hover:not(:disabled) {
    filter: brightness(0.9);
}

.recipe-search__submit:disabled {
    border-color: var(--line);
    background: var(--paper-deep);
    color: var(--ink-soft);
    cursor: not-allowed;
}

.recipe-search__reset {
    padding: 0.55rem;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 700;
}

.recipe-results {
    display: flex;
    min-height: 3.5rem;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.recipe-results p {
    margin: 0;
}

.recipe-results__ai-reason,
.recipe-results__notice {
    max-width: 48rem;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.8rem;
    background: var(--sage-soft);
    color: var(--herb-dark);
    font-size: 0.9rem;
}

.recipe-results__notice {
    background: var(--honey-soft);
    color: #745016;
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1.4rem;
}

.recipe-card,
.recipe-section,
.recipe-part {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.recipe-card {
    position: relative;
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.recipe-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 0.3rem;
    background: var(--clay);
    content: "";
}

.recipe-card:nth-child(3n + 2)::before {
    background: var(--herb);
}

.recipe-card:nth-child(3n + 3)::before {
    background: var(--honey);
}

.recipe-card:hover {
    border-color: color-mix(in srgb, var(--clay) 45%, var(--line));
    box-shadow: var(--shadow-md);
    transform: translateY(-0.25rem);
}

.recipe-card__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--sage-soft);
}

.recipe-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 240ms ease;
}

.recipe-card:hover .recipe-card__image img {
    transform: scale(1.025);
}

.recipe-card__body {
    display: flex;
    height: 100%;
    padding: clamp(1.4rem, 3vw, 2rem);
    flex-direction: column;
}

.recipe-section,
.recipe-part {
    padding: clamp(1.4rem, 4vw, 2.5rem);
}

.recipe-card h2 {
    margin-block: 0.9rem 0.65rem;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
}

.recipe-card h2 a,
.recipe-link,
.back-link {
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.2em;
}

.recipe-card__summary {
    display: -webkit-box;
    overflow: hidden;
    margin-block: 0 0.5rem;
    color: var(--ink-soft);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.recipe-link,
.back-link {
    color: var(--herb-dark);
    font-weight: 800;
}

.recipe-link {
    display: inline-flex;
    width: fit-content;
    margin-top: auto;
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    background: var(--sage-soft);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.recipe-link:hover {
    background: var(--herb);
    color: white;
}

.back-link {
    display: inline-flex;
    margin-bottom: 1.5rem;
}

.recipe-status {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 0.8rem;
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    background: var(--sage-soft);
    color: var(--herb-dark);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.recipe-status--draft {
    background: var(--honey-soft);
    color: #745016;
}

.recipe-status--testing {
    background: var(--clay-soft);
    color: var(--clay-dark);
}

.tag-list {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
}

.tag-list li {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgb(255 253 248 / 68%);
    color: var(--ink-soft);
    padding: 0.18rem 0.58rem;
    font-size: 0.76rem;
}

.tag-list--secondary {
    margin-top: 0.55rem;
    opacity: 0.78;
}

.recipe-pagination {
    display: flex;
    margin-top: 2rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.recipe-pagination a {
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    background: var(--sage-soft);
    color: var(--herb-dark);
    font-weight: 800;
    text-decoration: none;
}

.recipe-pagination span {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.recipe-facts,
.recipe-meta {
    display: flex;
    margin-block: 1.1rem;
    flex-wrap: wrap;
    gap: 0.7rem 1.4rem;
}

.recipe-facts div,
.recipe-meta div {
    display: flex;
    gap: 0.35rem;
}

.recipe-facts dt,
.recipe-meta dt {
    color: var(--ink-soft);
}

.recipe-facts dd,
.recipe-meta dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.empty-state {
    border: 1px dashed var(--sage);
    border-radius: var(--radius-md);
    padding: 2rem;
    background: var(--surface);
}

.recipe-detail {
    margin-top: 0.5rem;
}

.recipe-detail__header {
    position: relative;
    overflow: hidden;
    max-width: 72rem;
    margin-bottom: 2rem;
    padding: clamp(1.7rem, 5vw, 4rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 92% 15%, rgb(217 165 65 / 13%), transparent 14rem),
        linear-gradient(130deg, var(--surface-strong), rgb(231 236 222 / 52%));
    box-shadow: var(--shadow-sm);
}

.recipe-detail__header h1 {
    max-width: 14ch;
    font-size: clamp(2.15rem, 4.5vw, 3.75rem);
    letter-spacing: -0.045em;
}

.recipe-lead {
    max-width: 48rem;
    color: var(--ink-soft);
    font-size: clamp(1.08rem, 2.4vw, 1.35rem);
}

.recipe-meta {
    margin-top: 1.6rem;
}

.recipe-meta div {
    border: 1px solid rgb(174 185 154 / 55%);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    background: rgb(255 253 248 / 68%);
}

.recipe-gallery {
    display: grid;
    margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.recipe-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.recipe-parts {
    display: grid;
    margin-block: 2rem;
    gap: 1.5rem;
}

.recipe-part h2,
.recipe-section h2 {
    margin-top: 0;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.recipe-part__columns {
    display: grid;
    grid-template-columns: minmax(15rem, 0.82fr) minmax(20rem, 1.18fr);
    gap: clamp(2rem, 6vw, 5rem);
}

.recipe-part__columns h3 {
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--paper-deep);
    color: var(--herb-dark);
    font-size: 1.35rem;
}

.part-yield,
.step-meta {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.ingredient-list,
.preparation-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ingredient-list li {
    display: grid;
    border-bottom: 1px solid var(--line);
    padding-block: 0.72rem;
    grid-template-columns: minmax(4.8rem, auto) 1fr;
    gap: 0.8rem;
}

.ingredient-list li:last-child {
    border-bottom: 0;
}

.ingredient-amount {
    color: var(--clay-dark);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.ingredient-list small {
    display: block;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.personal-tool {
    display: grid;
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border: 1px solid color-mix(in srgb, var(--herb) 32%, var(--line));
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 95% 15%, rgb(217 165 65 / 16%), transparent 10rem),
        var(--sage-soft);
    box-shadow: var(--shadow-sm);
}

.personal-tool__kicker {
    margin: 0;
    color: var(--herb-dark);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.portion-calculator {
    margin-block: 2rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem 2.5rem;
}

.portion-calculator[hidden] {
    display: none;
}

.portion-calculator h2 {
    margin: 0.15rem 0 0.55rem;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.portion-calculator__hint {
    margin: 0;
    color: var(--ink-soft);
}

.portion-calculator__controls {
    display: grid;
    grid-template-columns: 3rem minmax(4.5rem, 5.5rem) 3rem;
    align-items: center;
    gap: 0.45rem;
}

.portion-calculator__controls label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.portion-calculator__controls button,
.portion-calculator__controls input {
    min-height: 3rem;
    border: 1px solid var(--sage);
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
    color: var(--ink);
    font: inherit;
}

.portion-calculator__controls button {
    cursor: pointer;
    font-size: 1.35rem;
    font-weight: 850;
}

.portion-calculator__controls button:hover:not(:disabled),
.portion-calculator__controls button:focus-visible {
    border-color: var(--herb);
    background: var(--herb);
    color: white;
}

.portion-calculator__controls button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.portion-calculator__controls input {
    width: 100%;
    padding-inline: 0.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
}

.portion-calculator__reset {
    grid-column: 1 / -1;
    min-height: auto !important;
    border-color: transparent !important;
    padding: 0.35rem !important;
    background: transparent !important;
    color: var(--herb-dark) !important;
    font-size: 0.82rem !important;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.preparation-list {
    counter-reset: preparation-step;
}

.preparation-list li {
    position: relative;
    padding: 0 0 1.75rem 3.35rem;
    counter-increment: preparation-step;
}

.preparation-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50% 50% 46% 54%;
    background: var(--clay);
    box-shadow: 0 0.25rem 0.7rem rgb(147 76 55 / 18%);
    color: white;
    content: counter(preparation-step);
    font-family: var(--font-display);
    font-weight: 800;
    place-items: center;
    transform: rotate(-3deg);
}

.preparation-list h4 {
    margin: 0 0 0.35rem;
    color: var(--ink);
    font-size: 1.08rem;
}

.preparation-list p {
    margin-block: 0 0.55rem;
}

.recipe-section {
    max-width: 64rem;
    margin-block: 1.5rem;
}

.prose h3 {
    margin-top: 1.75rem;
    color: var(--herb-dark);
}

.prose li + li {
    margin-top: 0.35rem;
}

.recipe-variant {
    max-width: 58rem;
    border-left: 0.3rem solid var(--clay);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.25rem;
    background: var(--clay-soft);
}

.knowledge-article,
.knowledge-landing {
    --tomato-red: #bd4e38;
    --tomato-dark: #873522;
    --tomato-soft: #f5ddd4;
    --tomato-gold: #e2a63d;
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.knowledge-article--potatoes {
    --tomato-red: #a66a2c;
    --tomato-dark: #704216;
    --tomato-soft: #f2e4c9;
    --tomato-gold: #d5a44d;
}

.knowledge-hero {
    position: relative;
    display: grid;
    overflow: hidden;
    min-height: 34rem;
    padding: clamp(2rem, 6vw, 5rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 78% 30%, rgb(255 255 255 / 38%), transparent 18rem),
        linear-gradient(125deg, #fffaf2 0 48%, #efd9c4 100%);
    box-shadow: var(--shadow-md);
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
    isolation: isolate;
}

.knowledge-hero::before {
    position: absolute;
    z-index: -1;
    inset: auto -8rem -12rem auto;
    width: 32rem;
    aspect-ratio: 1;
    border: 1px solid rgb(189 78 56 / 18%);
    border-radius: 50%;
    content: "";
}

.knowledge-hero__copy {
    align-self: center;
}

.knowledge-kicker {
    margin: 0 0 0.65rem;
    color: var(--clay-dark);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.knowledge-hero h1,
.knowledge-landing__header h1 {
    max-width: 10ch;
    margin: 0;
    font-size: clamp(4rem, 11vw, 8.5rem);
    letter-spacing: -0.065em;
}

.knowledge-lead,
.knowledge-landing__header > p:last-child {
    max-width: 42rem;
    margin: 1.4rem 0 0;
    color: var(--ink-soft);
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
}

.tomato-still-life {
    position: relative;
    min-height: 20rem;
}

.tomato {
    position: absolute;
    display: block;
    border-radius: 49% 51% 47% 53%;
    background:
        radial-gradient(circle at 32% 24%, rgb(255 255 255 / 42%) 0 5%, transparent 18%),
        radial-gradient(circle at 60% 72%, rgb(92 23 13 / 28%), transparent 42%),
        var(--tomato-red);
    box-shadow: 0 1.5rem 2.2rem rgb(88 47 28 / 20%);
}

.tomato::before {
    position: absolute;
    top: -8%;
    left: 50%;
    width: 44%;
    height: 25%;
    background: var(--herb);
    clip-path: polygon(50% 45%, 100% 0, 72% 50%, 100% 85%, 56% 68%, 40% 100%, 34% 65%, 0 85%, 22% 48%, 0 8%);
    content: "";
    transform: translateX(-50%);
}

.tomato--large {
    right: 4%;
    bottom: 8%;
    width: min(18rem, 72%);
    aspect-ratio: 1.05;
    transform: rotate(-7deg);
}

.tomato--small {
    top: 10%;
    left: 2%;
    width: 7.4rem;
    aspect-ratio: 1;
    transform: rotate(14deg);
}

.tomato--gold {
    top: 11%;
    right: 1%;
    width: 5.2rem;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 32% 24%, rgb(255 255 255 / 45%) 0 5%, transparent 18%),
        radial-gradient(circle at 60% 72%, rgb(117 68 13 / 20%), transparent 42%),
        var(--tomato-gold);
    transform: rotate(8deg);
}

.potato-still-life {
    position: relative;
    min-height: 20rem;
}

.potato {
    position: absolute;
    display: block;
    border-radius: 52% 44% 48% 46%;
    background:
        radial-gradient(circle at 33% 26%, rgb(255 255 255 / 38%) 0 4%, transparent 17%),
        radial-gradient(circle at 67% 38%, #8b5a27 0 1.6%, transparent 1.8%),
        radial-gradient(circle at 35% 71%, #8b5a27 0 1.4%, transparent 1.6%),
        linear-gradient(145deg, #e0bc70, #ad7434);
    box-shadow: 0 1.5rem 2.2rem rgb(88 47 28 / 22%);
}

.potato--large {
    right: 3%;
    bottom: 7%;
    width: min(18rem, 72%);
    aspect-ratio: 1.28;
    transform: rotate(-12deg);
}

.potato--small {
    top: 12%;
    left: 3%;
    width: 7.5rem;
    aspect-ratio: 1.18;
    transform: rotate(18deg);
}

.potato--red {
    top: 9%;
    right: 2%;
    width: 5.8rem;
    aspect-ratio: 1.05;
    background:
        radial-gradient(circle at 32% 24%, rgb(255 255 255 / 35%) 0 4%, transparent 17%),
        radial-gradient(circle at 68% 40%, #754135 0 1.8%, transparent 2%),
        linear-gradient(145deg, #b7725f, #7e4435);
    transform: rotate(9deg);
}

.knowledge-keyfacts {
    display: grid;
    margin: 3rem 0 0;
    padding: 0;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    list-style: none;
}

.knowledge-keyfacts li {
    display: grid;
    border: 1px solid rgb(255 255 255 / 68%);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    background: rgb(255 253 248 / 64%);
    backdrop-filter: blur(0.7rem);
}

.knowledge-keyfacts strong {
    color: var(--tomato-dark);
}

.knowledge-keyfacts span {
    margin-top: 0.2rem;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.knowledge-toc {
    position: sticky;
    z-index: 10;
    top: 6.6rem;
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgb(255 250 242 / 92%);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    gap: 0.2rem;
    backdrop-filter: blur(1rem);
}

.knowledge-toc strong,
.knowledge-toc a {
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    font-size: 0.82rem;
    text-decoration: none;
}

.knowledge-toc strong {
    color: var(--tomato-dark);
}

.knowledge-toc a {
    color: var(--ink-soft);
}

.knowledge-toc a:hover {
    background: var(--tomato-soft);
    color: var(--tomato-dark);
}

.knowledge-section {
    scroll-margin-top: 10rem;
}

.knowledge-section__intro {
    max-width: 52rem;
    margin-bottom: 2rem;
}

.knowledge-section h2,
.knowledge-landing-card h2 {
    margin-block: 0 0.8rem;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
}

.knowledge-section__intro > p:last-child,
.knowledge-section--split > div > p {
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.tomato-type-grid,
.potato-type-grid,
.preserve-grid,
.checklist-grid,
.knowledge-landing__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tomato-type-card,
.potato-type-card,
.preserve-grid article,
.checklist-card,
.season-card,
.buying-box,
.knowledge-landing-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.tomato-type-card {
    position: relative;
    min-height: 14.5rem;
    overflow: hidden;
    padding: 1.6rem 8rem 1.6rem 1.6rem;
}

.tomato-type-card h3,
.preserve-grid h3,
.checklist-card h3,
.season-card h3,
.buying-box h3,
.family-insight h3 {
    margin: 0 0 0.55rem;
    font-size: 1.25rem;
}

.tomato-type-card p,
.potato-type-card > p:last-child,
.preserve-grid p {
    margin: 0;
    color: var(--ink-soft);
}

.potato-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.potato-type-card {
    position: relative;
    min-height: 17rem;
    overflow: hidden;
    padding: 1.5rem 1.5rem 7rem;
}

.potato-type-card h3 {
    margin: 0 0 0.55rem;
    font-size: 1.35rem;
}

.potato-type-card__label {
    margin: 0 0 0.35rem;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.potato-type-card__cut {
    position: absolute;
    right: 1.3rem;
    bottom: -1.8rem;
    width: 7.6rem;
    aspect-ratio: 1.2;
    border: 0.45rem solid #b67b3d;
    border-radius: 51% 46% 48% 44%;
    background:
        radial-gradient(circle at 42% 38%, rgb(255 255 255 / 38%), transparent 24%),
        #f2d995;
    box-shadow: 0 0.8rem 1.6rem rgb(88 47 28 / 16%);
    transform: rotate(-9deg);
}

.potato-type-card--firm {
    border-top: 0.35rem solid #618659;
}

.potato-type-card--mostly-firm {
    border-top: 0.35rem solid #b95b4b;
}

.potato-type-card--floury {
    border-top: 0.35rem solid #55728d;
}

.potato-type-card--floury .potato-type-card__cut {
    background:
        radial-gradient(circle at 40% 38%, rgb(255 255 255 / 52%), transparent 25%),
        repeating-radial-gradient(circle at 58% 62%, #f1dda8 0 0.2rem, #ead29a 0.22rem 0.34rem);
}

.tomato-type-card__shape {
    position: absolute;
    right: 1.4rem;
    bottom: 1.4rem;
    width: 5.5rem;
    aspect-ratio: 1;
    border-radius: 48% 52% 46% 54%;
    background: var(--tomato-red);
    box-shadow: inset -1rem -1rem 1.4rem rgb(104 25 13 / 20%);
}

.tomato-type-card__shape::before {
    position: absolute;
    top: -12%;
    left: 50%;
    width: 54%;
    height: 30%;
    background: var(--herb);
    clip-path: polygon(50% 45%, 100% 0, 72% 50%, 100% 85%, 56% 68%, 40% 100%, 34% 65%, 0 85%, 22% 48%, 0 8%);
    content: "";
    transform: translateX(-50%);
}

.tomato-type-card--cherry .tomato-type-card__shape {
    width: 4rem;
}

.tomato-type-card--roma .tomato-type-card__shape {
    width: 4.6rem;
    aspect-ratio: 0.72;
    border-radius: 46% 54% 50% 50%;
}

.tomato-type-card--beef .tomato-type-card__shape {
    width: 7rem;
    aspect-ratio: 1.25;
}

.tomato-type-card--vine .tomato-type-card__shape {
    box-shadow: -2.8rem 1rem 0 -0.6rem #d56a49, inset -1rem -1rem 1.4rem rgb(104 25 13 / 20%);
}

.tomato-type-card--heritage .tomato-type-card__shape {
    background: var(--tomato-gold);
}

.knowledge-note,
.family-insight {
    margin-top: 1.25rem;
    border-left: 0.35rem solid var(--tomato-red);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.35rem 1.6rem;
    background: var(--tomato-soft);
}

.knowledge-note strong {
    color: var(--tomato-dark);
    font-size: 1.05rem;
}

.knowledge-note p,
.family-insight p {
    margin-block: 0.35rem 0;
}

.knowledge-section--split {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr);
    gap: clamp(2rem, 6vw, 5rem);
}

.season-card,
.checklist-card,
.buying-box {
    padding: clamp(1.4rem, 3vw, 2rem);
}

.season-months {
    display: grid;
    margin-block: 1.2rem;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.35rem;
}

.season-months span,
.season-months strong {
    border-radius: 0.45rem;
    padding: 0.42rem 0.2rem;
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-align: center;
}

.season-months strong {
    background: var(--tomato-red);
    color: white;
}

.season-card p {
    color: var(--ink-soft);
    font-size: 0.94rem;
}

.checklist-card ul,
.buying-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist-card li,
.buying-box li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.7rem;
}

.checklist-card li::before,
.buying-box li::before {
    position: absolute;
    top: 0.55rem;
    left: 0;
    color: var(--herb);
    content: "✓";
    font-weight: 900;
}

.checklist-card--avoid li::before {
    color: var(--tomato-red);
    content: "×";
}

.storage-strip {
    display: grid;
    margin-top: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    grid-template-columns: repeat(3, 1fr);
}

.storage-strip div {
    padding: 1.25rem;
    border-right: 1px solid var(--line);
}

.storage-strip div:last-child {
    border-right: 0;
}

.storage-strip span,
.storage-strip strong {
    display: block;
}

.storage-strip span {
    color: var(--tomato-dark);
    font-size: 1.35rem;
    font-weight: 850;
}

.storage-strip strong {
    color: var(--herb-dark);
}

.storage-strip p,
.knowledge-fineprint {
    margin-block: 0.35rem 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.knowledge-fineprint {
    max-width: 60rem;
    margin-top: 1rem;
}

.use-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.use-table__row {
    display: grid;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    grid-template-columns: 0.7fr 1.3fr 1.3fr;
    gap: 1rem;
}

.use-table__row:last-child {
    border-bottom: 0;
}

.use-table__head {
    background: var(--herb-dark);
    color: white;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.use-table__row > span {
    color: var(--ink-soft);
}

.use-table__head > span {
    color: white;
}

.technique-list {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0.75rem;
    list-style: none;
}

.technique-list li {
    display: grid;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    grid-template-columns: 3.5rem 1fr;
    gap: 1rem;
}

.technique-list > li > span {
    color: var(--tomato-red);
    font-size: 1.65rem;
    font-weight: 850;
}

.technique-list h3,
.technique-list p {
    margin: 0;
}

.technique-list p {
    margin-top: 0.25rem;
    color: var(--ink-soft);
}

.family-insight {
    margin-top: 1.5rem;
    border-left-color: var(--honey);
    background: var(--honey-soft);
}

.family-insight a {
    color: var(--herb-dark);
    font-weight: 800;
}

.preserve-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.preserve-grid article {
    padding: 1.35rem;
}

.preserve-icon {
    position: relative;
    display: block;
    width: 3.25rem;
    height: 4rem;
    margin-bottom: 1rem;
    border: 0.24rem solid var(--tomato-red);
    border-radius: 0.35rem 0.35rem 0.7rem 0.7rem;
    background: linear-gradient(to top, var(--tomato-red) 0 67%, transparent 67%);
}

.preserve-icon::before {
    position: absolute;
    top: -0.46rem;
    left: -0.35rem;
    width: 3.45rem;
    height: 0.55rem;
    border-radius: 0.2rem;
    background: var(--honey);
    content: "";
}

.preserve-icon--passata {
    width: 2.4rem;
    border-radius: 0.2rem 0.2rem 0.8rem 0.8rem;
}

.preserve-icon--paste {
    width: 4rem;
    height: 2.3rem;
    margin-top: 1.7rem;
    background: var(--tomato-dark);
}

.buying-box {
    margin-top: 1rem;
    background: var(--sage-soft);
}

.knowledge-note--neutral {
    margin: 0;
    border-left-color: var(--herb);
    background: var(--sage-soft);
}

.safety-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.safety-grid article {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    background: var(--surface);
}

.safety-grid strong {
    color: var(--tomato-dark);
}

.safety-grid p {
    margin: 0.35rem 0 0;
    color: var(--ink-soft);
}

.knowledge-sources {
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.knowledge-sources h2 {
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.knowledge-sources ul {
    display: grid;
    padding-left: 1.2rem;
    gap: 0.45rem;
}

.knowledge-sources a {
    color: var(--herb-dark);
    text-underline-offset: 0.2em;
}

.knowledge-updated {
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.knowledge-landing__header {
    max-width: 62rem;
}

.knowledge-landing__header h1 {
    max-width: 13ch;
    font-size: clamp(3rem, 8vw, 6rem);
}

.knowledge-landing-card {
    display: block;
    min-height: 20rem;
    padding: clamp(1.7rem, 4vw, 3rem);
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

a.knowledge-landing-card:hover {
    border-color: var(--clay);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.25rem);
}

.knowledge-landing-card > span {
    color: var(--clay-dark);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.knowledge-landing-card p {
    max-width: 32rem;
    color: var(--ink-soft);
}

.knowledge-landing-card strong {
    color: var(--herb-dark);
}

.knowledge-landing-card--muted {
    background: var(--paper-deep);
}

.knowledge-landing-card--tomato {
    background:
        radial-gradient(circle at 88% 75%, rgb(189 78 56 / 25%) 0 6rem, transparent 6.1rem),
        var(--surface);
}

.knowledge-landing-card--potato {
    background:
        radial-gradient(ellipse at 87% 77%, rgb(183 123 61 / 28%) 0 6.8rem, transparent 6.9rem),
        var(--surface);
}

.knowledge-landing__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 48rem) {
    .site-header {
        position: static;
    }

    .site-header__inner,
    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        padding-block: 1rem;
    }

    .site-header__actions {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
    }

    .navigation__task--first {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .site-footer p {
        text-align: left;
    }

    .cookbook-header {
        padding-left: 1.2rem;
    }

    .recipe-search {
        grid-template-columns: 1fr;
    }

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

    .recipe-part__columns {
        grid-template-columns: 1fr;
    }

    .knowledge-hero {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .tomato-still-life,
    .potato-still-life {
        min-height: 16rem;
    }

    .knowledge-keyfacts,
    .tomato-type-grid,
    .potato-type-grid,
    .checklist-grid,
    .safety-grid,
    .knowledge-landing__grid,
    .knowledge-section--split {
        grid-template-columns: 1fr;
    }

    .knowledge-toc {
        position: static;
        margin-inline: 0;
        border-radius: var(--radius-md);
    }

    .knowledge-toc strong {
        width: 100%;
    }

    .storage-strip,
    .preserve-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .storage-strip div:nth-child(2) {
        border-right: 0;
    }

    .storage-strip div:last-child {
        border-top: 1px solid var(--line);
        grid-column: 1 / -1;
    }

    .use-table__head {
        display: none;
    }

    .use-table__row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
}

@media (max-width: 30rem) {
    .brand__claim {
        display: none;
    }

    .brand__mark {
        width: 2.85rem;
        height: 2.85rem;
    }

    .content {
        padding-block: 2.5rem;
    }

    .content--page-1 > .frame:first-child::after {
        right: -6rem;
        opacity: 0.1;
    }

    .recipe-detail__header {
        padding: 1.35rem;
        border-radius: var(--radius-md);
    }

    .recipe-search {
        padding: 1.25rem;
        border-radius: var(--radius-md);
    }

    .recipe-search__filters {
        grid-template-columns: 1fr;
    }

    .recipe-search__checkbox {
        grid-column: auto;
    }

    .recipe-search__actions,
    .recipe-search__submit,
    .recipe-search__reset {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .recipe-pagination {
        flex-wrap: wrap;
    }

    .recipe-meta div {
        width: 100%;
        justify-content: space-between;
    }

    .ingredient-list li {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .portion-calculator {
        grid-template-columns: 1fr;
    }

    .portion-calculator__controls {
        width: 100%;
        grid-template-columns: 3rem 1fr 3rem;
    }

    .knowledge-hero {
        padding: 1.4rem;
        border-radius: var(--radius-md);
    }

    .knowledge-hero h1 {
        font-size: 3.6rem;
    }

    .tomato-still-life,
    .potato-still-life {
        min-height: 12rem;
    }

    .tomato--large {
        width: 10rem;
    }

    .tomato--small {
        width: 5rem;
    }

    .potato--large {
        width: 10.5rem;
    }

    .potato--small {
        width: 5rem;
    }

    .storage-strip,
    .preserve-grid {
        grid-template-columns: 1fr;
    }

    .storage-strip div,
    .storage-strip div:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .storage-strip div:last-child {
        border-top: 0;
        border-bottom: 0;
        grid-column: auto;
    }

    .tomato-type-card {
        padding-right: 1.4rem;
        padding-bottom: 7rem;
    }

    .technique-list li {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body {
        background: white;
        color: black;
        font-size: 10pt;
    }

    .site-header,
    .site-footer,
    .back-link,
    .recipe-status,
    .tag-list {
        display: none;
    }

    .portion-calculator {
        display: none;
    }

    .content {
        width: 100%;
        padding: 0;
    }

    .recipe-detail__header,
    .recipe-card,
    .recipe-part,
    .recipe-section {
        border: 0;
        box-shadow: none;
    }

    .knowledge-toc,
    .tomato-still-life,
    .potato-still-life {
        display: none;
    }

    .knowledge-hero,
    .tomato-type-card,
    .potato-type-card,
    .preserve-grid article,
    .checklist-card,
    .season-card,
    .buying-box,
    .knowledge-landing-card {
        border: 0;
        box-shadow: none;
    }

    .recipe-part__columns {
        grid-template-columns: 0.8fr 1.2fr;
    }
}
/* Anonymous household meal plan */
.meal-plan-link,
.meal-plan-add__view-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
}

.meal-plan-add {
    margin-top: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(26rem, .9fr);
    align-items: center;
    gap: 1.5rem 2.5rem;
}

.meal-plan-add h2 {
    margin: 0 0 .35rem;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.meal-plan-add__actions {
    display: grid;
    gap: .65rem;
}

.meal-plan-add__form {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(6rem, .38fr);
    gap: .85rem;
    align-items: end;
}

.meal-plan-add__form > div:first-child:has(input[type="hidden"]) {
    display: none;
}

.meal-plan-add__form div,
.meal-plan-add__form label {
    display: grid;
    gap: .35rem;
}

.meal-plan-add__form select,
.meal-plan-add__form input {
    min-height: 2.8rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: #fff;
    color: inherit;
    font: inherit;
}

.meal-plan-add__form button,
.meal-plan-entries button {
    min-height: 2.8rem;
    padding: .6rem .9rem;
    border: 0;
    border-radius: .55rem;
    background: var(--herb-dark);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.meal-plan-add__form > button {
    grid-column: 1 / -1;
}

.meal-plan-add__view-link {
    width: fit-content;
    justify-self: end;
}

.meal-plan-header__privacy {
    max-width: 46rem;
    font-size: .95rem;
}

.meal-plan-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0;
}

.meal-plan-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(9rem, 1fr));
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}

.meal-plan-day {
    min-height: 12rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--surface-strong);
}

.meal-plan-day--today {
    border-color: var(--herb);
    box-shadow: inset 0 0 0 1px var(--herb);
}

.meal-plan-day > header {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: baseline;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--line);
}

.meal-plan-day h2 {
    margin: 0;
    font-size: 1rem;
}

.meal-plan-day time,
.meal-plan-day__empty,
.meal-plan-entries span {
    color: var(--ink-soft);
    font-size: .88rem;
}

.meal-plan-entries {
    display: grid;
    gap: .8rem;
    margin: .9rem 0 0;
    padding: 0;
    list-style: none;
}

.meal-plan-entries li,
.meal-plan-entries li > div {
    display: grid;
    gap: .35rem;
}

.meal-plan-entries button {
    min-height: auto;
    padding: .35rem .55rem;
    background: transparent;
    color: var(--ink-soft);
    font-size: .82rem;
    text-decoration: underline;
}

.meal-plan-help {
    margin-top: 2rem;
    padding: 1.25rem;
    border-radius: .8rem;
    background: var(--paper-deep);
}

@media (max-width: 760px) {
    .meal-plan-add {
        grid-template-columns: 1fr;
    }

    .meal-plan-add__form {
        grid-template-columns: 1fr;
    }

    .meal-plan-add__view-link {
        justify-self: start;
    }

    .meal-plan-week {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .meal-plan-day {
        min-height: auto;
    }
}

/* Versioned private shopping list */
.meal-plan-shopping {
    display: flex;
    justify-content: flex-end;
    margin: -1rem 0 1.5rem;
    font-weight: 700;
}

.shopping-list-toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.shopping-list-toolbar > div {
    display: grid;
    gap: .2rem;
}

.shopping-list-toolbar span,
.shopping-list-status {
    color: var(--ink-soft);
    font-size: .9rem;
}

.shopping-list-status {
    margin: 0;
}

.shopping-list-status--current {
    color: var(--herb-dark);
}

.shopping-list-status--outdated {
    color: var(--clay-dark);
}

.shopping-list-toolbar button,
.shopping-list-empty button,
.shopping-list-item__form button {
    min-height: 2.65rem;
    padding: .55rem .85rem;
    border: 0;
    border-radius: .55rem;
    background: var(--herb-dark);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.shopping-list-revisions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.shopping-list-revisions a {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    min-height: 2rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface-strong);
}

.shopping-list-items {
    display: grid;
    gap: .3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shopping-list-section {
    margin: .8rem 0 .1rem;
    padding: .25rem .15rem;
    color: var(--herb-dark);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.shopping-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-left: .25rem solid var(--clay);
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
}

.shopping-list-item[hidden] {
    display: none;
}

.shopping-list-item--available {
    border-left-color: var(--honey);
}

.shopping-list-item--purchased {
    border-left-color: var(--herb);
    background: var(--sage-soft);
}

.shopping-list-item--skipped {
    border-left-color: var(--ink-soft);
    opacity: .72;
}

.shopping-list-item__content,
.shopping-list-item__content > div {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
    align-items: baseline;
}

.shopping-list-item__content small {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem .55rem;
    align-items: baseline;
    color: var(--ink-soft);
    font-size: .78rem;
}

.shopping-list-item__pantry-form {
    display: inline;
}

.shopping-list-item__pantry-form button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--herb-dark);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .15em;
    cursor: pointer;
}

.shopping-list-item__state,
.shopping-list-item__optional {
    padding: .15rem .4rem;
    border-radius: 999px;
    background: var(--paper-deep);
    color: var(--ink-soft);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.shopping-list-item__optional {
    background: var(--clay-soft);
    color: var(--clay-dark);
}

.shopping-list-item__amount {
    font-weight: 700;
}

.shopping-list-item__form {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto;
    gap: .5rem;
}

.shopping-list-item__form label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.shopping-list-item__form select {
    min-height: 2.2rem;
    padding: .35rem .55rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: #fff;
    color: inherit;
    font: inherit;
}

.shopping-list-item__form--enhanced {
    grid-template-columns: minmax(8rem, 1fr);
}

.shopping-list-item__form--enhanced button {
    display: none;
}

.shopping-list-browser {
    margin-top: 1rem;
}

.shopping-list-filters {
    position: sticky;
    z-index: 10;
    top: 6.25rem;
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(10rem, auto) auto auto;
    gap: .6rem 1rem;
    align-items: end;
    margin-bottom: .4rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper-deep);
}

.shopping-list-filters label:not(.shopping-list-toggle) {
    display: grid;
    gap: .2rem;
    color: var(--ink-soft);
    font-size: .76rem;
    font-weight: 700;
}

.shopping-list-filters input[type="search"],
.shopping-list-filters select {
    min-height: 2.2rem;
    padding: .35rem .55rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.shopping-list-toggle {
    display: flex;
    gap: .4rem;
    align-items: center;
    min-height: 2.2rem;
    font-size: .85rem;
    font-weight: 650;
}

.shopping-list-visible-count {
    margin: 0 0 .4rem;
    color: var(--ink-soft);
    font-size: .8rem;
}

.shopping-list-feedback {
    min-height: 1.2em;
    margin: 0 0 .4rem;
    color: var(--clay-dark);
    font-size: .8rem;
}

.shopping-list-feedback:empty {
    display: none;
}

.shopping-list-sources {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--paper-deep);
}

.shopping-list-sources summary {
    cursor: pointer;
    font-weight: 700;
}

@media (max-width: 760px) {
    .meal-plan-shopping {
        justify-content: flex-start;
        margin-top: 0;
    }

    .shopping-list-toolbar,
    .shopping-list-item {
        grid-template-columns: 1fr;
    }

    .shopping-list-item__form {
        grid-template-columns: 1fr auto;
    }

    .shopping-list-item__form--enhanced {
        grid-template-columns: 1fr;
    }

    .shopping-list-filters {
        top: 0;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .shopping-list-filters {
        grid-template-columns: 1fr;
    }
}

/* Private household inventory */
.inventory-add {
    display: grid;
    grid-template-columns: minmax(14rem, .75fr) minmax(0, 1.25fr);
    gap: 1.5rem 2rem;
    margin: 1.5rem 0;
}

.inventory-add h2,
.inventory-add p {
    margin-top: 0;
}

.inventory-add__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.inventory-add__form > div:first-child:has(input[type="hidden"]) {
    display: none;
}

.inventory-add__form label {
    display: grid;
    gap: .25rem;
    color: var(--ink-soft);
    font-size: .78rem;
    font-weight: 700;
}

.inventory-add__form select,
.inventory-add__form input {
    width: 100%;
    min-height: 2.7rem;
    padding: .5rem .65rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.inventory-add__form button {
    min-height: 2.7rem;
    align-self: end;
    border: 0;
    border-radius: .55rem;
    background: var(--herb-dark);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.inventory-toolbar {
    position: sticky;
    z-index: 10;
    top: 6.25rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
    padding: .7rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper-deep);
}

.inventory-toolbar p {
    margin: 0;
}

.inventory-toolbar label {
    display: flex;
    gap: .4rem;
    align-items: center;
    font-size: .85rem;
    font-weight: 700;
}

.inventory-feedback {
    min-height: 1.2em;
    margin: 0;
    color: var(--clay-dark);
    font-size: .85rem;
}

.inventory-feedback:empty {
    display: none;
}

.inventory-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.inventory-group {
    padding: .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.inventory-group[hidden] {
    display: none;
}

.inventory-group > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .55rem;
}

.inventory-group h2 {
    margin: 0;
    font-size: 1.15rem;
}

.inventory-group > header span {
    display: inline-grid;
    place-items: center;
    min-width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--sage-soft);
    color: var(--herb-dark);
    font-size: .78rem;
    font-weight: 800;
}

.inventory-group ul {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inventory-group__empty {
    margin: 0;
    color: var(--ink-soft);
    font-size: .85rem;
}

.inventory-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .55rem .65rem;
    border-left: .22rem solid var(--herb);
    border-radius: .5rem;
    background: var(--surface-strong);
}

.inventory-item[hidden] {
    display: none;
}

.inventory-item--low {
    border-left-color: var(--honey);
}

.inventory-item--out {
    border-left-color: var(--ink-soft);
    opacity: .72;
}

.inventory-item__name {
    display: grid;
    gap: .1rem;
}

.inventory-item__name span {
    color: var(--ink-soft);
    font-size: .74rem;
}

.inventory-item__controls {
    display: flex;
    gap: .35rem;
}

.inventory-item__controls form {
    display: grid;
    grid-template-columns: minmax(7.5rem, 1fr) auto;
    gap: .25rem;
}

.inventory-item__controls label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.inventory-item__controls select {
    min-height: 2rem;
    max-width: 11rem;
    padding: .25rem .4rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: .78rem;
}

.inventory-item__controls button {
    border: 0;
    border-radius: .4rem;
    background: var(--herb-dark);
    color: #fff;
    font-size: .75rem;
}

.inventory-item__form--enhanced {
    grid-template-columns: minmax(7.5rem, 1fr) !important;
}

.inventory-item__form--enhanced button {
    display: none;
}

@media (max-width: 900px) {
    .inventory-add,
    .inventory-groups {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .inventory-add__form {
        grid-template-columns: 1fr;
    }

    .inventory-toolbar,
    .inventory-item,
    .inventory-item__controls {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .inventory-item__controls select {
        width: 100%;
        max-width: none;
    }
}