/* Mały Marek · „Co napisał Marek” (/czytanie/). Książeczka przewracana jak papierowa. */

:root {
  --stol: #E7D9BF;
  --papier: #FBF6EC;
  --papier-2: #F4ECDC;
  --atrament: #22324A;
  --atrament-2: #3F4A5C;
  --kurz: #6A6356;
  --zloto: #7A5B2C;
  --zloto-jasne: #A8864F;
  --samogloska: #7E1616;   /* ciemna czerwień */
  --spolgloska: #2B170B;   /* bardzo ciemny brąz */
  --wosk: #B77C2C;         /* ciemny miód */
  --buk: #E2C28C;
  --serif: "EB Garamond", "Garamond", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* wielkość jednej strony (kwadrat) */
  --P: min(46vw, calc(100svh - 150px));
  --u: calc(var(--P) / 100);   /* 1% szerokości strony */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--stol); }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 30%, #F1E6D0 0%, var(--stol) 60%, #DCCBAB 100%);
  color: var(--atrament); font-family: var(--serif); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--zloto-jasne); }
:focus-visible { outline: 3px solid var(--zloto-jasne); outline-offset: 3px; }
p { margin: 0; }

/* ——— nagłówek ——— */
.gora {
  display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 32px);
  font-family: var(--sans); font-size: 0.9375rem;
}
.znak { font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.08em; font-variant-caps: small-caps; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.znak::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--zloto-jasne); }
.gora-tytul { margin: 0 auto; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--atrament-2); }
.gora-tytul span { font-style: normal; color: var(--kurz); }
.gora-link { color: var(--atrament-2); }

/* ——— scena i książka ——— */
.scena { flex: 1; display: grid; place-items: center; padding: 8px 12px; }
.ksiazka { position: relative; width: calc(var(--P) * 2); height: var(--P); perspective: calc(var(--P) * 6); }
.rozk {
  position: absolute; inset: 0; display: none; grid-template-columns: 1fr 1fr;
  filter: drop-shadow(0 18px 28px rgba(60, 40, 15, 0.25)) drop-shadow(0 2px 3px rgba(60, 40, 15, 0.18));
}
.no-js .rozk, .rozk.aktywna { display: grid; }
.str {
  position: relative; overflow: hidden;
  background: var(--papier); aspect-ratio: 1 / 1; width: 100%;
}
.str-l { border-radius: 6px 0 0 6px; background: linear-gradient(to left, #E9DFCB 0%, var(--papier) 7%, var(--papier) 100%); }
.str-p { border-radius: 0 6px 6px 0; background: linear-gradient(to right, #E9DFCB 0%, var(--papier) 7%, var(--papier) 100%); }
/* grzbiet */
.rozk::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px);
  background: linear-gradient(to bottom, rgba(90, 70, 40, 0.18), rgba(90, 70, 40, 0.3), rgba(90, 70, 40, 0.18));
  pointer-events: none;
}

/* okładka: zamknięta książka, widać tylko prawą stronę */
.rozk-okladka { transform: translateX(calc(var(--P) * -0.5)); }
.rozk-okladka::after { display: none; }
.str-wyklejka { visibility: hidden; }
.okladka { border-radius: 4px 8px 8px 4px; box-shadow: inset 6px 0 10px -6px rgba(60, 40, 15, 0.45); }
.okladka-obraz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.okladka-napis { position: absolute; left: 0; right: 0; top: calc(var(--u) * 7); text-align: center; padding-inline: calc(var(--u) * 6); }
.okladka-seria { font-family: var(--sans); font-size: calc(var(--u) * 2.6); letter-spacing: 0.16em; text-transform: uppercase; color: var(--zloto); }
.okladka h1 {
  margin: calc(var(--u) * 1.6) 0 0; font-weight: 500; font-size: calc(var(--u) * 10.5); line-height: 1; color: var(--atrament);
  text-shadow: 0 1px 0 rgba(251, 246, 236, 0.7), 0 0 24px rgba(251, 246, 236, 0.85);
}

/* ——— tekst rodzica ——— */
.str-l { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--u) * 11) calc(var(--u) * 12); gap: calc(var(--u) * 5); }
.tekst { font-size: calc(var(--u) * 5.9); line-height: 1.45; color: var(--atrament); }
.tekst-pod { text-align: center; font-size: calc(var(--u) * 5.6); margin-top: calc(var(--u) * 5); }
.znak-tab { display: block; width: calc(var(--u) * 10); height: calc(var(--u) * 6.6); border-radius: calc(var(--u) * 1); border: calc(var(--u) * 1.1) solid var(--buk); background: var(--wosk); opacity: 0.55; }
.nr-str { position: absolute; bottom: calc(var(--u) * 5); left: calc(var(--u) * 6); font-family: var(--sans); font-size: calc(var(--u) * 2.6); color: var(--kurz); letter-spacing: 0.08em; }

/* ——— ilustracje ——— */
.ilu { margin: 0; position: absolute; inset: 0; }
.ilu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ilu-mala { position: relative; inset: auto; width: 62%; aspect-ratio: 1; border-radius: calc(var(--u) * 1.2); overflow: hidden; box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 4) rgba(60, 40, 15, 0.2); align-self: center; }

/* ——— tabliczka (składana, nie generowana) ——— */
.str-p:has(.tab) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 4); }
.tab {
  width: 84%; aspect-ratio: 3 / 2; padding: calc(var(--u) * 6.5); border-radius: calc(var(--u) * 3);
  background:
    repeating-linear-gradient(92deg, rgba(150, 105, 50, 0.07) 0 calc(var(--u) * 0.35), transparent calc(var(--u) * 0.35) calc(var(--u) * 1.4)),
    linear-gradient(160deg, #EBCF9E 0%, var(--buk) 45%, #D2AE72 100%);
  box-shadow: 0 calc(var(--u) * 2.2) calc(var(--u) * 5) rgba(70, 45, 15, 0.28), inset 0 calc(var(--u) * 0.4) 0 rgba(255, 245, 220, 0.6), inset 0 calc(var(--u) * -0.5) 0 rgba(120, 80, 30, 0.25);
}
.str-p:has(.tab-druga) .tab { aspect-ratio: 2 / 1; padding: calc(var(--u) * 4.5); }
.tab-wosk {
  width: 100%; height: 100%; border-radius: calc(var(--u) * 1.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--lit) * 0.38);
  background-color: var(--wosk);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .05 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 25%, rgba(235, 180, 90, 0.55) 0%, rgba(183, 124, 44, 0) 60%),
    linear-gradient(180deg, #C38634 0%, #A96F24 100%);
  box-shadow: inset 0 calc(var(--u) * 0.9) calc(var(--u) * 1.6) rgba(60, 30, 5, 0.55), inset 0 calc(var(--u) * -0.4) calc(var(--u) * 0.6) rgba(255, 215, 150, 0.25);
}
.tab-wiersz { display: flex; justify-content: center; gap: calc(var(--lit) * 1.45); line-height: 1; }
.syl {
  font-family: var(--sans); font-weight: 500; font-size: var(--lit); letter-spacing: 0.02em; line-height: 1;
  display: inline-flex;
}
.syl span { text-shadow: 0 0.022em 0 rgba(255, 228, 170, 0.55), 0 -0.016em 0 rgba(50, 25, 5, 0.55); }
.syl .g { color: var(--samogloska); }
.tab-siatka .syl { min-width: 1.5em; justify-content: center; }  /* sylaby w kolumnach: MA nad ME */
.syl .s { color: var(--spolgloska); }

/* druga tabliczka na rozkładówce 16 odsłania się dopiero po „dalej” */
.js .tab-druga { opacity: 0; transform: translateY(calc(var(--u) * 2)) scale(0.97); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js .tab-druga.odkryta { opacity: 1; transform: none; }

/* ——— wstęp, instrukcja, koniec ——— */
.wstep, .jak { justify-content: center; gap: calc(var(--u) * 4); }
.wstep p, .jak p { font-size: calc(var(--u) * 4.3); line-height: 1.5; color: var(--atrament-2); }
.wstep-etykieta { font-family: var(--sans); font-size: calc(var(--u) * 2.8) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zloto) !important; }
.wstep-duzy { font-size: calc(var(--u) * 7) !important; line-height: 1.25 !important; color: var(--atrament) !important; font-style: italic; }
.wstep-prawa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12); text-align: center; }
.wstep-przyklad { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 5); }
.wstep-przyklad p { font-size: calc(var(--u) * 4.3); line-height: 1.5; color: var(--atrament-2); }
.wp-kolka { display: flex; gap: calc(var(--u) * 3); padding: calc(var(--u) * 4) calc(var(--u) * 6); border-radius: calc(var(--u) * 2); background: var(--wosk); box-shadow: inset 0 calc(var(--u) * 0.8) calc(var(--u) * 1.4) rgba(60, 30, 5, 0.45); border: calc(var(--u) * 2) solid var(--buk); }
.wp-kolka i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; display: block; }
.wp-kolka .g { background: var(--samogloska); }
.wp-kolka .s { background: var(--spolgloska); }
.wstep-dalej { font-family: var(--sans); font-size: calc(var(--u) * 3.2); color: var(--kurz); }
.jak { padding: calc(var(--u) * 6) calc(var(--u) * 8); gap: calc(var(--u) * 1.9); justify-content: flex-start !important; overflow-y: auto; }
.jak h2 { font-weight: 500; font-size: calc(var(--u) * 6); line-height: 1.1; margin: 0 0 calc(var(--u) * 1.5); }
.jak p { font-size: calc(var(--u) * 3.05); line-height: 1.45; }
.koniec { display: grid; place-items: center; padding: calc(var(--u) * 7); text-align: center; }
.koniec-srodek { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.6); }
.koniec-srodek p { font-size: calc(var(--u) * 3.7); line-height: 1.5; color: var(--atrament-2); }
.koniec-duzy { font-size: calc(var(--u) * 6.4) !important; line-height: 1.2 !important; color: var(--atrament) !important; }
.koniec-male { font-size: calc(var(--u) * 3.4) !important; }
.przycisk, .przycisk-pusty {
  font-family: var(--sans); font-weight: 500; font-size: max(14px, calc(var(--u) * 3.4)); letter-spacing: 0.03em;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 5); border-radius: 999px; border: 1px solid var(--atrament); cursor: pointer; text-decoration: none;
}
.przycisk { background: var(--atrament); color: var(--papier); }
.przycisk-pusty { background: transparent; color: var(--atrament); }

/* ——— przewracanie kartki (komputer) ——— */
.lisc {
  position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; z-index: 5;
  transition: transform .75s cubic-bezier(.45, .05, .25, 1);
}
.lisc.w-prawo { left: 50%; transform-origin: left center; }
.lisc.w-lewo { left: 0; transform-origin: right center; }
.lisc > .twarz, .podklad { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lisc > .tyl { transform: rotateY(180deg); }
/* kopia strony na kartce: ten sam kontekst (data-typ, data-przystanek) co rozkładówka, więc wygląda identycznie */
.twarz > .str, .podklad > .str { position: absolute; inset: 0; }
.lisc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .75s ease;
  background: linear-gradient(to right, rgba(40, 25, 5, 0.25), rgba(40, 25, 5, 0) 40%);
}
.lisc.leci::after { opacity: 1; }

/* ——— sterowanie ——— */
.sterowanie {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  width: min(34rem, calc(100% - 24px)); margin: 6px auto 14px; font-family: var(--sans);
}
.sterowanie button {
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(34, 50, 74, 0.25); cursor: pointer;
  background: var(--papier); color: var(--atrament); display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(60, 40, 15, 0.14); transition: transform .15s, background .2s;
}
.sterowanie button:hover { background: #fff; }
.sterowanie button:active { transform: scale(0.95); }
.sterowanie button:disabled { opacity: 0.35; cursor: default; }
.sterowanie svg { width: 26px; height: 26px; }
.st-nast { background: var(--atrament) !important; color: var(--papier) !important; border-color: var(--atrament) !important; }
.st-srodek { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.st-licznik { font-size: 0.875rem; color: var(--atrament-2); letter-spacing: 0.04em; }
.st-pasek { width: 100%; height: 3px; border-radius: 3px; background: rgba(34, 50, 74, 0.14); overflow: hidden; }
.st-pasek span { display: block; height: 100%; width: 0; background: var(--zloto-jasne); transition: width .5s ease; }

/* ——— telefon i wąskie okna: jedna kolumna, tekst nad tabliczką ——— */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  :root { --P: min(92vw, calc(100svh - 300px)); --u: calc(var(--P) / 100); }
  .gora-tytul { display: none; }
  .gora { justify-content: space-between; }
  .scena { align-items: center; padding-top: 4px; }
  .ksiazka { width: var(--P); height: auto; min-height: calc(var(--P) + 150px); perspective: none; }
  .rozk { position: relative; inset: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 10px; filter: none; }
  .rozk::after { display: none; }
  .rozk-okladka { transform: none; }
  .str-wyklejka { display: none; }
  .str { border-radius: 8px !important; box-shadow: 0 10px 24px rgba(60, 40, 15, 0.2); }
  .str-l { aspect-ratio: auto; min-height: 0; padding: 18px 20px; background: var(--papier); gap: 10px; }
  .str-l .tekst { font-size: 1.3rem; }
  .str-l .znak-tab { width: 34px; height: 22px; border-width: 4px; border-radius: 4px; }
  .nr-str { display: none; }
  [data-typ="ilustracja"] .str-l { order: 2; }
  .rozk-okladka .str-l { display: none; }
  .wstep p, .jak p { font-size: 1.05rem; }
  .wstep-duzy { font-size: 1.45rem !important; }
  .wstep-etykieta { font-size: 0.75rem !important; }
  .jak h2 { font-size: 1.6rem; }
  .ilu-mala { width: 70%; }
  /* tabliczka na całą szerokość ekranu i większe litery (odstęp między sylabami zostaje ≥ 2 litery) */
  .str-p:has(.tab) { aspect-ratio: auto; padding: 16px 0; background: transparent; box-shadow: none; --k: 1.42; }
  .str-p:has(.tab) .tekst-pod { color: var(--atrament); }
  .tab { width: 100%; padding: calc(var(--u) * 3.6); border-radius: 10px; }
  .str-p:has(.tab-druga) .tab { padding: calc(var(--u) * 3); }
  .rozk.wjazd-prawo { animation: wjazd-p .38s ease both; }
  .rozk.wjazd-lewo { animation: wjazd-l .38s ease both; }
  .sterowanie { position: sticky; bottom: 0; padding: 10px 0 max(12px, env(safe-area-inset-bottom)); margin-bottom: 0; background: linear-gradient(to top, var(--stol) 70%, rgba(231, 217, 191, 0)); width: 100%; padding-inline: 14px; }
}
@keyframes wjazd-p { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes wjazd-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .lisc { transition: none; }
  .rozk.wjazd-prawo, .rozk.wjazd-lewo { animation: none; }
}

/* zgoda na statystyki: na tej stronie w lewym dolnym rogu, żeby nie zasłaniać tabliczki */
.czytanie-strona .mm-zgoda { top: auto; right: auto; left: 20px; bottom: 20px; width: min(22rem, calc(100vw - 32px)); }
@media (max-width: 720px) { .czytanie-strona .mm-zgoda { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* ======================= „Tabliczka Marka” (duża książka) ======================= */
[data-przystanek] .str-l { justify-content: space-between; padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 9); }
.eyebrow-str { font-family: var(--sans); font-size: calc(var(--u) * 2.5); letter-spacing: 0.14em; text-transform: uppercase; color: var(--zloto); }
/* tekst rodzica: zwykły, mały, u dołu strony, żeby nie konkurował z tabliczką */
.dol { display: flex; flex-direction: column; gap: calc(var(--u) * 3.2); }
[data-typ="tabliczka"] .dol .tekst { font-size: calc(var(--u) * 4.6); }
[data-typ="ilustracja"] .dol .tekst, [data-typ="tekst"] .dol .tekst { font-size: calc(var(--u) * 5.4); }
.tekst-duzy { font-size: calc(var(--u) * 7) !important; line-height: 1.35; font-style: italic; }

/* tabliczka jako obraz (wyryty alfabet) */
.str-p:has(.tabl) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }
.tabl { width: 94%; position: relative; }
.tabl img { display: block; width: 100%; height: auto; }
.tabl-pusta canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.wygladz { font-size: max(13px, calc(var(--u) * 3)) !important; }

/* przystanek: data albo kreska */
.data-kamien { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 3); font-family: var(--sans); font-size: max(14px, calc(var(--u) * 3.4)); color: var(--atrament-2); }
.data-kamien input {
  font: inherit; width: 12ch; border: 0; border-bottom: 2px dotted var(--zloto-jasne); background: transparent; color: var(--atrament);
  padding: 4px 2px; outline: none;
}
.data-kamien input:focus { border-bottom-style: solid; }
.kreska { font: inherit; font-size: 0.85em; background: none; border: 1px solid rgba(34, 50, 74, 0.25); border-radius: 999px; padding: 4px 12px; color: var(--atrament-2); cursor: pointer; }
.ilu-sciezka img { object-fit: cover; }

/* ścieżka Kwitusa jako spis treści */
.sciezka-spis { justify-content: center !important; gap: calc(var(--u) * 3) !important; }
.sciezka-wstep { font-size: calc(var(--u) * 4.2); line-height: 1.45; color: var(--atrament-2); }
.spis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.spis li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(34, 50, 74, 0.12); }
.spis li:last-child { border-bottom: 1px solid rgba(34, 50, 74, 0.12); }
.spis a { display: flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 1.6) 0; text-decoration: none; flex: 1; }
.spis .kamien {
  width: calc(var(--u) * 6.4); height: calc(var(--u) * 5.2); border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #D9CDB5; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12); font-family: var(--sans); font-size: calc(var(--u) * 2.8); color: var(--atrament);
}
.spis .nazwa { font-size: calc(var(--u) * 4.2); }
.spis a:hover .nazwa { text-decoration: underline; text-decoration-color: var(--zloto-jasne); }
.data-spis { font-family: var(--sans); font-size: calc(var(--u) * 2.8); color: var(--zloto); }
.sciezka-mala { font-family: var(--sans); font-size: calc(var(--u) * 2.5); color: var(--kurz); }

/* ostatnia strona dla rodzica */
.koniec-rodzic { justify-content: flex-end !important; }
.rodzic-zdanie { font-size: calc(var(--u) * 4.4); line-height: 1.5; font-style: italic; color: var(--atrament-2); max-width: 80%; }

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-przystanek] .str-l { padding: 16px 20px; gap: 10px; }
  .eyebrow-str { font-size: 0.7rem; }
  [data-typ="tabliczka"] .dol .tekst { font-size: 1.1rem; }
  [data-typ="ilustracja"] .dol .tekst, [data-typ="tekst"] .dol .tekst { font-size: 1.2rem; }
  .tekst-duzy { font-size: 1.5rem !important; }
  .str-p:has(.tabl) { aspect-ratio: auto; padding: 8px 0; background: transparent; box-shadow: none; }
  .tabl { width: 100%; }
  [data-typ="tabliczka"] .str-l { order: 2; }
  .sciezka-wstep, .spis .nazwa { font-size: 1.05rem; }
  .spis .kamien { width: 30px; height: 26px; font-size: 0.8rem; }
  .spis a { padding: 9px 0; }
  .data-spis, .sciezka-mala { font-size: 0.8rem; }
  .rodzic-zdanie { font-size: 1.2rem; max-width: none; }
}
/* spis: cała ścieżka (panorama) mieści się w kwadratowej stronie */
[data-typ="sciezka"] .ilu-sciezka { display: grid; place-items: center; background: #F2E6CE; }
[data-typ="sciezka"] .ilu-sciezka img { height: auto; object-fit: contain; }
/* spis ścieżki musi się zmieścić na jednej stronie */
[data-typ="sciezka"] .sciezka-spis { padding: calc(var(--u) * 7) calc(var(--u) * 9) !important; gap: calc(var(--u) * 2.2) !important; }
[data-typ="sciezka"] .sciezka-wstep { font-size: calc(var(--u) * 3.6); }
[data-typ="sciezka"] .spis a { padding: calc(var(--u) * 1.1) 0; }
[data-typ="sciezka"] .spis .nazwa { font-size: calc(var(--u) * 3.7); }
[data-typ="sciezka"] .spis .kamien { width: calc(var(--u) * 5.4); height: calc(var(--u) * 4.4); font-size: calc(var(--u) * 2.4); }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-typ="sciezka"] .sciezka-spis { padding: 16px 20px !important; gap: 10px !important; }
  [data-typ="sciezka"] .sciezka-wstep, [data-typ="sciezka"] .spis .nazwa { font-size: 1.02rem; }
  [data-typ="sciezka"] .spis a { padding: 8px 0; }
  [data-typ="sciezka"] .spis .kamien { width: 30px; height: 26px; font-size: 0.8rem; }
  [data-typ="sciezka"] .str-p { aspect-ratio: auto; }
}