:root{
  --brand:#4850B2;
  --brand-deep:#363c8a;
  --brand-light:#6b73c9;
  --bg:#FAF7FE;
  --surface:#ffffff;
  --ink:#1c1b22;
  --muted:#6a6676;
  --faint:#9a95a6;
  --line:rgba(72,80,178,0.12);
  --tint:#eceef8;
  --radius:16px;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  background:#fff; color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--brand); color:#fff;}
a{color:inherit; text-decoration:none;}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;}
.wrap{width:100%; max-width:760px; margin:0 auto; padding:0 30px;}

/* ---- top bar (matches the legal pages' bar) ---- */
.topbar{border-bottom:1px solid var(--line); padding:18px 0; position:sticky; top:0; background:rgba(255,255,255,0.86); backdrop-filter:blur(8px); z-index:10;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center;}
.topbar .brand{font-family:var(--serif); font-weight:600; color:var(--brand); font-size:1.15rem; letter-spacing:-0.01em; cursor:default;}
.topbar-mail{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; color:var(--brand); border:1.5px solid var(--brand); background:#fff; box-shadow:0 0 0 1px rgba(72,80,178,0.10), 0 0 11px rgba(72,80,178,0.50); transition:box-shadow .25s, transform .2s;}
.topbar-mail:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(72,80,178,0.18), 0 0 18px rgba(72,80,178,0.75);}
.topbar-mail svg{width:14px; height:14px; display:block;}

/* ---- reveal (progressive, visible without JS) ---- */
.reveal{opacity:1; transform:none;}
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
.js .reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none;}}

/* ---- word-by-word animated headline (brunoj-style) ---- */
.stagger{display:inline-block;}
.stagger .w{display:inline-block; opacity:1;}
.js .stagger .w{opacity:0; transform:translateY(0.5em); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.js .stagger.go .w{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){.js .stagger .w{opacity:1; transform:none; transition:none;}}

/* ---- HERO ---- */
.hero{display:flex; flex-direction:column; justify-content:flex-start; position:relative; padding:26px 0 24px;}
/* full-page interactive constellation — fixed canvas behind ALL content */
.stars{position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block; pointer-events:none;}
.glow{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.glow::before{
  content:""; position:absolute; top:-28%; left:50%; transform:translateX(-50%);
  width:120%; max-width:1100px; aspect-ratio:1/1;
  background:radial-gradient(closest-side, rgba(72,80,178,0.10), rgba(72,80,178,0.04) 45%, transparent 70%);
}
.hero .wrap{position:relative; z-index:1;}
.brandmark{font-family:var(--serif); font-weight:600; font-variant:small-caps; font-size:clamp(2.05rem,9.2vw,5.6rem); line-height:1; letter-spacing:-0.02em; color:var(--brand); white-space:nowrap; text-align:center; display:block; text-shadow:0 0 34px rgba(72,80,178,0.40), 0 0 70px rgba(72,80,178,0.22);}
.tagline{font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,3.4vw,2rem); color:var(--brand); margin-top:14px; min-height:1.3em;}
.hero p.lede{margin-top:28px; color:var(--ink); font-size:clamp(1.02rem,2vw,1.18rem);}
.hero p.lede .accent{color:var(--brand); font-weight:600; font-family:var(--serif);}
.scroll-cue{margin-top:28px; font-family:var(--serif); color:var(--muted); font-size:0.95rem;}

/* ---- sections ---- */
section{position:relative;}
.band{padding:40px 0;}
#signup{scroll-margin-top:80px;}
/* body text sits on white cards over the constellation; headings stay CLEAR so the stars show behind them;
   cards are inset (wrap padding) so the constellation is visible in the left/right margins + the gaps between sections */
.hero p.lede, .prose{background:#fff; border-radius:16px; padding:24px 26px; box-shadow:0 2px 34px rgba(72,80,178,0.08);}
.eyebrow{font-size:15px; letter-spacing:0.22em; text-transform:uppercase; color:var(--brand); font-weight:600; display:inline-flex; align-items:center; gap:12px;}
.eyebrow::before{content:""; width:30px; height:1px; background:var(--brand); display:inline-block;}
h2.big{font-family:var(--serif); font-weight:600; font-variant:small-caps; font-size:clamp(2.15rem,5vw,3.4rem); line-height:1.1; letter-spacing:-0.015em; margin-top:20px; color:var(--brand); text-align:center;}
.prose .lead{display:block; font-weight:600; color:var(--brand); font-size:1.12rem; margin-bottom:12px;}
.prose strong{font-weight:500;}

/* ---- animated project icon: the book opens → a page turns → two eyes open ---- */
.proj-ico{display:inline-block; width:1.15em; height:1.15em; vertical-align:-0.18em; margin-right:.4em;}
.proj-ico svg{width:100%; height:100%; overflow:visible;}
.proj-ico .page,.proj-ico .spine,.proj-ico .flip{fill:none; stroke:var(--brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.proj-ico .spine{stroke-width:1.6;}
.proj-ico .flip{fill:rgba(72,80,178,0.12); stroke-width:2;}
.proj-ico .lid{fill:none; stroke:var(--brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.proj-ico .iris{fill:var(--brand);}
.proj-ico .pageL{transform-box:fill-box; transform-origin:right center;}
.proj-ico .pageR{transform-box:fill-box; transform-origin:left center;}
.proj-ico .flip{transform-box:fill-box; transform-origin:right center;}
.proj-ico .eye{transform-box:fill-box; transform-origin:center;}
/* resting state (no JS / reduced motion): book open, no page-flip, eyes open */
.proj-ico .pageL,.proj-ico .pageR{transform:scaleX(1);}
.proj-ico .flip{opacity:0;}
.proj-ico .eye{transform:scaleY(1); opacity:1;}
@keyframes pgOpen{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes pgFlip{0%{transform:scaleX(1); opacity:0;} 22%{opacity:1;} 100%{transform:scaleX(-1); opacity:0;}}
@keyframes eyeOpen{0%{transform:scaleY(0); opacity:0;} 60%{opacity:1;} 100%{transform:scaleY(1); opacity:1;}}
/* closed once JS is on, until the section scrolls in */
.js .reveal .proj-ico .pageL,.js .reveal .proj-ico .pageR{transform:scaleX(0);}
.js .reveal .proj-ico .eye{transform:scaleY(0); opacity:0;}
/* the sequence on scroll-in: open → page turn → two eyes open */
.reveal.in .proj-ico .pageL{animation:pgOpen .5s cubic-bezier(.2,.7,.2,1) both;}
.reveal.in .proj-ico .pageR{animation:pgOpen .5s cubic-bezier(.2,.7,.2,1) .06s both;}
.reveal.in .proj-ico .flip{animation:pgFlip .55s ease .5s forwards;}
.reveal.in .proj-ico .eyeL{animation:eyeOpen .45s cubic-bezier(.2,.7,.2,1) 1.05s both;}
.reveal.in .proj-ico .eyeR{animation:eyeOpen .45s cubic-bezier(.2,.7,.2,1) 1.22s both;}
/* replay the eyes on hover */
h2.big:hover .proj-ico .eyeL{animation:eyeOpen .45s ease;}
h2.big:hover .proj-ico .eyeR{animation:eyeOpen .45s ease .12s;}
@media (prefers-reduced-motion:reduce){
  .js .reveal .proj-ico .pageL,.js .reveal .proj-ico .pageR{transform:scaleX(1);}
  .js .reveal .proj-ico .eye{transform:scaleY(1); opacity:1;}
  .proj-ico .page,.proj-ico .flip,.proj-ico .eye{animation:none !important;}
}
h3.sub{font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,3vw,2rem); line-height:1.2; margin-top:8px; color:var(--brand);}
.prose{margin-top:22px; color:var(--ink); font-size:1.06rem;}
.prose strong{color:var(--ink); font-weight:600;}

/* ---- roadmap ---- */
.roadmap{margin-top:34px; display:flex; flex-direction:column; gap:2px;}
.ritem{display:flex; align-items:center; flex-wrap:wrap; row-gap:4px; gap:14px; padding:13px 18px; background:var(--surface); border:1px solid var(--line); border-radius:12px;}
.ritem .ic{width:22px; height:22px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:12px; font-weight:700;}
.ritem.done .ic{background:var(--brand); color:#fff;}
.ritem.now .ic{background:#fff; border:2px solid var(--brand); color:var(--brand);}
.ritem.next .ic{background:#fff; border:2px dashed var(--faint); color:var(--faint);}
.ritem .txt{font-size:0.98rem;}
.ritem.done .txt{color:var(--ink);}
.ritem.next .txt{color:var(--muted);}
.rlabel{margin-left:0; width:100%; padding-left:36px; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint); font-weight:600;}

/* ---- email capture ---- */
.capture{background:var(--brand); border-radius:24px; padding:34px 24px; margin-top:40px; color:#fff; position:relative; overflow:hidden;}
.capture::before{content:""; position:absolute; top:-40%; right:-10%; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,0.07);}
.capture .cap-stars{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
.capture .eyebrow{color:#c9ccef; position:relative; z-index:1;}
.capture .eyebrow::before{background:#c9ccef;}
.capture h3{font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3.4vw,2.1rem); margin-top:16px; position:relative; z-index:1; max-width:20ch;}
.capture p{color:#dfe1f5; margin-top:12px; position:relative; z-index:1; max-width:46ch;}
.signup{margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:1; max-width:520px;}
.signup input{flex:1; min-width:100%; padding:15px 18px; border-radius:12px; border:1px solid rgba(255,255,255,0.5); background:rgba(255,255,255,0.4); font-family:var(--sans); font-size:16px; color:#fff;}
.signup input::placeholder{color:rgba(255,255,255,0.75);}
.signup button{width:100%; padding:15px 26px; border-radius:12px; border:none; background:#fff; color:var(--brand); font-family:var(--sans); font-weight:600; font-size:16px; cursor:pointer; transition:transform .2s, background .2s;}
.signup button:hover{transform:translateY(-2px);}
.signup button:disabled{opacity:0.6; cursor:default; transform:none;}
.formmsg{margin-top:14px; font-size:0.95rem; color:#fff; position:relative; z-index:1; min-height:1.2em;}
.formmsg.err{color:#ffd7d7;}
.honeypot{position:absolute; left:-9999px; opacity:0;}
.consent{margin-top:12px; font-size:0.82rem; color:#c9ccef; position:relative; z-index:1;}
.consent a{color:#fff; border-bottom:1px solid rgba(255,255,255,0.4);}

/* ---- other projects ---- */
.projects{margin-top:34px; display:grid; grid-template-columns:1fr; gap:14px;}
.proj{background:var(--surface); border:2px solid var(--brand-light); border-radius:14px; padding:22px; box-shadow:0 0 0 1px rgba(72,80,178,0.10), 0 0 26px rgba(72,80,178,0.16); transition:transform .3s, border-color .3s, box-shadow .3s;}
.proj:hover{transform:translateY(-3px); border-color:var(--brand); box-shadow:0 0 0 1px rgba(72,80,178,0.20), 0 0 38px rgba(72,80,178,0.32);}
.proj .k{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); font-weight:600;}
.proj h4{font-family:var(--serif); font-weight:500; font-size:1.25rem; margin-top:10px; color:var(--brand);}
.proj p{margin-top:6px; font-size:0.92rem; color:var(--muted);}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:60px 0 50px; margin-top:20px;}
.foot-top{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;}
.foot-mark{font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--brand);}
.foot-links{display:flex; flex-wrap:nowrap; justify-content:center; gap:14px; font-size:0.72rem; white-space:nowrap;}
.foot-links a{color:var(--muted); transition:color .2s;}
.foot-links a:hover{color:var(--brand);}
.foot-bottom{margin-top:34px; font-size:0.88rem; color:var(--faint); display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.foot-bottom .reet{font-family:var(--serif); color:var(--brand); font-weight:600;}
.tm{font-size:0.7em; vertical-align:super; color:var(--brand-light);}

/* ---- Progressive enhancement: scale UP for tablet/desktop ----
   Base rules above are mobile-first. These rules only add
   more space/size once there's screen room to spare. ---- */
@media (min-width:621px){
  .wrap{padding:0 32px;}
  .hero{padding:44px 0 28px;}
  .band{padding:64px 0;}
  .hero p.lede, .prose{padding:30px 36px;}
  .capture{padding:48px 40px;}
  .signup input{min-width:220px;}
  .signup button{width:auto;}
  .ritem{flex-wrap:nowrap;}
  .rlabel{margin-left:auto; width:auto; padding-left:0;}
  .scroll-cue{margin-top:44px;}
  .projects{grid-template-columns:repeat(2,1fr);}
}