/* Holding page. Colours are the brand-sites-layer `gatolabs` (dark, the
   brand's default ground) and `gatolabs-light` themes. Keep them in step with
   brand-sites-layer/brands/gatolabs.json. */
:root {
  color-scheme: dark;
  --bg: #0b0c0e;
  --text: #e8eaed;
  --muted: #9ba3ad;
  --link: #e8a33d;
  --link-hover: #efbb63;
  --mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --text: #14171a;
    --muted: #5a626b;
    --link: #875313;
    --link-hover: #5e3a0f;
  }
}

* { box-sizing: border-box; }

html { background: var(--bg); color: var(--text); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  font: 1rem/1.6 var(--mono);
}

main { width: min(100%, 36rem); }

h1 { margin: 0 0 2rem; line-height: 0; }

h1 img { width: min(100%, 20rem); height: auto; }

.lede { margin: 0 0 0.5rem; font-size: 1.125rem; }

.meta {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

ul { margin: 0; padding: 0; list-style: none; color: var(--muted); }

li + li { margin-top: 0.25rem; }

a {
  color: var(--link);
  text-underline-offset: 0.2em;
}

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

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 0.125rem;
}