/* ==========================================================================
   KnowTheSpore — editorial field-guide design system
   Warm paper, high-contrast serif display, hairline rules. Purple + gold are
   accents, not fills. Edibility colors stay semantic (safety). No pill buttons,
   no floating drop-shadow cards, no gradient blobs.
   ========================================================================== */
:root {
    /* Brand accents */
    --spore: #4A2A6E;          /* purple accent — links, rules, wordmark */
    --spore-dark: #2E1A47;
    --spore-soft: #7B5AA6;
    --spore-dust: #EEE7DC;     /* warm neutral panel (icon backings) */
    --gold: #A97C24;           /* deep editorial gold */
    --gold-bright: #C99A3F;
    --tan: #A97C24;            /* alias */
    --brown: #6E4A9E;

    /* Paper + ink */
    --cream: #FAF7F0;          /* warm paper */
    --cream-2: #F2ECDF;        /* panel */
    --paper-edge: #F5F0E6;
    --ink: #26221C;
    --ink-soft: #635A4E;
    --ink-faint: #948B79;
    --line: #E3DBCA;           /* warm hairline */
    --line-strong: #D2C8B2;
    --white: #ffffff;

    --warning: #B42318;
    --warning-bg: #FBECE9;

    /* Edibility (semantic — do not restyle to brand purple) */
    --ed-choice: #2F5A1E;
    --ed-edible: #5A8F3D;
    --ed-caution: #B98900;
    --ed-medicinal: #6B4E9E;
    --ed-inedible: #8A8378;
    --ed-poisonous: #B42318;

    --radius: 3px;
    --radius-sm: 2px;
    --shadow: 0 18px 40px -24px rgba(38, 34, 28, .35);
    --shadow-sm: none;
    --maxw: 1200px;       /* outer page frame (.container) */
    --content: 760px;     /* THE content width. Text, images, tables and headers all
                             share it, so every block lines up on both edges. */
    --measure: 68ch;      /* reading cap for centered brand copy only, never article body */

    --font-head: "Playfair Display", Georgia, serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;

    /* Modular type scale */
    --fs-xs: .74rem;
    --fs-sm: .86rem;
    --fs-base: 1.125rem;  /* editorial body, fixed 18px, single family (Inter) */
    --fs-md: 1.28rem;
    --fs-lg: 1.48rem;
    --fs-xl: 1.82rem;
    --fs-2xl: clamp(2rem, 3vw, 2.45rem);
    --fs-3xl: clamp(2.35rem, 4vw, 3.35rem);
    --lh-tight: 1.06;
    --lh-snug: 1.24;
    --lh-body: 1.66;
    --tracking-caps: .18em;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: var(--lh-body);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--spore); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: var(--fs-3xl); margin: 0 0 .5rem; }
h2 { font-size: var(--fs-2xl); margin: 0 0 .8rem; }
h3 { font-size: var(--fs-lg); margin: 0 0 .5rem; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.75rem); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--white); padding: .5rem 1rem; z-index: 100; }
.highlight { background: linear-gradient(transparent 62%, rgba(169,124,36,.24) 62%); font-weight: 600; }

/* Editorial kicker */
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }

/* ======================= Masthead ======================= */
.site-header { background: var(--cream); border-top: 3px solid var(--spore); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 1.5rem; }
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 44px; width: auto; }
.site-logo:hover { text-decoration: none; }
/* text fallback wordmark (footer) */
.logo-text { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.logo-accent { color: var(--gold); }
.logo-mark { display: none; }

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.nav-link { color: var(--ink); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; padding: .4rem 0; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: .3rem; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px; background: var(--spore); transition: right .22s ease; }
.nav-link:hover, .nav-link.active { color: var(--spore); text-decoration: none; }
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.caret { font-size: .7rem; opacity: .6; }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
    min-width: 250px; background: var(--cream); border: 1px solid var(--line); box-shadow: var(--shadow);
    padding: .5rem; opacity: 0; visibility: hidden; transition: .16s ease; z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-item { display: flex; flex-direction: column; padding: .55rem .75rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.dropdown-item:last-child { border-bottom: 0; }
.dropdown-item:hover { background: var(--paper-edge); text-decoration: none; color: var(--spore); }
.dropdown-item strong { font-weight: 600; font-family: var(--font-head); font-size: 1.02rem; }
.dropdown-item small { color: var(--ink-soft); font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; margin-top: .1rem; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.7rem; cursor: pointer; }
.nav-cta { color: var(--spore); border: 1px solid var(--spore); padding: .5rem 1rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-sm); }
.nav-cta:hover { background: var(--spore); color: var(--cream); text-decoration: none; }

/* ======================= Buttons ======================= */
.btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--spore); color: var(--cream); padding: .75rem 1.4rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--spore); cursor: pointer; transition: background .18s ease; }
.btn:hover { background: var(--spore-dark); border-color: var(--spore-dark); color: var(--cream); text-decoration: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Text link with arrow (editorial "read more") */
.section-link { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--spore); white-space: nowrap; padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
.section-link:hover { text-decoration: none; border-bottom-color: var(--spore); }
.section-link i { transition: transform .2s ease; }
.section-link:hover i { transform: translateX(3px); }

/* ======================= Edibility tags (field-guide legend) ======================= */
.edibility-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.edibility-badge::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--_b, var(--ed-inedible)); flex-shrink: 0; }
.edibility-badge i { display: none; }
.edibility-choice { --_b: var(--ed-choice); }
.edibility-edible { --_b: var(--ed-edible); }
.edibility-caution { --_b: var(--ed-caution); }
.edibility-medicinal { --_b: var(--ed-medicinal); }
.edibility-inedible { --_b: var(--ed-inedible); }
.edibility-poisonous { --_b: var(--ed-poisonous); color: var(--ed-poisonous); }

/* ======================= Safety banners ======================= */
.safety-banner { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.3rem; margin: 1.4rem 0; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--ed-inedible); }
.safety-banner .sb-icon { font-size: 1.5rem; line-height: 1; color: var(--ink-soft); }
.safety-banner .sb-body { flex: 1; }
.safety-banner .sb-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; flex-wrap: wrap; font-family: var(--font-head); font-size: 1.1rem; }
.safety-banner p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.safety-banner.is-danger { border-left-color: var(--ed-poisonous); background: var(--warning-bg); }
.safety-banner.is-danger .sb-icon { color: var(--ed-poisonous); }
.safety-banner.is-choice { border-left-color: var(--ed-choice); }
.safety-banner.is-edible { border-left-color: var(--ed-edible); }
.safety-banner.is-caution { border-left-color: var(--ed-caution); }
.safety-banner.is-medicinal { border-left-color: var(--ed-medicinal); }
.safety-banner-global { display: flex; gap: .9rem; align-items: flex-start; background: var(--warning-bg); border: 1px solid rgba(180,35,24,.22); padding: 1rem 1.2rem; margin-bottom: 1.6rem; }
.safety-banner-global i { color: var(--warning); font-size: 1.3rem; }
.safety-banner-global p { margin: 0; font-size: var(--fs-sm); }

/* ======================= Sections ======================= */
.section { padding: 5rem 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.section--lg { padding: 6.5rem 0; }
.section-alt { background: var(--cream-2); }
.section-dark { background: var(--spore-dark); color: rgba(255,255,255,.82); border-top-color: var(--spore); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .eyebrow { color: var(--gold-bright); }
.section-dark .eyebrow::before { background: var(--gold-bright); }
.section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { margin: 0 0 .7rem; }
.section-head p { color: var(--ink-soft); font-size: var(--fs-md); margin: 0; }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line-strong); flex-wrap: wrap; }
.section-head--row .sh-text { max-width: 48rem; }
.section-head--row h2 { margin: 0 0 .5rem; }
.section-head--row p { color: var(--ink-soft); margin: 0; }

/* ======================= Cards (magazine index) ======================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2.5rem 2rem; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid, .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; } }

.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); transition: border-color .15s ease, box-shadow .2s ease; }
.card:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: 0 4px 16px rgba(38,34,28,.08); }
.card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--line-strong); font-size: 2.4rem; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.045); }
.card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.15rem; }
.card h3 { margin: 0; font-size: var(--fs-lg); transition: color .15s ease; }
.card:hover h3 { color: var(--spore); }
.card .card-sci { font-family: var(--font-head); font-style: italic; color: var(--ink-soft); font-size: var(--fs-sm); }
.card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.55; }
.card .card-meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; }
.card-arrow { display: none; }
.chip { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }

/* ======================= Breadcrumb ======================= */
.breadcrumb { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 1.4rem 0 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--spore); }
.breadcrumb .sep { color: var(--gold); }

/* ======================= Article / profile =======================
   ONE column for every article type. The column IS the reading measure, so
   text, images, tables and the header all share the same left AND right edge.
   Centred inside its .container so the reading column sits balanced between
   the header and footer gutters on all screen widths. */
.article-wrap { max-width: var(--content); margin: 0 auto; padding: 1rem 0 4rem; }
.article-wide { max-width: var(--content); margin: 0 auto; padding: 1rem 0 4rem; }
/* Text fills the column rather than being capped narrower than the media. */
.article-wrap .prose, .article-wrap .article-body p, .article-wrap .article-body ul,
.article-wrap .article-body ol, .article-wide .prose { max-width: none; }
.article-header { max-width: var(--content); margin: 0 auto 1.35rem; }
.article-header h1 { margin-bottom: .55rem; max-width: 100%; }
.article-header .lead { max-width: none; line-height: 1.35; }
.article-sci { font-family: var(--font-head); font-style: italic; color: var(--ink-soft); font-size: 1.15rem; margin-bottom: 1.4rem; }
/* Editorial section spine — each body H2 carries a gold "SECTION 0X" kicker
   above a serif heading and an ink underrule. Gives the article a magazine
   chapter rhythm instead of a flat wall of text. Utility blocks (FAQ) opt out. */
.article-body { counter-reset: kts-sec; }
.article-body h2 { counter-increment: kts-sec; font-size: clamp(1.7rem, 2.3vw, 2.2rem); margin: 3rem 0 1.15rem; padding-bottom: .5rem; border-bottom: 2px solid var(--ink); text-wrap: balance; }
.article-body h2::before { content: "Section " counter(kts-sec, decimal-leading-zero); display: block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
/* FAQ heading keeps its own treatment and stays out of the section count */
.article-body .faq h2 { counter-increment: none; margin-top: 2.6rem; }
.article-body .faq h2::before { content: none; }
.article-body h3 { font-family: var(--font-head); margin: 1.9rem 0 .5rem; padding-left: .8rem; border-left: 3px solid var(--gold); }
.article-body ol { padding-left: 1.3rem; }
.article-body li { margin-bottom: .5rem; }
/* Field-guide bullets: a small gold marker echoing the legend swatch */
.article-body .prose ul { list-style: none; padding-left: 0; }
.article-body .prose ul li { position: relative; padding-left: 1.5rem; }
.article-body .prose ul li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border: 2px solid var(--gold); border-radius: 50%; }
.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.15rem; }
.prose > p { text-wrap: pretty; }
.lead { font-size: var(--fs-md); }
/* Prose inherits body typography: no first-paragraph lead jump, no drop cap */
/* Pull quote — editorial aside, serif italic with a gold rule */
.pullquote { margin: 2.2rem 0; padding: .3rem 0 .3rem 1.5rem; border-left: 3px solid var(--gold); }
.pullquote p { font-family: var(--font-head); font-style: italic; font-size: var(--fs-lg); line-height: 1.4; color: var(--ink); margin: 0; max-width: none; }
.pullquote cite { display: block; margin-top: .7rem; font-family: var(--font-body); font-style: normal; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-soft); }

/* Authority-style article aids: concise, evidence-forward, and reusable */
.evidence-note { margin: 1.7rem 0; padding: 1rem 0 1rem 1.15rem; border-left: 3px solid var(--line-strong); color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.evidence-note p { margin: 0; max-width: none; }
.evidence-note .evidence-label { display: flex; align-items: center; gap: .45rem; margin: 0 0 .35rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); }
.evidence-note .evidence-label i { font-size: 1rem; }

.field-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.8rem 0; }
.field-check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; background: var(--cream); padding: 1rem 1.1rem; }
.field-check i { color: var(--ed-choice); font-size: 1.2rem; margin-top: .1rem; }
.field-check b { display: block; font-family: var(--font-head); font-size: 1.05rem; line-height: 1.2; color: var(--ink); }
.field-check span { display: block; margin-top: .25rem; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 620px) { .field-checklist { grid-template-columns: 1fr; } }

.risk-timeline { margin: 1.8rem 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.timeline-row { display: grid; grid-template-columns: minmax(8.5rem, .38fr) 1fr; gap: 1.2rem; padding: .95rem 0; border-top: 1px solid var(--line); }
.timeline-row:first-child { border-top: 0; }
.timeline-row b { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); }
.timeline-row span { color: var(--ink); font-size: 1rem; line-height: 1.55; }
@media (max-width: 560px) { .timeline-row { grid-template-columns: 1fr; gap: .25rem; } }

/* Inline "read next" chip woven between sections — hairline strip, gold rule,
   not a pill. A quiet nudge to a related guide mid-article. */
.related-chip { display: flex; align-items: center; gap: 1rem; margin: 2.4rem 0; padding: .9rem 1.2rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--cream-2); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.related-chip:hover { border-left-color: var(--spore); text-decoration: none; }
.related-chip .rc-lead { color: var(--gold); font-size: 1.25rem; flex-shrink: 0; }
.related-chip .rc-text { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.related-chip .rc-kicker { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); }
.related-chip .rc-title { font-family: var(--font-head); font-size: var(--fs-md); color: var(--ink); line-height: 1.25; }
.related-chip:hover .rc-title { color: var(--spore); }
.related-chip .rc-arrow { color: var(--ink-faint); font-size: 1.2rem; flex-shrink: 0; transition: transform .15s ease, color .15s ease; }
.related-chip:hover .rc-arrow { color: var(--spore); transform: translateX(3px); }

/* Related guides — end-of-article grid (3 columns, up to 6 cards) */
.related-posts { border-top: 2px solid var(--ink); padding-top: 1.8rem; margin: 3rem 0 1rem; }
.related-posts h2 { font-size: var(--fs-xl); margin: 0 0 1.8rem; }
.related-posts .card-media i { color: var(--line-strong); font-size: 2.6rem; }
.card-kicker { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); }
.profile-hero { margin: 0 0 1.6rem; border: 1px solid var(--line); aspect-ratio: 16/9; overflow: hidden; }
.profile-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Quick facts — field-guide table */
.quick-facts { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 1.4rem 0; margin: 1.8rem 0; max-width: none; }
.quick-facts h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-family: var(--font-body); color: var(--ink-soft); margin: 0 0 1rem; }
.quick-facts dl { display: grid; grid-template-columns: minmax(8.5rem, .34fr) minmax(0, 1fr); gap: 0 1.25rem; margin: 0; }
.quick-facts dt { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-soft); padding: .65rem 0; border-top: 1px solid var(--line); }
.quick-facts dd { margin: 0; font-size: 1rem; line-height: 1.5; padding: .65rem 0; border-top: 1px solid var(--line); min-width: 0; }
.quick-facts dl > dt:first-of-type, .quick-facts dl > dt:first-of-type + dd { border-top: 0; }
.quick-facts dl > div { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(8.5rem, .34fr) minmax(0, 1fr); gap: 1.25rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.quick-facts dl > div:first-child { border-top: 0; }
.quick-facts dl > div dt, .quick-facts dl > div dd { padding: 0; border-top: 0; }
@media (max-width: 560px) {
    .quick-facts dl, .quick-facts dl > div { grid-template-columns: 1fr; gap: .15rem; }
    .quick-facts dd { padding-top: 0; border-top: 0; padding-bottom: .7rem; }
    .quick-facts dl > div dd { padding-bottom: 0; }
}

/* ID feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.8rem; margin: 1.6rem 0; }
@media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card { background: var(--ink); color: var(--cream); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem 1.25rem; }
.feature-card .fc-label { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--gold-bright); margin-bottom: .5rem; display: flex; align-items: center; gap: .55rem; }
.feature-card .fc-label i { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.feature-card p { margin: 0; font-size: var(--fs-sm); color: rgba(250, 247, 240, .82); }
/* Field-marks: a full-width dark band that groups the ID feature cells into one dark block */
.field-marks { background: var(--ink); color: var(--cream); border-radius: var(--radius-sm); padding: 1.5rem 1.9rem 1.8rem; margin: 1.6rem 0 2.2rem; }
.field-marks .fm-eyebrow { display: flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold-bright); margin: 0 0 1.2rem; }
.field-marks .fm-eyebrow i { font-size: 1.1rem; }
.field-marks .feature-grid { margin: 0; gap: 1.3rem 2rem; }
.field-marks .feature-card { background: transparent; border-radius: 0; padding: 0; }
@media (max-width: 560px) { .field-marks { padding: 1.3rem 1.4rem; } }

/* Lookalike callouts */
.lookalike-card { display: flex; gap: 1rem; background: var(--warning-bg); border: 1px solid rgba(180,35,24,.18); border-left: 4px solid var(--warning); padding: 1.1rem 1.3rem; margin-bottom: 1rem; align-items: flex-start; }
.lookalike-card .lc-icon { color: var(--warning); font-size: 1.4rem; }
.lookalike-card h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.lookalike-card p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }

/* Author / reviewer */
.author-box { display: flex; gap: 1rem; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0; margin: 2rem 0; }
.author-box > div { min-width: 0; }
.author-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--spore); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; flex-shrink: 0; }
.author-box .ab-name { font-weight: 600; }
.author-box .ab-cred { font-size: var(--fs-sm); color: var(--ink-soft); }
.reviewer-badge { display: inline-flex; align-items: center; gap: .4rem; color: var(--ed-choice); font-size: var(--fs-sm); font-weight: 600; flex-wrap: wrap; }

/* FAQ */
.faq { margin: 2.4rem 0; }
.faq h2 { border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 1rem 0; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\002B"; color: var(--gold); font-size: 1.4rem; font-family: var(--font-body); }
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-answer { padding: 0 0 1.1rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

/* Cross-link panel */
/* Taxonomy-hub editorial body: readable prose without the article section-counter */
.hub-body h2 { font-size: var(--fs-xl); margin: 2.4rem 0 .8rem; text-wrap: balance; }
.hub-body h3 { margin: 1.6rem 0 .5rem; }
.hub-body ul { max-width: none; margin: 0 0 1.2rem; padding-left: 1.25rem; }
.hub-body li { margin-bottom: .45rem; }
.hub-body .table-wrap { margin: 1.4rem 0; }
.cross-links { border-top: 2px solid var(--ink); padding-top: 1.4rem; margin: 2.6rem 0; }
.cross-links h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-family: var(--font-body); color: var(--ink-soft); margin: 0 0 1rem; }
.cross-links h2::before { content: none; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.link-grid a { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); background: var(--white); transition: border-color .15s ease, background .15s ease; }
.link-grid a:hover { color: var(--spore); text-decoration: none; border-color: var(--spore-soft); background: var(--paper-edge); }
.link-grid i { color: var(--gold); flex-shrink: 0; font-size: 1.1rem; }
/* Read-next chips */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 2.6rem 0 0; }
.chip-label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); margin-right: .3rem; }
.chip-link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink); border: 1px solid var(--line-strong); padding: .38rem .85rem; border-radius: var(--radius-sm); }
.chip-link:hover { color: var(--spore); border-color: var(--spore); text-decoration: none; }
.chip-link i { font-size: .8em; color: var(--gold); }
/* Newsletter band */
.newsletter { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem 2rem; flex-wrap: wrap; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 1.7rem 0; margin: 2.8rem 0 0; }
.newsletter .nl-text { min-width: 0; }
.newsletter h3 { margin: 0 0 .25rem; }
.newsletter p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 50ch; }

/* Comparison table — field-guide ledger: hairline frame, ink-ruled head,
   soft zebra rows. Wrapped in .table-wrap so it scrolls on narrow screens. */
.table-wrap { margin: 2rem 0 2.25rem; overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.table-wrap .compare-table { margin: 0; border: 0; min-width: 680px; }
.compare-table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; border: 1px solid var(--line-strong); }
.compare-table th, .compare-table td { padding: .82rem 1rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; vertical-align: top; }
.compare-table thead th { background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--ink); }
.compare-table tbody tr:nth-child(even) td { background: var(--paper-edge); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table td:first-child { width: 10rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: .06em; }

/* Roundup (/best/) ranked list, flat + hairline, matching the card system */
.roundup-list { list-style: none; margin: 2rem 0; padding: 0; }
.roundup-item { display: grid; grid-template-columns: auto 140px 1fr; gap: 1.2rem; align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--line); }
.roundup-item:first-child { border-top: 2px solid var(--ink); }
.roundup-item .ri-rank { font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; width: 2.2rem; }
.roundup-item .card-media { aspect-ratio: 4/3; margin: 0; }
.roundup-item .ri-body { min-width: 0; }
.roundup-item .ri-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.roundup-item .ri-head h3 { margin: 0; font-size: var(--fs-lg); }
.roundup-item .ri-head h3 a { color: var(--ink); }
.roundup-item .ri-head h3 a:hover { color: var(--spore); }
.roundup-item .ri-tag { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.roundup-item .ri-body p { margin: .5rem 0; color: var(--ink-soft); }
.roundup-item .card-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .6rem; }
@media (max-width: 620px) {
    .roundup-item { grid-template-columns: auto 1fr; }
    .roundup-item .card-media { grid-column: 2; max-width: 140px; }
}

/* In-content editorial figure (brand + article pages): flat, hairline, italic caption.
   Fills its column and sits flush left, so an image never floats out of line with
   the prose above it. Brand pages re-centre it via their own inline block width. */
.content-figure { margin: 2.4rem 0; max-width: none; }
.content-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line-strong); background: var(--cream-2); }
/* Mushroom profiles need no width overrides: full-width, flush-left blocks are
   now the default for every article type (see the Article / profile column above). */
/* Quick-stat strip under the profile title */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 1.6rem; }
.stat-strip .ss-item { background: var(--cream); padding: .85rem 1rem .9rem; display: flex; flex-direction: column; gap: .12rem; }
.stat-strip .ss-item i { font-size: 1.35rem; color: var(--gold); margin-bottom: .25rem; }
.stat-strip .ss-v { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); line-height: 1.15; }
.stat-strip .ss-l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
@media (max-width: 560px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
/* Anchor offset so jumped sections clear the sticky header */
[id^="sec-"] { scroll-margin-top: 92px; }
.content-figure figcaption { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-soft); font-style: italic; margin-top: .6rem; padding-left: .9rem; border-left: 2px solid var(--gold); }
.compare-header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 1.4rem 0; }
.compare-col { text-align: center; }
.compare-vs { font-family: var(--font-head); font-style: italic; color: var(--gold); font-size: 1.4rem; }

/* Recipe */
.recipe-card { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin: 2rem 0 2.8rem; }
.recipe-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line-strong); padding: 0; margin: 0; }
.recipe-meta .rm { padding: .95rem 1.1rem 1rem; border-left: 1px solid var(--line); min-width: 0; }
.recipe-meta .rm:first-child { border-left: 0; }
.recipe-meta .rm b { display: block; font-family: var(--font-head); font-size: 1.42rem; line-height: 1.05; }
.recipe-meta .rm span { font-size: var(--fs-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.recipe-cols { display: grid; grid-template-columns: minmax(14rem, .72fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 4vw, 3rem); margin: 0; padding: 1.55rem 0 1.75rem; align-items: start; }
@media (max-width: 720px) { .recipe-cols { grid-template-columns: 1fr; gap: 1.7rem; } }
@media (max-width: 560px) {
    .recipe-meta { grid-template-columns: 1fr; }
    .recipe-meta .rm { border-left: 0; border-top: 1px solid var(--line); }
    .recipe-meta .rm:first-child { border-top: 0; }
}
/* Both recipe columns share one heading treatment and top rule so neither
   side looks heavier than the other. */
.recipe-cols > div { padding-top: 0; }
.recipe-cols h2 { margin: 0 0 .85rem; padding-bottom: .55rem; border-bottom: 2px solid var(--spore); font-size: var(--fs-lg); }
.ingredients ul { list-style: none; padding: 0; margin: 0; }
.ingredients li { padding: .58rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.5; }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { position: relative; padding-left: 2.9rem; margin-bottom: 1.1rem; font-size: 1rem; line-height: 1.55; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.05rem; font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--gold); line-height: 1; }
.prose-sectioned { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); }
.prose-sectioned h2 { margin: 2.45rem 0 .7rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: clamp(1.45rem, 2.1vw, 1.8rem); line-height: 1.08; }
.prose-sectioned h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose-sectioned h3 { margin-top: 1.7rem; }
.prose-sectioned p { margin-bottom: 1rem; }
.prose-sectioned ul { list-style: none; padding-left: 0; margin: 1.1rem 0 1.35rem; }
.prose-sectioned ul li { position: relative; padding-left: 1.45rem; margin-bottom: .55rem; font-size: 1rem; line-height: 1.55; }
.prose-sectioned ul li::before { content: ""; position: absolute; left: 0; top: .56em; width: 7px; height: 7px; border: 2px solid var(--gold); border-radius: 50%; }
.recipe-meta-row { display: flex; gap: 1rem; font-size: var(--fs-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; }
.recipe-meta-row span { display: inline-flex; align-items: center; gap: .3rem; }
.recipe-meta-row i { color: var(--gold); }

/* ======================= Hub heroes ======================= */
.hub-hero { background: var(--cream-2); border-bottom: 1px solid var(--line); padding: 3.4rem 0 3rem; text-align: center; }
.hub-hero h1 { margin: 0 0 .6rem; }
.hub-hero .lead { font-size: var(--fs-md); color: var(--ink-soft); max-width: var(--measure); margin: 0 auto; }
.edibility-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.4rem; }

.hub-filter { position: sticky; top: 82px; z-index: 20; background: rgba(250,247,240,.94); backdrop-filter: blur(6px); padding: .9rem 0; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.hub-filter .container { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.hub-filter .hf-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-faint); }
.hub-filter .edibility-badge { padding: 0; }

.hub-search { position: relative; max-width: 460px; margin-bottom: 2.5rem; border-bottom: 2px solid var(--ink); }
.hub-search i { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-size: 1.15rem; }
.hub-search input { width: 100%; padding: .7rem .5rem .7rem 2rem; border: 0; background: none; font-size: 1.05rem; font-family: var(--font-head); color: var(--ink); }
.hub-search input:focus { outline: none; }
.hub-search input::placeholder { color: var(--ink-faint); font-style: italic; }

/* Grouped tier header */
.tier-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-bottom: .8rem; margin: 0 0 1.6rem; border-bottom: 2px solid var(--ink); }
.tier-head h2 { margin: 0; font-size: var(--fs-xl); }
.tier-head .th-count { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.tier-head .th-desc { flex-basis: 100%; margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--ink-soft); font-family: var(--font-body); font-weight: 400; }

.tier-block { padding: 0 0 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--line); }
.tier-block .tb-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .3rem; padding-left: 1rem; border-left: 4px solid var(--_c, var(--ink)); }
.tier-block .tb-head h2 { margin: 0; font-size: var(--fs-xl); }
.tier-block .tb-count { margin-left: auto; color: var(--ink-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.tier-block .tb-desc { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0 0 1.3rem; padding-left: 1rem; }

/* ======================= Simple pages ======================= */
.page-body { max-width: var(--content); margin: 0 auto; padding: 2.5rem 0 4rem; }
.page-body h1 { margin-bottom: 1.2rem; }
.page-body h2 { margin: 2rem 0 .8rem; }
/* Callouts — field-guide side notes. Hairline panel with an accent left rule;
   the label sits above the body in tracked small caps. Variants recolor the
   rule + label only. Warning red is a semantic safety signal, never restyled. */
.callout { border: 1px solid var(--line); border-left: 4px solid var(--spore); background: var(--cream-2); padding: 1.05rem 1.35rem; margin: 1.8rem 0; }
.callout .callout-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--spore); }
.callout .callout-label i { font-size: 1.05rem; line-height: 1; }
.callout .callout-body p { margin-bottom: .7rem; }
.callout .callout-body > :last-child { margin-bottom: 0; }
.callout-note { border-left-color: var(--spore); }
.callout-note .callout-label { color: var(--spore); }
.callout-tip { border-left-color: var(--gold); background: var(--paper-edge); }
.callout-tip .callout-label { color: var(--gold); }
.callout-warning, .callout.warn { border-color: rgba(180,35,24,.2); border-left-color: var(--warning); background: var(--warning-bg); }
.callout-warning .callout-label, .callout.warn .callout-label { color: var(--warning); }
.callout-key { border-color: rgba(169,124,36,.3); border-left-color: var(--gold-bright); background: var(--paper-edge); }
.callout-key .callout-label { color: var(--gold); }
.callout-key .callout-body p { font-size: var(--fs-base); }
/* Do / Don't checklist (YES / NO lines) */
.do-dont { margin: 1.7rem 0; }
.do-dont .dd-item { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 .65rem; font-size: var(--fs-base); line-height: 1.55; max-width: none; }
.do-dont .dd-item i { flex: 0 0 auto; font-size: 1.15em; line-height: 1.35; }
.do-dont .dd-yes i { color: var(--ed-edible); }
.do-dont .dd-no i { color: var(--warning); }
/* Stat tiles (STAT value | label) */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.9rem 0; }
.stat-tile { background: var(--cream); padding: 1.1rem 1.25rem; }
.stat-tile b { display: block; font-family: var(--font-head); font-size: var(--fs-xl); color: var(--spore); line-height: 1.05; }
.stat-tile span { display: block; margin-top: .35rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.notfound { text-align: center; padding: 5rem 0; }
.notfound i { font-size: 3rem; color: var(--gold); }

/* ======================= Footer ======================= */
.site-footer { background: var(--spore-dark); color: rgba(255,255,255,.78); border-top: 3px solid var(--gold); margin-top: 4rem; padding: 3rem 0 2rem; }
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: #fff; }
.site-footer .safety-banner-global { background: rgba(180,35,24,.14); border-color: rgba(180,35,24,.4); }
.site-footer .safety-banner-global p { color: rgba(255,255,255,.9); }
.site-footer .safety-banner-global a { color: #ffc9c2; text-decoration: underline; }
.trust-bar { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; padding: 1.2rem 0; margin-bottom: 2rem; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); font-size: var(--fs-sm); letter-spacing: .04em; }
.trust-bar span { display: inline-flex; align-items: center; gap: .5rem; }
.trust-bar i { color: var(--gold-bright); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.8rem 2.2rem; margin-bottom: 2.5rem; align-items: start; }
.footer-brand .logo-text { color: #fff; }
.footer-brand .logo-accent { color: var(--gold-bright); }
.footer-brand p { font-size: var(--fs-sm); max-width: 34ch; margin-top: .7rem; }
.footer-logo { display: inline-flex; align-items: center; }
.footer-col h4 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-xs); color: var(--gold-bright); margin: 0 0 1rem; }
.footer-col a { display: block; padding: .3rem 0; font-size: var(--fs-sm); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.3rem; font-size: var(--fs-xs); color: rgba(255,255,255,.6); letter-spacing: .04em; }
.footer-legal a { color: rgba(255,255,255,.75); }
.footer-legal i { color: var(--warning); }
.footer-legal p { margin: .25rem 0; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }

/* ======================= Homepage: hero ======================= */
.hero { background: var(--cream); border-bottom: 1px solid var(--line); padding: 4.5rem 0; }
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
@media (max-width: 880px) { .hero .container { grid-template-columns: 1fr; gap: 2rem; } }
.hero-badge { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.hero h1 { color: var(--ink); font-size: clamp(2.6rem, 5vw, 4.2rem); max-width: 14ch; margin-bottom: 1.2rem; }
.hero p { color: var(--ink-soft); font-size: var(--fs-md); max-width: 46ch; }
.hero .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-visual { position: relative; aspect-ratio: 4/5; border: 1px solid var(--line); overflow: hidden; background: var(--cream-2); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual .hv-cap { position: absolute; left: 0; bottom: 0; right: 0; padding: 1.4rem 1.2rem .9rem; background: linear-gradient(transparent, rgba(38,34,28,.85)); color: rgba(255,255,255,.9); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-strong); }
.hero-stats .stat b { display: block; font-family: var(--font-head); font-size: 1.9rem; color: var(--ink); }
.hero-stats .stat span { font-size: var(--fs-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 560px) { .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }

/* ======================= Intent grid ======================= */
.intent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .intent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .intent-grid { grid-template-columns: 1fr; } }
.intent-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.8rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intent-card:hover { background: var(--cream-2); text-decoration: none; }
.intent-card .ic-icon { color: var(--gold); font-size: 1.7rem; }
.intent-card h3 { margin: .2rem 0 0; }
.intent-card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); flex: 1; }
.intent-card .ic-link { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--spore); display: inline-flex; align-items: center; gap: .4rem; }
.intent-card .ic-link i { transition: transform .2s ease; }
.intent-card:hover .ic-link i { transform: translateX(3px); }

/* ======================= Edibility ladder ======================= */
.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--line); }
@media (max-width: 860px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
.ladder-item { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem 1.1rem; border-right: 1px solid var(--line); border-top: 3px solid var(--_c); }
.ladder-item:last-child { border-right: 0; }
.ladder-item:hover { background: var(--cream-2); text-decoration: none; }
.ladder-item .l-ico { color: var(--_c); font-size: 1.4rem; }
.ladder-item .l-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.ladder-item .l-count { font-size: var(--fs-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.ladder-bar { display: none; }

/* ======================= Spotlight (feature) ======================= */
.spotlight-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .spotlight-grid { grid-template-columns: 1fr; } }
.spotlight { position: relative; overflow: hidden; min-height: 440px; display: flex; border: 1px solid var(--line); }
.spotlight img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.spotlight:hover img { transform: scale(1.04); }
.spotlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,17,45,.92) 6%, rgba(30,17,45,.35) 55%, transparent 100%); }
.spotlight .sp-body { position: relative; z-index: 2; margin-top: auto; padding: 2.2rem; color: #fff; }
.spotlight .sp-body h3 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.6rem); margin: .5rem 0; }
.spotlight .sp-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold-bright); }
.spotlight .sp-body p { color: rgba(255,255,255,.85); max-width: 44ch; font-size: var(--fs-sm); }
.spotlight .sp-body .edibility-badge { color: #fff; }
.spotlight--sm { min-height: 208px; }
.spotlight--sm .sp-body { padding: 1.5rem; }
.spotlight--sm .sp-body h3 { font-size: 1.5rem; }
.spotlight-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1.5rem; }

/* ======================= VS comparison card ======================= */
.vs-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.8rem 1.4rem; border: 1px solid var(--line); background: var(--white); }
.vs-card:hover { border-color: var(--line-strong); text-decoration: none; }
.vs-thumbs { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.vs-thumbs img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--cream); box-shadow: 0 0 0 1px var(--line); }
.vs-thumbs img:first-child { margin-right: -16px; }
.vs-thumbs img:last-child { margin-left: -16px; }
.vs-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-style: italic; color: var(--gold); }
.vs-card h3 { margin: 0 0 .7rem; font-size: 1.25rem; }
.vs-card:hover h3 { color: var(--spore); }
.vs-card .vs-meta { display: flex; gap: 1rem; align-items: center; margin-bottom: .7rem; flex-wrap: wrap; justify-content: center; }
.vs-card p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }

/* ======================= Guide banner / list ======================= */
.guide-banner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--spore); color: #fff; padding: 2.4rem 2.6rem; }
.guide-banner:hover { background: var(--spore-dark); text-decoration: none; }
.guide-banner .gb-icon { flex-shrink: 0; font-size: 2.4rem; color: var(--gold-bright); }
.guide-banner h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: .4rem 0; }
.guide-banner p { color: rgba(255,255,255,.82); margin: 0; }
.guide-banner .gb-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--gold-bright); }
.guide-banner .gb-arrow { font-size: 1.6rem; color: rgba(255,255,255,.7); flex-shrink: 0; }
.guide-list-item { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.guide-list-item:hover { text-decoration: none; }
.guide-list-item:hover h4 { color: var(--spore); }
.guide-list-item .gli-icon, .guide-icon { flex-shrink: 0; font-size: 1.5rem; color: var(--gold); }
.guide-list-item h4 { margin: 0 0 .2rem; font-size: 1.2rem; transition: color .15s ease; }
.guide-list-item p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }

/* ======================= Trust split ======================= */
.trust-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
@media (max-width: 860px) { .trust-split { grid-template-columns: 1fr; gap: 2rem; } }
.trust-split h2 { margin: .4rem 0 1rem; }
.trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
@media (max-width: 480px) { .trust-cards { grid-template-columns: 1fr; } }
.trust-cards .tc { padding: 1.4rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.trust-cards .tc i { font-size: 1.6rem; color: var(--gold); margin-bottom: .6rem; display: block; }
.trust-cards .tc h4 { margin: 0 0 .3rem; font-size: 1.1rem; }
.trust-cards .tc p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }

/* ======================= Experts band ======================= */
.expert-band .eyebrow { color: var(--gold-bright); }
.expert-card { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.6rem; border: 1px solid rgba(255,255,255,.16); }
.expert-card:hover { background: rgba(255,255,255,.05); text-decoration: none; }
.expert-card .ec-avatar { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; background: var(--gold); color: var(--spore-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; }
.expert-card h3 { color: #fff; margin: 0 0 .15rem; font-size: 1.2rem; }
.expert-card .ec-role { color: var(--gold-bright); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.expert-card p { color: rgba(255,255,255,.72); font-size: var(--fs-sm); margin: 0; }

/* ======================= CTA band ======================= */
.cta-band { background: var(--spore); color: #fff; padding: 3.5rem 2.5rem; text-align: center; margin-left: calc(-1 * clamp(1rem, 3vw, 1.75rem)); margin-right: calc(-1 * clamp(1rem, 3vw, 1.75rem)); }
.cta-band h2 { color: #fff; margin: 0 0 .7rem; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 50ch; margin: 0 auto 1.8rem; }
.cta-band .btn { background: var(--gold); border-color: var(--gold); color: var(--spore-dark); }
.cta-band .btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.cta-band .nav-cta { color: #fff; border-color: rgba(255,255,255,.4); }
.cta-band .nav-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--spore-dark); text-decoration: none; }

/* ======================= Responsive nav ======================= */
@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .site-nav { position: fixed; inset: 82px 0 auto 0; background: var(--cream); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 1rem 1.75rem 1.5rem; gap: .2rem; display: none; max-height: calc(100vh - 82px); overflow-y: auto; }
    body.nav-open .site-nav { display: flex; }
    .nav-link { padding: .8rem 0; border-bottom: 1px solid var(--line); }
    .nav-link::after { display: none; }
    .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; display: none; }
    .nav-dropdown.open .nav-dropdown-menu { display: block; }
    .nav-cta { text-align: center; justify-content: center; margin-top: .8rem; }
    .recipe-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Round 3: edibility icon-chips, stronger hero, richer brand pages
   ============================================================ */

/* --- Edibility tag = color chip WITH illustrative icon + label --- */
.edibility-badge::before { display: none; }
.edibility-badge i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 3px; background: color-mix(in srgb, var(--_b) 16%, #fff); color: var(--_b); font-size: .85rem; }
.edibility-poisonous i { background: color-mix(in srgb, var(--ed-poisonous) 18%, #fff); }
.spotlight .edibility-badge i, .section-dark .edibility-badge i { background: rgba(255,255,255,.16); }

/* --- Stronger hero --- */
.hero-trust { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.hero-trust .ht { display: flex; align-items: flex-start; gap: .65rem; flex: 1 1 13rem; }
.hero-trust .ht i { color: var(--gold); font-size: 1.4rem; line-height: 1; margin-top: .1rem; }
.hero-trust .ht b { display: block; font-family: var(--font-head); font-size: 1.02rem; line-height: 1.2; }
.hero-trust .ht span { font-size: var(--fs-xs); color: var(--ink-soft); }
.hero-visual { position: relative; }
.hero-legend { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.2rem 1rem; background: linear-gradient(transparent, rgba(30,17,45,.9)); color: #fff; }
.hero-legend .hl-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: rgba(255,255,255,.8); margin-bottom: .55rem; }
.hero-legend .hl-scale { display: flex; gap: 3px; margin-bottom: .7rem; }
.hero-legend .hl-seg { flex: 1; height: 7px; border-radius: 2px; }
.hero-legend .hl-keys { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.hero-legend .hl-key { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em; }
.hero-legend .hl-key i { font-size: 1rem; }
.hero-legend .hl-key.k-choice i { color: #86c05a; }
.hero-legend .hl-key.k-caution i { color: #f0c04a; }
.hero-legend .hl-key.k-danger i { color: #ff8a7a; }
@media (max-width: 880px) { .hero-legend { position: static; background: var(--spore-dark); } }

/* --- Brand / editorial pages --- */
.brand-hero { background: var(--cream-2); border-bottom: 1px solid var(--line); padding: 3.6rem 0 3rem; text-align: center; }
.brand-hero .eyebrow { justify-content: center; }
.brand-hero h1 { margin: 0 0 .8rem; }
.brand-hero p { color: var(--ink-soft); font-size: var(--fs-md); max-width: 60ch; margin: 0 auto; }
.prose-narrow { max-width: var(--measure); }
.prose-narrow p { margin-bottom: 1.15rem; }

/* Numbered process steps */
.process { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.process.two { grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 680px) { .process.two { grid-template-columns: 1fr; } }
.process li { position: relative; padding-left: 3.4rem; }
.process li::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -.2rem; font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--gold); }
.process li h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.process li p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }

/* Big stat row */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 1.8rem 0; }
@media (max-width: 620px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
.stat-row .sr b { display: block; font-family: var(--font-head); font-size: 2.4rem; line-height: 1; }
.stat-row .sr span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }

/* Source cards */
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .source-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .source-grid { grid-template-columns: 1fr; } }
.source-grid a { display: flex; align-items: flex-start; gap: .7rem; padding: 1.2rem; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.source-grid a:hover { background: var(--cream-2); text-decoration: none; }
.source-grid i { color: var(--gold); font-size: 1.3rem; }
.source-grid b { font-family: var(--font-head); font-size: 1.05rem; display: block; }
.source-grid span { font-size: var(--fs-xs); color: var(--ink-soft); }

/* Principle list with check icons */
.principles { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.principles li { display: flex; gap: .8rem; align-items: flex-start; }
.principles li i { color: var(--ed-choice); font-size: 1.3rem; margin-top: .1rem; flex-shrink: 0; }
.principles li b { font-family: var(--font-head); }

/* ============================================================
   Round 4: content blocks for brand pages
   ============================================================ */
/* Two-panel ledger: "is / is not", "can / cannot", "do / never" */
.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); margin: 1.6rem 0; }
.ledger > div { padding: 1.4rem 1.6rem; }
.ledger > div:first-child { border-right: 1px solid var(--line); }
.ledger h4 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.1rem; }
.ledger .yes h4 i { color: var(--ed-choice); }
.ledger .no h4 i { color: var(--warning); }
.ledger ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.ledger li { position: relative; padding: .4rem 0 .4rem 1.5rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.ledger .yes li::before { content: "\2713"; color: var(--ed-choice); position: absolute; left: 0; font-weight: 700; }
.ledger .no li::before { content: "\2715"; color: var(--warning); position: absolute; left: 0; font-weight: 700; }
@media (max-width: 620px) { .ledger { grid-template-columns: 1fr; } .ledger > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); } }

/* Checklist / symptom list (reader acts on each line) */
.checklist { list-style: none; padding: 0; margin: 1.3rem 0; }
.checklist li { position: relative; padding: .6rem 0 .6rem 2rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: .55rem; color: var(--gold); font-weight: 700; }
.checklist.warn li::before { content: "\21"; color: var(--warning); background: var(--warning-bg); width: 1.2rem; height: 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; top: .5rem; font-size: .8rem; }
.checklist.warn li { padding-left: 2.2rem; }

/* ======================= Reading progress bar ======================= */
.reading-progress { position: fixed; top: 82px; left: 0; width: 100%; height: 3px; z-index: 49; pointer-events: none; background: transparent; }
.reading-progress .rp-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--spore)); transition: width 60ms linear; }

/* ======================= Table of Contents — premium ======================= */
.toc {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--paper-edge) 0%, var(--cream) 100%);
  padding: 0;
  margin: 0 0 2.4rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.02);
}
.toc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--gold), var(--spore));
  border-radius: 10px 0 0 10px;
}
.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem 1.1rem 1.8rem;
  cursor: pointer;
  user-select: none;
  border: 0;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
  transition: background .15s ease;
}
.toc-header:hover { background: rgba(169,124,36,.05); }
.toc h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  margin: 0;
  border: 0;
  padding: 0;
}
.toc h2::before { content: none; }
.toc h2 i { font-size: 1.1rem; opacity: .85; }
.toc-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  font-size: .8rem;
  flex-shrink: 0;
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.toc-toggle:hover { background: var(--cream); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.toc.is-collapsed .toc-toggle { transform: rotate(180deg); }
.toc-body {
  padding: .2rem 1.8rem 1.4rem;
  border-top: 1px solid var(--line);
  animation: tocSlideIn .2s ease-out;
}
@keyframes tocSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.toc.is-collapsed .toc-body { display: none; }
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 2.2rem;
}
.toc li {
  counter-increment: toc;
  margin: 0;
  break-inside: avoid;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.toc li a {
  display: block;
  padding: .45rem .6rem .45rem 0;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease, padding-left .15s ease;
  text-decoration: none;
}
.toc li a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--gold);
  font-weight: 700;
  margin-right: .6rem;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  opacity: .7;
  transition: opacity .15s ease;
}
.toc li a:hover {
  color: var(--spore);
  padding-left: .3rem;
}
.toc li a:hover::before { opacity: 1; }
.toc li:not(:last-child) a { border-bottom-color: var(--line); }
.toc li.is-active > a {
  color: var(--spore);
  font-weight: 600;
  padding-left: .3rem;
  border-bottom-color: rgba(169,124,36,.2);
}
.toc li.is-active > a::before { opacity: 1; color: var(--spore); }
@media (max-width: 560px) { .toc ol { columns: 1; } .toc-body { padding-left: 1.4rem; padding-right: 1.4rem; } }

/* ======================= Sources / references ======================= */
.sources-section { margin: 3rem 0 0; padding: 2rem 0 0; border-top: 1px solid var(--line); }
.sources-section h2 { font-size: var(--fs-lg); margin: 0 0 1.2rem; }
.sources-section h2::before { content: none; }
.source-list {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: src;
}
.source-list li {
  counter-increment: src;
  position: relative;
  padding: .7rem 0 .7rem 2.4rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.source-list li::before {
  content: counter(src);
  position: absolute;
  left: 0; top: .7rem;
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.source-list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.source-list a:hover { color: var(--spore); }
.source-note { display: block; color: var(--ink-soft); font-size: .82rem; margin-top: .15rem; }
@media (max-width: 560px) { .source-list li { padding-left: 2rem; } .source-list li::before { width: 1.3rem; height: 1.3rem; font-size: .65rem; } }

/* ======================= Related reading — image cards ======================= */
.related-posts { border-top: 2px solid var(--ink); padding-top: 1.8rem; margin: 3rem 0 1rem; }
.related-posts h2 { font-size: var(--fs-xl); margin: 0 0 1.8rem; }
.related-posts h2::before { content: none; }
.related-posts .card-media i { color: var(--line-strong); font-size: 2.6rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 760px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } }
.related-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); overflow: hidden; transition: border-color .15s ease; }
.related-card:hover { border-color: var(--line-strong); text-decoration: none; }
.related-card .rc-media { aspect-ratio: 16/9; overflow: hidden; background: var(--cream-2); display: flex; align-items: center; justify-content: center; }
.related-card .rc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.related-card:hover .rc-media img { transform: scale(1.04); }
.related-card .rc-media i { color: var(--line-strong); font-size: 2rem; }
.related-card .rc-body { padding: 1rem 1.2rem 1.15rem; display: flex; flex-direction: column; gap: .35rem; }
.related-card .rc-kicker { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--gold); }
.related-card h3 { margin: 0; font-size: 1.1rem; line-height: var(--lh-snug); transition: color .15s ease; }
.related-card:hover h3 { color: var(--spore); }
.related-card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }

/* ======================= Homepage new sections ======================= */
.section-accent { background: var(--spore); color: rgba(255,255,255,.88); border-top-color: var(--spore); }
.section-accent h2, .section-accent h3, .section-accent h4 { color: #fff; }
.section-accent .eyebrow { color: var(--gold-bright); }
.section-accent .eyebrow::before { background: var(--gold-bright); }
.section-accent a { color: rgba(255,255,255,.9); }

.newsletter-band { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; border: 2px solid var(--ink); padding: 2.4rem 2.8rem; }
.newsletter-band h3 { margin: 0 0 .3rem; }
.newsletter-band p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 48ch; }
.newsletter-band .nl-form { display: flex; gap: .6rem; }
.newsletter-band input[type="email"] { padding: .7rem 1rem; border: 1px solid var(--line-strong); background: var(--white); font-family: var(--font-body); font-size: var(--fs-sm); min-width: 240px; }
.newsletter-band input[type="email"]:focus { outline: 2px solid var(--spore); border-color: var(--spore); }
@media (max-width: 680px) { .newsletter-band { grid-template-columns: 1fr; } .newsletter-band .nl-form { flex-direction: column; } .newsletter-band input[type="email"] { min-width: 0; } }

.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.stat-band .sb-item { padding: 2rem 1.5rem; border-right: 1px solid var(--line); text-align: center; }
.stat-band .sb-item:last-child { border-right: 0; }
.stat-band .sb-num { display: block; font-family: var(--font-head); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; color: var(--spore); line-height: 1; }
.stat-band .sb-label { display: block; margin-top: .5rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
@media (max-width: 560px) { .stat-band { grid-template-columns: repeat(2, 1fr); } .stat-band .sb-item { border-bottom: 1px solid var(--line); } }

.browse-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--line); }
.browse-strip a { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.6rem 1rem; border-right: 1px solid var(--line); text-align: center; transition: background .15s ease; }
.browse-strip a:last-child { border-right: 0; }
.browse-strip a:hover { background: var(--cream-2); text-decoration: none; }
.browse-strip a i { font-size: 1.8rem; color: var(--gold); }
.browse-strip a span { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.browse-strip a small { font-size: var(--fs-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }