/* D6 Project — public load balancer pages (placeholder + errors).
   Dark only: Carbon ground with the brand guide's pixel starfield. */
@font-face {
  font-family: "Saira"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 50% 125%;
  src: url(fonts/saira-latin-wdth-normal.woff2) format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-display: swap;
  font-weight: 100 700; font-stretch: 75% 100%;
  src: url(fonts/ibm-plex-sans-latin-wdth-normal.woff2) format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #0C0C0B;   /* the starfield's ground */
  --text: #D9D6CE;
  --muted: #99948A;
  --highlight: #FFFFFF;
  --primary: #FF9133;
  --on-primary: #121210;
  --border: #2E2C29;
  --sky: url(starfield.webp);
  --font-display: "Saira", "Arial Narrow", sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg) var(--sky) center / cover no-repeat fixed;
  image-rendering: pixelated;
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* With JavaScript the animated canvas replaces the static starfield (no flash of a
   different sky: the page stays flat Carbon until the first frame is drawn). */
html.js body { background-image: none; }
#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#sky.ready { opacity: 1; }
header, main { position: relative; z-index: 1; }

header { padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 3.5rem); }
header img { display: block; height: 2.5rem; width: auto; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* optical centre, and a left edge that lines up with the wordmark */
  padding: 0 clamp(1.25rem, 5vw, 3.5rem) clamp(3rem, 12vh, 8rem);
  max-width: 44rem;
}

.label {
  margin: 0 0 1rem;
  font: 500 0.8125rem/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.code {
  margin: 0;
  font: 800 clamp(4.5rem, 18vw, 9rem)/0.95 var(--font-display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
  color: var(--highlight);
}
h1 {
  margin: 0.5rem 0 1rem;
  font: 800 clamp(1.75rem, 5vw, 2.5rem)/1.15 var(--font-display);
  font-stretch: 125%;
  color: var(--highlight);
}
.code + h1 { margin-top: 1.25rem; font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
p { margin: 0 0 1rem; max-width: 34rem; }
.muted { color: var(--muted); }

.btn {
  align-self: flex-start;
  margin-top: 0.75rem;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  background: var(--primary);
  color: var(--on-primary);
  font: 600 0.9375rem/1.4 var(--font-sans);
  text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid #C4FF1F; outline-offset: 2px; }