/* herbalmind.bar — light constructivism.
   The cover's palette and grammar (heavy grotesque, flat slabs, a slanted red
   stripe, discs as cups seen from above), set on paper instead of black. Black
   is kept for type and rules only. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #F4EBD9;       /* the cover's cream */
  --paper-hi: #FBF7EF;    /* lighter sheet for reading panels */
  --paper-lo: #E9DCC0;    /* darker cream for bands */
  --ink: #15120E;         /* the cover's black, for type and rules */
  --ink-2: #4B4337;
  --ink-3: #6E6455;
  --red: #D6281E;
  --red-ink: #B21F16;     /* red dark enough for small text on paper */
  --ochre: #E9A521;
  --blue: #1E56A0;
  --blue-ink: #1A4C8E;

  --display: 'Archivo', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1200px;
  --measure: 40rem;
  --gutter: clamp(16px, 4vw, 40px);
  --rule: 3px solid var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  font-stretch: 100%;
  font-kerning: normal;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--blue-ink); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--red-ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ─── type ─────────────────────────────────────────────────────────────── */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 850;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 6vw, 4.5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); text-transform: uppercase; margin-top: 1.6em; }
h3 { font-size: 1.25rem; font-stretch: 105%; font-weight: 750; line-height: 1.2; margin-top: 1.4em; }

p { margin: 0 0 1em; }
.lead { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.5; color: var(--ink-2); }
.small { font-size: .9rem; color: var(--ink-3); }

/* the kicker: a red label over a heading, like a poster's slug line */
.kicker {
  display: inline-flex; align-items: flex-start; gap: .55em;
  font-family: var(--display); font-stretch: 118%; font-weight: 800;
  font-size: .8rem; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-ink); margin: 0 0 .9rem;
}
/* the dot sits on the first line, not between two, and keeps its shape
   when the label wraps on a narrow screen */
.kicker::before {
  content: ""; flex: none; margin-top: calc((1.6em - .85em) / 2);
  width: .85em; height: .85em; border-radius: 50%;
  background: var(--red); box-shadow: inset 0 0 0 .17em var(--red), inset 0 0 0 .26em var(--paper);
}

/* ─── header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--display); font-weight: 900; font-stretch: 125%;
  font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand svg { width: 28px; height: 28px; flex: none; }

.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a {
  font-family: var(--display); font-weight: 700; font-stretch: 110%;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: .35rem 0;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--ochre); color: var(--ink); }
.nav a[aria-current] { border-bottom-color: var(--red); }

.nav-toggle {
  display: none; border: var(--rule); background: var(--paper-hi);
  width: 44px; height: 44px; padding: 0; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { margin: auto; width: 22px; height: 22px; }

@media (max-width: 920px) {
  .nav-toggle { display: grid; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: var(--rule);
    padding: .5rem var(--gutter) 1rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--paper-lo); font-size: .95rem; }
  .nav .btn { margin-top: .8rem; text-align: center; justify-content: center; }
}

/* ─── buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; line-height: 1.1;
  padding: .95em 1.4em; border: var(--rule);
  background: var(--ochre); color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost { background: var(--paper-hi); }
.btn.small { font-size: .78rem; padding: .7em 1em; box-shadow: 3px 3px 0 var(--ink); }
.nav .btn { color: var(--ink); border-bottom: var(--rule); padding: .7em 1em; font-size: .78rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: center; }

/* ─── hero ─────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; border-bottom: var(--rule); }
/* the ochre slab behind the cover, and on it the cover's red stripe. The stripe
   is painted inside the slab, so it starts exactly at the slab's slanted edge at
   any width; 175deg tilts it 5deg up to the right, 57.9% puts it where the cover
   stripe meets it */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(175deg, transparent 57.9%, var(--red) calc(57.9% + .6px),
                    var(--red) calc(57.9% + 16px), transparent calc(57.9% + 16.6px)),
    var(--ochre);
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 48% 100%);
}
.hero::after {            /* on narrow screens the stripe runs edge to edge instead */
  content: ""; position: absolute; left: -5%; right: -5%; top: 64%; height: 16px;
  background: var(--red); transform: rotate(-5deg); transform-origin: left;
  display: none;
}
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 6rem);
}
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.9rem); font-weight: 900; font-stretch: 112%; line-height: .95; margin-bottom: .35em; }
.hero .subtitle {
  font-family: var(--display); font-weight: 700; font-stretch: 104%;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.35; margin: 0 0 1.2rem;
}
.hero .lead { max-width: 36rem; margin-bottom: 1.8rem; }
.hero .facts { margin-top: 1.4rem; font-size: .9rem; color: var(--ink-2); }

.cover {
  position: relative; justify-self: center; width: min(100%, 420px); margin: 0;
  border: var(--rule); box-shadow: 12px 12px 0 var(--ink);
  background: var(--ink); transform: rotate(2deg);
}
.cover img { width: 100%; aspect-ratio: 2 / 3; }
.cover svg.anim { position: absolute; left: 0; width: 100%; pointer-events: none; }
/* the pause button sits on the cover's lower-right corner like a seal, half
   off the cover: clear of the imprint, and always visible */
.cover-toggle {
  position: absolute; right: -15px; bottom: -15px; z-index: 2;
  width: 34px; height: 34px; border: 2px solid var(--paper); border-radius: 50%;
  background: var(--ink); color: var(--paper); cursor: pointer; display: grid; place-items: center;
}
.cover-toggle svg { width: 13px; height: 13px; }

@media (max-width: 820px) {
  .hero::before { background: var(--ochre); clip-path: polygon(0 66%, 100% 54%, 100% 100%, 0 100%); }
  .hero::after { display: block; }
  .hero .wrap { grid-template-columns: 1fr; }
  .cover { width: min(78%, 340px); transform: rotate(1.5deg); }
}
/* phones: the widest title word ("BEVERAGES") and the brand line must fit a
   390px screen with its gutters and the menu button */
@media (max-width: 480px) {
  .hero h1 { font-size: 9.2vw; }
  .brand { font-size: .86rem; letter-spacing: 0; gap: .5rem; }
  .brand svg { width: 24px; height: 24px; }
}

/* ─── sections ─────────────────────────────────────────────────────────── */

.section { padding: clamp(3rem, 7vw, 6rem) 0; position: relative; }
.section + .section { border-top: var(--rule); }
.section.band { background: var(--paper-lo); }
.section.sheet { background: var(--paper-hi); }
.section > .wrap > h2:first-child, .section .kicker + h2 { margin-top: 0; }
.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head p { color: var(--ink-2); }

.grid { display: grid; gap: 1.5rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* fact tiles: one big figure, one sentence, one link */
.fact {
  position: relative; background: var(--paper-hi); border: var(--rule);
  padding: 1.4rem 1.4rem 1.2rem; display: flex; flex-direction: column;
}
.fact .figure {
  font-family: var(--display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; margin-bottom: .6rem;
}
.fact:nth-child(4n+1) .figure { color: var(--red); }
.fact:nth-child(4n+2) .figure { color: var(--blue); }
.fact:nth-child(4n+3) .figure { color: var(--ochre); -webkit-text-stroke: 1px var(--ink); }
.fact:nth-child(4n+4) .figure { color: var(--ink); }
.fact p { margin-bottom: 1rem; }
.fact a.more { margin-top: auto; font-weight: 700; font-size: .95rem; }

/* cards for chapters and drinks */
.card {
  display: flex; flex-direction: column; gap: .4rem;
  background: var(--paper-hi); border: var(--rule); padding: 1.2rem 1.3rem 1.3rem;
  color: var(--ink); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.card:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.card .num {
  font-family: var(--display); font-weight: 900; font-stretch: 125%;
  font-size: .85rem; letter-spacing: .1em; color: var(--red-ink);
}
.card .title { font-family: var(--display); font-weight: 800; font-stretch: 106%; font-size: 1.2rem; line-height: 1.2; }
.card .meta { font-size: .95rem; color: var(--ink-2); }
.card .tag { margin-top: auto; padding-top: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

.badge {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: .25em .55em; border: 2px solid var(--ink);
  background: var(--ochre); color: var(--ink); vertical-align: middle;
}
.badge.free { background: var(--red); color: var(--paper-hi); border-color: var(--red); }
.badge.blue { background: var(--blue); color: var(--paper-hi); border-color: var(--blue); }
.badge.plain { background: transparent; }

/* group colours: everyday — ochre, cold season — blue, course — red */
.g-everyday { --g: var(--ochre); }
.g-cold { --g: var(--blue); }
.g-course { --g: var(--red); }

.dot {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%; flex: none;
  background: var(--g, var(--ink)); vertical-align: -.12em;
  box-shadow: inset 0 0 0 .2em var(--g, var(--ink)), inset 0 0 0 .3em var(--paper-hi);
}

/* ─── the 28-disc map of drinks ───────────────────────────────────────── */

.disc-map { max-width: 760px; margin: 0 auto 1.5rem; }
.disc-map svg { width: 100%; overflow: visible; }
.disc-map .band { fill: var(--blue); }
.disc-map a .disc { transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.disc-map a:hover .disc, .disc-map a:focus-visible .disc { transform: scale(1.14); }
.disc-map a:focus { outline: none; }
.disc-map a:focus-visible .ring { stroke: var(--ink); }
.disc-map text { font-family: var(--display); font-weight: 800; font-size: 22px; fill: var(--ink); pointer-events: none; }
.disc-caption { text-align: center; min-height: 1.6em; font-weight: 700; font-family: var(--display); font-stretch: 106%; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.6rem; font-size: .95rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: .5rem; }

/* ─── reading pages ───────────────────────────────────────────────────── */

.page-head { border-bottom: var(--rule); position: relative; overflow: hidden; }
.page-head .wrap { position: relative; z-index: 1; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-head::after {
  content: ""; position: absolute; right: -10%; top: 0; bottom: 0; width: 44%;
  background: var(--g, var(--ochre)); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  opacity: .9;
}
.page-head h1 { max-width: 15em; font-size: clamp(1.9rem, 5.4vw, 4.2rem); hyphens: manual; }
.page-head .lead { max-width: 38rem; margin-top: 1rem; }
.page-head.plain::after { display: none; }
@media (max-width: 720px) { .page-head::after { width: 22%; right: -12%; } .page-head .wrap { padding-right: 18%; } }

.crumbs { font-size: .85rem; margin: 0 0 1.2rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.crumbs li + li::before { content: "/"; margin-right: .6rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }

.chapter-no {
  font-family: var(--display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(4rem, 12vw, 8rem); line-height: .8; color: var(--red);
  margin: 0 0 .6rem; letter-spacing: -.02em;
}
.chapter-no small { font-size: .16em; letter-spacing: .14em; vertical-align: top; color: var(--ink); margin-left: .6em; }

.meta-row { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 1.2rem 0 0; padding: 0; }
.meta-row div { min-width: 8rem; }
.meta-row dt { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.meta-row dd { margin: 0; font-weight: 600; }

.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.layout > aside { position: sticky; top: 88px; display: grid; gap: 1.5rem; }
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > aside { position: static; }
}

/* long URLs in notes and sources wrap instead of widening the page */
.prose { max-width: var(--measure); overflow-wrap: anywhere; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-top: 2.2em; padding-bottom: .45em; border-bottom: var(--rule); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose ul li::marker { color: var(--red); }
.prose ol li::marker { font-weight: 800; color: var(--red-ink); }
.prose sup { line-height: 0; }
.prose sup a { text-decoration: none; font-weight: 700; font-size: .78em; padding: 0 .1em; }
.prose blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.2em; border-left: 6px solid var(--ochre); font-size: 1.15rem; }

/* safety block: contraindications, interactions, when to stop */
.warn {
  background: var(--paper-hi); border: var(--rule); border-left: 12px solid var(--red);
  padding: 1.2rem 1.4rem .4rem; margin: 2em 0;
}
.prose .warn h2 { border-bottom: 0; padding-bottom: 0; margin-top: 0; color: var(--red-ink); }

.panel { background: var(--paper-hi); border: var(--rule); padding: 1.2rem 1.3rem; }
.panel h2, .panel h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; font-stretch: 115%; margin: 0 0 .8rem; }
.panel ul { list-style: none; padding: 0; margin: 0; }
.panel li { padding: .55rem 0; border-top: 1px solid var(--paper-lo); }
.panel li:first-child { border-top: 0; padding-top: 0; }
.panel .latin { font-style: italic; color: var(--ink-2); }
.panel .ema { display: block; font-size: .85rem; color: var(--ink-3); margin-top: .15rem; }
.panel.buy { background: var(--ochre); }
.panel.buy p { font-size: 1rem; }
.panel.buy .btn { background: var(--red); color: var(--paper-hi); width: 100%; justify-content: center; text-align: center; }
.panel.buy .btn:hover { color: var(--paper-hi); }
.panel.buy .btn + .btn { margin-top: .8rem; background: var(--paper-hi); color: var(--ink); }

/* what the book keeps — listed honestly, not hidden */
.locked {
  margin: 2.5em 0; border: var(--rule); background:
    repeating-linear-gradient(-45deg, var(--paper-hi) 0 14px, var(--paper) 14px 28px);
  padding: 1.4rem 1.5rem;
}
.locked h2 { margin-top: 0 !important; border: 0 !important; padding: 0 !important; }
.locked ul { columns: 2 14rem; column-gap: 2rem; }

.questions { list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: q; }
.questions li {
  counter-increment: q; position: relative; padding: .9rem 0 .9rem 3.2rem;
  border-top: 1px solid var(--paper-lo); font-family: var(--display); font-weight: 700; font-stretch: 104%; font-size: 1.12rem; line-height: 1.35;
}
.questions li::before {
  content: counter(q, decimal-leading-zero); position: absolute; left: 0; top: .85rem;
  font-weight: 900; font-stretch: 125%; color: var(--blue);
}

.questions .answer {
  margin: .45rem 0 0; font-family: var(--text); font-weight: 400; font-stretch: 100%;
  font-size: 1.02rem; line-height: 1.55; color: var(--ink-2);
}
.questions .answer.open { color: var(--ink-3); font-style: italic; font-size: .95rem; }

.more-in-book { margin: 0 0 2.5rem; padding: 1.1rem 1.3rem; border: var(--rule); background: var(--ochre); }
.more-in-book p { margin: 0 0 .9rem; }
.more-in-book .btn { background: var(--paper-hi); }

.plant-list { list-style: none; padding: 0 !important; }
.plant-list li { padding: .8rem 0; border-top: 1px solid var(--paper-lo); margin: 0 !important; }
.plant-list li:first-child { border-top: 0; }
.prose .warn ul li::marker { color: var(--red); }

.sections-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.sections-list li { padding: .8rem 0; border-top: 1px solid var(--paper-lo); }
.sections-list li:first-child, .questions li:first-child { border-top: 0; }   /* the heading's rule is right above */
.sections-list strong { display: block; font-family: var(--display); font-stretch: 104%; }

.notes { font-size: .92rem; color: var(--ink-2); margin-top: 3rem; padding-top: 1rem; border-top: var(--rule); }
.notes h2 { font-size: 1rem !important; border: 0 !important; margin: 0 0 .6rem !important; padding: 0 !important; }
.notes ol { padding-left: 1.6em; }
.notes li:target { background: color-mix(in srgb, var(--ochre) 30%, transparent); }

.sources { font-size: .95rem; }
.sources li { margin: .6em 0; }
.cited { font-size: .82rem; color: var(--ink-3); }
.bib li:target, .plants-list > li:target { background: color-mix(in srgb, var(--ochre) 30%, transparent); }

.sample-tail {
  margin: 2.5em 0; padding: 1.2rem 1.4rem; border: var(--rule); background: var(--ochre);
  font-family: var(--display); font-weight: 700;
}
.sample-tail p:last-child { margin: 0; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.pager a { display: block; border: var(--rule); padding: 1rem 1.2rem; text-decoration: none; color: var(--ink); background: var(--paper-hi); }
.pager a:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }
.pager small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pager .next { text-align: right; grid-column: 2; }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr; } .pager .next { grid-column: 1; } }

/* plants glossary */
.plants-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.plants-list > li { background: var(--paper-hi); border: var(--rule); padding: 1rem 1.2rem; }
.plants-list h2 { font-size: 1.15rem; margin: 0 0 .2rem; border: 0; padding: 0; text-transform: none; }
.plants-list .latin { font-style: italic; color: var(--ink-2); margin-bottom: .5rem; }

/* FAQ */
.faq { max-width: 50rem; }
.faq details { border-top: var(--rule); padding: 1rem 0; }
.faq details:last-child { border-bottom: var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; font-family: var(--display); font-weight: 800; font-stretch: 106%;
  font-size: 1.15rem; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 900; color: var(--red); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-top: .8rem; color: var(--ink-2); }

/* final call to action: an ochre slab with the red stripe */
.cta { position: relative; overflow: hidden; background: var(--ochre); border-top: var(--rule); border-bottom: var(--rule); }
.cta::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: 22%; height: 12px;
  background: var(--red); transform: rotate(-3deg);
}
.cta .wrap { position: relative; z-index: 1; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.cta h2 { margin-top: 0; max-width: 18em; }
.cta p { max-width: 38rem; }
.cta .btn { background: var(--red); color: var(--paper-hi); }
.cta .btn:hover { color: var(--paper-hi); }
.cta .btn.ghost { background: var(--paper-hi); color: var(--ink); }

/* ─── footer ───────────────────────────────────────────────────────────── */

.site-footer { background: var(--paper-lo); padding: 3rem 0 2.5rem; font-size: .95rem; }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer h2 { font-size: .8rem; letter-spacing: .12em; margin: 0 0 .8rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .35rem 0; }
.site-footer a { color: var(--ink); }
.site-footer .fine { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); color: var(--ink-2); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .cta, aside, .hero::before, .hero::after { display: none !important; }
  body { background: #fff; }
}