/* ============================================================= RADIO BIELANY — WARSTWA STRONY GŁÓWNEJ (home)
   Ładowana PO style.css i TYLKO na stronie głównej (functions.php: is_front_page(), deps: radio-bielany-style).
   CAŁA reszta CSS makiety 1:1 ze źródła „story" v-0.8 (hero, sekcje wspólne, listen/deck/epList,
   tuner-edge, trasa/stops + płynne rozwijanie kart html.fmt-anim, blog-rail, historia + krawędź „Koperty od sąsiadów"
   (kop-edge), dolacz, zaplecze, reveal, mobile pass v-0.8). Kolejność reguł = kolejność źródłowa. */

/* ============================================================= HERO */
.hero{
  min-height:100svh;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(232,163,61,.07), transparent 60%),
    linear-gradient(180deg, rgba(22,64,46,0) 72%, rgba(22,64,46,.95) 100%), /* dół hero = dokładnie las2 → zlewa się z „posłuchaj" */
    radial-gradient(900px 700px at 50% 115%, rgba(22,64,46,.9), transparent 70%),
    var(--las);
  color:var(--krem);
  display:grid;place-items:center;
  text-align:center;
  position:relative;
  padding:104px 0 112px; /* dół: miejsce na dock; −25% odległości do „posłuchaj" */
}
.hero-inner{display:grid;justify-items:center;gap:0}

/* znak hero: słupki + odręczne podpisy (Caveat) z cienkimi liniami */
.hero-mark{width:min(620px,88vw);margin-bottom:20px;overflow:visible}
@media(max-width:640px){ .hero-mark text{font-size:26px} }
.hero-mark text{font-family:'Caveat',cursive;font-weight:600;font-size:25px;fill:rgba(244,234,213,.85)}
.hero-mark .lead{stroke:none;fill:none} /* linie = tylko geometria dla kroków stóp */
.hstep{fill:rgba(244,234,213,.85)} /* kroki do podpisów — kolor napisów */
.hero-mark .bar{transform-box:fill-box;transform-origin:center bottom}
.hero-mark.live .bar{animation:eqbar 1.3s ease-in-out infinite}
.hero-mark.live .hb1{animation-delay:0s}.hero-mark.live .hb2{animation-delay:.16s}
.hero-mark.live .hb3{animation-delay:.34s}.hero-mark.live .hb4{animation-delay:.1s}
@media (prefers-reduced-motion:reduce){ .hero-mark.live .bar{animation:none} }

.hero-over{
  display:block;font-weight:700;letter-spacing:.6em;text-indent:.6em;
  font-size:clamp(1.35rem,3vw,1.8rem);line-height:1; /* +50%, line-height 1 = wysokość wiersza bez zmian */
  color:var(--zloto);text-transform:uppercase;
  margin-bottom:6px;
}
.hero h1{font-weight:900}
.hero-name{
  display:block;font-weight:900;font-size:clamp(3rem,10vw,6.5rem);
  letter-spacing:-.01em;text-wrap:balance;line-height:1.05;
}
.hero-slogan{
  font-family:'Caveat',cursive;font-weight:600;
  font-size:clamp(1.7rem,4.4vw,2.6rem);
  color:var(--zloto);
  margin-top:10px;
  transform:rotate(-1.2deg);
}
.hero-lead{
  font-size:clamp(1.05rem,2.2vw,1.35rem);
  max-width:34em;margin-top:22px;color:rgba(244,234,213,.92);
}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:900;font-size:1rem;padding:15px 28px;border-radius:var(--r-pill);
  text-decoration:none;transition:background .2s,transform .2s,border-color .2s;
  min-height:48px;
}
.btn-primary{background:var(--cegla);color:var(--krem)}
.btn-primary:hover{background:var(--cegla2);transform:translateY(-2px)}
.btn-ghost{border:2px solid rgba(244,234,213,.55);color:var(--krem)}
.btn-ghost:hover{border-color:var(--krem);transform:translateY(-2px)}

@media(max-height:960px){
  /* niskie okna: kompresja hero robi miejsce na mikrofon w gnieździe strzałki */
  .hero{padding:84px 0 93px}
  .hero-mark{width:min(455px,88vw);margin-bottom:8px}
  .hero-lead{margin-top:10px}
  .hero-cta{margin-top:14px}
  .hero-cue{margin-top:6px}
  .hero-cue .cue-note{font-size:1.1rem}
}
.hero-cue{
  margin-top:clamp(20px,3.5vh,44px);
  display:grid;justify-items:center;gap:6px;color:rgba(244,234,213,.66);
}
.hero-cue .cue-note{font-family:'Caveat',cursive;font-weight:600;font-size:1.25rem}
.hero-cue .cue-arrow{width:18px;height:28px;border:2px solid rgba(244,234,213,.5);border-radius:12px;position:relative}
.hero-cue .cue-arrow::after{
  content:"";position:absolute;left:50%;top:5px;width:4px;height:7px;margin-left:-2px;
  border-radius:3px;background:var(--zloto);animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(9px);opacity:.2}}
@media (prefers-reduced-motion:reduce){ .hero-cue .cue-arrow::after{animation:none} }

/* ============================================================= SEKCJE — wspólne */
section{position:relative}
.band{padding-block:clamp(64px,10vh,104px)}
.kicker{
  display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.35em;text-indent:.35em;
  text-transform:uppercase;color:var(--cegla2);margin-bottom:14px; /* cegla2: kontrast 4.5+ na kremie */
}
.dark-zone .kicker{color:var(--zloto)}
h2.sec-title{font-weight:900;font-size:clamp(1.7rem,4vw,2.6rem);color:var(--las);text-wrap:balance}
.dark-zone h2.sec-title{color:var(--krem)}
.sec-lead{max-width:62ch;margin-top:18px}

/* ============================================================= POSŁUCHAJ NAS (dark) */
.listen{
  /* start od las2 = kolor końca hero (gradientowe przejście bez szwu) */
  background:linear-gradient(180deg, var(--las2) 0%, var(--las) 55%, var(--las) 100%);
  color:var(--krem);
}
#posluchaj{padding-top:clamp(40px,6vh,60px)} /* desktop: −25% odległości hero→posłuchaj (mobile nadpisany niżej) */
.listen .sec-lead{color:rgba(244,234,213,.88)}
.listen-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:14px}
@media(max-width:900px){ .listen-grid{grid-template-columns:minmax(0,1fr)} } /* minmax(0,..) — bez blowoutu grida (tytuł/lista/deck nie rozpychają kolumny poza viewport na wąskim ekranie) */

/* --- deck: panel wtopiony w zieleń hero (frosted, lekcja v-0.7) --- */
.deck{
  position:relative;
  background:linear-gradient(160deg, rgba(244,234,213,.11), rgba(244,234,213,.05));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(244,234,213,.22);
  color:var(--krem);
  border-radius:var(--r-deck);
  box-shadow:0 24px 60px rgba(6,18,12,.5), 0 0 120px rgba(232,163,61,.14);
  padding:clamp(22px,3.4vw,34px);
}
.deck-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.deck-head .eq{width:22px;height:22px}
.deck-brand{font-weight:900;font-size:.92rem;letter-spacing:.05em;color:var(--krem)}
.demo-stamp{
  margin-left:auto;
  font-weight:900;font-size:.72rem;letter-spacing:.18em;text-indent:.18em;color:var(--zloto);
  border:2px solid var(--zloto);border-radius:6px;padding:4px 9px;transform:rotate(-3deg);
  user-select:none;
}
.ep-kicker{font-weight:700;font-size:.8rem;letter-spacing:.25em;text-indent:.25em;text-transform:uppercase;color:var(--zloto)}
.ep-title{
  font-weight:900;font-size:clamp(1.45rem,3.4vw,1.9rem);color:var(--krem);
  margin-top:6px;
  min-height:2.32em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.ep-desc{font-size:1.08rem;color:rgba(244,234,213,.82);margin-top:6px;min-height:3.2em}

/* przycisk „Obejrzyj na YouTube" (odcinki wideo — REALNE odtwarzanie) */
.ep-yt{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  padding:9px 15px;border-radius:var(--r-pill);
  background:var(--cegla);color:var(--krem);
  font-weight:900;font-size:.92rem;text-decoration:none;
  box-shadow:0 8px 20px rgba(199,81,45,.32);transition:background .2s,transform .2s;
}
.ep-yt:hover{background:var(--cegla2);transform:translateY(-2px)}
.ep-yt svg{width:20px;height:20px}
.ep-yt[hidden]{display:none}
.ep-yt.nudge{animation:epYtNudge .6s ease}
@keyframes epYtNudge{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* odcinek tylko-wideo (bez pliku audio): transport wygaszony, gra się przez YouTube */
.deck-videoonly .ctl-play{opacity:.5;filter:grayscale(.3)}
.deck-videoonly .wave-wrap{opacity:.55}
.ctl:disabled,.dock-btn:disabled,.dock-play:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

.wave-wrap{position:relative;margin-top:16px}
.wave{width:100%;height:74px;display:block;border-radius:10px;cursor:pointer;touch-action:pan-y}
.wave-hint{
  position:absolute;right:6px;top:-26px;
  font-family:'Caveat',cursive;font-weight:600;font-size:1.18rem;color:var(--zloto);
  transform:rotate(-2deg);pointer-events:none;transition:opacity .4s;
}
.deck-time{display:flex;justify-content:space-between;margin-top:8px;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;color:var(--krem)}

.deck-controls{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,26px);margin-top:18px}
.ctl{
  display:grid;place-items:center;border-radius:50%;
  transition:transform .2s,background .2s,border-color .2s,color .2s;
}
.ctl:hover{transform:translateY(-2px)}
.ctl:active{transform:translateY(0) scale(.96)}
.ctl-skip{width:52px;height:52px;border:2px solid rgba(244,234,213,.55);color:var(--krem);font-size:.74rem;font-weight:900;letter-spacing:.02em}
.ctl-skip:hover{background:rgba(244,234,213,.12);border-color:var(--krem)}
.ctl-prevnext{width:52px;height:52px;border:2px solid rgba(244,234,213,.55);color:var(--krem)}
.ctl-prevnext:hover{background:rgba(244,234,213,.12);border-color:var(--krem)}
.ctl-prevnext svg{width:20px;height:20px}
.ctl-play{width:78px;height:78px;background:var(--cegla);color:var(--krem);box-shadow:0 10px 24px rgba(199,81,45,.35)}
@media(max-width:430px){
  .deck-controls{gap:8px}
  .ctl-skip,.ctl-prevnext{width:46px;height:46px}
  .ctl-skip{font-size:.66rem}
  .ctl-play{width:62px;height:62px}
  .ctl-play svg{width:24px;height:24px}
}
.ctl-play:hover{background:var(--cegla2)}
.ctl-play svg{width:30px;height:30px}

.ep-dots{display:flex;gap:4px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}
/* kropka wizualnie 14px, cel dotykowy 34px (seniorzy) */
.ep-dot{width:34px;height:34px;border-radius:50%;background:none;padding:0;position:relative;display:grid;place-items:center}
.ep-dot::after{content:"";width:14px;height:14px;border-radius:50%;background:rgba(244,234,213,.3);border:1px solid rgba(244,234,213,.55);transition:background .2s,transform .2s}
.ep-dot[aria-current="true"]::after{background:var(--cegla);border-color:var(--cegla);transform:scale(1.25)}
.ep-dot:hover::after{background:var(--zloto);border-color:var(--zloto)}
/* pigułka „+N wkrótce" — kropki tylko dla dostępnych odcinków, nadchodzące zwinięte w licznik
   (rząd zostaje jednym wierszem zamiast rozjeżdżać się przy 10 odcinkach) */
.ep-dot-more{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;margin-left:4px;border-radius:var(--r-pill);background:rgba(244,234,213,.06);border:1px solid rgba(244,234,213,.22);color:var(--krem);transition:background .2s,border-color .2s,transform .2s}
.ep-dot-more:hover{background:rgba(232,163,61,.14);border-color:var(--zloto);transform:translateY(-1px)}
.ep-dot-more .mn{font-weight:900;color:var(--zloto);font-variant-numeric:tabular-nums;font-size:1rem}
.ep-dot-more .ml{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,234,213,.72)}
.ep-dot-more[aria-current="true"]{border-color:var(--zloto);background:rgba(232,163,61,.16)}

/* --- lista odcinków obok decka: kontener o ograniczonej wysokości + przewijanie --- */
.ep-list-wrap{position:relative;margin-top:26px}
.ep-list{
  display:grid;gap:10px;
  max-height:clamp(260px,36vh,300px);
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;touch-action:pan-y;
  padding:6px 12px;scroll-padding-block:30px;
}
/* cienki brandowy scrollbar (złoto na zieleni) — WebKit/Blink: zawsze widoczny, z rezerwacją miejsca */
.ep-list::-webkit-scrollbar{width:8px}
.ep-list::-webkit-scrollbar-track{background:rgba(244,234,213,.08);border-radius:8px;margin:6px 0}
.ep-list::-webkit-scrollbar-thumb{background:var(--zloto);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.ep-list::-webkit-scrollbar-thumb:hover{background:var(--krem)}
/* Firefox (nie zna ::-webkit-scrollbar): cienki złoty scrollbar przez właściwości standardowe.
   Scope na FF, bo w Blink obecność scrollbar-width przełącza pasek w tryb overlay (0 miejsca, znika w spoczynku) */
@supports not selector(::-webkit-scrollbar){ .ep-list{scrollbar-width:thin;scrollbar-color:var(--zloto) rgba(244,234,213,.10)} }
/* fade krawędzi „jest więcej" — nakładki (nie mask, żeby pasek został ostry); right:11px omija scrollbar;
   opacity sterowana klasą przez JS wg pozycji scrolla */
.ep-list-wrap::before,.ep-list-wrap::after{content:"";position:absolute;left:0;right:11px;height:28px;pointer-events:none;z-index:2;opacity:0;transition:opacity .25s}
.ep-list-wrap::before{top:0;background:linear-gradient(180deg,var(--las) 0%,rgba(18,53,38,0) 100%)}
.ep-list-wrap::after{bottom:0;background:linear-gradient(0deg,var(--las) 0%,rgba(18,53,38,0) 100%)}
.ep-list-wrap.more-top::before{opacity:1}
.ep-list-wrap.more-bot::after{opacity:1}
@media (prefers-reduced-motion:reduce){ .ep-list-wrap::before,.ep-list-wrap::after{transition:none} }
/* znacznik „wkrótce" w wierszu listy (odcinki-placeholdery) */
.ep-soon{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--zloto);background:rgba(232,163,61,.14);border:1px solid rgba(232,163,61,.4)}
.ep-item{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:rgba(244,234,213,.06);border:1px solid rgba(244,234,213,.14);
  border-radius:14px;padding:13px 16px;color:var(--krem);
  transition:background .2s,border-color .2s,transform .2s;
  width:100%;
}
.ep-item:hover{background:rgba(244,234,213,.12);transform:translateX(4px)}
.ep-item[aria-current="true"]{border-color:var(--zloto);background:rgba(232,163,61,.12)}
.ep-item .no{font-weight:900;font-variant-numeric:tabular-nums;color:var(--zloto);font-size:1.05rem;flex:none;width:2.2em}
.ep-item .tt{font-weight:700;line-height:1.3}
.ep-item .mm{font-size:.85rem;color:rgba(244,234,213,.65);font-weight:700;letter-spacing:.04em;margin-top:2px}
.ep-item .len{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:rgba(244,234,213,.75);flex:none}

.platforms{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(244,234,213,.08);border:1px solid rgba(244,234,213,.2);
  color:var(--krem);text-decoration:none;font-weight:700;font-size:.9rem;
  padding:10px 18px;border-radius:var(--r-pill);
  transition:background .2s,transform .2s;
  min-height:44px;
}
.chip:hover{background:var(--mech);transform:translateY(-2px)}
.chip svg{width:17px;height:17px;flex:none}
.platforms-note{font-size:.85rem;color:rgba(244,234,213,.74);margin-top:10px}

/* ============================================================= KRAWĘDŹ „skala strojenia radia" (las → krem)
   Pozioma linia rozdziału ze szklaną podziałką tunera (kreski co 18j viewBox, co 5. wyższa) po stronie
   zieleni + złota wskazówka schodząca w krem. preserveAspectRatio=none → kreski gęstnieją na wąskich
   ekranach; liczby chowane <720px. Wskazówka nieustannie dostraja się między stacjami (GSAP, ↓ w JS). */
.tuner-edge{position:relative;margin-top:-1px;margin-bottom:-1px;font-size:0;line-height:0;z-index:1;pointer-events:none}
.tuner-svg{display:block;width:100%;height:74px}
/* wskazówka jako niezniekształcona nakładka (osobne SVG 1:1) — kropka pozostaje okrągła, ruch = translateX */
.tuner-needle{position:absolute;top:0;left:0;width:24px;height:74px;margin-left:-12px;overflow:visible;will-change:transform}
.tuner-nums{position:absolute;inset:0}
.tuner-nums span{
  position:absolute;top:12px;transform:translateX(-50%);
  font-family:'Lato',sans-serif;font-weight:700;font-size:.72rem;line-height:1;
  color:rgba(244,234,213,.5);font-variant-numeric:tabular-nums;
}
@media(max-width:720px){ .tuner-nums{display:none} }

/* ============================================================= CO NAGRYWAMY (papier) */
.formats{background:var(--krem)}
.formats-intro{max-width:66ch}
.formats-intro p{margin-top:18px}
.formats-note{
  font-family:'Caveat',cursive;font-weight:600;font-size:1.5rem;color:var(--zloto-deep);
  transform:rotate(-1.4deg);display:inline-block;margin-top:20px;
}

/* trasa spaceru */
.trail{position:relative;margin-top:clamp(20px,3.4vh,34px)}
.trail-svg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:1;
}
#trailPath{
  stroke:var(--mech);stroke-width:2.2;fill:none;
  stroke-dasharray:2 11;stroke-linecap:round;opacity:.38; /* droga PRZED tobą: kropkowana, cicha */
}
#trailDone{
  stroke:var(--mech);stroke-width:3.2;fill:none;stroke-linecap:round;opacity:.9; /* przebyta: pełna kreska */
}
#wanderer{fill:var(--cegla);stroke:var(--krem);stroke-width:2.5}
#wandererHalo{fill:none;stroke:var(--cegla);stroke-width:1.5;opacity:.35}
.footstep{fill:var(--mech);opacity:0;transition:opacity .5s ease}
.footstep.seen{opacity:.5}
@media (prefers-reduced-motion:reduce){
  #trailDone,#wanderer,#wandererHalo{display:none}
  #trailPath{opacity:.6;stroke-dasharray:7 9}
  .footstep{opacity:.5}
}

/* reveal przystanków — TYLKO gdy silnik ruchu aktywny (html.js-motion); bazowo wszystko widoczne */
html.js-motion .stop .stop-label,
html.js-motion .stop .fmt,
html.js-motion .stop .stop-side{
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
html.js-motion .stop .fmt{transition-delay:.08s}
html.js-motion .stop .stop-side{transition-delay:.22s}
html.js-motion .stop .tape{transform:rotate(-3deg) scale(1.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1) .3s, opacity .3s .3s}
html.js-motion .stop:nth-child(even) .tape{transform:rotate(2.4deg) scale(1.6)}
html.js-motion .stop.reached .stop-label,
html.js-motion .stop.reached .fmt,
html.js-motion .stop.reached .stop-side{opacity:1;transform:none}
html.js-motion .stop.reached .tape{opacity:.85;transform:rotate(-3deg) scale(1)}
html.js-motion .stop:nth-child(even).reached .tape{transform:rotate(2.4deg) scale(1)}
/* pulse pina przeniesiony na kropkę-na-trasie (.stop-dot/.stop-ring — patrz niżej) */

/* przypięta rycina przy przystanku (asset AI) */
.stop-photo{
  flex:none;
  width:min(170px,44vw);padding:10px 10px 14px;background:#fff;
  border-radius:6px;box-shadow:0 10px 26px rgba(18,53,38,.18);
  transform:rotate(2.4deg);margin-bottom:14px;position:relative;
}
.stop:nth-child(even) .stop-photo{transform:rotate(-2deg)}
.stop-photo img{width:100%;height:auto;border-radius:3px;display:block}
.stop-photo::before{ /* pinezka */
  content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;
  border-radius:50%;background:var(--sa,var(--mech));box-shadow:0 2px 5px rgba(0,0,0,.3);
}


/* RAMKI ZEWNĘTRZNIE WZGLĘDEM TRASY: cała treść przystanku (etykieta+karta+rycina+notka)
   w JEDNEJ kolumnie; przeciwna połowa pusta — tamtędy idą łuki spaceru */
.stop{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,8vw,110px);
  margin-bottom:clamp(30px,5.2vh,60px); /* rytm skrócony ~35% (klient: krótszy scroll) */
  align-items:start;
}
.stop:last-child{margin-bottom:0}
.stop-card{grid-column:1;grid-row:1;justify-self:end;max-width:520px;width:100%}
.stop:nth-child(even) .stop-card{grid-column:2;justify-self:start}
.stop-side{
  grid-column:1;grid-row:2;justify-self:end;max-width:520px;width:100%;
  display:flex;gap:16px;align-items:center;margin-top:10px;
}
.stop:nth-child(even) .stop-side{grid-column:2;justify-self:start}
.stop-side .side-note{flex:1}
@media(max-width:900px){
  /* mobile: rytm skrócony łagodniej niż desktop — pełnoszer. karty = ciasny meander
     szybko robi się „za ostry" (próg gładkości 28°); ~25% zamiast 35% trzyma płynność */
  .stop{grid-template-columns:1fr;padding-left:52px;padding-right:40px;margin-bottom:clamp(34px,6vh,58px)}
  .stop-card,.stop:nth-child(even) .stop-card{grid-column:1;justify-self:stretch;max-width:none}
  .stop-side,.stop:nth-child(even) .stop-side{grid-column:1;grid-row:2;justify-self:start;text-align:left;margin-top:12px;max-width:none;flex-wrap:wrap}
}

.stop-label{
  font-family:'Caveat',cursive;font-weight:600;font-size:1.45rem;color:var(--las);
  display:flex;align-items:center;gap:8px;transform:rotate(-1deg);
  width:fit-content;max-width:calc(100% - 28px); /* box = sam tytuł → realna odległość od linii */
}
/* DESKTOP: tytuł = „tabka" na GÓRNEJ krawędzi karty. Wstęga meandruje w gapach MIĘDZY kartami,
   a sама karta jest wolna od linii (kolizje=0) → tytuł na karcie nie nachodzi na krzywą, zostając
   po stronie karty. Summary dostaje górny padding, żeby ikona/tytuł zeszły pod tabkę. */
@media(min-width:901px){
  .stop-card{position:relative}
  .stop-label{position:absolute;top:18px;left:26px;z-index:4;margin:0;font-size:1.2rem;transform:rotate(-1deg)}
  .stop:nth-child(even) .stop-label{left:auto;right:26px;transform:rotate(1deg)}
  .stop .fmt summary{padding-top:66px} /* tytuł karty schodzi WYRAŹNIE pod tabkę-tytuł (bez nachodzenia); wyższa specyficzność niż .fmt summary{padding} */
}
/* MOBILE: nić biegnie lewym marginesem → odsuń tytuł od niej (≥10px), tytuł zostaje nad kartą */
@media(max-width:900px){ .stop-label{margin:0 0 10px 16px} }
/* kropka pina przeniesiona NA TRASĘ (SVG .stop-dot) — jedna kropka per przystanek.
   Stara kropka inline przy etykiecie już niepotrzebna; etykieta = sam tytuł, odsunięty od linii. */
.stop-label .pin{display:none}

/* KROPKI PRZYSTANKÓW NA KRZYWEJ TRASY (SVG, w układzie #trailSvg jak wędrowiec/ślady).
   Pozycja = węzeł pina na ścieżce (ta sama matematyka co stopMarks), morfują z trasą per klatka.
   Kolor per przystanek z jego --sa (ustawiane inline na elemencie w JS → theme-aware przez token). */
.stop-dot{
  fill:var(--sa,var(--mech));stroke:var(--krem);stroke-width:2;
  opacity:0;transition:opacity .4s ease;
  transform-box:fill-box;transform-origin:50% 50%;
}
.stop-dot.reached{opacity:1}
html.js-motion .stop-dot.reached{animation:dotpop .6s cubic-bezier(.34,1.56,.64,1)}
.stop-ring{
  fill:none;stroke:var(--sa,var(--mech));stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;
}
html.js-motion .stop-ring.reached{animation:ringpulse .9s cubic-bezier(.34,1.56,.64,1) 1}
@keyframes dotpop{0%{transform:scale(.2)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes ringpulse{0%{opacity:.5;transform:scale(.55)}100%{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion:reduce){ .stop-dot{opacity:1;animation:none} .stop-ring{display:none} }

.fmt{
  background:#fff;border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  position:relative;
}
.fmt::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-card);
  box-shadow:0 18px 40px rgba(18,53,38,.16);opacity:0;transition:opacity .25s;pointer-events:none;
}
.fmt:hover{transform:translateY(-5px)}
.fmt:hover::after{opacity:1}

/* taśma klejąca na kartach */
.fmt .tape{
  position:absolute;top:-11px;left:26px;width:86px;height:22px;transform:rotate(-3deg);
  background:color-mix(in srgb, var(--sa,var(--mech)) 26%, #f2e8ce);
  opacity:.85;border-radius:2px;pointer-events:none;
}
.stop:nth-child(even) .fmt .tape{left:auto;right:26px;transform:rotate(2.4deg)}

.fmt summary{
  list-style:none;display:flex;align-items:center;gap:18px;
  padding:22px 24px;cursor:pointer;border-radius:var(--r-card);
}
.fmt summary::-webkit-details-marker{display:none}
.fmt-icon{
  width:58px;height:58px;flex:none;border-radius:14px;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--sa,var(--mech)) 14%, #fff);
  color:var(--sa,var(--mech));
}
.fmt-icon svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fmt h3{font-weight:900;font-size:1.25rem;color:var(--las)}
.fmt .fmt-sub{font-size:.9rem;color:#4a4a44;margin-top:3px}
.fmt .chev{
  margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--sa,var(--mech));color:var(--sa,var(--mech));
  display:grid;place-items:center;transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.fmt .chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.fmt[open] .chev{transform:rotate(180deg)}
.fmt-body{padding:0 24px}
.fmt-body-inner{padding:2px 0 24px;color:#3c382f;border-top:1px dashed #d8cdb4;padding-top:16px}
.fmt-body-inner p+p{margin-top:12px}

/* rozwijanie — fallback czysto-CSS (grid-template-rows 0fr→1fr), gdy JS/GSAP niedostępne lub reduced-motion */
.fmt .fmt-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.fmt[open] .fmt-body{grid-template-rows:1fr}
.fmt .fmt-body>div{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .fmt .fmt-body{transition:none} }

/* JS przejmuje animację wysokości (html.fmt-anim ustawiane w JS gdy GSAP obecny i BEZ reduced-motion):
   height zamiast grid — natywne <details> zamyka się SKOKOWO i grid nie animuje zwijania; JS trzyma
   [open] przez cały czas zwijania i tweenuje height (GSAP) → płynnie w OBIE strony, zsynchronizowane
   z morfem trasy. Stan spoczynkowy identyczny (zamknięte=0, otwarte=auto) → geometria trasy bez zmian. */
html.fmt-anim .fmt .fmt-body{display:block;grid-template-rows:none;overflow:hidden;transition:none;will-change:height}
html.fmt-anim .fmt:not([open]) .fmt-body{height:0}
html.fmt-anim .fmt[open] .fmt-body{height:auto}

.stop-side .side-note{
  font-family:'Caveat',cursive;font-weight:600;font-size:1.4rem;line-height:1.35;
  color:var(--zloto-deep);
}
.stop-side .side-note b{color:var(--las);font-weight:600}

/* ============================================================= 4. BLOG — Świeżo z Bielan */
/* płynne wejście z sekcji „co nagrywamy" (krem) w krem2 — head-fade w górnym paddingu
   (koniec „co nagrywamy" nad = krem, więc zlewa się bez szwu).
   RUNDA krawędzi: head-fade wydłużony 90px→220px — tło łagodnie i wyraźnie ciemnieje krem→krem2, bez pasa/bandingu */
.blog{background:linear-gradient(180deg, var(--krem) 0%, var(--krem2) 220px, var(--krem2) 100%)}
.blog-rail{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:26px 4px 20px;cursor:grab;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;touch-action:pan-x pan-y;
}
.blog-rail::-webkit-scrollbar{display:none}
.blog-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.blog-rail.dragging .post{pointer-events:none}
.post{
  flex:0 0 min(340px,82vw);scroll-snap-align:start;
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s;
}
.post:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(18,53,38,.16)}
.post .thumb{position:relative;aspect-ratio:16/10;background:var(--pa,var(--mech));overflow:hidden}
.post .thumb img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(1.1);mix-blend-mode:multiply;opacity:.9;
}
/* kafel koloru z motywem — gdy wpis nie ma obrazka wyróżniającego (tło = --pa działu) */
.post .thumb .pmotif{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.post .thumb .pmotif svg{width:38%;height:38%;opacity:.9}
.post .thumb .pmotif rect{fill:var(--krem)}
.post .pdate{
  position:absolute;top:12px;left:12px;background:var(--krem);color:var(--grafit);
  font-weight:700;font-size:.85rem;letter-spacing:.04em;padding:4px 10px;border-radius:6px;
  transform:rotate(-2deg);box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.post .pbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h3{font-weight:900;font-size:1.15rem;color:var(--las);line-height:1.25}
.post p{font-size:.98rem;color:#3c382f}
.post .more{margin-top:auto;font-weight:900;color:var(--cegla2);text-decoration:none;padding-top:8px}
.post .more:hover{color:var(--cegla)}
.blog-hint{font-size:.85rem;color:#5c5548;margin-top:4px}
.cnote{
  font-family:'Caveat',cursive;font-weight:600;font-size:1.5rem;color:var(--zloto-deep);
  transform:rotate(-1.2deg);display:inline-block;
}
/* dyskretny link do pełnej gazety (podstrona „Świeżo z Bielan") — w stylu walk-linków Caveat */
.blog-all{
  display:inline-block;margin-top:10px;
  font-family:'Caveat',cursive;font-weight:600;font-size:1.3rem;color:var(--zloto-deep);
  text-decoration:none;transform:rotate(-1.2deg);transition:color .2s;
}
.blog-all:hover{color:var(--cegla)}

/* ============================================================= 5. OPOWIEDZ HISTORIĘ (dark) */
/* ===== KRAWĘDŹ „słupki equalizera" — blog (krem2) → historia (las). Technika 1:1 z radio-bielany-krawedz2-finalisci.html:
   zielone słupki (las #123526) wyrastają z sekcji historii w krem2 bloga; każdy „oddycha" scaleY (CSS-only, off przy reduced) */
.eq-edge{position:relative;font-size:0;line-height:0;margin-top:-1px;margin-bottom:-1px;z-index:1;background:var(--krem2);pointer-events:none}
.eq-edge svg{display:block;width:100%}
.eq-bar{transform-box:fill-box;transform-origin:50% 100%;will-change:transform}
@keyframes eqbreath{0%,100%{transform:scaleY(var(--lo,.94))}50%{transform:scaleY(var(--hi,1.06))}}

/* ===== KRAWĘDŹ „wieczorna sylweta parku" — zaplecze (krem2) → stopka (grafit). Technika 1:1 z referencji,
   PRZEFARBOWANA pod stopkę: grunt+drzewa+ławka+latarnia w graficie #191917 (sylweta wyrasta z grafitu stopki),
   światło latarni ciepłe złote (--zloto), poświata pulsuje (off przy reduced → statyczna średnia). Sky = krem2. */
.park-edge{position:relative;font-size:0;line-height:0;margin-top:-1px;margin-bottom:-1px;z-index:1;background:var(--krem2);overflow:hidden;pointer-events:none}
.park-obj{position:absolute;pointer-events:none}
.park-obj svg{display:block;width:100%;height:100%;overflow:visible}
.lamp-glow{
  position:absolute;transform:translate(-50%,-50%) scale(1);pointer-events:none;opacity:.68;
  background:radial-gradient(ellipse at center,
     rgba(232,163,61,.60) 0%, rgba(232,163,61,.34) 30%, rgba(232,163,61,.13) 55%, rgba(232,163,61,0) 76%);
  will-change:opacity,transform;
}
.lamp-glow--head{
  background:radial-gradient(circle at center,
     rgba(255,224,150,.85) 0%, rgba(232,163,61,.55) 26%, rgba(232,163,61,.18) 52%, rgba(232,163,61,0) 74%);
}
@keyframes lampPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.82;transform:translate(-50%,-50%) scale(1.06)}}
.lamp-dot{
  position:absolute;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);
  background:#FFE7B0;box-shadow:0 0 9px 3px rgba(255,209,120,.9);pointer-events:none;opacity:.92;
}
@keyframes dotPulse{0%,100%{opacity:.78}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .eq-bar{animation:none!important;transform:none!important}
  .lamp-glow{animation:none!important;opacity:.68!important;transform:translate(-50%,-50%) scale(1)!important}
  .lamp-dot{animation:none!important;opacity:.9!important}
}
/* dół sekcji „historia" trzyma ciemną zieleń (las2) aż do styku — dawny tail-fade las2→krem 88px
   zastąpiony krawędzią „Koperty od sąsiadów" (#kop-edge), której falowana linia rozdziału JEST
   stykiem las2→krem; sekcja zostaje ciemna do dołu, przejście przejmuje krawędź */
.story-call{background:linear-gradient(180deg, var(--las) 0%, var(--las2) 100%);color:var(--krem)}
.story-call .sec-lead{color:rgba(244,234,213,.9)}

/* ===== KRAWĘDŹ „Koperty od sąsiadów" — historia (las2) → dołącz (krem). Z wieczornej sekcji
   wysypują się w krem koperty i pocztówki; leżą W CAŁOŚCI na kremie poniżej falowanej linii
   rozdziału, każda z cieniem; górą minimalnie zachodzą na ciemną strefę. BEZ overflow:hidden na
   wrapperze → żadna koperta nie jest ucinana od dołu (spływa na identyczny krem sekcji „dołącz");
   poziomy overflow pilnuje html{overflow-x:clip}. Statyczne (wypełniane w JS buildEdges → drawKoperty). */
.kop-edge{position:relative;font-size:0;line-height:0;margin-top:-1px;margin-bottom:-1px;z-index:1;background:var(--krem);pointer-events:none}
.kop-ov{position:absolute;pointer-events:none;font-size:0;line-height:0}
.kop-ov svg{display:block;overflow:visible}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:32px}
.opt{
  background:rgba(244,234,213,.07);border:1px solid rgba(244,234,213,.16);
  border-radius:var(--r-card);padding:24px;
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s;
}
.opt:hover{transform:translateY(-4px);background:rgba(244,234,213,.11);border-color:rgba(244,234,213,.3)}
.opt .oicon{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;
  background:rgba(232,163,61,.14);color:var(--zloto);
}
.opt .oicon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.opt h3{font-weight:900;font-size:1.12rem;color:var(--krem)}
.opt p{font-size:.98rem;color:rgba(244,234,213,.85);margin-top:6px}
.story-close{margin-top:clamp(40px,5vh,60px);display:flex;align-items:center;gap:22px;flex-wrap:wrap} /* odstęp od ramek opcji powyżej */
.story-close p{color:rgba(244,234,213,.9)}

/* ============================================================= 6. DOŁĄCZ (ogłoszenie na tablicy) */
.join{background:var(--krem)}
.join-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){ .join-grid{grid-template-columns:1fr} }
.notice{
  position:relative;background:#fff;border-radius:8px;
  box-shadow:0 14px 34px rgba(18,53,38,.16);
  padding:30px 28px 26px;transform:rotate(1.6deg);
  max-width:420px;justify-self:center;width:100%;
}
.notice::before{
  content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;
  border-radius:50%;background:var(--cegla);box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.notice-h{font-weight:900;font-size:1.05rem;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;color:var(--las);text-align:center}
.notice ul{list-style:none;margin-top:16px;display:grid;gap:10px}
.notice li{
  display:flex;align-items:center;gap:12px;font-weight:700;color:var(--grafit);
  border-bottom:1px dashed #d8cdb4;padding-bottom:10px;
}
.notice li:last-child{border-bottom:0}
.notice li .dotmark{width:10px;height:10px;border-radius:50%;flex:none;background:var(--sa,var(--mech))}
.notice .ncaveat{
  display:block;text-align:center;margin-top:14px;
  font-family:'Caveat',cursive;font-weight:600;font-size:1.4rem;color:var(--zloto-deep);
  transform:rotate(-1.4deg);
}

/* ============================================================= 7. ZAPLECZE */
/* góra: krem→krem2 head-fade (koniec „dołącz" nad = krem), wydłużony 90px→220px — tło łagodnie ciemnieje krem→krem2.
   dół: BEZ tail-fade krem2→grafit — zastępuje go krawędź „park" (#park-edge), z której sylweta wyrasta ze stopki;
   partners kończy się na krem2 = tło (sky) parku → styk krem2/krem2 bez szwu */
.partners{background:linear-gradient(180deg, var(--krem) 0%, var(--krem2) 220px, var(--krem2) 100%)}
.partner-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:30px}
.partner{background:#fff;border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow-card)}
.partner .plogo{
  height:62px;display:grid;place-items:center;margin-bottom:14px;
  border:1.5px dashed #d8cdb4;border-radius:8px;
  color:#8a7f63;font-size:.78rem;font-weight:700;letter-spacing:.14em;
}
.partner .plogo.has-img{border:none} /* realne logo — bez ramki placeholdera */
.partner .plogo img{max-height:52px;max-width:100%;width:auto;object-fit:contain} /* absolutny cap wys.: grid-item nie rozpycha boxa */
.partner .pname{font-weight:900;color:var(--las);font-size:1.1rem}
.partner p{font-size:.95rem;color:#3c382f;margin-top:6px}

/* ============================================================= REGUŁA MIĘDZYWARSTWOWA (relokowana ze źródłowego bloku .floater)
   Miesza stan globalny html.floater-on × element sekcji .hero-cue → zgodnie z zaleceniem trzymana w home.css, nie w shell.
   Pozycja zachowana względem innych reguł home (po sekcjach, przed REVEAL). Kaskada bez zmian: swoistość (0,3,1) wygrywa niezależnie od pliku. */
html.floater-on .hero-cue .cue-arrow{display:none}

/* ============================================================= REVEAL (enhance-only: bazowo wszystko widoczne) */
.rv{opacity:1}

/* ============================================================= MOBILE PASS v-0.8
   (1) ciaśniejsze odstępy hero→sekcje  (2) mikrofon wpisany w dock jako przycisk play
   (3) pastylki platform w jednym wierszu do ~360px */
@media(max-width:720px){
  /* (1) sekcje bliżej siebie — zwłaszcza styk hero→posłuchaj (gradienty krawędzi + tuner/eq/park ZOSTAJĄ nietknięte) */
  /* hero na mobile: koniec 100svh + wyśrodkowania w pionie — treść dociśnięta pod nav, hero = wysokość treści */
  .hero{ min-height:auto; align-items:start; padding:78px 0 34px; }
  .band{ padding-block:clamp(36px,6vh,56px); }    /* było clamp(44,7.5vh,68) — kolejne ~18% ciaśniej */
  .sec-lead{ margin-top:12px; }                   /* nagłówek↔lead ciaśniej (18→12) */
  #posluchaj{ padding-top:14px; }                 /* styk hero→posłuchaj minimalny */
  #blog{ padding-bottom:clamp(20px,3vh,30px); }        /* blog→historia ciaśniej (nad krawędzią equalizera) */
  #historia{ padding-top:clamp(24px,4vh,38px); }       /* …i pod krawędzią equalizera */
  .blog .cnote{ white-space:nowrap; font-size:min(1.2rem,4.7vw); } /* „przeciągnij kafelki…" w jednej linii */

  /* (2) mikrofon zastępuje .dock-play — podpis .fl-cap tylko desktop; NOTKA „naciśnij…" widoczna też na mobile */
  .floater.in-dock .fl-cap{ display:none; }                    /* podpis-instrukcja tylko desktop */
  .fl-note{ font-size:1.05rem; }                               /* mniejsza notka na mobile (nad dockiem) */

  /* (3) pastylki Spotify / YouTube / Apple Podcasts — JEDEN wiersz (do ~360px): nowrap + zmniejszone,
     flex:0 1 auto = rozmiar treści, ale mogą się skurczyć (ellipsis) zamiast wyjść poza wiersz */
  .platforms{ flex-wrap:nowrap; gap:5px; margin-top:24px; }
  .chip{ flex:0 1 auto; min-width:0; padding:8px 8px; font-size:.72rem; gap:4px; min-height:42px; }
  .chip svg{ width:14px; height:14px; }
  .chip .chip-lbl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}