:root{
  color-scheme: light;
  --paper:#fbf8f0; --cream:#f3ecdd; --sage-soft:#d7e0d1; --sage:#9fb49b;
  --brass:#c1a05b; --brass-deep:#9a7a34; --moss:#3e6349; --forest:#264a34; --pine:#193425;
  --ink:#1c231a; --muted:#5e6b57; --line:rgba(25,52,37,.14); --line-soft:rgba(25,52,37,.08);
  --surface:#fbf8f0; --surface-alt:#f3ecdd; --card:#ffffff; --on-dark:#f3ecdd; --maxw:1160px;
  --map-ground:#f4f5ec; --map-water:#b7dcef; --map-water-line:#66a8cd; --map-water-label:#36718f;
  --map-park:#e2eed6; --map-park-line:#7da35f; --map-park-label:#55763f; --map-built:#e9e1d3;
  --map-mark:#264a34; --map-label:#1c231a; --map-pin:#c0392b;
  --serif:"DM Serif Display",Georgia,serif; --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#141d17; --cream:#1d2a20; --surface:#141d17; --surface-alt:#1b2720; --card:#1f2c24;
    --ink:#eef0e7; --muted:#a8b5a4; --line:rgba(243,236,221,.18); --line-soft:rgba(243,236,221,.1);
    --sage-soft:#2b3a2f; --moss:#8fb79c; --forest:#a9c9b3; --brass-deep:#d9bc7d;
    --map-ground:#18231b; --map-water:#2b4f68; --map-water-line:#6aa8cb; --map-water-label:#9ccbe2;
    --map-park:#22331f; --map-park-line:#6d8f52; --map-park-label:#a2bf86; --map-built:#2b3329;
    --map-mark:#a9c9b3; --map-label:#eef0e7; --map-pin:#e0614c; --map-pin:#e0614c;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#141d17; --cream:#1d2a20; --surface:#141d17; --surface-alt:#1b2720; --card:#1f2c24;
  --ink:#eef0e7; --muted:#a8b5a4; --line:rgba(243,236,221,.18); --line-soft:rgba(243,236,221,.1);
  --sage-soft:#2b3a2f; --moss:#8fb79c; --forest:#a9c9b3; --brass-deep:#d9bc7d;
  --map-ground:#18231b; --map-water:#2b4f68; --map-water-line:#6aa8cb; --map-water-label:#9ccbe2;
  --map-park:#22331f; --map-park-line:#6d8f52; --map-park-label:#a2bf86; --map-built:#2b3329;
  --map-mark:#a9c9b3; --map-label:#eef0e7; --map-pin:#e0614c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
section{padding-block:clamp(48px,7vw,96px)}
.alt{background:var(--surface-alt)}
.dark{background:var(--pine);color:var(--on-dark)}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0}
h2{font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.01em}
h3{font-size:21px;line-height:1.2}
p{margin:0}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:14px}
.dark .eyebrow,.hero .eyebrow{color:var(--brass)}
.lead{font-size:19px;line-height:1.7;max-width:62ch;margin-top:18px}
.dark .lead,.dark p{color:rgba(243,236,221,.92)}
.muted{color:var(--muted);font-size:15px}

/* — hero z wideo — */
.hero{position:relative;min-height:clamp(360px,62vh,560px);display:flex;align-items:flex-end;overflow:hidden;background:var(--pine)}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,52,37,.34) 0%,rgba(25,52,37,.12) 42%,rgba(25,52,37,.82) 100%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-block:44px}
.hero h2{color:#f5f0e4;max-width:20ch}
.hero p{color:rgba(245,240,228,.94);max-width:52ch;margin-top:14px;font-size:18px}
.hero .credit{position:absolute;right:18px;bottom:14px;z-index:1;font-size:11.5px;letter-spacing:.08em;color:rgba(245,240,228,.75)}

/* — nagłówek sekcji — */
.head{display:grid;gap:24px;grid-template-columns:1fr;align-items:end}
@media(min-width:900px){.head{grid-template-columns:1.15fr .85fr;gap:48px}}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px}
.fact b{display:block;font-family:var(--serif);font-size:30px;line-height:1.1}
.fact span{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* — paski odległości — */
.trip{margin-top:44px}
.trip-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.trip-title h3{font-size:19px}
.rail{position:relative;padding-block:56px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.rail-inner{position:relative;min-width:680px}
.rail-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.rail-done{position:absolute;left:0;top:0;height:2px;width:calc(var(--pos,0) * 100%);background:var(--brass);transition:width .25s linear}
.vehicle{position:absolute;top:-16px;left:calc(var(--progress,.12) * (100% - 64px));width:64px;height:32px;transition:left .25s linear}
.stops{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
.stop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;padding-top:22px}
.stop::before{content:"";position:absolute;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--surface);border:1.5px solid var(--moss)}
.alt .stop::before{background:var(--surface-alt)}
.stop.here::before,.stop.passed::before{background:var(--brass);border-color:var(--brass)}
.stop::before{transition:background .2s ease,border-color .2s ease,transform .2s ease}
.stop.passed .km,.stop.here .km{color:var(--ink)}
.stop:not(.passed):not(.here) .km{color:var(--muted)}
.stop.passed::before{transform:scale(1.08)}
.stop .km{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1;font-variant-numeric:tabular-nums}
.stop .km small{font-family:var(--sans);font-size:13px;letter-spacing:.06em;margin-left:3px}
.stop .name{font-size:13.5px;font-weight:500}
.stop .time{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* — mapa — */
.maps{display:grid;gap:20px;grid-template-columns:1fr;margin-top:20px}
@media(min-width:860px){.maps{grid-template-columns:1fr 1fr;align-items:stretch}}
.map-card.wide{margin-top:36px}
.map-side{background:var(--card);border:1px solid var(--line-soft);border-radius:20px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:16px}
.map-side h3{font-size:19px}
.key{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.key li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--muted)}
.key b{color:var(--ink);font-weight:600}
.sw{flex:none;width:22px;height:22px;border-radius:6px;margin-top:2px}
.sw.water{background:var(--map-water);border:1.5px solid var(--map-water-line)}
.sw.park{background:var(--map-park);border:1.5px dashed var(--map-park-line)}
.sw.built{background:var(--map-built);border:1.5px solid var(--line)}
.sw.pin{background:var(--map-pin);border:1.5px solid var(--map-pin);border-radius:50%}
.map-card{background:var(--card);border:1px solid var(--line-soft);border-radius:20px;padding:clamp(16px,3vw,24px)}
.map-cap{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.map-card svg{display:block;width:100%;height:auto;max-width:100%}
.routes{display:grid;gap:16px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:720px){.routes{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.routes{grid-template-columns:repeat(3,1fr)}}
.route{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line-soft);border-radius:16px;padding:18px}
.route .mark{flex:none;font-family:var(--serif);font-size:19px;line-height:1;padding:9px 11px;border-radius:10px;color:#fff;background:var(--m)}
.route b{display:block;font-size:15.5px;font-weight:600;margin-bottom:5px}
.route p{font-size:14.5px;line-height:1.55;color:var(--muted)}

/* — karty atrakcji ze zdjęciami — */
.cards{display:grid;gap:22px;grid-template-columns:1fr;margin-top:40px}
@media(min-width:680px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:9/6.4;object-fit:cover;display:block}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .tag{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}
.card p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.card .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink)}

/* — galeria — */
.gallery{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:36px}
@media(min-width:820px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:7/9;object-fit:cover;border-radius:14px;display:block}
.gallery figcaption{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* — notatka — */
.note{border-left:3px solid var(--brass);padding:4px 0 4px 20px;display:grid;gap:10px}
.note h3{font-family:var(--sans);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.note ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px;line-height:1.7}
@keyframes zt-pulse{0%{transform:scale(.55);opacity:.5}70%{transform:scale(2.7);opacity:0}100%{transform:scale(2.7);opacity:0}}
.pulse-ring{transform-box:fill-box;transform-origin:center;animation:zt-pulse 2.8s cubic-bezier(.22,.7,.3,1) infinite}
.pulse-ring.pulse-2{animation-delay:1.4s}
@media (prefers-reduced-motion: reduce){.vehicle{transition:none}.pulse-ring{animation:none;opacity:.25}}