:root { /* Spore Drop newsletter brand: deep black + neon mint glow + purple secondary */ --bg: #05070c; --bg-soft: #0a0e16; --panel: #101622; --panel-2: #161d2c; --ink: #eef6ff; --ink-dim: #b7c4d8; /* WCAG AA on dark panels */ --ink-dim-2: #8e9bb0; --line: #2a364c; --line-soft: #1c2536; --sidebar-bg: #080c14; --card-bg: #121a28; --accent: #7dff9a; /* newsletter neon mint */ --accent-2: #4fe07a; --bark: #c48cff; /* psychedelic purple (was earthy tan) */ --spore: #c8ffe0; /* luminous spore highlight */ --glow: rgba(125,255,154,.22); --glow-strong: rgba(125,255,154,.48); --purple: #b388ff; --purple-glow: rgba(179,136,255,.28); --cyan: #6ee7ff; --danger: #ff6b6b; --warn: #ffc14d; --unknown: #9aa8bc; --radius: 16px; --shadow: 0 10px 34px rgba(0,0,0,.65); --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* ---- Spore Drop brand backdrop ---- Deep night sky + neon mint mycelium threads + purple spore glow. Matches the newsletter header: bioluminescence, psychedelia, science. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(820px 520px at 78% -8%, rgba(125,255,154,.12) 0%, transparent 60%), radial-gradient(900px 620px at 12% 108%, rgba(179,136,255,.12) 0%, transparent 60%), radial-gradient(600px 400px at 50% 40%, rgba(110,231,255,.05) 0%, transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%237dff9a' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M8 30 C 44 8, 64 52, 108 36 S 152 16, 158 50'/%3E%3Cpath d='M0 88 C 38 66, 70 110, 110 88 S 156 70, 160 100'/%3E%3Cpath d='M14 148 C 54 124, 88 162, 128 144 S 158 124, 156 156'/%3E%3Ccircle cx='108' cy='36' r='2'/%3E%3Ccircle cx='128' cy='144' r='1.8'/%3E%3Ccircle cx='30' cy='90' r='1.6'/%3E%3C/g%3E%3C/svg%3E") repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23b388ff' stroke-opacity='0.10' stroke-width='0.8'%3E%3Cpath d='M4 12 C 20 4, 30 22, 48 14'/%3E%3Cpath d='M0 36 C 18 28, 34 44, 52 36 S 64 32, 64 44'/%3E%3Ccircle cx='48' cy='14' r='1.1'/%3E%3Ccircle cx='20' cy='38' r='1'/%3E%3C/g%3E%3C/svg%3E") repeat; pointer-events: none; } /* Brand headings: bold display weight for newsletter vibe; body stays sans */ h1, h2, h3, .detail-head h2, .filters h2 { font-family: var(--display); letter-spacing: .4px; font-weight: 800; } .tagline { font-family: var(--sans); letter-spacing: .08em; text-transform: uppercase; font-size: .72rem !important; font-weight: 600; } body { margin: 0; background-color: var(--bg); background-image: radial-gradient(1200px 620px at 82% -12%, #12201a 0%, transparent 58%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22320%22%20viewBox%3D%220%200%20320%20320%22%3E%3Cg%20transform%3D%22translate%2820%2018%29%20scale%280.52%29%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2248%22%20rx%3D%2250%22%20ry%3D%2244%22%20fill%3D%22%237dff9a%22%20fill-opacity%3D%220.11%22%2F%3E%3Cpath%20d%3D%22M8%2058%20C8%2028%2024%208%2050%208%20C76%208%2092%2028%2092%2058%20C92%2064%2088%2068%2050%2068%20C12%2068%208%2064%208%2058%20Z%22%20fill%3D%22%237dff9a%22%20fill-opacity%3D%220.72%22%2F%3E%3Cpath%20d%3D%22M16%2057%20C24%2063%2036%2066%2050%2066%20C64%2066%2076%2063%2084%2057%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2228%22%20rx%3D%228.5%22%20ry%3D%229.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2273%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2247%22%20rx%3D%225%22%20ry%3D%225.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M38%2066%20C36%2078%2034%2092%2036%20102%20C38%20110%2044%20114%2050%20114%20C56%20114%2062%20110%2064%20102%20C66%2092%2064%2078%2062%2066%20C58%2068%2042%2068%2038%2066%20Z%22%20fill%3D%22%237dff9a%22%20fill-opacity%3D%220.6335999999999999%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2278%22%20rx%3D%222.2%22%20ry%3D%222.8%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M42%2088%20C40%2096%2042%20104%2046%20108%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%20114%20C36%20120%2064%20120%2072%20114%20C64%20117%2036%20117%2028%20114%20Z%22%20fill%3D%22%237dff9a%22%20fill-opacity%3D%220.576%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28180%2030%29%20scale%280.44%29%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2248%22%20rx%3D%2250%22%20ry%3D%2244%22%20fill%3D%22%23b388ff%22%20fill-opacity%3D%220.11%22%2F%3E%3Cpath%20d%3D%22M8%2058%20C8%2028%2024%208%2050%208%20C76%208%2092%2028%2092%2058%20C92%2064%2088%2068%2050%2068%20C12%2068%208%2064%208%2058%20Z%22%20fill%3D%22%23b388ff%22%20fill-opacity%3D%220.7%22%2F%3E%3Cpath%20d%3D%22M16%2057%20C24%2063%2036%2066%2050%2066%20C64%2066%2076%2063%2084%2057%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2228%22%20rx%3D%228.5%22%20ry%3D%229.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2273%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2247%22%20rx%3D%225%22%20ry%3D%225.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M38%2066%20C36%2078%2034%2092%2036%20102%20C38%20110%2044%20114%2050%20114%20C56%20114%2062%20110%2064%20102%20C66%2092%2064%2078%2062%2066%20C58%2068%2042%2068%2038%2066%20Z%22%20fill%3D%22%23b388ff%22%20fill-opacity%3D%220.616%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2278%22%20rx%3D%222.2%22%20ry%3D%222.8%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M42%2088%20C40%2096%2042%20104%2046%20108%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%20114%20C36%20120%2064%20120%2072%20114%20C64%20117%2036%20117%2028%20114%20Z%22%20fill%3D%22%23b388ff%22%20fill-opacity%3D%220.5599999999999999%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2890%20120%29%20scale%280.4%29%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2248%22%20rx%3D%2250%22%20ry%3D%2244%22%20fill%3D%22%236ee7ff%22%20fill-opacity%3D%220.11%22%2F%3E%3Cpath%20d%3D%22M8%2058%20C8%2028%2024%208%2050%208%20C76%208%2092%2028%2092%2058%20C92%2064%2088%2068%2050%2068%20C12%2068%208%2064%208%2058%20Z%22%20fill%3D%22%236ee7ff%22%20fill-opacity%3D%220.66%22%2F%3E%3Cpath%20d%3D%22M16%2057%20C24%2063%2036%2066%2050%2066%20C64%2066%2076%2063%2084%2057%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2228%22%20rx%3D%228.5%22%20ry%3D%229.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2273%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2247%22%20rx%3D%225%22%20ry%3D%225.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M38%2066%20C36%2078%2034%2092%2036%20102%20C38%20110%2044%20114%2050%20114%20C56%20114%2062%20110%2064%20102%20C66%2092%2064%2078%2062%2066%20C58%2068%2042%2068%2038%2066%20Z%22%20fill%3D%22%236ee7ff%22%20fill-opacity%3D%220.5808%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2278%22%20rx%3D%222.2%22%20ry%3D%222.8%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M42%2088%20C40%2096%2042%20104%2046%20108%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%20114%20C36%20120%2064%20120%2072%20114%20C64%20117%2036%20117%2028%20114%20Z%22%20fill%3D%22%236ee7ff%22%20fill-opacity%3D%220.528%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28230%20140%29%20scale%280.48%29%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2248%22%20rx%3D%2250%22%20ry%3D%2244%22%20fill%3D%22%23ff7ad9%22%20fill-opacity%3D%220.11%22%2F%3E%3Cpath%20d%3D%22M8%2058%20C8%2028%2024%208%2050%208%20C76%208%2092%2028%2092%2058%20C92%2064%2088%2068%2050%2068%20C12%2068%208%2064%208%2058%20Z%22%20fill%3D%22%23ff7ad9%22%20fill-opacity%3D%220.68%22%2F%3E%3Cpath%20d%3D%22M16%2057%20C24%2063%2036%2066%2050%2066%20C64%2066%2076%2063%2084%2057%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2228%22%20rx%3D%228.5%22%20ry%3D%229.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2273%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2247%22%20rx%3D%225%22%20ry%3D%225.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M38%2066%20C36%2078%2034%2092%2036%20102%20C38%20110%2044%20114%2050%20114%20C56%20114%2062%20110%2064%20102%20C66%2092%2064%2078%2062%2066%20C58%2068%2042%2068%2038%2066%20Z%22%20fill%3D%22%23ff7ad9%22%20fill-opacity%3D%220.5984%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2278%22%20rx%3D%222.2%22%20ry%3D%222.8%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M42%2088%20C40%2096%2042%20104%2046%20108%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%20114%20C36%20120%2064%20120%2072%20114%20C64%20117%2036%20117%2028%20114%20Z%22%20fill%3D%22%23ff7ad9%22%20fill-opacity%3D%220.544%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2840%20210%29%20scale%280.42%29%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2248%22%20rx%3D%2250%22%20ry%3D%2244%22%20fill%3D%22%23ffc14d%22%20fill-opacity%3D%220.11%22%2F%3E%3Cpath%20d%3D%22M8%2058%20C8%2028%2024%208%2050%208%20C76%208%2092%2028%2092%2058%20C92%2064%2088%2068%2050%2068%20C12%2068%208%2064%208%2058%20Z%22%20fill%3D%22%23ffc14d%22%20fill-opacity%3D%220.64%22%2F%3E%3Cpath%20d%3D%22M16%2057%20C24%2063%2036%2066%2050%2066%20C64%2066%2076%2063%2084%2057%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2228%22%20rx%3D%228.5%22%20ry%3D%229.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2273%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2247%22%20rx%3D%225%22%20ry%3D%225.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M38%2066%20C36%2078%2034%2092%2036%20102%20C38%20110%2044%20114%2050%20114%20C56%20114%2062%20110%2064%20102%20C66%2092%2064%2078%2062%2066%20C58%2068%2042%2068%2038%2066%20Z%22%20fill%3D%22%23ffc14d%22%20fill-opacity%3D%220.5632%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2278%22%20rx%3D%222.2%22%20ry%3D%222.8%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M42%2088%20C40%2096%2042%20104%2046%20108%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%20114%20C36%20120%2064%20120%2072%20114%20C64%20117%2036%20117%2028%20114%20Z%22%20fill%3D%22%23ffc14d%22%20fill-opacity%3D%220.512%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28160%20230%29%20scale%280.46%29%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2248%22%20rx%3D%2250%22%20ry%3D%2244%22%20fill%3D%22%23c48cff%22%20fill-opacity%3D%220.11%22%2F%3E%3Cpath%20d%3D%22M8%2058%20C8%2028%2024%208%2050%208%20C76%208%2092%2028%2092%2058%20C92%2064%2088%2068%2050%2068%20C12%2068%208%2064%208%2058%20Z%22%20fill%3D%22%23c48cff%22%20fill-opacity%3D%220.68%22%2F%3E%3Cpath%20d%3D%22M16%2057%20C24%2063%2036%2066%2050%2066%20C64%2066%2076%2063%2084%2057%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2228%22%20rx%3D%228.5%22%20ry%3D%229.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2273%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2247%22%20rx%3D%225%22%20ry%3D%225.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M38%2066%20C36%2078%2034%2092%2036%20102%20C38%20110%2044%20114%2050%20114%20C56%20114%2062%20110%2064%20102%20C66%2092%2064%2078%2062%2066%20C58%2068%2042%2068%2038%2066%20Z%22%20fill%3D%22%23c48cff%22%20fill-opacity%3D%220.5984%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2278%22%20rx%3D%222.2%22%20ry%3D%222.8%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M42%2088%20C40%2096%2042%20104%2046%20108%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%20114%20C36%20120%2064%20120%2072%20114%20C64%20117%2036%20117%2028%20114%20Z%22%20fill%3D%22%23c48cff%22%20fill-opacity%3D%220.544%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28260%20250%29%20scale%280.36%29%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2248%22%20rx%3D%2250%22%20ry%3D%2244%22%20fill%3D%22%234fe07a%22%20fill-opacity%3D%220.11%22%2F%3E%3Cpath%20d%3D%22M8%2058%20C8%2028%2024%208%2050%208%20C76%208%2092%2028%2092%2058%20C92%2064%2088%2068%2050%2068%20C12%2068%208%2064%208%2058%20Z%22%20fill%3D%22%234fe07a%22%20fill-opacity%3D%220.62%22%2F%3E%3Cpath%20d%3D%22M16%2057%20C24%2063%2036%2066%2050%2066%20C64%2066%2076%2063%2084%2057%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.55%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%2232%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2228%22%20rx%3D%228.5%22%20ry%3D%229.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2268%22%20cy%3D%2236%22%20rx%3D%227%22%20ry%3D%228.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.92%22%2F%3E%3Cellipse%20cx%3D%2227%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2273%22%20cy%3D%2251%22%20rx%3D%225.5%22%20ry%3D%226.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.9%22%2F%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2247%22%20rx%3D%225%22%20ry%3D%225.5%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.88%22%2F%3E%3Cpath%20d%3D%22M38%2066%20C36%2078%2034%2092%2036%20102%20C38%20110%2044%20114%2050%20114%20C56%20114%2062%20110%2064%20102%20C66%2092%2064%2078%2062%2066%20C58%2068%2042%2068%2038%2066%20Z%22%20fill%3D%22%234fe07a%22%20fill-opacity%3D%220.5456%22%2F%3E%3Cellipse%20cx%3D%2244%22%20cy%3D%2278%22%20rx%3D%222.2%22%20ry%3D%222.8%22%20fill%3D%22%2305070c%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M42%2088%20C40%2096%2042%20104%2046%20108%22%20fill%3D%22none%22%20stroke%3D%22%2305070c%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%20114%20C36%20120%2064%20120%2072%20114%20C64%20117%2036%20117%2028%20114%20Z%22%20fill%3D%22%234fe07a%22%20fill-opacity%3D%220.496%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat, repeat; background-size: auto, 360px 360px; background-attachment: fixed, fixed; background-position: center, 0 0; color: var(--ink); min-height: 100vh; line-height: 1.5; font-family: var(--sans); } html { background: var(--bg); } /* Header — sticky glass with neon mint edge glow */ .site-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 22px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line); background: rgba(5,8,14,.82); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--glow), 0 8px 30px rgba(0,0,0,.5); } .brand { display: flex; align-items: center; gap: 14px; } .brand-mark { font-size: 2.3rem; filter: drop-shadow(0 0 10px var(--glow-strong)); } .brand h1 { margin: 0; font-size: 1.55rem; letter-spacing: .06em; font-weight: 900; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 8px rgba(125,255,154,.75), 0 0 22px rgba(125,255,154,.45), 0 0 42px rgba(125,255,154,.25); background: none; -webkit-background-clip: unset; background-clip: unset; } .tagline { margin: 4px 0 0; color: var(--ink-dim); } .search-bar { display: flex; gap: 8px; flex: 1 1 380px; justify-content: flex-end; } .search-bar input { flex: 1; min-width: 200px; max-width: 460px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: .95rem; outline: none; transition: border-color .15s ease, box-shadow .15s ease; } .search-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); } .search-bar button { padding: 11px 16px; border-radius: 11px; border: none; cursor: pointer; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #04120a; font-weight: 700; font-size: .92rem; box-shadow: 0 0 14px var(--glow); transition: filter .15s ease, transform .1s ease; } .search-bar button:hover { filter: brightness(1.08); transform: translateY(-1px); } .search-bar button.ghost { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); box-shadow: none; } .search-bar button.ghost:hover { color: var(--ink); border-color: var(--accent-2); } /* Disclaimer — with a spore-dot left rhythm */ .disclaimer { margin: 14px clamp(16px, 4vw, 48px) 0; padding: 12px 16px; border-radius: 11px; background: rgba(224,90,90,.10); border: 1px solid rgba(224,90,90,.35); color: #f3d2d2; font-size: .9rem; border-left: 4px solid var(--danger); } /* Layout */ .layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; padding: 24px clamp(16px, 4vw, 48px) 40px; align-items: start; } @media (max-width: 820px) { .layout { grid-template-columns: 1fr; } } /* Filters — a mycelium node panel, visually set apart from the results grid */ .filters { background: linear-gradient(180deg, var(--sidebar-bg), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; position: sticky; top: 150px; box-shadow: inset 0 0 0 1px rgba(125,255,154,.06), 0 8px 24px rgba(0,0,0,.45); } .filters h2 { margin: 0 0 14px; font-size: 1rem; } /* Each trait category is a collapsible, clearly bounded card of its own — breaks the dense checkbox wall into scannable chunks. */ .filter-group { margin-bottom: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(0,0,0,.16); overflow: hidden; } .filter-group:last-child { margin-bottom: 0; } .filter-group > .fg-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; user-select: none; font: inherit; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); font-weight: 700; background: var(--panel-2); border: none; padding: 10px 12px; } .filter-group > .fg-title:hover { color: var(--accent); } .filter-group > .fg-title .fg-count { color: var(--ink-dim); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .76rem; } .filter-group > .fg-title .fg-caret { transition: transform .16s ease; color: var(--ink-dim); flex-shrink: 0; } .filter-group.collapsed > .fg-title .fg-caret { transform: rotate(-90deg); } .filter-group.collapsed .chip-row { display: none; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; } .chip { cursor: pointer; user-select: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-dim); padding: 7px 13px; border-radius: 999px; font-size: .85rem; transition: all .12s ease; min-height: 32px; display: inline-flex; align-items: center; } .chip:hover { color: var(--ink); border-color: var(--accent-2); box-shadow: 0 0 10px var(--glow); } .chip.active { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #04120a; border-color: var(--accent); font-weight: 700; box-shadow: 0 0 14px var(--glow); } /* Edibility-coded chips: green (safe) -> amber (caution) -> red (danger) */ .chip.ed-choice { border-color: rgba(125,255,154,.55); } .chip.ed-edible { border-color: rgba(125,255,154,.40); } .chip.ed-unknown { border-color: rgba(176,154,120,.45); } .chip.ed-inedible{ border-color: rgba(176,154,120,.35); } .chip.ed-poisonous { border-color: rgba(224,166,75,.55); color: #f1c684; } .chip.ed-deadly { border-color: rgba(224,90,90,.60); color: #f3a3a3; } .chip.ed-choice.ed-active, .chip.ed-choice.active { background: rgba(125,255,154,.22); color: #d4ffe2; border-color: var(--accent); } .chip.ed-edible.ed-active, .chip.ed-edible.active { background: rgba(125,255,154,.16); color: #b6f5c8; border-color: var(--accent); } .chip.ed-unknown.ed-active, .chip.ed-unknown.active, .chip.ed-inedible.ed-active, .chip.ed-inedible.active { background: rgba(176,154,120,.18); color: #d8cab0; border-color: var(--unknown); } .chip.ed-poisonous.ed-active, .chip.ed-poisonous.active { background: rgba(224,166,75,.20); color: #f1c684; border-color: var(--warn); } .chip.ed-deadly.ed-active, .chip.ed-deadly.active { background: rgba(224,90,90,.22); color: #f3a3a3; border-color: var(--danger); } .filter-meta { margin-top: 16px; padding-top: 12px; border-top: 1px dotted var(--line); color: var(--ink-dim); font-size: .85rem; } #result-count { color: var(--accent); font-weight: 700; } /* Results */ .results-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; color: var(--ink-dim); font-size: .85rem; } .results-toolbar select { margin-left: 6px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; } .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .results { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(125,255,154,.04); } @media (max-width: 820px) { .results { padding: 12px; } } /* Load more / pagination */ .load-more-wrap { display: flex; justify-content: center; margin-top: 22px; } .load-more-btn { padding: 12px 28px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .15s ease; min-height: 44px; } .load-more-btn:hover { border-color: var(--accent-2); box-shadow: 0 0 14px var(--glow); color: var(--accent); } .load-more-btn:disabled { opacity: .5; cursor: default; } .pagination-status { text-align: center; color: var(--ink-dim); font-size: .85rem; margin-top: 10px; } /* ---- Cap-shaped cards with a bioluminescent edge ---- */ .card { position: relative; background: linear-gradient(180deg, rgba(18,26,40,.92), rgba(10,14,22,.92)); border: 1px solid var(--line); border-radius: 18px 18px 14px 14px; padding: 16px; cursor: pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; display: flex; flex-direction: column; gap: 8px; overflow: hidden; /* Cap silhouette: domed top, straight (stem-side) bottom */ border-radius: 80px 80px 14px 14px; border-top: 1px solid rgba(125,255,154,.28); box-shadow: 0 4px 14px rgba(0,0,0,.35); } /* the "cap" wash: a soft dome gradient over the top of each card */ .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; background: linear-gradient(180deg, rgba(125,255,154,.14), transparent); pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 0 0 1px var(--glow), 0 14px 30px rgba(0,0,0,.5), 0 0 24px var(--glow); } .card .emoji { font-size: 1.7rem; } .card h3 { margin: 0; font-size: 1.02rem; color: var(--ink); } .card .sci { color: var(--ink-dim); font-style: italic; font-size: .82rem; margin: 0; } .card-media { width: 100%; aspect-ratio: 4 / 3; border-radius: 64px 64px 10px 10px; overflow: hidden; background: var(--panel-2); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(125,255,154,.10); } .card-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .card-emoji { font-size: 3rem; } .card .traits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .badge.choice { background: rgba(125,255,154,.18); color: #d4ffe2; border-color: rgba(125,255,154,.4); } .badge.edible { background: rgba(125,255,154,.12); color: #b6f5c8; border-color: rgba(125,255,154,.3); } .badge.unknown { background: rgba(176,154,120,.14); color: #e6d9c1; border-color: rgba(176,154,120,.3); } .badge.inedible { background: rgba(176,154,120,.10); color: #ddccac; border-color: rgba(176,154,120,.25); } .badge.poisonous { background: rgba(224,166,75,.16); color: #f1c684; border-color: rgba(224,166,75,.4); } .badge.deadly { background: rgba(224,90,90,.18); color: #f8b9b9; border-color: rgba(224,90,90,.45); animation: danger-pulse 2.4s ease-in-out infinite; } @keyframes danger-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,90,90,.0); } 50% { box-shadow: 0 0 12px 1px rgba(224,90,90,.45); } } /* Potency badge: visually distinct from the edibility badge (square-ish pill, purple/violet accent) so the two are never confused at a glance. */ .badge-potency { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; border: 1px dashed transparent; white-space: nowrap; margin-left: 6px; text-transform: uppercase; letter-spacing: .02em; } .badge-potency.pot-low { background: rgba(150,130,220,.14); color: #c9bdf0; border-color: rgba(150,130,220,.35); } .badge-potency.pot-moderate { background: rgba(150,130,220,.20); color: #d6ccf5; border-color: rgba(150,130,220,.50); } .badge-potency.pot-high { background: rgba(150,130,220,.28); color: #e6defa; border-color: rgba(150,130,220,.70); } .chip.pot-low { border-color: rgba(150,130,220,.35); } .chip.pot-moderate { border-color: rgba(150,130,220,.50); } .chip.pot-high { border-color: rgba(150,130,220,.70); color: #d6ccf5; } .chip.pot-low.active, .chip.pot-moderate.active, .chip.pot-high.active { background: rgba(150,130,220,.20); color: #e6defa; border-color: rgba(150,130,220,.75); } /* Trait tags: sized up for legibility + comfortable tap targets on mobile */ .tag { font-size: .78rem; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); padding: 6px 11px; border-radius: 8px; min-height: 30px; display: inline-flex; align-items: center; } .tag.cap-color { border-color: rgba(125,255,154,.3); } .no-results { text-align: center; color: var(--ink-dim); padding: 40px; } /* Detail modal */ .overlay { position: fixed; inset: 0; background: rgba(8,6,4,.66); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; } .overlay[hidden] { display: none; } .modal { background: linear-gradient(180deg, var(--bg-soft), var(--bg)); border: 1px solid var(--line); border-radius: 20px; max-width: 720px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 26px; position: relative; box-shadow: var(--shadow), 0 0 32px var(--glow); } .modal-close { position: absolute; top: 14px; right: 16px; background: transparent; border: none; color: var(--ink-dim); font-size: 1.8rem; cursor: pointer; line-height: 1; } .modal-close:hover { color: var(--ink); } .detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; } .detail-head .emoji { font-size: 2.6rem; } .detail-head h2 { margin: 0; font-size: 1.5rem; color: var(--accent); text-shadow: 0 0 12px rgba(125,255,154,.4); background: none; -webkit-background-clip: unset; background-clip: unset; } .detail-head .sci { color: var(--ink-dim); font-style: italic; } .detail-hero { margin: 18px 0 4px; } .detail-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; display: block; background: var(--panel-2); border: 1px solid rgba(125,255,154,.10); } .detail-emoji { font-size: 4rem; text-align: center; padding: 20px 0; } .photo-credit { margin: 6px 0 0; font-size: .74rem; color: var(--ink-dim); text-align: right; } .detail-section { margin-top: 18px; } .detail-section h4 { margin: 0 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); } .detail-section p { margin: 0; } .spec-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .spec-table td { padding: 6px 8px; border-bottom: 1px dotted var(--line); vertical-align: top; overflow-wrap: break-word; } .spec-table td:first-child { color: var(--ink-dim); width: 38%; } /* Below ~420px, a fixed 38%/62% split gets cramped once a value (distribution, description-length lookalike text, etc.) runs long — a label column that narrow forces a lot of line-wrapping in a thin value column. 420px sits just under the "phablet-ish" 430px reference width and above the smallest phones (360/375/390px), so this reliably kicks in for every target width in the spec. Reusing the existing labelvalue structure (no HTML/JS change needed): stack each row's two cells into a label-over-value block instead of two side-by-side columns. */ @media (max-width: 420px) { .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; width: 100%; } .spec-table tr { margin-bottom: 8px; border-bottom: 1px dotted var(--line); padding-bottom: 4px; } .spec-table tr:last-child { margin-bottom: 0; border-bottom: none; } .spec-table td { border-bottom: none; padding: 2px 0; } .spec-table td:first-child { width: 100%; font-weight: 700; text-transform: uppercase; font-size: .74rem; letter-spacing: .04em; } } .lookalike { border-left: 3px solid var(--warn); padding: 8px 12px; margin-bottom: 10px; background: rgba(224,166,75,.07); border-radius: 0 8px 8px 0; } .lookalike b { color: #f1c684; } .lookalike-link { color: #f1c684; text-decoration: none; font-weight: 700; cursor: pointer; } .lookalike-link:hover { text-decoration: underline; color: #ffd9a0; } .lookalike:has(.lookalike-link):hover { background: rgba(224,166,75,.14); } .fun-fact { border-left: 3px solid var(--accent); padding: 8px 12px; background: rgba(125,255,154,.07); border-radius: 0 8px 8px 0; margin-top: 14px; } /* Spore-dot footer rhythm */ .site-footer { margin-top: 32px; padding: 22px clamp(16px, 4vw, 48px); border-top: 1px dotted var(--line); color: var(--ink-dim); font-size: .85rem; text-align: center; background-image: radial-gradient(var(--accent) 1px, transparent 1.4px); background-size: 22px 22px; background-position: center top; background-repeat: repeat-x; background-size: 22px 6px; } /* Prevent sideways scroll on phones */ html, body { max-width: 100%; overflow-x: hidden; } img { max-width: 100%; } /* Touch targets: iOS zooms the page if inputs are <16px */ .search-bar input, .results-toolbar select, .filters-toggle, .qf-region-label select { font-size: 16px; } /* Results grid collapses to a single comfortable column on phones */ @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } } /* On phones, the filter panel is collapsed behind a toggle so results show first */ .filters-toggle { display: none; width: 100%; padding: 10px 14px; margin-bottom: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-weight: 600; cursor: pointer; } @media (max-width: 820px) { .filters { position: static; top: auto; } .filters-toggle { display: block; } .filters.collapsed #filter-groups, .filters.collapsed .filter-meta, .filters.collapsed h2 { display: none; } .layout { padding: 16px clamp(12px, 4vw, 24px) 32px; } .site-header { padding: 16px; } .search-bar { flex: 1 1 100%; } .search-bar input { min-width: 0; } .detail-head { flex-wrap: wrap; } .detail-img { max-height: 240px; } .modal { padding: 18px; max-height: 92vh; } /* Bigger tap targets for trait chips/tags on touch screens */ .chip { padding: 9px 14px; font-size: .88rem; min-height: 38px; } .tag { padding: 8px 13px; font-size: .82rem; min-height: 34px; } .load-more-btn { width: 100%; } } /* ---- Narrow-phone treatment for the quick-filter row + mode tabs ---- 480px is chosen (rather than reusing 600/640/820) because the crowding here isn't about the results grid or sidebar — it's three inline controls (a "This season: X" button, a region