:root {
  /*
    tyk.pl design tokens — warstwy primitive / semantic / component.
    Typografia realizuje wzorcowy system edytorski (web-typography skill):
    dwa głosy (display = Poppins 700, treść = stack systemowy), skala dwóch
    biegunów, kwant rytmu 30px, miara ~600px, linki różnicowane podkreśleniem.
  */

  /* Primitive palette: anthracite background, off-white prose. */
  --primitive-neutral-950: #111318;
  --primitive-neutral-925: #15181d;
  --primitive-neutral-900: #181c22;
  --primitive-neutral-850: #1c2128;
  --primitive-neutral-800: #232933;
  --primitive-neutral-750: #2b333f;
  --primitive-neutral-700: #343b46;
  --primitive-neutral-500: #6f7a86;
  --primitive-neutral-400: #98a2ad;
  --primitive-neutral-200: #d4dae1;
  --primitive-neutral-100: #eef2f5;

  --primitive-gold-500: #e7bb58;
  --primitive-gold-400: #f8d77a;
  --primitive-gold-600: #d99c2e;
  --primitive-cyan-300: #9dccd8;
  --primitive-plum-500: #9b3bd1;
  --primitive-amber-100: #f7e8b8;

  /* Semantic colour tokens. */
  --color-bg: var(--primitive-neutral-925);
  --color-bg-2: var(--primitive-neutral-900);
  --color-bg-strong: var(--primitive-neutral-950);
  --color-surface: var(--primitive-neutral-850);
  --color-surface-2: var(--primitive-neutral-800);
  --color-surface-3: var(--primitive-neutral-750);
  --color-text: var(--primitive-neutral-200);
  --color-text-strong: var(--primitive-neutral-100);
  --color-muted: var(--primitive-neutral-400);
  --color-line: var(--primitive-neutral-700);
  --color-accent: var(--primitive-gold-500);
  --color-accent-2: var(--primitive-gold-400);
  --color-accent-3: var(--primitive-gold-600);
  --color-link: var(--primitive-cyan-300);
  --color-plum: var(--primitive-plum-500);
  --color-focus: color-mix(in srgb, var(--color-accent), transparent 32%);

  /* Typography: two voices. */
  --font-display: "Poppins", var(--font-body);
  --font-body: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans,
               Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --weight-display: 700;      /* jedyna waga display */
  --weight-body: 400;
  --weight-sub: 600;          /* h4, etykiety formularzy */

  /* Skala dwóch biegunów (html = 16px). Body/lead/small bez zmian na mobile;
     skaluje się tylko display i nagłówki. */
  --size-caption: 1rem;       /* 16 — meta, podpisy, etykiety sekcji */
  --size-small: 1.125rem;     /* 18 — stopka, etykiety formularzy (w500) */
  --size-body: 1.25rem;       /* 20 — tekst ciągły */
  --size-lead: 1.5rem;        /* 24 — lead / h4 */
  --size-h3: 1.875rem;        /* 30 → 32 desktop */
  --size-h2: 2.25rem;         /* 36 → 48 desktop */
  --size-h1: 4rem;            /* 64 → 96 desktop */

  /* Interlinie: maleją ze stopniem (1.6 → 1.4 → 1.2 → 1.1 → 0.95). */
  --lh-body: 1.6;
  --lh-lead: 1.4;
  --lh-quote: 1.2;
  --lh-heading: 1.1;
  --lh-hero: 0.95;

  /* Miara i rytm. */
  --measure: 600px;           /* body 20px → 58–69 CPL */
  --measure-lead: 800px;      /* lead 24px */
  --measure-narrow: 400px;    /* teksty 16px w kartach */
  --rhythm: 30px;             /* kwant; 1× w wątku / 3× przed nowym wątkiem */

  /* Tracking. */
  --tracking-display: -0.03em;   /* display ≥64px */
  --tracking-display-sm: -0.01em;/* display 24–48px */
  --tracking-uppercase: 0.05em;  /* jedyny dodatni — etykiety UPPERCASE */
  /* body, meta, UI: normal — nigdy nie trackinguj tekstu ciągłego. */

  /* Spacing. */
  --space-page-x: 22px;

  /* Shape, border, elevation. */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --border-subtle: 1px solid var(--color-line);
  --shadow-card: 0 18px 40px rgba(0, 0, 0, .24);
  --shadow-media: 0 18px 50px rgba(0, 0, 0, .3);

  /* Component tokens. */
  --page-bg: radial-gradient(circle at 16% -10%, rgba(231, 187, 88, .12), transparent 34rem), linear-gradient(180deg, #171a20, var(--color-bg-2) 42%, var(--color-bg));
  --panel-bg-soft: rgba(255, 255, 255, .035);
  --panel-bg-raised: linear-gradient(180deg, var(--color-surface), color-mix(in srgb, var(--color-bg-2), var(--color-surface) 22%));
  --card-radius: var(--radius-xl);
  --card-border: var(--border-subtle);
  --card-shadow: var(--shadow-card);
  --input-bg: var(--color-surface-2);
  --input-border: var(--border-subtle);
  --notice-bg: rgba(242, 193, 78, .1);
  --notice-border: 1px solid rgba(242, 193, 78, .35);
  --notice-text: var(--primitive-amber-100);
}

@media (min-width: 652px) {
  :root { --size-h3: 2rem; --size-h2: 3rem; --size-h1: 6rem; }
}


* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  /* Treść zawsze na systemowym stacku (zero web-fontu dla body). */
  font: 400 var(--size-body) / var(--lh-body) var(--font-body);
  color: var(--color-text);
  background: var(--page-bg);
  font-kerning: normal;
  font-feature-settings: "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  /* antialiased — tylko na ciemnych tłach (zasada skill-a). */
  -webkit-font-smoothing: antialiased;
}

/* ── nagłówki ─────────────────────────────────────────────────────── */
/* h1: jedyny głos display (Poppins 700), ligatury włączone, mocny ujemny tracking. */
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  font-feature-settings: "liga" 1;
  margin: 0;
}

/* ── linki: różnicowane PODKREŚLENIEM, nie kolorem ─────────────────── */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-style .16s ease, color .16s ease;
}
a:hover { text-decoration-style: dotted; text-decoration-skip-ink: none; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }

a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

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

/* Skip-link: nawigacja ma teraz 6 pozycji, klawiatura musi mieć obejście. */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--space-page-x);
  top: 8px;
  z-index: 100;
  background: var(--color-surface);
  color: var(--color-text-strong);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: var(--border-subtle);
}

/* Ruch tylko dla tych, którzy go chcą — transformy miniatur, CTA i smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.wrap { max-width: var(--measure-wide, 1180px); margin: 0 auto; padding: 0 var(--space-page-x); }

/* ── etykiety sekcji — jedyny głos UPPERCASE ─────────────────────── */
.label {
  font-size: var(--size-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
}

.section { padding: 42px 0; }
.section-first { padding-top: 34px; }
/* h2/h3 sekcji (poza treścią artykułu) zachowują głos body w400, różnicowane rozmiarem. */
.section h1 {
  font-size: var(--size-h1);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--color-text-strong);
  max-width: 16ch;
  /* Zabezpieczenie, nie decyzja typograficzna: długie nazwy kanałów w Poppins
     700 przy 64px nie mieszczą się na 320px i wypychałyby layout w poziomie. */
  overflow-wrap: break-word;
}
/* Hero homepage'u: dwie informacje, więc dwie linie — słowo-kotwica marki
   („Wydanie") w głosie display, data jako podtytuł w głosie body.
   Bez `nowrap`: „Wydanie z 24 września 2026" w Poppins 700 wypychało layout
   na wąskich ekranach, bo podłoga clamp-a jest wyższa niż 7vw przy 320px. */
.section h1.home-hero-h1 {
  max-width: none;
  white-space: normal;
  font-size: clamp(2.5rem, 9vw, 6rem);
  margin-bottom: calc(var(--rhythm) / 2);
}
.home-hero-h1 .hero-date {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: .42em;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-muted);
  margin-top: .15em;
}
.section h2 {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-h2);
  line-height: var(--lh-heading);
  margin: calc(3 * var(--rhythm)) 0 var(--rhythm);
  letter-spacing: var(--tracking-display-sm);
  text-wrap: balance;
  color: var(--color-text-strong);
}

.footer {
  border-top: var(--border-subtle);
  padding: calc(6 * var(--rhythm)) 0 0;
  color: var(--color-text);
  font-size: var(--size-small);
  background: color-mix(in srgb, var(--color-bg-strong), transparent 60%);
  margin-top: calc(6 * var(--rhythm));
}
.back { color: inherit; text-decoration: underline; }
.small { font-size: var(--size-caption); }


/* components.css — karty, archiwum, brand bar, CTA.
   Realizuje wzorzec edytorski:
   - tytuł karty = głos display + podkreślenie 2px (jedyna podkreślana rola display poza h1);
   - metadane = pełny kolor tekstu, degradacja rozmiarem (16px), klejone 4px pod tytułem;
   - CTA = display, bez podkreślenia, ze strzałką; kolor akcentu max raz na ekran. */

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; grid-auto-rows: 1fr; }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }

.card {
  background: var(--panel-bg-raised);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  height: 100%;
}
.card a {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  align-self: stretch;
  color: inherit;
}
.card a:hover .thumb { transform: scale(1.025); }
.card a:hover .card-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.thumb {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  background: var(--color-surface-3);
  flex: 0 0 168px;
  transition: transform .24s ease;
}
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px;
}

/* Metadane: pełny kolor tekstu, stopień 16px, klejone 4px pod tytułem.
   (Miejsce na meta nad tytułem — w karcie to data+kanał, pod nimi tytuł.) */
.card-body .meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--color-text);
  font-size: var(--size-caption);
  margin-bottom: 4px;
  flex: 0 0 auto;
}
.card-body .meta .meta-date {
  font-size: var(--size-caption);
  color: var(--color-muted);
}
.card-body .meta .meta-channel {
  font-size: var(--size-caption);
  color: var(--color-text);
  font-weight: var(--weight-body);
  word-wrap: anywhere;
  line-height: 1.25;
}

/* Tytuł karty: głos display (Poppins 700), podkreślenie 2px na hover.
   Różnicowane rozmiarem, nie wagą/krojem wewnątrz treści. */
.card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-lead);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display-sm);
  margin: 4px 0 calc(var(--rhythm) / 2);
  text-wrap: balance;
  color: var(--color-text-strong);
  flex: 0 0 auto;
  /* Bez min-height: karta z krótkim tytułem miała trzy puste linie dziury.
     CTA i tak siedzi na margin-top: auto, więc rząd zostaje wyrównany. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA: display, bez podkreślenia, ze strzałką. Kolor akcentu — tu jedyne barwne użycie w karcie. */
.cta-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-display-sm);
  color: var(--color-accent);
  text-decoration: none;
}
.card a:hover .cta-link { transform: translateY(-1px); }

/* Logo / brand bar: logo tekstowe = głos display (jedyna rola display poza h1/CTA). */
.logo { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-display); letter-spacing: var(--tracking-display-sm); text-decoration: none; }
.logo .logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-3);
  color: var(--color-bg-strong);
  font-size: 22px; font-weight: var(--weight-display); line-height: 1;
  margin-right: 10px;
}
.logo .logo-word { font-size: 28px; font-weight: var(--weight-display); color: var(--color-text-strong); letter-spacing: var(--tracking-display-sm); }
.logo .logo-tld { font-size: 18px; font-weight: var(--weight-display); color: var(--color-plum); margin-left: 2px; align-self: flex-end; padding-bottom: 4px; }
.logo-lg .logo-mark { width: 48px; height: 48px; font-size: 28px; border-radius: var(--radius-md); margin-right: 14px; }
.logo-lg .logo-word { font-size: 36px; }
.logo-lg .logo-tld { font-size: 22px; }
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 18px 0 22px;
  border-bottom: var(--border-subtle);
  margin-bottom: 26px;
}
.brand-bar .brand { text-decoration: none; }
@media (max-width: 620px) {
  .brand-bar { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 0 18px; }
  .logo-lg .logo-mark { width: 40px; height: 40px; font-size: 24px; margin-right: 10px; }
  .logo-lg .logo-word { font-size: 30px; }
  .logo-lg .logo-tld { font-size: 18px; }
}
.brand-home { padding: 0; }
.brand-logo-img { display: block; width: min(340px, 78vw); height: auto; }
.brand-home .logo-mark { width: 44px; height: 44px; font-size: 26px; border-radius: var(--radius-md); margin-right: 12px; }
.brand-home .logo-word { font-size: 32px; }
.brand-home .logo-tld { font-size: 20px; }

/* ── nawigacja serwisu w brand barze ─────────────────────────────── */
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.site-nav a { font-size: var(--size-small); color: var(--color-text); }
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (max-width: 620px) { .site-nav { margin-left: 0; } }

/* ── hero wydania: statystyki + etykiety sekcji ──────────────────── */
.hero-stats { margin: 0 0 var(--rhythm); font-size: var(--size-small); color: var(--color-text); }
/* Etykiety sekcji są semantycznie h2 (czytnik ekranu musi móc przeskoczyć do
   „Pozostałe materiały"), ale wizualnie zostają etykietą — nadpisujemy .section h2. */
.section h2.section-label {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-caption);
  line-height: var(--lh-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  margin: calc(2 * var(--rhythm)) 0 calc(var(--rhythm) / 2);
  color: var(--color-text);
}

/* ── panel Temat dnia: jedyny akcentowany blok wydania ───────────── */
.topic-panel {
  background: var(--notice-bg);
  border: var(--notice-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  margin: 0 0 var(--rhythm);
}
.topic-panel > a { display: block; padding: 24px; text-decoration: none; color: inherit; }
.topic-panel .topic-label { color: var(--color-accent); margin: 0 0 8px; }
.topic-panel .topic-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display-sm);
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-text-strong);
  text-wrap: balance;
  max-width: 34ch;
}
.topic-panel a:hover .topic-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.topic-tldr { margin: 12px 0 0; font-size: var(--size-body); line-height: var(--lh-body); max-width: var(--measure); color: var(--color-text); }
.topic-panel .card-foot { margin-top: 14px; }
.topic-facts { font-size: var(--size-caption); color: var(--color-muted); }

/* ── karty: TL;DR, stopka z czasem czytania, stan „przeczytane" ──── */
.card-tldr {
  margin: 0 0 calc(var(--rhythm) / 2);
  font-size: var(--size-small);
  line-height: 1.45;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; }
.card-foot .cta-link { margin-top: 0; }
/* Degradacja KOLOREM tokenowym, nie opacity — opacity zbija kontrast
   poniżej 4.5:1 przy 16px i łamie własną zasadę systemu. */
.meta-facts { color: var(--color-muted); }
.read-flag { display: none; font-size: var(--size-caption); color: var(--color-text); white-space: nowrap; }
.is-read .read-flag { display: inline; }
.is-read .thumb { opacity: .55; }
.is-read .card-title { color: var(--color-text); }

/* Najważniejsze dziś: trzy szersze karty z większą miniaturą. */
.grid-featured { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--rhythm); }
@media (max-width: 980px) { .grid-featured { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-featured { grid-template-columns: 1fr; } }
.card-featured .thumb { height: 190px; flex-basis: 190px; }

/* ── wyszukiwarka (Pagefind UI na tokenach) ──────────────────────── */
/* Podłoga clamp-a musi zmieścić najdłuższe słowo („opracowaniach") na 320px. */
h1.page-h1 { font-size: clamp(1.85rem, 7vw, 3.75rem); max-width: none; line-height: var(--lh-heading); }
.search-box {
  margin-top: var(--rhythm);
  max-width: var(--measure-lead);
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--color-accent);
  --pagefind-ui-text: var(--color-text);
  --pagefind-ui-background: var(--color-surface);
  --pagefind-ui-border: var(--color-line);
  --pagefind-ui-tag: var(--color-surface-2);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--radius-md);
  --pagefind-ui-image-border-radius: var(--radius-sm);
  --pagefind-ui-font: var(--font-body);
}
.search-box mark { background: var(--notice-bg); color: var(--color-text-strong); }

/* Archiwum: pickery daty i kanału, pogrupowane wg kategorii. */
.archive { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .archive { grid-template-columns: 1fr; } }
.archive-box {
  background: var(--panel-bg-soft);
  border: var(--border-subtle);
  border-radius: var(--card-radius);
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}
.archive-box h2 { margin-top: 0; color: var(--color-text-strong); }
.picker-label {
  display: block;
  color: var(--color-text);
  font-size: var(--size-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  margin: 0 0 8px;
}
.archive-select {
  width: 100%;
  appearance: none;
  color: var(--color-text);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--radius-md);
  padding: 12px 42px 12px 12px;
  font: inherit;
  font-size: var(--size-small);
  line-height: 1.25;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.archive-select:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.archive-preview { margin-top: var(--rhythm); }
.archive-box ul { margin: 10px 0 0; padding-left: 0; list-style: none; }
.archive-box li { margin: 8px 0; max-width: 72ch; font-size: var(--size-body); }
.channel-groups { margin-top: var(--rhythm); display: grid; gap: 16px; }
.channel-group { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 14px; }
.channel-group:first-child { border-top: 0; padding-top: 0; }
.channel-group h3 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-lead);
  color: var(--color-text-strong);
}
.channel-group h3 a { color: inherit; text-decoration: none; }
.channel-group h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.channel-group-count { font-size: var(--size-caption); color: var(--color-muted); }
.channel-group ul { list-style: none; padding-left: 0; margin: 0; }
.channel-group li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 0; margin: 0; font-size: var(--size-body); }
.channel-group li span { color: var(--color-muted); font-size: var(--size-caption); white-space: nowrap; }
@media (max-width: 620px) { .channel-group li { grid-template-columns: 1fr; gap: 2px; } }


/* article.css — czytelnia artykułów wg wzorcowego systemu typograficznego.
   - śródtytuły treści (h2–h4) w foncie body, w wadze 400 (h4: 600), różnicowane ROZMIAREM;
   - display pojawia się wyłącznie w h1 artykułu;
   - jedna lewa linia, wiszące markery, jedyne wcięcie = cytat;
   - rytm pionowy na kwancie 30px (1× w wątku, 3× przed nowym wątkiem). */

.article-header { padding: 38px 0 26px; border-bottom: var(--border-subtle); }
.article-header h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--size-h1);
  line-height: var(--lh-heading);
  margin: calc(2 * var(--rhythm)) 0 0;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "liga" 1;
  text-wrap: balance;
  max-width: 16ch;
  color: var(--color-text-strong);
  /* Tytuły z YouTube bywają jednym długim tokenem („/prototype", nazwy modeli).
     Przy 64px na 320px taki token wypychał stronę w poziomie. */
  overflow-wrap: break-word;
}
/* Metadane pod tytułem: pełny kolor tekstu, degradacja ROZMIAREM (nie szarością), klejone 4px. */
.article-header .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  color: var(--color-text);
  font-size: var(--size-caption);
  margin-top: 4px;
}
.article-header .meta .sep { color: var(--color-muted); }
.article-header .meta .category { font-weight: var(--weight-sub); }
/* Linki w pasku metadanych: bez stałego podkreślenia (byłby las kresek
   w jednej linii), podkreślenie dopiero na hover/focus. */
.article-header .meta a { color: inherit; text-decoration: none; }
.article-header .meta a:hover,
.article-header .meta a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Lead TL;DR pod tytułem: głos lead ze skali (24 px / 1.4), miara lead. */
.article-tldr {
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--color-text-strong);
  max-width: var(--measure-lead);
  margin: var(--rhythm) 0 0;
  text-wrap: balance;
}

.article-layout { display: grid; grid-template-columns: minmax(0, var(--measure)) 280px; gap: 52px; align-items: start; }
.article { padding: 34px 0 64px; }

.article-main {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Jedna lewa linia: akapity, nagłówki, listy, figury trzymają max-width = miara. */
.article-main > * { max-width: var(--measure); }

/* Nośniki filtrów Pagefind — puste, niewidoczne, poza układem. */
.pf-filter { display: none; }

/* ── śródtytuły treści: font BODY, waga 400 (h4: 600) ─────────────── */
.article-main h1, .article-main h2, .article-main h3, .article-main h4 {
  hyphens: none;
  text-wrap: balance;
  font-family: var(--font-body);
}
.article-main h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  margin: calc(2 * var(--rhythm)) 0 var(--rhythm);
  color: var(--color-text-strong);
}
/* h2/h3/h4 w foncie body. Rytm: 3× nad, 1× pod; h2 → h3 bezpośrednio = 2×. */
.article-main h2 {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display-sm);
  margin: calc(3 * var(--rhythm)) 0 var(--rhythm);
  border-top: var(--border-subtle);
  padding-top: var(--rhythm);
  color: var(--color-text-strong);
}
.article-main h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display-sm);
  margin: calc(3 * var(--rhythm)) 0 var(--rhythm);
  color: var(--color-text-strong);
}
.article-main h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-sub);
  font-size: var(--size-lead);
  line-height: var(--lh-heading);
  margin: calc(2 * var(--rhythm)) 0 var(--rhythm);
  color: var(--color-text-strong);
}
.article-main h2 + h3 { margin-top: calc(2 * var(--rhythm)); }

/* Numerowane nagłówki h3 (postprocess emituje .numbered-heading z .heading-marker + .heading-text).
   Marker dziedziczy stopień i kolor tekstu — prosty znak, bez tła. */
.article-main h3.numbered-heading {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  column-gap: .35rem;
  margin-left: -3.55rem;
  max-width: calc(var(--measure) + 3.55rem);
}
.article-main h3.numbered-heading .heading-marker {
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Liczba i kropka nigdy się nie łamią — „10.", „55." zostają w jednej linii. */
  white-space: nowrap;
}
.article-main h3.numbered-heading .heading-text { min-width: 0; }

/* Akapit → akapit = 1× kwant; akapit → NOWY śródtytuł = 3× (realizowane marginesami h2/h3). */
.article-main p { margin: var(--rhythm) 0 0; }
.article-main strong { color: var(--color-text-strong); font-weight: var(--weight-sub); }

/* ── wiszące punktatory i numeratory ──────────────────────────────── */
/* padding-left: 0 + domyślne list-style-position: outside → tekst li licuje się
   z akapitami, marker wisi w lewym marginesie. */
.article-main ol,
.article-main ul {
  list-style: none;
  padding-left: 0;
  max-width: var(--measure);
  margin: var(--rhythm) 0 0;
}
.article-main li {
  position: relative;
  margin: calc(var(--rhythm) / 2) 0;
  padding-left: 0;
}
/* Markery dziedziczą stopień i kolor tekstu (wzorzec nie stylizuje ::marker osobno). */
.article-main ul > li::before {
  content: "–";
  position: absolute;
  left: -1.35rem;
  color: var(--color-text);
}
.article-main ol { counter-reset: item; }
.article-main ol > li { counter-increment: item; }
.article-main ol > li::before {
  content: counter(item) ".";
  position: absolute;
  left: -2.65rem;
  min-width: 2rem;
  text-align: right;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* ── cytaty — jedyne wcięcie w łamie ──────────────────────────────── */
.article-main blockquote {
  border-left: 6px solid var(--color-line);
  padding-left: 30px;
  margin: calc(2 * var(--rhythm)) 0;
  max-width: var(--measure-lead);
}
.article-main blockquote p {
  font-style: italic;
  font-weight: var(--weight-body);
  margin-top: 0;
}

/* ── skróty sekcji (desktop sticky + mobile) ──────────────────────── */
.toc {
  position: sticky;
  top: 18px;
  background: var(--panel-bg-soft);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  color: var(--color-text);
  font-size: var(--size-small);
  line-height: 1.45;
}
.toc strong {
  display: block;
  font-size: var(--size-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--color-text);
  margin-bottom: 6px;
}
.toc a { display: block; text-decoration: none; color: var(--color-text); padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.toc a:hover { text-decoration: underline; }
.toc-mobile { display: none; flex-wrap: wrap; margin: 0 0 var(--rhythm); padding: 10px; gap: 8px; background: var(--panel-bg-soft); border: var(--border-subtle); border-radius: var(--radius-lg); }
.toc-mobile a {
  /* „Redakcyjne tłumaczenie" nie schodzi poniżej min-content, więc bez
     min-width: 0 + zawijania pasek wypychał artykuł poza kadr na 320px. */
  flex: 1 1 7rem;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--size-caption);
  font-weight: var(--weight-sub);
}
/* odstępy robi `gap` — margin-left dublował je i zjadał 16px szerokości */
@media (max-width: 980px) {
  /* minmax(0, …) zamiast 1fr: domyślne `auto` jako minimum nie pozwalało
     ścieżce zejść poniżej min-content łamu, przez co artykuł wypychał layout
     w poziomie na telefonie (374px przy oknie 320px). */
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .toc-mobile { display: flex; grid-column: 1; order: -1; }
  .article-main > * { max-width: 100%; }
}
/* Mobile safety gutter: markery nigdy nie dotykają krawędzi telefonu. */
@media (max-width: 700px) {
  .article-main { padding-left: 1.375rem; }
  .article-main h3.numbered-heading {
    margin-left: -3.55rem;
    max-width: calc(100% + 3.55rem);
  }
  .article-main ol > li::before { left: -2.45rem; }
  .article-main ul > li::before { left: -1.3rem; }
}

/* Figury: mogą być szersze niż łam (wychodzą w PRAWO), lewa krawędź na linii. */
.article-cover {
  width: 100%;
  max-width: 780px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  margin: 40px 0;
}
.notice {
  background: var(--notice-bg);
  border: var(--notice-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  color: var(--notice-text);
  margin-top: calc(2 * var(--rhythm));
  max-width: var(--measure);
  font-size: var(--size-caption);
}