/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/Fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-normal400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-normal400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-normal500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono-normal500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-italic400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-italic400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Kronika Zbrodni – styl strony. Kolory z grafik kanału (out/channel): czerń, kość słoniowa, czerwień.
   Motyw: teczka akt – papierowe etykiety z sygnaturą, maszynopis (mono) na metadanych, pieczątka statusu. */
:root {
  --atrament: #121316;
  --grafit: #1b1d22;
  --grafit-2: #23262c;
  --linia: #30333a;
  --kosc: #ece4d4;
  --kosc-2: #c9c1b1;
  --popiol: #959083;
  --krew: #a3242a;
  --krew-jasna: #d2504a;
  --kalka: #8fa9cf;

  --f-display: 'Fraunces', Georgia, serif;
  --f-tekst: 'Newsreader', Georgia, serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --szer: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--atrament); color: var(--kosc);
  font: 400 1.125rem/1.6 var(--f-tekst); font-optical-sizing: auto;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--krew-jasna); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--kalka); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }

.pomin { position: absolute; left: -999px; top: 8px; background: var(--kosc); color: var(--atrament); padding: 8px 12px; z-index: 10; }
.pomin:focus { left: 8px; }

/* ---------- nagłówek ---------- */
.naglowek {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--szer); margin: 0 auto; padding: 20px var(--gutter);
}
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.25rem/1 var(--f-display); letter-spacing: -.01em; }
.marka em { font-style: normal; color: var(--krew-jasna); }
.odcisk { width: 30px; height: 30px; color: var(--krew-jasna); flex: none; }
.naglowek nav { display: flex; align-items: center; gap: 22px; font: 500 .8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.naglowek nav a:not(.przycisk) { text-decoration: none; color: var(--kosc-2); }
.naglowek nav a:not(.przycisk):hover { color: var(--kosc); }

.przycisk {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px;
  background: var(--krew); color: #fff; text-decoration: none; border: 1px solid var(--krew);
  font: 500 .82rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; border-radius: 2px;
  transition: background .15s, border-color .15s;
}
.przycisk:hover { background: #b92d33; border-color: #b92d33; color: #fff; }
.przycisk--duch { background: transparent; border-color: var(--linia); color: var(--kosc); }
.przycisk--duch:hover { background: var(--grafit-2); border-color: var(--popiol); }
.przycisk--maly { padding: 9px 14px; font-size: .72rem; }

/* ---------- teczka (czoło strony głównej) ---------- */
.czolo { max-width: var(--szer); margin: 12px auto 0; padding: 0 var(--gutter); }
.teczka { position: relative; }
.teczka__zakladka {
  display: inline-flex; gap: 18px; padding: 9px 16px 8px;
  background: var(--kosc); color: var(--atrament);
  font: 500 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em;
  border-radius: 3px 3px 0 0;
}
.teczka__zakladka span + span { color: var(--krew); }
.teczka__wnetrze {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  background: var(--grafit); border-top: 3px solid var(--kosc);
  padding: clamp(24px, 4vw, 52px); position: relative; overflow: hidden;
}
.czolo__tekst { position: relative; }
.czolo__gdzie { font: 500 .78rem/1.4 var(--f-mono); color: var(--kalka); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.czolo h1, .sprawa__glowa h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-variation-settings: 'opsz' 144; }
.czolo__hak { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--kosc-2); margin: 18px 0 26px; max-width: 34em; font-style: italic; }
.czolo__akcje { display: flex; flex-wrap: wrap; gap: 12px; }
.czolo__kadr { display: block; position: relative; box-shadow: 0 30px 60px -20px #000; }
.czolo__kadr img { aspect-ratio: 16/9; object-fit: cover; width: 100%; filter: saturate(.8) contrast(1.05); transition: filter .3s; }
.czolo__kadr:hover img { filter: none; }

/* pieczątka: status sprawy, odbita krzywo jak tuszem */
.pieczatka {
  display: inline-block; margin-top: 30px; padding: 8px 14px 7px;
  border: 3px double var(--krew-jasna); color: var(--krew-jasna);
  font: 500 .86rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .18em;
  transform: rotate(-4deg); opacity: .88; border-radius: 3px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23f)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23f)'/%3E%3C/svg%3E");
}
.pieczatka--otwarta { border-color: var(--kalka); color: var(--kalka); transform: rotate(3deg); }

/* ---------- rejestr spraw ---------- */
.rejestr, .zasady, .sprawa, .stala { max-width: var(--szer); margin: 0 auto; padding: 0 var(--gutter); }
.rejestr { margin-top: clamp(56px, 8vw, 96px); }
.rejestr__glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--linia); padding-bottom: 14px; }
.rejestr__glowa h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.rejestr__glowa p { margin: 0; font: .78rem/1 var(--f-mono); color: var(--popiol); text-transform: uppercase; letter-spacing: .08em; }

.filtry { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.filtry button {
  background: none; border: 1px solid var(--linia); color: var(--kosc-2); padding: 8px 12px; cursor: pointer;
  font: 500 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; border-radius: 2px;
}
.filtry button[aria-pressed="true"] { background: var(--kosc); color: var(--atrament); border-color: var(--kosc); }

.wpisy { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 34px 26px; }
.wpis[hidden] { display: none; }
.wpis a { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.wpis__sygn {
  align-self: flex-start; background: var(--kosc); color: var(--atrament); padding: 6px 10px 5px;
  font: 500 .68rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 2px 2px 0 0;
}
.wpis img { aspect-ratio: 16/9; object-fit: cover; width: 100%; border-top: 2px solid var(--kosc); filter: saturate(.75); transition: filter .25s; background: var(--grafit); }
.wpis a:hover img { filter: none; }
.wpis__tytul { font: 600 1.3rem/1.2 var(--f-display); margin: 14px 0 8px; letter-spacing: -.01em; }
.wpis a:hover .wpis__tytul { text-decoration: underline; text-decoration-color: var(--krew-jasna); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.wpis__meta { font: .74rem/1.4 var(--f-mono); color: var(--popiol); text-transform: uppercase; letter-spacing: .06em; }
.wpis__status { margin-top: 10px; font: 500 .7rem/1 var(--f-mono); color: var(--krew-jasna); text-transform: uppercase; letter-spacing: .14em; }
.wpis__status--otwarta { color: var(--kalka); }

/* ---------- zasady ---------- */
.zasady { margin-top: clamp(64px, 9vw, 110px); padding-top: 34px; border-top: 1px solid var(--linia); }
.zasady h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 26px; }
.zasady dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 0 0 34px; }
.zasady dt { font: 600 1.1rem/1.25 var(--f-display); margin-bottom: 8px; }
.zasady dd { margin: 0; color: var(--kosc-2); font-size: 1rem; }

/* ---------- podstrona sprawy ---------- */
.okruszki { font: .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--popiol); margin: 14px 0 28px; }
.okruszki a { color: var(--kosc-2); }
.sprawa__glowa { max-width: 860px; margin-bottom: 34px; }
.sprawa__glowa .pieczatka { margin-top: 4px; }
.sprawa__uklad { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }

.wideo { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.wideo img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.wideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wideo__start {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 16px 22px 16px 18px; cursor: pointer;
  background: var(--krew); color: #fff; border: 0; border-radius: 2px;
  font: 500 .86rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em;
  box-shadow: 0 12px 40px -8px #000;
}
.wideo__start svg { width: 26px; height: 26px; }
.wideo__start:hover { background: #b92d33; }
.wideo__zgoda { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 22px 14px 10px; font: .7rem/1.3 var(--f-mono); color: var(--kosc-2); background: linear-gradient(transparent, #000c); text-align: center; }
.uwaga { margin: 14px 0 0; font: .82rem/1.4 var(--f-mono); color: var(--kalka); }

.tekst { margin-top: 56px; max-width: 680px; }
.tekst__naglowek { font-size: clamp(1.5rem, 2.6vw, 2rem); padding-bottom: 14px; border-bottom: 1px solid var(--linia); margin-bottom: 34px; }
.tekst section { margin-bottom: 46px; scroll-margin-top: 20px; }
.tekst h3 { font-size: 1.5rem; margin-bottom: 16px; }
.tekst__akt { display: block; font: 500 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--krew-jasna); margin-bottom: 10px; }
.tekst p { font-size: 1.16rem; line-height: 1.7; color: #e3dccd; }
.tekst section:first-child p:first-of-type::first-letter { font: 600 3.6em/.8 var(--f-display); float: left; margin: .08em .1em 0 0; color: var(--krew-jasna); }
.skok {
  background: none; border: 0; border-bottom: 1px dashed var(--kalka); padding: 2px 0; cursor: pointer; color: var(--kalka);
  font: .76rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
}
.skok:hover { color: var(--kosc); border-color: var(--kosc); }

.sprawa__bok { position: sticky; top: 20px; display: grid; gap: 30px; }
.metryka { margin: 0; background: var(--kosc); color: var(--atrament); padding: 18px 20px; border-radius: 2px; }
.metryka div { display: grid; grid-template-columns: 105px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #0002; }
.metryka div:last-child { border-bottom: 0; }
.metryka dt { font: 500 .68rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: #5a564e; }
.metryka dd { margin: 0; font: 500 .9rem/1.45 var(--f-mono); }

.os h2, .shorty h2 { font: 500 .74rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--popiol); margin-bottom: 12px; }
.os ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linia); }
.os li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; position: relative; }
.os li::before { content: ''; position: absolute; left: -4px; top: 15px; width: 7px; height: 7px; background: var(--atrament); border: 1px solid var(--popiol); border-radius: 50%; }
.os li.aktywny::before { background: var(--krew-jasna); border-color: var(--krew-jasna); }
.os button { flex: 1; display: flex; gap: 12px; text-align: left; background: none; border: 0; color: var(--kosc); cursor: pointer; padding: 8px 0 8px 16px; font: 1rem/1.3 var(--f-tekst); }
.os button:hover span { text-decoration: underline; text-decoration-color: var(--krew-jasna); text-underline-offset: .2em; }
.os time { font: .78rem/1.6 var(--f-mono); color: var(--kalka); min-width: 3.4em; }
.os a { font: .66rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--popiol); text-decoration: none; }
.os a:hover { color: var(--kosc); }
.shorty ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shorty a { font: 1rem/1.35 var(--f-tekst); }
.shorty small { display: block; font: .7rem/1.4 var(--f-mono); color: var(--popiol); }

.galeria { margin-top: 20px; }
.galeria h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); padding-bottom: 14px; border-bottom: 1px solid var(--linia); margin-bottom: 26px; }
.galeria ul { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 22px; }
.galeria li { break-inside: avoid; margin-bottom: 26px; }
.galeria figure { margin: 0; background: var(--kosc); padding: 10px 10px 12px; color: var(--atrament); transform: rotate(var(--r, 0deg)); }
.galeria li:nth-child(3n+1) figure { --r: -.6deg; }
.galeria li:nth-child(3n+2) figure { --r: .5deg; }
.galeria img { filter: grayscale(.35) contrast(1.05); width: 100%; }
.galeria figcaption { font: .95rem/1.35 var(--f-tekst); margin-top: 10px; }
.galeria small { display: block; margin-top: 4px; font: .66rem/1.4 var(--f-mono); color: #5a564e; }
.galeria small a { color: #5a564e; }

.zrodla { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--linia); max-width: 860px; }
.zrodla h2 { font-size: 1.5rem; margin-bottom: 18px; }
.zrodla ol { margin: 0 0 20px; padding-left: 1.4em; font-size: .98rem; color: var(--kosc-2); }
.zrodla li { margin-bottom: 6px; overflow-wrap: anywhere; }
.zrodla li span { font: .7rem/1 var(--f-mono); color: var(--popiol); }
.drobne { font-size: .9rem; color: var(--popiol); }

.sasiedzi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 56px 0 0; padding-top: 26px; border-top: 1px solid var(--linia); }
.sasiedzi a { text-decoration: none; font: 600 1.15rem/1.25 var(--f-display); }
.sasiedzi small { display: block; font: 500 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--popiol); margin-bottom: 8px; }
.sasiedzi__nast { text-align: right; grid-column: 2; }

.zasady__wiecej { margin: -12px 0 30px; font: 500 .8rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.metryka a { color: inherit; text-decoration-color: var(--krew); }

/* procedura na „O kanale”: kolejne etapy pracy nad odcinkiem – numeracja to prawdziwa kolejność */
.procedura { list-style: none; counter-reset: etap; margin: 40px 0 10px; padding: 0; }
.procedura > li { counter-increment: etap; position: relative; padding: 0 0 34px 64px; border-left: 1px solid var(--linia); margin-left: 18px; }
.procedura > li:last-child { border-left-color: transparent; }
.procedura > li::before {
  content: counter(etap); position: absolute; left: -19px; top: -2px; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--kosc); color: var(--atrament); font: 500 .95rem/1 var(--f-mono); border-radius: 2px;
}
.procedura h2 { margin-top: 4px !important; }
.procedura ul { padding-left: 1.1em; color: #e3dccd; }
.procedura ul li { margin-bottom: 8px; }
.procedura strong { color: var(--kosc); font-weight: 600; }
@media (max-width: 640px) { .procedura > li { padding-left: 36px; margin-left: 14px; } .procedura > li::before { left: -15px; width: 30px; height: 30px; } }

/* ---------- strony stałe ---------- */
.stala { max-width: 760px; padding-top: 30px; }
.stala h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 18px; }
.stala h2 { font-size: 1.4rem; margin: 34px 0 10px; }
.stala p { color: #e3dccd; }

/* ---------- stopka ---------- */
.stopka { max-width: var(--szer); margin: clamp(70px, 10vw, 120px) auto 0; padding: 34px var(--gutter) 44px; border-top: 1px solid var(--linia); display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 40px; font-size: .95rem; color: var(--kosc-2); }
.stopka__marka { display: flex; gap: 14px; align-items: flex-start; }
.stopka__marka p { margin: 0; }
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: .76rem/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.stopka__lic { grid-column: 1 / -1; font-size: .82rem; color: var(--popiol); margin: 0; }

/* ---------- telefon ---------- */
@media (max-width: 900px) {
  .teczka__wnetrze { grid-template-columns: 1fr; }
  .czolo__kadr { order: -1; }
  .sprawa__uklad { grid-template-columns: 1fr; }
  .sprawa__bok { position: static; }
  .zasady dl { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .naglowek { padding-top: 14px; padding-bottom: 14px; }
  .naglowek nav { gap: 14px; }
  .naglowek nav a:not(.przycisk) { display: none; }
  .marka { font-size: 1.1rem; }
  .teczka__zakladka { gap: 10px; font-size: .64rem; }
  .teczka__wnetrze { padding: 20px 16px 26px; }
  .tekst p { font-size: 1.08rem; }
  .sasiedzi { grid-template-columns: 1fr; }
  .sasiedzi__nast { grid-column: 1; text-align: left; }
  .stopka { grid-template-columns: 1fr; }
  .wideo__start { padding: 10px 14px 10px 10px; font-size: .72rem; white-space: nowrap; bottom: 34px; }
  .wideo__zgoda { padding-top: 14px; font-size: .62rem; }
  .rejestr__glowa { flex-direction: column; gap: 8px; }
}