@font-face{font-family:Figtree;font-weight:400 700;font-display:swap;src:url(fonts/Figtree.woff2) format('woff2')}
:root{--bg:#0D1B14;--surface:#17301F;--raised:#24452F;--line:rgba(238,244,236,.14);--ink:#EEF4EC;--muted:#A8BCA9;--amber:#FFB547;--amber-ink:#8A5A00;--on-amber:#1A1205;--leaf:#7FD49B;--paper:#FBFAF4;--sage:#EEF2E6;--forest-ink:#14301F;--paper-muted:#4A5E4F;--r-l:20px;--r-full:999px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:17px/1.6 Figtree,Arial,sans-serif;color:var(--ink);background:var(--bg) url(img/paper-grain-night.webp)}
h1,h2,h3,.pill{font-family:Figtree,Arial,sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.hand{font-family:Figtree,Arial,sans-serif;font-weight:600;color:var(--leaf);font-size:1.2rem;line-height:1.3;display:inline-block}
.eyebrow{font:700 .78rem/1 Figtree,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--leaf)}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:var(--r-full);font-weight:700;font-size:1rem;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pill:hover{transform:translateY(-2px)}
.pill.amber{background:var(--amber);color:var(--on-amber);box-shadow:0 8px 24px rgba(255,181,71,.25)}
.pill.ghost{border-color:rgba(238,244,236,.5);color:var(--ink);background:rgba(13,27,20,.35);backdrop-filter:blur(6px)}
.pill.ink{background:var(--forest-ink);color:var(--paper)}
.pill.small{min-height:40px;padding:8px 18px;font-size:.9rem}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
/* header */
.top{position:absolute;inset:0 0 auto;z-index:5}.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px}
.top img{height:38px;width:auto}
.top nav{display:flex;gap:8px}.top nav .navlink{display:none}
/* hero */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;background:#0D1B14 url(img/hero-bluebell-wood.jpg) center 60%/cover;color:var(--ink)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,27,20,.96) 8%,rgba(13,27,20,.55) 45%,rgba(13,27,20,.25) 75%,rgba(13,27,20,.55))}
.hero .wrap{position:relative;padding-bottom:64px;padding-top:120px}
.hero h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.02;font-weight:700;margin:14px 0 16px;max-width:14ch;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--leaf)}
.hero p.lede{font-size:1.15rem;max-width:36rem;color:#dfe9dc;margin:0 0 28px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.photo-credit{position:absolute;right:12px;bottom:10px;font-size:.7rem;color:rgba(238,244,236,.7);z-index:2}
/* sections */
section{padding:88px 0}
.sec-head{max-width:40rem;margin-bottom:44px}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.1;margin:12px 0 10px;font-weight:700}
.sec-head p{color:var(--muted);margin:0}
.points{display:grid;gap:22px;grid-template-columns:1fr}
.pt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;position:relative}
.pt-photo{margin:0;position:relative}.pt-photo img,.pt img{display:block;aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:1px dashed rgba(255,181,71,.35)}
.pt .t{padding:20px 22px 24px}
.pt .no{font:600 1.2rem Figtree,Arial,sans-serif;color:var(--leaf)}
.pt h3{font-size:1.3rem;margin:2px 0 8px}.pt p{margin:0;color:var(--muted);font-size:.98rem}
.balance{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted)}
.tag{display:inline-block;border:1px solid var(--line);border-radius:var(--r-full);padding:6px 14px;font-size:.88rem;color:var(--ink);background:rgba(36,69,47,.5)}
/* story: paper journal page */
.story{background:var(--sage) url(img/leaf-vein-day.svg);color:var(--forest-ink)}
.story .grid{display:grid;gap:44px;grid-template-columns:1fr;align-items:start}
.story .eyebrow{color:#2E7D32}
.story h2{color:var(--forest-ink)}
.journal{background:var(--paper);border-radius:6px 20px 20px 6px;padding:36px 30px;box-shadow:0 18px 40px rgba(20,48,31,.15);border-left:6px double rgba(138,90,0,.45);position:relative}
.journal p{margin:0 0 1.05em;font-size:1.06rem;line-height:1.75}
.journal p:first-child:first-letter{font:700 3.4rem/0.9 Figtree,Arial,sans-serif;float:left;margin:6px 10px 0 0;color:#2E7D32}
.journal .sig{font:700 1.4rem Figtree,Arial,sans-serif;color:#2E7D32;margin-top:8px}
.polaroid{background:#fff;padding:14px 14px 50px;box-shadow:0 18px 40px rgba(20,48,31,.2);transform:rotate(-2.5deg);max-width:380px;margin:0 auto;position:relative}
.polaroid .ph{aspect-ratio:4/5;background:repeating-linear-gradient(45deg,#E2EAD6 0 14px,#d7e1c8 14px 28px);display:grid;place-items:center;text-align:center;color:var(--paper-muted);font-size:.9rem;padding:20px;border:2px dashed #b9c6a9}
.polaroid .cap{position:absolute;bottom:12px;left:0;right:0;text-align:center;font:600 1.1rem Figtree,Arial,sans-serif;color:var(--forest-ink)}
.tape{position:absolute;top:-12px;left:50%;width:110px;height:28px;margin-left:-55px;background:rgba(255,181,71,.55);transform:rotate(3deg)}
/* involved */
.involve .grid{display:grid;gap:24px;grid-template-columns:1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:30px 26px}
.card h3{font-size:1.45rem;margin:0 0 8px}.card>p{color:var(--muted);margin:0 0 20px}
form label{display:block;font:600 .9rem Figtree,Arial,sans-serif;margin:14px 0 6px}
input[type=text],input[type=email]{width:100%;min-height:50px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 16px;font:inherit}
.checks{display:grid;gap:10px;margin:18px 0}.checks label{display:flex;gap:10px;align-items:flex-start;font:400 .95rem Figtree,Arial,sans-serif;margin:0}
.checks input{width:20px;height:20px;accent-color:var(--amber);margin-top:3px;flex:none}
.privacy{margin-top:20px;font-size:.84rem;color:var(--muted);border:1px dashed rgba(255,181,71,.5);border-radius:14px;padding:14px 16px;background:rgba(255,181,71,.05)}
.privacy b{color:var(--leaf)}
.notice{display:inline-block;font-size:.78rem;background:rgba(255,181,71,.15);color:var(--leaf);border-radius:var(--r-full);padding:4px 12px;margin-bottom:14px}
.contact .mail{font:700 1.25rem Figtree,Arial,sans-serif;color:var(--leaf);word-break:break-all;margin:6px 0 20px;display:block}
.contact ul{margin:0 0 22px;padding:0;list-style:none;color:var(--muted)}.contact li{padding:8px 0;border-bottom:1px dashed var(--line)}
.contact li:before{content:"✦ ";color:var(--leaf)}
.contact .art{border-radius:14px;margin-top:22px;opacity:.95}
/* footer */
footer{background:#08130d;border-top:1px solid var(--line);padding:56px 0 40px;font-size:.88rem;color:var(--muted)}
footer .grid{display:grid;gap:32px;grid-template-columns:1fr}
footer h4{font:700 .8rem Figtree,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
footer ul{list-style:none;padding:0;margin:0}footer li{margin:0 0 8px}
footer .logo{height:34px;width:auto;margin-bottom:12px}
footer .pills{display:flex;flex-wrap:wrap;gap:8px}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.8rem}
.pill.chip{min-height:36px;padding:6px 14px;font-size:.84rem;font-weight:600;border-color:var(--line);color:var(--ink);background:var(--surface)}
@media(min-width:760px){
 .points{grid-template-columns:repeat(2,1fr)}
 .story .grid{grid-template-columns:1.5fr 1fr}.story .polaroid{position:sticky;top:40px}
 .involve .grid{grid-template-columns:1.25fr 1fr}
 footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
 .top nav .navlink{display:inline-flex}
 section{padding:112px 0}
}
@media(min-width:1100px){.points{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){.pill{transition:none}html{scroll-behavior:auto}}

.img-credit{display:block;font-size:.7rem;line-height:1.35;color:var(--muted);padding:6px 22px 0}.img-credit a{color:inherit}
.contact .art{margin:22px 0 0}.contact .art img{border-radius:14px;width:100%;display:block}.contact .art .img-credit{padding:6px 0 0}
.polaroid .ph-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 60%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#signup [role=status].err{color:#FF8A80}
/* 22 Oct v4: smaller photos so the text leads */
.pt-photo img{aspect-ratio:auto;height:140px}
.pt .img-credit{padding:5px 16px 0;font-size:.72rem}
.polaroid{max-width:230px;padding:10px 10px 40px}.polaroid .ph-img{aspect-ratio:4/5}.polaroid .cap{font-size:1.2rem;bottom:8px}
.story .polaroid-wrap{text-align:center}
.contact .art img{height:150px;object-fit:cover}
.contact .art .img-credit{font-size:.72rem}
@media(min-width:760px){
 .points{grid-template-columns:repeat(2,1fr)}
 .pt{display:grid;grid-template-columns:30% 1fr;align-items:start}
 .pt-photo{padding:16px 0 16px 16px}
 .pt-photo img{height:auto;aspect-ratio:1/1;border-radius:12px;border-bottom:0}
 .pt .img-credit{padding:5px 0 0;font-size:.7rem;line-height:1.3}
 .pt .t{padding:16px 20px 20px}
 .story .grid{grid-template-columns:2.4fr 1fr}
 .polaroid{max-width:240px}
 .contact .art{display:grid;grid-template-columns:30% 1fr;gap:14px;align-items:end}
 .contact .art img{height:auto;aspect-ratio:1/1}
}
@media(min-width:1100px){.points{grid-template-columns:repeat(2,1fr)}}
.polaroid .ph-img{height:auto}.contact .art .img-credit{overflow-wrap:anywhere}
@media(max-width:759px){.polaroid{max-width:150px;padding:8px 8px 32px}.polaroid .cap{font-size:1.05rem;bottom:6px}}
.formnote{font-size:.85rem;color:var(--muted);margin:6px 0 14px}.formnote a{color:var(--leaf)}
/* t1022c Option B (Sam 22 Oct): faint brand-colour glow, flat fill (dark page = night values). Replaces the t1022b raised style. */
:is(button,.pill):not(:disabled){background-image:none!important;box-shadow:0 0 0 1px rgba(127,212,155,.20),0 0 14px rgba(127,212,155,.22)!important;transition:box-shadow .15s ease}
.pill.amber:not(:disabled),button.pill.amber{box-shadow:0 0 0 1px rgba(255,181,71,.35),0 0 16px rgba(255,181,71,.35)!important}
:is(button,.pill):not(:disabled):active{box-shadow:0 0 0 1px rgba(127,212,155,.25),0 0 4px rgba(127,212,155,.18)!important}
@media (prefers-reduced-motion:reduce){:is(button,.pill){transition:none!important}.pill:hover{transform:none!important}}
/* 26 Oct 2026: 'Log in' pill in the header (LOGINBTN build flag, beta-preview only until Sam OKs main). Same ghost pill as Sam's story; tighter on small phones so logo + both pills fit. */
/* scoped with :has(.navlogin) so pages built without the pill (main) look exactly as before */
.top nav:has(.navlogin) .pill{white-space:nowrap}
@media(max-width:420px){.top .wrap:has(.navlogin){gap:8px}.top .wrap:has(.navlogin) img{height:auto;max-height:32px;max-width:38vw}.top nav:has(.navlogin){gap:6px}.top nav:has(.navlogin) .pill.small{padding:8px 12px;font-size:.85rem}}