/* Album: czarne kartony, białe odbitki w narożnikach, podpisy „białym długopisem”, okładka z zielonego płótna */
:root {
  --desk: #c4bcae;
  --desk-shade: #a39a8a;
  --paper: #24221f;
  --chalk: #eee8d8;
  --chalk-dim: rgba(238, 232, 216, .62);
  --cloth: #2f4a3f;
  --cloth-dark: #22362e;
  --gold: #c8a45c;
  --corner: #e6dcc2;
  --ink: #2b2925;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: radial-gradient(120% 90% at 50% 35%, #d3ccbf 0%, var(--desk) 70%) no-repeat;
  background-size: 100% 100svh;
  background-color: var(--desk);
  min-height: 100svh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.lb-open { overflow: hidden; }

/* ---------- górny pasek ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem) .4rem;
}
.topbar-title { font-size: 1.15rem; font-style: italic; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs { display: flex; gap: .25rem; }
.tab {
  background: none; border: 0; padding: .35rem .7rem; cursor: pointer;
  font-size: 1.05rem; font-weight: 600; color: rgba(43, 41, 37, .55);
  border-bottom: 2px solid transparent;
}
.tab.is-active { color: var(--ink); border-bottom-color: var(--cloth); }

/* ---------- scena z książką ---------- */
.stage {
  margin: 0 auto;
  width: min(1240px, 94vw, calc((100svh - 205px) * 1.47));
  padding-top: 1rem;
}
@media (max-width: 640px) {
  .stage { width: min(94vw, calc((100svh - 205px) * .735)); }
}
#book { margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(40, 32, 20, .35)); }

.controls { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0 1.4rem; }
.ctrl {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cloth); color: var(--chalk); font-size: 1.6rem; line-height: 1;
  display: grid; place-items: center; padding-bottom: 4px;
}
.ctrl:hover { background: var(--cloth-dark); }
.where { font-style: italic; font-size: 1.05rem; min-width: 14ch; text-align: center; }

/* ---------- strony ---------- */
.page {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--chalk);
  overflow: hidden;
}
.page-inner {
  position: relative; width: 100%; height: 100%;
  container-type: size;
  box-shadow: inset 0 0 6cqw rgba(0, 0, 0, .35);
}
.page button { background: none; border: 0; padding: 0; cursor: pointer; }
.page button * { pointer-events: none; } /* klik trafia w przycisk, nie w obrazek – wymóg biblioteki */
.folio {
  position: absolute; bottom: 2.2cqh; left: 0; right: 0; text-align: center;
  font-size: 3.4cqw; font-style: italic; color: var(--chalk-dim); opacity: .7;
}

/* ---------- okładka ---------- */
.page-cover {
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.08), transparent 60%);
}
.page-cover .page-inner { box-shadow: inset 0 0 0 1.2cqw var(--cloth-dark), inset 0 0 8cqw rgba(0,0,0,.4); }
.cover {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4cqh; padding: 10cqw; text-align: center;
}
.cover-rule { width: 30cqw; height: 0; border-top: .5cqw solid var(--gold); opacity: .8; }
.cover-title {
  margin: 0; color: var(--gold); font-weight: 600; font-size: 10cqw; line-height: 1.02; letter-spacing: .01em;
  text-shadow: 0 .3cqw 0 rgba(0,0,0,.45), 0 -.15cqw 0 rgba(255,240,200,.2);
  text-wrap: balance;
}
.cover-sub { margin: -1.5cqh 0 0; color: var(--gold); font-style: italic; font-size: 5cqw; opacity: .9; }
.cover-window { padding: 2.4cqw; border: .5cqw solid rgba(200, 164, 92, .7); background: var(--paper); }
.cover-window .print { --tilt: 0deg !important; }
.page-back .back { height: 100%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9cqh; }
.back-mark { color: var(--gold); font-style: italic; font-size: 4cqw; opacity: .75; }

/* ---------- odbitki ---------- */
.print {
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqh;
  transform: rotate(var(--tilt));
  cursor: zoom-in;
}
.print-photo {
  position: relative; display: block;
  padding: 1.6cqw;
  background: #f7f4ec;
  box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.55);
}
.print img {
  display: block; height: auto; aspect-ratio: var(--ar);
  width: min(72cqw, calc(27cqh * var(--ar)));
  background: #3a3733; object-fit: cover;
}
.spread-side .print img { width: min(36cqw, calc(58cqh * var(--ar))); }
.spread-solo .print img { width: min(74cqw, calc(64cqh * var(--ar))); }
.cover-window .print img { width: min(50cqw, calc(30cqh * var(--ar))); }

.corner {
  position: absolute; width: 6.5cqw; height: 6.5cqw; background: var(--corner);
  box-shadow: 0 .2cqw .5cqw rgba(0,0,0,.35);
}
.corner.tl { top: -1.4cqw; left: -1.4cqw; clip-path: polygon(0 0, 100% 0, 0 100%); }
.corner.tr { top: -1.4cqw; right: -1.4cqw; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner.bl { bottom: -1.4cqw; left: -1.4cqw; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.corner.br { bottom: -1.4cqw; right: -1.4cqw; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cover-window .corner { display: none; }

.note {
  display: flex; flex-direction: column; align-items: center; gap: .2cqh;
  max-width: 72cqw; text-align: center; transform: rotate(calc(var(--tilt) * -1.4));
}
.note-cap {
  font-family: var(--hand); font-size: 4.8cqw; line-height: 1.05; color: var(--chalk);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.note-meta { font-family: var(--hand); font-size: 3.8cqw; color: var(--chalk-dim); }
.spread-side .note { max-width: 38cqw; }
.spread-side .note-cap { font-size: 4.4cqw; -webkit-line-clamp: 3; }
.cover-window .note { display: none; }

.spread {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 4cqh 7cqw 7cqh;
}
.spread-side { flex-direction: row; align-items: center; gap: 4cqw; }
.spread-stack .print:nth-child(2) { align-self: flex-end; margin-right: 2cqw; }
.spread-stack .print:nth-child(1) { align-self: flex-start; margin-left: 2cqw; }

/* ---------- rozdział (dzień) ---------- */
.chapter { height: 100%; padding: 26cqh 12cqw 0; }
.chapter-title {
  margin: 0; font-family: var(--hand); font-weight: 600; font-size: 17cqw; line-height: .9; color: var(--chalk);
  padding-bottom: 2cqh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 C 30 2, 50 12, 80 6 S 140 3, 198 7' fill='none' stroke='%23c8a45c' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 60cqw auto no-repeat;
}
.chapter-date { margin: 5cqh 0 0; font-style: italic; font-size: 5.6cqw; color: var(--chalk); }
.chapter-places { margin: 3cqh 0 0; font-family: var(--hand); font-size: 7cqw; line-height: 1.1; color: var(--gold); }
.chapter-count { margin: 4cqh 0 0; font-size: 4cqw; color: var(--chalk-dim); }

/* ---------- spis ---------- */
.toc { height: 100%; padding: 12cqh 10cqw 10cqh; display: flex; flex-direction: column; }
.toc-title { margin: 0 0 4cqh; font-weight: 500; font-style: italic; font-size: 8cqw; color: var(--gold); }
.toc-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.toc-row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 3cqw;
  padding: 1.3cqh 0; text-align: left; border-bottom: .3cqw dotted rgba(238,232,216,.25) !important;
}
.toc-day { font-family: var(--hand); font-size: 6.4cqw; color: var(--chalk); }
.toc-meta { font-size: 3.8cqw; font-style: italic; color: var(--chalk-dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toc-n { font-size: 4cqw; color: var(--chalk-dim); }
.toc-row:hover .toc-day { color: var(--gold); }

/* ---------- koniec ---------- */
.ending { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqh; padding: 10cqw; text-align: center; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4cqh 10cqw; }
.stats div { display: flex; flex-direction: column; align-items: center; }
.stats dt { font-family: var(--hand); font-weight: 600; font-size: 13cqw; line-height: .95; color: var(--gold); }
.stats dd { margin: 0; font-style: italic; font-size: 4.2cqw; color: var(--chalk-dim); }
.ending-text { font-family: var(--hand); font-size: 8cqw; line-height: 1.15; color: var(--chalk); white-space: pre-line; transform: rotate(-2deg); }

/* ---------- awaryjnie bez animacji ---------- */
.no-flip #book { display: grid; gap: 1rem; justify-items: center; }
.no-flip .page { width: min(94vw, 520px); aspect-ratio: 500 / 680; }
.no-flip .controls { display: none; }

/* ---------- powiększenie ---------- */
.lb {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  grid-template-columns: 56px 1fr 56px;
  background: rgba(22, 21, 19, .95); color: var(--chalk);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.lb[hidden] { display: none; }
.lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; min-width: 0; }
.lb-fig img { max-width: min(92vw, 1600px); max-height: 76svh; width: auto; height: auto; border: 8px solid #f7f4ec; }
.lb-cap { margin: 0; font-family: var(--hand); font-size: 1.9rem; line-height: 1.1; text-align: center; max-width: 60ch; padding: 0 1rem; }
.lb-cap:empty { display: none; }
.lb-meta { margin: 0; font-style: italic; font-size: 1.05rem; color: var(--chalk-dim); text-align: center; }
.lb-btn { background: none; border: 0; color: var(--chalk); font-size: 2.6rem; cursor: pointer; width: 56px; height: 56px; }
.lb-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + .4rem); right: .4rem; font-size: 2.2rem; }
@media (max-width: 640px) {
  .lb { grid-template-columns: 1fr; }
  .lb-prev, .lb-next { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); }
  .lb-prev { left: .5rem; } .lb-next { right: .5rem; }
}

/* ---------- mapa ---------- */
.view-map { padding: .6rem clamp(.6rem, 3vw, 2.5rem) 1.2rem; }
#map { height: calc(100svh - 90px); border: 6px solid #f7f4ec; box-shadow: 0 14px 30px rgba(40,32,20,.3); background: #ddd; }
.pin { display: block; width: 160px; background: none; border: 0; padding: 0; cursor: zoom-in; text-align: left; }
.pin img { display: block; width: 100%; height: 110px; object-fit: cover; }
.pin span { display: block; margin-top: .3rem; font-family: var(--hand); font-size: 1.2rem; color: var(--ink); }

/* ---------- bramka z hasłem ---------- */
.gate-body {
  display: grid; place-items: center; padding: 1rem;
  background: var(--cloth);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
}
.gate { width: min(380px, 100%); display: flex; flex-direction: column; gap: .7rem; color: var(--gold); text-align: center; }
.gate h1 { margin: 0 0 1.2rem; font-weight: 600; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.05; }
.gate label { font-style: italic; font-size: 1.15rem; }
.gate input { padding: .8rem 1rem; font: inherit; font-size: 1.1rem; border: 1px solid var(--gold); background: rgba(0,0,0,.2); color: var(--chalk); }
.gate button { padding: .8rem; border: 0; background: var(--gold); color: var(--cloth-dark); font-weight: 600; font-size: 1.15rem; cursor: pointer; }
.gate-error { margin: 0; color: #f1c9a8; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---------- przyciski pod albumem ---------- */
.extras { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: -.5rem; padding: 0 1rem 1.3rem; }
.extra {
  min-height: 40px; padding: .35rem 1.1rem; cursor: pointer; border-radius: 999px;
  background: none; border: 1px solid rgba(43, 41, 37, .35); color: var(--ink);
  font-size: 1.05rem; font-style: italic;
}
.extra:hover { background: rgba(47, 74, 63, .08); }
.extra-main { background: var(--cloth); border-color: var(--cloth); color: var(--chalk); font-style: normal; font-weight: 600; }
.extra-main:hover { background: var(--cloth-dark); }

/* ---------- pokaz slajdów z rzutnika ---------- */
.proj {
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
  background: #0d0c0b; color: var(--chalk);
}
.proj[hidden] { display: none; }
.proj-beam {
  position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 226, 170, .17), rgba(255, 226, 170, .04) 55%, transparent 75%);
  animation: lamp 3.4s infinite steps(1);
}
@keyframes lamp { 0% { opacity: 1; } 46% { opacity: .9; } 47% { opacity: 1; } 72% { opacity: .95; } 73% { opacity: 1; } }
.slide {
  position: relative;
  --sw: min(92vw, calc((100svh - 200px) * 1.25));
  width: var(--sw);
  aspect-ratio: 5 / 4;
  padding: calc(var(--sw) * .07) calc(var(--sw) * .08) calc(var(--sw) * .09);
  background: #ece3cd;
  border-radius: 3% / 3.75%;
  box-shadow: 0 0 90px rgba(255, 220, 160, .18), 0 24px 60px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: opacity .25s ease, transform .25s ease;
}
.proj.is-switching .slide { opacity: 0; transform: scale(.97); }
.slide-window { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; border-radius: 2px; }
.slide-window img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(1.15) contrast(1.06) sepia(.08);
}
.slide-window img.is-portrait { object-fit: contain; }
.slide-window img.kb { animation: kb 7s ease-out forwards; }
.slide-window img[data-kb="0"] { transform-origin: 20% 30%; }
.slide-window img[data-kb="1"] { transform-origin: 80% 25%; }
.slide-window img[data-kb="2"] { transform-origin: 30% 80%; }
.slide-window img[data-kb="3"] { transform-origin: 75% 70%; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.15); } }
.slide-no { position: absolute; top: 1.6%; left: 4%; font-weight: 600; font-size: clamp(.8rem, 2vw, 1.05rem); color: #7a6f5b; }
.slide-label {
  position: absolute; left: 8%; right: 8%; bottom: 1.2%; text-align: center;
  font-family: var(--hand); font-size: clamp(1rem, 3vw, 1.6rem); color: #3d3a34;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proj-cap { position: relative; margin: 0; min-height: 2.3em; max-width: 60ch; text-align: center; font-family: var(--hand); font-size: clamp(1.3rem, 3.6vw, 2rem); line-height: 1.15; }
.proj-bar { position: relative; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.proj-bar button {
  min-height: 44px; min-width: 44px; padding: .4rem 1rem; cursor: pointer; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(238, 232, 216, .25); color: var(--chalk); font-size: 1.05rem;
}
.proj-bar button:hover { background: rgba(255, 255, 255, .14); }
@media (prefers-reduced-motion: reduce) { .proj-beam { animation: none; } }

/* ---------- „Dokładnie rok temu” ---------- */
.memory {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  width: min(680px, 94vw); margin: .3rem auto .2rem; padding: .55rem .8rem;
  background: var(--paper); color: var(--chalk); border-radius: 4px; box-shadow: 0 8px 20px rgba(40, 32, 20, .25);
}
.memory-pic { padding: 0; border: 3px solid #f7f4ec; background: none; cursor: zoom-in; transform: rotate(-3deg); line-height: 0; }
.memory-pic img { width: 54px; height: 54px; object-fit: cover; }
.memory-text { flex: 1; min-width: 10rem; }
.memory-kicker { margin: 0; font-family: var(--hand); font-size: 1.35rem; line-height: 1; color: var(--gold); }
.memory-title { margin: .1rem 0 0; font-style: italic; font-size: 1.1rem; }
.memory-go { min-height: 40px; padding: .35rem .9rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--gold); color: var(--cloth-dark); font-weight: 600; }
.memory-x { background: none; border: 0; color: var(--chalk-dim); font-size: 1.6rem; cursor: pointer; width: 40px; height: 40px; }

/* ---------- pocztówka ---------- */
.lb-card {
  margin-top: .3rem; min-height: 40px; padding: .35rem 1.1rem; cursor: pointer; border-radius: 999px;
  background: none; border: 1px solid rgba(238, 232, 216, .35); color: var(--chalk); font-size: 1.05rem;
}
.lb-card:hover { background: rgba(255, 255, 255, .1); }
.lb-fig figcaption { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.pc {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem;
  background: #0d0c0b; color: var(--chalk);
}
.pc[hidden] { display: none; }
.pc-box { width: min(94vw, 960px); display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.pc-box img { width: 100%; max-height: 72svh; object-fit: contain; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.pc-box img:not([src]) { display: none; }
.pc-hint { margin: 0; text-align: center; font-style: italic; color: var(--chalk-dim); }
.pc-bar { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.pc-bar > * {
  min-height: 44px; padding: .5rem 1.2rem; cursor: pointer; border-radius: 999px; font-size: 1.05rem; text-decoration: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(238, 232, 216, .3); color: var(--chalk); display: inline-flex; align-items: center;
}
.pc-bar > [hidden] { display: none; }
.pc-bar > *:hover { background: rgba(255, 255, 255, .16); }

.has-memory .stage { width: min(1240px, 94vw, calc((100svh - 290px) * 1.47)); }
@media (max-width: 640px) { .has-memory .stage { width: min(94vw, calc((100svh - 300px) * .735)); } }

/* ---------- nawigacja: powrót i języki ---------- */
.back { color: var(--ink); text-decoration: none; font-size: 1.1rem; font-style: italic; font-weight: 600; white-space: nowrap; }
.back:hover { text-decoration: underline; }
.topbar-right { display: flex; align-items: center; gap: .8rem; }
.lang { display: flex; gap: .15rem; }
.lang a {
  min-width: 34px; min-height: 34px; display: grid; place-items: center; padding: 0 .35rem;
  color: rgba(43, 41, 37, .55); text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: .04em;
  border-bottom: 2px solid transparent;
}
.lang a.is-active { color: var(--ink); border-bottom-color: var(--cloth); }
.gate-lang { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .6rem); right: 1rem; }
.gate-lang .lang a { color: rgba(200, 164, 92, .6); }
.gate-lang .lang a.is-active { color: var(--gold); border-bottom-color: var(--gold); }
a.memory-go { display: inline-flex; align-items: center; text-decoration: none; }
a.memory-pic { line-height: 0; }

/* ---------- strona główna: półka z albumami ---------- */
.home-head { text-align: center; padding: clamp(1rem, 5vh, 3rem) 1rem clamp(1rem, 3vh, 2rem); }
.home-rule { width: 70px; margin: 0 auto 1.1rem; border-top: 2px solid var(--cloth); }
.home-title {
  margin: 0 auto; max-width: 18ch; font-weight: 600; font-size: clamp(2.1rem, 6.5vw, 3.8rem); line-height: 1.02;
  text-wrap: balance; color: var(--ink);
}
.home-sub { margin: .7rem 0 0; font-style: italic; font-size: 1.15rem; color: rgba(43, 41, 37, .7); }
.home #memorySlot { padding: 0 1rem; }
.home .memory { margin-bottom: 1.4rem; }

.shelf {
  --gap: clamp(1.4rem, 4vw, 3rem);
  width: min(1180px, 100%); margin: 0 auto; padding: 1rem clamp(1.2rem, 4vw, 3rem) 4rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 38vw), 240px)); justify-content: center;
  column-gap: var(--gap); row-gap: 5.2rem;
}
.book { display: flex; flex-direction: column; align-items: stretch; min-width: 0; text-decoration: none; color: var(--ink); container-type: inline-size; }
.book-cover {
  position: relative; aspect-ratio: 500 / 680;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7cqw;
  padding: 12cqw 10cqw; text-align: center;
  background-color: var(--cloth);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.38) 0, rgba(255,255,255,.1) 3.5%, transparent 8%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 2.4cqw var(--cloth-dark), 6px 8px 18px rgba(40, 32, 20, .35);
  border-radius: 2px 5px 5px 2px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.book:hover .book-cover, .book:focus-visible .book-cover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: inset 0 0 0 2.4cqw var(--cloth-dark), 10px 16px 26px rgba(40, 32, 20, .35); }
.book:focus-visible { outline: none; }
.book:focus-visible .book-cover { outline: 3px solid var(--gold); outline-offset: 4px; }
.book-title {
  color: var(--gold); font-weight: 600; font-size: 12cqw; line-height: 1.02;
  text-shadow: 0 .4cqw 0 rgba(0,0,0,.45); text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.book-window { width: 78%; padding: 3cqw; border: .8cqw solid rgba(200, 164, 92, .7); background: var(--paper); line-height: 0; }
.book-window img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2cqw solid #f7f4ec; }
.book-date { color: var(--gold); font-style: italic; font-size: 7.5cqw; opacity: .9; }
.book-meta::before { /* deska półki */
  content: ''; position: absolute; top: -1.9rem; left: calc(var(--gap) / -2 - 2px); right: calc(var(--gap) / -2 - 2px); height: 18px;
  background: linear-gradient(#9a7853, #7a5b3c 45%, #5f452d);
  box-shadow: 0 10px 14px -6px rgba(40, 28, 15, .55), inset 0 1px 0 rgba(255, 235, 200, .35);
  pointer-events: none;
}
.book-meta { position: relative; margin-top: 1.9rem; text-align: center; font-style: italic; font-size: 1rem; color: rgba(43, 41, 37, .75); }
.shelf-empty { grid-column: 1 / -1; text-align: center; font-style: italic; font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .book-cover { transition: none; } }

@media (max-width: 560px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 4.2rem; }
  .book-meta { font-size: .9rem; }
}

/* ---------- mapa podróży z samolocikiem ---------- */
.tripmap-wrap { width: min(1100px, 94vw); margin: .5rem auto 3.2rem; }
.tripmap-title { margin: 0 0 .8rem; text-align: center; font-family: var(--hand); font-weight: 600; font-size: clamp(1.7rem, 4.5vw, 2.4rem); color: var(--ink); }
.tripmap-frame {
  position: relative; padding: clamp(6px, 1.2vw, 12px); background: #f7f4ec;
  box-shadow: 0 14px 30px rgba(40, 32, 20, .28); transform: rotate(-.4deg);
}
.tripmap-frame::before, .tripmap-frame::after { /* taśma */
  content: ''; position: absolute; top: -12px; width: 110px; height: 26px; background: rgba(236, 222, 186, .78);
  box-shadow: 0 1px 2px rgba(0,0,0,.12); z-index: 2;
}
.tripmap-frame::before { left: 8%; transform: rotate(-4deg); }
.tripmap-frame::after { right: 8%; transform: rotate(3deg); }
#tripmap { position: relative; width: 100%; min-height: 200px; overflow: hidden; }
#tripmap svg { display: block; width: 100%; height: auto; }
.tm-sea { fill: #b9cbc4; }
.tm-grid { fill: none; stroke: rgba(70, 70, 55, .12); stroke-width: .7; }
.tm-land { fill: #f1e8d4; stroke: #a8977a; stroke-width: .6; }
.tm-land.is-visited { fill: #e4c88d; }
.tm-route { fill: none; stroke: rgba(60, 50, 40, .28); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.tm-trail { fill: none; stroke: #5b2418; stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .85; transition: opacity 2.5s ease; }
.tm-trail.is-fading { opacity: .25; }
.tm-pin { cursor: pointer; outline: none; }
.tm-dot { fill: var(--pin); stroke: #fffdf7; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.tm-pulse { fill: none; stroke: var(--pin); stroke-width: 2; opacity: 0; transform-origin: center; transform-box: fill-box; }
.tm-pin.is-active .tm-pulse { animation: tmPulse 1.6s ease-out infinite; }
@keyframes tmPulse { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
.tm-label {
  font-family: var(--hand); font-weight: 600; font-size: 19px; fill: var(--ink);
  paint-order: stroke; stroke: #f7f1e3; stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.tm-pin:hover .tm-label, .tm-pin:focus-visible .tm-label { opacity: 1; }
.tm-pin.is-active .tm-label { opacity: 0; }
.tm-pin:focus-visible .tm-dot { stroke: var(--gold); stroke-width: 4; }
.tm-house { fill: #fffdf7; stroke: #5b2418; stroke-width: 1.6; stroke-linejoin: round; }
.tm-door { fill: #5b2418; }
.tm-home-label { font-family: var(--hand); font-size: 16px; fill: #5b2418; paint-order: stroke; stroke: #f7f1e3; stroke-width: 4px; }
.tm-plane { pointer-events: none; }
.tm-plane-bob { animation: tmBob 2.4s ease-in-out infinite; }
@keyframes tmBob { 50% { transform: translateY(-3px); } }
.tm-head { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.tm-body { fill: #b5452f; stroke: #5b2418; stroke-width: 2; stroke-linejoin: round; }
.tm-tail { fill: #9a3826; stroke: #5b2418; stroke-width: 2; stroke-linejoin: round; }
.tm-wing { fill: #efe2c4; stroke: #5b2418; stroke-width: 2; stroke-linejoin: round; }
.tm-rim { fill: none; stroke: #5b2418; stroke-width: 2.5; stroke-linecap: round; }
.tm-window { fill: #efe2c4; stroke: #5b2418; stroke-width: 1.5; }
.tm-prop { fill: rgba(60, 40, 30, .45); transform-origin: center; transform-box: fill-box; animation: tmProp .12s linear infinite; }
.tm-hub { fill: #5b2418; }
@keyframes tmProp { 50% { transform: scaleY(.15); } }
.tm-card {
  position: absolute; z-index: 3; display: flex; gap: .7rem; align-items: center; width: min(270px, 80%);
  padding: .55rem; background: #fffdf7; color: var(--ink); box-shadow: 0 8px 22px rgba(40, 32, 20, .3);
  animation: tmCard .25s ease-out;
}
.tm-card[hidden] { display: none; }
@keyframes tmCard { from { opacity: 0; transform: translateY(6px); } }
.tm-card img { width: 72px; height: 72px; object-fit: cover; flex: none; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.tm-card-text { min-width: 0; }
.tm-card-title { margin: 0; font-weight: 600; font-size: 1.2rem; line-height: 1.05; }
.tm-card-when { margin: .15rem 0 0; font-style: italic; font-size: .95rem; color: rgba(43, 41, 37, .7); }
.tm-card-go { display: inline-block; margin-top: .3rem; font-family: var(--hand); font-size: 1.25rem; color: #5b2418; text-decoration: none; }
.tm-card-go:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .tm-plane-bob, .tm-prop, .tm-pin.is-active .tm-pulse { animation: none; } }

/* ---------- liczniki na stronie głównej ---------- */
.counters { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem clamp(1.2rem, 4vw, 2.8rem); margin: 1.1rem auto 0; padding: 0; max-width: 900px; }
.counters > div { display: flex; flex-direction: column; align-items: center; min-width: 5.5rem; }
.counters > div[hidden] { display: none; }
.counters dt { font-family: var(--hand); font-weight: 600; font-size: clamp(2.1rem, 6vw, 2.9rem); line-height: 1; color: #5b2418; font-variant-numeric: tabular-nums; }
.counters dd { margin: .15rem 0 0; font-style: italic; font-size: 1.02rem; color: rgba(43, 41, 37, .75); white-space: nowrap; }

/* ---------- wklejki i pamiątki (bilety, paragony, mapki) ---------- */
.print.is-memento { transform: rotate(calc(var(--tilt) * 2)); }
.is-memento .print-photo { padding: 0; background: none; box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .65); }
.is-memento img { background: #ddd3bd; }
.tape {
  position: absolute; top: -2.2cqw; width: 15cqw; height: 4.6cqw;
  background: rgba(236, 222, 186, .82); box-shadow: 0 .2cqw .5cqw rgba(0, 0, 0, .2);
}
.tape.t1 { left: -3cqw; transform: rotate(-32deg); }
.tape.t2 { right: -3cqw; transform: rotate(32deg); }
.is-memento .note { transform: rotate(calc(var(--tilt) * -2)); }

/* ---------- dedykacja na dole strony głównej ---------- */
.dedication {
  width: min(560px, 90vw); margin: 0 auto; padding: 1.4rem 1rem calc(env(safe-area-inset-bottom, 0px) + 3rem);
  text-align: center; color: rgba(43, 41, 37, .78);
}
.dedication::before {
  content: ''; display: block; width: 120px; height: 1px; margin: 0 auto 1.1rem;
  background: linear-gradient(90deg, transparent, rgba(91, 36, 24, .45), transparent);
}
.ded-heart { width: 15px; height: 14px; fill: #a5462f; opacity: .85; display: block; margin: 0 auto .5rem; }
.ded-text { margin: 0; font-style: italic; font-size: 1.05rem; line-height: 1.35; text-wrap: balance; }
.ded-from { margin: .2rem 0 0; font-family: var(--hand); font-size: 1.45rem; line-height: 1.2; color: #5b2418; }
.tm-home-head { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
.tm-home-stick { stroke: #5b2418; stroke-width: 1.2; stroke-dasharray: 1.5 2.5; }