:root {
  --night: #08070c;
  --ink: #eeeaf6;
  --muted: rgba(238, 234, 246, 0.62);
  --violet: #7b4dff;
  --magenta: #e0458f;
  --peach: #ffb48a;
  --rule: rgba(238, 234, 246, 0.14);
  --display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --w-mark: 700;
  --w-statement: 600;
  --w-line: 600;
  --t-statement: -0.05em;
  --t-line: -0.06em;
  --lh-line: 0.98;
  --k: 0.92;       /* size multiplier for statement and manifesto lines */
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

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

html { background: var(--night); color: var(--ink); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--night);
  font-family: var(--display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--magenta); color: var(--night); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 48%, #150f24 0%, var(--night) 70%);
}

#orbit { position: absolute; inset: 0; width: 100%; height: 100%; }

.hud {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto auto;
  padding: var(--gutter);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.wordmark {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--display);
  font-weight: var(--w-mark);
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em;
  text-transform: none;
}
.hud-tr { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; color: var(--muted); }

.statement {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 13em;
  margin: 0 0 32px;
  font-family: var(--display);
  font-weight: var(--w-statement);
  font-size: calc(clamp(38px, 5.8vw, 92px) * var(--k));
  line-height: 0.98;
  letter-spacing: var(--t-statement);
  text-transform: none;
}

.hud-bl { grid-column: 1; grid-row: 4; align-self: end; color: var(--muted); }
.hud-br { grid-column: 2; grid-row: 4; display: grid; justify-items: end; gap: 6px; }
.hud-br .label { color: var(--muted); }
.hud-br .count { font-size: 15px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--peach); }
.hud-br .count.bump { animation: bump 1.2s ease-out; }
@keyframes bump { 0% { color: var(--ink); text-shadow: 0 0 12px rgba(255, 180, 138, 0.8); } 100% { color: var(--peach); text-shadow: none; } }

/* ---------- Manifesto ---------- */
.manifesto { padding: 22vh var(--gutter) 16vh; max-width: 1280px; margin: 0 auto; }

.line {
  margin: 0;
  font-weight: var(--w-line);
  font-size: calc(clamp(44px, 8.4vw, 136px) * var(--k));
  line-height: var(--lh-line);
  letter-spacing: var(--t-line);
}
.grad {
  background: linear-gradient(90deg, var(--violet), var(--magenta) 50%, var(--peach));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}

.prose {
  max-width: 36em;
  margin: 72px 0 0 auto;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .line.reveal:nth-child(2) { transition-delay: .1s; }
.js .line.reveal:nth-child(3) { transition-delay: .2s; }

/* ---------- Footer ---------- */
.footer { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter) 28px; }
.contact {
  display: inline-block;
  margin-bottom: 48px;
  font-weight: var(--w-statement);
  font-size: clamp(22px, 6vw, 84px);
  overflow-wrap: anywhere;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s;
}
.contact:hover, .contact:focus-visible { color: var(--peach); }
.contact[hidden] { display: none; }

.foot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-row span:nth-child(2) { text-align: right; }

a:focus-visible { outline: 2px solid var(--peach); outline-offset: 6px; }

@media (max-width: 720px) {
  .statement { margin-bottom: 24px; }
  .hud-tr { text-align: right; line-height: 1.6; }
  .hud-tr span { display: block; }
  .hud-tr .sep { display: none; }
  .prose { margin-left: 0; }
  .foot-row { grid-template-columns: 1fr; gap: 6px; }
  .foot-row span:nth-child(n) { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-br .count.bump { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}