/* KOVA v6 · ARKUSZ 001 · jeden plik dla index / film / agency */

/* 1. TOKENY */
:root{
  --paper:#ECEBE6;--ink:#0A0A0A;--ink-2:#4A4A46;--paper-2:#C9C8C2;--signal:#FF3B1F;
  --hair:rgba(10,10,10,.18);--hair-ink:rgba(236,235,230,.22);
  --g:16px;--m:24px;--max:1600px;
  --tick:450ms;--dwell:700ms;--pick:160ms;--hold:1800ms;--stagger:15ms;
  --bleed:max(24px,calc((100vw - 1600px) / 2 + 24px));
  --archivo:Archivo,Archivo-fb,"Arial Black",Impact,sans-serif;
  --inter:Inter,Inter-fb,Arial,sans-serif;
  --mono:Mono,Mono-fb,"Courier New",monospace;
}

/* 2. RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{overflow-x:clip;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;font-variant-numeric:tabular-nums}
body{font:400 17px/1.5 var(--inter);background:var(--paper);min-height:100dvh}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
sup{line-height:0}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ink :focus-visible{outline-color:var(--paper)}
[id]{scroll-margin-top:56px}
@view-transition{navigation:none}
::view-transition-group(*){animation-duration:180ms;animation-timing-function:steps(3)}

/* 3. TYPOGRAFIA */
.mono{font:400 13px/1.4 var(--mono);letter-spacing:0}
.mono-12,figcaption,.nota{font:400 12px/1.4 var(--mono)}
.caps{letter-spacing:.02em;text-transform:uppercase}
.archivo{font-family:var(--archivo);font-weight:400}
h1{font:600 40px/1.1 var(--inter);letter-spacing:-.02em;max-width:22ch}
h2{font:600 32px/1.1 var(--inter);letter-spacing:-.02em;max-width:26ch}
h3{font:600 24px/1.15 var(--inter);letter-spacing:-.01em;max-width:32ch}
.lead{font:400 20px/1.45 var(--inter)}
.body,p.body{max-width:65ch}
.motto{font:400 28px/1.2 var(--inter);letter-spacing:-.01em}
h1,h2,h3,.motto,.wrog,.lead{text-wrap:balance}
p.body,figcaption,.nota{text-wrap:pretty}
.nb{white-space:nowrap}
.en{color:var(--ink-2);max-width:60ch}
.kicker{color:var(--ink-2)}
.sekcja p+p{margin-top:12px}

/* 4. SIATKA */
.rama{max-width:var(--max);margin-inline:auto;padding-inline:var(--m)}
.siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:24px}
.c1-3{grid-column:1/4}.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}.c1-10{grid-column:1/11}.c1-12{grid-column:1/-1}
.c2-5{grid-column:2/6}.c2-6{grid-column:2/7}.c2-7{grid-column:2/8}.c2-8{grid-column:2/9}.c2-11{grid-column:2/12}.c3-12{grid-column:3/-1}.c4-12{grid-column:4/-1}
.c7-11{grid-column:7/12}.c7-12{grid-column:7/-1}.c8-11{grid-column:8/12}.c9-12{grid-column:9/-1}
.sekcja{padding-block:96px}
.sekcja+.sekcja{padding-top:0}
.od-2{padding-inline-start:calc(100% / 12)}
.hair{border-top:1px solid var(--hair)}
.ink{background:var(--ink);color:var(--paper)}
.ink .hair{border-color:var(--hair-ink)}
.ink .kicker,.ink .en,.ink figcaption,.ink .mono-12{color:var(--paper-2)}
.ink .sig{color:var(--signal)}

/* 5. BELKA + skip-link: assets/wspolne.css (jeden HTML na 4 stronach, v7). Stare reguły v6 usunięte. */

/* 6. LINKI · CTA · PODPISY */
.cta{display:inline-flex;align-items:center;height:48px;padding:0 24px;background:var(--signal);color:var(--ink);font:700 15px/1 var(--inter)}
.cta:hover,.cta:focus-visible{background:var(--ink);color:var(--paper)}
.link{display:inline-flex;align-items:center;min-height:44px;font:400 17px/1.3 var(--inter);text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover,.link:focus-visible{text-decoration:underline}
.link-mono{display:inline-flex;align-items:center;min-height:44px;font:400 13px/1.4 var(--mono)}
.link-mono:hover{text-decoration:underline;text-underline-offset:4px}
figcaption{color:var(--ink-2);margin-top:8px;max-width:60ch}
figcaption span{display:block}
.nota{color:var(--ink-2);max-width:70ch}
.ramka{outline:2px solid var(--signal);outline-offset:-2px}

/* 7. KADR · KARTA PRACY · PASEK */
.kadr{position:relative;aspect-ratio:3/2;overflow:clip;background:var(--ink)}
.kadr img,.kadr video{width:100%;height:100%;object-fit:cover}
.kadr.pion{aspect-ratio:3/4}.kadr.plakat{aspect-ratio:2/3}
.kadr.pasy video,.kadr.pasy img{object-fit:contain}
.kadr .odtworz{position:absolute;left:0;bottom:0;padding:0 16px;min-height:44px;background:var(--paper);color:var(--ink);font:400 12px/1 var(--mono)}
.kadr .odtworz:hover{background:var(--signal)}
.praca{display:block;color:inherit}
.praca .kadr{outline:0 solid var(--signal);outline-offset:-2px}
.praca .kadr.ramka{outline-width:2px}
.praca:hover .kadr,.praca:focus-visible .kadr{outline-width:2px}
.praca:hover .kadr.ramka+figcaption,.praca:focus-visible .kadr.ramka+figcaption{text-decoration:underline;text-underline-offset:4px}
.praca:focus-visible{outline:0}
.kadr.pasy:not(:has(video)){aspect-ratio:auto;background:none}
.kadr.pasy:not(:has(video)) img{object-fit:cover;height:auto}
.praca figcaption{margin-top:6px}
.pasek{display:grid;column-gap:var(--g);row-gap:16px}
.pasek-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pasek-10{grid-template-columns:repeat(10,minmax(0,1fr))}
.pasek-10 figcaption{font-size:12px}

/* 8. LUPA (ramka) */
.lupa{position:absolute;inset:0;border:2px solid var(--signal);pointer-events:none;z-index:3}
.lupa i{position:absolute;width:6px;height:6px;border:0 solid var(--signal)}
.lupa i:nth-child(1){top:-2px;left:-2px;border-width:4px 0 0 4px}
.lupa i:nth-child(2){top:-2px;right:-2px;border-width:4px 4px 0 0}
.lupa i:nth-child(3){bottom:-2px;right:-2px;border-width:0 4px 4px 0}
.lupa i:nth-child(4){bottom:-2px;left:-2px;border-width:0 0 4px 4px}
.lupa-swobodna{inset:auto;top:0;left:0;width:100px;height:67px}
.lupa-swobodna.w-ruchu{will-change:transform}

/* 9. SŁOWO CIĘTE · KLAMRA */
.slowo{--r:3.05;font:400 min(calc((100vw - 2 * var(--m)) / var(--r)),calc(1552px / var(--r)))/.8 var(--archivo);letter-spacing:-.02em;white-space:nowrap;position:relative;user-select:none}
.slowo sup{font:400 12px/1 var(--mono);letter-spacing:0;position:relative;top:-.62em;margin-left:.04em}
.slowo-gora{margin-top:-.22em}
.slowo-dol{margin-bottom:-.3em;margin-top:24px}
.slowo-film{--r:2.63}.slowo-agency{--r:4.64}
.slowo-film.slowo-gora,.slowo-agency.slowo-gora{margin-top:-.1em}
.slowo-film.slowo-dol,.slowo-agency.slowo-dol{margin-bottom:-.12em}
.klamra{background:var(--signal);color:var(--ink);overflow:clip;min-height:40vh;display:flex;flex-direction:column;justify-content:space-between;padding:24px var(--m) 0}
.klamra .mono{font-size:12px}

/* 10. STOPKA: assets/wspolne.css (footer.stopka, klasy stopka__*). */

/* 11. HERO · ARKUSZ (index) */
.hero{overflow:clip;min-height:calc(100dvh - 56px);padding-bottom:48px}
.hero .siatka{row-gap:12px;align-items:start}
.hero-tekst{grid-column:1/5;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:8px}
.hero-tekst h1{font-size:40px}
.hero-tekst .cta{margin-top:12px}
.arkusz-blok{grid-column:5/-1;grid-row:1/5;margin-inline-end:calc(-1 * var(--bleed));position:relative}
.arkusz{--atlas:url(assets/sheet/atlas-d.webp);position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;background:var(--ink);contain:layout paint}
html[data-arkusz=bw] .arkusz{--atlas:url(assets/sheet/atlas-d-bw.webp)}
.k{position:relative;display:block;aspect-ratio:3/2;min-height:44px;grid-column:calc(var(--ax) + 1);grid-row:calc(var(--ay) + 1);overflow:clip;background:var(--ink)}
.k.pion{aspect-ratio:auto;grid-row:calc(var(--ay) + 1) / span 2}
.k.pusta{background:var(--paper)}
.k.pusta .klatka{display:none}
.k.pusta::after{content:"S2 · w produkcji";white-space:nowrap;position:absolute;left:8px;bottom:8px;font:400 12px/1 var(--mono);color:var(--ink-2)}
.k .tag{position:absolute;left:0;bottom:0;z-index:1;padding:4px 8px;background:var(--paper);color:var(--ink);font:400 12px/1 var(--mono);letter-spacing:.02em}
.klatka{position:absolute;inset:0;background:var(--atlas) no-repeat;background-size:500% 400%;background-position:calc(var(--ax) * 100% / 4) calc(var(--ay) * 100% / 3)}
.pion .klatka{background-size:500% 200%;background-position:calc(var(--ax) * 100% / 4) 50%}
.k .kolor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.k:hover,.k:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.arkusz :focus-visible{outline-color:var(--signal)}
.k:focus-visible{z-index:2}
html.js .arkusz:not(.gotowy) .k{opacity:0}
.arkusz.gotowy .k{animation:cut 1ms steps(1) both;animation-delay:calc(var(--i) * var(--stagger))}
@keyframes cut{from{opacity:0}to{opacity:1}}
.wybor{position:relative;grid-area:1/1/3/3;z-index:2;background:var(--ink);margin:0}
.wybor img{width:100%;height:100%;object-fit:cover}
.wybor[hidden]{display:none}
.odtworz-arkusz{position:absolute;top:4px;right:4px;z-index:4;width:44px;height:44px;background:var(--paper);color:var(--ink);font:400 12px/1 var(--mono)}
.odtworz-arkusz:hover{background:var(--signal)}
.legenda{grid-column:1/5;grid-row:2;display:flex;flex-direction:column;gap:2px;color:var(--ink-2);font-size:12px;letter-spacing:.02em;margin-top:8px}
.legenda span{display:inline-flex;align-items:center;gap:8px;padding:4px 0}
.legenda span::before{content:"";width:8px;height:8px;border:1px solid var(--ink-2);flex:none}
.legenda span.on{color:var(--ink)}
.legenda span.on::before{background:var(--signal);border-color:var(--signal)}
.linia{grid-column:1/5;grid-row:3;font-size:12px;display:flex;flex-wrap:wrap;gap:0 8px}
.linia .m{display:none}
.linia .txt{color:var(--ink-2)}
.hero .nota{grid-column:1/-1;grid-row:5;margin-top:20px}
.kolumna-rm{display:none;grid-column:1/-1;grid-row:6;gap:24px;grid-template-columns:repeat(5,minmax(0,1fr))}
.kolumna-rm li{display:flex;flex-direction:column;gap:8px}
.kolumna-rm img{width:100%;aspect-ratio:3/2;object-fit:cover}
html[data-motion=off] .kolumna-rm{display:grid}

/* 12. SEKCJE index */
#zapis .siatka{align-items:start}
#zapis h2{margin-bottom:24px}
#arkusze .wiersz{padding-block:48px}
#arkusze .wiersz+.wiersz{border-top:1px solid var(--hair)}
#arkusze h3{margin:8px 0 24px}
#arkusze .link{margin-top:16px}
#archiwum{color:var(--paper);padding-block:96px}
#archiwum .siatka{row-gap:48px}
#archiwum .motto{margin-bottom:16px}
#archiwum .sig{font:400 13px/1.4 var(--mono);display:block;margin-bottom:32px}
#archiwum .body{margin-bottom:8px}
#archiwum .link{color:var(--paper)}
#archiwum h2{margin-bottom:24px}
.indeks{position:relative}
.indeks a{border-top:1px solid var(--hair-ink);display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 56px 72px 24px;gap:16px;align-items:center;min-height:48px;padding-block:6px;font:400 13px/1.4 var(--mono);color:var(--paper-2);position:relative}
.indeks li:last-child a{border-bottom:1px solid var(--hair-ink)}
.indeks .t{font:500 17px/1.3 var(--inter);color:var(--paper)}
.indeks a:hover .t,.indeks a:focus-visible .t{text-decoration:underline;text-underline-offset:4px}
.indeks .mini{display:none;position:absolute;left:calc(100% + 32px);top:50%;width:240px;height:160px;transform:translateY(-50%);object-fit:cover;z-index:1}
.indeks a:hover .mini,.indeks a:focus-visible .mini{display:block}
#archiwum .nota{grid-column:1/9;color:var(--paper-2)}
#marki{padding-block:48px;border-block:1px solid var(--hair)}
#marki p{margin-top:8px;max-width:none}
#poza-ekranem h3{margin-bottom:16px}
#poza-ekranem .link{margin-block:8px 16px}

/* 14. MEDIA */
@media (max-width:1023px){
  .siatka{grid-template-columns:repeat(6,minmax(0,1fr))}
  .c1-3{grid-column:1/3}.c1-5,.c1-6,.c1-7,.c1-8,.c1-10,.c2-5,.c2-6,.c2-7,.c2-8,.c2-11,.c3-12,.c4-12{grid-column:1/-1}
  .c7-11,.c7-12,.c8-11,.c9-12{grid-column:1/-1}
  .hero .siatka{row-gap:24px}
  .hero-tekst,.arkusz-blok,.legenda,.linia,.hero .nota,.kolumna-rm{grid-column:1/-1;grid-row:auto}
  .legenda{flex-direction:row;flex-wrap:wrap;gap:8px 20px;margin-top:0}
  .hero .nota{margin-top:0}
  .indeks .mini{display:none}
  .indeks a:hover .mini{display:none}
  #archiwum .nota{grid-column:1/-1}
  .kolumna-rm{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  :root{--m:16px}
  body{font-size:16px}
  h1,.hero-tekst h1{font-size:28px}h2{font-size:24px}h3{font-size:20px}.motto{font-size:20px}.lead{font-size:18px}
  [id]{scroll-margin-top:72px}
  .hero-tekst .cta{align-self:stretch}
  .sekcja{padding-block:48px}
  #archiwum{padding-block:48px}
  .od-2{padding-inline-start:var(--m)}
  .siatka{grid-template-columns:minmax(0,1fr)}
  .siatka>*{grid-column:1/-1}
  .hero{min-height:0}
  .arkusz-blok{margin-inline-end:0}
  .arkusz{--atlas:url(assets/sheet/atlas-m.webp);grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-arkusz=bw] .arkusz{--atlas:url(assets/sheet/atlas-m-bw.webp)}
  .k{display:none;grid-column:calc(var(--mx) + 1);grid-row:calc(var(--my) + 1)}
  .k.m{display:block}
  .k.pusta::after{content:"sezon 2"}
  .k.pion{grid-row:calc(var(--my) + 1) / span 2}
  .klatka{background-size:300% 400%;background-position:calc(var(--mx) * 100% / 2) calc(var(--my) * 100% / 3)}
  .pion .klatka{background-size:300% 200%;background-position:calc(var(--mx) * 100% / 2) 50%}
  .linia .d{display:none}.linia .m{display:inline}
  .kolumna-rm{grid-template-columns:1fr}
  html[data-motion=off] .arkusz-blok{display:none}
  .pasek{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--m));padding-inline:var(--m);gap:12px}
  .pasek::-webkit-scrollbar{display:none}
  .pasek .praca,.pasek>figure{flex:0 0 140px;scroll-snap-align:start}
  .pasek .pion-m{flex-basis:105px}
  .indeks a{grid-template-columns:40px minmax(0,1fr) 56px;padding-block:8px}
  .indeks .typ,.indeks .lin{display:none}
  .indeks .t{font-size:16px}
  .klamra{min-height:32vh}
}
@media (max-width:480px){
  .legenda{gap:4px 16px}
}

/* 15. REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html.js .arkusz:not(.gotowy) .k{opacity:1}
  .arkusz.gotowy .k{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
}
html[data-motion=off] .arkusz:not(.gotowy) .k{opacity:1}
html[data-motion=off] .arkusz.gotowy .k{animation:none}