:root{
  --paper:#F7F6F2;--sand:#F0ECE3;
  --ink:#1A1714;--ink-soft:#5C564C;--mute:#76746C;--faint:#9C9A92;
  --hair:rgba(26,23,20,.10);
  --accent:#B0573A;--accent-line:rgba(176,87,58,.22);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(120% 60% at 50% 0%,var(--sand) 0%,var(--paper) 58%);
  min-height:100svh;
}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit;text-decoration:none}

.sheet{max-width:34rem;margin:0 auto;
  padding:clamp(1.6rem,4vh,3rem) clamp(1.4rem,5vw,2rem) clamp(2.5rem,6vh,4rem)}

.topnav{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:clamp(2.5rem,7vh,4.5rem)}
.brand-link{font-family:var(--serif);font-weight:500;font-size:1.35rem;
  letter-spacing:-0.02em}
.topnav-link{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--accent-line);padding-bottom:3px;
  transition:color .18s ease,border-color .18s ease}
.topnav-link:hover{color:var(--accent);border-color:var(--accent)}

.label{font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.lead h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,6vw,3rem);line-height:1.08;letter-spacing:-0.016em;
  margin:0 0 1rem}
.lead .sub{font-size:clamp(1rem,2vw,1.12rem);line-height:1.55;
  color:var(--ink-soft);margin:0 0 clamp(2rem,5vh,3rem)}

/* Author display:flex beats the UA [hidden] rule (no !important there), so
   without this the form stays on screen after signup with the button stuck
   on "Joining…" while the confirm section paints underneath it. */
[hidden]{display:none!important}
.waitlist{display:flex;flex-direction:column;gap:1.15rem;margin:0}
.field{display:flex;flex-direction:column;gap:.45rem;text-align:left}
.field label{font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.field .opt{color:var(--faint);letter-spacing:.1em;text-transform:none}
.field input,.field textarea{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.02em;color:var(--ink);
  background:rgba(255,255,255,.6);border:1px solid var(--hair);border-radius:10px;
  padding:.8rem 1rem;outline:none;width:100%;resize:vertical;
  transition:border-color .18s ease;-webkit-appearance:none;appearance:none}
.field ::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{border-color:var(--accent)}

.waitlist-btn{font-family:var(--mono);font-size:.8rem;font-weight:500;
  letter-spacing:.06em;color:var(--paper);background:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:.85rem 1.5rem;
  cursor:pointer;align-self:flex-start;transition:opacity .18s ease}
.waitlist-btn:hover{opacity:.88}
.waitlist-btn:disabled{opacity:.55;cursor:default}
.waitlist-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.waitlist-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  margin:.9rem 0 0;min-height:1.1em;color:var(--ink-soft)}
.waitlist-note.err{color:var(--accent)}
/* Throttling is not an error: full-strength ink rather than the accent the
   error state uses, so a visitor reads "try again shortly" as an instruction
   and not as a fault. */
.waitlist-note.warn{color:var(--ink)}

.confirm h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,6vw,3rem);line-height:1.08;letter-spacing:-0.016em;
  margin:0 0 1rem}
.confirm .sub{font-size:clamp(1rem,2vw,1.12rem);line-height:1.55;
  color:var(--ink-soft);margin:0 0 2rem}
.confirm .sub a,.confirm-email{color:var(--accent)}
.back-link{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);display:inline-block;
  border-bottom:1px solid var(--accent-line);padding-bottom:3px;
  transition:color .18s ease,border-color .18s ease}
.back-link:hover{color:var(--accent);border-color:var(--accent)}

.foot{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:.6rem 1.4rem;
  margin-top:clamp(3rem,8vh,4.5rem);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.foot-links a{color:var(--ink-soft);transition:color .18s ease}
.foot-links a:hover{color:var(--accent)}
.mail-quiet{color:var(--ink-soft);border-bottom:1px solid var(--accent-line);
  padding-bottom:3px;letter-spacing:.18em;font-size:.68rem;
  transition:color .18s ease,border-color .18s ease}
.mail-quiet:hover{color:var(--accent);border-color:var(--accent)}

.rise{opacity:0;transform:translateY(14px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
}