:root {
    --bg: #faf6ee;
    --bg-alt: #f1e8d8;
    --ink: #2b2016;
    --ink-soft: #5b4d3c;
    --accent: #006aa7;
    --accent-warm: #b5651d;
    --gold: #fecc02;
    --card-bg: #ffffff;
    --border: #e2d5bc;
    --shadow: 0 6px 20px rgba(43, 32, 22, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1c1712;
        --bg-alt: #241d16;
        --ink: #f2e9d8;
        --ink-soft: #cabca2;
        --accent: #5eb3e8;
        --accent-warm: #e2985a;
        --gold: #fecc02;
        --card-bg: #262019;
        --border: #3a2f22;
        --shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Iowan Old Style", "Georgia", "Charter", serif;
    line-height: 1.6;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 780px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-nav a {
    text-decoration: none;
    color: var(--ink-soft);
}

.site-nav .brand {
    color: var(--ink);
    font-weight: 700;
    font-size: 1.05rem;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.95rem;
}

.lang-switch {
    display: flex;
    gap: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem;
}

.lang-btn {
    all: unset;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    transition: all 0.15s ease;
}

.lang-btn:hover {
    color: var(--ink);
}

.lang-btn.active {
    background: var(--accent-warm);
    color: #fff;
}

.site-nav-links a {
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.site-nav-links a:hover {
    color: var(--ink);
}

.site-nav-links a[aria-current="page"] {
    color: var(--accent-warm);
    border-bottom-color: var(--accent-warm);
    font-weight: 600;
}

main {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
}

.hero {
    text-align: center;
    padding: 4.5rem 0 2.5rem;
}

.hero-sub {
    padding: 3rem 0 2rem;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    color: var(--accent-warm);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 1rem;
    line-height: 1.15;
}

.subtitle {
    color: var(--ink-soft);
    font-size: 1.1rem;
    max-width: 56ch;
    margin: 0 auto;
}

section {
    margin: 3rem 0;
}

section h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
    padding-bottom: 0.2rem;
    margin-bottom: 0.75rem;
}

.section-lede {
    color: var(--ink-soft);
    margin-top: 0;
    font-size: 0.95rem;
}

.intro p {
    font-size: 1.15rem;
}

.origins p,
.journey p {
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
}

.origins p:last-child,
.journey p:last-child {
    margin-bottom: 0;
}

.timeline {
    background: var(--bg-alt);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--border);
}

.timeline-track {
    display: flex;
    overflow-x: auto;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--border);
}

.timeline-dot {
    all: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.timeline-dot:hover {
    background: rgba(0, 106, 167, 0.08);
}

.timeline-dot .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.15s ease, transform 0.15s ease;
}

.timeline-dot .year {
    font-size: 0.8rem;
    color: var(--ink-soft);
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.timeline-dot.active .dot {
    background: var(--accent-warm);
    transform: scale(1.3);
}

.timeline-dot.active .year {
    color: var(--ink);
    font-weight: 700;
}

.timeline-detail h3 {
    margin: 0 0 0.5rem;
    color: var(--accent-warm);
}

.timeline-detail p {
    margin: 0;
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
}

.card h3 {
    margin: 0 0 0.15rem;
}

.card .tag {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--accent);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
}

.card p:not(.tag) {
    margin: 0;
    color: var(--ink-soft);
}

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.steps li {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
}

.steps h3 {
    margin: 0 0 0.4rem;
    color: var(--accent-warm);
    font-size: 1.05rem;
}

.steps p {
    margin: 0;
    color: var(--ink-soft);
}

.steps p a,
.link-list a {
    color: var(--accent);
}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.link-list li {
    color: var(--ink-soft);
}

.link-list a {
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.filter-btn {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover {
    border-color: var(--accent-warm);
}

.filter-btn.active {
    background: var(--accent-warm);
    border-color: var(--accent-warm);
    color: #fff;
    font-weight: 600;
}

.variety-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

    /* Single column: no left/right neighbour to swap with. */
    .variety-card {
        order: 0;
    }
}

.variety-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.variety-head h3 {
    margin: 0;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.pill {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pill.waxy {
    background: rgba(0, 106, 167, 0.15);
    color: var(--accent);
}

.pill.floury {
    background: rgba(181, 101, 29, 0.18);
    color: var(--accent-warm);
}

.pill.allpurpose {
    background: rgba(254, 204, 2, 0.25);
    color: #7a5b00;
}

@media (prefers-color-scheme: dark) {
    .pill.allpurpose {
        color: var(--gold);
    }
}

.pill.boiled {
    background: rgba(0, 150, 110, 0.16);
    color: #0a7a58;
}

.pill.mashed {
    background: rgba(142, 68, 173, 0.16);
    color: #8e44ad;
}

.pill.fried {
    background: rgba(214, 69, 44, 0.16);
    color: #c0392b;
}

.pill.baked {
    background: rgba(120, 85, 40, 0.2);
    color: #7a5230;
}

@media (prefers-color-scheme: dark) {
    .pill.boiled {
        color: #4fd8ac;
    }

    .pill.mashed {
        color: #d29fe8;
    }

    .pill.fried {
        color: #ef8b76;
    }

    .pill.baked {
        color: #d4b585;
    }
}

footer {
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.85rem;
    margin-top: 4rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

footer p {
    margin: 0.35rem 0;
}

footer a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* --- Expandable blurbs (varieties + shapes grids, timeline detail) --- */

.variety-card {
    position: relative;
    overflow: hidden;
    /* Per-card flow position. Normally the source index; when a right-column
       card expands, it swaps with its left neighbour so the neighbour is
       pushed to the row below instead of the expanded card dropping down. */
    order: var(--card-order, 0);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.variety-card.expanded {
    grid-column: 1 / -1;
    border-color: var(--accent-warm);
    box-shadow: 0 12px 34px rgba(43, 32, 22, 0.16);
}

@media (prefers-color-scheme: dark) {
    .variety-card.expanded {
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    }
}

.card-title {
    margin: 0;
}

.card-toggle-btn {
    all: unset;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s ease;
}

.card-toggle-btn:hover {
    color: var(--accent-warm);
}

/* Stretch the click target across the whole summary area of the card. */
.card-toggle-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-toggle-btn:focus-visible::after {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
    border-radius: 12px;
}

.variety-card .tag {
    margin: 0 0 0.4rem;
}

.card-notes {
    margin: 0;
}

/* The expanded content sits above the stretched click target so its text
   stays selectable and any links inside remain clickable. The hint stays
   below it, so clicking the hint still counts as a click on the card. */
.card-extra {
    position: relative;
    z-index: 2;
}

.card-toggle-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
}

.card-toggle {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
}

.card-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.chevron {
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.expanded .chevron {
    transform: rotate(225deg);
}

/* Animate open from zero height; nearby blurbs are pushed along as it grows. */
.card-extra {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}

.expanded .card-extra {
    grid-template-rows: 1fr;
}

.card-extra-inner {
    overflow: hidden;
    min-height: 0;
}

.card-extra-body {
    border-top: 1px solid var(--border);
    margin-top: 1.1rem;
    padding-top: 1.1rem;
}

.card-detail {
    margin: 0 0 1rem;
}

.card .card-extra .card-detail {
    color: var(--ink);
}

.card-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
    gap: 0.8rem;
    margin-top: 1rem;
}

.card-figures:empty {
    display: none;
}

.card-detail:last-child {
    margin-bottom: 0;
}

.card-figure {
    margin: 0;
    text-align: center;
}

/* Show the whole image, scaled to fit the column and capped in height,
   keeping its own aspect ratio — no cropping or stretching. */
.card-figure img {
    display: inline-block;
    max-width: 100%;
    max-height: 360px;
    width: auto;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.card-figure img[hidden] {
    display: none;
}

.timeline-detail .card-extra-body {
    border-top-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
    .card-extra,
    .chevron,
    .variety-card {
        transition: none;
    }
}