/* Generated from src/css/base.css + src/css/directory.css for the staging
   directory at the output root. Edit those, not this.

   The neutral accent below is this page's own — it belongs to no domain, and
   picking any one domain's colour for the chrome of a list of sixteen would be
   arbitrary. The per-domain swatches are the generated rules at the bottom. */
:root {
  --accent: #5b5b66;
  --accent-lift: #a5a5ab;
}

/*
 * 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 staging directory at the output root.
 *
 * Never served from a real domain: Cloudflare publishes `_site/<domain>/`, one
 * level down, and never sees this page. It exists so the GitHub Pages copy of
 * `main` is clickable instead of requiring a hand-typed path per domain.
 *
 * The per-domain swatch on each row comes from generated `.d-<domain>` rules
 * appended by src/directory-style.njk — for the same reason the accent is
 * generated everywhere else here, a `style` attribute would be dropped by the
 * CSP without a word.
 */

.directory {
  width: 100%;
  max-width: 62rem;
}

.directory-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.directory-lede {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  max-width: 36rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.directory-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.directory-list a {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--swatch, var(--accent-ui));
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.15s;
}

.directory-list a:hover,
.directory-list a:focus-visible {
  border-color: var(--swatch, var(--accent-ui));
}

.directory-note {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  max-width: 36rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.directory-note code {
  font-size: 0.95em;
}

/* One rule per domain, so each row carries its own accent on the left edge.
   Generated rather than written as a style attribute because `style-src 'self'`
   drops those without a word — the same constraint that shapes every other
   stylesheet in this project. */
.d-atalantarunningsociety-com { --swatch: #0f766e; }
.d-bashfulbanana-cafe { --swatch: #b45309; }
.d-blobfest-org { --swatch: #b91c1c; }
.d-cloudappointment-com { --swatch: #1d4ed8; }
.d-dylankroon-com { --swatch: #4338ca; }
.d-emmariekroon-com { --swatch: #a21caf; }
.d-gavin-kroon-com { --swatch: #15803d; }
.d-gottajot-com { --swatch: #0369a1; }
.d-gsrs-pro { --swatch: #c2410c; }
.d-hammontoninn-com { --swatch: #5b21b6; }
.d-mamalean-com { --swatch: #be185d; }
.d-paulandaileen-com { --swatch: #a16207; }
.d-requestscloud-com { --swatch: #0e7490; }
.d-runninggrrls-com { --swatch: #7e22ce; }
.d-stopvotingrepublican-com { --swatch: #1e3a8a; }
.d-womenrunmontco-com { --swatch: #047857; }

@media (prefers-color-scheme: dark) {
  .d-atalantarunningsociety-com { --swatch: #7bb4af; }
  .d-bashfulbanana-cafe { --swatch: #d6a078; }
  .d-blobfest-org { --swatch: #d98282; }
  .d-cloudappointment-com { --swatch: #839eea; }
  .d-dylankroon-com { --swatch: #9892e2; }
  .d-emmariekroon-com { --swatch: #cc82d3; }
  .d-gavin-kroon-com { --swatch: #7eb994; }
  .d-gottajot-com { --swatch: #74adcb; }
  .d-gsrs-pro { --swatch: #dd9779; }
  .d-hammontoninn-com { --swatch: #a585d7; }
  .d-mamalean-com { --swatch: #db80a6; }
  .d-paulandaileen-com { --swatch: #cba977; }
  .d-requestscloud-com { --swatch: #7ab3c2; }
  .d-runninggrrls-com { --swatch: #b885e4; }
  .d-stopvotingrepublican-com { --swatch: #8393bf; }
  .d-womenrunmontco-com { --swatch: #75b5a3; }
}