/* Page, canvas and overlay layers, plus shared type roles. */
html {
  font-size: clamp(13px, 1.9vmin, 20px);
  -webkit-text-size-adjust: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--night-900);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

#screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  touch-action: none;
}

/* The UI root covers the canvas. It lets clicks through; interactive parts opt back in. */
.ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ui button, .ui input, .ui .interactive { pointer-events: auto; }
/* Zero-specificity reset, so component classes (.btn, .career-card...) always win. */
:where(.ui button) {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.icon { width: 1em; height: 1em; display: block; flex: none; }

/* Type roles. Headers are bold uppercase; body copy is sentence case in a readable medium weight. */
.t-display {
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
}
.t-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: var(--lh-tight);
  color: var(--text);
}
.t-heading {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: var(--lh-tight);
}
.t-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.t-body {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--text-soft);
}
.t-hint {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-400);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}