/* gabs.wiki */
/* Palette: #f0f9f0, #e6f5e6, #1a2e1a, #16a34a, #a7d4a7, #22c55e, #c8e6c8 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f0f9f0; color: #1a2e1a; font-family: 'Inter', sans-serif; line-height: 1.75; }
.hero { display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; }
.botanical-border { border: 1px solid #a7d4a7; padding: 3rem 2rem; text-align: center; position: relative; }
.leaf { position: absolute; width: 8px; height: 8px; background: #16a34a; transform: rotate(45deg); }
.leaf.tl { top: -4px; left: -4px; }
.leaf.tr { top: -4px; right: -4px; }
.leaf.bl { bottom: -4px; left: -4px; }
.leaf.br { bottom: -4px; right: -4px; }
.brand { font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(2.5rem, 6vw, 4rem); color: #1a2e1a; }
.tagline { font-size: 0.85rem; color: #16a34a; margin-top: 0.5rem; }
.layout { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; gap: 2rem; }
.sidebar { position: sticky; top: 20px; width: 220px; background: #e6f5e6; padding: 16px; border-radius: 6px; flex-shrink: 0; align-self: flex-start; }
.sidebar-title { font-family: 'Merriweather', serif; font-weight: 700; font-size: 0.85rem; color: #1a2e1a; margin-bottom: 0.75rem; }
.nav-list { list-style: none; }
.nav-item { font-size: 0.8rem; padding: 0.35rem 0; color: #1a2e1a; display: flex; align-items: center; gap: 0.5rem; }
.nav-leaf { width: 6px; height: 6px; background: #16a34a; transform: rotate(45deg); display: inline-block; flex-shrink: 0; }
.seeds { font-family: 'Source Code Pro', monospace; font-size: 0.65rem; color: #16a34a; margin-top: 1rem; }
.seed-count { font-weight: 700; }
.content { flex: 1; }
.article { margin-bottom: 1.5rem; }
.article-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.article-title { font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.1rem; }
.growth { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.growth.mature { background: #22c55e; width: 12px; height: 12px; }
.growth.growing { background: #22c55e; width: 8px; height: 8px; }
.growth.sprout { background: #22c55e; width: 5px; height: 5px; }
.article-body { font-size: 0.85rem; color: #333; margin-bottom: 0.75rem; }
.cross-ref { font-size: 0.75rem; color: #666; }
.link { color: #16a34a; text-decoration: underline; text-decoration-thickness: 1px; }
.rule { border: none; border-top: 1px solid #c8e6c8; margin: 1.5rem 0; }
.canopy { text-align: center; padding: 4rem 1.5rem; }
.canopy-text { font-family: 'Merriweather', serif; font-weight: 700; font-size: 1rem; color: #1a2e1a; }
.canopy-brand { font-size: 0.7rem; color: #6b8f6b; display: block; margin-top: 0.5rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }