/* ============================================================= RADIO BIELANY — WARSTWA PODSTRONY „ŚWIEŻO Z BIELAN" (blog / gazeta)
   Ładowana PO style.css i TYLKO na szablonie „Gazeta — Świeżo z Bielan" (page-blog.php)
   (functions.php: is_page_template('page-blog.php'), deps: radio-bielany-style).

   CSS zaakceptowanej makiety bloga „Świeżo z Bielan" wycięty 1:1, ale — jak home.css wobec shellu —
   BEZ reguł, które warstwa współdzielona (style.css) już definiuje identycznie. Odjęte
   (bo shell ma je 1:1): tokeny kolorów w :root, reset/base (* / html / img,svg / a / button /
   ::selection / .skip / .sr-only), logo .eq (pełny blok) oraz identyczne pod-reguły nawigacji
   (.brand, .brand .eq, .nav-links, .nav-links a:hover, .nav-cta:hover, oba @media nav).
   Zostają wyłącznie reguły NOWE (gazeta) i NADPISANIA różniące się wartością od shellu
   (delty: :root tokeny gazety, body, :focus-visible, .nav-links a, .nav-cta; pełne: .topnav*).

   NEUTRALIZACJE kolizji shell→podstrona (mockup ich nie miał, bo był samodzielny):
     • .topnav { padding:0 }              — kasuje shellowe .topnav{padding:14px 0} (belka gazety bez pionowego paddingu)
     • .topnav.scrolled { background/backdrop-filter } — kasuje shellowe półprzezroczyste tło+blur po zjeździe (gazeta = lita zieleń)
     • .impressum { background:none; color } — kasuje shellowe footer{background:var(--grafit);color:#cfc8b8} (kolofon na papierze, nie graficie)
   Kolejność reguł = kolejność źródłowa makiety. */

/* ============================================================= TOKENY — tylko gazetowe (reszta z shellu) */
:root{
  --papier:#F6EDD8;          /* płachta — papier gazety (odrobinę jaśniejszy krem) */
  --biurko:#E4D8BC;          /* tło pod płachtą — „biurko" */
  --ink:#22261d;            /* druk — prawie-czarny z zielenią */
  --rule:rgba(18,53,38,.26); /* cienka linia redakcyjna */
  --rule2:rgba(18,53,38,.5); /* gruba linia redakcyjna */
  --maxw:1060px; --gut:clamp(18px,4vw,52px);   /* NADPISANIE shellowych --maxw/--gut na tej podstronie */
  --z-filter:30; --z-radio:45;                 /* z-scale gazety (nad treścią, pod nav) */
}
/* base — tylko delty względem shellu */
body{color:var(--ink);background:var(--biurko)}
h1,h2,h3,h4{line-height:1.12}
:focus-visible{border-radius:2px}
.topnav :focus-visible, .radio-dock:focus-visible, .side-radio:focus-visible{outline-color:var(--zloto)}

/* ============================================================= KURTYNA WEJŚCIA (szybki fade) */
.enter-veil{position:fixed;inset:0;z-index:80;background:var(--las);pointer-events:none;animation:enterFade .55s ease .03s forwards}
@keyframes enterFade{from{opacity:1}to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){ .enter-veil{display:none} }

/* ============================================================= NAWIGACJA — zielona belka gazety (nadpisania shellu) */
.topnav{
  padding:0;                                   /* NEUTRALIZACJA: shell ma .topnav{padding:14px 0} */
  background:var(--las);
  border-bottom:2px solid var(--zloto-deep);
  box-shadow:0 1px 0 rgba(244,234,213,.08);
  transition:box-shadow .35s ease;
}
.topnav.scrolled{
  background:var(--las);backdrop-filter:none;  /* NEUTRALIZACJA: shell ma tu rgba+blur(8px) */
  box-shadow:0 6px 22px rgba(9,20,14,.28);
}
.topnav .wrap{max-width:var(--maxw);margin:0 auto;padding:11px var(--gut)}
.nav-links a{opacity:.9;position:relative}     /* delta: shell ma opacity:.88, bez position */
.nav-links a.is-active{opacity:1;color:var(--zloto)}
.nav-links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--zloto);border-radius:2px}
.nav-cta{padding:9px 18px}                      /* delta: shell ma padding:10px 20px */

/* ============================================================= PŁACHTA — arkusz gazety */
.plachta{
  max-width:var(--maxw);margin:0 auto;background:var(--papier);
  border:1px solid rgba(18,53,38,.14);
  box-shadow:0 1px 44px rgba(18,53,38,.07), 0 22px 60px rgba(18,53,38,.05);
  padding:0 var(--gut) 0;
  position:relative;
}
.sheet-top{height:56px}          /* przerwa pod fixed-nav do góry płachty */
@media(max-width:720px){ .sheet-top{height:52px} }

/* ============================================================= WINIETA (masthead gazety) */
.winieta{padding:26px 0 4px;text-align:center}
.win-eyebrow{
  display:block;font-weight:700;font-size:.68rem;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;color:var(--cegla2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:8px 0;margin-bottom:20px;
}
.win-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;
}
.win-title-wrap{grid-column:2}
.mast-title{
  font-weight:900;color:var(--las);
  font-size:clamp(2.7rem,8.8vw,5.6rem);line-height:.92;letter-spacing:-.028em;
  text-transform:uppercase;white-space:nowrap;
}
.mast-sub{
  font-family:'Caveat',cursive;font-weight:600;color:var(--zloto-krem);
  font-size:clamp(1.35rem,3.6vw,2rem);margin-top:6px;transform:rotate(-1deg);
}
/* „uszy" gazety po bokach winiety */
.ear{
  border:1.5px solid var(--rule2);background:rgba(255,255,255,.32);
  padding:11px 13px;text-align:left;max-width:230px;justify-self:stretch;
}
.ear.left{grid-column:1;justify-self:start}
.ear.right{grid-column:3;justify-self:end;text-align:right}
.ear-k{font-weight:900;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cegla);display:block;margin-bottom:5px}
.ear-row{display:flex;align-items:center;gap:9px}
.ear.right .ear-row{flex-direction:row-reverse}
.ear-ico{width:30px;height:30px;flex:none;color:var(--zloto-krem);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ear-big{font-weight:900;font-size:1.15rem;color:var(--las);line-height:1}
.ear-txt{font-size:.78rem;line-height:1.3;color:#4a4636}
.ear-txt b{color:var(--las)}
@media(max-width:900px){
  .win-head{grid-template-columns:1fr}
  .win-title-wrap{grid-column:1;order:-1}
  .ear{grid-column:1!important;justify-self:center!important;text-align:center!important;max-width:340px;margin:2px auto 0}
  .ear.right .ear-row{flex-direction:row}
  .mast-title{white-space:normal}
}

/* folio — wydanie / data / miejsce / cena */
.folio{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#54503f;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:8px 0;margin-top:20px;
}
.folio .sep{color:var(--zloto-krem)}
.folio .cena{color:var(--cegla2);font-weight:900}

/* ============================================================= PRZEJŚCIE winieta → treść (drukarskie) */
.double-rule{height:0;border-top:3px solid var(--las);box-shadow:0 3px 0 var(--las);margin:9px 0 0}
.wydanie{
  display:flex;align-items:baseline;gap:10px 14px;flex-wrap:wrap;justify-content:center;
  padding:13px 0 12px;border-bottom:1px solid var(--rule);
  font-size:.82rem;
}
.wydanie .wy-lead{font-weight:900;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cegla);white-space:nowrap}
.wydanie a{color:var(--las);text-decoration:none;font-weight:700}
.wydanie a:hover{color:var(--cegla);text-decoration:underline}
.wydanie .di{color:var(--zloto-krem);font-weight:900}

/* ============================================================= DZIAŁY (filtr — sticky, tekstowy) */
.dzialy{
  position:sticky;top:52px;z-index:var(--z-filter);
  background:rgba(246,237,216,.94);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-bottom:2px solid var(--las);
  margin:0 calc(-1 * var(--gut));padding:0 var(--gut);
}
.dzialy-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:6px 4px;flex-wrap:wrap;padding:9px 0;
}
.dz-lead{font-weight:900;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cegla);margin-right:6px;white-space:nowrap}
.dz{
  font-weight:700;font-size:.9rem;color:var(--las);text-decoration:none;
  padding:3px 2px;position:relative;white-space:nowrap;transition:color .18s;
  background:none;
}
.dz .dz-n{font-variant-numeric:tabular-nums;font-weight:900;font-size:.72rem;color:#9a8f70}
.dz:hover{color:var(--cegla)}
.dz.is-active{color:var(--cegla2)}
.dz.is-active::after{content:"";position:absolute;left:2px;right:2px;bottom:-1px;height:2px;background:var(--cegla2)}
.dz.is-active .dz-n{color:var(--cegla2)}
.dz-sep{color:var(--rule2);font-weight:400;padding:0 3px;user-select:none}
@media(max-width:720px){
  .dzialy-inner{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .dzialy-inner::-webkit-scrollbar{display:none}
  .dz-sep{display:none}
  .dz{padding:5px 7px}
}

/* ============================================================= ŁAMY (rzeka artykułów) */
.rzeka{
  columns:3;column-gap:34px;column-rule:1px solid var(--rule);
  padding:22px 0 4px;transition:opacity .25s ease;
}
.rzeka.swap{opacity:0}
@media(max-width:1000px){ .rzeka{columns:2;column-gap:30px} }
@media(max-width:640px){ .rzeka{columns:1} }

.art{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--rule);
}
.art:last-child{border-bottom:none}
.rubryka{
  display:flex;align-items:center;gap:7px;margin-bottom:5px;
  font-weight:900;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
}
/* pieczątka kategorii (obrys — jak v-0.1) */
.stamp{
  display:inline-flex;align-items:center;
  font-weight:900;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c,var(--mech));border:1.5px solid var(--c,var(--mech));
  border-radius:3px;padding:2px 5px;transform:rotate(-3deg);
  background:rgba(255,255,255,.4);flex:none;
}
/* mapa kolorów pieczątek per slug działu (realne slugi kategorii WP; fallback = mech,
   zapewniony przez var(--c,var(--mech)) w .stamp powyżej — inne kategorie dostają mech) */
.stamp[data-cat="spacer"]{--c:var(--mech)}
.stamp[data-cat="rozmowa"]{--c:var(--zloto-krem)}
.stamp[data-cat="miejsce"]{--c:var(--las)}
.stamp[data-cat="od-kuchni"]{--c:var(--cegla)}
.stamp[data-cat="zespol"]{--c:var(--grafit)}
.stamp[data-cat="ogloszenia"]{--c:var(--cegla2)}
/* stare skróty makiety (kuchnia/oglo) — zostają dla dekoracyjnej tabeli „Program radia" */
.stamp[data-cat="kuchnia"]{--c:var(--cegla)}
.stamp[data-cat="oglo"]{--c:var(--cegla2)}
.art-date{margin-left:auto;font-weight:700;font-size:.66rem;letter-spacing:.05em;color:#8a7f63;transform:none}
.art h3{
  font-weight:900;color:var(--las);font-size:1.14rem;line-height:1.18;margin-bottom:6px;
  letter-spacing:-.01em;
}
.art-body p{font-size:.9rem;line-height:1.5;color:var(--ink);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.art-body p + p{margin-top:7px;text-indent:1.1em}
/* inicjał (drop cap) na leadzie artykułu */
.art--drop .art-body > p:first-of-type::first-letter{
  float:left;font-family:'Lato',sans-serif;font-weight:900;color:var(--cegla);
  font-size:3.3em;line-height:.72;padding:.06em .1em 0 0;
}
.art-more{display:inline-block;margin-top:7px;font-weight:900;font-size:.82rem;color:var(--cegla2);text-decoration:none}
.art-more:hover{color:var(--cegla);text-decoration:underline}

/* rycina w artykule (rytownicza, podpis kursywą) */
.rycina{margin:2px 0 8px}
.rycina .frame{
  position:relative;background:var(--las);border:1px solid var(--rule2);
  overflow:hidden;aspect-ratio:16/11;
}
.rycina.tall .frame{aspect-ratio:4/5}
.rycina img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.06);mix-blend-mode:multiply;opacity:.94}
.rycina figcaption{font-size:.68rem;font-style:italic;color:#6b6450;padding:5px 1px 0;line-height:1.3}
/* kafel koloru z motywem — gdy wpis nie ma ryciny ani obrazka wyróżniającego (np. Ogłoszenia) */
.rycina--tile .frame{background:var(--tilec,var(--cegla2));display:grid;place-items:center}
.rycina--tile .frame::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.14), transparent 60%);pointer-events:none}
.rycina--tile .tile-ico{width:42%;height:42%;stroke:var(--krem);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.92}

/* ============================================================= ARTYKUŁ OTWIERAJĄCY (wieża) — na 2 łamy */
.art--lead{
  column-span:all;-webkit-column-break-after:always;
  padding-bottom:20px;margin-bottom:20px;border-bottom:3px double var(--rule2);
}
.lead-head{margin-bottom:12px}
.lead-head .rubryka{font-size:.7rem}
.art--lead h2{
  font-weight:900;color:var(--las);letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(1.8rem,4.4vw,3rem);margin:2px 0 4px;
}
.art--lead .dek{font-size:1.02rem;color:#43402f;max-width:60ch}
.lead-grid{display:grid;grid-template-columns:minmax(230px,37%) 1fr;gap:26px;margin-top:14px}
.lead-body{columns:2;column-gap:28px;column-rule:1px solid var(--rule)}
.lead-body > p{font-size:.93rem;line-height:1.54;color:var(--ink);text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.lead-body > p:first-of-type::first-letter{
  float:left;font-family:'Lato',sans-serif;font-weight:900;color:var(--cegla);
  font-size:3.5em;line-height:.72;padding:.05em .1em 0 0;
}
.lead-body > p + p{margin-top:8px;text-indent:1.1em}
.rycina--lead .frame{aspect-ratio:4/5}
/* pull quote — ramka z grubą kreską, spina oba łamy */
.pull{
  column-span:all;-webkit-column-break-inside:avoid;break-inside:avoid;
  border-top:3px solid var(--las);border-bottom:3px solid var(--las);
  padding:12px 0 13px;margin:12px 0;text-align:center;
}
.pull q{font-weight:900;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--las);line-height:1.22;quotes:none}
.pull cite{display:block;font-style:normal;font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--zloto-krem);margin-top:8px}
@media(max-width:760px){
  .lead-grid{grid-template-columns:1fr;gap:16px}
  .lead-body{columns:1}
  .rycina--lead .frame{aspect-ratio:16/10}
}

/* ============================================================= KRONIKA DZIELNICY (rubryka na całą szerokość) */
.rubr-band{margin:6px 0 10px}
.rubr-title{
  display:flex;align-items:center;gap:12px;
  font-weight:900;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--las);
  margin-bottom:10px;
}
.rubr-title::before,.rubr-title::after{content:"";flex:1;height:0;border-top:2px solid var(--las)}
.rubr-title .rt-tag{color:var(--cegla)}
.kronika{columns:3;column-gap:30px;column-rule:1px solid var(--rule)}
@media(max-width:900px){ .kronika{columns:2} }
@media(max-width:560px){ .kronika{columns:1} }
.kron{break-inside:avoid;display:flex;gap:9px;padding:6px 0;border-bottom:1px dotted var(--rule);font-size:.85rem;line-height:1.4}
.kron:last-child{border-bottom:none}
.kron .kd{flex:none;font-weight:900;color:var(--cegla2);font-variant-numeric:tabular-nums;min-width:38px}
.kron .kt{color:var(--ink)}
.kron .kt b{color:var(--las)}

/* ============================================================= OGŁOSZENIA + PROGRAM (dwa boksy) */
.two-box{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;margin:14px 0 4px}
@media(max-width:820px){ .two-box{grid-template-columns:1fr;gap:20px} }
.box{border:2px solid var(--las);padding:14px 16px 16px;background:rgba(255,255,255,.28)}
.box-h{
  font-weight:900;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--las);
  border-bottom:2px solid var(--las);padding-bottom:8px;margin-bottom:11px;display:flex;align-items:center;gap:8px;
}
.box-h .bh-tag{color:var(--cegla)}
/* ogłoszenia drobne — łamane w 2 kolumny */
.drobne{columns:2;column-gap:20px;font-size:.82rem;line-height:1.42}
@media(max-width:560px){ .drobne{columns:1} }
.drob{break-inside:avoid;padding:5px 0;border-bottom:1px dotted var(--rule)}
.drob:last-child{border-bottom:none}
.drob b{font-weight:900;color:var(--cegla2);letter-spacing:.04em}
/* program radia — tabelka */
.program{width:100%;border-collapse:collapse;font-size:.84rem}
.program td{padding:7px 4px;border-bottom:1px dotted var(--rule);vertical-align:top}
.program tr:last-child td{border-bottom:none}
.program .pg-when{font-weight:900;color:var(--las);white-space:nowrap;font-variant-numeric:tabular-nums}
.program .pg-fmt{color:var(--c,var(--mech));font-weight:900;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-right:2px}
.program .pg-fmt[data-cat="spacer"]{--c:var(--mech)}
.program .pg-fmt[data-cat="rozmowa"]{--c:var(--zloto-krem)}
.program .pg-fmt[data-cat="kuchnia"]{--c:var(--cegla)}
.program .pg-fmt[data-cat="miejsce"]{--c:var(--las)}
.program .pg-fmt[data-cat="zespol"]{--c:var(--grafit)}
.program .pg-t{color:var(--ink)}
.program .pg-t b{color:var(--las)}

/* pusty filtr */
.empty-note{
  column-span:all;text-align:center;padding:26px 0 8px;
  font-family:'Caveat',cursive;font-weight:600;font-size:1.5rem;color:var(--zloto-krem);
}

/* ============================================================= STAN „ZERO WPISÓW" (komunikat redakcyjny zamiast pustej rzeki) */
.rzeka-empty{
  text-align:center;padding:40px var(--gut) 34px;margin:14px 0 4px;
  border-top:3px double var(--rule2);border-bottom:3px double var(--rule2);
}
.rzeka-empty .re-k{
  display:block;font-weight:900;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cegla);margin-bottom:10px;
}
.rzeka-empty h2{
  font-weight:900;color:var(--las);font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.08;margin-bottom:8px;
}
.rzeka-empty p{max-width:52ch;margin:0 auto;color:#4a4636;font-size:.98rem;line-height:1.55}
.rzeka-empty .re-hand{
  display:block;margin-top:12px;font-family:'Caveat',cursive;font-weight:600;font-size:1.5rem;
  color:var(--zloto-krem);transform:rotate(-1deg);
}

/* ============================================================= PAGINACJA „starsze / nowsze wydania" */
.wydania-nav{
  display:flex;align-items:center;justify-content:center;gap:8px 12px;flex-wrap:wrap;
  padding:20px 0 6px;margin-top:8px;border-top:1px solid var(--rule);
}
.wydania-nav .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:6px 10px;
  font-weight:900;font-size:.82rem;color:var(--las);text-decoration:none;
  border:1.5px solid var(--rule2);border-radius:3px;background:rgba(255,255,255,.32);
  transition:color .18s,border-color .18s,background .18s;
}
.wydania-nav a.page-numbers:hover{color:var(--cegla2);border-color:var(--cegla2)}
.wydania-nav .page-numbers.current{color:var(--papier);background:var(--las);border-color:var(--las)}
.wydania-nav .page-numbers.dots{border:none;background:none;min-width:0;padding:6px 2px;color:#8a7f63}
.wydania-nav .page-numbers.prev,.wydania-nav .page-numbers.next{letter-spacing:.02em}

/* ============================================================= IMPRESSUM (kolofon gazety) */
.impressum{
  border-top:3px double var(--rule2);margin-top:20px;padding:20px 0 30px;
  background:none;color:var(--ink);  /* NEUTRALIZACJA: shell ma footer{background:var(--grafit);color:#cfc8b8} */
}
.imp-top{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:6px}
.imp-top .eq{width:24px;height:24px}
.imp-brand{font-weight:900;font-size:1.05rem;color:var(--las);letter-spacing:.04em}
.imp-slogan{text-align:center;font-family:'Caveat',cursive;font-weight:600;font-size:1.4rem;color:var(--cegla);transform:rotate(-.8deg);margin-bottom:14px}
.imp-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px;font-size:.82rem;line-height:1.55;border-top:1px solid var(--rule);padding-top:14px}
@media(max-width:760px){ .imp-cols{grid-template-columns:1fr;gap:14px;text-align:center} }
.imp-cols h5{font-weight:900;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cegla);margin-bottom:7px}
.imp-cols p{color:#4a4636}
.imp-cols a{color:var(--las);text-decoration:none;font-weight:700}
.imp-cols a:hover{color:var(--cegla);text-decoration:underline}
.imp-list{list-style:none;display:grid;gap:5px}
.imp-foot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--rule);margin-top:16px;padding-top:12px;
  font-size:.74rem;color:#6b6450;letter-spacing:.03em;
}

/* margines: odręczne dopiski Caveat (tylko szeroki ekran, w gutterze płachty) */
.margin-note{
  position:absolute;font-family:'Caveat',cursive;font-weight:600;color:var(--zloto-krem);
  font-size:1.25rem;line-height:1.15;max-width:150px;pointer-events:none;z-index:2;
  transform:rotate(-3deg);
}
.margin-note.mn-1{left:calc(-1 * var(--gut) - 138px);top:640px;text-align:right}
.margin-note.mn-2{left:calc(-1 * var(--gut) - 138px);top:1560px;text-align:right;transform:rotate(2.4deg)}
.margin-note svg{display:inline-block;width:40px;height:20px;stroke:var(--zloto-krem);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;vertical-align:middle}
@media(max-width:1300px){ .margin-note{display:none} }

/* ============================================================= RADIO PODĄŻAJĄCE — desktop (prawy margines) */
.side-radio{
  position:fixed;z-index:var(--z-radio);
  top:55%;transform:translateY(-50%);
  right:max(14px, calc((100vw - var(--maxw))/2 - 138px));
  width:128px;display:none;text-decoration:none;
  will-change:transform;
}
@media(min-width:1240px){ .side-radio{display:block} }
.sr-inner{position:relative;display:block;animation:radioBob 5.4s ease-in-out infinite}
.sr-inner img{width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(18,53,38,.34));pointer-events:none;-webkit-user-drag:none;user-select:none}
.side-radio:hover .sr-inner img{filter:drop-shadow(0 20px 30px rgba(18,53,38,.42)) drop-shadow(0 0 22px rgba(232,163,61,.4))}
@keyframes radioBob{0%,100%{transform:translateY(0) rotate(-1.8deg)}50%{transform:translateY(-8px) rotate(1.6deg)}}
/* fale nadawania — od anteny (lewy-górny róg radia) */
.sr-waves{position:absolute;left:-26px;top:-14px;width:70px;height:70px;overflow:visible;pointer-events:none}
.sr-waves path{stroke:var(--zloto-krem);stroke-width:2.4;fill:none;stroke-linecap:round;opacity:.15}
.sr-waves .swv1{animation:srwave 2.6s ease-out infinite}
.sr-waves .swv2{animation:srwave 2.6s ease-out .7s infinite}
@keyframes srwave{0%{opacity:0;transform:scale(.6)}22%{opacity:.75}70%{opacity:0}100%{opacity:0;transform:scale(1.1)}}
.sr-cap{
  display:block;margin-top:10px;text-align:center;
  font-family:'Caveat',cursive;font-weight:600;font-size:1.12rem;line-height:1.08;color:var(--las);
  text-shadow:0 1px 3px rgba(246,237,216,.9);
  animation:capPulse 3s ease-in-out infinite;
}
@keyframes capPulse{0%,100%{opacity:.72}50%{opacity:1}}
.sr-cap b{color:var(--cegla2);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .sr-inner{animation:none}
  .sr-cap{animation:none;opacity:1}
  .sr-waves path{animation:none;opacity:.45}
}

/* ============================================================= RADIO PODĄŻAJĄCE — mobile/tablet mini-dock */
.radio-dock{
  position:fixed;left:50%;bottom:14px;z-index:var(--z-radio);
  transform:translate(-50%,140%);
  width:min(420px,calc(100vw - 22px));
  display:flex;align-items:center;gap:12px;
  background:var(--las);color:var(--krem);text-decoration:none;
  border:1px solid rgba(244,234,213,.16);border-radius:16px;
  box-shadow:0 16px 40px rgba(9,20,14,.46), 0 0 70px rgba(232,163,61,.08);
  padding:9px 14px;
  transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform;
}
.radio-dock.on{transform:translate(-50%,0)}
@media(min-width:1240px){ .radio-dock{display:none} }
@media (prefers-reduced-motion:reduce){ .radio-dock{transition:none} }
.rd-ico{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center}
.rd-ico img{width:100%;height:auto;filter:drop-shadow(0 4px 8px rgba(6,18,12,.5))}
.rd-txt{min-width:0;flex:1;line-height:1.15}
.rd-txt .rd-a{display:block;font-family:'Caveat',cursive;font-weight:600;font-size:1.22rem;color:var(--zloto)}
.rd-txt .rd-b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,234,213,.62)}
.rd-arrow{flex:none;color:var(--zloto);font-weight:900;font-size:1.3rem;transition:transform .2s}
.radio-dock:hover .rd-arrow{transform:translateX(3px)}
.radio-dock:hover{background:var(--las2)}

/* ============================================================= REVEAL (enhance-only) */
html.js-motion .art, html.js-motion .rubr-band, html.js-motion .two-box, html.js-motion .margin-note, html.js-motion .ear{opacity:0}
@media(max-width:720px){
  .winieta{padding:20px 0 4px}
  .dzialy{top:0}
}