/* Wspomnienia z archangielskiej tajgi, Kazachstanu i Iranu — arkusz stylów */
:root{
  --papier:#f3f4f0; --papier-2:#e8ebe5; --tusz:#1d2224; --szary:#59615e;
  --swierk:#23473c; --stempel:#55468a; --linia:#d3d9d2;
  --szer:36rem;
  --szeryf:"Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#131716; --papier-2:#1b201f; --tusz:#dadfda; --szary:#97a19c;
    --swierk:#8fbaa8; --stempel:#b0a2e3; --linia:#2a3230;
  }
}
:root[data-theme="dark"]{
  --papier:#131716; --papier-2:#1b201f; --tusz:#dadfda; --szary:#97a19c;
  --swierk:#8fbaa8; --stempel:#b0a2e3; --linia:#2a3230;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 1rem)}
body{
  margin:0; background:var(--papier); color:var(--tusz);
  font-family:var(--szeryf); font-size:clamp(1.05rem, .98rem + .3vw, 1.2rem); line-height:1.7;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  font-optical-sizing:auto; text-rendering:optimizeLegibility;
}
a{color:var(--stempel); text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--stempel); outline-offset:3px; border-radius:2px}
.pomin{position:absolute; left:-999px; top:0}
.pomin:focus{left:1rem; top:1rem; background:var(--papier); padding:.4rem .8rem; z-index:10}
img{max-width:100%; height:auto}

/* pasek górny */
.pasek{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  max-width:60rem; margin:0 auto; padding:1rem 1.25rem; font-size:.9rem; border-bottom:1px solid var(--linia)}
.pasek-tytul{color:var(--tusz); text-decoration:none; font-weight:600}
.pasek-tytul span{font-weight:400; color:var(--szary)}
.pasek nav{display:flex; gap:1.25rem}
.pasek nav a{color:var(--szary); text-decoration:none}
.pasek nav a:hover,.pasek nav a[aria-current]{color:var(--tusz); text-decoration:underline}

/* pasek postępu czytania */
.postep{position:fixed; left:0; right:0; top:0; height:3px; z-index:5; pointer-events:none}
.postep span{display:block; height:100%; background:var(--stempel); transform-origin:0 50%; transform:scaleX(0)}

/* strona główna */
.glowna main{max-width:74rem; margin:0 auto; padding:0 1.25rem}
.okladka{padding:clamp(3rem, 10vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem); border-bottom:1px solid var(--linia)}
.autor{margin:0 0 1.2rem; font-size:1.05rem; color:var(--szary); letter-spacing:.01em}
.okladka h1{margin:0; font-weight:700; line-height:.98}
.h1-duze{display:block; font-size:clamp(2.4rem, .4rem + 11vw, 7.6rem); letter-spacing:-.035em; color:var(--swierk)}
.h1-male{display:block; margin-top:.6rem; max-width:22ch; font-size:clamp(1.45rem, 1rem + 2vw, 2.4rem); font-weight:400; font-style:italic; line-height:1.2; letter-spacing:-.01em}
.motto{margin:2.4rem 0 0; max-width:34rem; padding-left:1.1rem; border-left:2px solid var(--stempel); font-style:italic; color:var(--szary)}
.motto p{margin:0}
.akcje{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.4rem}
.przycisk{display:inline-block; padding:.7rem 1.2rem; border:1px solid var(--swierk); border-radius:3px; color:var(--swierk); text-decoration:none; font-size:1rem; line-height:1.3}
.przycisk:hover{background:var(--papier-2)}
.przycisk.glowny{background:var(--swierk); color:var(--papier)}
.przycisk.glowny:hover{filter:brightness(1.12); background:var(--swierk)}
.kontynuuj{margin:1.2rem 0 0; font-size:1rem}
.wydanie{margin:1.6rem 0 0; font-size:.9rem; color:var(--szary)}

.spis{padding:clamp(2.5rem, 6vw, 4rem) 0; border-bottom:1px solid var(--linia)}
.spis h2,.o-autorze h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem); margin:0 0 .6rem; letter-spacing:-.01em}
.spis-wstep{max-width:var(--szer); color:var(--szary); margin:0 0 2rem}

/* trasa: spis treści jako linia kolejowa */
.trasa{list-style:none; margin:0; padding:0; max-width:40rem; position:relative}
.trasa::before{content:""; position:absolute; left:.55rem; top:1.1rem; bottom:1.1rem; width:2px; background:var(--swierk)}
.trasa li{position:relative}
.trasa a{display:block; padding:.85rem 0 .85rem 2.4rem; color:var(--tusz); text-decoration:none}
.trasa .nr{display:block; font-size:.85rem; font-style:italic; color:var(--szary); line-height:1.3}
.trasa .nr:empty{display:none}
.trasa .tt{display:block; position:relative; font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); font-weight:600; line-height:1.3}
.trasa .tt::before{content:""; position:absolute; left:-2.27rem; top:.36em; width:.85rem; height:.85rem; border-radius:50%; background:var(--papier); border:2px solid var(--swierk)}
.trasa .pl{display:block; font-size:.95rem; color:var(--szary); line-height:1.4; margin-top:.15rem}
.trasa .cz{margin-left:.9em; font-size:.85rem; white-space:nowrap}
.trasa a:hover .tt{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}
.trasa li.ostatnio .tt::before{background:var(--stempel); border-color:var(--stempel)}
.trasa li.ostatnio .cz{color:var(--stempel)}
.trasa li.ostatnio .cz::before{content:"ostatnio czytane, "}

.o-autorze{padding:clamp(2.5rem, 6vw, 4rem) 0; max-width:var(--szer)}
.o-autorze p{margin:0 0 1em}
.dedykacja{padding:0 0 clamp(3rem, 8vw, 5rem); max-width:30rem; font-style:italic; color:var(--szary)}
.dedykacja p{margin:0 0 1em}

/* rozdział */
.rozdzial main{max-width:calc(var(--szer) + 2.5rem); margin:0 auto; padding:0 1.25rem}
.naglowek{padding:clamp(2.5rem, 8vw, 5rem) 0 2.2rem}
.tor{list-style:none; display:flex; justify-content:space-between; margin:0 0 2.6rem; padding:0; position:relative; max-width:22rem}
.tor::before{content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--linia)}
.tor li{position:relative}
.tor a{display:block; width:.8rem; height:.8rem; border-radius:50%; background:var(--papier); border:2px solid var(--swierk)}
.tor li.minione a{background:var(--swierk)}
.tor a[aria-current]{width:1.1rem; height:1.1rem; margin-top:-.15rem; background:var(--stempel); border-color:var(--stempel)}
.wu{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.numer{margin:0 0 .4rem; font-style:italic; color:var(--szary)}
.naglowek h1{margin:0; font-size:clamp(2.2rem, 1.4rem + 3.6vw, 3.6rem); line-height:1.05; letter-spacing:-.025em; color:var(--swierk)}
.miejsce{margin:.9rem 0 0; font-size:1.1rem; font-style:italic}
.meta{margin:.9rem 0 0; font-size:.88rem; color:var(--szary); display:flex; flex-wrap:wrap; gap:.4rem 1.2rem}

.tresc{hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.tresc p{margin:0}
.tresc p + p{text-indent:1.4em}
.tresc .wiersz,.tresc .wiersz + p{text-indent:0}
.tresc .wiersz{margin:1.3em 0 1.3em 1.4em; font-style:italic; line-height:1.6}
.tresc .wiersz + p{margin-top:0}
.odsylacz{line-height:0; font-size:.72em; margin-left:.08em}
.odsylacz a{text-decoration:none; padding:0 .12em}

.ilustracja{margin:2.2em 0; text-indent:0}
.ilustracja + p{text-indent:0}
.powieksz{display:block; cursor:zoom-in; border-radius:2px}
.ilustracja img,.mapa-trasy img{display:block; margin:0 auto; max-width:100%; width:auto; height:auto; max-height:min(78vh, 44rem); background:var(--papier-2)}
.ilustracja figcaption,.mapa-trasy figcaption{margin:.7em auto 0; max-width:32rem; font-size:.86em; line-height:1.5; font-style:italic; color:var(--szary); text-align:center; hyphens:manual}
.wpdf{font-style:normal; font-size:.9em; white-space:nowrap; margin-left:.3em}
.piosenka{margin:1.4em 0; overflow-x:auto}
.piosenka table{border-collapse:collapse; font-style:italic; font-size:.95em}
.piosenka th{font-style:normal; font-weight:400; font-size:.8em; color:var(--szary); text-align:left; padding:0 2rem .4rem 0}
.piosenka td{padding:0 2rem .1rem 0; vertical-align:top}
.piosenka .odstep td{height:.8em}
.piosenka + p{text-indent:0}

.przypisy{margin:3rem 0 0; padding-top:1.4rem; border-top:1px solid var(--linia); font-size:.86rem; line-height:1.55; color:var(--szary)}
.przypisy h2{font-size:1rem; margin:0 0 .8rem; color:var(--tusz)}
.przypisy ol{margin:0; padding-left:1.6rem}
.przypisy li{margin-bottom:.5em}
.przypisy li:target{color:var(--tusz); background:var(--papier-2)}
.wroc{text-decoration:none}

.nawigacja{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:3.5rem 0 0; padding:1.6rem 0; border-top:1px solid var(--linia)}
.nawigacja a{display:flex; flex-direction:column; text-decoration:none; color:var(--tusz); padding:.4rem 0}
.nawigacja-nast{text-align:right; grid-column:2}
.kier{font-size:.85rem; color:var(--szary)}
.nt{font-weight:600; line-height:1.35}
.nawigacja a:hover .nt{text-decoration:underline; text-underline-offset:.18em}

.stopka{max-width:60rem; margin:0 auto; padding:2rem 1.25rem 3rem; font-size:.85rem; color:var(--szary); border-top:1px solid var(--linia)}
.stopka p{margin:0 0 .5rem}
.stopka a{margin-right:1.2rem}
.rozdzial .stopka{margin-top:0}

/* czytnik PDF */
.czytnik{background:var(--papier-2)}
.czytnik .pasek{position:sticky; top:0; z-index:4; max-width:none; background:var(--papier); padding-top:calc(.7rem + env(safe-area-inset-top,0px)); margin-top:calc(-1 * env(safe-area-inset-top,0px)); padding-bottom:.7rem}
.narzedzia{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.9rem}
.narzedzia button{font:inherit; min-width:2.2rem; height:2.2rem; border:1px solid var(--linia); background:var(--papier); color:var(--tusz); border-radius:3px; cursor:pointer}
.narzedzia button:hover{border-color:var(--swierk)}
.narzedzia input{font:inherit; width:3.2em; text-align:center; padding:.25rem; border:1px solid var(--linia); background:var(--papier); color:var(--tusz); border-radius:3px}
.przycisk.maly{padding:.35rem .8rem; font-size:.9rem}
#strony{margin:0 auto; padding:1.2rem .6rem 3rem; width:min(100%, calc(52rem * var(--zoom,1))); max-width:none; overflow-x:auto}
.strona{position:relative; margin:0 auto 1rem; scroll-margin-top:calc(4.5rem + env(safe-area-inset-top,0px)); background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); width:100%}
.strona canvas{display:block; width:100%; height:100%}
.strona .nrs{position:absolute; right:.5rem; bottom:.3rem; font-size:.75rem; color:#777}
.komunikat{max-width:var(--szer); margin:3rem auto; padding:0 1.25rem}

@media (max-width:34rem){
  .pasek-tytul span{display:none}
  .nawigacja{grid-template-columns:1fr}
  .nawigacja-nast{grid-column:1; text-align:left; grid-row:1}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{
  .pasek,.postep,.tor,.nawigacja,.stopka,.meta a,.wpdf{display:none}
  body{background:#fff; color:#000; font-size:11pt}
}

/* okładka i mapa na stronie głównej */
.okladka-obraz{display:block; width:min(64vw, 16rem); margin:2.6rem auto 0}
.okladka-obraz img{display:block; width:100%; height:auto; box-shadow:0 2px 6px rgba(0,0,0,.18), 0 12px 32px rgba(0,0,0,.12)}
.spis-uklad{display:grid; gap:2.5rem}
.mapa-trasy{margin:0}
@media (min-width:60rem){
  .okladka{display:grid; grid-template-columns:minmax(0,1fr) clamp(18rem, 24vw, 23rem); column-gap:clamp(3rem, 5vw, 5rem); align-items:start}
  .okladka .h1-duze{font-size:clamp(4rem, 5.4vw, 6.8rem)}
  @supports (font-size:1cqi){
    .okladka h1{container-type:inline-size}
    .okladka .h1-duze{font-size:min(6.8rem, 14cqi)}
    .okladka .h1-male{font-size:min(2.4rem, 5cqi)}
  }
  .okladka > *{grid-column:1}
  .okladka-obraz{grid-column:2; grid-row:1 / span 7; width:100%; margin:.4rem 0 0}
  .spis-uklad{grid-template-columns:minmax(0,1fr) 28rem; column-gap:4rem; align-items:start}
  .mapa-trasy{position:sticky; top:1.5rem}
}

/* powiększenie ilustracji */
.lightbox{border:0; padding:0; margin:auto; max-width:100vw; max-height:100vh; width:100vw; height:100vh; background:rgba(12,14,14,.94); color:#e8ebe7}
.lightbox::backdrop{background:rgba(12,14,14,.94)}
.lightbox[open]{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(1rem + env(safe-area-inset-bottom,0px))}
.lightbox img{max-width:100%; max-height:calc(100vh - 7rem); width:auto; height:auto; object-fit:contain; cursor:zoom-out}
.lightbox p{margin:0; max-width:40rem; font-size:.9rem; font-style:italic; text-align:center}
.lightbox .zamknij{position:absolute; top:calc(.6rem + env(safe-area-inset-top,0px)); right:.8rem; width:2.6rem; height:2.6rem; font-size:1.8rem; line-height:1; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; cursor:pointer}
@media print{.powieksz{pointer-events:none} .wpdf{display:none}}

.glowna .stopka{max-width:74rem}

/* szersza kolumna tekstu na komputerze */
@media (min-width:64rem){
  .rozdzial{--szer:46rem}
  .rozdzial .tresc{line-height:1.75}
  .rozdzial .tresc > p:not(.wiersz){text-align:justify; text-justify:inter-word; hyphens:manual; -webkit-hyphens:manual;
    hyphenate-limit-chars:6 3 3; -webkit-hyphenate-limit-before:3; -webkit-hyphenate-limit-after:3}
  .rozdzial .pasek,.rozdzial .stopka{max-width:74rem}
}
@media (min-width:90rem){
  .rozdzial{--szer:50rem}
}