/* nonri.org */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #faf7f2; color: #3d2c1e; font-family: 'Lato', sans-serif; font-weight: 400; line-height: 1.7; }
/* Color palette - all design colors */
:root {
    --cream: #faf7f2;
    --deep-brown: #3d2c1e;
    --terracotta: #c2410c;
    --deep-earth: #92400e;
    --sage: #65a30d;
    --warm-sand: #d4b896;
    --light-taupe: #d6cfc5;
    --amber: #fef3c7;
}
.hero { text-align: center; padding: 5rem 2rem 3rem; }
.brand { font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.heart { color: #c2410c; }
.since { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.15em; color: #92400e; display: block; margin-top: 0.5rem; }
.impact-number { font-family: 'Inter', sans-serif; font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; color: #c2410c; margin-top: 2rem; }
.impact-label { font-size: 0.8rem; color: #92400e; }
.warm-rule { height: 1px; background: #d4b896; max-width: 200px; margin: 2rem auto; }
.stories { max-width: 520px; margin: 0 auto; padding: 1rem 2rem 3rem; }
.story-panel { border-left: 3px solid #c2410c; padding: 1.5rem 1.5rem; background: #faf7f2; margin-bottom: 1.5rem; border-top: 1px solid #d6cfc5; }
.story-text { font-size: 0.85rem; color: #44403c; }
.people-circles { display: flex; justify-content: center; margin: 1.5rem 0; }
.person-circle { width: 48px; height: 48px; border-radius: 50%; margin-left: -12px; border: 2px solid #faf7f2; }
.person-circle:first-child { margin-left: 0; }
.c1 { background: #d4b896; }
.c2 { background: #c2410c; }
.c3 { background: #92400e; }
.c4 { background: #65a30d; }
.c5 { background: #d4b896; }
.c6 { background: #c2410c; }
.c7 { background: #92400e; }
.people-circles.large .person-circle { width: 64px; height: 64px; margin-left: -16px; }
.people-circles.large .person-circle:first-child { margin-left: 0; }
.impact { text-align: center; padding: 2rem 2rem; }
.metrics-strip { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; max-width: 500px; margin: 0 auto; }
.metric { text-align: center; }
.metric-num { font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 700; color: #c2410c; display: block; }
.metric-num.sage { color: #65a30d; }
.metric-desc { font-size: 0.7rem; color: #92400e; }
.join { text-align: center; padding: 4rem 2rem; background: #fef3c7; }
.join-text { font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.3rem; margin-top: 1.5rem; color: #3d2c1e; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }