:root {
  --bg: #fffaf5;
  --fg: #241c17;
  --muted: #6d5c50;
  --rule: #e8dbcf;
  --accent: #c2410c;
  --card: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16110e;
    --fg: #f2e9e1;
    --muted: #a8968a;
    --rule: #33261e;
    --accent: #fb923c;
    --card: #1f1813;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

header.site {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

header.site a.brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
}

header.site nav {
  display: flex;
  gap: 1rem;
  font-size: 0.95rem;
  margin-left: auto;
}

header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover { color: var(--accent); }

h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 1.2rem;
  color: var(--muted);
  margin: 0 0 2rem;
}

.updated {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 2.5rem;
}

a { color: var(--accent); }

ul { padding-left: 1.25rem; }
li { margin: 0.4rem 0; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.card h2 { margin-top: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
}

th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th { font-weight: 600; }

footer.site {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}

footer.site a { color: var(--muted); }


/* ---------------------------------------------------------------------------
   The link-in-bio signup page (/join/).
   Dark regardless of system theme: it is a sunset, and a cream page with a
   sunset band pasted on top reads as a widget rather than a sky.
   --------------------------------------------------------------------------- */

body.join {
  background: #100b09;
  color: #f6ede4;
  min-height: 100svh;
}

.joinwrap {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* The sky. Bands rather than a smooth ramp, because a real sunset has an
   orange floor, a rose middle and an indigo top with visible edges between
   them; one continuous gradient reads as a colour picker. */
.sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      to bottom,
      #1a1030   0%,
      #2b1442  22%,
      #5b2154  42%,
      #9c3446  58%,
      #cf5327  72%,
      #ef8a2c  84%,
      #f8bd5e 100%
    );
}

.sun {
  position: absolute;
  left: 50%;
  bottom: -8vmax;
  width: 30vmax;
  height: 30vmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3d0 0%, #ffd486 45%, #f9a63e 72%, rgba(249,166,62,0) 73%);
  filter: blur(1px);
  opacity: 0.95;
}

/* SVG grain. Kills the banding a wide gradient shows on an OLED phone, and
   is the same trick the post renderer uses — so the page and the content it
   is linked from share a texture. */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Warm indigo scrim, never black — a neutral scrim greys the sunset it is
   protecting. Weighted to the bottom, where the sky turns bright orange and
   the small print sits; near the top the sky is dark enough on its own and a
   heavy scrim there just turns the whole page into a grey card. */
.joininner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  background: linear-gradient(
    to bottom,
    rgba(20,13,34,0.28)  0%,
    rgba(20,13,34,0.46) 45%,
    rgba(20,13,34,0.70) 74%,
    rgba(20,13,34,0.60) 92%,
    rgba(20,13,34,0.34) 100%
  );
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);

  /* Full-bleed on a phone: the scrim has to reach both edges of the screen,
     or it stops at whatever height the copy happens to be and leaves a hard
     seam against the raw sky — at a position that moves with device height.
     Easing the last two stops lets the sun glow up through the footer
     instead of the scrim ending in a line. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* On anything wider than a phone it becomes a floating card instead, and
   the full-bleed height rule is dropped so it hugs its content. */
@media (min-width: 30rem) {
  .joininner {
    margin: 3rem auto;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.10);
    padding: 2.5rem 2rem 2rem;
    min-height: 0;
    display: block;
  }
}

.wordmark {
  margin: 0 0 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffc98a;
}

body.join h1 {
  font-size: clamp(1.9rem, 8.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.3);
}

/* Type carries its own contrast rather than relying on the scrim alone —
   the same rule the post renderer uses, and what lets the scrim stay light
   enough for the sky to read through it. */
body.join .lede {
  font-size: 1.02rem;
  line-height: 1.55;
  color: #ece0d5;
  margin: 0 0 2rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

body.join .wordmark,
body.join label,
.consent,
.joinfoot a,
.done p {
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

body.join label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
  color: #f2e4d6;
}

body.join label .opt {
  font-weight: 400;
  color: #b6a294;
}

body.join input[type="email"],
body.join input[type="tel"],
body.join input[type="text"] {
  width: 100%;
  /* Longhands, not the `font` shorthand: `inherit` is not a legal component
     value inside a shorthand, so `font: 16px/1.4 inherit` is invalid and the
     browser drops the whole declaration — which silently left these at the
     UA default of 13.33px Arial. Under 16px, iOS Safari zooms the page on
     focus and does not zoom back out. */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 11px;
  padding: 0.85rem 0.9rem;
  margin: 0 0 1.1rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background 0.15s;
}

body.join input::placeholder { color: #9c8b7e; }

body.join input:focus {
  outline: none;
  border-color: #f9a63e;
  background: rgba(255,255,255,0.13);
  box-shadow: 0 0 0 3px rgba(249,166,62,0.22);
}

body.join input.bad {
  border-color: #ff8b7a;
  background: rgba(255,139,122,0.10);
}

.err {
  margin: -0.8rem 0 1rem;
  font-size: 0.85rem;
  color: #ffb0a3;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields they can tell are hidden. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body.join button {
  width: 100%;
  /* Longhands here for the same reason as the inputs above. */
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  color: #2a1408;
  background: linear-gradient(to bottom, #ffc46b, #f79a2c);
  border: none;
  border-radius: 11px;
  padding: 1.05rem 1rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 6px 20px rgba(247,154,44,0.28);
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}

body.join button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 12px rgba(247,154,44,0.24);
}

body.join button:disabled {
  opacity: 0.6;
  cursor: default;
}

.consent {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #a89485;
}

.consent a { color: #d3ba9f; }

.done {
  padding: 1rem 0 0.5rem;
}

.donemark {
  margin: 0 0 0.75rem;
  font-size: 2rem;
  line-height: 1;
  color: #ffc46b;
}

.done h2 {
  margin: 0 0 0.6rem;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.done p {
  margin: 0;
  color: #e2d2c4;
  font-size: 0.98rem;
}

.joinfoot {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-size: 0.82rem;
}

.joinfoot a {
  color: #b6a294;
  text-decoration: none;
}

.joinfoot a:hover { color: #ffc46b; }

@media (prefers-reduced-motion: reduce) {
  body.join *, body.join *::before, body.join *::after {
    transition: none !important;
    animation: none !important;
  }
}