
:root{--bg:#0a110d;--bg2:#0f1913;--card:#142019;--card2:#192a20;--line:#22352a;
--ink:#eef4ef;--soft:#bccbbf;--muted:#7f9583;--green:#7fc296;--green2:#5aa878;
--gold:#e6b968;--gold2:#c99a4a;--r:18px;--sh:0 14px 40px -18px rgba(0,0,0,.7);
--serif:"Fraunces",Georgia,serif;--sans:"Inter",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif}
:root[data-theme=light]{--bg:#f6f4ec;--bg2:#efece1;--card:#fff;--card2:#f4f1e6;--line:#ddd8c6;
--ink:#16251c;--soft:#3f5246;--muted:#6c7d70;--green:#2f7a4c;--green2:#26663f;--gold:#9a6b14;--gold2:#7e550d;--sh:0 14px 34px -20px rgba(40,50,30,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.4vw,3.9rem)}h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}h3{font-size:1.2rem}
p{margin:0 0 1em;color:var(--soft)}.muted{color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}.narrow{max-width:780px}
.skip{position:absolute;inset-inline-start:10px;top:-80px}.skip:focus{top:10px;background:var(--gold);color:#000;padding:8px 12px;border-radius:8px;z-index:99}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
section{padding:76px 0}.alt{background:var(--bg2);border-block:1px solid var(--line)}
.eyebrow{font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{margin:0}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font:700 1.05rem var(--serif)}.brand:hover{text-decoration:none}
.brand img{border-radius:9px}.brand b{color:var(--gold)}
.links{display:flex;gap:4px;margin-left:auto}.brand{white-space:nowrap;flex-shrink:0}.links a{white-space:nowrap;color:var(--soft);padding:8px 8px;border-radius:999px;font-weight:500;font-size:.86rem}
.links a:hover,.links a.on{background:var(--card);color:var(--ink);text-decoration:none}
.lang{position:relative;margin-left:4px}.lang summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.85rem;color:var(--soft);white-space:nowrap}
.lang summary::after{content:none}.lang>div{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:250px;box-shadow:var(--sh);z-index:60}
.lang a{padding:7px 12px;border-radius:8px;color:var(--soft);font-size:.9rem}.lang a:hover{background:var(--card2);text-decoration:none}
[dir=rtl] .lang>div{right:auto;left:0}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.25s}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:13px 22px;border-radius:999px;font-weight:600;cursor:pointer;font-size:1rem;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:var(--sh)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1a1405;border:0}
.btn-green{background:var(--green);color:#06160c;border:0}.btn.sm{padding:8px 16px;font-size:.9rem}
.btn-pp{background:#ffc439;color:#003087;border:0;margin-left:6px;gap:6px}.btn-pp:hover{background:#ffb700}
.pp-blink{animation:ppblink 2.4s ease-in-out infinite}@keyframes ppblink{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.pp-blink{animation:none}}
@media (max-width:600px){.nav-in{gap:8px;padding-left:14px;padding-right:14px}.lang{width:max-content;flex:0 0 auto}.nav .themebtn{display:none}.lang summary{padding:6px 9px}.brand span{font-size:.95rem}.brand img{width:28px;height:28px}
 .nav .btn.btn-pp{display:inline-flex;padding:6px 9px;margin-left:2px}.nav .btn-pp .pp-blink{font-size:.78rem}}
@media (max-width:600px){.page{padding:24px 16px 48px}.langs a{padding:8px 14px;font-size:.9rem}}
@media (max-width:400px){.brand span b{display:none}.nav .btn-pp .pp-blink{display:none}}
/* hero */
.hero{position:relative;overflow:hidden;padding:110px 0 90px;border-bottom:1px solid var(--line);isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 500px at 78% -10%,rgba(127,194,150,.22),transparent 60%),radial-gradient(700px 420px at 8% 110%,rgba(230,185,104,.14),transparent 60%)}
#wave{position:absolute;inset:auto 0 0 0;width:100%;height:150px;z-index:-1;opacity:.55}
.hero p.lead{font-size:1.2rem;max-width:620px;color:var(--soft)}
.hero h1 em{font-style:normal;color:var(--gold)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.stat{background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.stat b{display:block;font:700 2rem var(--serif);color:var(--gold)}.stat span{font-size:.85rem;color:var(--muted)}
/* picker */
.picker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.pill{border:1px solid var(--line);background:var(--card);color:var(--soft);padding:10px 20px;border-radius:999px;font:600 .95rem var(--sans);cursor:pointer;transition:.2s}
.pill:hover{border-color:var(--green)}.pill.on{background:var(--green);color:#06160c;border-color:var(--green)}
.stage{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:var(--sh)}
.player img,.player iframe{width:100%;height:100%;object-fit:cover;border:0}
.player button{position:absolute;inset:0;border:0;background:rgba(0,0,0,.28);cursor:pointer;display:grid;place-items:center;transition:.2s}
.player button:hover{background:rgba(0,0,0,.12)}
.player button i{width:78px;height:78px;border-radius:50%;background:var(--gold);color:#1a1405;display:grid;place-items:center;font-size:1.9rem;padding-left:6px;box-shadow:0 0 0 12px rgba(230,185,104,.2)}
.livedot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ff4b4b;margin-right:8px;animation:pulse 1.6s infinite}@keyframes pulse{50%{opacity:.25}}
.stage h3{font-size:1.5rem}
/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);border-color:var(--green2);box-shadow:var(--sh);text-decoration:none}
.thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#07100a}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.card:hover .thumb img{transform:scale(1.05)}
.play{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#1a1405;display:grid;place-items:center;font-size:.9rem;padding-left:3px;opacity:0;transform:scale(.8);transition:.2s}
.card:hover .play{opacity:1;transform:none}
.meta{display:flex;gap:6px;padding:14px 16px 0}.ct{padding:8px 16px 18px;font-weight:600;line-height:1.35;font-size:.98rem}
.chip{font:600 .68rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--card2);color:var(--muted);border:1px solid var(--line)}
.chip.i-sleep{color:#9db8ff;border-color:#2c3c66}.chip.i-focus{color:var(--green);border-color:#2a5a3e}.chip.i-relax{color:var(--gold);border-color:#5a4720}.chip.k{color:#cfcfcf}
.chip:empty{display:none}
/* toolbar */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:24px}
.search{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);color:var(--ink);padding:13px 18px;border-radius:999px;font:500 1rem var(--sans)}
.search:focus{outline:2px solid var(--gold);border-color:transparent}
.count{color:var(--muted);font-size:.9rem;margin:0 0 16px}
.empty{padding:50px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
/* blog */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.post{padding:0;gap:0}.pbody{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}.pthumb{display:block;aspect-ratio:16/9;width:100%;overflow:hidden;background:#07100a}.pthumb img{width:100%;height:100%;object-fit:contain}.pthumb.ph img{object-fit:contain;padding:30px;opacity:.5}.post h3{margin:6px 0 4px}.post p{font-size:.95rem;margin:0;color:var(--soft)}
.src{display:inline-flex;gap:7px;align-items:center;font:600 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.lock{border-style:dashed;background:linear-gradient(180deg,var(--card),var(--bg2))}
.lock .src{color:var(--muted)}.date{color:var(--muted);font-size:.82rem}
.article{padding:60px 0}.article h1{font-size:clamp(1.9rem,4vw,2.9rem)}
.article .body{font-size:1.08rem}.article .body p{color:var(--ink);opacity:.92}
.article audio{width:100%;margin:18px 0}.article img.cover{border-radius:var(--r);margin:18px 0;border:1px solid var(--line)}
/* about / faq / platforms */
.two{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.gear{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.plat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.plat a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink);font-weight:600;transition:.2s}
.plat a small{display:block;font-weight:400;color:var(--muted);margin-top:2px}.plat a:hover{border-color:var(--gold);transform:translateY(-3px);text-decoration:none}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:0 22px}
summary{cursor:pointer;padding:18px 0;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:14px}
summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}details[open] summary::after{content:"\2212"}
summary::-webkit-details-marker{display:none}details p{padding-bottom:6px}
.banner{background:linear-gradient(135deg,#1c3324,#2a2410);border:1px solid #3a5a44;border-radius:26px;padding:48px;text-align:center}
/* tla ze zdjec wlasciciela (2026-10-27): przyciemnione pod kolor motywu, zeby tekst byl czytelny */
.hero{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 55%,color-mix(in srgb,var(--bg) 15%,transparent) 100%),url(../img/tla/rzeka.webp) center/cover no-repeat}
#about{background:linear-gradient(90deg,var(--bg) 30%,color-mix(in srgb,var(--bg) 40%,transparent)),url(../img/tla/statyw.webp) right center/cover no-repeat}
.banner{background:linear-gradient(135deg,rgba(12,20,15,.78),rgba(30,22,8,.72)),url(../img/tla/pole.webp) center/cover no-repeat;color:#f3efe4}
.banner h2,.banner p{color:#f3efe4}
@media (max-width:700px){.hero{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent),color-mix(in srgb,var(--bg) 85%,transparent)),url(../img/tla/rzeka_m.webp)}
 #about{background-image:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent),var(--bg)),url(../img/tla/statyw_m.webp)}}
.banner h2{margin-bottom:10px}.banner p{max-width:560px;margin:0 auto 22px}
/* footer */
.foot{border-top:1px solid var(--line);background:var(--bg2);padding:54px 0 28px;margin-top:40px}
.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.foot h4{margin:0 0 12px;font:600 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.foot-in a:not(.brand){display:block;color:var(--soft);padding:3px 0;font-size:.95rem}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.themebtn{background:none;border:1px solid var(--line);color:var(--soft);border-radius:999px;padding:7px 11px;cursor:pointer}
/* motyw / ulubione / timer snu */
.themebtn{background:none;border:1px solid var(--line);color:var(--soft);border-radius:999px;padding:7px 11px;cursor:pointer;font-size:.9rem}
.card{position:relative}.fav{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:1.05rem;cursor:pointer;backdrop-filter:blur(4px);transition:.2s}
.fav:hover{transform:scale(1.1)}.fav.on{background:var(--gold);color:#1a1405}
.sleeptimer{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}.sleeptimer small{color:var(--muted);width:100%}
.alt-plat{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;font-size:.9rem}.alt-plat strong{color:var(--muted);font-weight:600}.alt-plat a{padding:5px 12px;border-radius:999px;border:1px solid var(--line, rgba(128,128,128,.35));text-decoration:none}.alt-plat a:hover{border-color:currentColor}.facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 16px;font-size:.88rem;line-height:1.5;color:var(--muted)}.facts span{white-space:normal}.facts i{font-style:normal;margin-inline-end:2px}
.sleeptimer .pill{padding:7px 14px;font-size:.85rem}.timer-left{color:var(--gold);font-weight:600;font-size:.9rem}
/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
@media (max-width:1180px){
 .links{position:fixed;inset:58px 0 auto 0;flex-direction:column;background:var(--bg);padding:14px 22px 22px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.3s;margin:0;z-index:40}
 .links.open{transform:none}.burger{display:block;margin-left:auto}.nav .btn{display:none}.lang{margin-left:0}}
@media (max-width:860px){
 .stats{grid-template-columns:1fr 1fr}.stage,.two{grid-template-columns:1fr}.foot-in{grid-template-columns:1fr 1fr}
 section{padding:54px 0}.hero{padding:70px 0 70px}.banner{padding:30px 20px}}
/* shorty (behind the scenes) */
.shorts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.thumb.vert{aspect-ratio:9/16}.card.short .ct{font-size:.88rem;padding:10px 12px 14px}
/* podstrony nagran (site_pages) */
.page{padding:40px 22px 60px;max-width:820px}.crumb{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.langs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 20px}.langs a{border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:.8rem;color:var(--soft)}.langs a.on{background:var(--gold);color:#1a1405;border-color:var(--gold)}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:22px 0}.box a{margin-right:14px;font-weight:600}
.pi{display:inline-block;vertical-align:-3px;margin-inline-end:6px;flex:none}.foot a .pi,.plat a .pi{margin-inline-end:7px}
.btn-spotify{background:#1ED760;color:#04210f;border:0;margin:6px 0 4px}.btn-spotify:hover{filter:brightness(1.06)}.btn-spotify .pi path{fill:#04210f}
.spotify-box{margin:18px 0 0}.thumb img.nofb{object-fit:contain}
.page ul{color:var(--soft)}.page li{margin:6px 0}
