/* Companion to /buildcommunity, using the site's shared fonts and palette. */
:root { --ink:#1f2f2a; --muted:#52635e; --teal:#0f766e; --line:rgba(31,47,42,.14); }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; padding:0; display:block; color:var(--ink); background:linear-gradient(135deg,#fff3e8,#fffbf5 50%,#fff8e6); font-size:17px; line-height:1.65; }
h1,h2,h3,p { color:inherit; }
h1,h2,h3 { font-family:Fraunces,Georgia,serif; letter-spacing:-.035em; line-height:1.14; }
h1 { font-size:clamp(2.7rem,4.4vw,3.9rem); margin:0 0 26px; }
h1 em { font-style:normal; color:var(--teal); }
h2 { font-size:clamp(2rem,3.2vw,2.8rem); margin:0 0 22px; }
h3 { font-size:clamp(1.7rem,2.4vw,2.15rem); margin:0 0 20px; }
p { margin:0 0 18px; }
a { color:inherit; }
figure { margin:0; }
.wrap { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.skip { position:fixed; top:-100px; left:16px; padding:12px; background:white; z-index:30; }
.skip:focus { top:12px; }
a:focus-visible { outline:3px solid #ba622d; outline-offset:6px; }
.page-nav { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); }
.nav-inner { max-width:1440px; margin:auto; padding:17px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-family:Fraunces,Georgia,serif; font-size:24px; font-weight:700; letter-spacing:-.7px; }
.brand img { object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; }
.nav-links>a { text-decoration:none; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:14px 25px; border-radius:999px; background:var(--teal); color:white; font-weight:700; text-decoration:none; line-height:1.4; transition:background .2s; }
.button:hover { background:#095a54; }
.button.small { padding:11px 20px; font-size:14px; }
.text-link { display:inline-flex; align-items:center; gap:14px; color:var(--teal); font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.eyebrow,.chapter { display:block; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.7px; color:var(--teal); margin-bottom:20px; }
.hero { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; padding-block:80px 88px; }
.lede { font-size:19px; color:var(--muted); margin-bottom:28px; }
.hero-photo { position:relative; transform:rotate(2deg); padding:12px 12px 0; background:white; border-radius:8px; box-shadow:0 12px 35px #43352715; }
.hero-photo::before { content:""; position:absolute; top:-12px; left:37%; width:100px; height:27px; background:#f6cf4abb; transform:rotate(-8deg); }
.hero-photo img { display:block; width:100%; height:370px; object-fit:cover; border-radius:3px; }
.hero-photo figcaption { padding:16px 6px; font-size:12px; text-align:center; }
.walkthrough { background:#fffdf9; border-block:1px solid var(--line); padding:74px 0 38px; }
.section-intro { max-width:750px; }
.section-intro>p:not(.eyebrow) { color:var(--muted); }
.caption,figcaption { font-size:13px; color:var(--muted); line-height:1.5; }
.journey { display:grid; grid-template-columns:.85fr 1.35fr; gap:55px; align-items:center; padding:54px 0; }
.journey+.journey { border-top:1px solid var(--line); }
.journey.reverse { grid-template-columns:1.35fr .85fr; }
.reverse .journey-copy { grid-column:2; grid-row:1; }
.reverse .screen { grid-column:1; grid-row:1; }
.journey-copy>p { color:var(--muted); font-size:16px; }
.chapter { font-size:10px; letter-spacing:1.4px; }
.screen { padding:22px; background:#f7eedf; border-radius:22px; min-width:0; }
.screen.mint { background:#e8f4ed; }
.screen.peach { background:#fae9dc; }
.screen a { display:block; border-radius:12px; overflow:hidden; box-shadow:0 8px 22px #1f2f2a0d; }
.screen img { display:block; width:100%; height:auto; }
.screen figcaption { text-align:center; padding-top:16px; }
.alongside { padding-block:88px; }
.community-story { display:grid; grid-template-columns:.75fr 1.5fr; gap:56px; margin-top:36px; padding:40px; background:#f0f6ed; border:1px solid #dce7d9; border-radius:24px; }
.story-mark { display:block; color:#9c6b0f; font-size:46px; line-height:1; margin-bottom:20px; }
.community-story p:last-child { margin-bottom:0; }
.takeaway { max-width:820px; margin:30px auto 0; text-align:center; font-size:20px; }
.possibilities { padding-block:72px; background:#e6f3ed; }
.possibilities-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.possibility-list { list-style:none; padding:0; margin:0; }
.possibility-list li { display:flex; align-items:flex-start; gap:20px; padding:23px 0; border-bottom:1px solid var(--line); }
.possibility-list li:first-child { padding-top:0; }
.possibility-list li:last-child { border:0; padding-bottom:0; }
.possibility-list span { color:var(--teal); font-size:24px; }
.possibility-list p { margin:0; }
.invitation { max-width:780px; padding-block:88px; text-align:center; }
.founder-photo { border-radius:50%; object-fit:cover; margin-bottom:18px; }
.invitation-links { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:26px; margin-top:30px; }
.page-footer { border-top:1px solid var(--line); padding-block:28px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.page-footer .brand { font-size:19px; }
.page-footer>div { display:flex; gap:24px; font-size:13px; }
@media(max-width:900px) { .hero { gap:32px; } .hero-photo img { height:320px; } .nav-links>a:first-child { display:none; } .journey,.journey.reverse { gap:30px; grid-template-columns:1fr 1.25fr; } .journey.reverse { grid-template-columns:1.25fr 1fr; } .possibilities-inner { gap:40px; } }
@media(max-width:680px) { .wrap { width:calc(100% - 40px); } .nav-inner { padding:12px 16px; gap:12px; } .brand { font-size:17px; gap:6px; } .brand img { width:30px; height:30px; } .button.small { font-size:12px; padding:10px 13px; gap:5px; } .hero { grid-template-columns:1fr; padding-block:48px 56px; gap:40px; } h1 { font-size:clamp(2.5rem,9.5vw,3.6rem); } .hero-photo { max-width:430px; width:calc(100% - 10px); margin:auto; } .hero-photo img { height:280px; } .journey,.journey.reverse { grid-template-columns:1fr; gap:18px; padding:34px 0; } .reverse .journey-copy,.reverse .screen { grid-column:auto; grid-row:auto; } .screen { padding:12px; border-radius:16px; } .walkthrough { padding-top:48px; } .community-story { grid-template-columns:1fr; padding:26px; gap:24px; } .story-mark { font-size:32px; } .possibilities-inner { grid-template-columns:1fr; gap:24px; } .alongside,.invitation { padding-block:56px; } .possibilities { padding-block:48px; } .page-footer { flex-direction:column; align-items:flex-start; gap:18px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }