/* ══════════════════════════════════════════════════════════
   Roman I. Drozd — prototyp (etap 0)
   Paleta z „ciepłego zdjęcia”: ciepła czerń, bursztyn, złoto inspiracji.
   Typografia: Cormorant Garamond (szeryf partytur) + Jost.
   ══════════════════════════════════════════════════════════ */

:root{
  --noc:         #0b0806;
  --noc-2:       #120d09;
  --braz:        #1c140d;
  --zloto:       #d6a04a;
  --zloto-jasne: #f3d9a4;
  --bursztyn:    #b8732a;
  --kosc:        #f5ecdc;
  --szept:       rgba(245,236,220,.72);
  --ramka:       rgba(214,160,74,.28);
  --max:         1200px;
  --plynnie:     cubic-bezier(.22,.61,.36,1);
  --szeryf:      "Cormorant Garamond", Georgia, serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--noc)}
body{
  margin:0; color:var(--kosc);          /* tło nocy daje html — przez body prześwituje warstwa .tlo-dolne */
  font-family:"Jost",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-weight:300; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--szeryf); font-weight:400; margin:0; line-height:1.1}
p{margin:0 0 1em}

.etykieta{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--zloto); margin-bottom:1.1rem;
}
.tytul{font-size:clamp(2.1rem,4.2vw,3.4rem); margin-bottom:1.2rem}
.podtytul{color:var(--szept); font-size:1.05rem}

/* Złoty połysk na literach */
.tytul-glowny em, .kontakt-link, .liczba b{
  background:linear-gradient(100deg,var(--zloto) 20%,var(--zloto-jasne) 45%,var(--zloto) 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:polysk 9s linear infinite;
}
@keyframes polysk{to{background-position:-220% 0}}

/* ─── PRZYCISKI ─── */
.przycisk{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:0;
  padding:.85rem 1.9rem; border-radius:999px; text-decoration:none; font-family:inherit;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400;
  color:var(--noc); background:linear-gradient(120deg,var(--zloto),var(--zloto-jasne));
  transition:box-shadow .5s var(--plynnie), transform .5s var(--plynnie);
}
.przycisk:hover{box-shadow:0 0 34px rgba(214,160,74,.45); transform:translateY(-2px)}
.przycisk:focus-visible{outline:1px solid var(--zloto-jasne); outline-offset:4px}
.przycisk-obrys{background:transparent; color:var(--zloto-jasne); box-shadow:inset 0 0 0 1px var(--ramka)}
.przycisk-obrys:hover{box-shadow:inset 0 0 0 1px var(--zloto), 0 0 30px rgba(214,160,74,.2)}
.przyciski{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem}
.link-strzalka{
  display:inline-block; margin-top:.4rem; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--zloto-jasne); text-decoration:none; border-bottom:1px solid var(--ramka); padding-bottom:.2rem;
  transition:border-color .4s;
}
.link-strzalka::after{content:" ↓"}
.link-strzalka:hover{border-color:var(--zloto)}

/* ─── NAGŁÓWEK ─── */
.naglowek{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.2rem clamp(1rem,4vw,3rem);
  transition:background .5s var(--plynnie), padding .5s var(--plynnie);
}
.naglowek.pelny{
  background:rgba(11,8,6,.84); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding-block:.7rem; border-bottom:1px solid rgba(214,160,74,.12);
}
.marka{text-decoration:none; display:flex; flex-direction:column; line-height:1.05}
.marka-imie{font-family:var(--szeryf); font-size:1.55rem; letter-spacing:.02em; color:var(--kosc)}
.marka-rola{font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--zloto); margin-top:.3rem}
.menu{display:flex; gap:2rem}
.menu a{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  color:var(--szept); position:relative; padding-block:.4rem; transition:color .35s;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--zloto); transition:right .45s var(--plynnie);
}
.menu a:hover{color:var(--kosc)}
.menu a:hover::after{right:0}
.naglowek-prawo{display:flex; align-items:center; gap:1.4rem}

/* Przycisk „Muzyka”: cztery słupki, które tańczą, gdy gra */
.dzwiek{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--szept);
  padding:.45rem .9rem; border-radius:999px; box-shadow:inset 0 0 0 1px var(--ramka); transition:box-shadow .4s, color .4s;
}
.dzwiek:hover, .dzwiek[aria-pressed="true"]{color:var(--zloto-jasne); box-shadow:inset 0 0 0 1px var(--zloto)}
.dzwiek:focus-visible{outline:1px solid var(--zloto-jasne); outline-offset:3px}
.dzwiek-fale{display:flex; align-items:flex-end; gap:2px; height:12px}
.dzwiek-fale i{width:2px; height:3px; background:var(--zloto); border-radius:1px; transition:height .3s}
.dzwiek[aria-pressed="true"] .dzwiek-fale i{animation:slupek 1s ease-in-out infinite alternate}
.dzwiek-fale i:nth-child(2){animation-delay:-.3s !important}
.dzwiek-fale i:nth-child(3){animation-delay:-.6s !important}
.dzwiek-fale i:nth-child(4){animation-delay:-.15s !important}
@keyframes slupek{from{height:3px} to{height:12px}}

.jezyki{display:flex; gap:.2rem; font-size:.7rem; letter-spacing:.2em}
.jezyki a{text-decoration:none; color:var(--szept); padding:.3rem .45rem; border-radius:4px; transition:color .3s}
.jezyki a:hover{color:var(--kosc)}
.jezyki a[aria-current]{color:var(--zloto-jasne); box-shadow:inset 0 -1px 0 var(--zloto)}

/* ─── TŁO DOLNEJ CZĘŚCI (od odtwarzacza w dół) ───
   Stała warstwa pod treścią: dryfujące złote poświaty (CSS) + pył i wolne fale (canvas, strona.js).
   Włącza się dopiero, gdy film zjedzie z ekranu; film ma własne, nieprzezroczyste płótno. */
.tlo-dolne{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.6s var(--plynnie); overflow:hidden}
.tlo-dolne.widoczne{opacity:1}
.tlo-dolne::before, .tlo-dolne::after{content:""; position:absolute; inset:-25%; will-change:transform}
.tlo-dolne::before{
  background:
    radial-gradient(ellipse 34% 28% at 18% 26%, rgba(214,160,74,.2), transparent 70%),
    radial-gradient(ellipse 30% 34% at 84% 62%, rgba(184,115,42,.21), transparent 70%),
    radial-gradient(ellipse 46% 22% at 50% 96%, rgba(214,160,74,.15), transparent 72%);
  animation:poswiata-a 70s ease-in-out infinite alternate}
.tlo-dolne::after{
  background:
    radial-gradient(ellipse 26% 22% at 70% 18%, rgba(243,217,164,.08), transparent 70%),
    radial-gradient(ellipse 30% 26% at 30% 78%, rgba(184,115,42,.12), transparent 70%);
  animation:poswiata-b 90s ease-in-out infinite alternate}
@keyframes poswiata-a{from{transform:translate(0,0) scale(1)} to{transform:translate(6%,-5%) scale(1.12)}}
@keyframes poswiata-b{from{transform:translate(0,0) scale(1.08)} to{transform:translate(-7%,4%) scale(.96)}}
.tlo-dolne canvas{position:absolute; inset:0; width:100%; height:100%}

/* ─── FILM PRZEWIJANY ─── */
.film{position:relative; height:1200vh}
.film-scena{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.film-plotno, .pyl{position:absolute; inset:0; width:100%; height:100%}
.film-plotno{background:var(--noc)}
.pyl{pointer-events:none; mix-blend-mode:screen}
/* Welon: ciemna lewa strona pod tekstem; postać Romana stoi na prawo od środka */
.film-welon{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,8,6,.93) 0%, rgba(11,8,6,.84) 30%, rgba(11,8,6,.45) 50%, rgba(11,8,6,0) 68%),
    linear-gradient(0deg, rgba(11,8,6,.8) 0%, rgba(11,8,6,0) 26%),
    linear-gradient(180deg, rgba(11,8,6,.55) 0%, rgba(11,8,6,0) 18%);
}

.rozdzial{
  position:absolute; left:clamp(1.2rem,7vw,7rem); top:50%;
  width:min(34rem, calc(100% - 2.4rem));
  opacity:0; visibility:hidden; will-change:opacity, transform, filter;
}
.rozdzial-otwarcie{width:min(46rem, calc(100% - 2.4rem))}
.rozdzial p{color:rgba(245,236,220,.86); font-size:1.08rem}
.rozdzial p, .rozdzial li, .rozdzial .tytul, .rozdzial h1{text-shadow:0 1px 18px rgba(11,8,6,.9), 0 0 2px rgba(11,8,6,.6)}
.tytul-glowny{font-size:clamp(3rem,6.4vw,6.2rem); font-weight:300; line-height:.98; margin-bottom:1.6rem; letter-spacing:-.01em}
.tytul-glowny em{font-style:italic; display:block; font-size:.5em; line-height:1.15; padding-left:.15em; margin-top:.5em}
.wstep{font-size:1.18rem !important; max-width:30rem}

.atuty{list-style:none; margin:0; padding:0}
.atuty li{position:relative; padding:0 0 .9rem 2rem; color:var(--szept); font-size:1rem; line-height:1.6}
.atuty li::before{
  content:"♪"; position:absolute; left:0; top:-.05rem; font-size:1.1rem; color:var(--zloto);
  text-shadow:0 0 12px rgba(214,160,74,.7);
}
.atuty b{font-weight:400; color:var(--kosc)}

.motto{font-family:var(--szeryf); font-style:italic; font-size:1.6rem !important; line-height:1.3; color:var(--zloto-jasne) !important; margin-top:1.4rem}
.dopisek{font-size:.95rem !important; color:var(--szept) !important; padding-top:1rem; border-top:1px solid rgba(214,160,74,.2)}
.dzieła-skrot{font-family:var(--szeryf); font-style:italic; font-size:1.3rem !important; line-height:1.45; color:var(--zloto-jasne) !important}

.znaczki{list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem}
.znaczki li{
  padding:.4rem 1rem; border-radius:999px; font-size:.82rem; letter-spacing:.04em;
  color:var(--zloto-jasne); box-shadow:inset 0 0 0 1px var(--ramka); background:rgba(11,8,6,.45);
}

.film-postep{
  position:absolute; right:clamp(1rem,3vw,2.6rem); top:50%; translate:0 -50%;
  display:flex; flex-direction:column; gap:1.3rem;
}
.film-postep button{
  all:unset; cursor:pointer; position:relative; width:9px; height:9px; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--ramka); transition:background .5s, box-shadow .5s;
}
.film-postep button.aktywny{background:var(--zloto); box-shadow:0 0 14px rgba(214,160,74,.8)}
.film-postep button:focus-visible{outline:1px solid var(--zloto); outline-offset:4px}
.film-postep span{
  position:absolute; right:1.4rem; top:50%; translate:0 -50%; white-space:nowrap;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--szept);
  opacity:0; transition:opacity .4s; text-shadow:0 0 12px rgba(11,8,6,.9);
}
.film-postep button:hover span, .film-postep button.aktywny span{opacity:1}

.film-wskazowka{
  position:absolute; left:50%; bottom:2rem; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--szept);
  transition:opacity .6s;
}
.film-wskazowka i{width:1px; height:44px; background:linear-gradient(var(--zloto),transparent); animation:kapie 2.2s var(--plynnie) infinite}
@keyframes kapie{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

.makieta-info{
  position:absolute; left:1rem; bottom:1rem; padding:.45rem .8rem; border-radius:6px;
  font:400 .7rem/1.4 ui-monospace,Menlo,monospace; color:#cfe;
  background:rgba(0,0,0,.55); border:1px dashed rgba(200,255,240,.3);
}
.makieta-ukryta .makieta-info{display:none}

/* ─── SEKCJE ─── */
.sekcja{padding:clamp(5rem,12vw,9rem) clamp(1rem,4vw,3rem); max-width:var(--max); margin:0 auto}
.sekcja-naglowek{text-align:center; max-width:40rem; margin:0 auto clamp(3rem,6vw,4.5rem)}
.odslon{opacity:0; transform:translateY(40px); transition:opacity 1.1s var(--plynnie), transform 1.1s var(--plynnie)}
.odslon.widoczny{opacity:1; transform:none}
.przypis{text-align:center; font-size:.82rem; color:var(--szept); opacity:.7; margin-top:1.4rem}

/* Posłuchaj: odtwarzacz z falami */
.muzyka{max-width:none; background:radial-gradient(ellipse 60% 50% at 50% 30%, rgba(90,58,22,.35), transparent 70%)}
.odtwarzacz{
  max-width:56rem; margin:0 auto; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg,rgba(28,20,13,.92),rgba(18,13,9,.96)); box-shadow:inset 0 0 0 1px var(--ramka), 0 40px 80px -40px rgba(0,0,0,.8);
}
.odtw-scena{position:relative; padding:clamp(1.4rem,3vw,2.2rem); min-height:13rem; display:flex; flex-direction:column; justify-content:flex-end; gap:1.2rem}
.odtw-fale{position:absolute; inset:0; width:100%; height:100%; opacity:.9}
.odtw-teraz{position:relative; display:flex; align-items:center; gap:1.2rem}
.odtw-teraz p{margin:0}
.odtw-tytul{font-family:var(--szeryf); font-size:clamp(1.5rem,3vw,2rem); line-height:1.15}
.odtw-opis{font-size:.85rem; color:var(--szept)}
.odtw-graj, .mini-graj{
  all:unset; cursor:pointer; flex:none; width:3.6rem; height:3.6rem; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(120deg,var(--zloto),var(--zloto-jasne)); box-shadow:0 0 30px rgba(214,160,74,.35);
  transition:transform .4s var(--plynnie), box-shadow .4s;
}
.odtw-graj:hover, .mini-graj:hover{transform:scale(1.06); box-shadow:0 0 44px rgba(214,160,74,.55)}
.odtw-graj:focus-visible, .mini-graj:focus-visible{outline:1px solid var(--zloto-jasne); outline-offset:4px}
/* ikona: trójkąt „graj” albo dwie kreski „pauza” */
.odtw-graj i, .mini-graj i{width:0; height:0; border-style:solid; border-width:.55rem 0 .55rem .9rem; border-color:transparent transparent transparent var(--noc); margin-left:.2rem}
.gra .odtw-graj i, .gra .mini-graj i{width:.75rem; height:1rem; border:0; margin:0; background:linear-gradient(90deg,var(--noc) 35%,transparent 35% 65%,var(--noc) 65%)}
.odtw-czas{position:relative; display:flex; align-items:center; gap:.9rem; font-size:.75rem; color:var(--szept); font-variant-numeric:tabular-nums}
.odtw-pasek{flex:1; appearance:none; -webkit-appearance:none; height:3px; border-radius:2px; cursor:pointer; margin:0;
  background:linear-gradient(90deg,var(--zloto) var(--p,0%),rgba(245,236,220,.15) var(--p,0%))}
.odtw-pasek::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--zloto-jasne); box-shadow:0 0 10px rgba(214,160,74,.8)}
.odtw-pasek::-moz-range-thumb{width:12px; height:12px; border:0; border-radius:50%; background:var(--zloto-jasne)}
.odtw-lista{list-style:none; margin:0; padding:.4rem 0; border-top:1px solid rgba(214,160,74,.14); counter-reset:u;
  display:grid; grid-template-columns:1fr 1fr}
.odtw-lista li{counter-increment:u}
.odtw-lista button{
  all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:flex; align-items:baseline; gap:.9rem;
  padding:.7rem clamp(1.2rem,3vw,2.2rem); font-size:.95rem; color:var(--szept); transition:background .3s, color .3s;
}
.odtw-lista button::before{content:counter(u, decimal-leading-zero); font-size:.72rem; letter-spacing:.1em; color:var(--zloto); opacity:.7}
.odtw-lista button:hover{background:rgba(214,160,74,.06); color:var(--kosc)}
.odtw-lista button:focus-visible{outline:1px solid var(--zloto); outline-offset:-3px}
.odtw-lista .biezacy button{color:var(--zloto-jasne)}
.odtw-lista .czas{margin-left:auto; font-size:.75rem; opacity:.6; font-variant-numeric:tabular-nums}

/* Kompozycje: nuty na pięciolinii */
.kompozycje{max-width:none; overflow:hidden}
.partytura{position:relative; max-width:var(--max); margin:0 auto; padding-top:1rem}
.pieciolinia{position:absolute; left:0; right:0; top:1rem; width:100%; height:6.2rem}
.pieciolinia path{stroke:var(--ramka); stroke-width:1; vector-effect:non-scaling-stroke; fill:none;
  stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 3s var(--plynnie)}
.partytura.widoczna .pieciolinia path{stroke-dashoffset:0}
.dziela{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); gap:1rem; position:relative}
.dziela li{position:relative; padding-top:8.2rem}
/* nuta: główka na wysokości --h (0 = górna linia, 4 = dolna), laska w górę */
.dziela li::before{
  content:""; position:absolute; left:.2rem; top:calc(1rem + .45rem + var(--h) * .9rem - .4rem);
  width:1.15rem; height:.8rem; border-radius:50%; rotate:-20deg;
  background:var(--zloto-jasne); box-shadow:0 0 16px rgba(214,160,74,.8);
}
.dziela li::after{
  content:""; position:absolute; left:1.22rem; top:calc(1rem + .45rem + var(--h) * .9rem - 3.2rem);
  width:1px; height:3rem; background:var(--zloto-jasne);
}
.dziela li:nth-child(2){transition-delay:.12s} .dziela li:nth-child(3){transition-delay:.24s}
.dziela li:nth-child(4){transition-delay:.36s} .dziela li:nth-child(5){transition-delay:.48s}
.dziela li:nth-child(6){transition-delay:.6s}  .dziela li:nth-child(7){transition-delay:.72s}
.rok{display:block; font-size:.72rem; letter-spacing:.24em; color:var(--zloto); margin-bottom:.4rem}
.dziela h3{font-size:1.35rem; line-height:1.15; margin-bottom:.4rem}
.dziela p{font-size:.84rem; color:var(--szept)}
.karty-dwie{max-width:var(--max); margin:clamp(3rem,6vw,4.5rem) auto 0; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.karta{padding:clamp(1.4rem,3vw,2.2rem); border-radius:18px; background:linear-gradient(180deg,rgba(28,20,13,.7),rgba(18,13,9,.5)); box-shadow:inset 0 0 0 1px var(--ramka)}
.karta h3{font-size:1.6rem; margin-bottom:.6rem; color:var(--zloto-jasne)}
.karta p{color:var(--szept); margin:0}

/* Film i dyskografia */
.dwie-kolumny{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,6rem)}
.napisy{list-style:none; margin:0 0 1.6rem; padding:0}
.napisy li{padding:1rem 0; border-bottom:1px solid rgba(214,160,74,.14)}
.napisy h3{font-size:1.6rem}
.napisy p{margin:.2rem 0 0; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--zloto)}
.plyty{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.plyty li{display:flex; align-items:center; gap:1.2rem}
.plyty h3{font-size:1.3rem}
.plyty p{margin:.15rem 0 0; font-size:.8rem; letter-spacing:.14em; color:var(--szept)}
/* płyta: złote rowki, obraca się przy najechaniu */
.plyta{
  flex:none; width:3.6rem; height:3.6rem; border-radius:50%;
  background:
    radial-gradient(circle, var(--zloto-jasne) 0 9%, var(--noc) 9% 13%, transparent 13%),
    repeating-radial-gradient(circle, #2a1e12 0 2px, #1a120b 2px 4px);
  box-shadow:inset 0 0 0 1px var(--ramka), 0 0 20px rgba(214,160,74,.15);
  position:relative; transition:rotate 1.2s var(--plynnie);
}
.plyta::after{content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 30deg, transparent 0 15%, rgba(243,217,164,.25) 20%, transparent 26% 65%, rgba(243,217,164,.18) 70%, transparent 76%)}
.plyty li:hover .plyta{rotate:180deg}

/* Liczby */
.liczby{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,3rem); border-block:1px solid rgba(214,160,74,.14);
}
.liczba{text-align:center}
.liczba b{font-family:var(--szeryf); font-weight:300; font-size:clamp(3rem,6vw,4.8rem); line-height:1; font-variant-numeric:lining-nums}
.liczba span{font-family:var(--szeryf); font-size:clamp(1.8rem,3.4vw,2.8rem); color:var(--zloto); margin-left:.08em; vertical-align:.35em}
.liczba span.przed{margin:0 .08em 0 0}
.liczba p{margin:.6rem 0 0; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--szept)}

/* O artyście */
.o-artyscie{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(2.5rem,7vw,6rem); align-items:start}
.portret{margin:0; position:sticky; top:6rem; border-radius:18px; overflow:hidden; aspect-ratio:4/5}
.portret img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:sepia(.25) saturate(.9) contrast(1.05)}
.portret::after{content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(200deg, rgba(214,160,74,.18), transparent 45%);
  box-shadow:inset 0 0 0 1px rgba(214,160,74,.3), inset 0 -140px 120px -60px rgba(11,8,6,.75)}
.o-artyscie-tresc > p:not(.etykieta):not(.podtytul){color:var(--szept)}
.o-artyscie-tresc .podtytul{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--zloto-jasne); margin-top:-.4rem; margin-bottom:1.8rem}
.pelna-bio{margin-top:1.6rem; border-top:1px solid rgba(214,160,74,.18)}
.pelna-bio summary{
  cursor:pointer; list-style:none; padding:1rem 0; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--zloto-jasne);
}
.pelna-bio summary::-webkit-details-marker{display:none}
.pelna-bio summary::after{content:" +"; color:var(--zloto)}
.pelna-bio[open] summary::after{content:" −"}
.pelna-bio p{color:var(--szept); font-size:.98rem}

/* Kontakt: ciepłe zdjęcie w tle */
.kontakt{position:relative; min-height:90vh; display:flex; align-items:center; padding:clamp(5rem,12vw,9rem) clamp(1rem,7vw,7rem); overflow:hidden}
.kontakt-tlo{position:absolute; inset:0 0 0 auto; width:min(100%, 72rem); background:url(media/zdjecia/cieple.webp) 75% 30%/cover no-repeat;
  /* zdjęcie wtapia się w złote tło przezroczystością, a nie czarnym gradientem (inaczej byłaby czarna plama) */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 55%, #000 92%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 55%, #000 92%, transparent 100%), linear-gradient(0deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-composite:intersect}
.kontakt-tlo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,8,6,.55) 0%, rgba(11,8,6,.15) 70%, rgba(11,8,6,.3) 100%)}
.kontakt-tresc{position:relative; max-width:34rem}
.kontakt-tresc > p:not(.etykieta){color:var(--szept); font-size:1.1rem}
.kontakt-link{display:block; width:max-content; max-width:100%; font-family:var(--szeryf); font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.25; text-decoration:none; margin-top:.4rem; overflow-wrap:anywhere}

.stopka{text-align:center; padding:3rem 1rem 2.5rem; font-size:.84rem; color:var(--szept); border-top:1px solid rgba(214,160,74,.12)}
.stopka-imie{font-family:var(--szeryf); font-size:1.6rem; color:var(--kosc); margin-bottom:.2rem}
.stopka a{color:var(--zloto)}
.stopka .drobny{font-size:.74rem; opacity:.75; margin-top:.6rem}

/* Mały odtwarzacz */
.mini{
  position:fixed; right:clamp(.8rem,3vw,2rem); bottom:clamp(.8rem,3vw,2rem); z-index:60;
  display:flex; align-items:center; gap:.9rem; padding:.5rem .7rem .5rem .5rem; border-radius:999px; max-width:min(22rem, calc(100% - 1.6rem));
  background:rgba(18,13,9,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px var(--ramka), 0 20px 40px -20px #000;
  opacity:0; translate:0 20px; transition:opacity .5s var(--plynnie), translate .5s var(--plynnie);
}
.mini.widoczny{opacity:1; translate:0 0}
.mini-graj{width:2.4rem; height:2.4rem}
.mini-graj i{border-width:.4rem 0 .4rem .65rem}
.gra .mini-graj i{width:.6rem; height:.75rem}
.mini-tytul{margin:0; font-family:var(--szeryf); font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.mini-dalej{all:unset; cursor:pointer; font-size:1.4rem; line-height:1; color:var(--zloto); padding:0 .4rem}
.mini-dalej:focus-visible{outline:1px solid var(--zloto)}

/* ─── TABLET / TELEFON ─── */
@media (max-width:1100px){
  .menu{display:none}
}
@media (max-width:1000px){
  .dziela{grid-template-columns:1fr; max-width:30rem; margin-inline:auto; gap:0}
  .pieciolinia{display:none}
  .dziela li{padding:0 0 1.8rem 3.2rem; border-left:1px solid var(--ramka); margin-left:.6rem}
  .dziela li::before{left:-.6rem; top:.35rem}
  .dziela li::after{display:none}
  .karty-dwie, .dwie-kolumny, .o-artyscie{grid-template-columns:1fr}
  .portret{position:relative; top:0; max-width:26rem; width:100%; margin-inline:auto}
  .liczby{grid-template-columns:1fr 1fr; row-gap:2.4rem}
  .odtw-lista{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  .film{height:1050vh}
  .naglowek{gap:1rem}
  .marka-imie{font-size:1.25rem}
  .marka-rola{display:none}
  .dzwiek-napis{display:none}
  .naglowek-prawo{gap:.6rem}
  .film-welon{background:
    linear-gradient(0deg, rgba(11,8,6,.97) 0%, rgba(11,8,6,.86) 46%, rgba(11,8,6,.2) 76%, rgba(11,8,6,.5) 100%)}
  .rozdzial{top:auto; bottom:4rem; left:1.2rem; width:calc(100% - 3.4rem)}
  .rozdzial p{font-size:1rem}
  .tytul-glowny{font-size:clamp(2.6rem,12vw,3.6rem)}
  .wstep{font-size:1.02rem !important}
  .atuty li{padding-bottom:.55rem; font-size:.9rem; line-height:1.5}
  .motto{font-size:1.35rem !important}
  .film-postep{right:.7rem}
  .film-postep span{display:none}
  .film-wskazowka{display:none}
  .kontakt{min-height:auto; padding-top:60vw}
  .kontakt-tlo{background-position:62% 0; background-size:auto 70vw;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12vw, #000 38vw, transparent 72vw); -webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg, transparent 0, #000 12vw, #000 38vw, transparent 72vw); mask-composite:add}
  .kontakt-tlo::after{background:rgba(11,8,6,.2)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .odslon{opacity:1; transform:none; transition:none}
  .film-wskazowka i, .tytul-glowny em, .kontakt-link, .liczba b, .dzwiek-fale i{animation:none !important}
  .pieciolinia path{transition:none}
  .tlo-dolne::before, .tlo-dolne::after{animation:none}
}