/*
 * Holistic Healing Tips 2.9 — Chromatic Botanica
 * A vibrant editorial design layer. Loaded after site.css so the underlying
 * layout and PHP templates stay backwards compatible.
 */

:root {
    --ink: #12232d;
    --ink-2: #1c3540;
    --paper: #f7f7f2;
    --paper-2: #e9f3ef;
    --paper-3: #fffef9;
    --moss: #287a78;
    --sage: #a8d9ca;
    --acid: #d6f05f;
    --plum: #5a477d;
    --clay: #ef755f;
    --line: rgba(18,35,45,.13);
    --line-strong: rgba(18,35,45,.22);
    --line-light: rgba(255,255,255,.18);

    --lagoon-950: #082f3a;
    --lagoon-900: #0b3f49;
    --lagoon-800: #0d5660;
    --lagoon-700: #0b7478;
    --lagoon-600: #0d9290;
    --lagoon-500: #18b6ac;
    --lagoon-400: #54d5c7;
    --lagoon-300: #8ce6d5;
    --lagoon-200: #bdf3e4;
    --lagoon-100: #defaf0;
    --lagoon-50: #effdf8;

    --sky: #5bc7ee;
    --violet: #6d5bd8;
    --violet-soft: #dcd8ff;
    --coral: #ff7968;
    --coral-soft: #ffe0d8;
    --sun: #ffd166;
    --sun-soft: #fff0bd;
    --mint: #a9f0d4;
    --mint-soft: #e1fbf1;

    --shadow-xs: 0 8px 24px rgba(13,49,58,.07);
    --shadow-sm: 0 16px 42px rgba(13,49,58,.10);
    --shadow: 0 30px 85px rgba(13,49,58,.14);
    --shadow-vivid: 0 36px 95px rgba(6,63,73,.20), 0 10px 30px rgba(118,104,232,.08);
    --ring: 0 0 0 4px rgba(24,182,172,.25), 0 0 0 7px rgba(255,255,255,.95);
    --radius-sm: 12px;
    --radius: 22px;
    --radius-lg: 34px;
    --radius-xl: 48px;

    --sans: Inter, Aptos, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --serif: "Iowan Old Style", Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
}

html { background: var(--paper); }
body {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background:
        radial-gradient(circle at 7% 4%, rgba(91,199,238,.13), transparent 28rem),
        radial-gradient(circle at 95% 14%, rgba(255,121,104,.10), transparent 25rem),
        linear-gradient(180deg, #f9faf5 0%, #f4f8f5 47%, #f8f6ef 100%);
    color: var(--ink);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .23;
    background-image:
        linear-gradient(rgba(18,35,45,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,35,45,.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 65%);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .045;
    background-image: radial-gradient(currentColor .65px, transparent .65px);
    background-size: 5px 5px;
    mix-blend-mode: multiply;
}

::selection { background: var(--acid); color: var(--lagoon-950); }
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--sun);
    outline-offset: 4px;
    box-shadow: var(--ring);
}

.shell { width: min(100% - clamp(28px,5vw,72px), 1360px); }
.section { position: relative; padding-block: clamp(82px,9vw,136px); }

/* --------------------------------------------------------------------------
   Signal bar + navigation
   -------------------------------------------------------------------------- */
.signal-bar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #123b4a 0%, #0a7478 44%, #5d579e 100%);
    color: rgba(255,255,255,.84);
    border: 0;
}
.signal-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.13) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: hht-signal-sheen 10s ease-in-out infinite;
}
.signal-bar__inner { position: relative; z-index: 1; min-height: 38px; }
.signal-bar__inner i { background: var(--acid); box-shadow: 0 0 0 5px rgba(214,240,95,.15), 0 0 18px rgba(214,240,95,.55); }
.signal-bar__inner a { color: white; text-decoration: none; }

.site-header {
    position: sticky;
    top: 0;
    background: rgba(249,250,245,.82);
    border-bottom-color: rgba(18,35,45,.09);
    box-shadow: 0 8px 35px rgba(13,49,58,.035);
    backdrop-filter: blur(22px) saturate(1.35);
    transition: background .24s ease, box-shadow .24s ease, transform .24s ease;
}
.site-header.is-scrolled {
    background: rgba(255,255,251,.94);
    box-shadow: 0 14px 45px rgba(13,49,58,.09);
}
.nav-shell { min-height: 88px; }
.brand__glyph {
    border: 0;
    background: linear-gradient(145deg, var(--lagoon-400), var(--lagoon-700) 60%, var(--violet));
    box-shadow: 0 10px 25px rgba(13,116,120,.22), inset 0 0 0 1px rgba(255,255,255,.45);
}
.brand__glyph::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: inherit;
}
.brand__glyph:before,
.brand__glyph i,
.brand__glyph b { border-color: white; background-color: white; }
.brand__glyph:before { background: white; }
.brand__text strong { color: var(--lagoon-950); }
.brand__text em { color: var(--violet); }
.brand__text small { color: #63817f; }
.primary-nav { gap: clamp(18px,2vw,31px); }
.primary-nav a { color: #29444c; }
.primary-nav a::after {
    height: 3px;
    bottom: -11px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--lagoon-500), var(--sky), var(--violet));
}
.primary-nav a.is-active { color: var(--lagoon-700); }
.search-trigger {
    min-height: 46px;
    border: 1px solid rgba(13,116,120,.16);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(222,250,240,.75));
    box-shadow: var(--shadow-xs);
}
.search-trigger:hover { border-color: var(--lagoon-400); transform: translateY(-1px); }
.search-trigger kbd { border-color: rgba(13,116,120,.18); background: rgba(255,255,255,.76); }
.search-panel {
    background: rgba(248,253,250,.96);
    border-bottom-color: rgba(13,116,120,.14);
    box-shadow: var(--shadow-vivid);
    backdrop-filter: blur(24px) saturate(1.3);
}
.search-panel__field { border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-xs); }
.search-panel__form input { background: white; border-color: rgba(13,116,120,.18); }
.search-panel__form button { background: linear-gradient(135deg, var(--lagoon-700), var(--violet)); }

/* --------------------------------------------------------------------------
   Hero systems
   -------------------------------------------------------------------------- */
.hero,
.page-hero,
.article-hero,
.global-herbarium-hero,
.remedy-hero {
    isolation: isolate;
    overflow: hidden;
    color: white;
    background:
        radial-gradient(circle at 8% 15%, rgba(91,199,238,.35), transparent 30rem),
        radial-gradient(circle at 90% 8%, rgba(255,121,104,.30), transparent 27rem),
        radial-gradient(circle at 72% 88%, rgba(214,240,95,.18), transparent 28rem),
        linear-gradient(125deg, #102c3a 0%, #0b5965 45%, #4f4b85 100%);
}
.hero::after,
.page-hero::after,
.article-hero::after,
.global-herbarium-hero::after,
.remedy-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.08) 42.2% 42.8%, transparent 43%),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), transparent 48%);
    mix-blend-mode: screen;
}
.hero__grain { opacity: .09; }
.hero__layout { min-height: min(820px, calc(100svh - 126px)); }
.hero h1,
.page-hero h1,
.article-hero h1,
.global-herbarium-hero h1 {
    color: #fff;
    text-shadow: 0 14px 45px rgba(4,27,34,.24);
}
.hero h1 em,
.page-hero h1 em,
.global-herbarium-hero h1 em {
    color: var(--acid);
    text-shadow: 0 0 30px rgba(214,240,95,.22);
}
.hero__copy > p,
.page-hero p,
.article-hero h1 + p,
.global-herbarium-hero p { color: rgba(255,255,255,.76); }
.eyebrow { color: rgba(255,255,255,.79); }
.eyebrow i { width: 34px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--acid), var(--sky)); }
.eyebrow--dark { color: var(--lagoon-700); }
.eyebrow--dark i { background: linear-gradient(90deg, var(--coral), var(--sun)); }
.hero-search > div {
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 24px 65px rgba(4,27,34,.26), inset 0 0 0 1px rgba(255,255,255,.8);
}
.hero-search button {
    border-radius: 999px 0 0 999px;
    background: linear-gradient(135deg, var(--acid), var(--sun));
}
.hero-links a { text-decoration-color: var(--acid); }
.orbit { border-color: rgba(255,255,255,.2); box-shadow: inset 0 0 55px rgba(91,199,238,.06); }
.orbit--two { border-color: rgba(214,240,95,.45); }
.specimen span { background: linear-gradient(var(--acid), rgba(91,199,238,.18)); }
.specimen i { border-color: rgba(214,240,95,.9); background: linear-gradient(145deg, rgba(91,199,238,.10), rgba(214,240,95,.05)); }
.hero-card {
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--radius);
    background: rgba(255,255,249,.90);
    box-shadow: 0 30px 80px rgba(3,24,31,.28), inset 0 1px 0 white;
    backdrop-filter: blur(18px);
}
.hero-card--top small { color: var(--violet); }
.hero-card--bottom {
    background: linear-gradient(145deg, rgba(89,70,126,.96), rgba(16,89,101,.96));
}
.hero-card--bottom small { color: var(--acid); }
.hero-seal {
    border-color: rgba(255,255,255,.65);
    background: linear-gradient(145deg, var(--coral), var(--violet) 52%, var(--lagoon-600));
    box-shadow: 0 23px 55px rgba(3,24,31,.3), inset 0 0 0 9px rgba(255,255,255,.08);
}
.hero-proof { background: rgba(7,36,44,.24); backdrop-filter: blur(12px); }
.hero-proof b { color: var(--acid); }

.page-hero--herb,
.article-hero--herb,
.global-herbarium-hero {
    background:
        radial-gradient(circle at 88% 5%, rgba(214,240,95,.24), transparent 28rem),
        radial-gradient(circle at 13% 77%, rgba(91,199,238,.30), transparent 30rem),
        linear-gradient(125deg, #102d45 0%, #075f6a 52%, #4f4b85 100%);
}
.page-hero--method {
    background:
        radial-gradient(circle at 85% 15%, rgba(255,209,102,.25), transparent 25rem),
        radial-gradient(circle at 5% 80%, rgba(84,213,199,.26), transparent 27rem),
        linear-gradient(125deg, #29314c, #684877 55%, #9d5c70);
}
.page-hero--source {
    background:
        radial-gradient(circle at 83% 18%, rgba(91,199,238,.27), transparent 25rem),
        linear-gradient(125deg, #132c3b, #205a66 50%, #4b477e);
}

/* Remedy page: saturated, not washed out. */
.remedy-hero {
    background:
        radial-gradient(circle at 18% 8%, rgba(214,240,95,.24), transparent 24rem),
        radial-gradient(circle at 90% 20%, rgba(255,121,104,.35), transparent 27rem),
        radial-gradient(circle at 78% 85%, rgba(118,104,232,.28), transparent 31rem),
        linear-gradient(126deg, #0c4655 0%, #0b7c7c 48%, #4d4b89 100%);
}
.remedy-hero h1,
.remedy-hero h1 em,
.remedy-hero p { color: white; }
.remedy-hero .eyebrow--lagoon { color: var(--acid); }
.remedy-hero__proof { border-color: rgba(255,255,255,.2); background: rgba(6,43,51,.24); backdrop-filter: blur(14px); }
.remedy-hero__proof strong { color: var(--acid); }
.remedy-hero__wash {
    background:
        linear-gradient(115deg, transparent, rgba(255,255,255,.08)),
        radial-gradient(circle at 50% 50%, rgba(84,213,199,.18), transparent 55%);
}
.lagoon-orbit { border-color: rgba(255,255,255,.25); }
.lagoon-specimen i,
.lagoon-specimen b { border-color: rgba(214,240,95,.7); background: rgba(255,255,255,.06); }
.lagoon-note {
    border-color: rgba(255,255,255,.30);
    background: rgba(255,255,255,.90);
    box-shadow: 0 30px 75px rgba(4,33,42,.28), inset 0 1px 0 white;
}
.lagoon-seal { background: linear-gradient(145deg, var(--coral), var(--violet)); }

/* --------------------------------------------------------------------------
   Shared section surfaces
   -------------------------------------------------------------------------- */
.manifesto-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 15%, rgba(91,199,238,.13), transparent 25rem),
        radial-gradient(circle at 90% 80%, rgba(255,121,104,.10), transparent 24rem),
        linear-gradient(180deg, #fffef9, #f1faf6);
}
.manifesto-section::after {
    content: "HHT";
    position: absolute;
    right: -2vw;
    bottom: -7vw;
    color: rgba(13,116,120,.035);
    font: 800 clamp(180px,28vw,430px)/.7 var(--sans);
    letter-spacing: -.09em;
    pointer-events: none;
}
.manifesto-grid h2,
.section-head h2 { text-wrap: balance; }
.manifesto-copy { position: relative; z-index: 1; }

.pathways-section {
    background:
        radial-gradient(circle at 100% 0, rgba(118,104,232,.12), transparent 31rem),
        linear-gradient(180deg, #eef9f5, #e7f0f5 55%, #f7f3ea);
}
.pathways { gap: 18px; }
.pathway {
    border: 1px solid rgba(13,116,120,.13);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at var(--mx,85%) var(--my,12%), rgba(84,213,199,.20), transparent 17rem),
        linear-gradient(145deg, rgba(255,255,255,.90), rgba(238,250,246,.82));
    box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.pathway:nth-child(2) { --card-accent: var(--coral); }
.pathway:nth-child(3) { --card-accent: var(--violet); }
.pathway:nth-child(4) { --card-accent: var(--sky); }
.pathway::after {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 5px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(var(--card-accent,var(--lagoon-400)), var(--acid));
}
.pathway:hover {
    border-color: rgba(13,116,120,.28);
    background-color: white;
    transform: translateY(-8px) rotateX(.4deg);
    box-shadow: var(--shadow-vivid);
}
.pathway--ink {
    color: white;
    background:
        radial-gradient(circle at 85% 5%, rgba(255,121,104,.24), transparent 22rem),
        linear-gradient(145deg, #112d3b, #0b6970 58%, #5b4e88);
}
.pathway--ink:hover { background-color: #164c59; }
.pathway__index { border-color: rgba(13,116,120,.22); color: var(--coral); background: rgba(255,255,255,.62); }
.pathway--ink .pathway__index { border-color: rgba(255,255,255,.25); color: var(--acid); background: rgba(255,255,255,.08); }
.pathway small { color: var(--lagoon-700); }
.pathway > b { color: var(--violet); }
.pathway--ink > b { color: var(--acid); }

.stories-section,
.remedy-library-section {
    background:
        radial-gradient(circle at 0 12%, rgba(84,213,199,.14), transparent 30rem),
        radial-gradient(circle at 100% 70%, rgba(255,121,104,.10), transparent 30rem),
        linear-gradient(180deg, #fbfcf7, #f2f7f5 55%, #f8f3eb);
}
.story-grid { gap: 18px; }
.story-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(13,116,120,.13);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at var(--mx,88%) var(--my,10%), rgba(84,213,199,.15), transparent 14rem),
        rgba(255,255,251,.94);
    box-shadow: var(--shadow-xs), inset 0 1px 0 white;
}
.story-card::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--lagoon-400), var(--sky), var(--violet), var(--coral), var(--sun));
    transform-origin: left;
    transform: scaleX(.34);
    transition: transform .3s ease;
}
.story-card:nth-child(4n+2)::before { background: linear-gradient(90deg, var(--coral), var(--sun), var(--acid)); }
.story-card:nth-child(4n+3)::before { background: linear-gradient(90deg, var(--violet), var(--sky), var(--lagoon-400)); }
.story-card:nth-child(4n+4)::before { background: linear-gradient(90deg, var(--sun), var(--coral), var(--violet)); }
.story-card:hover::before { transform: scaleX(1); }
.story-card:hover { border-color: rgba(13,116,120,.26); box-shadow: var(--shadow-vivid); }
.story-card__visual {
    background:
        radial-gradient(circle at 20% 20%, rgba(214,240,95,.35), transparent 12rem),
        radial-gradient(circle at 82% 25%, rgba(91,199,238,.35), transparent 15rem),
        linear-gradient(145deg, #0e5e68, #514d89);
}
.story-card:nth-child(4n+2) .story-card__visual { background: radial-gradient(circle at 20% 15%, rgba(255,209,102,.5), transparent 13rem), linear-gradient(145deg, #8d4e72, #eb745f); }
.story-card:nth-child(4n+3) .story-card__visual { background: radial-gradient(circle at 80% 20%, rgba(214,240,95,.42), transparent 13rem), linear-gradient(145deg, #175b66, #138f8b); }
.story-card:nth-child(4n+4) .story-card__visual { background: radial-gradient(circle at 20% 20%, rgba(91,199,238,.4), transparent 13rem), linear-gradient(145deg, #403c76, #7165d9); }
.story-card__visual small { color: white; background: rgba(9,35,43,.32); }
.story-card__body { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,249,246,.88)); }
.story-card h3 a:hover { color: var(--lagoon-700); }
.story-card__foot b { color: var(--coral); }

.method-band {
    background:
        radial-gradient(circle at 8% 12%, rgba(91,199,238,.25), transparent 30rem),
        radial-gradient(circle at 92% 92%, rgba(255,121,104,.24), transparent 31rem),
        linear-gradient(125deg, #263653, #5d4d83 52%, #0a7075);
}
.method-band::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.5) .6px, transparent .6px);
    background-size: 6px 6px;
    opacity: .08;
}
.method-index a {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.045);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.method-index a:hover { background: rgba(255,255,255,.1); border-color: rgba(214,240,95,.45); transform: translateX(7px); }
.method-index a > span { color: var(--acid); }

.herbarium-section,
.global-herbarium-section,
.global-taxon-section {
    background:
        radial-gradient(circle at 5% 25%, rgba(214,240,95,.12), transparent 25rem),
        radial-gradient(circle at 98% 60%, rgba(91,199,238,.14), transparent 28rem),
        linear-gradient(180deg, #f8f7ef, #eaf7f2 62%, #f8f4ea);
}
.herbarium-list { gap: 12px; }
.herbarium-list > a {
    border: 1px solid rgba(13,116,120,.12);
    border-radius: var(--radius);
    background: rgba(255,255,255,.72);
    box-shadow: var(--shadow-xs);
}
.herbarium-list > a:hover { background: white; transform: translateX(7px); border-color: var(--lagoon-300); box-shadow: var(--shadow-sm); }
.herbarium-list__letter { color: var(--violet); background: var(--violet-soft); border-radius: 50%; }

.source-section {
    background:
        radial-gradient(circle at 80% 12%, rgba(255,209,102,.24), transparent 28rem),
        radial-gradient(circle at 5% 80%, rgba(84,213,199,.24), transparent 30rem),
        linear-gradient(125deg, #102e3d, #0a626c 54%, #4e4a82);
}
.source-panel { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-xl); background: rgba(5,36,44,.28); box-shadow: var(--shadow-vivid); backdrop-filter: blur(12px); }
.source-constellation span { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.055); }
.source-constellation span:nth-child(3n+1) { color: var(--acid); }
.source-constellation span:nth-child(3n+2) { color: #bdeeff; }
.source-constellation span:nth-child(3n+3) { color: #ffd9d0; }

.safety-section { background: linear-gradient(135deg, #fff5e6, #f7eee9 50%, #e9f8f5); }
.safety-panel {
    border: 1px solid rgba(239,117,95,.2);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 100% 0, rgba(255,209,102,.25), transparent 19rem),
        rgba(255,255,251,.84);
    box-shadow: var(--shadow-sm), inset 0 1px 0 white;
}
.safety-panel__mark { color: white; border: 0; background: linear-gradient(145deg, var(--coral), #d65273); box-shadow: 0 14px 34px rgba(239,117,95,.25); }

/* --------------------------------------------------------------------------
   Controls and filtering
   -------------------------------------------------------------------------- */
.remedy-filter-console,
.global-herbarium-console {
    border-color: rgba(13,116,120,.16);
    background:
        radial-gradient(circle at 100% 0, rgba(118,104,232,.11), transparent 22rem),
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(225,250,242,.92));
    box-shadow: var(--shadow-vivid), inset 0 1px 0 white;
}
.remedy-filter-console { margin-top: -84px; }
.remedy-filter-console__head { background: linear-gradient(90deg, rgba(84,213,199,.08), rgba(118,104,232,.045)); }
.remedy-filter-console__head h2 { color: var(--lagoon-950); }
.remedy-search-field input,
.remedy-select select,
.global-herbarium-search input,
.global-herbarium-filters select,
.global-herbarium-check,
.search-panel__form input,
.hero-search input,
input[type="search"],
select,
textarea {
    border-color: rgba(13,116,120,.19);
    background-color: rgba(255,255,255,.91);
    color: var(--lagoon-950);
}
select option { color: var(--lagoon-950); background: #fff; }
.remedy-search-field input:hover,
.remedy-select select:hover,
.global-herbarium-filters select:hover { border-color: var(--lagoon-400); }
.remedy-filter-actions button,
.global-herbarium-search button,
.global-herbarium-apply {
    background: linear-gradient(135deg, var(--lagoon-700), var(--violet));
    box-shadow: 0 16px 36px rgba(13,116,120,.23);
}
.remedy-filter-actions button:hover,
.global-herbarium-search button:hover,
.global-herbarium-apply:hover { filter: saturate(1.15) brightness(1.03); }
.remedy-filter-console__foot { background: linear-gradient(90deg, rgba(169,240,212,.35), rgba(220,216,255,.23)); }
.active-filter-chips span { border-color: rgba(13,116,120,.20); background: linear-gradient(135deg, var(--mint-soft), #fff); color: var(--lagoon-800); }
.remedy-results-bar,
.global-herbarium-resultbar { border-color: rgba(13,116,120,.12); background: rgba(255,255,255,.68); box-shadow: var(--shadow-xs); }

/* --------------------------------------------------------------------------
   Global herbarium cards + directory
   -------------------------------------------------------------------------- */
.global-herbarium-stats {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: var(--radius-lg);
    background: rgba(4,28,36,.24);
    box-shadow: 0 26px 65px rgba(4,25,32,.18);
}
.global-herbarium-stats div { background: linear-gradient(145deg, rgba(255,255,255,.05), transparent); }
.global-herbarium-stats strong { color: var(--acid); }
.global-herbarium-alphabet {
    gap: 6px;
    border: 0;
    background: transparent;
}
.global-herbarium-alphabet a {
    border: 1px solid rgba(13,116,120,.10);
    background: rgba(255,255,255,.74);
    box-shadow: 0 5px 15px rgba(13,49,58,.035);
}
.global-herbarium-alphabet a:hover,
.global-herbarium-alphabet a.is-active { background: linear-gradient(145deg, var(--lagoon-600), var(--violet)); color: white; box-shadow: 0 10px 25px rgba(13,116,120,.22); }
.global-taxon-grid { gap: 17px; }
.global-taxon-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(13,116,120,.12);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at var(--mx,92%) var(--my,8%), rgba(84,213,199,.18), transparent 14rem),
        rgba(255,255,251,.92);
    box-shadow: var(--shadow-xs), inset 0 1px 0 white;
    transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease;
}
.global-taxon-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(var(--lagoon-400), var(--sky), var(--violet));
}
.global-taxon-card:nth-child(4n+2)::before { background: linear-gradient(var(--coral), var(--sun)); }
.global-taxon-card:nth-child(4n+3)::before { background: linear-gradient(var(--violet), var(--sky)); }
.global-taxon-card:nth-child(4n+4)::before { background: linear-gradient(var(--acid), var(--lagoon-500)); }
.global-taxon-card:hover { transform: translateY(-7px); border-color: rgba(13,116,120,.28); box-shadow: var(--shadow-vivid); }
.global-taxon-card__scientific { color: var(--lagoon-700); }
.global-taxon-card__uses span { border-color: rgba(13,116,120,.15); background: var(--mint-soft); color: var(--lagoon-800); }
.global-taxon-card__uses span.is-caution { background: var(--coral-soft); color: #8b3f36; }
.global-herbarium-pagination a,
.global-herbarium-pagination span { border-color: rgba(13,116,120,.15); background: white; }
.global-herbarium-pagination a.is-active { border-color: transparent; background: linear-gradient(145deg, var(--lagoon-600), var(--violet)); }
.global-herbarium-source { color: var(--ink); background: linear-gradient(135deg, rgba(255,255,255,.91), rgba(225,250,242,.91), rgba(220,216,255,.62)); }
.global-herbarium-source span { color: var(--violet); }
.global-herbarium-source p { color: #526e72; }
.global-herbarium-source a { color: var(--lagoon-800); border-color: rgba(13,116,120,.20); }

/* --------------------------------------------------------------------------
   Articles, methods, concerns, editorial pages
   -------------------------------------------------------------------------- */
.article-hero { background: radial-gradient(circle at 92% 8%, rgba(255,121,104,.29), transparent 28rem), radial-gradient(circle at 8% 85%, rgba(84,213,199,.27), transparent 30rem), linear-gradient(125deg, #132e42, #0d6670 54%, #564c86); }
.article-facts {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-lg);
    background: rgba(3,31,40,.24);
    box-shadow: 0 26px 65px rgba(3,24,31,.18);
    backdrop-filter: blur(12px);
}
.article-facts strong { color: var(--acid); }
.breadcrumbs a { color: rgba(255,255,255,.72); }

.prose-layout aside {
    padding: 18px;
    border: 1px solid rgba(13,116,120,.11);
    border-radius: var(--radius);
    background: rgba(255,255,251,.72);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(12px);
}
.toc a:hover { color: var(--lagoon-700); }
.prose,
.prose-page { color: #263c43; }
.prose h2,
.prose-page h2,
.prose h3 { color: var(--lagoon-950); }
.prose h2::after,
.prose-page h2::after {
    content: "";
    display: block;
    width: 78px;
    height: 4px;
    margin-top: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--lagoon-400), var(--violet), var(--coral));
}
.prose a { text-decoration-color: var(--lagoon-400); }
.prose a:hover { color: var(--lagoon-700); }
.note-card,
.recipe-block,
.sources-box,
.warning-box {
    border-radius: var(--radius-lg);
    border-color: rgba(13,116,120,.14);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.86);
}
.recipe-block {
    background:
        radial-gradient(circle at 100% 0, rgba(214,240,95,.18), transparent 18rem),
        linear-gradient(145deg, #fffef9, #e9f9f3);
}
.recipe-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 5px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(var(--lagoon-400), var(--violet));
}
.warning-box { background: linear-gradient(145deg, #fff4df, #ffe3dc 55%, #f6eef7); border-color: rgba(239,117,95,.20); }
.warning-box > span { color: white; border: 0; background: linear-gradient(145deg, var(--coral), #cf5072); }
.sources-box { background: linear-gradient(145deg, rgba(222,250,240,.72), rgba(220,216,255,.42)); }

.method-atlas,
.evidence-cards,
.concern-grid { gap: 17px; border: 0; }
.method-atlas article,
.evidence-cards article,
.concern-grid > a {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(13,116,120,.12);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at var(--mx,90%) var(--my,8%), rgba(84,213,199,.17), transparent 15rem),
        rgba(255,255,251,.88);
    box-shadow: var(--shadow-xs);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.method-atlas article::after,
.evidence-cards article::after,
.concern-grid > a::after {
    content: "";
    position: absolute;
    left: 25px;
    right: 25px;
    top: 0;
    height: 4px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--lagoon-400), var(--sky), var(--violet));
}
.method-atlas article:nth-child(3n+2)::after,
.evidence-cards article:nth-child(3n+2)::after,
.concern-grid > a:nth-child(3n+2)::after { background: linear-gradient(90deg, var(--coral), var(--sun)); }
.method-atlas article:nth-child(3n+3)::after,
.evidence-cards article:nth-child(3n+3)::after,
.concern-grid > a:nth-child(3n+3)::after { background: linear-gradient(90deg, var(--violet), var(--sky)); }
.method-atlas article:hover,
.evidence-cards article:hover,
.concern-grid > a:hover { transform: translateY(-7px); border-color: rgba(13,116,120,.27); box-shadow: var(--shadow-vivid); background-color: white; }
.method-atlas small,
.concern-grid small { color: var(--lagoon-700); }

/* --------------------------------------------------------------------------
   Buttons + micro interactions
   -------------------------------------------------------------------------- */
.button {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(13,116,120,.14);
    box-shadow: var(--shadow-xs);
}
.button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform .55s ease;
}
.button:hover::before { transform: translateX(130%); }
.button--dark { border-color: transparent; background: linear-gradient(135deg, var(--lagoon-700), var(--violet)); color: white; }
.button--light { border-color: transparent; background: linear-gradient(135deg, var(--acid), var(--sun)); color: var(--lagoon-950); }
.button--outline { background: rgba(255,255,255,.66); border-color: rgba(13,116,120,.18); }
.button--outline:hover { background: white; border-color: var(--lagoon-400); }
.arrow-link span { color: var(--coral); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 2%, rgba(84,213,199,.20), transparent 28rem),
        radial-gradient(circle at 92% 30%, rgba(118,104,232,.23), transparent 32rem),
        radial-gradient(circle at 55% 105%, rgba(255,121,104,.14), transparent 30rem),
        linear-gradient(130deg, #0d2634, #0a4652 48%, #35385f);
    color: rgba(255,255,255,.72);
}
.site-footer::before {
    background: linear-gradient(90deg, var(--lagoon-400), var(--sky), var(--violet), var(--coral), var(--sun), var(--acid));
    height: 5px;
}
.site-footer .brand__text strong,
.site-footer .brand__text em { color: white; }
.site-footer h3 { color: var(--acid); }
.site-footer a:hover { color: white; }
.footer-manifesto { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.055); }
.footer-archive {
    border-color: rgba(255,255,255,.15);
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgba(84,213,199,.10), rgba(118,104,232,.10));
}
.footer-archive span { color: var(--acid); }
.network__grid a { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.035); }
.network__grid a:hover { background: rgba(255,255,255,.09); border-color: rgba(84,213,199,.45); transform: translateY(-3px); }
.network__mark { background: linear-gradient(145deg, rgba(84,213,199,.18), rgba(118,104,232,.18)); color: white; }

/* --------------------------------------------------------------------------
   Motion and progressive enhancement
   -------------------------------------------------------------------------- */
[data-chromatic-tilt] { transform-style: preserve-3d; }
[data-chromatic-tilt] > * { transform: translateZ(0); }
@keyframes hht-signal-sheen {
    0%, 72%, 100% { transform: translateX(-120%); }
    82% { transform: translateX(120%); }
}
@keyframes hht-float {
    0%,100% { transform: translateY(0) rotate(var(--float-rotate,0deg)); }
    50% { transform: translateY(-11px) rotate(var(--float-rotate,0deg)); }
}
.hero-card--top { --float-rotate: -3deg; animation: hht-float 7s ease-in-out infinite; }
.hero-card--bottom { --float-rotate: 4deg; animation: hht-float 8.5s ease-in-out infinite reverse; }
.hero-seal { --float-rotate: 9deg; animation: hht-float 6.5s ease-in-out infinite; }

@media (max-width: 1100px) {
    .primary-nav { gap: 16px; }
    .primary-nav a { font-size: 11px; }
    .hero__layout { min-height: auto; }
}

@media (max-width: 920px) {
    .site-header { top: 0; }
    .primary-nav { background: rgba(255,255,251,.98); box-shadow: var(--shadow-vivid); }
    .primary-nav a { color: var(--lagoon-950); }
    .nav-toggle { border-radius: 999px; border-color: rgba(13,116,120,.18); background: white; }
    .signal-bar__inner > span:nth-child(2) { display: none; }
    .hero-search button { border-radius: 0; }
    .pathways,
    .story-grid,
    .method-atlas,
    .evidence-cards,
    .concern-grid { gap: 13px; }
    .remedy-filter-console { margin-top: -46px; }
}

@media (max-width: 640px) {
    .shell { width: min(100% - 24px, 1360px); }
    .section { padding-block: 72px; }
    .signal-bar__inner { min-height: 34px; font-size: 8px; }
    .signal-bar__inner a { display: none; }
    .nav-shell { min-height: 76px; }
    .brand__glyph { width: 40px; height: 40px; }
    .brand__text strong { font-size: 15px; }
    .brand__text em { font-size: 18px; }
    .hero__layout { padding-block: 62px 52px; }
    .hero h1 { font-size: clamp(48px,15vw,72px); }
    .hero-search > div { border-radius: 20px; }
    .hero-search button { padding-inline: 16px; }
    .hero-proof { border-radius: 0; }
    .page-hero .shell { min-height: 330px; padding-block: 58px; }
    .page-hero h1,
    .global-herbarium-hero h1 { font-size: clamp(46px,14vw,70px); }
    .pathway,
    .story-card,
    .global-taxon-card,
    .method-atlas article,
    .evidence-cards article,
    .concern-grid > a,
    .safety-panel,
    .source-panel,
    .remedy-filter-console,
    .global-herbarium-console { border-radius: 22px; }
    .global-herbarium-alphabet { grid-template-columns: repeat(9,1fr); }
    .site-footer { padding-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}