/* Genclude — one page.
   System fonts only: nothing is fetched from a third party, so the page has no
   external dependency to break, to slow it down, or to leak a visitor's IP. */

:root {
  --bg: #ffffff;
  --bg-glow: rgba(99, 91, 255, 0.07);
  --ink: #0a0b0d;
  --ink-soft: #4a4f57;
  --ink-faint: #8a9099;
  --rule: rgba(10, 11, 13, 0.10);
  --accent: #635bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b0d;
    --bg-glow: rgba(126, 118, 255, 0.11);
    --ink: #f6f7f9;
    --ink-soft: #a8afb9;
    --ink-faint: #6b727c;
    --rule: rgba(255, 255, 255, 0.12);
    --accent: #7e76ff;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;            /* svh keeps mobile browser chrome from clipping */
  min-height: 100vh;             /* fallback for older engines */
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* One soft wash of colour, placed high and off-centre. */
  background-image: radial-gradient(
    62rem 42rem at 50% -12%, var(--bg-glow), transparent 70%
  );
  background-repeat: no-repeat;
}

.shell {
  width: 100%;
  max-width: 42rem;
  text-align: center;
}

/* A single quiet mark, not a logo — the ring reads as a lens. */
.mark {
  width: 2rem;
  height: 2rem;
  margin: 0 auto clamp(2rem, 6vw, 3rem);
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0.9;
}

.eyebrow {
  margin: 0 0 clamp(1rem, 3vw, 1.5rem);
  font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.headline {
  margin: 0;
  font-size: clamp(1.875rem, 6.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--ink);
  /* Let the browser choose the break points and even out the lines, rather
     than hard-coding a <br> that collapses words together on narrow screens. */
  text-wrap: balance;
  max-width: 20ch;
  margin-inline: auto;
}

.rule {
  width: 2.5rem;
  margin: clamp(2rem, 6vw, 3rem) auto clamp(1.25rem, 3vw, 1.75rem);
  border: 0;
  border-top: 1px solid var(--rule);
}

.place {
  margin: 0;
  font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.sep { margin: 0 0.5rem; color: var(--ink-faint); }

@media (prefers-reduced-motion: no-preference) {
  .shell { animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(0.5rem); }
    to   { opacity: 1; transform: none; }
  }
}

@media print {
  body { background: #fff; color: #000; }
  .mark { border-color: #000; }
}