, więc order nic */
/* tam nie zmieni — dlatego całość bierzemy z , nie z nakładki. */
@media(min-width:720px){
html body .watch{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
}
html body .watch .wcard{position:relative;display:flex;flex-direction:column;aspect-ratio:auto;background:none;overflow:visible}
html body .watch .wcard:hover{background:none}
html body .watch .wcard img{display:block;position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:1;filter:grayscale(1) brightness(.4) contrast(.95);transition:filter .32s ease}
html body .watch .wcard:hover img{filter:none}
html body .watch .wcard .vtile{position:absolute;left:0;top:0;right:0;bottom:auto;width:auto;aspect-ratio:auto;background:none;padding:16px;display:block;pointer-events:none}
html body .watch .wcard .vtile > span:not(.play){display:none}
html body .watch .wcard .vtile .play{display:block;border-left-color:var(--paper);transition:border-left-color .25s ease}
html body .watch .wcard:hover .vtile .play{border-left-color:var(--redL)}
html body .watch .wcard > div{display:flex;flex-direction:column;padding:13px 0 0;background:none}
html body .watch .wcard > div > span{order:1;display:block;font-family:var(--d);font-weight:600;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
html body .watch .wcard > div > b{order:2;display:block;margin-top:8px;font-family:var(--a);font-weight:800;text-transform:none;font-size:17px;line-height:1.18;letter-spacing:-.025em;word-spacing:.05em;color:var(--ink)}
html body .watch .wcard:hover > div > b{color:var(--red)}
html body .watch .wcard > div > p{order:3;display:block;margin:9px 0 0;font-family:var(--b);font-weight:400;font-size:14px;line-height:1.5;text-transform:none;letter-spacing:0;color:var(--mut)}
/* eyebrow bez h2 potrzebuje trochę więcej powietrza pod sobą */
html body .band-head:not(:has(h2)) > p{margin-top:18px}
/* --- marker play: czerwony na czarno-bialej miniaturze --- */
/* Domyslnie kafel jest czarno-bialy, wiec czerwien czyta sie jako jedyny
kolor w kadrze. Na hover miniatura wraca do koloru i trojkat ustepuje
jej miejsca — bialy, z cieniem, zeby nie zginal na jasnym kadrze. */
html body .watch .wcard .vtile .play{border-left-color:var(--redL);filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
html body .watch .wcard:hover .vtile .play,
html body .watch .wcard:focus-visible .vtile .play{border-left-color:var(--paper)}
/* --- dla-firm: nota o Agile Expat pod cytatem, nie pod lista --- */
html body .not .whycol{display:block;min-width:0}
html body .not .whycol .scope-note{margin:clamp(18px,2vw,26px) 0 0;max-width:none}
@media(max-width:719px){html body .not .whycol .scope-note{margin-top:22px}}
/* wcard text block: the kicker carried margin-top:auto from the old markup, which pushed shorter cards down inside the row */
html body .watch .wcard>div>span{margin-top:0}
/* firm page footer: NIP + pawn, matching the home footer */
html body[data-p="firm"] .foot p{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
html body[data-p="firm"] .foot-pawn{width:13px;height:19px;color:var(--redL);flex:0 0 auto;display:block}
html body[data-p="firm"] .foot .nip{color:#6E6E76}
/* firm lanes: subgrid, so the document box and the format line share rows across a pair */
@media(min-width:901px){
html body[data-p="firm"] .lanes{row-gap:0}
html body[data-p="firm"] .lanes>.lane{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:9px;align-content:start}
html body[data-p="firm"] .lanes>.lane:nth-child(n+3){margin-top:clamp(26px,3vw,38px)}
html body[data-p="firm"] .lanes>.lane p{flex:none}
html body[data-p="firm"] .lanes>.lane .doc{margin-top:0}
html body[data-p="firm"] .lanes>.lane .proof{margin-top:0}
html body[data-p="firm"] .lanes>.lane .ph{border:0;background:transparent;padding:0;min-height:0;box-shadow:none;visibility:hidden}
}
@media(max-width:900px){html body[data-p="firm"] .lanes>.lane .ph{display:none}}
/* firm page: source links get the home page treatment */
html body[data-p="firm"] .proof .src{display:block;margin-top:9px;font-family:var(--a);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:2px;width:-moz-fit-content;width:fit-content}
/* video cards: no shadow under the play mark or the overlay text */
html body .watch .wcard .vtile .play{filter:none}
html body .watch .wcard .vtile b,html body .watch .wcard .vtile span{text-shadow:none}
/* source links on Russian hosts: note that they need a VPN from here */
html body .proof .src{display:inline-block}
html body .proof .vpn,html body .stat .vpn{display:inline;margin-left:10px;font-family:var(--d);text-transform:uppercase;font-size:9.5px;letter-spacing:.11em;color:var(--faint);white-space:nowrap}
/* Liczby + granice in one section, two columns: figures left, the lane's
edge right. The split carries the 1120px inset so the stat rows can sit
flush against their own column instead of inheriting the full-width
padding they used when they spanned the band. */
html body #liczby .numsplit,html body #numbers .numsplit{max-width:1120px;margin:0 auto;padding:0 clamp(24px,4vw,40px);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.86fr);gap:clamp(28px,4vw,66px);align-items:start}
html body #liczby .numcol,html body #numbers .numcol,html body #liczby .limcol,html body #numbers .limcol{min-width:0}
html body #liczby .numsplit .stat,html body #numbers .numsplit .stat{max-width:none;margin:0;padding-left:0;padding-right:0;background-size:100% 1px}
html body #liczby .numsplit .stat:last-child,html body #numbers .numsplit .stat:last-child{background-size:100% 2px}
html body #liczby .numsplit .stat p,html body #numbers .numsplit .stat p{max-width:none}
html body #liczby .limcol > b,html body #numbers .limcol > b{display:flex;align-items:center;gap:13px;font-family:var(--a);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin:0 0 15px}
html body #liczby .limcol > b::after,html body #numbers .limcol > b::after{content:"";flex:1 1 auto;height:2px;background:var(--ink)}
html body #liczby .limcol ul,html body #numbers .limcol ul{list-style:none;margin:0;padding:0}
html body #liczby .limcol li,html body #numbers .limcol li{font-family:var(--a);font-weight:600;font-size:14.5px;line-height:1.3;letter-spacing:-.015em;text-transform:none;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--rule);margin:0}
html body #liczby .limcol li:last-child,html body #numbers .limcol li:last-child{border-bottom:2px solid var(--ink)}
html body #liczby .limcol .why,html body #numbers .limcol .why{margin:clamp(16px,1.9vw,24px) 0 0;border-left:3px solid var(--red);padding-left:15px;color:var(--mut);font-size:14.5px;line-height:1.6}
@media(max-width:899px){
html body #liczby .numsplit,html body #numbers .numsplit{grid-template-columns:1fr;gap:clamp(30px,5vw,42px)}
html body #liczby .numsplit .stat:last-child,html body #numbers .numsplit .stat:last-child{background-image:none}
html body #liczby .limcol .why,html body #numbers .limcol .why{font-size:15px;max-width:62ch}
}
html body #numbers > .shell{max-width:none;padding-left:0;padding-right:0}
html body #numbers .band-head{max-width:1120px;margin-left:auto;margin-right:auto}
html body #numbers .band-head{padding-left:clamp(24px,4vw,40px);padding-right:clamp(24px,4vw,40px)}
/* --- Na biezaco: cards built from the X feed at build time --- */
html body .xband .shell{max-width:1120px;margin:0 auto;padding:0 clamp(24px,4vw,40px);box-sizing:border-box}
html body .xband .xhead{display:flex;align-items:center;gap:13px;margin:0 0 20px}
html body .xband .xhead > span{display:flex;align-items:center;gap:13px;flex:1 1 auto;min-width:0;font-family:var(--a);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}
html body .xband .xhead > span::after{content:"";flex:1 1 auto;height:2px;background:var(--ink)}
html body .xband .xhead > a{flex:0 0 auto;font-family:var(--a);font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px}
html body .xband .xrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
html body .xband .xc{display:block;text-decoration:none;color:inherit;border:0;min-width:0}
html body .xband .xc .xcov{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:0 0 11px;filter:grayscale(1) contrast(1.04);transition:filter .35s ease}
html body .xband .xc:hover .xcov{filter:none}
html body .xband .xc .xmeta{display:block;font-family:var(--a);font-weight:700;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin:0 0 7px}
html body .xband .xc h3{font-family:var(--a);font-weight:700;font-size:16px;line-height:1.16;letter-spacing:-.02em;text-transform:none;color:var(--ink);margin:0 0 6px}
html body .xband .xc p{font-family:var(--b);font-size:13.5px;line-height:1.45;color:var(--mut);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .xband .xc:hover h3{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px;text-decoration-thickness:2px}
@media(max-width:1000px){html body .xband .xrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media(max-width:620px){html body .xband .xrow{grid-template-columns:1fr;gap:26px}
html body .xband .xhead > a{font-size:10.5px}}
/* dark variant -- add class "dark" to the section to switch */
html body .xband.dark .xhead > span::after{background:var(--paper)}
html body .xband.dark .xhead > span{color:var(--redL)}
html body .xband.dark .xhead > a{color:var(--paper);border-bottom-color:var(--redL)}
html body .xband.dark .xc h3{color:var(--paper)}
html body .xband.dark .xc p{color:#A8A8B0}
html body .xband.dark .xc .xmeta{color:#8A8A96}
html body .xband.dark .xc .xcov{filter:grayscale(1) brightness(.78) contrast(1.02)}
/* --- one row per block: the rhythm matches the Na biezaco cards --- */
html body .watch{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px}
html body .watch .wcard p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
html body .talks{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
html body .talks > .talk:nth-child(1),html body .talks > .talk:nth-child(2){grid-column:span 2}
@media(max-width:1000px){
html body .watch{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
html body .talks{grid-template-columns:repeat(2,minmax(0,1fr))}
html body .talks > .talk:nth-child(1),html body .talks > .talk:nth-child(2){grid-column:span 2}
}
@media(max-width:620px){
html body .watch,html body .talks{grid-template-columns:1fr}
html body .talks > .talk:nth-child(1),html body .talks > .talk:nth-child(2){grid-column:auto}
}
/* MATERIAL GOTOWY takes the .btn colours exactly (size and form unchanged) */
html body .talk .fmt b{background:var(--red);color:var(--paper);border-color:var(--red)}
/* --- Panele i konferencje: one delivered panel, photo beside the text --- */
html body .panels .pan{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:center}
html body .panels .pan .tph{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .35s ease;margin:0}
html body .panels .pan:hover .tph{filter:none}
html body .panels .panbody{min-width:0;display:flex;flex-direction:column}
html body .panels .pan h3{font-family:var(--a);font-weight:800;font-size:clamp(19px,2vw,26px);line-height:1.1;letter-spacing:-.03em;text-transform:none;color:var(--ink);margin:0 0 10px}
html body .panels .pan p{font-family:var(--b);font-size:15px;line-height:1.55;color:var(--mut);margin:0}
html body .panels .pan .fmt{margin-top:16px}
@media(max-width:860px){html body .panels .pan{grid-template-columns:1fr;gap:16px}}
/* the dark .xband cover rule outranks the shared hover reset -- restate it */
html body .xband.dark .xc:hover .xcov{filter:none}
/* the scrim stays off on hover too -- the older sheets re-apply it there
with :hover specificity the resting override cannot reach */
html body .watch .wcard:hover .vtile,
html body .watch .wcard:focus-visible .vtile,
html body .watch .wcard:active .vtile{background:none}
/* .talks used its own var(--rule) fill as hairlines through a 1px gap;
at the four-across row gap that fill becomes a grey slab */
/* the accent: the one topic with a published text behind it */
/* the panel card is standalone -- drop .talk's inset so it lines up with
the headings and the video cards instead of sitting 20px right of them */
html body .panels .pan{padding:0;background:none;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);align-items:start}
html body .panels .pangal{min-width:0}
html body .panels .panthumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
/* Krynica keeps its colour -- the only new hue on the page */
html body .panels .pangal img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;margin:0;filter:none}
html body .panels .pan:hover .tph{filter:none}
html body .panels .tvenue a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
html body .panels .tvenue a:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:860px){html body .panels .panthumbs{gap:8px}}
/* the lead frame keeps its colour too -- .pangal img lost on class count
to the earlier .pan .tph greyscale rule */
html body .panels .pangal .tph,
html body .panels .pan .tph{filter:none}
/* the hairlines between topic cards came from the container fill showing
through the gap; killing the fill killed the dividers too. Keep the
fill, make the gap 1px so it draws lines instead of a slab, and let the
card padding do the spacing. */
/* the panel card now carries two paragraphs */
html body .panels .pan p + p{margin-top:11px}
html body .panels .pan p{font-size:14.5px;line-height:1.55}
/* single frame again -- the gallery rules no longer apply */
html body .panels .panthumbs{display:none}
/* two cards left: .talks takes .watch's grammar -- transparent container,
whitespace gaps, no card padding. The photo bleed is reset with it. */
html body .talks{background:none;gap:30px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
html body .talks > .talk:nth-child(1),html body .talks > .talk:nth-child(2){grid-column:auto}
html body .talks > .talk{background:none;padding:0}
html body .talks > .talk .tph{width:100%;margin:0 0 14px}
@media(max-width:620px){html body .talks{grid-template-columns:1fr}}
html body .talkoffer{margin:clamp(24px,2.6vw,32px) 0 0;font-family:var(--b);font-size:15.5px;line-height:1.6;color:var(--ink)}
html body .talkoffer a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px}
html body .talkoffer b{font-family:var(--a);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-size:11.5px;color:var(--mut);display:block;margin-top:10px}