/*
 * lura.link root and 404 styling.
 *
 * EXTERNALISED FROM BOTH PAGES so the host can carry an ENFORCED
 * deny-by-default Content-Security-Policy. An inline <style> block needs either
 * `style-src 'unsafe-inline'` or a per-response nonce; this host is static
 * files on Firebase Hosting, so there is no nonce, and `'unsafe-inline'` is a
 * broad exception bought for two pages of layout. Moving the bytes to a file
 * costs one request on a page nobody stays on and buys `style-src 'self'`.
 *
 * ONE FILE FOR BOTH PAGES because they are the same page with one sentence
 * different. They were two identical copies of this block, and the dark-mode
 * asset path was wrong in both — which is what two copies buys.
 *
 * No webfonts, deliberately: the system stack renders instantly and needs no
 * `font-src`, so the policy can deny it outright.
 */
:root {
  --ground: #f7f4ef;
  --ink: #16181b;
  --muted: #6b655c;
  --link: #97522c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121110;
    --ink: #f7f4ef;
    --muted: #a39b90;
    --link: #e3a87f;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

main {
  max-width: 32rem;
  padding: 2rem;
  text-align: center;
}

img.mark {
  width: 64px;
  height: auto;
  margin-bottom: 1.25rem;
}

/*
 * The dark mark lives under /assets/ like every other file on this host — the
 * lura.link root path space belongs to SLUGS, and validate-quality-contracts.js
 * enforces that only index.html and 404.html sit beside it.
 *
 * Both pages asked for `/mark-on-dark.png`, at the root. That path 404s, and a
 * 404 on an `img` in dark mode renders as a broken image directly above the
 * wordmark. It was invisible in review because the light path was correct and
 * nobody opened the page in dark mode.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.mark {
    content: url("/assets/mark-on-dark.png");
  }
}

h1 {
  font-size: 2rem;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

p {
  font-size: 1.1rem;
  margin: 0 0 1rem;
}

.hint {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 0;
}

a {
  color: var(--link);
}

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