/*
Theme Name: Chronicle
Theme URI: https://chronicle.tribunedesk.com
Author: Tribune Desk
Description: Motyw bloga Tribune Desk Chronicle. Port makiety z headlinesforge.com/chronicle.
Version: 1.37.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: Proprietary
Text Domain: chronicle
*/

/* ==========================================================================
   FONTY — hostowane u nas, zero requestow do Google.
   Inter jest fontem ZMIENNYM: jeden plik na podzbior obsluguje caly zakres
   400-800. Pobranie osobnego pliku na kazda grubosc dawalo 5 identycznych
   kopii i 721 KB zamiast 208 KB.
   ========================================================================== */
/* latin-ext — font ZMIENNY: jeden plik na caly zakres 400-800 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-var-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin — font ZMIENNY: jeden plik na caly zakres 400-800 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-var-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* KURSYWA Intera — prawdziwy kroj, nie pochylenie prostego.
   Bez tych dwoch regul przegladarka pochylala odmiane prosta (falszywa kursywa):
   litery byly tymi samymi ksztaltami przekrzywionymi o kilka stopni, zamiast
   wlasnych form kursywnych. Widac to najlepiej na "a" i "f". Uzywa tego notka
   o pochodzeniu tekstu pod artykulem. */
/* latin-ext — kursywa, font ZMIENNY 400-800 */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-var-italic-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin — kursywa, font ZMIENNY 400-800 */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-var-italic-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   TOKENY
   Wartosci oklch przeniesione DOSLOWNIE ze zrodla makiety (src/styles.css).
   W makiecie stoja obok nich komentarze z hexami — te komentarze SIE NIE ZGADZAJA
   z wartosciami oklch: na czerwieniach rozjazd siega 16/255, czyli widocznie.
   Dlatego nie konwertujemy niczego na hex, takze wlasnym rachunkiem: przegladarka
   mapuje kolory spoza gamutu inaczej niz naiwny wzor, a forge-red lezy blisko
   tej granicy. Jedyny sposob na ten sam kolor to ta sama wartosc.
   ========================================================================== */
:root {
  --paper: oklch(0.9521 0.0118 84.2);
  --card-bg: oklch(0.9760 0.0091 84.5);
  --ink: oklch(0.2200 0.0119 39.8);
  --warm-gray: oklch(0.4830 0.0140 65.0);
  --hairline: oklch(0.8530 0.0190 80.0);
  --forge-red: oklch(0.5210 0.1760 30.7);
  --forge-red-deep: oklch(0.4220 0.1530 31.0);
  --ember: oklch(0.5910 0.1780 32.5);
  --soft: oklch(0.9230 0.0145 84.5);
  --mist: oklch(0.9410 0.0125 84.5);
  --on-dark: oklch(0.9590 0.0140 84.0);
  --chronicle: oklch(1 0 0);

  --font-serif: "DM Serif Display", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --shell: 72rem;
  --shell-narrow: 48rem;
  --shell-mid: 56rem;
  /* Strona autora ma w makiecie WEZSZY kontener niz reszta (max-w-5xl, nie
     max-w-6xl). Przy 72rem te same kreski wokol naglowka robia sie dluzsze
     i ciensze, wiec czytaja sie jak podwojny separator zamiast jak klamra. */
  --shell-author: 64rem;
  --pad: 1.5rem;
}

/* ==========================================================================
   BAZA
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--hairline);
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--chronicle);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--forge-red-deep);
  text-underline-offset: 3px;
}

::selection {
  background: var(--forge-red);
  color: var(--on-dark);
}

img { max-width: 100%; height: auto; }

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

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   NARZEDZIA TYPOGRAFICZNE (odpowiedniki @utility z makiety)
   ========================================================================== */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.eyebrow a { color: inherit; text-decoration: none; transition: color 0.15s; }
.eyebrow a:hover { color: var(--forge-red-deep); }

/* Etykieta sekcji — to NIE jest `.eyebrow`. Makieta ma tu wlasna specyfikacje
   (`text-xs font-semibold` = 12px/600), a `.eyebrow` to 11px/700. Roznica jest
   mala na papierze, ale przy wersalikach z szerokim swiatlem cieplejszy, lzejszy
   napis czyta sie jak inny kroj — i tak zostala zgloszona. */
.section-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.rule-hair { border-top: 1px solid var(--hairline); }
.rule-red { border-top: 3px solid var(--forge-red); }

/* ==========================================================================
   SIATKA
   ========================================================================== */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.shell-narrow { max-width: var(--shell-narrow); margin-inline: auto; padding-inline: var(--pad); }
.shell-mid { max-width: var(--shell-mid); margin-inline: auto; padding-inline: var(--pad); }
.shell-author { max-width: var(--shell-author); margin-inline: auto; padding-inline: var(--pad); }

.band { position: relative; overflow: hidden; }
/* Kazdy kontener uzywany wewnatrz .band musi tu byc wymieniony, inaczej jego
   tresc laduje POD warstwa rastrowa (z-index 0) i znika pod dekoracja. */
.band > .shell,
.band > .shell-narrow,
.band > .shell-mid,
.band > .shell-author { position: relative; z-index: 10; }

/* ==========================================================================
   WINIETA I MENU DZIALOW
   ========================================================================== */
.masthead-wrap {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}

.masthead {
  position: relative;
  overflow: hidden;
}

.masthead__decor {
  pointer-events: none;
  position: absolute;
  top: 50%;
  height: 7rem;
  width: 7rem;
  transform: translateY(-50%);
  object-fit: contain;
  opacity: 0.12;
  user-select: none;
  display: none;
}

.masthead__decor--left { left: -1.5rem; }
.masthead__decor--right { right: -1.5rem; }

.masthead__plate {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 72rem = `max-w-6xl` makiety. Bylo 48rem i to ono scisnelo cala winiete:
     przy weszym pojemniku kropkowane linie nie mialy gdzie sie rozciagnac,
     wiec dobieraly szerokosc kosztem proporcji. */
  max-width: 72rem;
  margin-inline: auto;
  /* `py-10 px-4` makiety; przy 768 px rosnie do `md:py-14`. */
  padding: 2.5rem 1rem;
  text-align: center;
  text-decoration: none;
}

.masthead__name {
  font-family: var(--font-serif);
  /* WPROST FORMULA Z MAKIETY (`clamp(2.25rem, 7.5vw, 4.25rem)`), a nie trzy
     przyblizenia w progach 640/768. Stopniowanie skokowe trafialo w projekt tylko
     w trzech punktach i konczylo sie na 64 px zamiast 68 px; clamp zgadza sie na
     KAZDEJ szerokosci, a przy okazji usuwa dwa nadpisania nizej. */
  font-size: clamp(2.25rem, 7.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  /* Bez `text-transform: lowercase` — stara marka byla pisana minuskula
     ("headlinesforge"), nowa ma wersaliki w obu czlonach ("Tribune Desk").
     Reguła zostawiona tu jako komentarz, bo jej usuniecie jest CZESCIA
     rebrandingu, a nie przypadkowym gubieniem stylu. */
}

.masthead__name em { font-style: normal; color: var(--forge-red); }

/* CALA NAZWA W JEDNYM ELEMENCIE — inaczej `column-gap` pojemnika wchodzi TAKZE
   miedzy "Tribune" a "Desk". Tak wlasnie bylo: `.masthead__name` jest polem flex,
   wiec goly tekst "Tribune" stawal sie osobnym elementem i odstep 0.35em, pomyslany
   jako przerwa przed "Chronicle", rozpychal takze sama nazwe. Pomiar wlasciwosci tego
   NIE POKAZAL (gap zgadzal sie co do jednostki) — zobaczylo to dopiero zestawienie
   obrazow. Makieta ma tu dwa elementy: nazwe i dopisek. */
.masthead__brand { white-space: nowrap; }

/* „Chronicle" stoi OBOK znaku slownego, kursywa, mniejszym stopniem — tak jak
   w makiecie. Wczesniej siedzialo pod spodem, wersalikami, w linii miedzy
   kropkowanymi liniami; ta linia nalezy do podtytulu.

   0.42em, nie stala liczba pikseli: makieta ma 28.56 px przy znaku 68 px, a nasza
   winieta skaluje sie z szerokoscia okna, wiec trzymamy PROPORCJE. Wpisanie 28 px
   dawaloby na waskim ekranie „Chronicle" wieksze od samego znaku.

   `align-self: flex-end` zamiast baseline: znak i dopisek maja rozne stopnie pisma,
   wiec wyrownanie do linii pisma wypycha dopisek w gore o roznice wysokosci wersalika. */
.masthead__kicker {
  font-family: var(--font-serif);
  font-size: 0.42em;
  font-style: italic;
  letter-spacing: normal;
  color: var(--ink);
  white-space: nowrap;
}

/* Sam znak musi byc rzedem, zeby dopisek stanal obok, a nie pod spodem. */
.masthead__name {
  display: flex;
  /* BASELINE, nie flex-end — i to jest odwrocenie mojej wczesniejszej decyzji.
     Rozumowanie "rozne stopnie pisma wypchna dopisek w gore" bylo teoretyczne;
     makieta uzywa `items-baseline` i tak wlasnie sklada sie winiety gazetowe:
     dopisek siada na tej samej linii pisma co znak, a nie na jego dolnej krawedzi.
     Przy flex-end "Chronicle" wisialo nizej niz w projekcie. */
  align-items: baseline;
  /* `gap-x-[0.35em]` makiety; wczesniej robil to `margin-left` na dopisku. */
  column-gap: 0.35em;
  justify-content: center;
  flex-wrap: wrap;
}

.masthead__strap {
  /* `mt-6` makiety = 1.5rem. Bylo 0.5rem — to ta jedna wartosc odpowiadala za
     wrazenie, ze podtytul "cisnie sie" do nazwy zamiast jej towarzyszyc. */
  margin-top: 1.5rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.75rem; /* `gap-3`; przy 640 px rosnie do `sm:gap-5` */
}

.masthead__rule {
  pointer-events: none;
  height: 12px;
  /* STALA SZEROKOSC, nie `flex: 1` — i to jest sedno tej poprawki. Makieta ma
     `w-20 sm:w-32 md:w-48 lg:w-64`, czyli krotkie akcenty po bokach podtytulu.
     Rozciagliwe linie dobieraly u nas 535 px zamiast 256 px i rozjezdzaly winiete
     niemal na cala szerokosc, przez co przestawaly byc ozdobnikiem. */
  flex: 0 0 auto;
  width: 5rem;
  object-fit: cover;
  opacity: 0.7;
  user-select: none;
}

/* Linia miedzy kropkowanymi liniami niesie PODTYTUL serwisu, nie slowo „Chronicle" —
   ono przenioslo sie do znaku slownego. Miary z makiety: Inter 14 px, waga 600,
   wersaliki, swiatlo 2.52 px (czyli 0.18em przy tym stopniu).

   `white-space: normal` i ograniczona szerokosc, bo podtytul jest zdaniem, a nie jednym
   slowem: przy waskim oknie musi sie lamac, zamiast rozpychac winiete w bok. */
.masthead__word {
  /* `flex: 0 0 auto` zostaje, choc jego pierwotny powod zniknal: kropkowane linie
     mialy `flex: 1` i to one zabieraly szerokosc, lamiac podtytul na cztery wiersze.
     Dzis linie maja stala szerokosc, wiec tej presji juz nie ma — ale podtytul i tak
     ma byc nierozciagliwy, zeby zostal wysrodkowany miedzy nimi. */
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-sans);
  /* `text-[11px] tracking-[0.14em]`, a od 640 px `sm:text-sm sm:tracking-[0.18em]`.
     Wczesniej bazowe 14 px rosly przy 640 px do 20 px — czyli dokladnie odwrotnie
     niz w projekcie, gdzie 14 px jest wartoscia DOCELOWA, nie wyjsciowa. */
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.625; /* `leading-relaxed` makiety; przy 1.5 blok byl o 2 px nizszy */
  text-align: center;
  color: var(--warm-gray);
}

/* Na waskim ekranie zdanie nie ma prawa zmiescic sie w jednej linii, wiec tam
   pozwalamy mu sie lamac — inaczej rozpychaloby winiete poza ekran. */
@media (max-width: 40rem) {
  .masthead__word {
    flex: 1 1 auto;
    white-space: normal;
  }
}

/* Bez `border-top`. Ta kreska lezala 57 px pod rastrowymi kropkami winiety,
   wiec oko widzialo dwie linie niemal jedna na drugiej — to ten duet czytal sie
   jako natlok, mocniej niz ich laczna liczba. Pasek dzialow trzyma sie teraz
   odstepem i kropkami nad soba.
   Swiadomie tracimy jedyna kreske wcieta do szerokosci kolumny tresci (72rem):
   echo siatki znika, ale spokoj nagłowka jest wazniejszy. */
.desk-bar {
  position: relative;
  z-index: 10;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.75rem var(--pad);
}

.desk-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  row-gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.desk-nav a {
  display: inline-flex;
  height: 2rem;
  width: 7rem;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-inline: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  transition: color 0.15s, border-color 0.15s;
}

.desk-nav a:hover {
  border-bottom-color: var(--hairline);
  color: var(--forge-red-deep);
}

.desk-nav .is-active a,
.desk-nav a[aria-current="page"] {
  border-bottom-color: var(--forge-red);
  color: var(--forge-red-deep);
}

/* ==========================================================================
   RASTER — warstwa dekoracyjna
   Kropki nigdy nie sa przycinane: kazdy raster skaluje sie w calosci
   (object-fit: contain), a gasnie przez zmniejszanie kropek, nie przez ciecie.
   ========================================================================== */
.raster-decor {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  object-fit: contain;
  user-select: none;
}

.raster-rule {
  position: relative;
  overflow: hidden;
}

.raster-rule img {
  pointer-events: none;
  display: block;
  height: 40px;
  width: 100%;
  min-width: 1100px;
  object-fit: contain;
  object-position: center;
  opacity: 0.8;
  user-select: none;
}

.raster-underline {
  position: relative;
  display: inline-block;
}

.raster-underline > span { position: relative; z-index: 10; }

.raster-underline img {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 0;
  margin-top: 2px;
  height: auto;
  width: 138%;
  min-width: 8.5rem;
  max-width: none;
  object-fit: contain;
  object-position: left;
  user-select: none;
}

/* Sygnet: litery zostaja pelne, raster jest warstwa pod nimi. */
.signet {
  position: relative;
  display: inline-grid;
  height: 2.25rem;
  width: 2.25rem;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in oklab, var(--ink) 6%, transparent);
}

.signet--red { background: color-mix(in oklab, var(--forge-red) 10%, transparent); }

.signet img {
  pointer-events: none;
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0.45;
  user-select: none;
}

.signet span {
  position: relative;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}

.signet--red span { color: var(--forge-red-deep); }

.signet-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.signet-heading h2,
.signet-heading p {
  font-family: var(--font-serif);
  /* `text-xl` makiety = 1.25rem. Bylo 1.5rem — o stopien za duzo. Umknelo przy
     pierwszym porownaniu, bo makieta sklada te naglowki jako <p>, wiec nie trafialy
     do przegladu, ktory zbieral h1/h2/h3. */
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Kotwica dla kropkowanego podkreslenia. `inline-block`, zeby szerokosc brala sie
   z TEKSTU, a nie z calej szerokosci naglowka — podkreslenie liczy swoje 138% wzgledem
   napisu, nie wzgledem kolumny. */
.signet-heading__text {
  position: relative;
  display: inline-block;
}

/* Miary z `RasterUnderline`: `w-[138%] min-w-[8.5rem]`, `top-full mt-[2px]`,
   `object-contain object-left`, warstwa POD tekstem. `max-width: none` jest
   konieczne — globalna regula `img { max-width: 100% }` scielaby te 138% do 100%
   i podkreslenie konczyloby sie dokladnie na ostatniej literze. */
.raster-underline {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 0;
  margin-top: 2px;
  width: 138%;
  min-width: 8.5rem;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: left;
  user-select: none;
}

/* Naglowek bywa odnosnikiem (np. "Popular authors" -> pelny spis autorow).
   Wyglada wtedy tak samo jak zwykly naglowek — dopiero najechanie pokazuje,
   ze prowadzi dalej. Naglowek krzyczacy kolorem odnosnika bilby sie o uwage
   z tytulami tekstow, ktore sa pod nim. */
.signet-heading__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
.signet-heading__link:hover {
  color: var(--forge-red-deep);
  border-bottom-color: color-mix(in oklab, var(--forge-red-deep) 40%, transparent);
}

/* ==========================================================================
   KADR MEDIALNY — zawsze 16:9, zdjecie albo pusty slot
   ========================================================================== */
.media-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--soft);
  margin: 0;
  display: block;
}

.media-frame img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.media-frame__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm-gray);
}

/* ==========================================================================
   STRONA GLOWNA
   ========================================================================== */
.front-grid {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem;
}

.lead__title {
  margin-top: 0.5rem;
  font-size: 1.875rem;
  line-height: 1.06;
}

.lead__title a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
.lead__title a:hover { color: var(--forge-red-deep); }

.dek { margin-top: 1rem; font-size: 1.125rem; color: var(--warm-gray); }

.byline__author {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.byline__author:hover {
  color: var(--forge-red-deep);
  border-bottom-color: var(--forge-red);
}

/* Bylina jest RZEDEM, nie akapitem: makieta sklada ja jako `flex` z odstepem 0.75rem
   po obu stronach kropki (`gap-x-3 gap-y-1`), zawijalnym na waskim ekranie. Jako blok
   nazwisko i data sklejaly sie odstepem spacji, wiec kropka-znak byla jedynym
   rozdzielaczem — stad wczesniejsza kropka z klawiatury. */
.byline {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--warm-gray);
}

/* Kropka rozdzielajaca: 4x4 px w kolorze linii wlosowej, dokladnie jak w makiecie
   (`h-1 w-1 rounded-full bg-hairline`). `flex: 0 0 auto`, zeby nigdy sie nie splaszczyla,
   gdy nazwisko i data walcza o miejsce. */
.byline__sep {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--hairline);
}

.thumb-list {
  margin-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

/* Kreska MIEDZY wierszami, nie pod kazdym — odpowiednik `divide-y` z makiety.
   Wersja z `border-bottom` na kazdym wierszu dokladala linie takze pod OSTATNIM,
   a ta wpadala tuz obok `border-top` nastepnego bloku i dawala podwojny separator. */
.thumb-row {
  display: flex;
  gap: 1rem;
  padding-block: 1.25rem;
}

.thumb-row + .thumb-row {
  border-top: 1px solid var(--hairline);
}

/* 7.5rem, nie 10rem jak w makiecie. Makieta ma tu `w-40 shrink-0 sm:w-48`, ale na
   telefonie 360 px to za duzo: po odjeciu marginesow strony i odstepu na tytul
   zostawalo 136 px i naglowek lamal sie na SIEDEM linii (zmierzone w przegladarce
   przy prawdziwym widoku 360 px, nie oszacowane). Przy 7.5rem kolumna ma 176 px
   i ten sam naglowek miesci sie w czterech. Od 640 px wracamy do makiety (12rem). */
.thumb-row__media { width: 7.5rem; flex-shrink: 0; }
.thumb-row--sm .thumb-row__media { width: 6rem; }
.thumb-row__body { min-width: 0; }

.thumb-row__title {
  margin-top: 0.25rem;
  font-size: 1.25rem;
  line-height: 1.375;
}

.thumb-row--sm .thumb-row__title { font-size: 1rem; }

/* Data pod wpisem w szynie „Most popular". Wersaliki i szerokie swiatlo, zeby czytala
   sie jako metryczka, a nie jako tresc — ten sam rejestr, co dzialy nad tytulami. */
/* Data pod kartami: 11 px i waga 500 wg makiety (`text-[11px] font-medium`). Bylo
   12 px i 600 — o stopien za duzo i o pol wagi za ciezko, przez co data konkurowala
   z nadtytulem dzialu zamiast byc pod nim przypisem. */
.thumb-row__date {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--warm-gray);
}

.thumb-row__title a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
.thumb-row__title a:hover { color: var(--forge-red-deep); }

.thumb-row__dek { margin-top: 0.5rem; font-size: 0.875rem; color: var(--warm-gray); }

/* Na telefonie tekst OPLYWA miniature, zamiast stac w osobnej kolumnie obok.
   Kolumna obok kolumny zostawiala pod kazdym obrazkiem pusty blok wysokosci
   dwoch-trzech wierszy: kadr 16:9 przy 7.5rem ma tylko 68 px, a tekst 250 px.
   Zmierzone na prawdziwej tresci przy 360 px: wiersz schodzi z 310 na 266 px,
   czyli 176 px odzyskanych na czterech wierszach.

   Kadr KWADRATOWY, nie 16:9, i to nie jest ozdobnik. Przy 16:9 obrazek ma
   wysokosc okolo trzech linii, wiec OSTATNIA linia tytulu ladowala pod nim przy
   lewej krawedzi — pojedyncze slowo wiszace w powietrzu, wygladajace na blad
   skladu. Kwadrat ma 120 px, czyli mniej wiecej tyle co caly tytul, wiec
   zlamanie wypada na granicy miedzy tytulem a lidem. Obie wersje daja te sama
   wysokosc wiersza, wiec porzadek nic nie kosztuje.

   `:not(.thumb-row--sm)` jest konieczne: male wiersze stoja w szynie
   ("Most popular"), maja niski obrazek i krotki tekst, wiec kwadrat by je
   WYDLUZYL zamiast skrocic.

   `flow-root` zamiast czyszczenia float: pudelko obejmuje oplywajacy element,
   wiec obrazek nie wychodzi na nastepny wiersz i separator zostaje na miejscu. */
@media (max-width: 639px) {
  .thumb-row:not(.thumb-row--sm) { display: flow-root; }
  .thumb-row:not(.thumb-row--sm) .thumb-row__media {
    float: left;
    margin: 0.25rem 1rem 0.5rem 0;
  }
  .thumb-row:not(.thumb-row--sm) .thumb-row__media .media-frame { aspect-ratio: 1 / 1; }
}

.rail__lead { margin-top: 3rem; }
.rail__lead .thumb-row__title,
.rail__block .thumb-row__title { margin-top: 0.25rem; }

.rail__block { margin-top: 2.5rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }

/* Karta autora w szynie. Portret 4:5 z tym samym promieniem co kadry artykulow
   (kolko 48px odstawalo wsrod samych zaokraglonych prostokatow), tekst oplywa go
   z prawej i schodzi pod spod — w waskiej szynie to wykorzystuje miejsce lepiej
   niz sztywne dwie kolumny. */
.author-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.author-list li + li {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.author-card-rail {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Domkniecie oplywania: bez tego kreska nastepnej pozycji podjezdza pod zdjecie. */
.author-card-rail::after {
  content: "";
  display: block;
  clear: both;
}

.portrait {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--soft);
}

.portrait img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.portrait__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  color: var(--warm-gray);
}

.portrait--rail {
  float: left;
  width: 5.25rem;
  aspect-ratio: 4 / 5;
  margin: 0.25rem 1rem 0.5rem 0;
}

.portrait--rail .portrait__initials { font-size: 1.125rem; }

.author-card-rail__name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.15s;
}

.author-card-rail:hover .author-card-rail__name { color: var(--forge-red-deep); }

.author-card-rail__role {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

.author-card-rail__bio {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--warm-gray);
}

.author-card-rail__more {
  display: block;
  margin-top: 0.625rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forge-red-deep);
}

.more-link {
  margin-top: 1rem;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--forge-red-deep);
  text-decoration: none;
}

.card-grid {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}

.card__title { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.375; }
.card__title a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
.card__title a:hover { color: var(--forge-red-deep); }
.card__dek { margin-top: 0.75rem; font-size: 0.875rem; color: var(--warm-gray); }

.brief { border-top: 1px solid var(--hairline); padding-top: 1.25rem; }
.brief__title { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.375; }
.brief__title a { color: var(--ink); text-decoration: none; }
.brief__text {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: color-mix(in oklab, var(--ink) 85%, transparent);
}

/* ==========================================================================
   OKRUSZKI
   ========================================================================== */
.crumbs { margin-bottom: 1.5rem; }

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--warm-gray);
}

.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; color: var(--hairline); }
.crumbs a { color: inherit; text-decoration: none; transition: color 0.15s; }
.crumbs a:hover { color: var(--forge-red-deep); }
.crumbs [aria-current="page"] {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

/* ==========================================================================
   ARTYKUL
   ========================================================================== */
.article-head { border-bottom: 1px solid var(--hairline); }
.article-head .shell-narrow { padding-block: 2rem 2.5rem; }

.article-kicker { display: flex; align-items: center; gap: 0.75rem; }
.article-kicker a { color: var(--ink); text-decoration: none; }
.article-kicker a:hover { color: var(--forge-red-deep); }

.article-title { margin-top: 1rem; font-size: 1.875rem; line-height: 1.06; }
.article-dek { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--warm-gray); }
/* Byline zamyka blok naglowkowy, zamiast wisiec miedzy lidem a zdjeciem.
   Wloskowa kreska nad nim to klasyczne rozwiazanie zecerskie: oddziela
   "obietnice" artykulu (nadtytul, tytul, lid, podpis) od dowodow (zdjecie, tekst).
   Bez niej linia miala tyle samo swiatla nad soba i pod soba, wiec nie nalezala
   wizualnie do niczego. */
.article-byline {
  margin-top: 1.75rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--hairline);
}

.article-media { margin-top: 1.75rem; }
.article-media figcaption,
.article-caption { margin-top: 0.75rem; font-size: 0.75rem; color: var(--warm-gray); }

.article-body { padding-block: 3rem; }

.article-body p,
.article-body ul,
.article-body ol {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-top: 1.25rem;
}

.article-body > p:first-child { margin-top: 0; }

.article-body h2 { margin-top: 2.5rem; font-size: 1.75rem; }
.article-body h3 { margin-top: 2rem; font-size: 1.25rem; line-height: 1.15; }

/* Inicjal wpuszczony w pierwszy akapit. Wersalik jest ustawiany na pierwszej
   literze pierwszego akapitu, wiec dziala takze wtedy, gdy tresc przychodzi
   z Tribune Desk i nikt jej recznie nie oznaczyl. */
.article-body > p:first-of-type::first-letter {
  float: left;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
  font-family: var(--font-serif);
  font-size: 3.4rem;
  line-height: 0.78;
  color: var(--forge-red-deep);
}

.article-body blockquote {
  clear: both;
  margin: 2.5rem 0 0;
  border-left: 2px solid var(--forge-red);
  padding-left: 1.5rem;
}

.article-body blockquote p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.375;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.article-body figure { margin: 2rem 0; }
.article-body figcaption { margin-top: 0.5rem; font-size: 0.75rem; color: var(--warm-gray); }
.article-body img { border-radius: 10px; border: 1px solid var(--hairline); }
.article-body iframe { max-width: 100%; border-radius: 10px; }

/* Dwie bariery przeciw rozjechaniu strony w poziomie na telefonie. Zwykly tekst
   zawija sie sam, ale te dwa przypadki nie:

   1. Ciag znakow bez spacji dluzszy niz kolumna (goly URL w tresci) rozpycha
      caly dokument. `break-word` lamie go DOPIERO gdy nie miesci sie w linii,
      wiec normalny tekst zawija sie jak dotad.
   2. Tabela i blok <pre> maja wlasna szerokosc minimalna, ktorej `max-width`
      nie ogranicza. `display: block` robi z nich zwykle pudelko, ktore moze
      sie przewijac samo, zamiast przewijac strone.

   Zadnego artykulu z tabela dzis nie mamy, ale wtyczka je przepuszcza
   (`wp_kses_allowed_html('post')` zawiera `table` i `pre`), wiec pierwszy taki
   artykul zepsulby uklad, zanim ktokolwiek by to zauwazyl. */
.article-body { overflow-wrap: break-word; }

.article-body table,
.article-body pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Bloczek "Highlights" — 3-punktowy skrot artykulu. Silnik HF emituje zaraz po
   lidzie sam szkielet <aside class="hf-highlights"><ul>…</ul></aside>; naglowek
   sygnetowy (kwadracik hf + "Highlights") doklada chronicle_highlights_heading()
   w functions.php. Czerwona kreska z lewej jak przy blockquote. BEZ linii
   poziomej od dolu: pozioma zbiegala sie z pionowa w katownik, ktorego nigdzie
   indziej na stronie nie ma (odrzucone na makiecie 2026-08-25) — od tresci
   oddziela bloczek samo swiatlo, a poczatek tekstu sygnalizuje inicjal.

   Te reguly musza stac PONIZEJ blokow `.article-body p/ul` — czesc selektorow
   ma te sama specyficznosc i wygrywa kolejnoscia w pliku. */
.hf-highlights {
  border-left: 2px solid var(--forge-red);
  padding: 0.125rem 0 0.375rem 1.5rem;
  margin-bottom: 2.25rem;
}

/* `.article-body p` (17px, margines akapitowy) stoi wyzej w pliku i przy rownej
   specyficznosci wygralby z `.signet-heading p` — stad pelna sciezka. */
.article-body .hf-highlights .signet-heading p {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0;
}

.article-body .hf-highlights ul {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.article-body .hf-highlights li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: color-mix(in oklab, var(--ink) 90%, transparent);
}

.provenance-note {
  clear: both;
  margin-top: 2.5rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--warm-gray);
  /* Kursywa oddziela notke o pochodzeniu tekstu od samego tekstu: to nie jest
     glos artykulu, tylko oswiadczenie redakcji o tym, jak powstal. */
  font-style: italic;
}

/* Nazwisko autora i nazwa platformy sa w notce KLIKALNE i w firmowej czerwieni.
   To ta sama czerwien, ktora nosza odnosniki w tresci artykulu (`--forge-red-deep`),
   wiec notka nie wprowadza nowego koloru — podkresla tylko, ze za tekstem stoi
   konkretny czlowiek i konkretne narzedzie, a nie anonimowa maszyna. */
.provenance-note a {
  color: var(--forge-red-deep);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--forge-red-deep) 35%, transparent);
  transition: border-color 0.15s;
}
.provenance-note a:hover { border-bottom-color: var(--forge-red-deep); }

/* ==========================================================================
   DZIAL I AUTORZY
   ========================================================================== */
.desk-head { display: flex; align-items: flex-start; gap: 1rem; }
.desk-head h1 { font-size: 1.875rem; }
.desk-head .signet { margin-top: 0.5rem; }
.desk-blurb { margin-top: 3rem; max-width: 42rem; font-size: 1.125rem; color: var(--warm-gray); }

.desk-grid { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
.desk-grid h2 { margin-top: 1rem; font-size: 1.5rem; line-height: 1.375; }
.desk-grid h2 a { color: var(--ink); text-decoration: none; transition: color 0.15s; }
.desk-grid h2 a:hover { color: var(--forge-red-deep); }
.desk-grid .dek { margin-top: 0.75rem; font-size: 1rem; }

.author-card { display: flex; gap: 1.25rem; align-items: flex-start; }
.author-card__photo {
  height: 5rem; width: 5rem; flex-shrink: 0;
  border-radius: 9999px; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--soft);
  display: grid; place-items: center;
  font-family: var(--font-serif); color: var(--warm-gray);
}
.author-card__photo img { height: 100%; width: 100%; object-fit: cover; }
.author-card__name { font-size: 1.5rem; }
.author-card__role { margin-top: 0.25rem; }
.author-card__bio { margin-top: 0.75rem; color: var(--warm-gray); }

.author-grid { margin-top: 2.5rem; display: grid; gap: 2.5rem; }

.empty-note {
  margin-top: 2.5rem;
  border: 1px dashed var(--hairline);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  color: var(--warm-gray);
}

/* ==========================================================================
   JASNA STOPKA
   Odwzorowanie `SiteFooter.tsx` z makiety. Miary Tailwinda przeliczone:
   `max-w-6xl` = 72rem, `px-6` = 1.5rem, `py-10` = 2.5rem, `text-lg` = 1.125rem,
   `mt-4` = 1rem, `gap-x-6` = 1.5rem, `gap-y-2` = 0.5rem, `mt-6` = 1.5rem,
   `text-sm` = 0.875rem, `text-xs` = 0.75rem.
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--paper);
}

.site-footer__inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.site-footer__mark {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--ink);
}

/* Ten sam zabieg co w winiecie: drugi czlon nazwy czerwienia, bez kursywy. */
.site-footer__mark em { font-style: normal; color: var(--forge-red); }
.site-footer__mark i { font-style: italic; color: var(--warm-gray); }

.site-footer__nav {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  font-size: 0.875rem;
}

/* CZERWIEN, NIE SZAROSC — i to jest wynik POMIARU, nie odczytu klas. Makieta ma na
   nawigacji `text-warm-gray`, wiec pierwsza wersja wziela szarosc z lektury kodu;
   render pokazal `oklch(0.422 0.153 31)`, czyli forge-red-deep, bo regula dla `a`
   w ich globalnym arkuszu bije klase postawiona na rodzicu. */
.site-footer__nav a {
  color: var(--forge-red-deep);
  text-decoration: none;
}

/* Makieta ma `hover:text-forge-red-deep`, czyli ten sam kolor co spoczynkowy —
   najechanie nie daje tam ZADNEJ informacji zwrotnej. Kolor trzymamy zgodny
   z projektem, a sprzezenie dokladamy podkresleniem: stan spoczynku wyglada
   identycznie jak w makiecie, a odnosnik przestaje byc niemy. */
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  text-decoration: underline;
}

.site-footer__note {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  color: var(--warm-gray);
}

/* ==========================================================================
   PASEK ZAMYKAJACY
   ========================================================================== */
.closing-band { background: var(--ink); color: var(--on-dark); }

.closing-band__inner {
  max-width: var(--shell-mid);
  margin-inline: auto;
  padding: 3.5rem var(--pad);
  text-align: center;
}

/* Znak w pasku zamykajacym jest TYPOGRAFICZNY, nie plikiem. Stary
   `wordmark-light.svg` byl tekstem zamienionym na krzywe, wiec przy zmianie
   marki trzeba by go generowac z fontu. Zlozony z tekstu ma dwie zalety:
   zmienia sie razem z nazwa i nie wymaga zadnego assetu (a strony logowania
   Kinde i tak nie wpuszczaja plikow z obcej domeny — patrz D11). */
.closing-band__mark {
  margin-inline: auto;
  display: block;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}

/* Na ciemnym tle OBA czlony sa w cieplej bieli — czerwien jest zarezerwowana
   dla jasnych podkladow (ta sama regula co w brands/v2 na platformie). */
.closing-band__mark em { font-style: normal; color: inherit; }

.closing-band__claim {
  margin-top: 1.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.375;
  color: var(--on-dark);
}

.closing-band__cta {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background: var(--forge-red-deep);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-dark);
  text-decoration: none;
  transition: background 0.15s;
}

.closing-band__cta:hover { background: var(--ember); }

/* ==========================================================================
   PAGINACJA
   ========================================================================== */
.pagination { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hairline); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.pagination .page-numbers {
  display: inline-flex; height: 2.25rem; min-width: 2.25rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 6px;
  padding-inline: 0.5rem;
  font-size: 0.875rem; text-decoration: none; color: var(--ink);
}
.pagination .page-numbers.current { background: var(--forge-red); color: var(--on-dark); border-color: var(--forge-red); }

/* ==========================================================================
   PUNKTY ZALAMANIA — te same co w makiecie (Tailwind: sm 640, md 768, lg 1024)
   ========================================================================== */
@media (min-width: 640px) {
  /* `.masthead__name` nie ma tu juz nadpisania — stopien niesie `clamp` w regule
     bazowej, wiec zgadza sie na kazdej szerokosci, a nie tylko w progach. */
  .masthead__plate { padding-inline: 1.5rem; }
  .masthead__strap { gap: 1.25rem; }
  .masthead__rule { width: 8rem; }
  .masthead__word { font-size: 0.875rem; letter-spacing: 0.18em; }
  .thumb-row__media { width: 12rem; }
}

@media (min-width: 768px) {
  .masthead__decor { display: block; }
  .masthead__plate { padding-block: 3.5rem; } /* `md:py-14` */
  .masthead__rule { width: 12rem; }
  .card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .author-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-title { font-size: 3rem; }
  .desk-head h1 { font-size: 2.5rem; }
  .raster-rule img { height: 52px; }
  .closing-band__mark { height: 2rem; }
  .closing-band__claim { font-size: 1.125rem; }
}

@media (min-width: 1024px) {
  .masthead__rule { width: 16rem; } /* `lg:w-64` — 256 px, tyle co w makiecie */
  .front-grid { grid-template-columns: 2fr 1fr; }
  .rail {
    position: sticky;
    top: 2.5rem;
    align-self: start;
    border-left: 1px solid var(--hairline);
    padding-left: 2rem;
  }
  .lead__title { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   POZYCJE WARSTW RASTROWYCH
   Wartosci i punkty zalamania przepisane z makiety: w niej kazda z tych chmur
   pojawia sie dopiero od md (albo lg), zeby na telefonie nie zjadala kolumny.
   ========================================================================== */
.front-decor,
.front-decor-red,
.article-decor,
.related-decor,
.desk-decor,
.author-decor,
.authors-decor,
.notfound-decor { display: none; }

@media (min-width: 768px) {
  .front-decor-red { display: block; bottom: 1.5rem; right: 0; height: 11rem; width: 9rem; }
  .article-decor   { display: block; top: 2rem;      right: 0; height: 16rem; width: 11rem; }
  .related-decor   { display: block; bottom: 0;      left: 0;  height: 12rem; width: 10rem; }
  .desk-decor,
  .author-decor,
  .authors-decor   { display: block; top: 2.5rem;    left: 0.5rem; height: 13rem; width: 9rem; }
  .notfound-decor  { display: block; bottom: 0;      right: 0; height: 12rem; width: 10rem; }
}

@media (min-width: 1024px) {
  .front-decor { display: block; top: 8rem; left: 0; height: 14rem; width: 9rem; }
}

/* ==========================================================================
   PASEK GLOBALNY WITRYNY + PRZELACZNIK SEKCJI
   W makiecie ten pasek jest wspolny dla obu polowek serwisu i stoi NAD winieta.
   Na Chronicle chowa menu, "Sign in" i "Book Your Demo" — zostaje czerwona
   belka i przelacznik. Lewa strona pusta celowo: znak firmowy niesie winieta.
   ========================================================================== */
/* Bez `border-bottom`. Ta kreska oddzielala biel od bieli: pod paskiem zaczyna
   sie winieta o dokladnie tym samym tle, a miedzy nimi nie ma nic poza odstepem.
   Nagłowek mial przez to PIEC poziomych elementow w 300 pikselach (czerwona
   belka, ta kreska, raster winiety, kreska nad dzialami, kreska zamykajaca).
   Makieta ma je tak samo — to jest swiadome odejscie od niej, nie poprawka. */
.site-header {
  background: var(--chronicle);
}

.site-header__rule {
  height: 3px;
  background: var(--forge-red);
}

.site-header__inner {
  /* Pasek jest PELNOSZEROKI, tak jak w projekcie Tribune Desk: jego wnetrze idzie
     od krawedzi do krawedzi, a swiatlo daje sam `padding`. Wczesniejsze
     `max-width: var(--shell)` wsuwalo zawartosc o 144 px z kazdej strony (przy 1440 px
     okna), przez co przelacznik sekcji konczyl sie na x=1167 zamiast 1416.
     Ta sama zmiana idzie w `.v2-nav-inner` na platformie — przelacznik ma po obu
     stronach stac w tym samym miejscu i to jest cel sam w sobie.
     Uwaga: to dotyczy WYLACZNIE paska. Winieta i tresc zostaja w `--shell`. */
  margin-inline: auto;
  padding: 1rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Pasek ma STALA wysokosc calkowita: 1rem + 36px + 1rem. Ta sama liczba stoi
     w `.v2-nav-inner` (frontend/src/styles/landing.css w repo headlinesforge),
     dzieki czemu przelacznik ma po obu stronach ten sam srodek w pionie.
     68, nie 36: `box-sizing: border-box` wlicza do tej wartosci padding, wiec
     `min-height: 36px` bylo mniejsze niz same marginesy i nie robilo NIC.
     Zmierzone na zywo na pikselach: dolna krawedz paska wypadala na y=60
     zamiast y=71, a przelacznik siedzial 5 px wyzej niz na platformie.
     68, a nie 72 (zmiana 2026-09-06, decyzja wlasciciela): rebranding wyrownuje obie
     powierzchnie do PROJEKTU, ktory ma pasek 72 px CALKOWITEJ wysokosci. Na platformie
     przycisk "Book Your Demo" zszedl z 40 px do 36 (padding 8/16 jak w projekcie), wiec
     rzad ma tam 1rem + 36 + 1rem = 68, a z czerwona linia i obramowaniem 72. Tutaj nie
     ma czego rozpychac, wiec ta liczba jest wylacznie po to, zeby rzad byl rowny po obu
     stronach — i musi isc razem z tamta zmiana, inaczej przelacznik skacze przy przejsciu. */
  min-height: 68px;
}

.section-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--hairline) 70%, transparent);
  background: color-mix(in oklab, var(--card-bg) 70%, transparent);
  padding: 2px;
}

.section-switch__pill {
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--warm-gray);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.section-switch__pill:hover { color: var(--ink); }

.section-switch__pill.is-active {
  background: color-mix(in oklab, var(--ink) 85%, transparent);
  color: var(--on-dark);
}

.section-switch__pill.is-active:hover { color: var(--on-dark); }

/* Ponizej 480 px przelacznik sie kurczy — i to NIE jest potrzeba tej strony.
   Tutaj miejsca jest az nadto (lewa strona paska stoi pusta). Ta regula jest
   po to, zeby przycisk byl identyczny z tym na headlinesforge.com, gdzie przy
   360 px pelnowymiarowy przelacznik (197 px) razem z przyciskiem menu i znakiem
   firmowym wychodzil 33 px poza ekran.
   Cel: uzytkownik ma widziec JEDEN przycisk, ktory zostaje na miejscu, a zmienia
   sie strona pod nim. Dlatego wartosci musza byc te same po obu stronach — patrz
   `.v2-switch-pill` w `frontend/src/styles/landing.css` w repo headlinesforge.
   Zmieniasz tu? Zmien i tam. */
@media (max-width: 479px) {
  .section-switch__pill { font-size: 8px; padding: 3px 6px; letter-spacing: 0.04em; }
}

/* ==========================================================================
   AKCENT REDAKCYJNY — pierwsze cztery slowa cytatu
   Odpowiednik RedHighlight z makiety. Nie stosujemy go do <strong> w tekscie
   ciaglym: tam akcent lamal sie miedzy wierszami albo bil sie o uwage
   z inicjalem, a pogrubienie w zdaniu ma po prostu znaczyc pogrubienie.
   Opakowanie robi chronicle_quote_accent() w functions.php, bo CSS nie umie
   wybrac "pierwszych czterech slow".
   ========================================================================== */
.quote-accent {
  color: var(--on-dark);
  padding-inline: 0.28em;
  background-image: linear-gradient(var(--forge-red), var(--forge-red));
  background-size: 100% 1.12em;
  background-position: 0 0.2em;
  background-repeat: no-repeat;
  /* W cytacie fraza MOZE sie zlamac — jest dluga i stoi w duzym szeryfowym
     kroju, wiec zakaz lamania wypychalby ja w calosci do nastepnego wiersza
     i robil dziure. Dlatego kazdy fragment dostaje wlasny pasek. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ==========================================================================
   STRONA AUTORA — portret 4:5 obok nazwiska, nizej lista tekstow
   ========================================================================== */
.author-hero {
  margin-top: 1.5rem;
  display: grid;
  gap: 2rem;
  align-items: start;
}

.author-hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--soft);
}

.author-hero__frame img,
.author-hero__video {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: 0;
}

.author-hero__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--warm-gray);
}

/* Przycisk odtwarzania: przykrywa caly kadr, zeby trafic w niego bylo latwo
   takze na telefonie. Przyciemnienie tla daje kontrast bialemu trojkatowi
   niezaleznie od tego, jak jasne jest zdjecie. */
.author-hero__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: color-mix(in oklab, var(--ink) 25%, transparent);
  transition: background 0.15s;
}

.author-hero__play:hover {
  background: color-mix(in oklab, var(--ink) 40%, transparent);
}

.author-hero__play-mark {
  position: relative;
  display: grid;
  place-items: center;
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  background: var(--forge-red);
}

.author-hero__play-mark::after {
  content: "";
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.8rem;
  border-color: transparent transparent transparent var(--on-dark);
  margin-left: 0.2rem;
}

.author-hero__name {
  font-size: 1.875rem;
  line-height: 1.15;
}

.author-hero__role {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warm-gray);
}

.author-hero__bio {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in oklab, var(--ink) 85%, transparent);
}

.author-stories { margin-top: 3.5rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }

.story-list {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.story-list li + li { border-top: 1px solid var(--hairline); }

.story-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.25rem;
  text-decoration: none;
  color: inherit;
}

.story-row__thumb {
  height: 4rem;
  width: 6rem;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  object-fit: cover;
}

.story-row__body { min-width: 0; }

.story-row__desk {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--forge-red-deep);
}

.story-row__title {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.375;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.15s;
}

.story-row:hover .story-row__title { color: var(--forge-red-deep); }

.story-row__date { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--warm-gray); }

.author-others { margin-top: 4rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }

.author-others ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
}

.author-others a { color: var(--ink); text-decoration: none; }
.author-others a:hover { color: var(--forge-red-deep); }

@media (min-width: 768px) {
  .author-hero { grid-template-columns: minmax(0, 18rem) 1fr; }
  .author-hero__name { font-size: 2.5rem; }
}