/* Przewodnik po Podlasiu – „dziennik terenowy”: płótno, zieleń kafli, czerwień drzwi. */
:root{
  --linen:#f3f1ea;--paper:#fbfaf6;--ink:#1d2420;--muted:#5b6660;
  --tile:#1f3d2c;--tile-2:#2f5a41;--door:#b3261e;--door-dark:#7a1712;--wood:#8a6a4a;--line:#d9d6cb;
  --ochre:#c8902e;--water:#2e6e8e;--snow:#6b7f99;
  --display:"Alegreya",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:max(16px,env(safe-area-inset-left,0px));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--linen);color:var(--ink);font:400 1.0625rem/1.7 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--tile)}
:focus-visible{outline:3px solid var(--door);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:70ch}

/* Nawigacja */
.nav{position:sticky;top:0;z-index:1000;background:rgba(243,241,234,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.brand{font-family:var(--display);font-weight:700;font-size:1.1rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px;line-height:1.1}
.brand i{flex:none;width:12px;height:18px;background:var(--door);border-radius:1px}
.brand small{display:block;font:600 .68rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{font-size:.9rem;text-decoration:none;color:var(--ink);padding:.4em .6em}
.nav-links a:hover{color:var(--door)}
.lang a{font-size:.8rem;font-weight:600;letter-spacing:.06em}
.lang a[aria-current]{color:var(--door)}
@media (max-width:640px){.nav-links .hide-s{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.75em 1.2em;border-radius:3px;font:600 .95rem/1.2 var(--body);text-decoration:none;background:var(--door);color:#fff;border:0;cursor:pointer}
.btn:hover{background:var(--door-dark)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--linen)}
.btn.light{background:var(--linen);color:var(--tile)}
.btn svg{width:18px;height:18px}

/* Typografia */
.eyebrow{font:600 .74rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--door);margin:0 0 12px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;line-height:1.1}
h1{font-size:clamp(2.4rem,7vw,4.6rem);margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 .4em}
h3{font-size:1.35rem;margin:0 0 .3em}
.lede{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,1.45rem);line-height:1.55;color:var(--ink)}
.lede::first-letter{font-size:3.4em;float:left;line-height:.82;margin:.06em .1em 0 0;color:var(--door);font-weight:700}
.muted{color:var(--muted)}
.prose p{margin:0 0 1em}
.prose{max-width:68ch}

/* Hero */
.hero{position:relative;background:var(--tile);color:#eef1ea;overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(56px,10vw,120px) clamp(40px,7vw,80px)}
.hero h1{color:#fff;max-width:16ch}
.hero .eyebrow{color:#f0b9a9}
.hero p.sub{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.4rem);max-width:46ch;color:#d6e0d8;margin:18px 0 0}
.hero .topo{position:absolute;inset:0;z-index:1;opacity:.35}
.hero .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero.region{background:var(--ink)}
.hero .frame{position:absolute;inset:14px;border:1.5px solid rgba(240,185,169,.45);z-index:1;pointer-events:none}

/* Paski z faktami */
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(255,255,255,.2);margin-top:30px}
.facts div{padding:14px 22px 0 0;margin-right:22px;min-width:110px}
.facts b{display:block;font:700 1.6rem/1 var(--display);color:#fff}
.facts span{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#b9c7bd}
.facts.dark{border-color:var(--line)}
.facts.dark b{color:var(--ink)}
.facts.dark span{color:var(--muted)}

/* Sekcje */
section{padding-block:clamp(44px,7vw,80px)}
section.tight{padding-block:32px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-head p{margin:0;max-width:58ch;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.paper{background:var(--paper);border-block:1px solid var(--line)}

/* Mapa */
.map-shell{position:relative;border:1px solid var(--line);background:#e8e5da}
.map{height:min(70vh,560px);width:100%}
.map.small{height:min(55vh,420px)}
.map-tools{position:absolute;z-index:500;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.map-tools button{width:40px;height:40px;border-radius:3px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.map-tools button svg{width:20px;height:20px}
.map-tools button.on{background:var(--tile);color:#fff}
.map-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted);padding:10px 0 0}
.map-legend span{display:inline-flex;align-items:center;gap:6px}
.map-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.map-legend i.line{width:20px;height:4px;border-radius:2px}
.pin{width:28px;height:28px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.35)}
.pin b{transform:rotate(45deg);color:#fff;font:700 12px/1 var(--body)}
.pin.home{background:var(--door)!important;width:32px;height:32px}
.pin.num b{font-size:13px}
.me-dot{width:18px;height:18px;border-radius:50%;background:#2a7de1;border:3px solid #fff;box-shadow:0 0 0 6px rgba(42,125,225,.25)}
.leaflet-popup-content{font:400 .92rem/1.45 var(--body);margin:12px 14px}
.leaflet-popup-content h4{font:700 1.1rem/1.2 var(--display);margin:0 0 4px}
.leaflet-popup-content p{margin:0 0 6px}
.leaflet-popup-content a{font-weight:600}
.leaflet-container{font-family:var(--body);background:#e8e5da}

/* Filtry */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 .88rem/1 var(--body);padding:.6em .9em;border-radius:99px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;text-decoration:none}
.chip svg{width:16px;height:16px}
.chip[aria-pressed=true],.chip.on{background:var(--ink);border-color:var(--ink);color:var(--linen)}

/* Karty regionów */
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:24px}
.rcard{display:grid;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);transition:transform .2s}
.rcard:hover{transform:translateY(-3px)}
.rcard:hover h3{color:var(--door)}
.rcard .art{aspect-ratio:16/10;background:var(--tile);position:relative;overflow:hidden}
.rcard .art svg{position:absolute;inset:0;width:100%;height:100%}
.rcard .art .num{position:absolute;left:14px;top:12px;font:700 1.6rem/1 var(--display);color:#fff;background:var(--door);width:44px;height:44px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.rcard .body{padding:18px 20px 22px;display:grid;gap:8px;align-content:start}
.rcard p{margin:0;color:var(--muted);font-size:.98rem}
.rcard .modes{display:flex;gap:8px;color:var(--tile)}
.rcard .modes svg{width:20px;height:20px}

/* Lista tras */
.routes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:18px}
.tcard{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);padding:16px;border-left:4px solid var(--c,var(--tile))}
.tcard .ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--c,var(--tile));color:#fff}
.tcard .ico svg{width:26px;height:26px}
.tcard h3{font-size:1.2rem;margin:0 0 4px}
.tcard p{margin:0;font-size:.92rem;color:var(--muted)}
.tcard .stats{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem;font-weight:600;color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums}
.tcard:hover h3{color:var(--door)}

/* Miejsca */
.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:0 36px}
.place{padding:18px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.place h3{font-size:1.25rem;margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.place p{margin:0}
.place .meta{font-size:.82rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.place .tip{font-size:.92rem;color:var(--ink);background:rgba(200,144,46,.12);border-left:3px solid var(--ochre);padding:6px 10px;margin-top:6px}
.stars{color:var(--door);letter-spacing:.08em;font-size:.95rem}
.cat{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.cat i{width:9px;height:9px;border-radius:50%}
.place a.go{font-size:.85rem;font-weight:600}

/* Ramki praktyczne (Pascal) */
.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.box{background:var(--paper);border:1px solid var(--line);padding:20px}
.box h3{font:700 .78rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--door);margin:0 0 8px}
.box p{margin:0;font-size:.98rem}
.box.dark{background:var(--tile);border-color:var(--tile);color:#e6ece7}
.box.dark h3{color:#f0b9a9}
.box ul{margin:0;padding-left:1.1em;font-size:.98rem}

/* Trasa krok po kroku */
.stops{list-style:none;margin:0;padding:0;counter-reset:s;position:relative}
.stops li{position:relative;padding:0 0 26px 58px;counter-increment:s}
.stops li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--door);color:#fff;display:grid;place-items:center;font:700 1rem/1 var(--display)}
.stops li::after{content:"";position:absolute;left:18px;top:42px;bottom:4px;width:2px;background:repeating-linear-gradient(var(--line) 0 6px,transparent 6px 10px)}
.stops li:last-child::after{display:none}
.stops h3{font-size:1.2rem;margin:4px 0 4px}
.stops .km{font:600 .8rem/1 var(--body);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.stops p{margin:4px 0 0}

.dl{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* Cytat / przerywnik w stylu reportażu */
.pull{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.35;border-left:4px solid var(--door);padding-left:22px;margin:28px 0;max-width:34ch}

/* CTA domu */
.stay{background:var(--door);color:#fff}
.stay .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.stay h2{color:#fff;margin:0 0 6px}
.stay p{margin:0;color:#f6d7d0;max-width:60ch}
@media (max-width:760px){.stay .wrap{grid-template-columns:1fr}}

/* Instalacja apki */
.install{background:var(--ink);color:#d6ddd8}
.install .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center}
.install img{width:72px;height:72px;border-radius:16px}
.install h2{color:#fff;font-size:1.6rem;margin:0 0 4px}
.install p{margin:0;font-size:.95rem}
.install .ios{font-size:.88rem;color:#aab4ad;margin-top:6px}
@media (max-width:760px){.install .wrap{grid-template-columns:auto 1fr}.install .btns{grid-column:1/-1}}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.status{font-size:.85rem;color:#b9c7bd;margin-top:6px}

/* Tematy */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:18px}
.theme{text-decoration:none;color:inherit;padding:22px;border:1px solid var(--line);background:var(--paper);display:grid;gap:8px;position:relative;overflow:hidden}
.theme .glyph{font:700 3.4rem/1 var(--display);color:var(--c)}
.theme h3{margin:0}
.theme p{margin:0;font-size:.95rem;color:var(--muted)}
.theme:hover h3{color:var(--door)}

/* Okruszki, stopka */
.crumbs{font-size:.85rem;color:#b9c7bd;margin-bottom:14px}
.crumbs a{color:#e6ece7}
.crumbs.dark{color:var(--muted)}.crumbs.dark a{color:var(--tile)}
footer{background:var(--ink);color:#aab4ad;font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:26px}
footer a{color:#e6ece7}
.attrib{font-size:.78rem;color:var(--muted);margin-top:8px}

.offline-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px;font-size:.88rem;z-index:2000;box-shadow:0 4px 16px rgba(0,0,0,.3)}

.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,56px);align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.sticky{position:sticky;top:76px}
@media (max-width:900px){.sticky{position:static}}

@media print{.nav,.map-tools,.install,.stay,footer{display:none}}

@media (max-width:640px){.hero .frame{display:none}.facts div{min-width:96px;padding-right:12px;margin-right:12px}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Szlaki znakowane (tematy: rowery, pttk) */
.trails{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px}
.trail{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--c);padding:18px 18px 14px}
.trail h3{font-size:1.15rem;margin:0 0 8px;display:flex;gap:10px;align-items:center}
.trail .mark{flex:none;width:30px;height:12px;background:linear-gradient(#fff 0 33%,var(--c) 33% 67%,#fff 67%);border:1px solid var(--line)}
.trail .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.82rem;font-weight:600;margin-bottom:8px;font-variant-numeric:tabular-nums}
.trail p{margin:0 0 8px;font-size:.95rem;color:var(--muted)}
.trail .src{font-size:.82rem;color:var(--door)}
.gvline{margin:0;background:var(--paper);border:1px solid var(--line);padding:20px 22px}
.gvline figcaption{font:700 .78rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--door);margin-bottom:12px}
.gvline ol{list-style:none;margin:0;padding:0;position:relative}
.gvline ol::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:4px;background:#e8792b;border-radius:2px}
.gvline li{position:relative;padding:5px 0 5px 30px;font-size:.98rem}
.gvline li::before{content:"";position:absolute;left:2px;top:10px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid #e8792b;box-sizing:border-box}
.gvline li.near{font-weight:700}
.gvline li.near::before{background:#e8792b}
.gvline li.home{margin:4px 0 8px 22px;padding-left:26px;border-left:3px dashed #c62828}
.gvline li.home::before{left:-9px;background:#b3261e;border-color:#b3261e}
.gvline li.home small{display:block;color:var(--muted);font-size:.85rem}
.gvline li.exit{color:var(--muted);font-style:italic}
.gvline li.exit::before{border-style:dashed}
.sources{padding-left:1.1em;font-size:.95rem}
.sources li{margin:4px 0}
.small{font-size:.85rem;color:var(--muted)}