:root {
  /* color */
  --bg: #fcfbf9;
  --ink: #17130e;
  --ink-soft: #8b8378;
  /* type */
  --font-sans: 'Archivo', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --text-hero: clamp(30px, 4.2vw, 42px);
  --text-body: 15px;
  --text-wordmark: 17px;
  --text-micro: 11px;
  /* spacing */
  --stack-gap: 26px;
  --section-pad: 96px;
  /* eye field — read by script.js (with matching fallbacks) */
  --eye-size-min: 20;
  --eye-size-max: 185;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

::selection {
  background: #17130e;
  color: #fdfcfa;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  font-family: var(--font-sans);
  overflow-x: clip;
}

#eye-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-gap);
  text-align: center;
  padding: 64px 32px;
  max-width: 660px;
  pointer-events: auto;
}

.halo {
  position: absolute;
  inset: -70px -90px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--bg) 40%, rgba(252, 251, 249, 0.85) 62%, rgba(252, 251, 249, 0) 80%);
  pointer-events: none;
}

.wordmark {
  position: relative;
  font-size: var(--text-wordmark);
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--ink);
}

.headline {
  position: relative;
  margin: 0;
  font-size: var(--text-hero);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.subline {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
}

.hidden {
  display: none;
}

/* Phone tier: shrink type and tighten the copy block so it reads as a compact
   mobile hero rather than a scaled-down desktop one, and so the eye field's
   measured keep-out (script.js) shrinks along with it, leaving room for more
   eyeballs to come in close. */
@media (max-width: 560px) {
  :root {
    --text-hero: clamp(22px, 7.2vw, 30px);
    --text-wordmark: 12px;
    --text-micro: 9px;
    --text-body: 14px;
    --stack-gap: 16px;
  }
  .copy {
    padding: 28px 14px;
    max-width: 76vw;
  }
  .wordmark {
    letter-spacing: 0.24em;
  }
  .subline {
    letter-spacing: 0.18em;
  }
  .halo {
    inset: -36px -30px;
  }
}