/* =========================================================
   Kappka — strona „O nas” (nasza historia)
   Czarna, spokojna, duża typografia (Inter), jeden zielony akcent.
   Na dole znika w las z drzewek (ten sam, co na stronie głównej).
   ========================================================= */

:root {
  --about-text-2: rgba(255, 255, 255, .66);
  --about-sep: rgba(255, 255, 255, .1);
  --about-ease: cubic-bezier(.22, 1, .36, 1);
}

.nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: #fff; }

/* ---------- Wstęp i rozdziały ---------- */
/* Numery po lewej, tekst po prawej; cały układ (160 + 40 + 720 px) wyśrodkowany na stronie. */

.about-story { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.about-hero { padding: 64px 0 8px; background: #000; }
.about-hero .about-story { max-width: 968px; }  /* 920 układu + 2×24 paddingu: lewa krawędź równo z numerami rozdziałów */
.about-hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.035em;
  color: #fff;
}
.about-lead {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 1.25rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--about-text-2);
}

.chapter {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 40px;
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 0;
}
.chapter + .chapter { border-top: 1px solid var(--about-sep); } /* cienka linia tylko MIĘDZY rozdziałami */
.chapter-side { position: sticky; top: 112px; align-self: start; padding-top: 4px; }
.chapter-no {
  display: block;
  font-size: clamp(3rem, 6vw, 4.4rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .3);
}
.chapter-tag {
  display: block;
  margin-top: 10px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.chapter h2 {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
}
.chapter p {
  margin: 0 0 16px;
  max-width: 34em;
  font-size: 1.25rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--about-text-2);
}
.chapter p:last-child { margin-bottom: 0; }

/* ---------- Rozdział z ilustracją (zrzut „pierwszej wersji”) ---------- */

.chapter-body.has-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto 1fr;   /* nadmiar wysokości idzie pod tekst, nie między nagłówek a tekst */
  grid-template-areas: "title fig" "text fig";
  column-gap: 44px;
  align-items: start;
}
.chapter-body.has-figure.fig-wide { grid-template-columns: minmax(0, 1fr) 340px; }  /* mapa Polski: większa */
.chapter-figure.chapter-figure--plain img { border: 0; }  /* wykrój bez ramki */
.chapter-body.has-figure h2 { grid-area: title; }
.chapter-text { grid-area: text; }
.chapter-figure { grid-area: fig; margin: 0; align-self: start; }  /* góra zrzutu równo z górą nagłówka */
.chapter-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .18); /* delikatna ramka */
}
.chapter-figure figcaption {
  margin: 10px 0 0;
  font-size: .9rem;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
}

/* Animowane, pikselowe modele (butelka, klocek) — bez ramki i podpisu */
.chapter-body.has-figure.fig-voxel { grid-template-columns: minmax(0, 1fr) 190px; }
.chapter-figure--voxel { display: flex; justify-content: center; }
.chapter-figure--voxel canvas { display: block; width: 190px; height: auto; image-rendering: pixelated; }

/* Pudełko zestawu: obok tekstu, mniej więcej wysokości nagłówka + akapitów */
.chapter-body.has-figure.fig-set { grid-template-columns: minmax(0, 1fr) 320px; }
.fig-set .chapter-figure { margin: 0; justify-content: flex-start; }
.fig-set .chapter-figure canvas { width: 100%; }

/* ---------- Las na dole ---------- */

.about-story + .forest-divider { margin-top: 56px; }

/* ---------- Telefon ---------- */

@media (max-width: 760px) {
  .about-hero { padding: 44px 0 8px; }
  .chapter { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .chapter-side { position: static; display: flex; align-items: baseline; gap: 14px; }
  .chapter-no { font-size: 2.6rem; }
  .chapter-tag { margin-top: 0; }
  .chapter-body.has-figure { display: block; }
  .chapter-figure { margin-top: 22px; max-width: 420px; }
  .chapter-figure--plain { max-width: 100%; }
  .chapter-figure--voxel { justify-content: flex-start; }
  .chapter-figure--voxel canvas { width: 150px; }
}


/* ---------- Twórca (blok pod historią) ---------- */
.chapter--author .chapter-tag { margin-top: 6px; }
.author { display: flex; margin-bottom: 18px; }
.author h2 { margin: 0; }
.chapter .author-role { margin: 4px 0 0; font-size: 1rem; font-weight: 600; color: #4ade80; }
.chapter .author-contact { margin-top: 18px; font-size: 1.05rem; }
.chapter .author-contact a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .2s; }
.chapter .author-contact a:hover { border-bottom-color: #fff; }
.chapter .author-contact a.author-discord { display: inline-flex; vertical-align: -5px; border-bottom: 0; opacity: .85; transition: opacity .2s; }
.chapter .author-contact a.author-discord:hover { opacity: 1; }
.author-discord svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }