:root {
  --ink: #111111;
  --paper: #F3F1EC;
  --white: #FFFFFF;
  --accent: #A8441F;
  --text-body: #2A2925;
  --text-muted: #4A4843;
  --placeholder: #6B6862;
  --rule-soft: #C9C5BC;
  --on-ink-muted: #CFCBC2;
  --error: #A8441F;

  --font-sans: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-logo: 'Space Grotesk', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.page { min-height: 100vh; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.dot-lg { width: 14px; height: 14px; }
.accent { color: var(--accent); }

/* Header */
.site-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px; padding: 28px 0; border-bottom: 2px solid var(--ink);
}
.logo {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--font-logo); font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
}
.logo svg { color: var(--accent); }
.status-pill {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Hero */
.hero {
  display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end;
  padding: clamp(48px, 8vw, 104px) 0 64px;
}
.hero-copy { flex: 999 1 620px; min-width: 0; container-type: inline-size; }
.hero-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.eyebrow {
  margin: 0 0 24px; font-family: var(--font-mono); font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
}
h1 {
  margin: 0; font-weight: 900; font-size: clamp(40px, 13cqi, 116px);
  line-height: 0.92; letter-spacing: -0.045em;
}
.lede { margin: 0; font-size: 20px; line-height: 1.5; color: var(--text-body); }

/* Signup form */
.signup { display: flex; flex-direction: column; gap: 10px; }
.signup-label {
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
}
.signup-row { display: flex; flex-wrap: wrap; gap: 8px; }
.signup input[type="email"] {
  flex: 1 1 220px; min-width: 0; height: 56px; padding: 0 18px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--white);
  font: inherit; font-size: 17px; color: var(--ink);
}
.signup input[type="email"]::placeholder { color: var(--placeholder); }
.signup input[type="email"][aria-invalid="true"] { border-color: var(--error); }
.signup button {
  height: 56px; padding: 0 28px; border: 2px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--white);
  font: inherit; font-weight: 800; font-size: 17px; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.signup button:hover { background: var(--accent); border-color: var(--accent); }
.signup button:disabled { cursor: progress; opacity: .7; }
.signup-msg {
  margin: 0; min-height: 1.5em; font-family: var(--font-mono); font-size: 13px; line-height: 1.5;
}
.signup-msg:empty { display: none; }
.signup-msg.is-error { color: var(--error); }
.cf-turnstile:empty { display: none; }

.signup-done {
  border: 2px solid var(--ink); background: var(--white); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.signup-done strong { font-weight: 900; font-size: 24px; letter-spacing: -0.02em; }
.signup-done span { font-size: 17px; line-height: 1.5; color: var(--text-body); }

/* Ticker */
.ticker {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 28px 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px 32px; font-weight: 900; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -0.03em;
}

/* Once the row would wrap, lay the four phrases out as a grid, each led by its dot. */
@media (max-width: 860px) {
  .ticker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .ticker > .dot { display: none; }
  .ticker > span:not(.dot) { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
  .ticker > span:not(.dot)::before {
    content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none;
  }
}
@media (max-width: 400px) {
  .ticker { font-size: 24px; gap: 14px 16px; }
  .ticker > span:not(.dot) { gap: 10px; }
}
@media (max-width: 340px) {
  .ticker { grid-template-columns: 1fr; }
}

/* Steps */
.steps {
  padding: 64px 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px;
}
.step { display: flex; flex-direction: column; gap: 12px; }
.step-num { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.step h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-body); }

/* Artist CTA */
.artist-cta {
  background: var(--ink); color: var(--paper); padding: clamp(32px, 5vw, 56px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 24px; margin-bottom: 64px;
}
.artist-cta-copy { flex: 1 1 420px; min-width: 0; }
.artist-cta h2 {
  margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; letter-spacing: -0.03em;
}
.artist-cta p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--on-ink-muted); }
.artist-cta-btn {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px;
  background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 17px;
}
.artist-cta-btn:hover { background: var(--accent); color: var(--white); }
.artist-cta-btn:focus-visible { outline-color: var(--paper); }

/* Footer */
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 24px 0 40px; border-top: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: 13px; color: var(--text-muted);
}