/* WTC Design System v0.1 — foundation: reset, document, type roles, layout. */

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

/* Component classes below set their own `display`, which otherwise beats the
   UA [hidden] default at equal specificity — this keeps hidden authoritative. */
[hidden] { display: none !important; }

html {
  /* No overflow clipping on html/body: that pattern broke the sticky header in
     mobile Safari (see REPAIR-20260724T180613151Z). Layout must not overflow. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--wtc-surface-page);
  color: var(--wtc-text-primary);
  font-family: var(--wtc-font-body);
  font-size: var(--wtc-type-body);
  line-height: var(--wtc-leading-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, figure, blockquote { margin: 0; }

a { color: var(--wtc-text-primary); text-decoration-thickness: from-font; text-underline-offset: 0.3em; }
a:hover { color: var(--wtc-text-accent); }

::selection { background: var(--wtc-text-primary); color: var(--wtc-palette-magenta); }

:focus-visible {
  outline: var(--wtc-focus-width) solid var(--wtc-focus-ring);
  outline-offset: var(--wtc-focus-offset);
}
.wtc-surface--inverse :focus-visible,
.wtc-surface--accent :focus-visible {
  outline-color: var(--wtc-focus-ring-inverse);
}

/* ---- Type roles ---- */
.wtc-display-1,
.wtc-display-2,
.wtc-display-3 {
  font-family: var(--wtc-font-display);
  font-weight: 400; /* Archivo Black ships a single weight */
  text-transform: uppercase;
  letter-spacing: var(--wtc-tracking-display);
}
.wtc-display-1 { font-size: var(--wtc-type-display-1); line-height: var(--wtc-leading-display); }
.wtc-display-2 { font-size: var(--wtc-type-display-2); line-height: var(--wtc-leading-heading); }
.wtc-display-3 { font-size: var(--wtc-type-display-3); line-height: var(--wtc-leading-heading); }

.wtc-lead {
  font-size: var(--wtc-type-body-lead);
  max-width: var(--wtc-measure);
  text-wrap: pretty;
}

.wtc-label {
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label);
  letter-spacing: var(--wtc-tracking-label);
  text-transform: uppercase;
}
.wtc-label--lg { font-size: var(--wtc-type-label-lg); }
/* Accent eyebrow on LIGHT fields: magenta text at label size measures 3.48:1 and
   fails AA, so the label stays warm-black and the accent becomes a printed rule. */
.wtc-label--accent {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: var(--wtc-text-primary);
}
.wtc-label--accent::before {
  content: "";
  width: 16px;
  height: 4px;
  background: var(--wtc-surface-accent);
}
/* On the inverse field magenta text measures 4.55:1 and passes at any size. */
.wtc-label--on-dark { color: var(--wtc-palette-magenta); }

.wtc-note {
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-body-small);
  line-height: 1.55;
}

/* ---- Layout primitives ---- */
.wtc-section { padding: var(--wtc-section-rhythm) var(--wtc-gutter); }
.wtc-container { width: 100%; max-width: var(--wtc-page-max); margin-inline: auto; }

.wtc-surface--raised { background: var(--wtc-surface-raised); }
.wtc-surface--inverse { background: var(--wtc-surface-inverse); color: var(--wtc-text-inverse); }
.wtc-surface--inverse a { color: var(--wtc-text-inverse); }
.wtc-surface--inverse a:hover { color: var(--wtc-palette-magenta); }

.wtc-stack { display: grid; gap: var(--wtc-space-4); }
.wtc-stack--lg { gap: var(--wtc-space-6); }
.wtc-row { display: flex; flex-wrap: wrap; gap: var(--wtc-space-4); align-items: center; }

.wtc-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}