/* parrhēsia.pictures — ten sam system co janswietlik.com, rozpoznawalny po logo i kropkach RGB. */
.p-hero { padding-block: clamp(48px, 12vh, 140px) clamp(40px, 8vh, 96px); display: grid; gap: clamp(28px, 4vw, 56px); }
.p-hero .logo { width: min(100%, 1180px); }
.p-hero .sub { font-size: clamp(1.8rem, 4.2vw, 3.9rem); line-height: 1.06; letter-spacing: -.04em; font-weight: 350; max-width: 22ch; }
.p-hero .lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); align-items: baseline; }
.p-hero .lead h1 { font-size: var(--t-h1); line-height: 1; letter-spacing: -.045em; font-weight: 350; }
.p-hero .lead p { font-size: var(--t-lead); line-height: 1.5; max-width: 34em; }
.p-sec { padding-block: 0; }
.p-sec .sl { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: clamp(16px, 2.4vw, 28px); }
.status { display: inline-flex; align-items: baseline; }
.status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--r); margin-right: .55em; align-self: center; }
.links { display: flex; gap: 6px 18px; flex-wrap: wrap; }
@media (max-width: 860px) { .p-hero .lead { grid-template-columns: 1fr; } .p-hero .lead > span { display: none; } }

/* biały pas: dlaczego expose jest osobno */
.apart { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(20px, 4vw, 64px); padding-block: clamp(48px, 8vw, 112px); }
.apart h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.03em; font-weight: 400; margin: 0; }
.apart .body { display: grid; gap: 1em; font-size: var(--t-lead); line-height: 1.5; max-width: 36em; }
.apart p { margin: 0; }
@media (max-width: 860px) { .apart { grid-template-columns: 1fr; } }

/* expose — expose.partners: czerń z dryfującą poświatą w barwach pryzmatu, Sora, złota linia, DM Serif Display */
.expose { position: relative; overflow: hidden; isolation: isolate; background: #000; color: #e0e0ec; padding-block: clamp(64px, 10vw, 140px); }
.expose::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 600px 400px at 40% 35%, rgba(65,96,160,.28) 0%, transparent 70%), radial-gradient(ellipse 300px 500px at 75% 45%, rgba(3,144,13,.15) 0%, transparent 70%), radial-gradient(ellipse 400px 300px at 50% 70%, rgba(253,200,72,.12) 0%, transparent 70%), radial-gradient(ellipse 300px 400px at 30% 55%, rgba(224,40,32,.1) 0%, transparent 70%);
  animation: x-drift 20s ease-in-out infinite alternate; }
@keyframes x-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2%, -1%) scale(1.03); } 100% { transform: translate(-1%, 2%) scale(.98); } }
.expose .in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(20px, 4vw, 64px); align-items: center; }
.expose h2 { margin: 0; }
.expose .xlogo { width: min(100%, 460px); }
.expose .kick { margin-top: 14px; font-family: "Sora", var(--sans); font-weight: 300; font-size: clamp(.8rem, 1.3vw, 1rem); letter-spacing: .45em; text-transform: uppercase; color: #aaaabc; }
.expose .div { width: min(260px, 70%); height: 1px; margin: 28px 0; background: linear-gradient(90deg, transparent, #fdc848, transparent); }
.expose .k { font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.1rem, 1.8vw, 1.4rem); line-height: 1.4; color: #aaaabc; max-width: 22em; }
.expose p.t { font-size: var(--t-lead); line-height: 1.5; max-width: 36em; color: #e0e0ec; }
.expose .body { display: grid; gap: 20px; align-content: start; }
.expose .foot { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; font-family: "JetBrains Mono", var(--mono); font-size: .78rem; letter-spacing: .04em; }
.expose .status { color: #888890; }
.expose .status::before { background: #fdc848; }
.expose .u { color: #f5f5ff; text-decoration-color: #fdc848; }
@media (max-width: 860px) { .expose .in { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .expose::before { animation: none; } }

.p-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(20px, 4vw, 64px); padding-block: clamp(48px, 8vw, 112px); }
.p-contact h2 { font-size: var(--t-h2); letter-spacing: -.03em; }
.p-contact .body { display: grid; gap: 14px; }
@media (max-width: 860px) { .p-contact { grid-template-columns: 1fr; } }

/* ---------- projekty: każdy to pełny pas w barwach, krojach i grafikach z jego własnej strony ---------- */
.bands { display: grid; }
.band { position: relative; overflow: hidden; isolation: isolate; color: var(--fg); padding-block: clamp(56px, 9vw, 128px); }
.band .in { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(20px, 4vw, 64px); align-items: center; }
.band h2 { margin: 0; font-weight: 400; }
.band .body { display: grid; gap: 18px; align-content: start; }
.band .fmt { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--bm); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.band .fmt span + span::before { content: "·"; margin: 0 .7em; color: var(--fg-2); }
.band .log { font-size: var(--t-lead); line-height: 1.5; max-width: 36em; }
.band .credits { font-size: .92rem; }
.band .credits dt { color: var(--fg-2); }
.band .foot { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; font-family: var(--bm); font-size: .78rem; letter-spacing: .04em; }
.band .status { color: var(--fg-2); }
.band .status::before { background: var(--acc); }
.band a.u { color: var(--fg); text-decoration-color: var(--acc); }
.band .tag { margin-top: 18px; color: var(--fg-2); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.3; max-width: 26ch; }
@media (max-width: 860px) { .band .in { grid-template-columns: 1fr; } }

/* what the f*ck is going on — wtfseries.com: czerń, szum telewizyjny, obracający się chromowy krąg, chromowy tytuł */
.b-wtfigo { background: #000; --fg: #f5f4f2; --fg-2: rgba(245,244,242,.65); --acc: #00f0ff; --bm: "JetBrains Mono", ui-monospace, monospace; }
.b-wtfigo .noise { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .72; pointer-events: none; }
.b-wtfigo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.7) 100%), radial-gradient(ellipse 60% 90% at 24% 50%, rgba(0,0,0,.4) 0%, rgba(0,0,0,.85) 100%); }
.b-wtfigo .emblem { position: relative; width: clamp(200px, 28vw, 440px); aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; }
.b-wtfigo .ring { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: wtf-spin 20s linear infinite; }
.b-wtfigo .emblem h2 { position: relative; width: 130%; max-width: 92vw; }
.b-wtfigo .emblem h2 img { display: block; width: 100%; height: auto; }
@keyframes wtf-spin { to { transform: rotate(360deg); } }

/* Prosecuting the Powerful — ptpseries.com i okładka książki: kremowy papier, Russo One, pomarańcz, taśmy w czterech farbach */
.b-prosecuting-the-powerful { background: #F2EEE6; --fg: #151515; --fg-2: #5B5850; --acc: #E5502A; --bm: "IBM Plex Mono", ui-monospace, monospace; }
.b-prosecuting-the-powerful::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(21,21,21,.12) 1.2px, transparent 1.4px); background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 0 32%, transparent 58%); mask-image: linear-gradient(90deg, #000 0 32%, transparent 58%); }
.b-prosecuting-the-powerful .in { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2.3fr); }
.b-prosecuting-the-powerful h2 { font-family: "Russo One", "Arial Black", Impact, sans-serif; text-transform: uppercase; line-height: .95; letter-spacing: .01em; font-size: clamp(2.3rem, 5vw, 4.9rem); }
.b-prosecuting-the-powerful h2 .o { color: #E5502A; }
.b-prosecuting-the-powerful .tag { color: #151515; font-weight: 700; letter-spacing: -.01em; }
.b-prosecuting-the-powerful .fmt { gap: 8px; letter-spacing: .05em; font-weight: 600; color: #151515; }
.b-prosecuting-the-powerful .fmt span { padding: 4px 10px; background: #4C8FD6; transform: rotate(-1.5deg); }
.b-prosecuting-the-powerful .fmt span:nth-child(2) { background: #F2B843; transform: rotate(1.2deg); }
.b-prosecuting-the-powerful .fmt span:nth-child(3) { background: #58B27A; }
.b-prosecuting-the-powerful .fmt span + span::before { content: none; }
.b-prosecuting-the-powerful .cover { margin: 0; justify-self: end; width: 100%; max-width: 240px; }
.b-prosecuting-the-powerful .cover img { display: block; width: 100%; height: auto; border: 1px solid #CFC8BB; box-shadow: 10px 12px 0 #151515; }
@media (max-width: 1100px) {
  .b-prosecuting-the-powerful .in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .b-prosecuting-the-powerful .cover { grid-column: 1; grid-row: 2; justify-self: start; max-width: 200px; }
  .b-prosecuting-the-powerful .body { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 860px) {
  .b-prosecuting-the-powerful .in { grid-template-columns: 1fr; }
  .b-prosecuting-the-powerful .cover, .b-prosecuting-the-powerful .body { grid-column: auto; grid-row: auto; }
  .b-prosecuting-the-powerful .cover { order: 1; max-width: 180px; } .b-prosecuting-the-powerful .body { order: 2; }
}

/* Mystery of a Lie — mystery-lie.com: granat, oko, koncentryczne kręgi op-art, Space Grotesk, miętowe LIE */
.b-mystery-of-a-lie { background: #0F1A35; --fg: #F2EFE8; --fg-2: #C8C4BB; --acc: #5DD4B0; --bm: "JetBrains Mono", ui-monospace, monospace; }
.b-mystery-of-a-lie .bg { position: absolute; inset: 0; z-index: 0; }
.b-mystery-of-a-lie .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block; }
.b-mystery-of-a-lie .bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(15,26,53,.6) 0%, rgba(15,26,53,.92) 60%, rgba(15,26,53,.98) 100%); }
.b-mystery-of-a-lie .op { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.b-mystery-of-a-lie .op::before, .b-mystery-of-a-lie .op::after { content: ""; position: absolute; inset: -5%; background-size: cover; background-position: center; will-change: transform; }
.b-mystery-of-a-lie .op::before { opacity: .23; animation: ml-pulse 22s ease-in-out infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='none' stroke='%237DD9F0' stroke-width='1.1' opacity='0.7'><circle cx='240' cy='300' r='22'/><circle cx='240' cy='300' r='44'/><circle cx='240' cy='300' r='66'/><circle cx='240' cy='300' r='88'/><circle cx='240' cy='300' r='110'/><circle cx='240' cy='300' r='132'/><circle cx='240' cy='300' r='154'/><circle cx='240' cy='300' r='176'/><circle cx='240' cy='300' r='198'/><circle cx='240' cy='300' r='220'/><circle cx='240' cy='300' r='242'/><circle cx='240' cy='300' r='264'/><circle cx='240' cy='300' r='286'/><circle cx='240' cy='300' r='308'/><circle cx='240' cy='300' r='330'/><circle cx='240' cy='300' r='352'/><circle cx='240' cy='300' r='374'/><circle cx='240' cy='300' r='396'/></g></svg>"); }
.b-mystery-of-a-lie .op::after { opacity: .2; animation: ml-pulse-r 18s ease-in-out infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='none' stroke='%235DD4B0' stroke-width='1.1' opacity='0.7'><circle cx='576' cy='330' r='22'/><circle cx='576' cy='330' r='44'/><circle cx='576' cy='330' r='66'/><circle cx='576' cy='330' r='88'/><circle cx='576' cy='330' r='110'/><circle cx='576' cy='330' r='132'/><circle cx='576' cy='330' r='154'/><circle cx='576' cy='330' r='176'/><circle cx='576' cy='330' r='198'/><circle cx='576' cy='330' r='220'/><circle cx='576' cy='330' r='242'/><circle cx='576' cy='330' r='264'/><circle cx='576' cy='330' r='286'/><circle cx='576' cy='330' r='308'/><circle cx='576' cy='330' r='330'/><circle cx='576' cy='330' r='352'/><circle cx='576' cy='330' r='374'/><circle cx='576' cy='330' r='396'/></g></svg>"); }
.b-mystery-of-a-lie::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(45,143,224,.08), transparent 50%, rgba(15,26,53,.15)); mix-blend-mode: overlay; }
.b-mystery-of-a-lie h2 { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500; text-transform: uppercase; line-height: 1; letter-spacing: -.025em; font-size: clamp(2.5rem, 5.6vw, 5.5rem); text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.b-mystery-of-a-lie h2 em { font-style: normal; color: #5DD4B0; }
.b-mystery-of-a-lie .fmt span + span::before { color: #C8C4BB; }
@keyframes ml-pulse { 0%, 100% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.05) translate(1.5%, 0); } }
@keyframes ml-pulse-r { 0%, 100% { transform: scale(1.05) translate(0, 0); } 50% { transform: scale(1) translate(-1.5%, 0); } }
@media (max-width: 860px) { .b-mystery-of-a-lie .bg::after { background: linear-gradient(180deg, rgba(15,26,53,.7) 0%, rgba(15,26,53,.85) 30%, rgba(15,26,53,.92) 60%, rgba(15,26,53,.96) 100%); } }

/* The Smarter, the Dumber — ze strony filmu: Gombrowicz przed lustrem, odbicie jako symulacja AI; Big Shoulders + Bodoni, ochra, Courier */
.b-the-smarter-the-dumber { background: #000; --fg: #efe7d6; --fg-2: #a59b89; --acc: #e9a72d; --bm: "Courier Prime", ui-monospace, monospace; padding-block: 0; }
.b-the-smarter-the-dumber::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.b-the-smarter-the-dumber .ph { position: absolute; top: 0; bottom: 0; left: 0; width: 56%; z-index: 0; }
.b-the-smarter-the-dumber .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.b-the-smarter-the-dumber .ph .sw { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(../img/smarter-mirror-mask.png) 30% 40% / cover no-repeat; mask: url(../img/smarter-mirror-mask.png) 30% 40% / cover no-repeat; }
/* odbłysk: szeroki, powolny, z długim wygaszaniem od góry i od dołu */
.b-the-smarter-the-dumber .ph .sw::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 80%; will-change: transform; animation: sm-sweep 18s linear infinite;
  background: linear-gradient(180deg, rgba(160,240,248,0) 0%, rgba(160,240,248,.02) 12%, rgba(160,240,248,.07) 24%, rgba(165,242,249,.2) 35%, rgba(172,245,250,.34) 44%, rgba(185,248,252,.42) 50%, rgba(172,245,250,.34) 56%, rgba(165,242,249,.2) 65%, rgba(160,240,248,.07) 76%, rgba(160,240,248,.02) 88%, rgba(160,240,248,0) 100%); }
.b-the-smarter-the-dumber .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 45%, #000 100%), linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 45%); }
@keyframes sm-sweep { from { transform: translateY(-100%); } to { transform: translateY(125%); } }
.b-the-smarter-the-dumber .in { min-height: clamp(520px, 62vh, 700px); padding-block: clamp(40px, 6vw, 80px); }
.b-the-smarter-the-dumber .art { align-self: end; }
.b-the-smarter-the-dumber h2 { line-height: .84; }
.b-the-smarter-the-dumber h2 .a { display: block; font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(2.8rem, 6vw, 5.6rem); letter-spacing: -.005em; color: #efe7d6; }
.b-the-smarter-the-dumber h2 .b { display: block; font-family: "Bodoni Moda", Georgia, serif; font-style: italic; font-weight: 500; color: #e9a72d; font-size: clamp(2.4rem, 5vw, 4.7rem); margin-top: -.06em; padding-left: .35em; }
.b-the-smarter-the-dumber .fmt { color: #e9a72d; }
@media (max-width: 860px) {
  .b-the-smarter-the-dumber .ph { width: 100%; bottom: auto; height: min(96vw, 520px); }
  .b-the-smarter-the-dumber .ph::after { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,0) 60%); }
  .b-the-smarter-the-dumber .in { min-height: 0; padding-top: min(62vw, 330px); }
}

@media (prefers-reduced-motion: reduce) { .b-wtfigo .ring, .b-mystery-of-a-lie .op::before, .b-mystery-of-a-lie .op::after, .b-the-smarter-the-dumber .ph .sw::before { animation: none; transform: translateY(20%); } }
@media (max-width: 860px) {
  .b-wtfigo::before { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.86) 46%, rgba(0,0,0,.9) 100%); }
  .b-wtfigo .emblem { width: min(64vw, 300px); }
}

/* cały pas jest linkiem do strony projektu; linki w tekście zostają klikalne */
.linked .hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.linked .in { pointer-events: none; }
.linked .in a { pointer-events: auto; }
.linked:hover .art, .expose.linked:hover .xlogo { transform: scale(1.015); }
.band .art, .expose .xlogo { transition: transform .5s cubic-bezier(.2,.8,.2,1); }

/* tytuły nie przylegają do lewej krawędzi: wyśrodkowane w swojej kolumnie */
.band .art { justify-self: center; width: fit-content; max-width: 100%; }
.expose .in > div:first-child { justify-self: center; width: min(100%, 460px); }
@media (max-width: 860px) { .band .art { justify-self: start; padding-left: clamp(12px, 5vw, 32px); } .expose .in > div:first-child { justify-self: start; padding-left: clamp(12px, 5vw, 32px); } .apart > span { display: none; } }
@media (prefers-reduced-motion: reduce) { .band .art, .expose .xlogo { transition: none; } }
.band .art { justify-self: start; padding-left: clamp(20px, 5.5vw, 104px); }
.b-wtfigo .art { justify-self: center; padding-left: clamp(20px, 3vw, 48px); }
.expose .in > div:first-child { justify-self: start; padding-left: clamp(20px, 5.5vw, 104px); width: min(100%, 564px); }
.b-prosecuting-the-powerful h2 { font-size: clamp(2.2rem, 4.1vw, 4.2rem); }
.b-mystery-of-a-lie h2 { font-size: clamp(2.4rem, 4.8vw, 4.9rem); }
.b-the-smarter-the-dumber h2 { font-size: clamp(2.6rem, 5.2vw, 5.2rem); }
/* mini logo w nagłówku: kreska nad trzema kropkami */
.hd .logo.mini { display: inline-flex; align-self: center; color: var(--ink); }
.hd .logo.mini svg { display: block; width: 56px; height: auto; }
/* logo expose w menu */
.hd .nav .xn { display: inline-flex; align-items: center; }
.hd .nav .xn img { height: 1.45em; width: auto; display: block; opacity: .85; transition: opacity .2s ease; }
.hd .nav .xn:hover img { opacity: 1; }

/* wszystkie pasy (projekty i expose) tej samej wysokości: wyrównuje p.js, treść wyśrodkowana w pionie */
.band, .expose { display: flex; flex-direction: column; justify-content: center; }
.band > .in, .expose > .in { width: 100%; }
@media (min-width: 861px) {
  .b-the-smarter-the-dumber .in { flex: 1; min-height: 0; }
}
/* logotypy w tekście: expose i Jan Świetlik (świetlik nad S) */
.xw { display: inline-block; height: 1.15em; width: auto; vertical-align: -.24em; margin: 0 .05em; }
.jn { color: inherit; text-decoration: none; }
.jn .jlogo { white-space: nowrap; font-weight: 500; letter-spacing: -.01em; }
.jn:hover .jlogo { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ft .jn .jlogo { font-family: var(--sans); }
.band .jn, .expose .jn { color: var(--fg, inherit); }
.band .credits .jlogo { font-weight: 400; }

/* standard dla wszystkich pasów: ten sam krój i rozmiar nagłówka (format) i stopki (status, linki); większe opisy, mniej pustego miejsca */
.band { padding-block: clamp(40px, 5.5vw, 84px); }
.band .log { font-size: clamp(1.2rem, 1.62vw, 1.55rem); line-height: 1.45; max-width: 34em; }
.band .credits { font-size: clamp(.92rem, 1.05vw, 1.02rem); }
.band .fmt { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; letter-spacing: .1em; }
.band .foot { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .8rem; letter-spacing: .04em; }
.b-prosecuting-the-powerful .fmt { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; }
@media (min-width: 861px) {
  .b-the-smarter-the-dumber { padding-block: 0; }
  .b-the-smarter-the-dumber .in { min-height: 0; padding-block: clamp(40px, 5.5vw, 84px); }
}
.b-wtfigo .emblem { width: clamp(200px, 22vw, 360px); }
.expose { padding-block: clamp(40px, 5.5vw, 84px); }
.expose p.t { font-size: clamp(1.2rem, 1.62vw, 1.55rem); line-height: 1.45; max-width: 34em; } .expose .foot { font-size: .8rem; }

/* pierwszy ekran: cały ekran, treść na środku, strzałka w dół */
.p-hero { position: relative; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); align-content: center; padding-block: clamp(32px, 6vh, 72px) clamp(96px, 14vh, 140px); }
.p-hero .down { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.p-hero .down i { font-style: normal; font-size: 1.3rem; letter-spacing: 0; color: var(--ink); animation: dn 2.2s ease-in-out infinite; }
.p-hero .down:hover { color: var(--ink); }
@keyframes dn { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }

/* paski powiększają się po najechaniu: tło przybliża się wolno, treść odrobinę */
.band > .noise, .band > .bg, .band > .ph, .band > .op { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 50%; }
.band:hover > .noise, .band:hover > .bg, .band:hover > .ph, .band:hover > .op { transform: scale(1.06); }
.band .in, .expose .in { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.band:hover .in, .expose:hover .in { transform: scale(1.02); }
.b-prosecuting-the-powerful::before { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.b-prosecuting-the-powerful:hover::before { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .band:hover > .noise, .band:hover > .bg, .band:hover > .ph, .band:hover > .op, .band:hover .in, .expose:hover .in, .b-prosecuting-the-powerful:hover::before { transform: none; }
  .p-hero .down i { animation: none; }
}
/* pierwszy ekran mieści się w wysokości okna: logo i hasło skalują się też do wysokości */
@media (min-width: 861px) {
  .p-hero { padding-block: clamp(40px, 9vh, 110px) clamp(96px, 13vh, 130px); gap: clamp(22px, 4.4vh, 52px); }
  .p-hero .logo { width: min(100%, 1180px, 118vh); }
  .p-hero .sub { font-size: clamp(1.6rem, min(4.2vw, 5.6vh), 3.9rem); }
}
/* logo i hasło nieco niżej na pierwszym ekranie */
@media (min-width: 861px) { .p-hero { padding-block: clamp(64px, 15vh, 180px) clamp(84px, 10vh, 112px); } }
/* PTP: okładka przy prawej krawędzi, więc pas powiększa się od niej w lewo */
.b-prosecuting-the-powerful .in { transform-origin: 100% 50%; }
@media (min-width: 861px) { .p-hero { gap: clamp(18px, 3.4vh, 44px); } }

/* logo expose w menu: stałe wymiary, bez flexa (Safari) */
.hd .nav .xn { display: inline-block; line-height: 1; vertical-align: middle; }
.hd .nav .xn img { display: inline-block; height: 21px; width: 65px; max-width: none; vertical-align: middle; }
.xw { width: auto; aspect-ratio: 700 / 225; max-width: none; }
.expose p.t .xw { aspect-ratio: 1400 / 449; height: 1.1em; vertical-align: -.22em; }

/* Queen of Spades (tytuł roboczy) — ze strony projektu: grafit, siatka 12 kolumn, Archivo rozciągnięte, drugie słowo konturem, złoty pik */
.b-queen-of-spades { background: #09090a; --fg: #f1efe9; --fg-2: #8f8c86; --acc: #d8b46a; }
.b-queen-of-spades .grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), #303035 calc(100% / 12 - 1px) calc(100% / 12)); }
.b-queen-of-spades .cards { position: absolute; z-index: 1; right: clamp(-90px, -3vw, -20px); bottom: clamp(-140px, -9vw, -60px); width: clamp(260px, 30vw, 460px); aspect-ratio: 1.2; pointer-events: none; }
.b-queen-of-spades .cards span { position: absolute; left: 30%; bottom: 0; width: 46%; aspect-ratio: 5 / 7; border: 1.5px solid rgba(216,180,106,.5); border-radius: 14px; background: rgba(17,17,19,.86);
  padding: 7% 8%; font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 125%; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.2px rgba(216,180,106,.8);
  transform-origin: 50% 120%; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.b-queen-of-spades .cards i { display: block; font-style: normal; font-size: .5em; margin-top: .15em; color: rgba(216,180,106,.85); -webkit-text-stroke: 0; }
.b-queen-of-spades .cards span:nth-child(1) { transform: rotate(-16deg); }
.b-queen-of-spades .cards span:nth-child(2) { transform: rotate(-2deg); }
.b-queen-of-spades .cards span:nth-child(3) { transform: rotate(12deg); border-color: rgba(216,180,106,.85); }
.b-queen-of-spades:hover .cards span:nth-child(1) { transform: rotate(-26deg); }
.b-queen-of-spades:hover .cards span:nth-child(2) { transform: rotate(-5deg); }
.b-queen-of-spades:hover .cards span:nth-child(3) { transform: rotate(17deg); }
.b-queen-of-spades h2 { font-family: "Archivo", "Arial Black", sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .86; letter-spacing: -.045em; font-size: clamp(2.6rem, 5.6vw, 5.6rem); }
.b-queen-of-spades h2 .l1 { display: block; }
.b-queen-of-spades h2 .l2 { display: block; color: transparent; -webkit-text-stroke: 1.5px #f1efe9; }
.b-queen-of-spades h2 .suit { color: #d8b46a; -webkit-text-stroke: 0; margin-left: .06em; letter-spacing: 0; }
.b-queen-of-spades .tag { font-family: "Archivo", sans-serif; font-weight: 700; font-stretch: 110%; color: #f1efe9; letter-spacing: -.01em; max-width: 22ch; }
.b-queen-of-spades .tag em { font-style: normal; color: #d8b46a; }
.b-queen-of-spades .body { position: relative; }
@media (max-width: 860px) {
  .b-queen-of-spades .grid { background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 4 - 1px), #26262a calc(100% / 4 - 1px) calc(100% / 4)); }
  .b-queen-of-spades .cards { width: 190px; right: -40px; bottom: auto; top: 10px; opacity: .7; }
  .b-queen-of-spades h2 .l2 { -webkit-text-stroke-width: 1px; }
}

/* The Birds Were Gone (tytuł roboczy) — ze strony projektu: Warszawa 1905 w ciemności, plama światła odsłania kolor, czerwony tytuł Fira Sans Extra Condensed, Cormorant */
@property --bx { syntax: "<percentage>"; inherits: true; initial-value: 62%; }
@property --by { syntax: "<percentage>"; inherits: true; initial-value: 42%; }
.b-the-birds-were-gone { background: #070605; --fg: #efe9de; --fg-2: rgba(239,233,222,.68); --acc: #e3322a; animation: bw-drift 26s ease-in-out infinite alternate; }
.b-the-birds-were-gone.track { animation: none; }
@keyframes bw-drift { 0% { --bx: 74%; --by: 34%; } 35% { --bx: 52%; --by: 58%; } 70% { --bx: 30%; --by: 40%; } 100% { --bx: 64%; --by: 66%; } }
.b-the-birds-were-gone .ph { position: absolute; inset: 0; z-index: 0; }
.b-the-birds-were-gone .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.b-the-birds-were-gone .ph .dk { filter: grayscale(1) brightness(.24) contrast(1.15); }
.b-the-birds-were-gone .ph .lt { filter: saturate(1.05) brightness(1.02);
  -webkit-mask-image: radial-gradient(circle at var(--bx) var(--by), #000 0, #000 6%, rgba(0,0,0,.5) 14%, transparent 28%);
          mask-image: radial-gradient(circle at var(--bx) var(--by), #000 0, #000 6%, rgba(0,0,0,.5) 14%, transparent 28%); }
.b-the-birds-were-gone .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,6,5,.5) 0%, rgba(7,6,5,.15) 30%, rgba(7,6,5,.35) 48%, rgba(7,6,5,.82) 70%, rgba(7,6,5,.9) 100%); }
.b-the-birds-were-gone::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.b-the-birds-were-gone h2 { font-family: "Fira Sans Extra Condensed", "Arial Narrow", Impact, sans-serif; font-style: italic; font-weight: 900; text-transform: uppercase; color: #e3322a; line-height: .8; letter-spacing: -.012em; font-size: clamp(3.2rem, 7.4vw, 7.6rem); text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.b-the-birds-were-gone .tag { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; color: #efe9de; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.1; max-width: 22ch; }
.b-the-birds-were-gone .fmt { color: #ff5a4c; }
@media (max-width: 860px) {
  .b-the-birds-were-gone .shade { background: linear-gradient(180deg, rgba(7,6,5,.35) 0%, rgba(7,6,5,.2) 22%, rgba(7,6,5,.8) 46%, rgba(7,6,5,.92) 100%); }
}
@media (prefers-reduced-motion: reduce) { .b-the-birds-were-gone { animation: none; } .b-queen-of-spades .cards span { transition: none; } }
/* poprawki: światło wędruje tam, gdzie nie ma tekstu; karty na telefonie pod treścią */
@keyframes bw-drift { 0% { --bx: 52%; --by: 30%; } 30% { --bx: 38%; --by: 72%; } 65% { --bx: 22%; --by: 34%; } 100% { --bx: 56%; --by: 62%; } }
.b-the-birds-were-gone .shade { background: linear-gradient(90deg, rgba(7,6,5,.45) 0%, rgba(7,6,5,.1) 28%, rgba(7,6,5,.18) 46%, rgba(7,6,5,.8) 66%, rgba(7,6,5,.9) 100%); }
.b-the-birds-were-gone .tag { max-width: none; }
.b-queen-of-spades .tag { max-width: 24ch; text-wrap: balance; }
@media (max-width: 860px) {
  @keyframes bw-drift { 0% { --bx: 70%; --by: 12%; } 50% { --bx: 30%; --by: 22%; } 100% { --bx: 60%; --by: 30%; } }
  .b-queen-of-spades { padding-bottom: 150px; }
  .b-queen-of-spades .cards { top: auto; bottom: -46px; right: -24px; width: 200px; opacity: .8; }
}
@media (min-width: 861px) {
  @keyframes bw-drift { 0% { --bx: 44%; --by: 28%; } 30% { --bx: 32%; --by: 74%; } 65% { --bx: 16%; --by: 34%; } 100% { --bx: 40%; --by: 64%; } }
  .b-the-birds-were-gone .shade { background: linear-gradient(90deg, rgba(7,6,5,.45) 0%, rgba(7,6,5,.08) 24%, rgba(7,6,5,.3) 38%, rgba(7,6,5,.78) 50%, rgba(7,6,5,.9) 100%); }
}

/* Queen of Spades: zdjęcie z okopu po lewej, przygaszone do grafitu; ekran telefonu świeci złotem kasyna i miga jak bęben automatu */
.b-queen-of-spades { padding-block: 0; }
.b-queen-of-spades .cards { display: none; }
.b-queen-of-spades .grid { left: 50%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.b-queen-of-spades .ph { position: absolute; top: 0; bottom: 0; left: 0; width: 60%; z-index: 0; overflow: hidden; container-type: size; }
.b-queen-of-spades .ph .fr { position: absolute; left: 50%; top: 50%; width: max(100cqw, 150.4cqh); aspect-ratio: 1600 / 1064; transform: translate(-46%, -50%); }
.b-queen-of-spades .ph img { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.28) brightness(.62) contrast(1.12) sepia(.18); }
/* złota poświata z ekranu na twarz i dłonie */
.b-queen-of-spades .ph .glow { position: absolute; left: 30%; top: 19%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(circle, rgba(216,180,106,.55) 0%, rgba(216,180,106,.22) 22%, rgba(216,180,106,.06) 45%, transparent 68%); animation: qs-flick 3.2s steps(1) infinite; }
/* sam ekran telefonu */
.b-queen-of-spades .ph .scr { position: absolute; left: 26.9%; top: 13.2%; width: 6.2%; height: 11.6%; transform: rotate(4deg); border-radius: 6% / 4%; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255,226,160,.75), rgba(216,180,106,.45)); filter: blur(1.5px); animation: qs-flick 3.2s steps(1) infinite; }
@keyframes qs-flick { 0% { opacity: 1; } 12% { opacity: .72; } 18% { opacity: .95; } 40% { opacity: .8; } 46% { opacity: 1; } 71% { opacity: .66; } 76% { opacity: .9; } 90% { opacity: 1; } }
.b-queen-of-spades .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,10,0) 40%, rgba(9,9,10,.7) 78%, #09090a 100%), linear-gradient(0deg, rgba(9,9,10,.92) 0%, rgba(9,9,10,.55) 34%, rgba(9,9,10,0) 62%); }
.b-queen-of-spades .in { padding-block: clamp(40px, 5.5vw, 84px); }
.b-queen-of-spades .art { align-self: end; }
.b-queen-of-spades h2 { text-shadow: 0 2px 30px rgba(0,0,0,.6); }
@media (min-width: 861px) { .b-queen-of-spades .in { flex: 1; } }
@media (max-width: 860px) {
  .b-queen-of-spades { padding-bottom: 0; }
  .b-queen-of-spades .grid { left: 0; -webkit-mask-image: none; mask-image: none; }
  .b-queen-of-spades .ph { width: 100%; bottom: auto; height: min(78vw, 440px); }
  .b-queen-of-spades .ph .fr { transform: translate(-50%, -50%); }
  .b-queen-of-spades .ph::after { background: linear-gradient(0deg, #09090a 0%, rgba(9,9,10,.6) 30%, rgba(9,9,10,0) 62%); }
  .b-queen-of-spades .in { padding-top: min(52vw, 290px); }
}
@media (prefers-reduced-motion: reduce) { .b-queen-of-spades .ph .glow, .b-queen-of-spades .ph .scr { animation: none; } }

/* kategorie: dokumenty, fabuła, studio — każda z własną linią nagłówka */
.grp + .grp { padding-top: clamp(40px, 6vw, 80px); }
.studio { padding-top: clamp(40px, 6vw, 80px); }
.studio + .apart { padding-top: clamp(8px, 2vw, 24px); }

/* jaśniej: Birds i Queen of Spades */
.b-the-birds-were-gone { background: #1a1612; }
.b-the-birds-were-gone .ph .dk { filter: grayscale(1) brightness(.5) contrast(1.1); }
.b-the-birds-were-gone .ph .lt { filter: saturate(1.1) brightness(1.15); }
.b-the-birds-were-gone::after { opacity: .1; }
@media (min-width: 861px) {
  .b-the-birds-were-gone .shade { background: linear-gradient(90deg, rgba(20,17,13,.3) 0%, rgba(20,17,13,0) 24%, rgba(20,17,13,.2) 38%, rgba(20,17,13,.66) 52%, rgba(20,17,13,.74) 100%); }
}
@media (max-width: 860px) {
  .b-the-birds-were-gone .shade { background: linear-gradient(180deg, rgba(20,17,13,.2) 0%, rgba(20,17,13,.1) 22%, rgba(20,17,13,.7) 46%, rgba(20,17,13,.8) 100%); }
}
.b-queen-of-spades { background: #1c1c1f; }
.b-queen-of-spades .grid { opacity: .8; }
.b-queen-of-spades .ph img { filter: saturate(.55) brightness(.92) contrast(1.05) sepia(.12); }
.b-queen-of-spades .ph::after { background: linear-gradient(90deg, rgba(28,28,31,0) 50%, rgba(28,28,31,.6) 82%, #1c1c1f 100%), linear-gradient(0deg, rgba(28,28,31,.85) 0%, rgba(28,28,31,.4) 34%, rgba(28,28,31,0) 58%); }
@media (max-width: 860px) { .b-queen-of-spades .ph::after { background: linear-gradient(0deg, #1c1c1f 0%, rgba(28,28,31,.5) 30%, rgba(28,28,31,0) 60%); } }
.b-queen-of-spades .ph .fr { transform: translate(-50%, -50%); }
.grp .sl { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: clamp(16px, 2.4vw, 28px); }
.studio .sl { margin-bottom: 0; }

/* Queen of Spades: zdjęcie przyklejone do górnej krawędzi, przycina się tylko od dołu (głowa zawsze w kadrze) */
.b-queen-of-spades .ph .fr { top: 0; transform: translate(-50%, 0); }


/* paski kategorii w barwach kropek z logo: czerwień, zieleń, błękit; ostre krawędzie */
.grp + .grp, .studio { padding-top: 0; }
.studio + .apart { padding-top: clamp(48px, 8vw, 112px); }
.pcat { padding-block: clamp(22px, 3.2vw, 44px); }
.pcat .wrap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pcat h2, .pcat .n { margin: 0; font-family: var(--sans); font-weight: 350; font-size: clamp(2.6rem, 7.4vw, 7rem); line-height: .95; letter-spacing: -.05em; }
.pcat .n { font-variant-numeric: tabular-nums; }
.pcat-doc { background: #f00; color: #000; }
.pcat-fiction { background: #0f0; color: #000; }
.pcat-studio { background: #00f; color: #fff; }
/* The Birds Were Gone przy zielonym pasku Fiction: zamiast czerwieni mosiądz z palety projektu (#c2a46c) */
.b-the-birds-were-gone { --acc: #c2a46c; }
.b-the-birds-were-gone h2 { color: #c9ab70; }
.b-the-birds-were-gone .fmt { color: #c2a46c; }

/* Mystery of a Lie na telefonie: oko jako grafika nad tytułem (jak w pozostałych pasach), niżej granat pod tekst */
@media (max-width: 860px) {
  .b-mystery-of-a-lie .bg { bottom: auto; height: min(92vw, 420px); }
  .b-mystery-of-a-lie .bg img { object-fit: cover; object-position: 50% 56%; }
  .b-mystery-of-a-lie .bg::after { background: radial-gradient(ellipse 75% 60% at 50% 48%, rgba(15,26,53,0) 0%, rgba(15,26,53,.25) 60%, rgba(15,26,53,.6) 100%), linear-gradient(180deg, rgba(15,26,53,0) 55%, rgba(15,26,53,.85) 85%, #0F1A35 100%); }
  .b-mystery-of-a-lie .in { padding-top: min(74vw, 340px); }
  .b-mystery-of-a-lie .op::before, .b-mystery-of-a-lie .op::after { opacity: .14; }
}

/* expose na telefonie: barwy tła expose.partners (granat, zieleń, złoto, czerwień) rozłożone na całą wysokość, mocno przygaszone; logo dalej od górnej krawędzi */
@media (max-width: 860px) {
  .expose { padding-top: clamp(72px, 20vw, 110px); }
  .expose::before { inset: -10% -20%;
    background: radial-gradient(ellipse 70% 22% at 35% 16%, rgba(65,96,160,.3) 0%, transparent 70%), radial-gradient(ellipse 55% 26% at 82% 38%, rgba(3,144,13,.16) 0%, transparent 70%), radial-gradient(ellipse 65% 18% at 45% 66%, rgba(253,200,72,.12) 0%, transparent 70%), radial-gradient(ellipse 50% 24% at 18% 50%, rgba(224,40,32,.12) 0%, transparent 70%), radial-gradient(ellipse 60% 20% at 70% 88%, rgba(65,96,160,.2) 0%, transparent 70%); }
}

/* RE: — re21.eu: jasna szarość, czarne „RE:” w Rubik Glitch z fioletowym dwukropkiem i poświatą, okno z obrazem i zakłóceniem */
.b-re { background: #e9ebee; --fg: #101216; --fg-2: #535a63; --acc: #5b2ef5; }
.b-re .nz { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .42 0 0 0 0 .45 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.b-re .in { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2.6fr); transform-origin: 100% 50%; }
.b-re h2 { position: relative; isolation: isolate; }
.b-re h2::before { content: ""; position: absolute; z-index: -1; left: 8%; top: -18%; width: 110%; height: 135%; pointer-events: none; filter: blur(34px); opacity: .85;
  background: radial-gradient(circle at 55% 22%, rgba(255,225,70,.85) 0, rgba(255,225,70,0) 34%), radial-gradient(circle at 58% 78%, rgba(124,92,255,.85) 0, rgba(124,92,255,0) 42%); animation: re-glow 9s ease-in-out infinite alternate; }
@keyframes re-glow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(4%, -3%) scale(1.06); } }
.b-re .mg { display: block; font-family: "Rubik Glitch", "Arial Black", sans-serif; font-weight: 400; font-size: clamp(5rem, 11vw, 10.5rem); line-height: .82; letter-spacing: -.01em; color: #101216; }
.b-re .mg i { font-style: normal; color: #5b2ef5; }
.b-re .cyc { display: grid; margin: 10px 0 0; font-family: "Rubik Glitch", "Arial Black", sans-serif; font-size: clamp(1.7rem, 3vw, 2.9rem); line-height: 1; color: #101216; height: 1em; overflow: hidden; }
.b-re .cyc span { grid-area: 1 / 1; opacity: 0; animation: re-cyc 15s infinite; }
.b-re .cyc span:nth-child(2) { animation-delay: 3s; } .b-re .cyc span:nth-child(3) { animation-delay: 6s; } .b-re .cyc span:nth-child(4) { animation-delay: 9s; } .b-re .cyc span:nth-child(5) { animation-delay: 12s; }
@keyframes re-cyc { 0% { opacity: 0; } 3%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }
.b-re .tag { font-family: "Instrument Sans", system-ui, sans-serif; font-weight: 700; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(1.25rem, 1.75vw, 1.7rem); color: #101216; max-width: 19ch; margin-top: 22px; }
.b-re .fmt { color: #5b2ef5; }
.b-re .win { margin: 0; justify-self: end; width: 100%; max-width: 250px; background: #0d0e11; border-radius: 6px; overflow: hidden; box-shadow: 0 18px 40px rgba(16,18,22,.25); }
.b-re .win figcaption { display: flex; align-items: center; gap: 5px; padding: 7px 9px; font: 500 .62rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; color: #9aa1aa; }
.b-re .win figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #e0281b; }
.b-re .win figcaption i:nth-child(2) { background: #f2c230; } .b-re .win figcaption i:nth-child(3) { background: #2bbf6a; }
.b-re .win figcaption span { margin-left: 6px; }
.b-re .win .scr { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.b-re .win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.b-re .win .scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
/* zakłócenie: co kilka sekund pasy obrazu przesuwają się na ułamek sekundy */
.b-re .win .g { opacity: 0; clip-path: inset(30% 0 52% 0); filter: hue-rotate(40deg) saturate(1.6); animation: re-gl 6.5s steps(1) infinite; }
@keyframes re-gl { 0%, 86% { opacity: 0; transform: none; clip-path: inset(30% 0 52% 0); } 88% { opacity: 1; transform: translateX(-7%); clip-path: inset(30% 0 52% 0); } 90% { opacity: 1; transform: translateX(5%); clip-path: inset(61% 0 27% 0); } 92% { opacity: 1; transform: translateX(-3%); clip-path: inset(12% 0 80% 0); } 94%, 100% { opacity: 0; transform: none; } }
@media (max-width: 1100px) {
  .b-re .in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .b-re .win { grid-column: 1; grid-row: 2; justify-self: start; max-width: 200px; }
  .b-re .body { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 860px) {
  .b-re .in { grid-template-columns: 1fr; }
  .b-re .win, .b-re .body { grid-column: auto; grid-row: auto; }
  .b-re .win { order: -1; justify-self: stretch; max-width: none; }
  .b-re .win .scr { aspect-ratio: 16 / 10; }
  .b-re .win img { object-position: 50% 22%; }
}
@media (prefers-reduced-motion: reduce) { .b-re h2::before, .b-re .win .g { animation: none; } .b-re .cyc span { animation: none; } .b-re .cyc span:first-child { opacity: 1; } }

/* Wkurwionym krokiem — wkurwionymkrokiem.pl: czerń i biel, Miodowa po wybuchu bomby (1905), odręczne logo, Fira Sans Extra Condensed, Domine */
.b-wkurwionym-krokiem { background: #0b0b0b; --fg: #f2f2f2; --fg-2: rgba(242,242,242,.68); --acc: #f2f2f2; }
.b-wkurwionym-krokiem .ph { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.b-wkurwionym-krokiem .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; filter: brightness(.82) contrast(1.05); animation: wk-kb 30s ease-in-out infinite alternate; }
@keyframes wk-kb { from { transform: scale(1); } to { transform: scale(1.08) translate(-1.5%, -1%); } }
.b-wkurwionym-krokiem .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,11,.5) 0%, rgba(11,11,11,.25) 30%, rgba(11,11,11,.55) 46%, rgba(11,11,11,.86) 62%, rgba(11,11,11,.92) 100%), linear-gradient(0deg, rgba(11,11,11,.6) 0%, rgba(11,11,11,0) 40%); }
.b-wkurwionym-krokiem h2 { width: min(100%, 470px); }
.b-wkurwionym-krokiem h2 img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 24px rgba(0,0,0,.75)); }
.b-wkurwionym-krokiem .loc { margin: 14px 0 0; font: 900 italic clamp(1.4rem, 2.4vw, 2.2rem)/1 "Fira Sans Extra Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; color: #f2f2f2; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.b-wkurwionym-krokiem .loc b { color: rgba(242,242,242,.6); font-weight: 900; margin-right: .4em; }
.b-wkurwionym-krokiem .tag { font-family: "Domine", Georgia, serif; font-weight: 600; color: #f2f2f2; font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.3; max-width: none; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.b-wkurwionym-krokiem .fmt { color: #f2f2f2; }
.b-wkurwionym-krokiem a.u { text-decoration-color: rgba(242,242,242,.6); }
@media (max-width: 860px) {
  .b-wkurwionym-krokiem .ph { bottom: auto; height: min(74vw, 400px); }
  .b-wkurwionym-krokiem .ph img { object-position: 35% 40%; }
  .b-wkurwionym-krokiem .shade { background: linear-gradient(180deg, rgba(11,11,11,.2) 0%, rgba(11,11,11,.1) 22%, rgba(11,11,11,.85) min(60vw, 330px), #0b0b0b min(74vw, 400px)); }
  .b-wkurwionym-krokiem .in { padding-top: min(40vw, 220px); }
  .b-wkurwionym-krokiem h2 { width: min(100%, 360px); }
}
@media (prefers-reduced-motion: reduce) { .b-wkurwionym-krokiem .ph img { animation: none; } }
.b-wkurwionym-krokiem h2 { width: auto; }
.b-wkurwionym-krokiem h2 img { width: clamp(300px, 34vw, 500px); max-width: 100%; }
@media (max-width: 860px) { .b-wkurwionym-krokiem h2 img { width: min(100%, 360px); } }

/* paski kategorii: niższe, mniejszy napis, kolor kropki z logo wygasa w prawo w tło strony */
.pcat { padding-block: clamp(12px, 1.6vw, 22px); background: var(--paper, #f2f1ec); }
.pcat h2, .pcat .n { font-size: clamp(1.7rem, 3.6vw, 3.3rem); line-height: 1; letter-spacing: -.04em; }
.pcat .n { color: var(--ink, #111); opacity: .55; }
.pcat-doc { background: linear-gradient(90deg, #f00 0%, rgba(255,0,0,.85) 14%, rgba(255,0,0,.35) 38%, rgba(255,0,0,0) 62%); color: #000; }
.pcat-fiction { background: linear-gradient(90deg, #0f0 0%, rgba(0,255,0,.8) 14%, rgba(0,255,0,.3) 38%, rgba(0,255,0,0) 62%); color: #000; }
.pcat-studio { background: linear-gradient(90deg, #00f 0%, rgba(0,0,255,.85) 14%, rgba(0,0,255,.35) 38%, rgba(0,0,255,0) 62%); color: #fff; }
@media (max-width: 860px) {
  .pcat-doc { background: linear-gradient(90deg, #f00 0%, rgba(255,0,0,.75) 30%, rgba(255,0,0,0) 90%); }
  .pcat-fiction { background: linear-gradient(90deg, #0f0 0%, rgba(0,255,0,.7) 30%, rgba(0,255,0,0) 90%); }
  .pcat-studio { background: linear-gradient(90deg, #00f 0%, rgba(0,0,255,.75) 30%, rgba(0,0,255,0) 90%); }
}