/* A chapter page: a few full screens, clicked through. No long scroll and no sideways scroll (the owner, 2026-10-16).
   Kinds of screens: a photo with its text, a route the jeep or a walker drives stop by stop, the dark under a torch,
   the bunker's photo with its window as the way in, and winter's snow. */
html, body.kapitola { height: 100%; overflow: hidden; overscroll-behavior: none; }
.sceny { position: fixed; inset: 0; }
/* the screens crossfade: the coming one fades in on top over 1.2 s while the leaving one stays whole under it, and goes
   once covered - no dip through the green between two photos (the owner, 2026-10-16: it flickered) */
.sc { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; z-index: 0; transition: opacity 0s linear 1.2s, visibility 0s linear 1.2s; background: var(--zelen); }
.sc.aktivna { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.2s ease-in-out; }
.sc.bez-prechodu, .sc.bez-prechodu .sc-foto, .sc.bez-prechodu .sc-text { transition: none !important; }
.sc-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 2s cubic-bezier(.2, .7, .2, 1); }
.sc.aktivna .sc-foto { transform: scale(1); }
.sc-tien::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(5, 13, 9, .92) 0%, rgba(5, 13, 9, .5) 40%, rgba(5, 13, 9, .12) 70%),
              linear-gradient(to right, rgba(5, 13, 9, .55), rgba(5, 13, 9, 0) 60%);
}
.sc-text {
  position: absolute; z-index: 3; left: var(--okraj); right: var(--okraj); bottom: clamp(104px, 15vh, 160px); max-width: 680px;
  opacity: 0; transform: translateY(24px); transition: opacity .35s ease, transform .35s ease;   /* the leaving words go first */
}
.sc.aktivna .sc-text { opacity: 1; transform: none; transition: opacity .8s ease .5s, transform 1s cubic-bezier(.2, .7, .2, 1) .5s; }
.sc-text h1, .sc-text h2 { font-weight: 200; font-size: clamp(42px, 6.4vw, 100px); line-height: .98; letter-spacing: -.035em; margin-bottom: 22px; }
.sc-text h2.mensi, .sc-dlhy .sc-text h2 { font-size: clamp(34px, 4.6vw, 70px); }
/* a screen with a long text: the smaller heading, and its box scrolls rather than reach under the header (7b) */
.sc-dlhy .sc-text { max-height: calc(100% - var(--hlavicka) - clamp(104px, 15vh, 160px) - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fakty-r { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.fakty-r li { display: grid; gap: 2px; font-size: 15px; }
.fakty-r li b { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--zlta); }
.zoznam { list-style: none; display: grid; gap: 10px; margin-top: 22px; max-width: 54ch; }
.zoznam li { padding-top: 10px; border-top: 1px solid var(--ciara); font-size: 15px; line-height: 1.55; color: var(--text-2); }
.zoznam li b { color: var(--biela); font-weight: 400; }

/* the parts of the chapter, at the bottom: click, arrow keys, a swipe or a wheel turn */
.podmenu {
  position: fixed; z-index: 30; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px; background: rgba(5, 13, 9, .55); backdrop-filter: blur(10px); border: 1px solid var(--ciara);
}
.podmenu button {
  font: inherit; font-size: 13px; color: var(--text-2); background: none; border: 0; cursor: pointer; min-height: 40px; padding: 0 14px;
  border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.podmenu button i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.podmenu button[aria-current="true"] { background: rgba(255, 255, 255, .1); color: var(--biela); }
.podmenu button[aria-current="true"] i { color: var(--zlta); }
.podmenu .sipka { width: 40px; padding: 0; justify-content: center; font-size: 16px; color: var(--biela); }
.podmenu .sipka:disabled { opacity: .3; cursor: default; }
.podmenu .sipka-dalej { width: auto; padding: 0 16px; gap: 6px; background: var(--zlta); color: #111; font-weight: 400; }
.podmenu .sipka-dalej:hover { filter: brightness(1.08); }

/* a route: the jeep or the walker drives to the next stop on each click */
.sc-trasa { background: radial-gradient(ellipse at 50% 40%, #153a2b, var(--zelen) 70%); }
.trasa-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.trasa-zaklad { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.trasa-hotova { fill: none; stroke: var(--zlta); stroke-width: 3; stroke-linecap: round; }
.trasa-svg .bod-z { fill: var(--zelen); stroke: rgba(255, 255, 255, .5); stroke-width: 2; cursor: pointer; transition: fill .3s ease, stroke .3s ease; }
.trasa-svg .bod-z.navstiveny { fill: var(--zlta); stroke: var(--zlta); }
.trasa-svg .bod-cislo { font-family: var(--mono); font-size: 11px; fill: var(--text-3); letter-spacing: .1em; }
.piechur { fill: var(--zlta); }
.piechur-kruh { fill: none; stroke: var(--zlta); stroke-width: 1.5; opacity: .5; }
.karta {
  position: absolute; z-index: 4; width: min(340px, calc(100% - 32px)); padding: 16px 18px; border-radius: 16px;
  background: rgba(5, 13, 9, .78); backdrop-filter: blur(10px); border: 1px solid var(--ciara);
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.karta.vidno { opacity: 1; transform: none; }
.karta i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--zlta); }
.karta b { display: block; font-weight: 300; font-size: 22px; letter-spacing: -.01em; margin: 4px 0 6px; }
.karta p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.trasa-hlava { position: absolute; z-index: 3; left: var(--okraj); top: calc(var(--hlavicka) + 24px); max-width: 560px; }
.trasa-hlava h2 { font-weight: 200; font-size: clamp(34px, 4.4vw, 64px); line-height: 1; letter-spacing: -.03em; }
.trasa-dalej { position: absolute; z-index: 4; right: var(--okraj); bottom: clamp(84px, 12vh, 120px); }

/* the dark under a torch: the bunker inside, and its plan */
.sc-tma { background: #030605; }
.latarka { position: absolute; inset: 0; z-index: 2; cursor: none; touch-action: none; }
.latarka-obsah {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle var(--r, 24vmin) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .92) 34%, rgba(0, 0, 0, .32) 68%, transparent 100%);
  mask-image: radial-gradient(circle var(--r, 24vmin) at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, .92) 34%, rgba(0, 0, 0, .32) 68%, transparent 100%);
}
.latarka.svetlo .latarka-obsah { -webkit-mask-image: none; mask-image: none; }
.latarka.svetlo { cursor: default; }
.beton {
  position: absolute; inset: 0;
  background-color: #2b2c28;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .62 0 0 0 0 .6 0 0 0 0 .55 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 50% 50%, #4a4a43, #22231f 75%);   /* a plain concrete wall: no lines (the owner, 2026-10-16) */
}
.latarka::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle calc(var(--r, 24vmin) * 1.4) at var(--mx, 50%) var(--my, 50%), rgba(255, 214, 150, .1), transparent 70%);
}
/* the facts under the torch, bigger (the owner, 2026-10-16), zigzagged between the heading and the buttons and bar:
   --t (0..1, written by the generator) is a fact's place in that band, so a short screen keeps them clear too */
.latarka-obsah { --zhora: calc(var(--hlavicka) + 250px); --zdola: 220px; }
.fakt-b {
  position: absolute; left: var(--x); top: calc(var(--zhora) + (100% - var(--zhora) - var(--zdola)) * var(--t, .5)); transform: translate(-50%, -50%);
  width: min(390px, 34vw);
  font-family: var(--mono); font-size: 16px; line-height: 1.5; letter-spacing: .02em; color: rgba(255, 255, 255, .88); text-align: center;
}
.fakt-b b { display: block; white-space: nowrap; font-family: var(--sans); font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -.01em; color: var(--zlta); margin-bottom: 6px; }
@media (min-width: 761px) and (max-height: 820px) {   /* a short laptop screen: a wider band, the facts a little smaller */
  .latarka-obsah { --zhora: calc(var(--hlavicka) + 205px); --zdola: 195px; }
  .fakt-b { font-size: 15px; width: min(400px, 36vw); }
  .fakt-b b { font-size: clamp(24px, 2.3vw, 32px); }
}
/* the scan hung on the concrete wall (the owner, 2026-10-16): centred across the screen and in the band below the heading
   and above the light's button and the bar, up to 62 % of the width as far as that band's height allows; a thin paper
   edge and a soft shadow on the wall. The frame is its own box, so the scan's colour filter leaves edge and shadow be */
.plan { position: absolute; left: 0; right: 0; top: calc(var(--hlavicka) + 175px); bottom: calc(clamp(84px, 12vh, 120px) + 60px); display: grid; place-items: center; }
.plan-ram {
  width: min(62vw, calc((100vh - var(--hlavicka) - 175px - clamp(84px, 12vh, 120px) - 60px - 16px) * 1.4168 + 16px));
  padding: 8px; background: #d9d3c5; outline: 1px solid rgba(0, 0, 0, .3); outline-offset: -1px;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .55), 0 8px 18px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .06);
}
.plan img { display: block; width: 100%; height: auto; filter: invert(1) sepia(.5) hue-rotate(5deg) saturate(1.4) brightness(.95); }
.tma-text { position: absolute; z-index: 3; left: var(--okraj); top: calc(var(--hlavicka) + 24px); max-width: 520px; pointer-events: none; }
.tma-text h2 { font-weight: 200; font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; }
.tma-text p { font-size: 14px; color: var(--text-2); }
.tma-tlacidla { position: absolute; z-index: 4; right: var(--okraj); bottom: clamp(84px, 12vh, 120px); display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* the campfire on the night (7d): no photo, the fire drawn by ognisko.js */
.sc-ognisko { background: radial-gradient(ellipse at 68% 66%, #12301f 0%, var(--zelen) 45%, #06140e 100%); }
.ohen { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
@media (max-width: 760px) { .sc-ognisko { background: radial-gradient(ellipse at 50% 42%, #12301f 0%, var(--zelen) 50%, #06140e 100%); } }

/* winter */
.sc-zima .sc-foto { filter: saturate(.35) hue-rotate(160deg) brightness(.72) contrast(1.05); }
.sneh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

@media (max-width: 760px) {
  /* a long text on a small phone scrolls in its box, never under the header (7b: "Kim jesteśmy" at 360 x 780) */
  .sc-text { bottom: 128px; max-height: calc(100% - var(--hlavicka) - 144px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .podmenu { bottom: 12px; max-width: calc(100% - 24px); }
  .podmenu button span { display: none; }
  .podmenu button[aria-current="true"] span { display: inline; }
  .podmenu .sipka-dalej .dalej-text { display: none; }
  .podmenu .sipka-dalej { padding: 0 14px; }
  .podmenu button { padding: 0 10px; }
  /* six screens or more (Wyprawy, 7d) fit a phone's bar only as numbers */
  .podmenu:has(button:nth-of-type(8)) button { padding: 0 8px; }
  .podmenu:has(button:nth-of-type(8)) button[aria-current="true"] span { display: none; }
  .dzwiek { bottom: 72px; }
  .trasa-dalej { bottom: 72px; right: 16px; }
  .tma-tlacidla { bottom: 72px; right: 16px; }
  /* a phone: one column, the zigzag kept by height; the band below its one- or two-line heading, the scan as before */
  .latarka-obsah { --zhora: calc(var(--hlavicka) + 190px); --zdola: 165px; }
  .fakt-b { font-size: 13px; left: 50% !important; width: 84vw; }
  .fakt-b b { font-size: 21px; }
  .plan { top: 30%; bottom: 14%; left: 8%; right: 8%; }
  .plan-ram { width: min(100%, calc((56svh - 16px) * 1.4168 + 16px)); padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc, .sc-foto, .sc-text, .sc.aktivna, .sc.aktivna .sc-text { transition: none; }
}

/* the information and the prices, on the same gentle photo screens (the owner, 2026-10-16) */
.sc-info::after { background: linear-gradient(to top, rgba(5, 13, 9, .94) 0%, rgba(5, 13, 9, .7) 50%, rgba(5, 13, 9, .35) 100%), linear-gradient(to right, rgba(5, 13, 9, .6), rgba(5, 13, 9, .1) 70%); }
.sc-info .sc-text { max-width: 980px; max-height: calc(100svh - var(--hlavicka) - 150px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sc-info .sc-text h2 { font-size: clamp(32px, 4vw, 60px); margin-bottom: 14px; }
.stlpce { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; margin-top: 20px; }
.stlpce > div { padding-top: 12px; border-top: 1px solid rgba(255, 193, 73, .5); }
.stlpce h3 { font-weight: 300; font-size: 19px; margin-bottom: 4px; }
.stlpce h3 i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--zlta); margin-left: 6px; }
.stlpce p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.stlpce p.cena-k { margin-top: 4px; font-size: 13px; color: var(--zlta); }
.cennik { width: 100%; max-width: 820px; margin-top: 18px; border-collapse: collapse; font-size: 15px; }
.cennik caption { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding-bottom: 6px; }
.cennik th, .cennik td { text-align: left; padding: 9px 10px 9px 0; border-top: 1px solid var(--ciara); vertical-align: top; font-weight: 300; }
.cennik thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); border-top: 0; }
.cennik td.cena { color: var(--zlta); white-space: nowrap; text-align: right; padding-right: 0; }
.cennik td small { display: block; font-size: 12px; color: var(--text-3); }
.cennik-poznamka { margin-top: 12px; font-size: 13px; color: var(--text-3); }
@media (max-width: 760px) {
  .sc-info .sc-text { max-height: none; top: calc(var(--hlavicka) + 16px); bottom: 128px; }
  .cennik { font-size: 14px; }
  .cennik td.cena { white-space: normal; }
}

/* the bunker's real photo: its window is the way in (the owner, 2026-10-16) */
.okno-obraz { position: absolute; inset: 0; transition: transform 1.15s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.okno-obraz img { width: 100%; height: 100%; object-fit: cover; object-position: var(--poz, 50% 50%); }
@media (max-width: 760px) { .okno-obraz img { object-position: var(--poz-m, var(--poz, 50% 50%)); } }   /* from the first paint (2026-10-16) */
.okno-obraz::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .45s ease .7s; pointer-events: none; }
.sc-okno.dnu .okno-obraz::after { opacity: 1; }
.sc-okno .sc-text { max-width: 520px; }
.sc-okno.dnu .sc-text, .sc-okno.dnu .okno-hot { opacity: 0; transition: opacity .3s ease; }
.okno-hot { position: absolute; z-index: 4; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 193, 73, .06); cursor: pointer; }
.okno-hot::before { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--zlta); border-radius: 12px; animation: pulz 2.4s ease-out infinite; }
@keyframes pulz { 0% { opacity: .95; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.3); } }
.okno-hot span {
  position: absolute; left: 100%; top: 50%; transform: translate(16px, -50%); white-space: nowrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--zlta); text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
@media (max-width: 760px) {
  .sc-okno .sc-text { top: calc(var(--hlavicka) + 16px); bottom: auto; }
  .okno-hot span { left: 50%; top: 100%; transform: translate(-50%, 12px); }
}
@media (prefers-reduced-motion: reduce) { .okno-hot::before { animation: none; } .okno-obraz { transition: none; } }
/* the EU project page (P5.7 v2, the owner 2026-10-20 ~21:15 UTC): laid out as the other chapters' information screens;
   the title sized for its length; under the text the full-colour marks set on a white plaque in the site's vocabulary -
   the text column's width, a card's 16 px radius, the screen's rhythm (on a website only the full-colour set, whose
   lettering is dark, so on a light ground) */
.sc-projekt .sc-text { max-width: 680px; }
.sc-projekt .sc-text h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.04; }
.hashtagi { margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--text-3); }
.znaki-tabula { margin-top: 22px; padding: clamp(12px, 1.2vw, 16px) clamp(16px, 1.6vw, 22px); background: var(--biela); border-radius: 16px; }
.znaki-tabula img { display: block; width: 100%; max-width: 560px; height: auto; }