:root{
  --paper:#ffffff;
  --ink:#111111;
  --muted:#767066;
  --line:#e8e3da;
  --field:#d8d2c8;
  --accent:#8b5e3c;      /* clay/terracotta — the one warm accent, legible on white */
  --accent-rgb:139,94,60;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif','Times New Roman',serif;
  --pad:clamp(22px,6vw,88px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100svh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}

.tag{
  font-size:11px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--accent);
}

/* nav */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  border-bottom:1px solid var(--line);
}
.nav-logo{
  font-size:14px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
}
.nav-links{display:flex; gap:28px;}
.nav-links a{
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .3s ease, color .3s ease;
}
.nav-links a:hover{color:var(--accent);}
.nav-links a[aria-current="page"]{border-color:var(--accent); color:var(--accent);}

main{padding:clamp(48px,10vw,96px) var(--pad) clamp(64px,9vw,120px);}
.page{padding:clamp(56px,10vw,104px) var(--pad) clamp(72px,10vw,128px); max-width:900px;}

h1{
  margin:0;
  font-weight:500;
  font-size:clamp(3rem,11vw,9rem);
  line-height:.92;
  letter-spacing:-0.005em;
  text-transform:uppercase;
}
h1 span{display:block;}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.4rem,3.2vw,2.2rem);
  line-height:1.2;
  color:var(--accent);
  margin:clamp(22px,4vw,36px) 0 0;
}
.sub{max-width:56ch; color:var(--muted); margin:14px 0 0;}

.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:17px 34px;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.cta:hover{background:var(--accent); border-color:var(--accent); color:#fff;}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.cta-row{display:flex; flex-direction:column; gap:14px;
         margin-top:clamp(30px,5vw,44px); max-width:420px;}

.cta-outline{background:transparent; color:var(--ink);}
.cta-outline:hover{background:var(--ink); color:#fff; border-color:var(--ink);}

button.cta{
  font-family:inherit; appearance:none; -webkit-appearance:none;
  cursor:pointer;
}
button.cta:disabled{opacity:.6; cursor:default;}

.join-group{display:flex; flex-direction:column; width:100%;}
.join-note{
  margin:0 0 10px; font-size:12px; color:var(--muted);
  letter-spacing:.01em;
}

.join-form{display:flex; flex-direction:column; gap:10px; width:100%;}
.join-input{
  background:#fff; color:var(--ink); font-family:var(--sans);
  font-size:14px; padding:0 18px; height:54px; width:100%;
  border:1px solid var(--field);
  outline:none; transition:border-color .3s ease;
}
.join-input::placeholder{color:#a29c90;}
.join-input:focus{border-color:var(--ink);}
.join-input:invalid:not(:placeholder-shown){border-color:#b4503c;}
.join-form .cta{width:100%;}

.join-msg{
  margin:12px 0 0; font-size:13px; color:var(--accent);
  min-height:1em;
}

.bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
        border-top:1px solid var(--line); padding:24px var(--pad);}
.bottom a:hover{color:var(--accent);}

.about-copy{max-width:64ch;}
.about-copy p{margin:16px 0 0; color:var(--muted); font-size:clamp(1rem,1.5vw,1.05rem); line-height:1.75;}
.about-copy p:first-of-type{margin-top:20px;}
.about-copy .close{
  font-family:var(--serif); color:var(--accent);
  font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.35;
  margin-top:clamp(24px,4vw,32px);
}
.about-copy .sign{
  font-family:var(--serif); font-style:italic; color:var(--ink);
  font-size:clamp(1.1rem,2vw,1.3rem); margin-top:10px;
}

/* load-in */
.rise{opacity:0; transform:translateY(16px); animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.08s;} .d2{animation-delay:.18s;} .d3{animation-delay:.28s;} .d4{animation-delay:.38s;}
@keyframes rise{to{opacity:1; transform:none;}}

@media (prefers-reduced-motion: reduce){
  .rise{opacity:1; transform:none; animation:none;}
  .cta{transition:none;}
}

@media (max-width: 640px){
  .nav{padding:18px 20px;}
  .nav-links{gap:18px;}
}