/* Prezentační web knihy „Povídání o pejskovi a kočičce“.
   Vizuál je stejný jako ve hře (gdd/04-vytvarna-bible.md): fotka dubového stolu, na něm papír a kniha.
   Stránka se střídá mezi stolem (hlavička, ukázky, cena, patička) a papírem (text) — nic nemá vypadat jako
   aplikační panel: žádné kulaté knoflíky, žádné ikony, jen papír, inkoust a tužka.
   Barvy a písma jsou vytažené z herních assetů, ne vymyšlené znovu.
   Rozvržení podle návrhu `web-design/Web v2.dc.html` (10. 9. 2026). */

:root {
  color-scheme: light;

  --ink: #2b2418;          /* inkoust textu v knize */
  --ink-soft: #6d5c40;     /* tužka: druhotné texty, čárkované linky */
  --paper: #f4eddd;        /* papír stránky */
  --paper-shade: #e7dcc2;  /* papír ve stínu (proužky, sazba pod textem) */
  --cinnabar: #d9532a;     /* oranžová z obálky: čísla kapitol a drobné akcenty */
  --cinnabar-ink: #b8431a; /* táž oranžová ztmavená na kontrast 4,7:1 – odkazy a drobný text */
  --spine: #a8271f;        /* červené plátno hřbetu a záložky */
  --spine-dark: #8f1d16;
  --wood: #ac7742;         /* náhrada, než se načte fotka stolu */
  --wood-dark: #2a1d10;    /* ztmavení stolu pod světlým textem */
  --paper-light: #fbf4e4;  /* text na stole */
  --pencil: rgba(109, 92, 64, .5);  /* čárkované linky */
  --highlight: rgba(240, 205, 90, .5); /* podbarvení pastelkou jako u čtené věty v knize */

  --measure: 34rem;        /* délka řádku pod 70 znaků */
  --wrap: 70rem;
  --wrap-wide: 76rem;
  --gap: clamp(2.75rem, 6vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 1.0625rem/1.72 "Baloo 2", system-ui, sans-serif;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: var(--cinnabar-ink); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--spine); }

:focus-visible { outline: 2.5px solid var(--cinnabar); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
.wrap--wide { max-width: var(--wrap-wide); }
.measure { max-width: var(--measure); }

/* — Typografie ————————————————————————————————————————————————
   Baloo 2 nese nadpisy i text (je to písmo z obálky knihy), Patrick Hand jen
   Čapkovy věty a popisky u fotek — přesně jako v knize, kde je ručně psaný text na stránkách. */

h1, h2, h3 { font-weight: 800; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -.01em; }
h3 { font-size: 1.24rem; font-weight: 700; }
p { margin: 0 0 1.1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.26rem); line-height: 1.6; }
.small { font-size: .95rem; color: var(--ink-soft); }
.marked { background: linear-gradient(var(--highlight), var(--highlight)) 0 76% / 100% 64% no-repeat; }
.hand { font-family: "Patrick Hand", "Baloo 2", cursive; }
.eyebrow { display: block; font-family: "Patrick Hand", cursive; font-size: 1.2rem; color: var(--ink-soft); margin-bottom: .3rem; }

blockquote {
  margin: 1.6rem 0 0;
  font-family: "Patrick Hand", cursive;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.45;
}
blockquote p { margin: 0 0 .4em; }
blockquote cite { display: block; font: 500 .95rem/1.5 "Baloo 2", sans-serif; font-style: normal; color: var(--ink-soft); }

/* — Papír a stůl ————————————————————————————————————————————————
   Papír má jemné zrno (dlaždice z herního assetu), stůl je fotka stolu ze hry. */

body::before {
  content: "";
  position: fixed; inset: 0;
  background: url("img/zrno.webp?v=20260914190537") repeat;
  background-size: 320px;
  opacity: .5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
body > * { position: relative; z-index: 2; }

.desk { position: relative; background: var(--wood) url("img/stul.webp?v=20260914190537") center / cover; color: var(--paper); }
.desk > * { position: relative; }
.desk--dark::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 29, 16, .8), rgba(42, 29, 16, .62)); }
.desk--dark h2, .desk--dark .mark { color: var(--paper-light); }
.desk--dark .eyebrow { color: #e8d6ae; }
.desk--dark a { color: #f3b48f; }
/* papír položený na tmavém stole si nese vlastní barvy zpátky */
.desk .card, .desk .price, .desk .slip, .desk .facts { color: var(--ink); }
.desk .card h1, .desk .price h2, .desk .price h3, .desk .facts b { color: var(--ink); }
.desk .card .eyebrow, .desk .price .eyebrow, .desk .card .small, .desk .price .small, .desk .facts span { color: var(--ink-soft); }
.desk .card a:not(.btn), .desk .price a:not(.btn) { color: var(--cinnabar-ink); }

section { padding: var(--gap) 0; }

/* — Hlavička ————————————————————————————————————————————————— */

.hero { padding: clamp(1.6rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 5rem); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 62% 40%, rgba(255, 240, 205, .18), rgba(28, 18, 8, .42) 78%); }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.topbar .mark { font-family: "Patrick Hand", cursive; font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.2; color: var(--paper-light); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

.hero-in {
  max-width: var(--wrap-wide); margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  display: grid; grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 62rem) { .hero-in { grid-template-columns: minmax(0, 1fr); } }

/* Lístek s názvem — papír položený na stole, jako štítek na deskách knihy. */
.card {
  position: relative;
  padding: clamp(1.5rem, 3.2vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 3vw, 2rem);
  background: var(--paper); color: var(--ink);
  transform: rotate(-.7deg);
  box-shadow: 0 26px 46px -20px rgba(24, 14, 4, .8), 0 4px 10px rgba(24, 14, 4, .3);
  max-width: 29rem;
}
.card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(43, 36, 24, .22); pointer-events: none; }
.card > * { position: relative; }
.card h1 { margin-bottom: .55rem; }
.card .lead { margin-bottom: 1.3rem; }

.btn {
  display: inline-block; padding: .8rem 1.4rem;
  background: var(--spine); color: #f9f2e2;
  font: inherit; font-weight: 800; font-size: 1.08rem;
  text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 10px 20px -10px rgba(60, 10, 4, .8);
}
.btn:hover { background: var(--spine-dark); color: #f9f2e2; }
.btn--small { padding: .5rem 1.05rem; font-size: 1rem; background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: 0 8px 18px -8px rgba(20, 12, 4, .7); }
.btn--small:hover { background: #fff; color: var(--ink); }
@media (max-width: 40rem) { .topbar .btn--small { display: none; } } /* na mobilu bílé tlačítko v liště skrýt, stačí to v kartě pod ním (uživatel, 12. 9. 2026) */

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem .8rem; align-items: center; }
.card .small { margin: .9rem 0 0; }
.card .small + .small { margin-top: .35rem; }

/* Ukázka ze hry: video z opravdové hry (tools/web-video.mjs), okolo rekvizity ze stolu. */
.demo { position: relative; width: 104%; max-width: none; margin: 0 -2%; }
@media (max-width: 62rem) { .demo { width: 100%; margin: 0; } }
/* Záznam leží na stole v iPadu — tmavý rámeček obraz jasně oddělí od dřeva na pozadí
   a na první pohled je vidět, že jde o aplikaci na tabletu. Obraz je proto v poměru 4:3 jako displej. */
.demo-frame {
  /* rohy jsou soustředné: vnější rádius = rádius obrazovky + šířka rámečku, jinak si zaoblení navzájem nesedí */
  --bezel: clamp(9px, 1.7vw, 19px);
  --screen-radius: clamp(5px, 1vw, 12px);
  position: relative; margin: 0;
  padding: var(--bezel);
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: linear-gradient(155deg, #57534d 0%, #322e2a 14%, #23201d 52%, #443f39 88%, #6b655d 100%);
  box-shadow: 0 32px 52px -18px rgba(20, 12, 4, .9), 0 6px 14px rgba(20, 12, 4, .5), inset 0 0 0 1.5px rgba(255, 240, 215, .22);
  transform: rotate(-1deg);
}
.demo-frame::after { /* kamera na delší hraně, jako na iPadu na šířku */
  content: ""; position: absolute; left: 50%; top: calc(var(--bezel) / 2); transform: translate(-50%, -50%);
  width: .4rem; height: .4rem; border-radius: 50%;
  background: #12100e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.demo-stage { position: relative; border-radius: var(--screen-radius); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); }
.demo-frame video { display: block; width: 100%; height: auto; background: var(--wood-dark); }

/* Šipka na videu: ukázka běží potichu dokola, klepnutím se přetočí na začátek a pustí i s vypravěčem.
   Není to aplikační knoflík — papírové kolečko s inkoustovou šipkou, jako by leželo na fotce. */
.demo-play {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  background: radial-gradient(closest-side, rgba(28, 17, 6, .42), rgba(28, 17, 6, .12));
  border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--paper-light);
  transition: opacity .3s ease;
}
.demo-play-mark {
  width: clamp(3.2rem, 6.5vw, 4.6rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); border: 2px solid rgba(43, 36, 24, .6);
  box-shadow: 0 12px 24px -10px rgba(20, 12, 4, .85);
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.3, .75, .2, 1);
}
.demo-play-mark::after {
  content: ""; width: 0; height: 0; margin-left: .22em;
  border-left: .95rem solid var(--ink);
  border-top: .62rem solid transparent; border-bottom: .62rem solid transparent;
}
.demo-play[hidden] { display: none; }
.demo-play-label { font-family: "Patrick Hand", cursive; font-size: clamp(1rem, 1.6vw, 1.25rem); text-shadow: 0 2px 6px rgba(20, 12, 4, .85); }
.demo-play:hover .demo-play-mark { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .demo-play, .demo-play-mark { transition: none; } }
.demo .pencil { position: absolute; width: 22%; top: -8%; left: -3%; transform: rotate(-8deg); filter: drop-shadow(6px 9px 7px rgba(30, 16, 4, .45)); pointer-events: none; }
.demo .glasses { position: absolute; width: 18%; bottom: -7%; right: -2%; transform: rotate(5deg); filter: drop-shadow(6px 9px 7px rgba(30, 16, 4, .45)); pointer-events: none; }
.demo-caption {
  margin: clamp(.9rem, 2vw, 1.4rem) 0 0; text-align: center;
  font-family: "Patrick Hand", cursive; font-size: clamp(1rem, 1.6vw, 1.28rem);
  color: #f8efd9; text-shadow: 0 2px 6px rgba(20, 12, 4, .8);
}

/* Telefon: týž tmavý rámeček jako iPad, jen s většími rohy displeje a Dynamic Islandem u levého okraje
   (aplikace běží jen na šířku, ostrůvek je tedy na kratší straně). Snímky jsou celá obrazovka iPhonu 19,5:9. */
.demo-frame--phone {
  --bezel: clamp(6px, 1vw, 10px);
  --screen-radius: clamp(10px, 2.4vw, 22px);
  transform: none;
}
.demo-frame--phone::after { display: none; }
.demo-frame--phone .demo-stage::after {
  content: ""; position: absolute; left: 3.2%; top: 50%; transform: translateY(-50%);
  width: 2.4%; height: 19%; border-radius: 999px; background: #0c0b0a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.demo-frame--phone img { display: block; width: 100%; height: auto; }

/* Čtyři fakta na proužku papíru pod hlavičkou. */
.facts {
  max-width: var(--wrap); margin: clamp(2rem, 4vw, 3rem) auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--paper); color: var(--ink);
  box-shadow: 0 18px 34px -20px rgba(24, 14, 4, .75);
}
.facts > div { padding: 1.15rem 1.4rem; }
.facts > div + div { border-left: 1px dashed rgba(109, 92, 64, .45); }
.facts b { display: block; font-weight: 800; font-size: 1.05rem; }
.facts span { display: block; color: var(--ink-soft); font-size: .93rem; line-height: 1.35; margin-top: .15rem; }
@media (max-width: 34rem) {
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { border-left: 0; border-top: 1px dashed rgba(109, 92, 64, .45); }
}

/* — Jak se čte: řádky s kusem leporela ————————————————————————— */

.steps { margin-top: 2.4rem; }
.step {
  display: grid; grid-template-columns: clamp(3rem, 8vw, 6rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem); align-items: start;
  padding: 1.6rem 0; border-top: 1px dashed var(--pencil);
}
.step:last-child { border-bottom: 1px dashed var(--pencil); }
.step img { width: 100%; max-height: 7rem; object-fit: contain; object-position: top center; }
.step p { margin: .35rem 0 0; max-width: 46rem; }

/* — Ze stránek: vodorovné listování ————————————————————————————— */

.gallery-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; }
.gallery-nav { display: flex; gap: .6rem; }
.gallery-nav button {
  font: inherit; font-weight: 800; font-size: 1.3rem; cursor: pointer;
  width: 3rem; height: 3rem; background: var(--paper); color: var(--ink); border: 0;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7);
}
.gallery-nav button:hover { background: #fff; }
.gallery-nav button[disabled] { opacity: .45; cursor: default; }

.gallery {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { margin: 0; flex: 0 0 min(46rem, 82%); scroll-snap-align: start; }
.gallery img { display: block; width: 100%; filter: drop-shadow(12px 20px 22px rgba(0, 0, 0, .55)); }
.gallery figcaption {
  margin-top: .8rem; font-family: "Patrick Hand", cursive; font-size: 1.24rem;
  color: #f8f0dc; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.gallery-count { margin: 1.2rem 0 0; font-size: .95rem; color: #e2d0aa; }

/* — I na iPhonu: mřížka 2×2 – odstavec a telefon nahoře, dva telefony pod nimi; na úzkém displeji vše pod sebou ——— */
.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: clamp(1.6rem, 3.5vw, 3rem) clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.phone-intro { align-self: center; }
.phone-intro p { margin: .8rem 0 0; }
.phone { margin: 0; }
.phone:nth-child(1) .demo-frame { transform: rotate(-.8deg); }
.phone:nth-child(2) .demo-frame { transform: rotate(.5deg); }
.phone:nth-child(3) .demo-frame { transform: rotate(-.4deg); }
.phone figcaption { margin: 1rem .2rem 0; font-family: "Patrick Hand", cursive; font-size: 1.15rem; line-height: 1.35; color: var(--ink-soft); }

/* — Pro rodiče: lístek s inkoustovým okrajem ————————————————————— */

.slip {
  position: relative; padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--paper);
  box-shadow: 0 20px 38px -22px rgba(30, 20, 8, .8), 0 3px 8px rgba(30, 20, 8, .18);
  transform: rotate(-.35deg);
}
.slip::after { content: ""; position: absolute; inset: 9px; border: 1.5px solid rgba(43, 36, 24, .35); pointer-events: none; }
.slip > * { position: relative; }
.parents { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.parents img { filter: drop-shadow(8px 12px 14px rgba(30, 16, 4, .3)); }

.checks { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 40rem; }
.checks li { position: relative; padding: .62rem 0 .62rem 2.4rem; border-top: 1px dashed rgba(109, 92, 64, .45); }
.checks li:last-child { border-bottom: 1px dashed rgba(109, 92, 64, .45); }
.checks li::before {
  content: ""; position: absolute; left: .1rem; top: .95rem;
  width: 1.25rem; height: .72rem; border: solid var(--ink); border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg);
}

/* — Obsah knihy ————————————————————————————————————————————— */

.book-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.book-cols img { display: block; width: 100%; border-radius: 14px; transform: rotate(-1.4deg); box-shadow: 0 26px 44px -24px rgba(30, 16, 4, .6), 0 3px 10px rgba(30, 16, 4, .28); }

/* Deset pohádek jako fotky dvoustran nalepené na stránce, pod každou číslo tužkou a co v ní dítě dělá. */
.tales {
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; counter-reset: tale;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.6rem);
}
.tales li { counter-increment: tale; }
.tales img { display: block; width: 100%; transform: rotate(-.8deg); filter: drop-shadow(8px 14px 14px rgba(30, 16, 4, .32)); }
.tales li:nth-child(even) img { transform: rotate(.7deg); }
.tales h3 { position: relative; margin: 1.15rem 0 .3rem; padding-left: 2.4rem; font-size: 1.18rem; }
.tales h3::before {
  content: counter(tale) "."; position: absolute; left: .1rem; top: -.25rem;
  font: 400 1.65rem/1 "Patrick Hand", cursive; color: var(--cinnabar);
}
.tales p { margin: 0; padding-left: 2.4rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.55; }
.tales p b { color: var(--ink); font-weight: 700; }
@media (min-width: 60rem) {
  .tales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* deset karet ve třech sloupcích: poslední by zůstala sama vlevo, tak leží v prostředním sloupci, stejně široká jako ostatní */
  .tales li:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Co všechno dítě dělá: řádky gest, každé s výstřižkem z knihy. */
.gestures { margin: 2.2rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1.4rem 2.2rem; }
.gestures li { padding: 1rem 0 0; border-top: 1px dashed var(--pencil); }
.gestures b { display: block; font-weight: 800; font-size: 1.08rem; }
.gestures span { display: block; color: var(--ink-soft); font-size: .96rem; line-height: 1.5; margin-top: .2rem; }

/* Dvě další ukázky nad pásem dvoustran: dva iPady vedle sebe, každý s plakátem a kolečkem se šipkou. */
.clips {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.6rem);
}
.clip { margin: 0; }
.demo-frame--flat { transform: none; }
.clip:nth-child(odd) .demo-frame { transform: rotate(-.6deg); }
.clip:nth-child(even) .demo-frame { transform: rotate(.5deg); }
.clip figcaption {
  margin-top: 1rem; font-family: "Patrick Hand", cursive; font-size: 1.18rem; line-height: 1.35;
  color: #f8f0dc; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.gallery-head--strip { margin-top: clamp(2.5rem, 5vw, 4rem); }
.gallery-head--strip h3 { font-family: "Patrick Hand", cursive; font-weight: 400; font-size: 1.35rem; color: #e8d6ae; }

/* — Cena ————————————————————————————————————————————————————— */

.price {
  position: relative; max-width: 44rem; margin: 0 auto;
  padding: clamp(1.7rem, 4vw, 2.8rem);
  background: var(--paper); color: var(--ink);
  transform: rotate(.4deg);
  box-shadow: 0 28px 50px -24px rgba(0, 0, 0, .85);
}
.price::after { content: ""; position: absolute; inset: 9px; border: 1.5px solid rgba(43, 36, 24, .35); pointer-events: none; }
.price > * { position: relative; }
.price h2 { margin-bottom: .8rem; }
.price .checks { margin-top: 1.4rem; }
.price .cta-row { margin-top: 1.8rem; }

/* — Otázky ————————————————————————————————————————————————— */

.faq { max-width: 46rem; }
.faq h2 { margin-bottom: 1.8rem; }
.faq > div { padding: 1.2rem 0; border-top: 1px dashed var(--pencil); }
.faq > div:last-child { border-bottom: 1px dashed var(--pencil); }
.faq h3 { margin-bottom: .3rem; }
.faq p { margin: 0; }

/* — Patička ————————————————————————————————————————————————— */

footer.desk { padding: clamp(2.5rem, 5vw, 4rem) 0; }
footer .cols { display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; justify-content: space-between; align-items: flex-end; }
footer .mark { font-family: "Patrick Hand", cursive; font-size: 1.5rem; margin: 0 0 .5rem; }
footer .small { color: #d9c9a6; margin: 0; max-width: var(--measure); }
footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* — Objevování při rolování ——————————————————————————————————— */

/* jen když běží JS – bez něj (a při vypnutých animacích) je obsah rovnou vidět */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* — Podpora a soukromí ————————————————————————————————————————— */

.page { max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1.1rem, 4vw, 2.5rem) 4rem; }
.page h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: .6rem; }
.page h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2.4rem 0 .8rem; }
.page .updated { color: var(--ink-soft); font-size: .95rem; }
.page dt { font-weight: 700; margin-top: 1.2rem; }
.page dd { margin: .3rem 0 0; }
.page ul { padding-left: 1.2rem; }
.page footer { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px dashed var(--pencil); font-size: .95rem; color: var(--ink-soft); }
.back { display: inline-block; margin-bottom: 2rem; font-size: .95rem; }