/* Composition mirrors sprue.works (sprue-works/website, public/style.css).
   Typefaces, type scale and spacing are --sw-* tokens from the hosted brand
   theme linked before this file. That theme is cross-origin, so every var()
   carries a fallback and the page degrades to readable defaults without it.

   The colour tokens are overridden below with this site's own palette:
   a burnt orange field, a salmon stripe, white text. One scheme only.

   Contrast: white is 4.9:1 on the orange and 3.4:1 on the stripe. That
   clears 3:1 for the large heading on both, but not 4.5:1 for the small
   footer links on the stripe, so the footer is a solid plate and the links
   sit on the flat orange. */

:root {
  --sw-bg: #d4340c;
  --sw-fg: #ffffff;
  --sw-muted: #f88d77;
  --sw-accent: #ffffff;
  /* The stripe: salmon at half strength over the orange. Kept low so the
     texture reads as grain rather than pattern. */
  --stripe: #e66042;
  color-scheme: light only;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --stripe: color-mix(in srgb, var(--sw-muted, #f88d77) 50%, var(--sw-bg, #d4340c));
  }
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* The old background.png was a 5px tile with one salmon pixel on a "/"
     diagonal. Same 45-degree rhythm here at a gentler contrast: a 3px
     stripe on an 11.3px period, both measured across the stripe. The
     gradient is drawn inside a 16px square tile (its diagonal, 22.627px,
     holds exactly two periods) so the browser rasterises one tile and
     repeats it. A repeating-linear-gradient would instead meet every pixel
     row at a different sub-pixel phase and shimmer. */
  background-color: var(--sw-bg, #d4340c);
  background-image: linear-gradient(
    135deg,
    var(--stripe, #e66042) 0 1.5px,
    var(--sw-bg, #d4340c) 1.5px 9.814px,
    var(--stripe, #e66042) 9.814px 12.814px,
    var(--sw-bg, #d4340c) 12.814px 21.127px,
    var(--stripe, #e66042) 21.127px 22.627px
  );
  background-size: 16px 16px;
  color: var(--sw-fg, #ffffff);
  font-family: var(--sw-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fine patterns are hard on some eyes: a flat field when more contrast is asked for. */
@media (prefers-contrast: more) {
  body {
    background-image: none;
  }
}

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--sw-space-6, 2rem) var(--sw-space-4, 1rem);
}

/* ---- Name ---- */
.name {
  margin: 0;
  font-family: var(--sw-font-sprue, "Quicksand", system-ui, sans-serif);
  font-weight: var(--sw-weight-sprue, 700);
  /* ~9vw between 2.75rem and 8rem so it stays large on phones and desktops. */
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: var(--sw-leading-tight, 1.2);
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

/* ---- Footer ---- */
footer {
  /* A solid plate hugging the links so they read against the flat field,
     rather than a band across the page. */
  align-self: center;
  width: fit-content;
  max-width: calc(100% - 2 * var(--sw-space-4, 1rem));
  margin-bottom: var(--sw-space-6, 2rem);
  padding: var(--sw-space-3, 0.75rem) var(--sw-space-5, 1.5rem);
  background: var(--sw-bg, #d4340c);
  border-radius: var(--sw-radius-full, 9999px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline; /* the sprue.works wordmark mixes three faces; line them up */
  gap: var(--sw-space-2, 0.5rem) var(--sw-space-5, 1.5rem);
  font-size: var(--sw-text-sm, 0.875rem);
}

footer a {
  color: var(--sw-accent, #ffffff);
  text-decoration: underline;
  text-decoration-color: currentColor; /* fallback for browsers without color-mix() */
  text-decoration-color: color-mix(in srgb, var(--sw-accent, #ffffff) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

footer a:hover,
footer a:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

footer a:focus-visible {
  outline: 2px solid var(--sw-accent, #ffffff);
  outline-offset: 4px;
  border-radius: var(--sw-radius-sm, 2px);
}