:root{
  --ink:#1d2433; --muted:#5b6475; --paper:#f7f4ee; --card:#fffdf8;
  --line:#e4ddcf; --accent:#a3242b; --accent-ink:#fff;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6}
a{color:inherit}

.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(16px,4vw,40px)}
.brand{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.top nav{display:flex;gap:clamp(12px,3vw,28px)}
.top nav a{color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.top nav a:hover{text-decoration:underline}

.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:110px 16px 64px;overflow:hidden;color:#fff;text-align:center}
.sky{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#5c8fc7 0%,#8db5df 45%,#f2c9a0 85%,#f5d9b8 100%);background-size:100% 160%;animation:dusk 40s ease-in-out infinite alternate}
@keyframes dusk{from{background-position:0 0}to{background-position:0 100%}}
.cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(28px);animation:drift linear infinite}
.c1{width:420px;height:120px;top:18%;left:-30%;animation-duration:90s}
.c2{width:300px;height:90px;top:58%;left:-25%;animation-duration:120s;animation-delay:-50s}
.c3{width:520px;height:150px;top:72%;left:-40%;animation-duration:150s;animation-delay:-20s;opacity:.7}
@keyframes drift{to{transform:translateX(180vw)}}

.thought{max-width:860px;margin:0}
.thought blockquote{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.8vw,2.7rem);line-height:1.3;text-shadow:0 2px 14px rgba(20,30,60,.35);transition:opacity .9s ease}
.thought blockquote.fade{opacity:0}
.thought figcaption{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:1.15rem;opacity:.9}
.actions{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap;justify-content:center}
button,.btn{text-decoration:none;display:inline-block;font:600 .95rem var(--sans);padding:12px 22px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer}
button:hover,.btn:hover{filter:brightness(1.08)}
button.ghost{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.7);color:#fff;backdrop-filter:blur(4px)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f2b84b;outline-offset:2px}

.section{max-width:1100px;margin:0 auto;padding:80px clamp(16px,4vw,40px) 0}
.section.narrow{max-width:680px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);margin:0 0 8px}
.lede{color:var(--muted);margin:0 0 32px}
.grid{list-style:none;padding:0;margin:0;columns:3 300px;column-gap:20px}
.grid li{break-inside:avoid;margin:0 0 20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;font-family:var(--serif);font-size:1.25rem;line-height:1.4}
#about p,#join p{font-size:1.05rem}

.signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.signup input[type=email]{flex:1 1 240px;font:1rem var(--sans);padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.foot{margin-top:100px;padding:40px 16px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}
.foot a{font-weight:600;color:var(--ink)}
.small{font-size:.85rem}

@media (prefers-reduced-motion:reduce){.sky,.cloud{animation:none}.thought blockquote{transition:none}}