/* Gamma Workshop LLC
   This site commits to a single dark treatment rather than following the
   viewer's system setting. Colour is from the brand sheet: the ground is the
   brand ink #0F1A20, text is the inverted ink #E6EEF1 the sheet specifies for
   dark grounds, and amber #C8891C is used at its exact brand value. The sheet
   is explicit that amber marks vias only and must not be spread around, so
   here it does exactly one job: the focus ring.
   Type is a native system stack. The brand sheet flags the wordmark face as an
   unresolved placeholder, so committing body text to Futura would be premature
   -- and a webfont would mean an external request the CSP does not allow. */

:root {
  /* Dark is the design here, not a variant. Declaring it keeps scrollbars and
     any future form controls in the same key as the page. */
  color-scheme: dark;

  --ink:      #E6EEF1;   /* inverted ink, for dark grounds */
  --muted:    #8FA3AC;   /* 6.73:1 on the ground */
  --ground:   #0F1A20;   /* the brand ink, used as the ground */
  --rule:     #22333D;
  /* Committing to a dark ground means the brand amber needs no adjustment: it
     clears 5.93:1 here, comfortably past the 3:1 WCAG 1.4.11 asks of a focus
     indicator. On a light ground it reached only 2.82:1 and had to be darkened. */
  --amber:    #C8891C;

  --measure:  30rem;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2rem 1.5rem;

  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* ---- lockup ---------------------------------------------------------- */

.lockup {
  margin: 0;
  /* The lockup PNG carries the wordmark, so this h1 needs no visible text of
     its own; the accessible name comes from the image's alt attribute. */
  line-height: 0;
}

.lockup img {
  display: block;
  /* Source ink is 496px wide. Held at 20rem (320px) so a 2x display still gets
     ~1.55x density; going wider visibly softens the wordmark's thin strokes. */
  width: min(20rem, 74vw);
  height: auto;
}

/* ---- text ------------------------------------------------------------ */

.tagline {
  margin: 0;
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  /* a quiet echo of the wordmark's 0.22em tracking, nowhere near as wide */
  letter-spacing: 0.03em;
  color: var(--muted);
}

.contact {
  margin: 0;
  font-size: 1rem;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 120ms ease;
}

a:hover { text-decoration-color: currentColor; }

a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- footer ---------------------------------------------------------- */

footer {
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  width: min(var(--measure), 100%);

  font-size: 0.8125rem;
  color: var(--muted);
}

footer p { margin: 0; }

/* Spacing for the Terms / Privacy links, which ship commented out in the
   markup until those documents exist. */
footer nav {
  margin-top: 0.5rem;
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

/* ---- 404 ------------------------------------------------------------- */

.notice {
  margin: 0;
  max-width: var(--measure);
  color: var(--muted);
}

.notice strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.03em;
}