/* Generated per domain from src/css/base.css + src/css/placeholder.css.
   Edit those, not this. The two custom properties below are the only thing
   that differs between one domain's stylesheet and another's. */
:root {
  --accent: #a16207;
  --accent-lift: #cba977;
  --wordmark-fit: 10.12vw;
}

/*
 * Ground, ink and the accent roles. Shared by the placeholder pages and by the
 * staging directory at the output root.
 *
 * Read this as if `--accent` and `--accent-lift` are already defined — they
 * are, in a `:root` block the stylesheet template prepends. The accent is the
 * one thing that varies per domain, and it arrives as generated CSS rather
 * than a `style` attribute because `style-src 'self'` in _headers drops those
 * silently: build green, local render correct, live page grey.
 */

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

:root {
  --ground: #fdfdfc;
  --ink: #16161a;
  --ink-soft: #6b6b76;
  --hairline: #e3e3df;

  /* Accent role for anything that has to stay legible. Swapped for the lifted
     variant in dark mode — several accents (the navy most of all) are far too
     dark to read against a dark ground. */
  --accent-ui: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101013;
    --ink: #f4f4f2;
    --ink-soft: #8b8b95;
    --hairline: #2a2a30;
    --accent-ui: var(--accent-lift);
  }
}

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

body {
  margin: 0;
  min-height: 100vh;
  /* Small-viewport unit, so mobile browser chrome cannot push the composition
     off-centre. Second, so an older browser keeps the vh line above. */
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 6vw, 4rem);

  background: var(--ground);
  /* A wash of accent from above the fold. Layered declaration second, so a
     browser without color-mix() keeps the flat ground and loses only this. */
  background:
    radial-gradient(
      70rem 34rem at 50% -14%,
      color-mix(in srgb, var(--accent-ui) 9%, transparent),
      transparent 70%
    ),
    var(--ground);

  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

/* A hairline of accent across the top of the viewport. One rule, and it does
   more than any other here to separate "designed" from "blank". */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent-ui);
}

.serif {
  font-family: ui-serif, Charter, "Bitstream Charter", "Iowan Old Style",
    Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}

/*
 * The placeholder page itself: a domain name, a rule, and on the 404 one line
 * of small caps.
 *
 * There is deliberately no other content, so type and space are the entire
 * design. No cards, no shadows, no icons, no webfont, no JavaScript.
 */

.page {
  width: 100%;
  /* No tight measure here. The only content is the wordmark, and a 46rem cap
     was forcing the longest domains to wrap even at sizes that would have fit
     the viewport. Length is controlled by font-size instead — see below. */
  max-width: 72rem;
  text-align: center;
}

.wordmark {
  margin: 0;
  /*
   * `--wordmark-fit` is generated per domain from its character count: the
   * size at which this particular name spans most of the viewport on one line.
   * The domains here run from 8 characters (gsrs.pro) to 25
   * (atalantarunningsociety.com), which at a single fixed size is the
   * difference between looking sparse and wrapping mid-syllable.
   *
   * The floor keeps short names from turning into body text on a phone; the
   * ceiling keeps long ones from turning into a poster on a monitor.
   */
  font-size: clamp(1.5rem, var(--wordmark-fit), 4.75rem);
  line-height: 1.06;
  /*
   * `break-word`, not `anywhere`: it breaks inside a word only when the word
   * cannot fit a line by itself, so the <wbr> before the TLD is preferred and
   * a name that must wrap does so at the dot — "stopvotingrepublican" / ".com"
   * rather than "stopvotingrepublican.co" / "m", which is what shipped the
   * first time this was rendered.
   */
  overflow-wrap: break-word;
}

.wordmark-tld {
  color: var(--accent-ui);
}

/* The rule under the wordmark. A pseudo-element so the markup stays down to a
   single heading — an empty <div> or an <hr> would put pure decoration into
   the accessibility tree for nothing. */
.wordmark::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  border-radius: 2px;
  background: var(--accent-ui);
}

/* Used only by 404.html. The placeholder itself has nothing to say. */
.note {
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.note a {
  color: inherit;
  text-decoration-color: var(--accent-ui);
  text-underline-offset: 0.3em;
}

.note a:hover,
.note a:focus-visible {
  color: var(--ink);
}