:root{
  /* typografia — jak w tvn24: Inter na wszystko, Noto Serif tylko jako akcent */
  --font-ui:Inter,Arial,Helvetica,sans-serif;
  --font-serif:"Noto Serif",Georgia,serif;
  --bg:#ffffff; --surface:#ffffff; --text:#12141a; --text-dim:#6b7280; --text-soft:#9aa1ac;
  --line:#e5e7ec; --line-soft:#f2f3f6; --red:#d6202b; --red-soft:#fdecec;
  --p-maks:#0ea5a4; --p-grot:#1e3a8a; --p-eryk:#d97706; --p-marta:#a8482a;
  --shadow:0 12px 40px rgba(16,20,28,.13);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b0c0f; --surface:#111318; --text:#f2f3f5; --text-dim:#989ea9; --text-soft:#6f7681;
  --line:#232730; --line-soft:#181b21; --red:#ff5761; --red-soft:#2a1416;
  --p-maks:#2dd4bf; --p-grot:#7aa2ff; --p-eryk:#fbbf24; --p-marta:#e08a63;
  --shadow:0 12px 40px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --bg:#0b0c0f; --surface:#111318; --text:#f2f3f5; --text-dim:#989ea9; --text-soft:#6f7681;
  --line:#232730; --line-soft:#181b21; --red:#ff5761; --red-soft:#2a1416;
  --p-maks:#2dd4bf; --p-grot:#7aa2ff; --p-eryk:#fbbf24; --p-marta:#e08a63;
  --shadow:0 12px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* przeskocz do treści — dla czytających klawiaturą */
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--text);color:var(--bg);
  padding:10px 16px;border-radius:4px;font-family:var(--font-ui);font-size:13px}
.skip:focus{left:16px}

/* ============ NAGŁÓWEK — pełny na górze, kurczy się przy przewijaniu ============ */
.hdr{position:sticky;top:0;z-index:90;background:var(--bg);border-bottom:1px solid var(--line)}
/* logo z lewej, data i narzędzia dosunięte do prawej; pasek działów
   zostaje wyśrodkowany w wierszu niżej */
.hdr__top{max-width:1180px;margin:0 auto;padding:18px 24px 12px;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  transition:padding .22s,opacity .18s;overflow:hidden}
.hdr.small .hdr__top{padding-top:0;padding-bottom:0;height:0;opacity:0;pointer-events:none}
.datestamp{font-family:var(--font-ui);font-size:11px;letter-spacing:1.7px;
  text-transform:uppercase;color:var(--text-soft);justify-self:end}
.logo{font-family:var(--font-ui);font-weight:900;font-size:31px;letter-spacing:-1.1px;
  text-align:center;white-space:nowrap}
.logo span{color:var(--red)}

/* ---- znak serwisu ----
   Dwa pliki: napis jest czarny, więc w trybie ciemnym potrzebna jest
   wersja z białym napisem. Przełącza je CSS, nie JavaScript, żeby przy
   wczytywaniu strony nie mrugało. */
.logo__img{height:56px;width:auto;display:block}
.logo__img--dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo__img--light{display:none}
  :root:not([data-theme="light"]) .logo__img--dark{display:block}}
:root[data-theme="dark"] .logo__img--light{display:none}
:root[data-theme="dark"] .logo__img--dark{display:block}
.mini .logo__img{height:26px;margin:0}
.mob__top .logo__img{height:34px;margin:0}
.ftr .logo__img{height:40px;margin:0 0 4px}
.tools{display:flex;gap:4px;justify-content:flex-end;align-items:center;justify-self:end}
.iconbtn{width:36px;height:36px;border:0;background:transparent;color:var(--text-dim);
  cursor:pointer;font-size:16px;line-height:1;border-radius:50%;display:grid;place-items:center}
.iconbtn:hover{background:var(--line-soft);color:var(--text)}

/* overflow musi zostać widoczny — inaczej rozwijane menu „Więcej” byłoby
   przycięte do wysokości paska. Poziome przewijanie działów bierze na siebie
   sam .nav, więc nic się przez to nie rozpycha. */
.hdr__nav{position:relative;max-width:1180px;margin:0 auto;padding:0 24px 12px;
  display:flex;justify-content:center;align-items:center;gap:28px}
.hdr.small .hdr__nav{padding-top:11px}
/* min-width:0 jest konieczne — bez niego pasek działów rozpycha całą stronę na wąskich ekranach */
.nav{display:flex;gap:26px;min-width:0;font-family:var(--font-ui);font-weight:500;
  font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;
  overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--text-dim);padding-bottom:4px;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .15s}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--text);border-bottom-color:var(--red)}
/* mini-logo i narzędzia pojawiają się dopiero w stanie skurczonym */
.mini{position:absolute;left:24px;top:50%;transform:translateY(-50%) translateX(-8px);
  font-family:var(--font-ui);font-weight:900;font-size:19px;letter-spacing:-.6px;
  opacity:0;pointer-events:none;transition:.22s}
.mini span{color:var(--red)}
.hdr.small .mini{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.mini-tools{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;gap:2px;
  opacity:0;pointer-events:none;transition:.22s}
.hdr.small .mini-tools{opacity:1;pointer-events:auto}
.burger{display:none}

/* ---- „Więcej” — działy spoza głównej nawigacji (WTC, Net, Życie…) ----
   Siedzi obok .nav, a nie w środku: .nav przewija się w poziomie, więc
   panel rozwijany zostałby w nim przycięty. */
.navmore{position:relative;flex:none}
.navmore__btn{border:0;background:transparent;cursor:pointer;padding:0 0 4px;
  display:flex;align-items:center;gap:5px;color:var(--text-dim);
  font-family:var(--font-ui);font-weight:500;font-size:12.5px;letter-spacing:1.5px;
  text-transform:uppercase;white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .15s}
.navmore__btn:hover{color:var(--text)}
.navmore__btn i{font-style:normal;font-size:9px;line-height:1;transition:transform .18s}
.navmore__btn[aria-expanded="true"]{color:var(--text)}
.navmore__btn[aria-expanded="true"] i{transform:rotate(180deg)}
.navmore__btn[aria-current]{color:var(--text);border-bottom-color:var(--red)}

.navmore__panel{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--shadow);padding:6px;z-index:95}
.navmore__panel[hidden]{display:none}
.navmore__panel a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 12px;border-radius:4px;font-size:14px;letter-spacing:0;
  text-transform:none;color:var(--text);transition:background .12s}
.navmore__panel a:hover{background:var(--line-soft)}
.navmore__panel a[aria-current]{color:var(--red);font-weight:700}
.navmore__panel small{font-size:11px;color:var(--text-soft);font-variant-numeric:tabular-nums}

/* w menu mobilnym te same działy dochodzą pod kreską, mniejszym stopniem */
.mob__sep{margin:22px 0 4px;font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-soft)}
.mob__list a.mob__more{font-size:19px;font-weight:700;letter-spacing:-.3px;padding:11px 0}

/* pasek nad nagłówkiem na tekstach z archiwum WTC — droga powrotna
   do serwisu tematycznego, który ma własną, ciemną skórę */
.wtcbar{background:#0a0b0d;color:#9aa1ac}
.wtcbar__in{max-width:1180px;margin:0 auto;padding:8px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase}
.wtcbar span{color:#fff;font-weight:700}
.wtcbar a:hover{color:#fff}
@media (max-width:820px){ .wtcbar__in{padding:8px 18px;font-size:10px;letter-spacing:1px} }

/* ============ MENU MOBILNE ============ */
.mob{position:fixed;inset:0;z-index:110;background:var(--bg);display:none;
  padding:22px 24px;overflow:auto}
.mob.on{display:block}
.mob__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mob__list{display:grid;gap:2px}
.mob__list a{font-family:var(--font-ui);font-size:27px;font-weight:900;letter-spacing:-.8px;
  padding:13px 0;border-bottom:1px solid var(--line-soft);display:flex;
  align-items:center;justify-content:space-between}
.mob__list a small{font-family:var(--font-ui);font-size:12px;font-weight:400;
  color:var(--text-soft);letter-spacing:0}

/* ============ UKŁAD ============ */
.shell{max-width:1180px;margin:0 auto;padding:0 24px 90px;display:grid;
  grid-template-columns:minmax(0,1fr);gap:56px;justify-content:center}
@media (min-width:1160px){
  .shell{grid-template-columns:minmax(0,700px) 250px}
}

/* ============ STRUMIEŃ ============ */
.kicker{font-family:var(--font-ui);font-size:11px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--text-soft);text-align:center;padding:32px 0 24px}
.kicker::after{content:"";display:block;width:30px;height:1px;background:var(--line);margin:13px auto 0}

/* separator dnia w strumieniu */
.daysep{display:flex;align-items:center;gap:14px;margin:14px 0 4px;
  font-family:var(--font-ui);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-soft)}
.daysep::before,.daysep::after{content:"";height:1px;background:var(--line);flex:1}
.daysep::before{flex:0 0 0}

.item{padding:30px 0;border-bottom:1px solid var(--line-soft);display:grid;
  grid-template-columns:1fr 132px;gap:26px;align-items:start;position:relative}
.item__ttl{font-family:var(--font-ui);font-size:24px;line-height:1.3;font-weight:700;
  letter-spacing:-.4px;margin-bottom:9px}
.item__ttl a{background-image:linear-gradient(var(--red),var(--red));background-size:0 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s}
.item:hover .item__ttl a{background-size:100% 2px}
.item__lead{font-size:15.5px;line-height:1.7;color:var(--text-dim);max-width:54ch}

.figure{width:132px;aspect-ratio:1;border-radius:3px;overflow:hidden;position:relative}
.figure i{position:absolute;inset:0;transition:transform .4s;
  background:linear-gradient(150deg,#8f9aa6,#3b4450)}
.item:hover .figure i{transform:scale(1.05)}
.figure::after{content:"FOTO";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-ui);font-size:9px;letter-spacing:2.5px;color:rgba(255,255,255,.42)}
.fig--b i{background:linear-gradient(150deg,#96a288,#3f4a35)}
.fig--c i{background:linear-gradient(150deg,#8794ad,#333c4f)}
.fig--d i{background:linear-gradient(150deg,#ad9384,#4d3f36)}
/* kafel dla artykułu bez zdjęcia */
.figure--none{border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;
  text-align:center;padding:10px}
.figure--none::after{content:none}
.figure--none b{display:block;font-family:var(--font-ui);font-weight:900;font-size:23px;
  line-height:1.05;letter-spacing:-.8px;color:var(--text)}
.figure--none em{display:block;font-style:normal;margin-top:7px;font-family:var(--font-ui);
  font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--text-soft)}

.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px;
  font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.cat{color:var(--text);font-weight:700;border-bottom:2px solid var(--red);padding-bottom:1px}
.time,.mins{color:var(--text-soft)}
.mins::before{content:"·";margin-right:10px;color:var(--line)}
.pilne{color:var(--red);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.glosy{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:1.2px;
  color:var(--text-dim)}
.glosy i{display:flex;gap:3px}
.glosy i s{width:6px;height:6px;border-radius:50%;text-decoration:none}
.item:hover .glosy{border-color:var(--text-dim);color:var(--text)}

/* temat dnia */
.item--top{grid-template-columns:1fr;gap:18px;padding-top:0;border-bottom-width:1px}
.item--top .figure{width:100%;aspect-ratio:2/1}
.item--top .item__ttl{font-size:39px;line-height:1.18;font-weight:800;letter-spacing:-.9px}
.item--top .item__lead{font-size:17.5px;line-height:1.68;max-width:60ch}

.more{display:block;width:100%;margin-top:38px;padding:16px;border:1px solid var(--line);
  background:transparent;font-family:var(--font-ui);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;border-radius:3px;transition:.18s}
.more:hover{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ============ PASEK BOCZNY (tylko na szerokich ekranach) ============ */
.rail{position:sticky;top:96px;padding-top:56px;display:grid;gap:34px;align-content:start}
.rail h3{font-family:var(--font-ui);font-size:10.5px;font-weight:900;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-soft);padding-bottom:10px;
  border-bottom:1px solid var(--text)}
.rail ol{list-style:none;counter-reset:n}
.rail ol li{counter-increment:n;display:grid;grid-template-columns:20px 1fr;gap:11px;
  padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px;line-height:1.45}
.rail ol li::before{content:counter(n);font-family:var(--font-ui);font-weight:900;
  font-size:12px;color:var(--text-soft);padding-top:2px}
.rail ol li:hover{color:var(--red)}
.voice{position:relative;padding:12px 0 12px 19px;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.45}
.voice::before{content:"";position:absolute;left:0;top:19px;width:8px;height:8px;
  border-radius:50%;background:var(--c)}
.voice em{display:block;margin-top:5px;font-style:normal;font-family:var(--font-ui);
  font-size:9.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-soft);white-space:nowrap}
.voice:hover{color:var(--c)}

/* ============ STOPKA ============ */
.ftr{border-top:1px solid var(--line);padding:50px 24px 32px;color:var(--text-dim);
  font-size:13.5px;line-height:2}
.ftr__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.ftr h4{font-family:var(--font-ui);color:var(--text);font-size:10.5px;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:10px}
.ftr a:hover{color:var(--red)}
.ftr .logo{text-align:left;font-size:22px;margin-bottom:10px;color:var(--text)}
.ftr__bot{max-width:1180px;margin:32px auto 0;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:12px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* powrót na górę */
.top{position:fixed;right:22px;bottom:22px;z-index:80;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--text-dim);cursor:pointer;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.22s;font-size:16px}
.top.on{opacity:1;pointer-events:auto}
.top:hover{color:var(--red);border-color:var(--red)}

/* ============ RESPONSYWNOŚĆ ============ */
@media (max-width:820px){
  .hdr__top{grid-template-columns:auto 1fr;padding:14px 18px 8px}
  .datestamp{display:none}
  .logo{font-size:23px;text-align:left}
  .logo__img{height:40px;margin:0}
  /* przy wąskim ekranie „Więcej" stoi przy prawej krawędzi — panel
     wyśrodkowany pod przyciskiem wychodziłby poza ekran */
  .navmore__panel{left:auto;right:0;transform:none;min-width:210px}
  .hdr__nav{padding:0 18px 10px;justify-content:flex-start}
  .nav{gap:20px}
  .mini,.mini-tools{display:none}
  .burger{display:grid}
  .shell{padding:0 18px 70px}
  .item{grid-template-columns:1fr 96px;gap:16px;padding:24px 0}
  .figure{width:96px}
  .item__ttl{font-size:19.5px}
  .item__lead{font-size:14.5px;line-height:1.62;-webkit-line-clamp:2;display:-webkit-box;
    -webkit-box-orient:vertical;overflow:hidden}
  .item--top{grid-template-columns:1fr}
  .item--top .item__ttl{font-size:28px;letter-spacing:-.9px}
  .item--top .item__lead{font-size:16px;-webkit-line-clamp:unset;display:block}
  .ftr__in{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .ftr__in{grid-template-columns:1fr}
  .top{right:14px;bottom:14px}
}
.mk{position:fixed;left:0;bottom:0;z-index:99;background:#12141a;color:#fff;font-size:11px;
  font-family:var(--font-ui);letter-spacing:.5px;padding:5px 11px;border-radius:0 4px 0 0}
.mk a{color:#ff7b82}

/* ============ WIDOK ARTYKUŁU ============ */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);z-index:95;width:0}
.crumbs{font-family:var(--font-ui);font-size:11px;letter-spacing:1.7px;
  text-transform:uppercase;color:var(--text-soft);margin-bottom:16px}
.crumbs a{color:var(--text);font-weight:700;border-bottom:2px solid var(--red);padding-bottom:1px}
.art h1{font-family:var(--font-ui);font-size:40px;line-height:1.22;font-weight:700;
  letter-spacing:-.8px;margin-bottom:18px}
.art .lead{font-size:22px;line-height:1.45;color:var(--text-dim);margin-bottom:22px;max-width:60ch}
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:26px}
.byline b{color:var(--text);font-weight:700}
.hero{margin-bottom:10px;border-radius:3px;overflow:hidden}
.hero img{width:100%;height:auto;display:block}
.caption{font-size:12.5px;color:var(--text-soft);margin-bottom:30px;line-height:1.55;
  padding-left:12px;border-left:2px solid var(--line)}

.body{font-size:20px;line-height:1.4;max-width:68ch}
.body p{margin-bottom:24px}
.body h2,.body h3{font-family:var(--font-ui);font-size:26px;line-height:1.3;font-weight:700;
  letter-spacing:-.4px;margin:36px 0 14px}
.body blockquote{border-left:3px solid var(--red);padding:2px 0 2px 22px;margin:28px 0;
  font-family:var(--font-serif);font-size:22px;line-height:1.4;font-weight:600}
.body ul,.body ol{margin:0 0 22px 20px}
.body li{margin-bottom:9px;padding-left:4px}
.body li::marker{color:var(--red)}
.body img{max-width:100%;height:auto;margin:26px 0;border-radius:3px}
.body a{border-bottom:1px solid var(--line)}
.body a:hover{border-color:var(--red);color:var(--red)}

/* zdjęcie w treści — ten sam podpis co przy zdjęciu głównym (.hero figcaption) */
.body figure{margin:30px 0}
.body figure img{margin:0;display:block;width:100%}
.body figcaption{font-size:12.5px;color:var(--text-soft);line-height:1.55;
  padding:10px 0 0 12px;border-left:2px solid var(--line);margin-top:10px}

/* film z YouTube — miniatura teraz, odtwarzacz dopiero po kliknięciu */
.yt{position:relative;margin:28px 0;aspect-ratio:16/9;background:#000;border-radius:3px;
  overflow:hidden;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;margin:0;opacity:.82;transition:opacity .2s}
.yt:hover img{opacity:1}
.yt button{position:absolute;inset:0;margin:auto;width:68px;height:68px;border:0;border-radius:50%;
  background:rgba(214,32,43,.92);color:#fff;font-size:24px;cursor:pointer;display:grid;
  place-items:center;padding-left:4px}
.yt iframe{width:100%;height:100%;border:0;display:block}

.ai-note{display:flex;gap:12px;align-items:flex-start;margin:36px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.65;color:var(--text-soft)}
.ai-note b{color:var(--text)}
.ai-note .ico{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--font-ui);font-size:9px;font-weight:900}

@media (max-width:820px){
  .art h1{font-size:29px;letter-spacing:-.6px}
  .art .lead{font-size:18.5px}
  .body{font-size:18px;line-height:1.5}
  .body h2,.body h3{font-size:22px}
  .body blockquote{font-size:19px}
}

/* kafel z prawdziwym zdjęciem — gradient i napis FOTO zostają tylko
   tam, gdzie artykuł zdjęcia nie ma */
.figure.has-img i{background-size:cover;background-position:center;background-repeat:no-repeat}
.figure.has-img::after{content:none}

/* ============ ARTYKUŁ — NAGŁÓWEK I STOPKA TEKSTU ============ */
.artkicker{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chip{font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;padding:5px 11px;border-radius:99px;
  background:var(--red);color:#fff;white-space:nowrap}
.chip--arch{background:transparent;color:var(--text-soft);border:1px solid var(--line);
  font-weight:600;letter-spacing:1.2px}


.hero{margin:0 0 30px;border-radius:4px;overflow:hidden;background:var(--line-soft)}
.hero img{width:100%;height:auto;max-height:560px;object-fit:cover;display:block}
.hero figcaption{font-size:12.5px;color:var(--text-soft);line-height:1.55;
  padding:10px 0 0 12px;border-left:2px solid var(--line);margin-top:10px}

/* pasek pod tekstem: powrót do działu + udostępnianie */
.artend{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:44px;padding-top:20px;border-top:1px solid var(--line)}
.backlink{font-family:var(--font-ui);font-size:13px;color:var(--text-dim)}
.backlink b{color:var(--text)}
.backlink:hover{color:var(--red)}
.share{display:flex;align-items:center;gap:8px}
.share span{font-family:var(--font-ui);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--text-soft);margin-right:2px}
.share a,.share button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--text-dim);display:grid;place-items:center;
  font-size:13px;cursor:pointer;transition:.15s;font-family:var(--font-ui)}
.share a:hover,.share button:hover{border-color:var(--red);color:var(--red)}
.share button.done{border-color:#0e9f6e;color:#0e9f6e}

/* ============ CZYTAJ DALEJ ============ */
.readnext{margin-top:54px}
.readnext h3{font-family:var(--font-ui);font-size:10.5px;font-weight:900;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-soft);padding-bottom:10px;
  border-bottom:1px solid var(--text);margin-bottom:20px}
.readnext__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rn{display:block}
.rn__img{display:block;aspect-ratio:3/2;border-radius:3px;margin-bottom:11px;
  background-size:cover;background-position:center;
  background-image:linear-gradient(150deg,#8f9aa6,#3b4450);transition:transform .3s}
.rn__img--none{background:var(--line-soft);border:1px solid var(--line)}
.rn:hover .rn__img{transform:translateY(-2px)}
.rn__cat{display:block;font-family:var(--font-ui);font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.rn b{display:block;font-family:var(--font-ui);font-size:15.5px;line-height:1.32;
  font-weight:700;letter-spacing:-.2px;margin-bottom:6px}
.rn:hover b{color:var(--red)}
.rn em{font-style:normal;font-size:11.5px;color:var(--text-soft)}

@media (max-width:820px){
  .readnext__grid{grid-template-columns:1fr;gap:26px}
  .rn{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:start}
  .rn__img{margin-bottom:0;aspect-ratio:1}
  .rn__cat,.rn b,.rn em{grid-column:2}
  .rn__img{grid-row:1/4}
  .artend{gap:14px}
}

/* film, którego miniatura już nie istnieje */
.yt--nothumb{background:linear-gradient(150deg,#2b3038,#14171c)}
.yt--nothumb::after{content:"Film z YouTube";position:absolute;left:0;right:0;bottom:16px;
  text-align:center;font-family:var(--font-ui);font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(255,255,255,.5)}

/* paginacja strumienia */
.pager{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:40px;
  padding-top:26px;border-top:1px solid var(--line);font-family:var(--font-ui);font-size:13px}
.pager a{font-weight:700;padding:9px 18px;border:1px solid var(--line);border-radius:99px;
  transition:.15s}
.pager a:hover{border-color:var(--red);color:var(--red)}
.pager span{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-soft)}

/* ============ NAGŁÓWEK KOMPAKTOWY (strony artykułu — jak w makiecie) ============ */
.hdr--compact .hdr__in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;
  align-items:center;gap:26px;height:58px}
.hdr--compact .logo{font-size:23px;letter-spacing:-.8px;white-space:nowrap}
.hdr--compact .nav{display:flex;gap:24px;margin:0 auto;min-width:0;font-family:var(--font-ui);
  font-weight:500;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  overflow-x:auto;scrollbar-width:none}
.hdr--compact .nav::-webkit-scrollbar{display:none}
.hdr--compact .nav a{color:var(--text-dim);padding-bottom:3px;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .15s}
.hdr--compact .nav a:hover{color:var(--text)}
.hdr--compact .nav a[aria-current]{color:var(--text);border-bottom-color:var(--red)}

/* podpis autora — jeden wiersz wersalików, tak jak w zaakceptowanym wariancie */
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--font-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:26px}
.byline b{color:var(--text);font-weight:700}
.byline .arch{margin-left:auto;border:1px solid var(--line);border-radius:99px;
  padding:4px 11px;font-size:10px;letter-spacing:1.3px}

@media (max-width:820px){
  .hdr--compact .hdr__in{gap:14px;padding:0 18px}
  .hdr--compact .nav{margin:0;gap:18px}
  .byline .arch{margin-left:0}
}

/* ============================================================
   PANEL EKSPERTÓW POD ARTYKUŁEM
   Wariant „dyskusja z ripostami" z makiety artykul-panel-dyskusja.html.
   Barwa autora wchodzi zmienną z bazy (--c-light / --c-dark), a nie
   sztywnym --p-grot: ekspertów da się dodawać w /admin i lista nie jest
   już zamknięta na piątkę, z którą serwis wystartował.
   ============================================================ */
.panel{margin:44px 0 0}
.turn{--c:var(--c-light);--c2:var(--c2-light)}
:root[data-theme="dark"] .turn{--c:var(--c-dark);--c2:var(--c2-dark)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .turn{--c:var(--c-dark);--c2:var(--c2-dark)}
}

.panel__h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;
  padding-bottom:12px;border-bottom:3px solid var(--text)}
.panel__h h2{font-family:var(--font-ui);font-size:22px;font-weight:900;letter-spacing:-.4px}
.panel__sub{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:14px 0 8px;max-width:62ch}

.badge{display:inline-flex;align-items:center;gap:7px;background:#141821;color:#fff;
  padding:4px 11px;border-radius:99px;font-family:var(--font-ui);font-size:11px;
  font-weight:900;letter-spacing:1.1px}
:root[data-theme="dark"] .badge{background:#e9ecf1;color:#14161a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge{background:#e9ecf1;color:#14161a}}
.badge i{display:flex;gap:3px}
.badge i s{width:6px;height:6px;border-radius:50%;text-decoration:none}

.thread{display:flex;flex-direction:column}
.turn{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding:22px 0 2px}
.turn__who{display:flex;flex-direction:column;align-items:center;gap:6px}
.turn__line{flex:1;width:2px;border-radius:2px;min-height:10px;background:var(--line);
  background:color-mix(in srgb,var(--c) 32%,var(--line))}
.turn__body{padding-bottom:18px}
.turn__name{font-family:var(--font-ui);font-weight:900;font-size:16.5px;line-height:1.2;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.turn__lab{font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--c);border:1px solid var(--c);padding:2px 7px;border-radius:99px}
.turn__q{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c);
  border-radius:0 7px 7px 0;padding:15px 17px;font-size:15.5px;line-height:1.72}
.turn__meta{margin-top:8px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

.turn--reply{margin-left:38px;grid-template-columns:44px minmax(0,1fr);gap:13px}
.turn--reply .turn__q{font-size:14.5px;padding:13px 15px;background:var(--bg)}
.reply-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);
  font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-dim);margin-bottom:7px}
.reply-tag b{color:var(--c2)}

/* awatar: portret z bazy albo sylwetka zastępcza w barwie eksperta */
.av{border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));
  border:2px solid color-mix(in srgb,var(--c) 55%,transparent);flex:none}
.av--44{width:44px;height:44px}
.av--34{width:34px;height:34px}
.av img{width:100%;height:100%;object-fit:cover}
.av svg{width:76%;height:76%;fill:var(--c);opacity:.85;transform:translateY(8%)}

.fikcja{font-family:var(--font-ui);font-size:10px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--text-soft);border:1px solid var(--line);
  border-radius:99px;padding:3px 9px}

@media (max-width:620px){
  .turn{grid-template-columns:44px minmax(0,1fr);gap:12px}
  .turn--reply{margin-left:16px;grid-template-columns:36px minmax(0,1fr)}
  .turn__q{font-size:15px;padding:13px 14px}
}