:root {
  --ink: #2c1d0e;
  --ink-soft: #3b2a18;
  --bg: #1b1208;
}

* {
  box-sizing: border-box;
}

/* Self-hosted epic title font (Cinzel variable woff2), shared with ar-empire. */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/cinzel.woff2") format("woff2");
}

html {
  min-height: 100%;
  background-color: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--bg);
  color: var(--ink);
  text-align: center;
}

/* Single full-viewport hero. The background image is fingerprinted at startup
   and referenced from the stylesheet, so every visitor gets the same webp. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vw, 4rem);
  background-color: var(--bg);
  background-image: url("/bg?v=517a36bdb65d");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-inner {
  max-width: min(94vw, 72rem);
}

/* The page heading is visually a stack of three subtitle-sized lines. */
.hero-title {
  margin: 0;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.4rem);
}

.subtitle {
  margin: 0;
  color: var(--ink);
  text-shadow:
    0 1px 1px rgba(255, 248, 226, 0.7),
    0 0 18px rgba(255, 240, 200, 0.45);
}

/* Lead line: the largest of the three, but still subtitle-scale. */
.subtitle--lead {
  font-family: "Cinzel", "Trajan Pro", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 5.4vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-shadow:
    0 1px 1px rgba(255, 248, 226, 0.75),
    0 0 26px rgba(255, 240, 200, 0.5);
}

.subtitle--provisioning {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.7rem);
  letter-spacing: 0.14em;
}

.subtitle--domain {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.6vw, 1.15rem);
  letter-spacing: 0.34em;
  /* Offset the trailing letter-space so the line stays optically centered. */
  margin-left: 0.34em;
  color: var(--ink-soft);
}

/* Narrow screens: let the longest line wrap cleanly instead of shrinking it
   below a comfortable reading size. */
@media (max-width: 600px) {
  .subtitle--provisioning {
    font-size: clamp(0.95rem, 3.4vw, 1.2rem);
    letter-spacing: 0.08em;
    text-wrap: balance;
  }
}

/* Very narrow phones: keep the lead on one line too. */
@media (max-width: 360px) {
  .subtitle--lead {
    font-size: clamp(1.35rem, 7vw, 1.7rem);
    letter-spacing: 0.02em;
  }
}