/* ==========================================================================
   MĘŻCZYZNA 2.0 — Base / showcase frame
   Wspólny rytm dla wszystkich kart design-systemu (preview cards).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- ramka karty / sekcji ------------------------------------------------ */
.board {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-7);
}

.board__eyebrow {
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--step--1);
  color: var(--bronze);
  margin: 0 0 var(--sp-3);
}

.board__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: 0.012em;
  margin: 0 0 var(--sp-3);
  color: var(--on-ink);
}

.board__sub {
  color: var(--on-ink-muted);
  max-width: 60ch;
  margin: 0 0 var(--sp-7);
}

/* bronze hairline — sygnatura systemu */
.rule {
  border: 0;
  border-top: var(--hairline);
  margin: var(--sp-7) 0;
  opacity: 0.55;
}

/* mała etykieta (Oswald, małe kapitaliki, tracking) */
.label {
  font-family: var(--font-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--step--1);
  color: var(--bronze-soft);
}

.mono { font-variant-numeric: tabular-nums; }

/* a11y — widoczny focus (ui-ux-pro-max §1 focus-states) */
:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
}

/* a11y — respektuj reduced-motion (ui-ux-pro-max §7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}