/* Układ: wąska kolumna do czytania pod lepkim paskiem dyspozytorskim z numerem;
   znak rozpoznawczy to tabliczki z numerami dróg (S8, DK12, DW482) w polskich kolorach. */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlow-condensed-latin-800-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f3f4f1;          /* beton */
  --surface:#ffffff;
  --ink:#191c1e;         /* asfalt */
  --muted:#545a5e;
  --line:#d5d8d2;
  --amber:#f5aa00;       /* lampa ostrzegawcza */
  --amber-ink:#181100;
  --link:#17478a;        /* niebieska tablica kierunkowa */
  --chrome:#191c1e;      /* pasek i stopka: zawsze ciemne */
  --chrome-ink:#f3f4f1;
  --plate-red:#c4161c;   /* numer drogi krajowej / S */
  --plate-red-ink:#ffffff;
  --plate-yel:#f6cf0f;   /* numer drogi wojewódzkiej */
  --plate-yel-ink:#111111;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gutter:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111315;--chrome:#1e2226;--chrome-ink:#eceee9;--surface:#1a1d20;--ink:#eceee9;--muted:#a4aaa7;--line:#2d3236;
  --amber:#ffb81c;--amber-ink:#181100;--link:#93b8ef;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111315;--chrome:#1e2226;--chrome-ink:#eceee9;--surface:#1a1d20;--ink:#eceee9;--muted:#a4aaa7;--line:#2d3236;
  --amber:#ffb81c;--amber-ink:#181100;--link:#93b8ef;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--chrome)}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:2px}
.wrap{max-width:1040px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:16px;top:16px;z-index:50;background:var(--surface);padding:8px 12px}

/* pasek dyspozytorski */
.dispatch{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--chrome);color:var(--chrome-ink)}
.dispatch .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;min-height:64px;padding-block:10px}
.brand{display:flex;flex-direction:column;line-height:1.05;color:inherit;text-decoration:none}
.brand img{display:block;height:28px;width:auto;margin-bottom:4px}
@media (max-width:520px){.brand img{height:21px;margin-bottom:0}}
.brand span{font-size:.78rem;opacity:.75}
.callbtn{display:inline-flex;align-items:center;gap:10px;background:var(--amber);color:var(--amber-ink);text-decoration:none;border-radius:6px;padding:8px 14px;font-weight:700}
.callbtn .num{white-space:nowrap;font:800 1.45rem/1 var(--display);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.callbtn small{font-size:.75rem;font-weight:700;line-height:1.1;max-width:6.5em}
@media (max-width:520px){.callbtn small{display:none}.brand span{display:none}}

nav.main{background:var(--surface);border-bottom:1px solid var(--line)}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:2px 18px;overflow-x:auto;scrollbar-width:none}
nav.main ul::-webkit-scrollbar{display:none}
nav.main a{display:block;padding:11px 0;color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;white-space:nowrap;border-bottom:3px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{border-bottom-color:var(--amber)}

/* tabliczki z numerami dróg */
.plate{display:inline-block;font:700 1rem/1 var(--display);letter-spacing:.04em;padding:4px 7px 3px;border-radius:3px;border:2px solid currentColor;vertical-align:.1em;white-space:nowrap}
.plate.dk,.plate.s{background:var(--plate-red);color:var(--plate-red-ink);border-color:var(--plate-red-ink);box-shadow:0 0 0 1px var(--plate-red)}
.plate.dw{background:var(--plate-yel);color:var(--plate-yel-ink);border-color:var(--plate-yel-ink);box-shadow:0 0 0 1px var(--plate-yel)}
.plates{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}

/* nagłówek strony */
.hero{padding-block:34px 30px;border-bottom:1px solid var(--line)}
.crumbs{font-size:.88rem;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted)}
h1,h2,h3{font-family:var(--display);line-height:1.05;text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(2.3rem,6.4vw,4.1rem);letter-spacing:-.005em;max-width:17ch}
h2{font-weight:700;font-size:clamp(1.65rem,3.6vw,2.2rem);margin-top:2.2rem;margin-bottom:.6rem}
h3{font-weight:700;font-size:1.35rem;margin-bottom:.3rem}
.lead{font-size:1.2rem;line-height:1.5;color:var(--muted);max-width:60ch;margin:16px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;border-radius:6px;padding:13px 18px;border:2px solid var(--ink);color:var(--ink);background:transparent;font-size:1rem;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.btn.primary .num{font:800 1.35rem/1 var(--display);letter-spacing:.03em}
.hero .plates{margin-top:22px}
.facts{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0;margin:20px 0 0;font-size:.95rem;color:var(--muted)}
.facts li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--amber);margin-right:8px;vertical-align:.1em}

/* treść */
main .content{padding-block:8px 40px}
.prose{max-width:68ch}
.prose p,.prose ul,.prose ol{margin:0 0 1rem}
.prose li{margin-bottom:.35rem}
.cols{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.cols{grid-template-columns:minmax(0,1fr) 300px}}
aside.side{align-self:start}
@media (min-width:860px){aside.side{position:sticky;top:96px;margin-top:2.2rem}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px}
.card h3{font-size:1.25rem}
.card p{margin:.3rem 0 .8rem;color:var(--muted);font-size:.97rem}
.card .bignum{display:block;font:800 2rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:.02em;margin:.2rem 0 .6rem;font-variant-numeric:tabular-nums}

.svc{display:grid;gap:0;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line);margin:0;padding:0;list-style:none}
@media (min-width:700px){.svc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
.svc li{border-bottom:1px solid var(--line);padding:16px 0}
.svc a{font:700 1.35rem/1.1 var(--display);color:var(--ink);text-decoration:none}
.svc a:hover{color:var(--link)}
.svc p{margin:.3rem 0 0;color:var(--muted);font-size:.97rem}

.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 1rem}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 46px;min-height:34px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);font:800 1.1rem/32px var(--display);text-align:center}

/* schemat S8 */
.road{position:relative;list-style:none;margin:8px 0 20px;padding:0 0 0 34px}
.road::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:6px;background:var(--ink);border-radius:3px}
.road li{position:relative;padding:7px 0 7px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.road li::before{content:"";position:absolute;left:-29px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--surface);border:4px solid var(--ink)}
.road li.mop::before{width:10px;height:10px;margin-top:-5px;left:-26px;border-width:3px;border-color:var(--muted)}
.road li.base::before{background:var(--amber);border-color:var(--ink)}
.road .nm{font-weight:700}
.road .tp{font-size:.85rem;color:var(--muted)}
.road li.mop .nm{font-weight:400}

.tbl{overflow-x:auto;margin:0 0 1rem}
table{border-collapse:collapse;width:100%;font-size:.97rem}
th,td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:700}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}

.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 1.4rem/1 var(--display);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.6rem 0 0;color:var(--muted);max-width:68ch}

.note{border-left:4px solid var(--amber);padding:4px 0 4px 14px;margin:0 0 1rem;color:var(--ink)}
.towns{columns:2 12em;column-gap:28px;padding:0;margin:0 0 1rem;list-style:none}
.towns li{break-inside:avoid;padding:3px 0}
.loc-status{font-size:.92rem;color:var(--muted);margin:.5rem 0 0;min-height:1.4em}

footer.site{background:var(--chrome);color:var(--chrome-ink);margin-top:20px}
footer.site .wrap{padding-block:30px 26px}
footer.site a{color:var(--chrome-ink)}
.fgrid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer.site h2{font-size:1.25rem;margin:0 0 8px;color:var(--amber)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{padding:2px 0}
footer.site p{margin:0}
.legal{margin-top:22px;font-size:.85rem;opacity:.7}

.callbar{display:none}
@media (max-width:700px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;gap:8px;background:var(--chrome);
    padding:8px var(--gutter-r) calc(8px + env(safe-area-inset-bottom,0px)) var(--gutter)}
  .callbar a{flex:1;text-align:center;text-decoration:none;font-weight:700;border-radius:6px;padding:12px 6px}
  .callbar .c{background:var(--amber);color:var(--amber-ink);flex:1.6}
  .callbar .l{border:2px solid var(--chrome-ink);color:var(--chrome-ink)}
  footer.site{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* zdjęcia */
.hero.has-img .wrap{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:860px){.hero.has-img .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px}
  .hero.has-img h1{font-size:clamp(2.3rem,4.6vw,3.6rem)}}
.hero-img{margin:0;min-width:0}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;background:var(--line)}
@media (min-width:860px){.hero-img.port img{aspect-ratio:4/5;max-height:560px}.hero-img.land img{aspect-ratio:4/3}}
.photo{margin:1.6rem 0 1.4rem;max-width:68ch}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;background:var(--line)}
figcaption{font-size:.88rem;color:var(--muted);margin-top:.45rem;line-height:1.4}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 1.2rem}
@media (min-width:700px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery figure{margin:0;min-width:0}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;background:var(--line)}
.gallery figcaption{font-size:.8rem}

.nw{white-space:nowrap}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}