/* Motyw „szlaki”: atlas wędrówek słów. Ciemny pas z nazwą i działami jako
   kolorowe „linie” (.l0–.l5), tablica odjazdów na stronie głównej, w artykule
   boczna trasa (spis treści jako przystanki) i mapki SVG z klasami .m0–.m3,
   którym kolory daje paleta .paleta-0…3. Akcent i tło z site.yaml
   (--akcent, --tlo). Proza bezszeryfowa albo szeryfowa (wariant.kroj). */

*,*::before,*::after{box-sizing:border-box}
:root{
  --noc:#14213d;
  --noc-2:#1f2f52;
  --tekst:#1b1f27;
  --szary:#5b6170;
  --linia:#dcd8cf;
  --morze:#dbe7ee;
  --lad:#efe6d2;
  --szer:72rem;
  --bez:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --szeryf:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--tlo);color:var(--tekst);font:1rem/1.6 var(--bez)}
a{color:inherit}
svg{max-width:100%}
.pomin{position:absolute;left:-999px}
.pomin:focus{left:1rem;top:1rem;z-index:9;background:#fff;padding:.4rem .8rem}

/* --- linie (działy) --- */
.l0{--l:#d9480f}.l1{--l:#1971c2}.l2{--l:#2b8a3e}.l3{--l:#9c36b5}.l4{--l:#e8a33d}.l5{--l:#0c8599}

/* --- pas --- */
.pas{background:var(--noc);color:#fff}
.pas-w{max-width:var(--szer);margin:0 auto;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marka{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;text-decoration:none}
.marka svg{width:1.6rem;height:1.6rem;fill:var(--akcent)}
.marka-oko{fill:var(--noc)}
.jezyki{display:flex;gap:.6rem;font:600 .75rem var(--mono);text-transform:uppercase}
.jezyki a{text-decoration:none;opacity:.7}
.jezyki a[aria-current]{opacity:1;box-shadow:inset 0 -2px var(--akcent)}
.linie{max-width:var(--szer);margin:0 auto;padding:0 1.25rem .9rem;display:flex;flex-wrap:wrap;gap:.45rem}
.linie a{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .75rem;border-radius:2rem;background:var(--noc-2);
  font-size:.85rem;text-decoration:none}
.linie a::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--l);box-shadow:0 0 0 2px var(--noc-2),0 0 0 3px var(--l)}
.linie a:hover,.linie a[aria-current]{background:#fff;color:var(--noc)}

main{max-width:var(--szer);margin:0 auto;padding:0 1.25rem 3rem}

/* --- mapki --- */
.mapka{display:block;width:100%;height:auto;border-radius:.75rem}
.mapka-duza{aspect-ratio:600/260}
.mapka-szeroka{aspect-ratio:600/200;margin:1.5rem 0 0}
.mapka-mala{aspect-ratio:600/300;border-radius:.5rem}
.paleta-0{--m0:var(--morze);--m1:var(--lad);--m2:var(--noc);--m3:var(--akcent)}
.paleta-1{--m0:var(--noc);--m1:var(--noc-2);--m2:#f1f3f5;--m3:var(--akcent)}
.paleta-2{--m0:#e9f0e4;--m1:#d3e2c7;--m2:#2b4a3a;--m3:var(--akcent)}
.paleta-3{--m0:#f3e8dc;--m1:#e6d3bd;--m2:#5a3b2e;--m3:var(--akcent)}
.m0{fill:var(--m0)}.m1{fill:var(--m1)}.m2{fill:var(--m2)}.m3{fill:var(--m3)}
.siatka{stroke:var(--m2);stroke-opacity:.08;stroke-width:1}
.trasa{fill:none;stroke:var(--m3);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 11}
.kod{fill:var(--m2);font:700 15px var(--mono);letter-spacing:.06em}

/* --- strona główna --- */
.naglowek{display:grid;grid-template-columns:1fr 1.35fr;gap:2.5rem;align-items:center;padding:2.75rem 0 2.25rem}
.naglowek h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.05;letter-spacing:-.03em;margin:0 0 .8rem}
.haslo{font-size:1.15rem;color:var(--szary);margin:0 0 1rem;max-width:30rem}
.kod-bledu{font:700 .9rem var(--mono);color:var(--akcent);margin:0}

.tablica{background:var(--noc);color:#e9ecef;border-radius:.9rem;padding:1.4rem 1.5rem .6rem;margin:0 0 2.5rem}
.tablica h2{font:700 .8rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--akcent);margin:0 0 .6rem}
.tablica ol{list-style:none;margin:0;padding:0}
.tablica li{display:grid;grid-template-columns:10.5rem 1fr auto 5.5rem;gap:1rem;align-items:baseline;padding:.75rem 0;border-top:1px dashed rgba(255,255,255,.14)}
.tablica time,.tablica .min{font:.82rem var(--mono);color:#adb5bd}
.tablica .min{text-align:right}
.tablica-tytul{font-weight:650;font-size:1.05rem;text-decoration:none;line-height:1.35}
.tablica-tytul:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--akcent);text-underline-offset:.2em}
.znaczek{display:inline-block;font:700 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:.2rem .55rem;border-radius:.3rem;background:var(--l);color:#fff;white-space:nowrap}

.przeglad{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.25rem}
.linia{background:#fff;border-radius:.75rem;padding:1.2rem 1.25rem;border-top:.4rem solid var(--l)}
.linia h2{font-size:1.2rem;margin:0}
.linia h2 a{text-decoration:none}
.licznik{font:.8rem var(--mono);color:var(--szary);margin:.2rem 0 .7rem}
.linia ul{margin:0 0 .9rem;padding:0;list-style:none}
.linia li{position:relative;padding:.3rem 0 .3rem 1.1rem;line-height:1.35}
.linia li::before{content:"";position:absolute;left:0;top:.72rem;width:.5rem;height:.5rem;border-radius:50%;border:2px solid var(--l)}
.linia li a{text-decoration:none}
.linia li a:hover{text-decoration:underline}
.dalej{font-weight:650;font-size:.92rem;color:var(--akcent);text-decoration:none}
.dalej:hover{text-decoration:underline}

/* --- artykuł --- */
.wpis-glowa{max-width:46rem;padding:2.5rem 0 0}
.wpis-glowa h1{font-size:clamp(1.85rem,4vw,2.75rem);line-height:1.12;letter-spacing:-.025em;margin:.8rem 0 .7rem}
.lead{font-size:1.2rem;line-height:1.5;color:var(--szary);margin:0 0 .8rem}
.meta{font:.82rem var(--mono);color:var(--szary);margin:0}
.wpis-uklad{display:grid;grid-template-columns:15rem minmax(0,44rem);gap:3rem;margin-top:2rem}
.wpis-uklad.bez-trasy{grid-template-columns:minmax(0,44rem)}
.trasa{position:sticky;top:1.5rem;align-self:start}
.trasa h2{font:700 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--szary);margin:0 0 .8rem}
.trasa ol{list-style:none;margin:0;padding:0;border-left:3px solid var(--akcent);margin-left:.4rem}
.trasa li{position:relative;padding:.35rem 0 .35rem 1.1rem;font-size:.9rem;line-height:1.35}
.trasa li::before{content:"";position:absolute;left:-.55rem;top:.62rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--tlo);border:3px solid var(--akcent)}
.trasa a{text-decoration:none;color:var(--szary)}
.trasa a:hover{color:var(--tekst)}

.proza{font-size:1.09rem;line-height:1.72}
.kroj-szeryf .proza{font-family:var(--szeryf);font-size:1.15rem}
.proza h2{font-family:var(--bez);font-size:1.45rem;line-height:1.25;letter-spacing:-.015em;margin:2.4rem 0 .7rem;scroll-margin-top:1rem}
.proza h3{font-family:var(--bez);font-size:1.15rem;margin:1.8rem 0 .5rem}
.proza a{color:var(--akcent);text-decoration-thickness:1px;text-underline-offset:.18em}
.proza blockquote{margin:1.6rem 0;padding:.9rem 1.2rem;background:#fff;border-left:4px solid var(--akcent);border-radius:0 .5rem .5rem 0}
.proza blockquote p{margin:.3rem 0}
.proza code{font:.9em var(--mono);background:#fff;padding:.05rem .3rem;border-radius:.25rem}
.proza img{max-width:100%;height:auto;border-radius:.5rem}
.proza em:first-child:last-child{color:var(--szary)}
/* Tabela „to słowo w innych językach”: pierwsza kolumna jak etykieta. */
.tabela{overflow-x:auto;margin:1.6rem 0}
.proza table{border-collapse:collapse;width:100%;font:.95rem/1.45 var(--bez);background:#fff;border-radius:.5rem;overflow:hidden}
.proza th{background:var(--noc);color:#fff;text-align:left;font-weight:650;padding:.6rem .8rem}
.proza td{padding:.55rem .8rem;border-top:1px solid var(--linia);vertical-align:top}
.proza td:first-child{font:600 .85rem var(--mono);white-space:nowrap}
.proza hr{border:0;border-top:2px dashed var(--linia);margin:2.4rem 0}

.dalej-sekcja{margin-top:3.5rem;padding-top:1.5rem;border-top:2px dashed var(--linia)}
.dalej-sekcja h2{font:700 .8rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--szary);margin:0 0 1rem}
.karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.25rem;margin-bottom:1rem}
.karta{display:flex;flex-direction:column;gap:.4rem;background:#fff;border-radius:.75rem;padding:.6rem .6rem 1rem;text-decoration:none}
.karta-tytul{font-weight:700;line-height:1.3;padding:0 .35rem}
.karta-opis{font-size:.9rem;color:var(--szary);padding:0 .35rem}
.karta:hover .karta-tytul{color:var(--akcent)}

/* --- dział --- */
.dzial-glowa{padding:2.5rem 0 1.5rem;border-bottom:.4rem solid var(--l);margin-bottom:1.5rem}
.dzial-glowa h1{font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.025em;margin:.3rem 0 0}
.okruszek{font:.8rem var(--mono);margin:0}
.okruszek a{color:var(--szary)}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.lista li{display:grid;grid-template-columns:13rem 1fr;gap:1.4rem;align-items:start}
.lista h2{font-size:1.25rem;line-height:1.3;margin:.1rem 0 .35rem}
.lista h2 a{text-decoration:none}
.lista h2 a:hover{color:var(--akcent)}
.lista p{margin:0 0 .4rem;color:var(--szary)}

/* --- stopka --- */
.stopka{background:var(--noc);color:#ced4da;margin-top:2rem}
.stopka-w{max-width:var(--szer);margin:0 auto;padding:2rem 1.25rem;display:grid;grid-template-columns:1fr auto;gap:.3rem 2rem}
.stopka-marka{font-weight:800;color:#fff;margin:0}
.stopka-opis{margin:0;max-width:34rem;font-size:.92rem}
.stopka ul{grid-column:2;grid-row:1/3;list-style:none;margin:0;padding:0;font-size:.92rem}
.stopka li{padding:.15rem 0}
.stopka-rok{font:.75rem var(--mono);color:#868e96;margin:.8rem 0 0}

@media (max-width:52rem){
  .naglowek{grid-template-columns:1fr;gap:1.5rem;padding-top:2rem}
  .tablica li{grid-template-columns:1fr auto;gap:.2rem .8rem}
  .tablica time{grid-column:1/-1}
  .tablica .min{display:none}
  .wpis-uklad{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .trasa{position:static;background:#fff;border-radius:.75rem;padding:1rem 1.2rem}
  .lista li{grid-template-columns:1fr}
  .lista-mapka{display:none}
  .stopka-w{grid-template-columns:1fr}
  .stopka ul{grid-column:1;grid-row:auto;margin-top:.8rem}
}