/* =====================================================================
   freakfightpolska.wiki - "BRAMY ROZDZIALOW"

   SZKIELET: strona schodzi przez pelnoszerokosciowe bramy, a kazda
   federacja przejmuje tlo wlasnym kolorem. Uzasadnienie jest wprost
   z zadania domeny: ona opisuje KILKA federacji, wiec strona zmienia
   charakter w miare schodzenia.

   Siostrzana famemma.wiki jest jednolitym almanachem JEDNEJ federacji.
   Te dwie strony nie moga wygladac podobnie i nie wygladaja - roznia sie
   na poziomie szkieletu, nie tylko koloru.

   AKCENT: kolor rozdzialu JEST akcentem. Nie dokladamy osobnego koloru
   sygnalowego poza jednym zlotem na liczby, bo pieciu barw na raz nikt
   nie przeczyta.
   ===================================================================== */

:root {
  --tlo:     #12100E;
  --papier:  #EFEBE4;
  --cichy:   #8C8578;
  --zloto:   #F2B705;
  --ton:     #221E19;   /* nadpisywane per rozdzial przez atrybut style */

  --display: 'Kanit', system-ui, sans-serif;
  --tekst:   'Instrument Sans', system-ui, sans-serif;
  --mono:    'Red Hat Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.ffp {
  margin: 0;
  background: var(--tlo);
  color: var(--papier);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------
   Pasek: nazwa, podpis, rozdzialy z licznikami
   --------------------------------------------------------------- */

.ffp-pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.6rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid #2A251F;
}

.ffp-znak {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ffp-podpis {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cichy);
}

.ffp-nawigacja { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-left: auto; }
.ffp-nawigacja a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.28rem 0.7rem;
  background: var(--ton);
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ffp-nawigacja a:hover { border-color: var(--zloto); }
.ffp-nawigacja a span { color: var(--zloto); font-weight: 600; }

/* ---------------------------------------------------------------
   BRAMA ROZDZIALU - wlasny komponent tej strony
   --------------------------------------------------------------- */

.ffp-brama {
  background: var(--ton);
  padding: clamp(2.4rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem) clamp(1.8rem, 4vw, 3rem);
  border-top: 1px solid #2A251F;
}

.ffp-nad {
  margin: 0 0 0.7rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zloto);
}

.ffp-brama h2 {
  margin: 0 0 0.7rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.ffp-brama .ffp-opis {
  margin: 0 0 1.3rem;
  max-width: 56ch;
  font-size: clamp(0.98rem, 1.5vw, 1.1rem);
  color: #CFC8BC;
}

.ffp-licznik { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cichy); }
.ffp-licznik strong { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--papier); margin-right: 0.35rem; }

/* Rozdzial tytulowy: to samo, tylko h1 i bez licznika */
.ffp-otwarcie { background: var(--tlo); padding: clamp(3rem, 9vw, 7rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 3.5rem); }
.ffp-otwarcie h1 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ffp-otwarcie .ffp-lid { margin: 0; max-width: 62ch; font-size: clamp(1rem, 1.6vw, 1.15rem); color: #CFC8BC; }

/* ---------------------------------------------------------------
   Pozycje wewnatrz rozdzialu
   --------------------------------------------------------------- */

.ffp-lista {
  background: var(--ton);
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(2.2rem, 5vw, 3.6rem);
}

.ffp-pozycja {
  display: block;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(239, 235, 228, 0.16);
}
.ffp-pozycja:last-child { border-bottom: 1px solid rgba(239, 235, 228, 0.16); }
.ffp-pozycja:hover h3 { color: var(--zloto); }

.ffp-plakietka {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cichy);
}

.ffp-pozycja h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ffp-pozycja p { margin: 0 0 0.5rem; max-width: 68ch; color: #CFC8BC; font-size: 0.96rem; }

.ffp-data { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--cichy); }

/* ---------------------------------------------------------------
   Wpis
   --------------------------------------------------------------- */

.ffp-wpis-glowica {
  background: var(--ton);
  padding: clamp(2.4rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem) clamp(1.6rem, 4vw, 2.6rem);
}
.ffp-wpis-glowica h1 {
  margin: 0.6rem 0 0.7rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.028em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ffp-wpis-glowica .ffp-meta { margin: 0; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cichy); }

.ffp-artykul {
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1rem, 4vw, 3rem) clamp(2.6rem, 6vw, 4.5rem);
  font-size: 1.04rem;
}
.ffp-artykul > * { max-width: 70ch; }
.ffp-artykul > :first-child { margin-top: 0; }

.ffp-artykul p { margin: 0 0 1.15rem; color: #DFDACF; }

.ffp-artykul h2 {
  margin: 2.4rem 0 0.8rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--papier);
}
.ffp-artykul h3 { margin: 1.7rem 0 0.5rem; font-family: var(--display); font-weight: 600; font-size: 1.24rem; }

.ffp-artykul a { color: var(--zloto); border-bottom: 1px solid rgba(242, 183, 5, 0.45); }
.ffp-artykul a:hover { border-bottom-color: var(--zloto); }

.ffp-artykul ul, .ffp-artykul ol { margin: 0 0 1.15rem; padding-left: 1.2rem; color: #DFDACF; }
.ffp-artykul li { margin-bottom: 0.4rem; }

.ffp-artykul table { width: 100%; max-width: none; border-collapse: collapse; margin: 1.4rem 0; font-size: 0.94rem; }
.ffp-artykul th, .ffp-artykul td { border-bottom: 1px solid rgba(239,235,228,0.16); padding: 0.55rem 0.7rem; text-align: left; }
.ffp-artykul th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zloto); border-bottom-color: rgba(242,183,5,0.4); }
.ffp-przewin { overflow-x: auto; max-width: 100%; }

/* ---------------------------------------------------------------
   Stopka
   --------------------------------------------------------------- */

.ffp-stopka {
  border-top: 1px solid #2A251F;
  padding: 1.8rem clamp(1rem, 4vw, 3rem) 2.4rem;
  color: var(--cichy);
  font-size: 0.9rem;
}
.ffp-stopka p { margin: 0 0 0.5rem; max-width: 70ch; }
.ffp-drobne { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; }

.ffp-pusto { color: var(--cichy); font-style: italic; }

/* ---------------------------------------------------------------
   Male ekrany
   --------------------------------------------------------------- */

@media (max-width: 700px) {
  .ffp-nawigacja { margin-left: 0; width: 100%; }
  .ffp-podpis { width: 100%; }
  .ffp-brama h2 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .ffp-otwarcie h1 { font-size: clamp(2.2rem, 12vw, 3.6rem); }
}