/* ============================================
   Premiere — reset i wspólne elementy pisma
   ============================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text-on-paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  background: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; }

/* Bez tego <picture> zachowuje się jak tekst i bierze wysokość
   z linii bazowej, przez co zdjęcia rosły ponad zadany kadr. */
picture { display: block; }
picture > img { display: block; max-width: 100%; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

.canvas {
  width: 100%;
  max-width: var(--canvas-w);
  margin-inline: auto;
  overflow: hidden;
}

/* === Pismo ozdobne ===
   Pinyon Script ma wysokie wydłużenia górne i dolne — bez ujemnego
   marginesu nad i pod tekstem zostaje sporo pustego miejsca, którego
   w makiecie nie ma. */
.script-title {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0;
}

.date-ornate {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.prose {
  max-width: var(--prose-w);
  margin-inline: auto;
}

/* Pole-pułapka na boty: człowiek go nie widzi. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.preview-flag {
  margin: 0;
  padding: 8px 16px;
  color: var(--c-ink);
  font-size: 14px;
  text-align: center;
  background: #f3d9a4;
}

/* Elementy wjeżdżają miękko przy przewijaniu; reveal.js dokłada klasę.
   Gdy ktoś prosi o mniej ruchu, pokazujemy je od razu. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.is-in { opacity: 1; transform: none; }
}