/* chaloop · base — reset, typography primitives, layout helpers */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  scroll-behavior: smooth;
}

/* sticky lišta nesmí zakrýt začátek sekce, na kterou odkaz míří */
[id] { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}

/* ── type roles ─────────────────────────────────────────
   .display  serif, tight, for headlines and names
   .mono     uppercase utility: eyebrows, labels, data
   ───────────────────────────────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
}

.d-1 { font-size: clamp(2.6rem, 6.6vw, 5rem); }
.d-2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.06; letter-spacing: -.022em; }
.d-3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; letter-spacing: -.018em; }
.d-4 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.015em; }

.mono {
  font-family: var(--mono);
  font-weight: var(--mono-weight);
  font-size: .76rem;
  letter-spacing: var(--mono-track);
  text-transform: uppercase;
}

/* sentence-case mono, for hints and footnotes */
.mono--plain {
  text-transform: none;
  letter-spacing: .02em;
  font-size: .74rem;
}

.lede {
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.muted { color: var(--ink-soft); }

/* ── layout ─────────────────────────────────────────── */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* label that only screen readers need */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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