:root {
  --bg:    #0F0D0A;
  --cream: #F2EBDE;
  --muted: #8A857C;
  --body:  #CFC8BC;
  --line:  #3A352E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: "Averia Serif Libre", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cream); color: var(--bg); }

/* ---- Logo ---- */
.logo {
  position: fixed;
  top: clamp(20px, 3.4vh, 36px);
  left: clamp(24px, 5vw, 56px);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 18px;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  z-index: 10;
}
.logo svg { width: 24px; height: 24px; display: block; flex: none; }

/* ---- Nav ---- */
.nav {
  position: fixed;
  top: clamp(22px, 3.4vh, 38px);
  right: clamp(24px, 5vw, 56px);
  display: flex;
  gap: clamp(16px, 3vw, 28px);
  font-size: 14px;
  z-index: 10;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.nav a:hover { color: var(--cream); }
.nav a[aria-current="page"] { color: var(--cream); }

/* ---- Page ---- */
.page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 16vh, 160px) clamp(24px, 6vw, 56px) clamp(48px, 8vh, 96px);
}
/* Long, scrolling pages start at the top instead of centring */
.page.read { align-items: flex-start; }

article {
  max-width: 600px;
  margin: 0 auto;
  animation: fade 1.1s ease forwards;
}

h1 {
  font-size: clamp(26px, 3.6vmin, 38px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(22px, 3.4vh, 36px);
}
h1 em { font-style: italic; font-weight: 400; }

p {
  font-size: clamp(14px, 1.9vmin, 17px);
  line-height: 1.7;
  color: var(--body);
  margin: 0 0 1.15em;
}

.sign {
  margin-top: clamp(22px, 3.4vh, 36px);
  color: var(--muted);
}
.sign .name { color: var(--cream); }

/* ---- Lead line under a page title ---- */
.lead {
  font-size: clamp(15px, 2.1vmin, 18px);
  color: var(--cream);
  margin: 0 0 clamp(30px, 5vh, 48px);
}

/* ---- FAQ ---- */
.qa { margin: 0 0 clamp(26px, 4vh, 40px); }
.qa:last-of-type { margin-bottom: 0; }
.qa h2 {
  font-size: clamp(17px, 2.2vmin, 21px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .55em;
  color: var(--cream);
}
.qa p:last-child { margin-bottom: 0; }

/* ---- Dispatches ---- */
.entry {
  padding: clamp(28px, 4.5vh, 44px) 0;
  border-top: 1px solid var(--line);
}
.entry:first-of-type { border-top: 0; padding-top: 0; }
.entry .date {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1em;
}
.entry h2 {
  font-size: clamp(18px, 2.4vmin, 23px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 .7em;
  color: var(--cream);
}
.entry p:last-child { margin-bottom: 0; }

/* ---- Waitlist ---- */
.invite {
  margin-top: clamp(30px, 5vh, 52px);
  max-width: 400px;
}
.invite form {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  transition: border-color .3s ease;
}
.invite form:focus-within { border-color: var(--cream); }
.invite input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  padding: 10px 0;
  color: var(--cream);
  font-family: inherit;
  font-size: 16px;
}
.invite input::placeholder { color: var(--muted); }
.invite button {
  flex: none;
  background: var(--cream);
  color: var(--bg);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  margin: 6px 0;
  transition: opacity .2s ease;
}
.invite button:hover { opacity: .82; }
.invite .done {
  color: var(--cream);
  font-size: 15px;
  margin: 0;
}
.invite .failed {
  color: var(--cream);
  opacity: .7;
  font-size: 14px;
  margin: 10px 0 0;
}
.invite[data-sent] form { display: none; }
.invite:not([data-sent]) .done { display: none; }
/* The form stays visible on failure — the address is still in the field and
   the retry is one tap. Only the message appears. */
.invite:not([data-failed]) .failed { display: none; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { article { animation: none; } }