/* Generated by scripts/build.mjs from site.json, shared/base.css and shared/holding.css. Edit there, then run npm run build. */

:root {
  --h-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h-bg: #ffffff;
  --h-surface: #ffffff;
  --h-ink: #16201e;
  --h-ink-2: #414b49;
  --h-muted: #5b6563;
  --h-border: #dfe6e4;
  --h-accent: #0f5c52;
  --h-glow: #e0efec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --h-bg: #101614;
    --h-surface: #1a2321;
    --h-ink: #e6ecea;
    --h-ink-2: #c3cdca;
    --h-muted: #9aa6a3;
    --h-border: #2b3533;
    --h-accent: #7fd6c6;
    --h-glow: #15332e;
  }
}

/* shared/base.css — the base every page built from shared/ starts from:
 * box model, text sizing, images, the skip link, visually hidden text, focus
 * rings and reduced motion. Colours and fonts come from the page's own tokens.
 * scripts/build.mjs copies it into the holding pages and andyedwards.uk. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 12px; z-index: 100; padding: 8px 14px; background: Canvas; color: CanvasText; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--focus, currentColor); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* shared/holding.css — the holding page every site shows on its production
 * hostnames while it is under construction. Brand colours and the display
 * face arrive as tokens from each site's site.json (see scripts/build.mjs). */

:root { color-scheme: light dark; --focus: var(--h-accent); }

body {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: 1fr auto;
  background:
    radial-gradient(70% 55% at 50% 0%, var(--h-glow), transparent 70%),
    var(--h-bg);
  color: var(--h-ink);
  font: 1.0625rem/1.6 var(--h-body);
}

.holding {
  align-self: center; justify-self: center;
  width: min(100% - 32px, 36rem);
  margin: 64px 0 40px; padding: 40px 28px 32px;
  background: var(--h-surface);
  border: 1px solid var(--h-border);
  border-top: 4px solid var(--h-accent);
  border-radius: 16px;
  text-align: center;
}
@media (min-width: 720px) { .holding { padding: 56px 48px 44px; } }

.holding-brand {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 28px;
  font: 700 1.15rem/1.2 var(--h-display); letter-spacing: -0.01em;
}
.holding-brand img { width: 40px; height: 40px; }

.holding h1 {
  margin: 0 0 16px;
  font: 700 clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem)/1.1 var(--h-display);
  font-stretch: var(--h-display-stretch, normal);
  letter-spacing: -0.02em;
}
.holding-lede { color: var(--h-ink-2); margin: 0 0 24px; }
.holding-contact { margin: 0; color: var(--h-muted); font-size: 0.975rem; }

a { color: var(--h-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--h-ink); }

.holding-foot { padding: 0 16px 32px; text-align: center; color: var(--h-muted); font-size: 0.925rem; }
.holding-foot p { margin: 0; }
.holding-foot a { color: var(--h-ink-2); }