/* ============================================================================
   MIODOWE OGRODY — base
   Reset, typografia, layout, hairline'y, dostępność, baza motion.
   Głębię budują hairline'y, overlap i zmiana tła — NIGDY box-shadow.
   ============================================================================ */

/* --- reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* prześwit pod sticky nav dla kotwic */
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* marquee/overlap nie mogą przewijać strony w poziomie */
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--amber); color: var(--card); }

/* --- typografia ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;                 /* NIGDY 700 — elegancja, nie krzyk */
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--step-4); line-height: 1.02; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.15; }

/* jedno kluczowe słowo w H1/H2 — italic w bursztynie */
.accent { font-style: italic; color: var(--amber); }

p { max-width: 65ch; }
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 46ch;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }

strong, b { font-weight: 700; }

/* łacińskie nazwy gatunków + podpisy zdjęć */
.latin, figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* etykiety i numery rozdziałów */
.eyebrow, .chapter {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.3;
}
.chapter { color: var(--amber); }
.chapter span { color: var(--ink-soft); } /* część opisowa po numerze */

/* --- layout -------------------------------------------------------------- */
.u-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-l); }
.section--warm { background: var(--paper-warm); }

/* hairline'y — struktura zamiast cieni */
.hairline { border: 0; border-top: 1px solid var(--line); }
.hairline-strong { border: 0; border-top: 1px solid var(--line-strong); }
.u-framed { border: 1px solid var(--line); border-radius: var(--radius); }

/* pozycjonowanie wielkich rycin w tle sekcji */
.section { position: relative; isolation: isolate; }
.deco-bg {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  color: var(--ink);
  opacity: .08;
}

/* --- dostępność ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: .6rem 1rem;
  border-radius: var(--radius);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

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

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- baza motion (sekcja 10) --------------------------------------------- */
/* aktywne tylko gdy JS włączony (klasa .js na <html>) — bez JS treść widoczna od razu */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* rysowanie rycin SVG (stroke-dashoffset) — sterowane klasą z JS */
.js .draw path, .js .draw line, .js .draw polyline, .js .draw circle, .js .draw ellipse {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset var(--dur-slow) var(--ease);
}
.js .draw.is-visible path, .js .draw.is-visible line, .js .draw.is-visible polyline,
.js .draw.is-visible circle, .js .draw.is-visible ellipse { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .draw path, .js .draw line, .js .draw polyline, .js .draw circle, .js .draw ellipse {
    stroke-dashoffset: 0;
  }
  .marquee__track { animation: none !important; }
  .seal--rotate { transform: none !important; }
}