:root{
  --wine:#540810; --wine-2:#7a1a26; --rose:#fcf0e8; --straw:#fcf0e8;
  --paper:#fdf7f2; --ink:#2b0a0e; --muted:#75585a; --line:#ead9d2;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#240509;--ink:#fcf0e8;--muted:#cfb0ab;--line:#4a1a22}
}
:root[data-theme="dark"]{--paper:#240509;--ink:#fcf0e8;--muted:#cfb0ab;--line:#4a1a22}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans)}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

.hero{background:#fef8ec;color:var(--wine);border-bottom:1px solid var(--line);padding:clamp(4rem,12vw,9rem) clamp(1.25rem,6vw,5rem) clamp(3rem,8vw,6rem)}
.hero-in{display:flex;flex-wrap:wrap-reverse;align-items:center;justify-content:space-between;gap:2.5rem}
.logo{width:clamp(170px,26vw,320px);height:auto;display:block}
.hero h1{font:600 clamp(3rem,11vw,9rem)/.95 var(--serif);letter-spacing:-.03em;margin:0;max-width:11ch;color:var(--wine)}
.hero h1 i{font-weight:400;color:var(--wine-2)}
.hero p{font:italic 400 clamp(1.2rem,2.6vw,1.7rem)/1.4 var(--serif);margin:2rem 0 0;color:var(--wine-2)}
.hero .row{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:3rem;font-size:1rem;color:var(--wine)}

.wrap{max-width:62rem;margin:0 auto;padding:clamp(3rem,8vw,6rem) clamp(1.25rem,6vw,3rem)}
.intro{font:400 clamp(1.4rem,3vw,2.1rem)/1.35 var(--serif);max-width:34ch}
.intro-sub{color:var(--muted);max-width:52ch;margin-top:1.5rem}

.pillars{border-top:1px solid var(--line)}
.pillar{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem 3rem;padding:2rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.pillar h2{font:600 clamp(2.4rem,7vw,4.5rem)/1 var(--serif);letter-spacing:-.02em;margin:0;transition:color .25s,padding-left .25s}
.pillar p{margin:.5rem 0 0;color:var(--muted);max-width:44ch}
.pillar:hover h2{color:var(--wine-2);padding-left:.5rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pillar:hover h2{color:var(--rose)}}
@media (min-width:46rem){.pillar{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.pillar p{margin:0}}

.about{grid-column:1/-1;margin-top:1.5rem;padding-left:1.5rem;border-left:3px solid var(--wine-2);max-width:46rem}
.about h3{font:600 clamp(1.4rem,3vw,1.9rem)/1.2 var(--serif);margin:0 0 1rem;letter-spacing:-.01em}
.about h4{font:600 1.15rem/1.3 var(--serif);margin:1.5rem 0 .25rem}
.about p{margin:0;max-width:56ch}
.view[hidden]{display:none}
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;padding:1rem clamp(1.25rem,6vw,5rem);border-bottom:1px solid var(--line)}
.brand{font:italic 400 1.15rem var(--serif);text-decoration:none}
.links{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.links a{text-decoration:none;border-bottom:2px solid transparent;padding:.15rem 0}
.links a:hover,.links a[aria-current="page"]{border-color:currentColor}
.hero .row a{text-decoration:none;border-bottom:1px solid transparent}
.hero .row a:hover{border-color:currentColor}
a.pillar{text-decoration:none;color:inherit}
.page h1{font:600 clamp(3rem,10vw,7rem)/1 var(--serif);letter-spacing:-.03em;margin:0 0 1.5rem;color:var(--wine-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .page h1{color:var(--rose)}}
.lead{font:400 clamp(1.3rem,3vw,1.9rem)/1.35 var(--serif);max-width:30ch;margin:0}
.soon{margin:2.5rem 0 0;color:var(--muted);max-width:44ch}
.page .about{margin-top:3rem}
.join{background:var(--wine);color:var(--rose)}
.join .wrap{display:grid;gap:1.5rem}
.join h2{font:600 clamp(2rem,5vw,3.4rem)/1.05 var(--serif);margin:0;letter-spacing:-.02em;max-width:18ch}
.join p{margin:0;max-width:46ch;color:var(--rose)}
.btn{justify-self:start;display:inline-block;background:var(--rose);color:var(--wine);text-decoration:none;font-weight:500;padding:.95rem 1.6rem;border-radius:999px;transition:background .2s}
.btn:hover{background:#fff}
.actions{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
.mail{color:var(--rose);font-weight:500;text-underline-offset:4px}

footer{padding:2rem clamp(1.25rem,6vw,3rem);text-align:center;color:var(--muted);font-size:.95rem}
footer span{font-family:var(--serif);font-style:italic}

@media (prefers-reduced-motion:no-preference){
  .hero h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}