/* Vzhled praguecore.com — SPOLEČNÝ pro českou i anglickou verzi.
 *
 * ⚠️ Proč není uvnitř index.html, jak to bylo původně: od chvíle, kdy
 *    existují dvě jazykové verze, by se dvě kopie stylů rozešly. Takhle
 *    je jedno místo a druhá verze se nemůže „zapomenout".
 *
 * Vedlejší zisk: stránky už nepotřebují `style-src 'unsafe-inline'`.
 *
 * SMĚR (redesign 7. 10. 2026 podle designu MĚDIRYT ze sbírky
 * design.praguecore.com): „tichá výheň". Tmavý grafit z fotoskenu
 * broušeného kovu, MĚĎ JEN V AKCENTECH (titulky, čísla, tlačítka),
 * modrá z jádra plakety jen na diodách a fokusu. Titulky Instrument
 * Serif s kurzívou jako jediným ozdobným gestem, text Geist, štítky
 * Geist Mono. Do v3.2 to byl Titan One + Baloo 2 na rudohnědé desce —
 * výrazné, ale hlučné; vedle sbírky designů působilo nejslaběji.
 * Materiál jsou bitmapy ve /textury/, písma ve /pismo/, obojí s otiskem
 * v názvu. Vlastní doména, CSP img-src 'self' drží; žádný skript,
 * žádný externí zdroj.
 *
 * ⚠️ Texty v CSS `content` musí zůstat jazykově neutrální (čísla,
 *    znaky) — soubor sdílí česká i anglická verze.
 */



:root {
  color-scheme: dark;

  --pozadi:       #0c0a09;
  --pozadi-karta: #151211;
  --povrch-hrana: rgba(255, 244, 232, .035);
  --text:         #f3ede7;

  --text-tlumeny: #a39990;
  --linka:        #25201d;
  --linka-silna:  #3b332e;

  --akcent:       #df956a;
  --akcent-syty:  #f0a77c;
  --akcent-text:  #1b0e07;
  --zar:          #ff6a45;
  --jadro:        #62d2e3;

  --deska: url("/textury/deska-grafit.f71c30a7.webp");
  --deska-krok: 32rem 32rem;
  --deska-rezim: overlay;

  /* Tlačítko = plná barva + přeliv světla přes ni. Pod myší se mění jen
     barva, a ta se dá plynule animovat (přeliv by přeskočil). */
  --tlacitko-barva:       #e0966a;
  --tlacitko-barva-hover: #eba57b;
  --tlacitko-hrana: rgba(255, 236, 220, .45);

  --med-albedo: linear-gradient(104deg,
    #d08459 0%, #e6a279 30%, #f3c4a0 50%, #e29a70 72%, #cf8356 100%);
  --med-odlesk: linear-gradient(104deg,
    rgba(255, 255, 255, 0)    36%,
    rgba(255, 243, 230, .26)  47%,
    rgba(255, 250, 244, .42)  50%,
    rgba(255, 238, 220, .18)  54%,
    rgba(255, 255, 255, 0)    64%);

  --med-lesk-pas: linear-gradient(104deg,
    rgba(255, 255, 255, 0)    44%,
    rgba(255, 249, 240, .55)  50%,
    rgba(255, 255, 255, 0)    56%);
  --med-tahy: url("/textury/med-tahy.e3b15456.webp");

  --svit-med: color-mix(in srgb, #d98a5c 26%, transparent);
  --svit-zar: color-mix(in srgb, var(--zar) 10%, transparent);
  --aurora-sila: 1;

  --sklo: 97%;

  --pismo: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --pismo-titulek: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
           Georgia, serif;
  --pismo-stroj: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code",
           Menlo, Consolas, monospace;

  --sirka: 76rem;

  --okraj: 1.5rem;
  --radius: 18px;
  --radius-male: 12px;
  --prechod: .25s ease;

  --dojezd: cubic-bezier(.16, 1, .3, 1);
  --sekce: clamp(4rem, 8vw, 7rem);
}

:root:has(#tema-svetly:checked) {
  color-scheme: light;

  --pozadi:       #f3eee7;
  --pozadi-karta: #fbf8f4;
  --povrch-hrana: rgba(255, 255, 255, .7);
  --text:         #1d1815;
  --text-tlumeny: #5f554d;
  --linka:        #e1d8ce;
  --linka-silna:  #b9aa9c;

  --akcent:       #99461f;
  --akcent-syty:  #7a3313;
  --akcent-text:  #fff8f2;
  --zar:          #c8401c;
  --jadro:        #0a6070;

  --deska: url("/textury/deska-papir.1900ec7e.webp");
  --deska-krok: 32rem 18.75rem;
  --deska-rezim: normal;

  --tlacitko-barva:       #9a4822;
  --tlacitko-barva-hover: #833a18;
  --tlacitko-hrana: rgba(255, 214, 190, .35);

  --med-albedo: linear-gradient(104deg,
    #7d3918 0%, #93481f 30%, #a4562a 50%, #8c421c 72%, #773516 100%);
  --med-odlesk: linear-gradient(104deg,
    rgba(255, 255, 255, 0)    36%,
    rgba(255, 226, 200, .10)  48%,
    rgba(255, 236, 214, .16)  50%,
    rgba(255, 255, 255, 0)    62%);
  --med-lesk-pas: linear-gradient(104deg,
    rgba(255, 255, 255, 0)    44%,
    rgba(255, 238, 220, .22)  50%,
    rgba(255, 255, 255, 0)    56%);

  --svit-med: color-mix(in srgb, #d98a5c 22%, transparent);
  --svit-zar: color-mix(in srgb, #f08a5c 10%, transparent);
  --aurora-sila: .16;

  --sklo: 96%;
}

/* Titulkové písmo `optional`: je přednačtené, takže skoro vždy dorazí včas;
   když ne, zůstane pro tu návštěvu záložní — místo aby se titulek po
   načtení přesázel a odsunul úvod o řádek (CLS až 0,22, tester kolo 7). */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("/pismo/instrument-latin.5eb09b5a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("/pismo/instrument-latinext.290e6267.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: optional;
  src: url("/pismo/instrument-kurziva-latin.5a51946d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: optional;
  src: url("/pismo/instrument-kurziva-latinext.d0014821.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: optional;
  src: url("/pismo/geist-latin.19f9c925.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: optional;
  src: url("/pismo/geist-latinext.824f485b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/pismo/geistmono-latin.684ad5b5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/pismo/geistmono-latinext.1a189eb9.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (min-width: 48rem) {
  :root { --okraj: 2.5rem; }
}
body {
  margin: 0;
  font-family: var(--pismo);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.006em;
  color: var(--text);

  background: var(--deska) 0 0 / var(--deska-krok) repeat, var(--pozadi);
  /* Grafit je ŠEDÁ MAPA DETAILU (průměr 128) přimíchaná `overlay`: tmavá
     deska uložená přímo ve WebP ztratila kompresí skoro všechen detail
     (0,68 → 0,05) a byla rozmazaná (vlastník 8. 10.: „hnusně low res"). */
  background-blend-mode: var(--deska-rezim, normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 0;
}

.plocha {
  width: 100%; max-width: calc(var(--sirka) + 2 * var(--okraj));
  margin: 0 auto; padding: 0 var(--okraj);
}
::selection { background: color-mix(in srgb, var(--akcent) 32%, var(--pozadi)); color: var(--text); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; }

main, main [id], main section { scroll-margin-top: 7.25rem; }
@media (max-width: 21rem) {
  main, main [id], main section { scroll-margin-top: 8.5rem; }
}
main:focus-visible { outline: none; }

.preskocit {
  position: fixed; left: -9999px; top: .75rem; z-index: 100;
  background: var(--akcent); color: var(--akcent-text);
  padding: .6rem 1.1rem; border-radius: 999px;
  font-weight: 500; text-decoration: none;
}
.preskocit:focus { left: .75rem; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--jadro); outline-offset: 3px; }
nav a:focus-visible, .odkaz:focus-visible { border-radius: 4px; }

.jen-ctecka {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

header {
  position: sticky; top: 0; z-index: 5;
  background: var(--pozadi);
  border-bottom: 1px solid var(--linka);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header {
    background: color-mix(in srgb, var(--pozadi) var(--sklo), transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
  }
}

header .plocha {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "znacka  ovladani"
    "nabidka nabidka";
  gap: 0 1rem;
  min-height: 4.75rem;
  padding-block: .4rem;
  line-height: 1.6;

  --pilulka: 2rem;
}
.znacka {
  grid-area: znacka; justify-self: start;
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: 1.45rem; line-height: 1; letter-spacing: -.005em;
}
.znacka span { transition: color var(--prechod); }
.znacka:hover span { color: var(--akcent); }

.znacka img { height: 44px; width: auto; flex: none; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.ovladani { grid-area: ovladani; display: flex; align-items: center; gap: .5rem; }

header nav {
  grid-area: nabidka; min-width: 0;
  display: flex; align-items: center; gap: 1.35rem;
  margin-inline: calc(-1 * var(--okraj)); padding-inline: var(--okraj);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg,
    transparent, #000 var(--okraj), #000 calc(100% - var(--okraj)), transparent);
  mask-image: linear-gradient(90deg,
    transparent, #000 var(--okraj), #000 calc(100% - var(--okraj)), transparent);
}
header nav::-webkit-scrollbar { display: none; }

header nav:has(a:focus-visible) {
  flex-wrap: wrap; row-gap: 0; overflow: visible;
  -webkit-mask-image: none; mask-image: none;
}
header .plocha:has(nav a:focus-visible)::after { display: none; }

header .plocha { timeline-scope: --nabidka; }
header nav { scroll-timeline: --nabidka inline; }
header .plocha::after {
  content: ""; grid-area: nabidka; justify-self: end; align-self: center;
  width: .4rem; height: .4rem; margin-right: calc(-1 * var(--okraj) + .6rem);
  border-top: 1.5px solid var(--akcent); border-right: 1.5px solid var(--akcent);
  rotate: 45deg; pointer-events: none;
  opacity: 0;
}
@supports (animation-timeline: scroll()) {
  header .plocha::after { animation: nabidka-sipka linear both; animation-timeline: --nabidka; }
}
@supports not (animation-timeline: scroll()) {
  @media (max-width: 28rem) { header .plocha::after { opacity: 1; } }
}
@keyframes nabidka-sipka { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

header nav a {
  flex: none; white-space: nowrap;
  color: var(--text-tlumeny); text-decoration: none;
  font-size: .875rem; font-weight: 450; letter-spacing: -.003em;
  padding-block: .2rem;
  transition: color var(--prechod);
}
header nav a:hover, header nav a[aria-current="page"] { color: var(--text); }
header nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--akcent);
  text-decoration-thickness: 1px; text-underline-offset: .45em;
}
header nav a:focus-visible { outline-offset: -2px; }

.jazyk {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pilulka, 2rem);
  font-family: var(--pismo-stroj); font-size: .72rem; font-weight: 500; letter-spacing: .06em;
  color: var(--text-tlumeny); text-decoration: none;
  border: 1px solid var(--linka-silna); border-radius: 999px; padding: 0 .65rem;
  transition: color var(--prechod), border-color var(--prechod);
}
.jazyk:hover { color: var(--text); border-color: var(--text-tlumeny); }

.tema { display: none; }
@supports selector(:has(*)) {
  .tema {
    display: inline-flex; align-items: center; justify-content: center; gap: .1rem;
    height: var(--pilulka, 2rem);
    margin: 0; padding: 0 .18rem;
    border: 1px solid var(--linka-silna); border-radius: 999px;
    transition: border-color var(--prechod);
  }
}
.tema input {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.tema label {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 999px; cursor: pointer;
  color: var(--text-tlumeny);
  transition: color var(--prechod), background-color var(--prechod);
}

.tema label::before { content: ""; width: .78rem; height: .78rem; border-radius: 50%; }
#tema-svetly + label::before {
  background:
    radial-gradient(circle closest-side, currentColor 0 50%, transparent 52%),
    repeating-conic-gradient(from -8deg, currentColor 0 16deg, transparent 16deg 45deg);
}
#tema-tmavy + label::before { box-shadow: inset -.2rem .05rem 0 0 currentColor; }
.tema label:hover { color: var(--text); }
.tema input:checked + label {
  color: var(--akcent);
  background: color-mix(in srgb, var(--akcent) 14%, transparent);
}
.tema input:focus-visible + label { outline: 2px solid var(--jadro); outline-offset: 2px; }

@media (max-width: 28rem) {
  header .plocha { --pilulka: 1.75rem; }
  header nav { gap: 1.1rem; }
  header nav a { font-size: .82rem; padding-block: .3rem; }
  .ovladani { gap: .4rem; }
  .jazyk { padding: 0 .5rem; }
  .tema label { width: 1.5rem; height: 1.5rem; }
  .znacka { font-size: 1.3rem; }
}

@media (min-width: 64rem) {
  header .plocha {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "znacka nabidka ovladani";
    column-gap: 2rem;
  }
  header nav {
    justify-content: flex-end; gap: 1.85rem;
    margin-inline: 0; padding-inline: 0;
    overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  header nav a:focus-visible { outline-offset: 3px; }
  .ovladani { margin-left: .5rem; }
}
/* telefon na šířku: dvouřádková hlavička by zabrala čtvrtinu výšky, nabídka se vejde do jednoho řádku */
@media (max-width: 63.99rem) and (min-width: 40rem) and (max-height: 30rem) {
  header .plocha {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "znacka nabidka ovladani";
    column-gap: 1.25rem; min-height: 3.5rem;
  }
  header nav { justify-content: flex-end; margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  header .plocha::after { display: none; }
  main, main [id], main section { scroll-margin-top: 4.5rem; }
}

.ukazatel {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--akcent) 30%, var(--akcent));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .ukazatel { animation: ukazatel linear both; animation-timeline: scroll(root); }
  }
}
@keyframes ukazatel { from { transform: scaleX(0); } to { transform: scaleX(1); } }

h1 {
  margin: 0;
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  line-height: 1; letter-spacing: -.018em;
}
h1 em, h2 em { font-style: italic; letter-spacing: -.01em; }
.sekce-titulek, .kontakt h2 {
  margin: 0;
  font-family: var(--pismo-titulek); font-weight: 400;
  /* Menší než H1 v úvodu (do 4.25rem proti 6rem): slib úvodu nesmí
     prohrát se slovem „Ceník" (designérský posudek, kolo 3). */
  font-size: clamp(2.2rem, 4.2vw, 4.25rem);
  line-height: 1; letter-spacing: -.018em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1, .sekce-titulek, .kontakt h2 {
    background-image: var(--med-lesk-pas), var(--med-tahy), var(--med-odlesk), var(--med-albedo);
    background-size: 300% 100%, 44rem 44rem, 100% 100%, 100% 100%;
    background-position: 0% 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, no-repeat, no-repeat;
    background-blend-mode: screen, soft-light, screen, normal;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;

    padding: .06em .08em .1em 0; margin: -.06em -.08em -.1em 0;
  }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @supports (background: -webkit-named-image(i)) {
    h1, .sekce-titulek, .kontakt h2 {
      background-image: var(--med-lesk-pas), var(--med-odlesk), var(--med-albedo);
      background-size: 300% 100%, 100% 100%, 100% 100%;
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-blend-mode: normal, normal, normal;
    }
  }
}

.stav {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0;
  font-family: var(--pismo-stroj);
  font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-tlumeny);
  border: 1px solid var(--linka-silna); border-radius: 999px;
  padding: .38rem .85rem .38rem .7rem;
  background: color-mix(in srgb, var(--pozadi-karta) 60%, transparent);
  white-space: nowrap;
}
.stav::before {
  content: ""; flex: none; width: .4rem; height: .4rem;
  border-radius: 50%; background: var(--jadro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jadro) 18%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .stav::before, .stav-znacka.bezi::before { animation: dech 3.6s ease-in-out infinite; }
}
@keyframes dech { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
/* V pásu projektů je „Běží" desetkrát — dýchající diody by splynuly v šum.
   Dýchá jen štítek v úvodu; „Připravujeme" u knihy tím vynikne. */
.pas .stav-znacka.bezi::before { animation: none; }

.podtitulek {
  margin: 0;
  font-size: clamp(1.06rem, 1.4vw, 1.2rem); line-height: 1.6;
  color: var(--text-tlumeny);
  max-width: 50ch;
}
.podtitulek strong { color: var(--text); font-weight: 500; }

.tlacitka { display: flex; flex-wrap: wrap; gap: .75rem; }
.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.5rem;
  border-radius: 999px;
  font-size: .95rem; font-weight: 500; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none;
  color: var(--akcent-text);
  background-color: var(--tlacitko-barva);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(0 0 0 / .08));
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 var(--tlacitko-hrana), 0 10px 30px -14px color-mix(in srgb, var(--akcent) 70%, transparent);
  transition: background-color var(--prechod), box-shadow .4s var(--dojezd), translate .4s var(--dojezd);
}
.tlacitko:hover { background-color: var(--tlacitko-barva-hover); translate: 0 -1px; }
.tlacitko:active { translate: 0 0; }
.tlacitko.tise {
  color: var(--text); background: transparent;
  border-color: var(--linka-silna); box-shadow: none;
}
.tlacitko.tise:hover { background: color-mix(in srgb, var(--text) 5%, transparent); border-color: var(--text-tlumeny); }
@media (max-width: 26rem) {
  .tlacitka .tlacitko { flex: 1 1 100%; }
}

.odkaz {
  display: inline-flex; align-items: center; gap: .45em;
  margin-top: auto; padding-top: .5rem;
  font-size: .93rem; font-weight: 500; color: var(--akcent);
  text-decoration: none;
  transition: color var(--prechod);
}
.odkaz::after {
  content: "" / ""; display: inline-block; flex: none;
  width: .95em; height: .7em; background: currentColor;
  clip-path: polygon(0 45%, 78% 45%, 52% 10%, 60% 2%, 100% 50%, 60% 98%, 52% 90%, 78% 55%, 0 55%);
  transition: translate .4s var(--dojezd);
}
.odkaz:hover { color: var(--akcent-syty); }
.odkaz:hover::after { translate: .25em 0; }

/* .karta .typ, ne jen .typ — obecné `.karta p` by jinak přebilo velikost i barvu */
.karta .typ, .chyba .typ, .kniha-uvod .typ, .dokument .typ {
  margin: 0;
  font-family: var(--pismo-stroj);
  font-size: .7rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--akcent);
}

.stav-znacka {
  flex: none; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--pismo-stroj);
  font-size: .68rem; font-weight: 500; letter-spacing: .06em;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid var(--linka-silna); color: var(--text-tlumeny);
  white-space: nowrap; line-height: 1.4;
}
.stav-znacka::before { content: ""; width: .36rem; height: .36rem; border-radius: 50%; }
.stav-znacka.bezi {
  color: var(--jadro);
  border-color: color-mix(in srgb, var(--jadro) 32%, transparent);
  background: color-mix(in srgb, var(--jadro) 6%, transparent);
}
.stav-znacka.bezi::before { background: currentColor; }
.stav-znacka.chystame {
  color: var(--akcent);
  border-color: color-mix(in srgb, var(--akcent) 34%, transparent);
  background: color-mix(in srgb, var(--akcent) 6%, transparent);
}
.stav-znacka.chystame::before { border: 1px solid currentColor; }

.seznam { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.seznam li {
  position: relative; padding-left: 1.25rem;
  font-size: .93rem; line-height: 1.5; color: var(--text-tlumeny);
}
.seznam li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .6rem; height: 1px; background: var(--akcent);
}

.sluzby, .karty, .postup, .cenik, .faq { padding: var(--sekce) 0 0; }
.kontakt { padding: var(--sekce) 0; }

.sekce-uvod {
  margin: 1.4rem 0 0; max-width: 46ch;
  font-size: 1.06rem; color: var(--text-tlumeny);
}

.plocha + .mrizka, .plocha + .ukazky { margin-top: clamp(2.5rem, 5vw, 4rem); }
.plocha + .galerie-blok { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.mrizka + .plocha { margin-top: clamp(2rem, 4vw, 3rem); }
.mrizka + .plocha > :first-child { margin-top: 0; }
.sekce-uvod + .kapitoly, .sekce-uvod + .kniha-text { margin-top: clamp(2rem, 4vw, 3rem); }
.faq .sekce-titulek { margin-bottom: clamp(2rem, 4vw, 3rem); }

@media (min-width: 56rem) {
  .plocha:has(> .sekce-titulek + .sekce-uvod:last-child) {
    display: grid; align-items: end;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 6vw, 6rem);
  }
  /* Jen dvojice ve dvou sloupcích; svislé (kniha) si nechávají okraj
     mezi nadpisem a podtitulkem (designér, kolo 13). */
  .plocha > .sekce-titulek + .sekce-uvod:last-child { margin: 0; padding-bottom: .35rem; }
}

.mrizka { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); grid-template-columns: 1fr; }
.karta {
  position: relative;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--povrch-hrana), transparent 38%),
    var(--pozadi-karta);
  border: 1px solid var(--linka);
  transition: border-color .5s var(--dojezd), translate .6s var(--dojezd), box-shadow .6s var(--dojezd);
}
.karta h3 {
  margin: 0; font-size: 1.22rem; font-weight: 500; line-height: 1.3; letter-spacing: -.015em;
}
.karta p { margin: 0; color: var(--text-tlumeny); font-size: .96rem; line-height: 1.6; }

/* Zvedá se jen karta, na kterou jde klepnout celá (projekty). Tarif má
   tlačítko, ale klikací plochu přes kartu ne — zvednutí by lhalo. */
.karta:has(.odkaz):hover, .karta:has(.odkaz:focus-visible) {
  translate: 0 -4px;
  border-color: color-mix(in srgb, var(--akcent) 36%, var(--linka));
  box-shadow: 0 28px 60px -34px rgba(0, 0, 0, .75),
              0 0 0 1px color-mix(in srgb, var(--akcent) 10%, transparent);
}
:root:has(#tema-svetly:checked) .karta:has(.odkaz):hover,
:root:has(#tema-svetly:checked) .karta:has(.odkaz:focus-visible) {
  box-shadow: 0 26px 50px -30px rgba(80, 40, 20, .35);
}

@keyframes vynoreni { from { opacity: 0; translate: 0 2rem; } }
@keyframes vynoreni-male { from { opacity: 0; translate: 0 1rem; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .karta, .krok, .ukazky img, .kontakt .plocha, .cenik-pozn, .kapitoly li {
      animation: vynoreni linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    /* Kratší náběh: dlouhé prolínání drželo text u spodní hrany okna
       pod 4,5:1 (tester, kolo 11). */
    .mrizka > .karta:nth-child(3n+2) { animation-range: entry 5% entry 40%; }
    .mrizka > .karta:nth-child(3n)   { animation-range: entry 10% entry 45%; }
    .sekce-uvod, .otazka, .vyzva-pruh {
      animation: vynoreni-male linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }

    .sekce-titulek, .kontakt h2 {
      animation: vynoreni linear both, lesk-jednou linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% entry 35%, entry 50% cover 55%;
    }
  }
}
@keyframes lesk-jednou {
  from { background-position: 100% 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0% 0, 0 0, 0 0, 0 0; }
}

.uvod {
  position: relative; overflow: hidden;
  padding: clamp(1.6rem, 5vw, 4.5rem) 0 clamp(3rem, 8vw, 5rem);
}
.uvod .plocha { position: relative; }

.uvod::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 50% at 82% 42%, var(--svit-med), transparent 72%),
    radial-gradient(26% 32% at 80% 55%, var(--svit-zar), transparent 70%);
  opacity: .75;
}

.uvod .stav        { grid-area: stav; justify-self: start; }
.uvod h1           { grid-area: titulek; }
.uvod .podtitulek  { grid-area: podtitulek; }
.uvod .tlacitka    { grid-area: tlacitka; }
.uvod .doveryhodnost { grid-area: cisla; }
.znak-scena        { grid-area: znak; }

.doveryhodnost {
  display: grid; margin: 0; padding: 1.4rem 0 0; list-style: none;
  border-top: 1px solid var(--linka);
  font-size: .88rem; line-height: 1.45; color: var(--text-tlumeny);
  gap: .55rem;
}
.doveryhodnost li { display: flex; align-items: baseline; gap: .6rem; }
.doveryhodnost strong {
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: 1.55rem; line-height: 1; letter-spacing: -.01em;
  color: var(--text);
}
@supports (grid-template-columns: subgrid) {
  .doveryhodnost { grid-template-columns: max-content minmax(0, 1fr); column-gap: .9rem; }
  .doveryhodnost li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .doveryhodnost strong { justify-self: end; }
}
@media (min-width: 48rem) {
  .doveryhodnost {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4vw, 3.5rem); padding-top: 1.6rem;
  }
  .doveryhodnost li { display: block; grid-column: auto; }
  .doveryhodnost strong {
    display: block; margin-bottom: .45rem; justify-self: start;
    font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  }
}
/* Kniha na 768–1023 px: tři sloupce měly jen 81–147 px a dovětky se
   lámaly do pěti řádků (sloupec vedle obálky je úzký) — tabulka. */
@supports (grid-template-columns: subgrid) {
  /* „60+" je širší než max-content sloupce (2,4 px přesah, tester kolo 14). */
  @media (max-width: 47.99rem) { .kniha-uvod .doveryhodnost { grid-template-columns: minmax(2.4rem, max-content) minmax(0, 1fr); } }
  @media (min-width: 48rem) and (max-width: 63.99rem) {
    .kniha-uvod .doveryhodnost { grid-template-columns: minmax(2.4rem, max-content) minmax(0, 1fr); column-gap: .9rem; row-gap: .55rem; }
    .kniha-uvod .doveryhodnost li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
    .kniha-uvod .doveryhodnost strong { display: inline; margin-bottom: 0; font-size: 1.55rem; justify-self: end; }
  }
}

.znak-scena {
  position: relative; display: block; width: fit-content; margin: 0;
  --plaketa: clamp(124px, 32vw, 168px);
}
.znak-velky {
  display: block; height: var(--plaketa); width: var(--plaketa); max-width: none; overflow: visible;
  position: relative; z-index: 1;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
}

/* Lokální WebGL štít kolem loga. */
.liquid-ether {
  position: absolute; z-index: 2; pointer-events: none;
  left: 50%; top: 55%; translate: -50% -50%;
  width: calc(var(--plaketa) * 2.15); aspect-ratio: 1;
  overflow: hidden;
  mix-blend-mode: screen; opacity: 1;
  mask-image: radial-gradient(circle, #000 42%, transparent 70%);
}
.liquid-ether canvas { display: block; width: 100%; height: 100%; }
:root:has(#tema-svetly:checked) .liquid-ether {
  mix-blend-mode: multiply; opacity: .82; --stit-kryti: .82;
  filter: saturate(1.35) contrast(1.25);
  mask-image: radial-gradient(circle, transparent 24%, #000 36%, #000 44%, transparent 62%);
}

@media (max-width: 47.99rem) {
  .uvod .plocha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* Plaketa stojí vedle štítku, titulek má celou šířku — na telefonu
       je to největší písmo na stránce, ne o polovinu menší než „Ceník". */
    grid-template-areas:
      "stav       znak"
      "titulek    titulek"
      "podtitulek podtitulek"
      "tlacitka   tlacitka"
      "pozn       pozn"
      "cisla      cisla";
    column-gap: clamp(.7rem, 3vw, 1.1rem);
  }
  .uvod .stav { align-self: start; margin-bottom: 1rem; }

  .uvod .stav { align-self: center; margin-bottom: 0; }
  .uvod h1 { align-self: start; margin-top: .9rem; font-size: clamp(2.5rem, 10.5vw, 3.4rem); line-height: 1.02; }
  .uvod .podtitulek { margin-top: 1.1rem; }
  .uvod .tlacitka { margin-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .uvod .tlacitka .tlacitko { padding-inline: .8rem; }
  .uvod .doveryhodnost { margin-top: 1.5rem; padding-top: 1.1rem; }
  .uvod { padding-bottom: 1.5rem; }
  /* Na mobilu tabulka pod sebou (slovo vlevo, dovětek vedle), stejně
     jako zbytek úvodu zarovnaná vlevo. Tři úzké sloupce na střed lámaly
     dovětky do čtyř řádků a jako jediné v úvodu stály na ose. */
  .uvod .doveryhodnost { font-size: .84rem; gap: .45rem; }
  .uvod .doveryhodnost strong { justify-self: start; font-size: 1.35rem; }

  .znak-scena {
    justify-self: end; align-self: start;

    --plaketa: clamp(56px, 18vw, 88px);
  }
  .uvod::before {
    background: radial-gradient(70% 34% at 88% 8%, var(--svit-med), transparent 72%);
  }
  @media (max-width: 28rem) {
    .stav { font-size: clamp(.62rem, 2.85vw, .7rem); letter-spacing: .06em; padding: .3rem .55rem; gap: .45rem; }
  }

  @media (max-width: 21rem) {
    .uvod .plocha {
      grid-template-areas:
        "stav       znak"
        "titulek    titulek"
        "podtitulek podtitulek"
        "tlacitka   tlacitka"
        "pozn       pozn"
        "cisla      cisla";
    }
    .uvod .tlacitka { grid-template-columns: 1fr; }
  }
}

@media (min-width: 48rem) {
  .uvod {
    display: grid; align-items: center;
    /* O kus nižší než okno: spodní hrana nechá vykouknout pás ukázek,
       ať je hned vidět, že pod úvodem je skutečná práce. */
    min-height: min(56rem, max(36rem, calc(100vh - var(--lista) - 9rem)));
    min-height: min(56rem, max(36rem, calc(100svh - var(--lista) - 9rem)));
    padding: clamp(1.75rem, 4vh, 3.5rem) 0 clamp(1.5rem, 3vh, 2.5rem);
  }
  .uvod .plocha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "stav       znak"
      "titulek    znak"
      "podtitulek znak"
      "tlacitka   znak"
      "pozn       znak"
      ".          ."
      "cisla      cisla";
    column-gap: clamp(2.5rem, 7vw, 7rem);
    align-content: center;
  }
  .uvod .stav { margin-bottom: clamp(1rem, 2vh, 1.6rem); }

  /* Úvod je o kus těsnější, aby pás ukázek vykoukl i na notebooku
     1280×720 (designérský posudek, kolo 4). */
  .uvod h1 { font-size: clamp(3.4rem, 5.4vw, 5.6rem); line-height: .98; }
  .uvod .podtitulek { margin-top: clamp(1.1rem, 2.4vh, 1.8rem); }
  .uvod .tlacitka { margin-top: clamp(1.4rem, 3vh, 2rem); }
  .uvod .doveryhodnost { margin-top: clamp(1.5rem, 3.5vh, 2.75rem); padding-top: 1.1rem; }
  .uvod .doveryhodnost strong { font-size: clamp(1.6rem, 2vw, 2rem); }
  .znak-scena { align-self: center; justify-self: center; --plaketa: clamp(180px, 21vw, 272px); }

  .uvod .plocha { --plaketa-kruh: clamp(180px, 21vw, 272px); }
}

.uvod { --lista: 5.66rem; }
@media (min-width: 64rem) { .uvod { --lista: 4.82rem; } }

@media (prefers-reduced-motion: no-preference) {
  .uvod .stav, .uvod h1, .uvod .podtitulek, .uvod .tlacitka, .uvod .tlacitka-pozn, .uvod .doveryhodnost {
    animation: nastup 1.1s var(--dojezd) backwards;
  }
  .uvod .stav          { animation-delay: .05s; }
  .uvod h1             { animation-delay: .14s; }
  .uvod .podtitulek    { animation-delay: .26s; }
  .uvod .tlacitka      { animation-delay: .36s; }
  .uvod .tlacitka-pozn { animation-delay: .42s; }
  .uvod .doveryhodnost { animation-delay: .5s; }
  .znak-velky { animation: nastup-znak 1.6s var(--dojezd) .2s backwards; }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .uvod h1 { animation: nastup 1.1s var(--dojezd) .14s backwards, lesk-jednou 2.4s ease-in-out .9s both; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kniha-uvod-text > *, .chyba .plocha > * { animation: nastup 1.1s var(--dojezd) backwards; }
  :is(.kniha-uvod-text, .chyba .plocha) > :nth-child(2) { animation-delay: .1s; }
  :is(.kniha-uvod-text, .chyba .plocha) > :nth-child(3) { animation-delay: .2s; }
  :is(.kniha-uvod-text, .chyba .plocha) > :nth-child(4) { animation-delay: .3s; }
  :is(.kniha-uvod-text, .chyba .plocha) > :nth-child(n+5) { animation-delay: .4s; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .kniha-uvod h1, .chyba h1 { animation: nastup 1.1s var(--dojezd) .1s backwards, lesk-jednou 2.4s ease-in-out .8s both; }
  }
  .kniha-obalka { animation: nastup-znak 1.4s var(--dojezd) .15s backwards; }
}
/* Nástup úvodu jen posunem, bez průhlednosti — co nabíhá z opacity 0,
   to prohlížeč započte do LCP až po doběhnutí (anglický podtitulek na
   telefonu: LCP 2 s; tester, kolo 8). */
@keyframes nastup      { from { translate: 0 1.4rem; } }
/* Bez průhlednosti: plaketa je největší prvek nad ohybem (LCP) a prohlížeč
   ji počítal až po doběhnutí náběhu z opacity 0 — LCP 2,5–2,8 s místo 0,7 s
   (tester, kolo 7). Zůstává jen jemné zvětšení. */
@keyframes nastup-znak { from { scale: .94; } }
/* Pás ukázek pod úvodem: náhledy skutečné práce v nekonečné smyčce.
   Pod myší se zpomalí, ať se dá dívat; při omezeném pohybu stojí
   a dá se posunout prstem. */
.remesla {
  display: block; text-decoration: none;
  overflow: hidden; position: relative;
  margin-top: 0;
  padding-block: clamp(.9rem, 1.8vw, 1.4rem) clamp(1rem, 2vw, 1.6rem);
  border-block: 1px solid var(--linka);
}
.remesla-popisek {
  display: flex; max-width: calc(var(--sirka) + 2 * var(--okraj)); margin: 0 auto .8rem; padding-inline: var(--okraj);
  font-family: var(--pismo-stroj); font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  width: fit-content; padding-top: 0;
}
/* Maska přechodu do ztracena je na vnitřním „okně", ne na odkazu —
   jinak by uřízla i obrys fokusu (tester, kolo 3). */
.remesla-okno {
  display: block; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.remesla-stopa { display: flex; gap: clamp(.8rem, 1.6vw, 1.25rem); width: max-content; padding-right: clamp(.8rem, 1.6vw, 1.25rem); }
.remesla-stopa img {
  display: block; flex: none;
  width: clamp(10rem, 16vw, 14.5rem); height: auto; aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px; border: 1px solid var(--linka);
  background: var(--pozadi-karta);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .8);
  transition: border-color .5s var(--dojezd);
}
/* Každý náhled je vlastní odkaz na projekt nebo design (vlastník 8. 10.
   2026: „po kliku by se měl projekt otevřít"; dřív byl celý pás jeden
   odkaz na sekci Projekty). Obrys fokusu jde dovnitř — okno pásu ořezává. */
.remesla-stopa > a { display: block; flex: none; border-radius: 10px; }
.remesla-stopa > a:is(:hover, :focus-visible) img { border-color: var(--akcent); }
.remesla-stopa > a:focus-visible { outline: 2px solid var(--jadro); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .remesla-stopa { animation: remesla 80s linear infinite; }
  .remesla:is(:hover, :focus-within) .remesla-stopa { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  /* Posouvá se celý pás; okno bez masky. */
  .remesla { overflow-x: auto; scrollbar-width: none; }
  .remesla-okno { overflow: visible; width: max-content; -webkit-mask-image: none; mask-image: none; }
  /* Druhá sada je jen pro smyčku — při ručním posouvání by ukázky šly dvakrát. */
  .remesla-stopa > a:nth-child(n+15) { display: none; }
}
@keyframes remesla { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (min-width: 52rem) {
  .sluzby .mrizka { grid-template-columns: repeat(3, 1fr); }
}
.sluzba { display: flex; flex-direction: column; gap: .85rem; }
.sluzba .seznam { margin-top: .6rem; padding-top: 1.1rem; border-top: 1px solid var(--linka); }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 52rem) {
    .sluzby .mrizka { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .sluzby .sluzba { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .85rem; align-content: start; }
    .sluzby .sluzba .seznam { align-self: start; }
  }
}

.sluzba-znak {
  position: relative; flex: none; margin-bottom: .5rem;
  width: 2.9rem; height: 2.9rem; border-radius: var(--radius-male);
  color: var(--akcent);
  border: 1px solid var(--linka-silna);
  background: color-mix(in srgb, var(--akcent) 6%, transparent);
}
.sluzba-znak::before, .sluzba-znak::after {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
}

.znak-web::before { width: 1.3rem; height: 1rem; border: 1.5px solid currentColor; border-radius: 3px; }
.znak-web::after  { width: 1.3rem; height: 1.5px; background: currentColor; translate: -50% calc(-50% - .22rem); }

.znak-aplikace::before {
  width: 1.3rem; height: 1rem;
  background:
    linear-gradient(currentColor, currentColor) 0 0    / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50%  / 68%  1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 86%  1.5px no-repeat;
}
.znak-aplikace::after {
  width: .32rem; height: .32rem; border-radius: 50%; background: var(--jadro);
  translate: calc(-50% + .55rem) calc(-50% + .42rem);
}

.znak-hra::before {
  width: .95rem; height: 1.05rem; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0, 1.5px 5%, 1.5px 95%, 92% 50%, 1.5px 5%);
  translate: calc(-50% + .08rem) -50%;
}
.znak-hra::after { display: none; }

.karty .mrizka { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.projekt { display: flex; flex-direction: column; gap: .6rem; padding: .5rem .5rem clamp(1.3rem, 2vw, 1.6rem); }
.projekt > :not(.nahled-ram) { margin-inline: clamp(1rem, 1.6vw, 1.25rem); }

.nahled-ram {
  position: relative; display: block; overflow: hidden; margin-bottom: .9rem;
  border-radius: calc(var(--radius) - .5rem);
  border: 1px solid var(--linka);
  background: var(--pozadi);
}
.nahled {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover;

  filter: brightness(.84) saturate(.92);
  transition: filter .6s var(--dojezd), scale .9s var(--dojezd);
}
:root:has(#tema-svetly:checked) .nahled { filter: none; }
.karta:has(.odkaz):hover .nahled, .karta:focus-within .nahled { filter: none; scale: 1.035; }

.projekt .radek { display: flex; align-items: center; justify-content: space-between; gap: .35rem .75rem; flex-wrap: wrap; }
.projekt .radek h4 {
  margin: 0; min-width: 0;
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: 1.65rem; line-height: 1.1; letter-spacing: -.01em;
}
.projekt .typ { margin-bottom: .2rem; }

.vyzva-pruh {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1.5rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 2rem 0;
  border-block: 1px solid var(--linka);
  font-size: 1rem; color: var(--text-tlumeny); text-align: center;
}
.vyzva-otazka { font-family: var(--pismo-titulek); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; color: var(--text); }
.vyzva-dovetek { flex-basis: 100%; font-size: .88rem; }
.vyzva-pruh a:not(.tlacitko) {
  color: var(--akcent); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--akcent) 40%, transparent);
  text-underline-offset: .3em;
  transition: color var(--prechod), text-decoration-color var(--prechod);
}
.vyzva-pruh a:not(.tlacitko):hover { color: var(--akcent-syty); text-decoration-color: currentColor; }

.postup .plocha { margin-bottom: 0; }
.postup-hlava .sekce-uvod { margin-top: 1.4rem; }
.kroky {
  counter-reset: krok; list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  border-top: 1px solid var(--linka);
}
.krok {
  position: relative;
  counter-increment: krok;
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: 1rem; row-gap: .4rem;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--linka);
}
.krok::before {
  content: counter(krok, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--pismo-titulek); font-style: italic; font-weight: 400;
  font-size: 2.2rem; line-height: .9; color: var(--akcent);
}
.krok h3 { margin: 0; font-size: 1.3rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.krok p { margin: 0; color: var(--text-tlumeny); max-width: 52ch; }
@media (min-width: 64rem) {
  .postup .plocha {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 7vw, 7rem);
  }

  .postup-hlava { position: sticky; top: 8rem; }
  .kroky { margin-top: 0; }
  .krok { grid-template-columns: 5rem minmax(0, 1fr); padding: 2.2rem 0 2.4rem; }
  .krok::before { font-size: 3rem; }
}

@media (min-width: 52rem) {
  .cenik .mrizka { grid-template-columns: repeat(3, 1fr); }
}
.tarif { display: flex; flex-direction: column; gap: .55rem; }

@supports (grid-template-rows: subgrid) {
  @media (min-width: 52rem) {
    .cenik .mrizka { grid-template-rows: repeat(6, auto); row-gap: .55rem; }
    .tarif { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  }
}

.tarif > [itemprop="provider"] { display: none; }
.tarif h3 { font-family: var(--pismo-titulek); font-weight: 400; font-size: 1.75rem; letter-spacing: -.01em; line-height: 1.1; }
.tarif .tarif-komu {
  margin: 0; font-family: var(--pismo-stroj);
  font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tlumeny);
}
.tarif .tarif-cena {
  margin: 1.2rem 0 .6rem; padding-bottom: 1.4rem;
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;

  border-bottom: 1px solid var(--linka);
}
/* „od" kurzívou, ne drobným strojopisem — na stránce, která stojí na
   poctivosti, vypadalo malé „OD" jako schované (designér, kolo 15). */
.tarif-cena .tarif-od {
  font-family: var(--pismo-titulek); font-style: italic; font-size: 1.4rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-tlumeny);
}
.tarif-cena strong {
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: clamp(2.3rem, 1.6rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -.02em;
  color: var(--text);
  white-space: nowrap;
}

.tarif .seznam { align-content: start; }
.tarif .tarif-cas {
  margin: 1rem 0 1.2rem; font-family: var(--pismo-stroj);
  font-size: .72rem; letter-spacing: .04em; color: var(--text-tlumeny);
}
.tarif .tlacitko { margin-top: auto; width: 100%; }
/* Obrysová u všech tří stejně: tři plné měděné pilulky vedle sebe
   přebíjely cenu. Plná měď zůstává liště, úvodu, výzvě a kontaktu. */
.tarif .tlacitko {
  color: var(--text); background: transparent;
  border-color: color-mix(in srgb, var(--akcent) 55%, var(--linka-silna)); box-shadow: none;
}
.tarif .tlacitko:hover { background: color-mix(in srgb, var(--akcent) 12%, transparent); border-color: var(--akcent); }

.cenik-pozn {
  display: grid; gap: 0;
  margin: 0; padding: 0; list-style: none; max-width: 48rem;
  font-size: .95rem; color: var(--text-tlumeny);
  border-top: 1px solid var(--linka);
}
.cenik-pozn li { padding: .95rem 0; border-bottom: 1px solid var(--linka); }
@supports (grid-template-columns: subgrid) {
  @media (min-width: 36rem) {
    .cenik-pozn { grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.6rem; }
    .cenik-pozn li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
  }
}
@media (max-width: 35.99rem) { .cenik-pozn strong { display: block; margin-bottom: .2rem; } }
/* Hned po přechodu na tři sloupce se „from CZK 150,000" nevešlo na řádek
   a „from" skočilo nad cenu (tester, kolo 16). */
@media (min-width: 52rem) and (max-width: 56rem) { .tarif-cena strong { font-size: 2.1rem; } }
/* Ceny provozu titulkovým písmem na všech šířkách (na desktopu větší,
   viz níž) — tučný Geist na mobilu se z Mědirytu vymykal. */
.cenik-pozn strong {
  font: 400 1.4rem/1.1 var(--pismo-titulek); color: var(--text); letter-spacing: -.005em;
}
.cenik-dph {
  margin: 1.1rem 0 0; max-width: 48rem;
  font-size: .9rem; color: var(--text-tlumeny);
}
.cenik-dph strong { color: var(--text); font-weight: 500; }
.cenik-dph a { color: var(--akcent); text-decoration: none; }
.cenik-dph a:hover { color: var(--akcent-syty); text-decoration: underline; text-underline-offset: .3em; }

@media (min-width: 64rem) {
  .faq .plocha {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 7vw, 7rem);
  }
  .faq .sekce-titulek { position: sticky; top: 8rem; margin-bottom: 0; }
}
.otazky { border-top: 1px solid var(--linka); }
.otazka { border-bottom: 1px solid var(--linka); }
.otazka summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 1.35rem 3rem 1.35rem 0;
  font-size: 1.12rem; font-weight: 500; letter-spacing: -.012em; line-height: 1.4;
  transition: color var(--prechod);
}
.otazka summary::-webkit-details-marker { display: none; }
.otazka summary:hover { color: var(--akcent); }
.otazka summary:focus-visible { outline-offset: -2px; border-radius: 4px; }

.otazka summary::before, .otazka summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: .85rem; height: 1.5px; margin-top: -.75px;
  background: var(--akcent);
  transition: rotate .45s var(--dojezd), opacity .3s ease;
}
.otazka summary::after { rotate: 90deg; }
.otazka[open] summary::after { rotate: 0deg; opacity: 0; }
.odpoved { padding: 0 3rem 1.5rem 0; }
.odpoved p { margin: 0; color: var(--text-tlumeny); max-width: 62ch; }
@supports selector(::details-content) {
  .otazka::details-content {
    block-size: 0; overflow: clip;
    interpolate-size: allow-keywords;
    transition: block-size .45s var(--dojezd), content-visibility .45s allow-discrete;
  }
  .otazka[open]::details-content { block-size: auto; }
}

.kontakt .plocha { position: relative; }
.kontakt .plocha {
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--linka);
  background:
    radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--akcent) 11%, transparent), transparent 70%),
    linear-gradient(180deg, var(--povrch-hrana), transparent 30%),
    var(--pozadi-karta);

  width: calc(100% - 2 * var(--okraj));
  max-width: var(--sirka);
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}
.kontakt h2 { font-size: clamp(2.2rem, 4.4vw, 4.5rem); }
.kontakt p { margin: 1.5rem auto 0; max-width: 52ch; color: var(--text-tlumeny); font-size: 1.06rem; }
.kontakt .tlacitko { margin-top: 2.4rem; }
.kontakt .tlacitka { justify-content: center; margin-top: 2.4rem; }
.kontakt .tlacitka .tlacitko { margin-top: 0; }

.kontakt .kontakt-pozn {
  margin: 2.4rem auto 0; max-width: 56ch; padding: 1.6rem 0 0; list-style: none;
  display: grid; gap: .35rem;
  border-top: 1px solid var(--linka);
  font-family: var(--pismo-stroj); font-size: .74rem; letter-spacing: .02em;
  color: var(--text-tlumeny);
}

footer {
  margin-top: 0;
  border-top: 1px solid var(--linka);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  font-size: .9rem; color: var(--text-tlumeny);
  overflow: hidden;
}

footer .plocha {
  display: grid; gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pata-blok { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.pata-blok p { margin: 0; max-width: 34ch; line-height: 1.6; }
.pata-znacka {
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: 1.6rem; line-height: 1.1; color: var(--text); margin-bottom: .2rem;
}
.pata-nadpis {
  font-family: var(--pismo-stroj); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-tlumeny); margin-bottom: .35rem;
}
footer a { text-decoration: none; padding-block: .1rem; transition: color var(--prechod); }
footer a:hover { color: var(--text); }

footer .pata-spodek {
  display: flex; justify-content: space-between; gap: .6rem 1.5rem; flex-wrap: wrap;
  width: calc(100% - 2 * var(--okraj)); max-width: var(--sirka); padding-inline: 0;
  margin-top: 2.5rem; padding-top: 1.3rem;
  border-top: 1px solid var(--linka);
  font-family: var(--pismo-stroj); font-size: .7rem; letter-spacing: .04em;
}

footer::after {
  content: "Prague Core"; content: "Prague Core" / "";
  display: block; text-align: center; white-space: nowrap;
  margin-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: .14em;
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: 16.5vw; line-height: .9; letter-spacing: -.03em;
  color: color-mix(in srgb, var(--text) 7%, transparent);
  pointer-events: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  footer::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--akcent) 30%, transparent),
      color-mix(in srgb, var(--akcent) 2%, transparent) 85%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    footer::after {
      animation: vynoreni linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

.kniha-uvod { position: relative; padding: clamp(2.5rem, 7vw, 6rem) 0 0; }
.kniha-uvod .plocha { display: grid; gap: 2.5rem; }
.kniha-obalka {
  width: min(330px, 70vw); height: auto; display: block;
  border-radius: 6px;
  border: 1px solid var(--linka-silna);
  box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .85), 0 2px 10px -4px rgba(0, 0, 0, .5);
}
.kniha-uvod h1 { margin: 1rem 0 0; font-size: clamp(3rem, 8vw, 5.5rem); }
.kniha-uvod .podtitulek { margin-top: 1.4rem; }
.kniha-uvod .doveryhodnost { margin-top: 2.4rem; }
.kniha-radek {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .9rem;
  margin: 1.8rem 0 0;
  font-family: var(--pismo-stroj); font-size: .72rem; letter-spacing: .04em;
  color: var(--text-tlumeny);
}
@media (min-width: 48rem) {
  .kniha-uvod .plocha {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text obalka";
    column-gap: clamp(3rem, 7vw, 7rem); align-items: center;
  }
  .kniha-objekt    { grid-area: obalka; }
  .kniha-uvod-text { grid-area: text; }
}
.kniha-sekce { padding: var(--sekce) 0 0; }
.kniha-text { max-width: 62ch; }
.kniha-text p { margin: 0 0 1rem; color: var(--text-tlumeny); font-size: 1.06rem; }
.kniha-text p:last-child { margin-bottom: 0; }
.kniha-text strong, p.kniha-text strong { color: var(--text); font-weight: 500; }
p.kniha-text { color: var(--text-tlumeny); font-size: 1.06rem; }
.plocha > .kniha-text { margin-top: 1.8rem; }
/* „O čem to je" na širokém displeji redakčně: nadpis a podtitulek vlevo,
   text vpravo, jako Postup na titulce. Pravá polovina zela prázdná. */
@media (min-width: 64rem) {
  .kniha-sekce .plocha:has(> .sekce-uvod + .kniha-text) {
    display: grid; align-content: start; grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 7vw, 7rem);
  }
  .kniha-sekce .plocha:has(> .sekce-uvod + .kniha-text) > :is(.sekce-titulek, .sekce-uvod) { grid-column: 1; }
  .kniha-sekce .plocha > .sekce-uvod + .kniha-text { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.kniha-vrstvy { grid-template-columns: 1fr; }
@media (min-width: 42rem) { .kniha-vrstvy { grid-template-columns: repeat(2, 1fr); } }
.kniha-metoda { grid-template-columns: 1fr; }
@media (min-width: 52rem) { .kniha-metoda { grid-template-columns: repeat(3, 1fr); } }

.kapitoly { counter-reset: kapitola; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linka); }
.kapitoly li {
  counter-increment: kapitola; position: relative;
  padding: 1.1rem 0 1.1rem 3.6rem;
  border-bottom: 1px solid var(--linka);
  color: var(--text-tlumeny); font-size: .96rem;
}
.kapitoly li::before {
  content: counter(kapitola, decimal-leading-zero);
  position: absolute; left: 0; top: 1rem;
  font-family: var(--pismo-titulek); font-style: italic; font-size: 1.5rem; line-height: 1.1;
  color: var(--akcent);
}
.kapitoly b {
  display: block; margin-bottom: .25rem;
  font-family: var(--pismo-titulek); font-weight: 400; font-size: 1.35rem; line-height: 1.15;
  color: var(--text); letter-spacing: -.005em;
}
@media (min-width: 56rem) {
  .kapitoly { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
.kniha-pozn {
  margin: 1.8rem 0 0; padding: 1.1rem 1.3rem;
  border: 1px solid var(--linka); border-left: 2px solid var(--akcent);
  border-radius: var(--radius-male);
  max-width: 62ch; font-size: .95rem; line-height: 1.6; color: var(--text-tlumeny);
  background: color-mix(in srgb, var(--pozadi-karta) 70%, transparent);
}
.kniha-pozn strong { color: var(--text); font-weight: 500; }
/* „Jak je ověřená": odstavec a poznámka vedle sebe, ne v levé půlce. */
@media (min-width: 64rem) {
  .kniha-sekce .plocha:has(> .kniha-text:first-child + .kniha-pozn) {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 7vw, 7rem); align-items: start;
  }
  .kniha-sekce .plocha > .kniha-text:first-child + .kniha-pozn { margin-top: 0; }
  /* První řádek odstavce v rovině s prvním řádkem textu v rámečku. */
  .kniha-sekce .plocha > .kniha-text:first-child:has(+ .kniha-pozn) { padding-top: 1.1rem; }
}

.ukazky { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.ukazky img {
  width: 100%; max-width: 330px; height: auto; display: block;
  border-radius: 4px; border: 1px solid var(--linka-silna);
  box-shadow: 0 26px 44px -28px rgba(0, 0, 0, .85);
}
@media (min-width: 46rem) { .ukazky { grid-template-columns: repeat(3, 1fr); } }
.kontakt .kniha-adresa {
  margin: 1.8rem auto 0;
  font-family: var(--pismo-stroj); font-size: .78rem; letter-spacing: .02em;
}
/* Stejný podpis jako e-mail v kontaktu titulky, jen menší. */
.kontakt .kniha-adresa a {
  color: var(--akcent); text-decoration: none; white-space: nowrap;
  font: italic 400 clamp(1.5rem, 3vw, 2.2rem)/1.2 var(--pismo-titulek); letter-spacing: -.015em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: .1em;
  transition: background-size .4s var(--dojezd), color var(--prechod);
}
.kontakt .kniha-adresa a:hover { color: var(--akcent-syty); background-size: 100% 2px; }

body.stranka-chyba { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body.stranka-chyba main { flex: 1 0 auto; display: grid; align-content: center; }
body.stranka-chyba footer { margin-top: 0; }
.chyba { position: relative; padding: clamp(3rem, 9vw, 7rem) 0; }
.chyba h1 { margin: 1rem 0 0; font-size: clamp(3rem, 8vw, 6rem); max-width: 18ch; }
.chyba .podtitulek { margin-top: 1.5rem; }
.chyba .tlacitka { margin-top: 2.4rem; }
.chyba-pozn {
  margin: 2.6rem 0 0; max-width: 56ch;
  font-family: var(--pismo-stroj); font-size: .85rem; letter-spacing: .02em;
  color: var(--text-tlumeny);
}
.chyba-pozn a { color: var(--akcent); text-decoration: none; }
.chyba-pozn a:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ---------------------------------------------------- koule projektů */
/* KOULE Z NÁHLEDŮ (návrh 4. 10. 2026; předtím mřížka, pak posuvný pás
   a 3D kolo). Designy stránek jsou dlaždice na 3D kouli — jen náhledy,
   bez textů, a klepnutí design rovnou otevře. Aplikace a hry pod ní
   jsou obyčejná mřížka karet s popisem (`.karty .mrizka`).
   ⚠️ Zkoušelo se i přiblížení do detailu (přepínače radio a překryv
   přes okno): vlastník ho 4. 10. 2026 zrušil jako zbytečný mezikrok.
   • ROVNÁ PODOBA koule je výchozí (mřížka dlaždic) — platí pro Firefox
     bez časové osy posuvu, pro omezený pohyb, pro tisk a pro ovládání
     z klávesnice (viz níž). Koule je nadstavba v bloku níž. */
.galerie-blok + .galerie-blok { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.galerie-hlava {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: .4rem 2rem;
}
.galerie-hlava h3 {
  margin: 0; font-family: var(--pismo-titulek); font-weight: 400;
  /* Mezititulek Projektů nesmí být menší než název karty pod ním
     (Gem Stall má 44 px) — designér, kolo 14. */
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.1;
}
.galerie-hlava p { margin: .35rem 0 0; color: var(--text-tlumeny); max-width: 62ch; }
.galerie-hlava .odkaz { margin-top: 0; padding-top: 0; white-space: nowrap; }
.galerie { position: relative; margin-top: .4rem; }
.galerie-blok > .pas { margin-top: .6rem; }
/* CELÁ KARTA PROJEKTU JE KLIKACÍ: neviditelná plocha odkazu přes kartu.
   Odkaz zůstává jeden (čtečka ho přečte jednou), jen se dá trefit
   kamkoli. `::before`, protože `::after` nese šipku. */
.projekt .odkaz::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.otacec { max-width: calc(var(--sirka) + 2 * var(--okraj)); margin-inline: auto; padding-inline: var(--okraj); }
.koule-toc {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}
.dlazdice {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--linka); border-radius: 8px;
  background: var(--pozadi-karta);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.dlazdice img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tahle stránka sama sebe neotevírá — dlaždice bez odkazu (<span>)
   se pod myší nerozsvítí. */
span.dlazdice { cursor: default; }
a.dlazdice:hover, a.dlazdice:focus-visible {
  border-color: var(--akcent);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--akcent) 70%, transparent);
}
/* Zvednutí pod myší jen v rovné podobě — v kouli by tohle pravidlo
   přebilo polohu dlaždice na kouli. */
@supports not (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .kulova a.dlazdice:hover { transform: translateY(-3px); }
  }
}

/* KOULE. Jen kde je časová osa posuvu (otáčení prstem) a pohyb je vítán.
   • `.scena` je vodorovně posuvná a za koulí má prázdný pás o sedmi
     šířkách (`::after`). Koule (`.otacec`) je v ní PŘILEPENÁ (`sticky`),
     takže se při posunu nehýbe — jen se otáčí: časová osa posuvu scény
     (`--otoc`) ji natočí o dvě otáčky od začátku do konce. Tah prstem
     o šířku obrazovky = asi sto stupňů, švihnutí roztočí kouli
     setrvačností. Myš: posuvník pod koulí, Shift + kolečko, v Chromiu
     i šipky po stranách.
   • Navíc se koule sama pomalu točí (`.koule-toc`, dvě minuty na
     otáčku) — i pod myší, otáčení je jeden z hlavních efektů
     (vlastník 5. 10. 2026; pauza pod myší dělala kouli skoro pořád
     stojící, protože myš bývá nad náhledy).
   • Polohy dlaždic dává `:nth-child`: pravidelná mřížka 4 × 8 jako
     rovnoběžky a poledníky glóbu, viz pravidla níž. Póly zůstávají
     prázdné, tam by se dlaždice mačkaly.
   • KOULI MAJÍ JEN DESIGNY (`.kulova`). Projektů je jedenáct a na kouli
     jich bylo vidět sotva pět; ty jsou mřížka karet s popisem.
   • Dlaždice na odvrácené straně nejsou vidět ani klikací
     (`backface-visibility: hidden`).
   • ⚠️ KLÁVESNICE: dlaždice jsou odkazy a tabulátor by zaměřil i ty na
     odvrácené straně — neviditelné. Jakmile je v kouli fokus z klávesnice
     (`:has(.dlazdice:focus-visible)`), koule se srovná do rovné mřížky
     a odkazy jsou vidět všechny; po odchodu fokusu se zase zakulatí. */
@supports (animation-timeline: scroll()) {
  /* `screen`: na papíře se tiskne rovná mřížka, ne zamrzlá koule. */
  @media screen and (prefers-reduced-motion: no-preference) {
    .kulova:not(:has(.dlazdice:focus-visible)) .scena {
      container-type: inline-size;
      display: flex;
      overflow-x: auto; overflow-y: hidden;
      overscroll-behavior-x: contain;
      /* Šipky (`::scroll-button`) posouvají podle `scroll-behavior`
         scény — a ten se z `html` nedědí. Bez něj koule po klepnutí
         na šipku skočila o sto stupňů najednou (vlastník 5. 10. 2026). */
      scroll-behavior: smooth;
      scroll-timeline: --otoc inline;
      scrollbar-color: color-mix(in srgb, var(--akcent) 60%, transparent) transparent;
    }
    /* Koule začíná UPROSTŘED posuvu (jako pás projektů): první tah prstem
       kterýmkoli směrem ji roztočí. Prázdný `.scena-stred` stojí v půlce
       prázdného pásu a `scroll-initial-target` na něj při načtení najede. */
    .kulova:not(:has(.dlazdice:focus-visible)) .scena::after { content: ""; flex: none; width: 450%; }
    .kulova:not(:has(.dlazdice:focus-visible)) .scena-stred { flex: none; width: 0; margin-left: 250%; scroll-snap-align: start; scroll-initial-target: nearest; }
    .kulova:not(:has(.dlazdice:focus-visible)) .otacec {
      flex: none; width: 100%; max-width: none; padding: 0;
      position: sticky; left: 0;
      /* Poloměr podle šířky I VÝŠKY okna: koule se má vejít pod lištu
         celá i s dlaždicí, která se pod myší vysune. Na 1440×900 vychází
         ~370 px, na vyšším displeji až 30rem. Scéna je jen o kousek vyšší
         než koule — prázdný pruh nad koulí vlastník 4. 10. 2026 vrátil.
         ⚠️ PŘÍDAVEK DOLE (`--dole`, 5. 10. 2026): perspektiva zvětšuje
         přední dlaždice a koule je skloněná o 4° (`otoc`), takže spodní
         řada sahá pod rovník dál než poloměr — měřeno až 1,05 R a v okně
         vlastníka víc; scéna (`overflow`) ji pak usekla. Místo se proto
         přidává JEN DOLE, nahoře zůstává těsně. Střed koule, úběžník
         perspektivy i svit jádra se počítají bez přídavku, aby koule
         vypadala stejně jako dřív. */
      --R: min(42cqw, 30rem, (100svh - 8rem) / 2.05);
      --dole: calc(var(--R) * .25);
      height: calc(var(--R) * 2 + 2rem + var(--dole));
      padding-bottom: var(--dole);
      display: grid; place-items: center;
      perspective: 1400px;
      perspective-origin: 50% calc(50% - var(--dole) / 2);
    }
    /* Jádro koule — svit barvy jádra a mědi, jako tep loga v úvodu. */
    .kulova:not(:has(.dlazdice:focus-visible)) .otacec::before {
      content: ""; position: absolute; left: 50%; top: calc(50% - var(--dole) / 2);
      width: calc(var(--R) * 2.2); aspect-ratio: 1; translate: -50% -50%;
      border-radius: 50%; pointer-events: none;
      background:
        radial-gradient(circle, color-mix(in srgb, var(--jadro) 22%, transparent), transparent 45%),
        radial-gradient(circle, color-mix(in srgb, var(--akcent) 14%, transparent) 30%, transparent 68%);
    }
    .kulova:not(:has(.dlazdice:focus-visible)) .koule {
      width: 0; height: 0; transform-style: preserve-3d;
      animation: otoc linear both; animation-timeline: --otoc;
    }
    .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc {
      display: block; position: relative; transform-style: preserve-3d;
      animation: toc 120s linear infinite;
    }
    .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc > .dlazdice {
      --sd: calc(var(--R) * var(--velikost, .7) * var(--m, 1));
      position: absolute; left: 0; top: 0;
      width: var(--sd); margin: calc(var(--sd) * -.3125) 0 0 calc(var(--sd) * -.5);
      transform: rotateY(var(--lon)) rotateX(var(--lat)) translateZ(var(--R));
      transform-style: preserve-3d;
      overflow: visible; border: 0; background: none; box-shadow: none;
      backface-visibility: hidden;
      aspect-ratio: 16 / 10;
    }
    /* ⚠️ POD MYŠÍ SE HÝBE JEN OBRÁZEK, NE ODKAZ. Do 5. 10. 2026 se
       vysouval celý odkaz — myš pak z něj sjela, dlaždice se vrátila,
       myš byla zase nad ní a dlaždice se cukala tam a zpět (vlastník).
       Odkaz teď stojí na kouli pořád stejně a drží :hover. Rámeček,
       stín i zaoblení proto nese obrázek.
       ⚠️ OBRÁZEK JE PRO MYŠ NEVIDITELNÝ (`pointer-events: none`). Dokud
       myš „chytal" i vysunutý obrázek, záleželo na tom, kam se vysunul:
       vlastníkovi se dlaždice u okrajů cukaly dál, i při stojící kouli.
       Teď o hoveru rozhoduje JEN plocha odkazu na kouli, a tu vysunutí
       nemění — smyčka „vysunout → ztratit myš → zasunout" nemá z čeho
       vzniknout. Klik jde vždy na dlaždici, jejíž místo je pod myší. */
    /* ⚠️ OBRÁZEK JE VYKRESLENÝ DVAKRÁT VĚTŠÍ A ZMENŠENÝ AŽ VE 3D
       (`scale(.5)` na konci transformace, 8. 10. 2026). Chromium rastruje
       vrstvu ve 3D v její rozvržené velikosti a perspektiva přední
       dlaždice pak roztáhne ~1,4× — náhledy byly rozmazané i s obrázkem
       1280 px (vlastník). Rámeček a zaoblení jsou proto dvojnásobné.
       ⚠️ Posun −50 % a střed otáčení ve STŘEDU obrázku: zmenšení na
       polovinu kolem středu pak sedí přesně na dlaždici a otáčí se kolem
       jejího středu jako popisek (`::after`). S posunem −25 % a středem
       25 % 25 % se obrázek otáčel kolem čtvrtiny dlaždice, u spodních řad
       se vysunul před popisek a jméno designu zmizelo (vlastník 8. 10.). */
    .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc > .dlazdice img {
      position: absolute; left: -50%; top: -50%;
      width: 200%; max-width: none; height: auto;
      pointer-events: none;
      border: 2px solid var(--linka); border-radius: 12px;
      background: var(--pozadi-karta);
      backface-visibility: hidden;
      /* Nejdřív narovnat (zrušit sklon rovnoběžky), pak posouvat — tak
         jde `translate3d` svisle a vodorovně v prostoru koule, ne po
         skloněné ploše dlaždice. `--h` je 0/1, přechod pak plynule
         prolne natočení i posun. */
      transform: rotateX(calc(var(--h, 0) * -1 * var(--lat)))
                 translate3d(0, var(--k, 0px), var(--ven, 0px))
                 rotateX(calc(var(--h, 0) * 4deg)) scale(var(--zvetseni, 1)) scale(.5);
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    /* Vysune se o třetinu poloměru (méně nestačilo — dlaždice ze spodní
       řady zůstala hlouběji než sousední a ta ji překryla), NAROVNÁ se
       čelem k divákovi (vrací sklon rovnoběžky a 4° náklonu koule)
       a posune se svisle ke středu (`--k`): horní řada dolů,
       spodní nahoru, jinak by vyjela ze scény a ta ji usekla. */
    .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc > a.dlazdice:hover {
      --h: 1; --ven: calc(var(--R) * .35); --zvetseni: 1.12;
      --k: calc(var(--R) * .5 * sin(var(--lat)));
    }
    .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc > a.dlazdice:hover img {
      border-color: var(--akcent);
      box-shadow: 0 28px 60px -28px color-mix(in srgb, var(--akcent) 70%, transparent);
    }
  }
}
@keyframes otoc {
  from { transform: rotateX(-4deg) rotateY(0deg); }
  to   { transform: rotateX(-4deg) rotateY(-720deg); }
}
@keyframes toc { to { transform: rotateY(-360deg); } }
/* Polohy: PRAVIDELNÁ MŘÍŽKA jako na glóbu — 4 rovnoběžky (±13°, ±39°)
   po 8 polednících (každých 45°), sloupce zarovnané pod sebou. Dlaždice
   v řadě blíž k pólu je menší o kosinus zeměpisné šířky (`--m`), stejně
   jako se tam zkracuje obvod — rozestupy pak drží v celé kouli a rohy
   se nepotkají. ⚠️ Do 4. 10. 2026 tu byla Fibonacciho mřížka:
   rovnoměrná, ale vlastník ji vrátil jako chaotickou, rohy se kryly.
   Míst je 32; při víc designech přibude řada nebo sloupec. */
.koule-toc > :nth-child(1) { --lon: 0deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(2) { --lon: 45deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(3) { --lon: 90deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(4) { --lon: 135deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(5) { --lon: 180deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(6) { --lon: 225deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(7) { --lon: 270deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(8) { --lon: 315deg; --lat: 39deg; --m: 0.777; }
.koule-toc > :nth-child(9) { --lon: 0deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(10) { --lon: 45deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(11) { --lon: 90deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(12) { --lon: 135deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(13) { --lon: 180deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(14) { --lon: 225deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(15) { --lon: 270deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(16) { --lon: 315deg; --lat: 13deg; --m: 0.974; }
.koule-toc > :nth-child(17) { --lon: 0deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(18) { --lon: 45deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(19) { --lon: 90deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(20) { --lon: 135deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(21) { --lon: 180deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(22) { --lon: 225deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(23) { --lon: 270deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(24) { --lon: 315deg; --lat: -13deg; --m: 0.974; }
.koule-toc > :nth-child(25) { --lon: 0deg; --lat: -39deg; --m: 0.777; }
.koule-toc > :nth-child(26) { --lon: 45deg; --lat: -39deg; --m: 0.777; }
.koule-toc > :nth-child(27) { --lon: 90deg; --lat: -39deg; --m: 0.777; }
.koule-toc > :nth-child(28) { --lon: 135deg; --lat: -39deg; --m: 0.777; }
.koule-toc > :nth-child(29) { --lon: 180deg; --lat: -39deg; --m: 0.777; }
.koule-toc > :nth-child(30) { --lon: 225deg; --lat: -39deg; --m: 0.777; }
.koule-toc > :nth-child(31) { --lon: 270deg; --lat: -39deg; --m: 0.777; }
.koule-toc > :nth-child(32) { --lon: 315deg; --lat: -39deg; --m: 0.777; }

/* ŠIPKY u koule (Chromium 135+): otočí ji o šířku scény, tedy asi
   o sto stupňů. Jen pro myš. */
@supports (animation-timeline: scroll()) and selector(::scroll-button(*)) {
  @media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    .kulova:not(:has(.dlazdice:focus-visible)) .scena::scroll-button(*) {
      /* Na výšku středu koule, ne scény — ta má dole přídavek `--dole`:
         výška H = 2,25 R + 2rem, střed v R + 1rem = 4/9 H + 1/9 rem. */
      position: absolute; top: calc(400% / 9 + 1rem / 9); translate: 0 -50%; z-index: 2;
      width: 3rem; height: 3rem; border-radius: 50%;
      display: grid; place-items: center; font-size: 1.2rem; cursor: pointer;
      color: var(--akcent); background: var(--pozadi-karta);
      border: 1px solid color-mix(in srgb, var(--akcent) 50%, var(--linka));
      box-shadow: 0 10px 24px -12px rgb(0 0 0 / .7);
    }
    .kulova:not(:has(.dlazdice:focus-visible)) .scena::scroll-button(left)  { content: "\21ba" / "Otočit doleva";  left:  max(.75rem, (100% - var(--sirka)) / 2 + .75rem); }
    .kulova:not(:has(.dlazdice:focus-visible)) .scena::scroll-button(right) { content: "\21bb" / "Otočit doprava"; right: max(.75rem, (100% - var(--sirka)) / 2 + .75rem); }
    :lang(en) .kulova:not(:has(.dlazdice:focus-visible)) .scena::scroll-button(left)  { content: "\21ba" / "Spin left"; }
    :lang(en) .kulova:not(:has(.dlazdice:focus-visible)) .scena::scroll-button(right) { content: "\21bb" / "Spin right"; }
    .kulova:not(:has(.dlazdice:focus-visible)) .scena::scroll-button(*):hover { background: color-mix(in srgb, var(--akcent) 14%, var(--pozadi-karta)); }
    .kulova:not(:has(.dlazdice:focus-visible)) .scena::scroll-button(*):disabled { opacity: .3; cursor: default; }
  }
}

/* ---------------------------------------------------- pásy projektů */
/* PÁS PROJEKTŮ (4. 10. 2026): karty aplikací, her a knihy v jednom
   řádku zleva doprava; designy nad ním jsou na kouli. Vlastník ho chtěl
   po kouli, mřížce i „stěně" — u projektů je důležitý text karty, a ten
   se v pásu čte nejlíp. Bez JavaScriptu.

   • PÁS SAHÁ PŘES CELOU ŠÍŘKU OKNA, ale první karta lícuje se sloupcem.
     `--okraj` je přesně to, o co by sloupec `.plocha` odsadil obsah od
     hrany okna; pás ho má jako vnitřní odsazení i jako `scroll-padding`.
     Karty tak odjíždějí za fyzický okraj displeje (na širokém plátně
     dojedou až k hraně okna, ne jen k hraně sloupce).
   • Po stranách PŘECHOD DO ZTRACENA široký právě `--okraj`. Na 1440 px
     to znamená, že karty za sloupcem jsou vidět, ale rozpuštěné — náznak
     „tudy to pokračuje", stejně jako u nabídky v liště.
   • `scroll-snap` tady JE, na rozdíl od nabídky v liště. Tam rozbíjel
     klávesnici, protože sedm krátkých štítků se vejde do pásu víckrát
     a přichytávání vracelo zaměřenou položku pod přechod. Karta je
     široká skoro jako okno, takže nejbližší bod přichycení je vždycky
     ta karta, ve které je fokus — ověřeno tabulátorem přes oba pásy.
   • Svislé odsazení pásu není ozdoba: posuvný kontejner ořízne cokoli,
     co z něj vyčuhuje, a karta se pod rukou zvedá o 4 px a vrhá stín.
     Záporný okraj totéž vrací, ať pás nerozhodí rytmus sekce. */
.pas {
  /* Odsazení přesně jako `.plocha` (okraj 1.5rem, od 48rem 2.5rem) — jinak
     pás stál 16–24 px mimo sloupec. Karta je široká jako třetina sloupce,
     stejně jako služby a tarify. */
  --okraj-pasu: max(var(--okraj), (100% - var(--sirka)) / 2);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: max(min(84%, 23rem), (100% - 2.8rem) / 3);
  gap: 1.4rem;
  padding: 1.2rem var(--okraj-pasu) 2.4rem;
  margin-bottom: -1.2rem;
  scroll-padding-inline: var(--okraj-pasu);
  /* `proximity`, ne `mandatory`: tah prstem i trackpadem jede volně
     a k nejbližší kartě se přichytí, jen když se zastaví poblíž. */
  scroll-snap-type: x proximity;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* Posuvník ZŮSTÁVÁ vidět (na rozdíl od lišty): kdo má myš bez
     vodorovného kolečka, potáhne za něj. Tenký a měděný, ať nepůsobí
     jako systémová šeď vložená do výlohy. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--akcent) 55%, transparent) transparent;
  /* ⚠️ ŽÁDNÁ MASKA přes okraje (do 5. 10. 2026 tu byl přechod do
     ztracena `mask-image`). Měřeno tahem prstem přes pás: snímek
     39 ms s maskou a skleněnými kartami, 21 ms bez skla, 18 ms bez obojího.
     Karty teď jedou až k hraně okna. */
}
/* PLNÁ KARTA, NE SKLO. Rozostření pozadí (`backdrop-filter`) se při
   každém posunu pásu počítá znovu a bylo nejdražší část snímku. */
.pas > .karta { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pas > .karta { scroll-snap-align: start; }
/* PÁS ZAČÍNÁ UPROSTŘED (4. 10. 2026, přání vlastníka): na začátku byla
   vlevo od první karty prázdná deska a karty jen ubíhaly doprava. Pás se
   proto při načtení sám posune na prostřední kartu — vlevo i vpravo jsou
   karty a je hned vidět, že jede oběma směry. Bez skriptu:
   `scroll-initial-target` (Chromium 133+); jinde pás začne první kartou
   jako dřív. ⚠️ Číslo je natvrdo: 10 karet → 6. Když karta přibude nebo
   ubude, posuň ho na prostřední. */
/* ⚠️ Šestá karta je od 7. 10. 2026 SLUNOVRAT — vizuálně nejsilnější hra;
   kniha („Připravujeme") je na konci pásu, Gem Stall nad ním zvlášť.
   Při přidání projektu posuň číslo na prostřední kartu. */
.pas > .karta:nth-child(6) { scroll-initial-target: nearest; }
@media (prefers-reduced-motion: no-preference) {
  .pas { scroll-behavior: smooth; }
}
/* ⚠️ VYNOŘOVÁNÍ KARET V PÁSU NEPLATÍ. `view()` se vztahuje k nejbližšímu
   posuvnému předkovi, a to je teď pás, ne stránka — časová osa by tak
   běžela podle svislého posuvu pásu, který se nikdy nehne, a karty by
   zůstaly navždy v ztlumeném výchozím stavu. Vynořuje se proto celý pás. */
.pas > .karta { animation: none; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pas {
      animation: vynoreni linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

/* ANIMACE KARET (5. 10. 2026, „ať je to zajímavější"). Všechno řídí
   POLOHA KARTY V PÁSU (časová osa `view(inline)`), takže se hýbou pod
   prstem, ne samy od sebe. Bez skriptu, jen kde je pohyb vítán.
   • PARALAXA: náhled je v rámečku o 18 % větší a posouvá se proti
     pohybu pásu, jako by hra byla za oknem karty.
   • Pod myší se náhled přiblíží a přejede po něm odlesk.
   ⚠️ NIC Z TOHO NESAHÁ NA `transform` KARTY. Chromium počítá body
   přichycení z natočené / posunuté polohy prvku (viz 3D kolo v README) —
   proto jen `translate`/`scale` na obrázku uvnitř.
   ⚠️ Zkoušelo se i „zaostření" (karta u okraje pás pohasne, `opacity` na
   kartě podle polohy): stálo ~4 ms na snímek, paralaxa skoro nic.
   Vypuštěno — plynulost tahu má přednost. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pas > .karta { view-timeline: --karta inline; }
    .pas .nahled {
      scale: 1.18;
      animation: paralaxa linear both;
      animation-timeline: --karta;
      transition: filter .4s ease, scale .6s cubic-bezier(.2, .8, .2, 1);
    }
    .pas > .karta:has(.odkaz):hover .nahled,
    .pas > .karta:has(.odkaz:focus-visible) .nahled { scale: 1.27; }
    .pas .nahled-ram::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(110deg, transparent 35%,
        rgb(255 255 255 / .2) 50%, transparent 65%);
      translate: -120% 0;
    }
    .pas > .karta:has(.odkaz):hover .nahled-ram::after { animation: odlesk .9s ease-out; }
  }
}
@keyframes paralaxa {
  from { translate: 7% 0; }
  to   { translate: -7% 0; }
}
@keyframes odlesk {
  from { translate: -120% 0; }
  to   { translate: 120% 0; }
}

/* ŠIPKY. Kde prohlížeč umí `::scroll-button()` (Chromium 135+), dostane
   pás dvě tlačítka bez jediného řádku skriptu: posunou ho o stránku
   a na kraji pásu se samy schovají. Jinde zůstane prst, kolečko,
   posuvník a tabulátor. Jen pro myš — na dotyku by kryla karty a prst
   pás posune líp.
   Tlačítka sedí na hraně sloupce a svisle na středu náhledů; na pás je
   váže KOTVA (`anchor-name`), protože výška hlavičky nad pásem se mění
   s délkou textu i jazykem: šipky stojí na 28 % výšky pásu, tedy
   ve výšce náhledů. `anchor-scope`
   chrání před kolizí jmen kotev mezi bloky Projektů.
   Alternativní text šipky je za lomítkem; anglická verze ho přepisuje
   přes `:lang(en)`. */
@supports selector(::scroll-button(*)) {
  @media (hover: hover) and (pointer: fine) {
    .galerie-blok { position: relative; anchor-scope: --pas; }
    .pas { anchor-name: --pas; }
    .pas::scroll-button(*) {
      position: absolute; position-anchor: --pas;
      /* Na výšce náhledů (horní třetina pásu), ať šipka nesedí v textu. */
      top: calc(anchor(28%) - 1.375rem);
      width: 2.75rem; height: 2.75rem; border-radius: 50%;
      display: grid; place-items: center;
      font-size: 1.15rem; line-height: 1;
      color: var(--akcent); background: var(--pozadi-karta);
      border: 1px solid color-mix(in srgb, var(--akcent) 45%, var(--linka));
      box-shadow: 0 10px 24px -12px rgb(0 0 0 / .7);
      cursor: pointer; z-index: 2;
      transition: opacity var(--prechod), background var(--prechod);
    }
    /* Vodorovně stačí obyčejná procenta: `.galerie-blok` je stejně široký
       jako pás, takže `--okraj` tu vyjde na pixel stejně. */
    .pas::scroll-button(left)  { content: "\2190" / "Předchozí"; left:  calc(max(var(--okraj), (100% - var(--sirka)) / 2) - 1.375rem); }
    .pas::scroll-button(right) { content: "\2192" / "Další";     right: calc(max(var(--okraj), (100% - var(--sirka)) / 2) - 1.375rem); }
    :lang(en) .pas::scroll-button(left)  { content: "\2190" / "Previous"; }
    :lang(en) .pas::scroll-button(right) { content: "\2192" / "Next"; }
    .pas::scroll-button(*):hover { background: color-mix(in srgb, var(--akcent) 14%, var(--pozadi-karta)); }
    .pas::scroll-button(*):focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
    .pas::scroll-button(*):disabled { opacity: 0; pointer-events: none; }
  }
}


/* ===================== DOKUMENT (ochrana údajů) =====================
   Textová stránka bez úvodní scény: štítek, titulek, perex a pod ním
   sloupec odstavců s měrou ~65 znaků. Titulky oddílů jsou titulkovým
   písmem, ale o řád menší než titulky sekcí titulky — je to čtení,
   ne výloha. */
.dokument { padding: clamp(2.5rem, 7vw, 5.5rem) 0 var(--sekce); }
.dokument .plocha { max-width: calc(46rem + 2 * var(--okraj)); }
.dokument h1 { margin: 1rem 0 0; font-size: clamp(2.8rem, 7vw, 5rem); }
.dokument .podtitulek { margin-top: 1.4rem; }
.dokument h2 {
  margin: clamp(2.6rem, 5vw, 3.4rem) 0 .9rem;
  padding-top: 1.4rem; border-top: 1px solid var(--linka);
  font-family: var(--pismo-titulek); font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1.1; letter-spacing: -.01em;
}
.dokument h2 + p, .dokument p + p, .dokument p + .seznam, .dokument .seznam + p { margin-top: .9rem; }
.dokument p { margin: 0; color: var(--text-tlumeny); font-size: 1.04rem; max-width: 38em; }
/* Úvod „Ve zkratce" jako podtitulek, ne běžný odstavec — `.dokument p`
   ho přebíjelo specifičností (designér, kolo 17). */
.dokument .podtitulek { font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--text); max-width: 52ch; }
.dokument .seznam li { font-size: 1rem; }
.dokument a, .pata-spodek a {
  color: var(--akcent); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--akcent) 40%, transparent); text-underline-offset: .25em;
}
.dokument a:hover, .pata-spodek a:hover { color: var(--akcent-syty); text-decoration-color: currentColor; }
.pata-spodek a { color: inherit; }

/* ZASTAVIT POHYB (WCAG 2.2.2): pás ukázek a koule se hýbou samy, tak
   jde pohyb vypnout. Zaškrtávátko pod pásem; `:has()` na :root pozastaví
   všechny nekonečné animace. Otáčení koule rukou zůstává. Bez `:has()`
   by přepínač nic neudělal, proto se tam neukazuje. */
.pohyb { display: none; }
@supports selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) {
    .pohyb { display: flex; justify-content: flex-end; margin-top: .7rem; }
  }
}
.pohyb input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.pohyb label {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  min-height: 1.75rem; padding: 0 .7rem;
  border: 1px solid var(--linka); border-radius: 999px;
  font-family: var(--pismo-stroj); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-tlumeny);
  transition: color var(--prechod), border-color var(--prechod);
}
.pohyb label:hover { color: var(--text); border-color: var(--linka-silna); }
/* Ikona: dvě svislé čárky (pauza). */
.pohyb label::before {
  content: ""; width: .5rem; height: .6rem;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}
/* Zaškrtnuto = pohyb stojí: přepínač vypadá zamáčknutý (měděná výplň).
   Text zůstává stejný — čtečka k němu hlásí „zaškrtnuto". */
.pohyb input:checked + label {
  color: var(--akcent-text); background: var(--akcent); border-color: var(--akcent);
}
.pohyb input:focus-visible + label { outline: 2px solid var(--jadro); outline-offset: 2px; }
:root:has(#pohyb:checked) :is(.remesla-stopa, .koule-toc, .znak-scena),
:root:has(#pohyb:checked) :is(.znak-scena, .stav)::before,
:root:has(#pohyb:checked) :is(.znak-scena)::after { animation-play-state: paused !important; }

/* VÝZVA V LIŠTĚ: malé plné tlačítko „Poptat" vedle jazyka — kontakt je
   na dosah z každého místa stránky, i na telefonu, kde je položka
   „Kontakt" v posuvném pásu až za okrajem. */
.tlacitko.lista-vyzva {
  min-height: var(--pilulka, 2rem); padding: 0 .95rem;
  font-size: .82rem; box-shadow: inset 0 1px 0 var(--tlacitko-hrana);
}
.tlacitko.lista-vyzva:hover { translate: none; }
.znacka span { white-space: nowrap; }
@media (max-width: 28rem) {
  .znacka { gap: .5rem; font-size: 1.18rem; }
  .znacka img { height: 36px; }
  .tlacitko.lista-vyzva { padding: 0 .75rem; font-size: .78rem; }
  .ovladani { gap: .3rem; }
}
/* Pod 360 px se do řádku nevejde značka, motiv, jazyk i výzva: motiv
   ustoupí (je to pohodlí, ne obsah), výzva zůstane. */
@media (max-width: 22.4rem) { .ovladani .tema { display: none; } }

/* Adresa textem pod tlačítky v úvodu. */
.tlacitka-pozn {
  grid-area: pozn; margin: .9rem 0 0;
  font-size: .86rem; color: var(--text-tlumeny);
}
.tlacitka-pozn a { color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--akcent) 50%, transparent); text-underline-offset: .25em; }
.tlacitka-pozn a:hover { color: var(--akcent); }

/* SPECIFIKACE: čtyři naměřená čísla o téhle stránce těsně před výzvou.
   Strojopis, rytá linka nahoře — údaj z technického listu, ne slogan. */
.specifikace { padding-top: var(--sekce); }
.specifikace-nadpis {
  margin: 0 0 1.4rem; text-align: center;
  font-family: var(--pismo-stroj); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-tlumeny);
}
.specifikace ul {
  margin: 0; padding: 1.6rem 0 0; list-style: none;
  display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linka);
}
@media (min-width: 52rem) { .specifikace ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.specifikace li { display: grid; align-content: start; gap: .35rem; text-align: center; font-size: .9rem; color: var(--text-tlumeny); }
.specifikace strong {
  font-family: var(--pismo-titulek); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1; letter-spacing: -.01em; color: var(--akcent);
}
.specifikace + .kontakt { padding-top: clamp(3.5rem, 7vw, 6rem); }

/* ROZETA v panelu kontaktu: rytý měděný medailon (z designu Mědiryt)
   jako tichý vodoznak za nadpisem. Při rolování se pootočí — závěr
   stránky má svůj „okamžik", ale text zůstává nahoře a čitelný. */
/* `clip`, ne `hidden`: `overflow: hidden` dělá z panelu posuvný kontejner
   a `view()` rozety se pak vázala na něj místo na stránku — rozeta stála
   (designérský posudek, kolo 7). */
.kontakt .plocha { overflow: clip; isolation: isolate; }
.kontakt-rozeta {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: min(34rem, 92%); height: auto; translate: -50% -50%;
  opacity: .12; filter: saturate(.8);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
:root:has(#tema-svetly:checked) .kontakt-rozeta { opacity: .16; mix-blend-mode: multiply; }
/* „RYDLO" — výrazný okamžik v místě poptávky: jak panel kontaktu vjíždí,
   rydlo vyryje rozetu jedním kruhovým tahem (kuželová maska podle úhlu
   `--rez`), po hraně tahu jede měděný záblesk hrotu. Na konci rozeta
   zbledne na vodoznak a zůstane výzva. Bez časové osy posuvu (Firefox,
   Safari) a při omezeném pohybu zůstává klidná rozeta jako dřív. */
@property --rez { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Záblesk hrotu jen .2 v tmavém motivu: klín s .55 přejížděl přes
       odstavec a stahoval kontrast na 2,3:1 (tester, kolo 13); s .2
       ještě 4,32:1 na 320 px, s .12 už 4,55 (tester, kolo 14). */
    .kontakt { view-timeline: --kontakt block; --hrot-op: .12; }
    .kontakt-rozeta {
      width: min(40rem, 118%); opacity: .16; top: 40%;
      -webkit-mask-image: conic-gradient(from 0deg, #000 var(--rez), transparent 0), radial-gradient(closest-side, #000 55%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image: conic-gradient(from 0deg, #000 var(--rez), transparent 0), radial-gradient(closest-side, #000 55%, transparent 100%);
      mask-composite: intersect;
      animation: rez linear both, dotisk linear both;
      animation-timeline: --kontakt, --kontakt;
      /* Tah začíná nahoře (conic from 0deg = dvanáct hodin). Konec je
         vázaný na DÉLKU, ne na procenta: kotva #kontakt přistává s panelem
         ~7,25–8,5rem pod horní hranou, tedy po „100svh − 8,5rem" rozsahu
         cover. Procenta závisela na výšce okna a na 1280×720 tah po kliku
         na Poptat zůstal nedokreslený (tester, kolo 9). */
      animation-range: cover 15% cover calc(100svh - 9.5rem), cover calc(100svh - 9.5rem) cover calc(100svh + 6rem);
    }
    .kontakt .plocha::after {
      content: ""; position: absolute; z-index: -1; left: 50%; top: 40%;
      width: min(40rem, 118%); aspect-ratio: 1; translate: -50% -50%;
      border-radius: 50%; pointer-events: none;
      background: conic-gradient(from calc(var(--rez) - 24deg), transparent 0deg,
        color-mix(in srgb, var(--akcent-syty) 80%, #fff) 23deg, transparent 24deg);
      -webkit-mask-image: radial-gradient(closest-side, transparent 82%, #000 86% 94%, transparent 98%);
      mask-image: radial-gradient(closest-side, transparent 82%, #000 86% 94%, transparent 98%);
      opacity: .55;
      animation: rez linear both, hrot linear both;
      animation-timeline: --kontakt, --kontakt;
      animation-range: cover 15% cover calc(100svh - 9.5rem), cover 15% cover calc(100svh - 9rem);
    }
    /* Hodnoty jdou do keyframes přes proměnné — samotné `opacity` by
       animace přebila a světlý motiv by měl tmavé hodnoty. */
    :root:has(#tema-svetly:checked) .kontakt { --rozeta-op: .17; --rozeta-klid: .14; --hrot-op: .3; }
  }
}
@keyframes rez    { from { --rez: 0deg; } to { --rez: 360deg; } }
@keyframes hrot   { 0%, 90% { opacity: var(--hrot-op, .55); } 100% { opacity: 0; } }
/* Plná síla jen .16 (dřív .2): rozeta jede přes odstavec a pod textem
   stahovala kontrast na 4,2:1 (tester, kolo 12). */
@keyframes dotisk { from { opacity: var(--rozeta-op, .16); } to { opacity: var(--rozeta-klid, .12); } }

/* VYBRANÁ APLIKACE: Gem Stall jako široká karta nad pásem — náhled vlevo,
   vpravo co aplikace umí. Je to tatáž `.karta.projekt` (hover, obtah,
   celá karta klikací), jen v mřížce o dvou sloupcích. */
.pripad { margin: 1.2rem 0 .6rem; }
.pripad .pripad-text { display: flex; flex-direction: column; gap: .7rem; padding: .4rem 0 0; }
.pripad h4 {
  margin: 0; font-family: var(--pismo-titulek); font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; letter-spacing: -.015em;
}
.pripad .seznam { margin-top: .3rem; }
.pripad .odkaz { margin-top: .5rem; }
@media (min-width: 48rem) {
  .pripad {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
    padding: .6rem clamp(1.5rem, 3vw, 2.5rem) .6rem .6rem;
  }
  .pripad > :not(.nahled-ram) { margin-inline: 0; }
  .pripad .nahled-ram { margin: 0; }
}

/* KNIHA: obálka je levandulová, tak ji drží měděný rám s odstupem —
   patří ke stránce, i když má vlastní barvy. Pod stavem odkaz pro ty,
   kdo chtějí vědět, až vyjde. */
.kniha-upozornit { margin: 1rem 0 0; font-size: .92rem; color: var(--text-tlumeny); }
.kniha-upozornit a { color: var(--akcent); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--akcent) 40%, transparent); text-underline-offset: .25em; }
.kniha-upozornit a:hover { color: var(--akcent-syty); text-decoration-color: currentColor; }

/* KRATŠÍ TELEFON: seznamy u služeb opakují seznamy tarifů v ceníku —
   na úzkém displeji zůstane jen popis služby (o ~500 px kratší). */
@media (max-width: 47.99rem) {
  .sluzba .seznam { display: none; }
  .tarif { padding: 1.4rem; }
  .tarif .seznam li { font-size: .92rem; }
}

/* Údaje pod tlačítkem kontaktu běžným písmem — strojopis na střed se
   v pěti řádcích špatně četl. */
.kontakt .kontakt-pozn { font-family: var(--pismo); font-size: .86rem; letter-spacing: 0; }

/* SPECIFIKACE JAKO RYTÝ ŠTÍTEK: rám plakety a tahy brusiva v pozadí. */
.specifikace .specifikace-stitek {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--linka-silna); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.4rem);
  background: linear-gradient(180deg, var(--povrch-hrana), transparent 40%), var(--pozadi-karta);
}
.specifikace .specifikace-stitek::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--med-tahy) 0 0 / 44rem 44rem; opacity: .06;
}
.specifikace .specifikace-stitek ul { border-top: 0; padding-top: 0; }

/* SAZBA A SJEDNOCENÍ (designérský posudek kola 5) */
li, summary { text-wrap: pretty; }
.doveryhodnost li { text-wrap: balance; }
/* Strojové popisky jednou velikostí a prostrkáním. */
.remesla-popisek, .karta .typ, .chyba .typ, .kniha-uvod .typ, .dokument .typ,
.tarif .tarif-komu, .specifikace-nadpis, .pata-nadpis, .pohyb label {
  font-size: .7rem; letter-spacing: .12em;
}
.postup .krok h3 { font-size: 1.22rem; }
/* Rozsah „2–3 týdny": ve strojovém písmu by pomlčka vypadala jako spojovník. */
.tarif .tarif-cas { font-family: var(--pismo); font-size: .82rem; letter-spacing: 0; }
/* Světlý motiv: měkký stín tlačítek místo hnědé šmouhy. */
/* Obrysová tlačítka tarifů zůstávají bez stínu (tester, kolo 21). */
:root:has(#tema-svetly:checked) .tlacitko:not(.tise):not(.tarif .tlacitko) {
  box-shadow: inset 0 1px 0 var(--tlacitko-hrana), 0 6px 14px -8px rgb(80 40 20 / .35);
}

/* Štítek nad titulkem knihy leží na telefonu přes stín obálky — ve
   světlém motivu o stupeň tmavší měď (kontrast byl 4,4:1). */
:root:has(#tema-svetly:checked) .kniha-uvod .typ { color: var(--akcent-syty); }

/* NÍZKÝ DISPLEJ (notebook 1280×720 i s lištami prohlížeče): úvod se ještě
   zhustí, aby pás ukázek vykoukl celým řádkem náhledů. */
@media (min-width: 48rem) and (max-height: 56.25rem) {
  .uvod { min-height: 0; padding-top: 1.25rem; padding-bottom: 1rem; }
  .uvod .stav { margin-bottom: .8rem; }
  .uvod h1 { font-size: clamp(3.2rem, 4.6vw, 4.6rem); }
  .uvod .podtitulek { margin-top: .9rem; }
  .uvod .tlacitka { margin-top: 1.2rem; }
  .uvod .doveryhodnost { margin-top: 1.2rem; padding-top: .9rem; }
  .znak-scena { --plaketa: clamp(170px, 17vw, 220px); }
  .uvod .plocha { --plaketa-kruh: clamp(170px, 17vw, 220px); }
}

/* TELEFON A DOTYK (designérský posudek kola 7) */
.scena-stred { display: none; }
@supports (animation-timeline: scroll()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .kulova:not(:has(.dlazdice:focus-visible)) .scena-stred { display: block; }
  }
}
/* Větší plocha pro prst bez změny vzhledu. */
header nav a, .jazyk, .tlacitko.lista-vyzva, .tlacitka-pozn a, footer a { position: relative; }
header nav a::before, .jazyk::before, .tlacitko.lista-vyzva::before, .tlacitka-pozn a::before {
  content: ""; position: absolute; inset: -8px -4px;
}
/* Jazyk a Poptat jsou na telefonu jen 4 px nad nabídkou — dolů nesmí
   sahat přes polovinu mezery, jinak horní okraj „Ceník" otevřel EN. */
.jazyk::before, .tlacitko.lista-vyzva::before { inset: -8px -4px -2px; }
@media (pointer: coarse) {
  /* Pás projektů: karta na střed, sousedé vykouknou z obou stran — je
     vidět, že pás jede oběma směry. */
  .pas { grid-auto-columns: 78%; }
  .pas > .karta { scroll-snap-align: center; }
}
@media (hover: none) {
  /* Ťuknutí by nechalo :hover „přilepený" a pás ukázek by stál. */
  .remesla:hover .remesla-stopa { animation-play-state: running; }
}
@supports (animation-timeline: scroll()) {
  @media screen and (hover: none) and (prefers-reduced-motion: no-preference) {
    /* Na dotyku není :hover — jméno designu je na dlaždici pořád. */
    :root .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc > a.dlazdice::after { opacity: 1; }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 47.99rem) {
    /* Vysoké karty na telefonu: dosvítí dřív, ať se první řádky nečtou ztlumené. */
    .karta, .krok, .kontakt .plocha, .cenik-pozn { animation-range: entry 0% entry 25%; }
  }
}
@media (max-width: 47.99rem) {
  /* Patička: odkazy ve dvou sloupcích, každý dost vysoký pro prst. */
  footer nav.pata-blok { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; align-items: center; }
  footer nav.pata-blok .pata-nadpis { grid-column: 1 / -1; }
  footer nav.pata-blok a { min-height: 2.75rem; display: flex; align-items: center; padding-block: 0; }
}

/* Záložní cesta k napsání pod tlačítkem kontaktu: mailto na počítači bez
   poštovního programu nic neudělá. Obyčejné odkazy na webmail. */
.kontakt .kontakt-alt { margin: 1rem auto 0; font-size: .86rem; color: var(--text-tlumeny); }
.kontakt .kontakt-alt a { white-space: nowrap; padding-block: .3em; color: var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--akcent) 50%, transparent); text-underline-offset: .25em; }
.kontakt .kontakt-alt a:hover { color: var(--akcent); }

/* REDAKČNÍ PŘEDĚL: jedna věta přes celou šířku mezi Projekty a Postupem —
   rozbije opakovaný rytmus sekcí. Rytá linka nad ní jako u kroků postupu. */
.predel { padding-top: var(--sekce); }
.predel-veta {
  position: relative; margin: 0; padding-top: clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--pismo-titulek); font-weight: 400; font-style: italic;
  font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -.02em;
  color: var(--text); text-wrap: balance;
}
/* Nízký displej má menší H1 — předěl ji nesmí přerůst. */
@media (min-width: 48rem) and (max-height: 56.25rem) { .predel-veta { font-size: clamp(2.4rem, 4.3vw, 4.2rem); } }
.predel-veta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--akcent), var(--linka) 45%);
  transform-origin: 0 50%;
}
.predel-dovetek { margin: 1.2rem 0 0; max-width: 46ch; font-size: 1.06rem; color: var(--text-tlumeny); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .predel-veta::before { animation: ryti linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .predel-veta { animation: vynoreni linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}

/* KNIHA JAKO PŘEDMĚT (designérský posudek kola 9): obálka natočená
   v prostoru, s hřbetem a ořízkou stránek — ne obrázek v rámečku, který
   vypadal jako tablet. */
.kniha-objekt {
  position: relative; display: block; width: fit-content; justify-self: center;
  transform: perspective(1400px) rotateY(-16deg) rotateX(2deg);
  transform-origin: 30% 50%;
  transition: transform .8s var(--dojezd);
}
.kniha-objekt:hover { transform: perspective(1400px) rotateY(-6deg) rotateX(1deg); }
.kniha-objekt .kniha-obalka {
  border: 0; border-radius: 2px 5px 5px 2px;
  box-shadow:
    1px 1px 0 #ece7dd, 2px 2px 0 #dcd6ca, 3px 3px 0 #cec7ba, 4px 4px 0 #bfb8aa,
    5px 5px 0 #aea698,
    24px 38px 60px -24px rgba(0, 0, 0, .85), 0 2px 8px -2px rgba(0, 0, 0, .5);
}
.kniha-objekt::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 12px;
  border-radius: 2px 0 0 2px; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .35), rgb(255 255 255 / .18) 45%, rgb(0 0 0 / .12) 70%, transparent);
}
@media (prefers-reduced-motion: reduce) { .kniha-objekt { transition: none; } }
@media (max-width: 47.99rem) {
  /* Na telefonu: štítek a titulek, pod nimi obálka, pak teprve perex
     a tlačítka — kniha jako předmět je vidět v první obrazovce. Text
     se kvůli tomu rozpustí do mřížky (`display: contents`). */
  .kniha-uvod .plocha { gap: 0; }
  .kniha-uvod-text { display: contents; }
  .kniha-uvod-text > * { order: 3; }
  .kniha-uvod-text > .typ, .kniha-uvod-text > h1 { order: 1; }
  /* Spodní okraj větší než dosah stínu obálky — jinak ve světlém motivu
     ztmavil první řádek perexu pod 4,5:1 (tester, kolo 11). */
  .kniha-objekt { order: 2; margin: 1.8rem auto 3.6rem; }
  .kniha-objekt .kniha-obalka { width: min(60vw, 14rem); }
}
.kniha-tlacitka { margin-top: 1.6rem; }

/* Ukázkové strany jako vějíř s popisky. */
.ukazka { margin: 0; display: grid; gap: 1.6rem; justify-items: center; transition: translate .5s var(--dojezd), rotate .5s var(--dojezd); }
/* Popisek dál od stínu strany a plnou barvou textu — ve světlém motivu
   ho stín ztmavil pod 4,5:1 (tester, kolo 10). */
.ukazka figcaption { font-family: var(--pismo-stroj); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text); text-align: center; }
@media (min-width: 46rem) {
  .ukazky { align-items: start; }
  .ukazka:nth-child(1) { rotate: -3deg; translate: 1.5rem .8rem; }
  .ukazka:nth-child(2) { position: relative; z-index: 1; }
  .ukazka:nth-child(3) { rotate: 3deg; translate: -1.5rem .8rem; }
  .ukazka:hover { z-index: 2; }
}
.kontakt .kniha-studio { margin-top: 1.4rem; }

/* 404: rytá rozeta jako tichý podpis Mědirytu v prázdné polovině. */
.chyba { overflow: clip; }
.chyba .plocha { position: relative; }
.chyba-rozeta {
  position: absolute; z-index: -1; right: calc(-1 * var(--okraj)); top: 50%; translate: 20% -50%;
  width: min(36rem, 70vw); height: auto; opacity: .14; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
:root:has(#tema-svetly:checked) .chyba-rozeta { opacity: .12; mix-blend-mode: multiply; }

/* FOKUS POSUVNÝCH KONTEJNERŮ: Chromium z koule a pásu her dělal zastávky
   tabulátoru samo, ale `:focus` na nich neplatil a obrys nešlo nastylovat
   (WCAG 2.4.7, tester kolo 10). Proto mají výslovně `tabindex="0"`
   a přístupné jméno — pak se chovají jako každý jiný prvek s fokusem. */
.scena:focus-visible, .pas:focus-visible { outline: 2px solid var(--jadro); outline-offset: -2px; }
@media (min-width: 46rem) and (prefers-reduced-motion: no-preference) {
  .ukazka:hover { rotate: 0deg; translate: 0 -.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kniha-objekt:hover { transform: perspective(1400px) rotateY(-16deg) rotateX(2deg); }
}

/* POSLEDNÍ DOTAŽENÍ (designérský posudek kola 11) */
/* Služby titulkovým písmem jako všechny ostatní karty; ikonky ve
   čtverečcích pryč — působily jako šablona pro SaaS. */
.sluzba h3 { font-family: var(--pismo-titulek); font-weight: 400; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.08; letter-spacing: -.01em; }
.sluzba-znak { display: none; }

/* Kniha: pointa pod kartami vrstev jako předěl. */
.kniha-pointa { margin-top: clamp(2rem, 4vw, 3rem); }

/* Kontakt: e-mail je vrchol stránky — velkou kurzívou, dá se rovnou
   přečíst i zkopírovat, ne malé tlačítko. */
.kontakt .plocha > .tlacitko {
  min-height: 0; padding: 0 0 .12em; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  color: var(--akcent); font-family: var(--pismo-titulek); font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem); font-style: italic; letter-spacing: -.015em;
  transition: background-size .4s var(--dojezd), color var(--prechod);
}
.kontakt .plocha > .tlacitko:hover { background-color: transparent; background-size: 100% 2px; translate: none; color: var(--akcent-syty); }
:root:has(#tema-svetly:checked) .kontakt .plocha > .tlacitko { box-shadow: none; }

/* Ceník: provoz po spuštění pod nadpisem; na širokém displeji ve třech
   sloupcích přesně pod tarify. */
.cenik-pozn-nadpis {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
  font: 500 .72rem/1 var(--pismo-stroj); letter-spacing: .14em; text-transform: uppercase; color: var(--text-tlumeny);
}
@media (min-width: 64rem) {
  .cenik-pozn { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 1.8vw, 1.5rem); border-top: 0; }
  .cenik-pozn li { grid-column: auto; display: block; border-top: 1px solid var(--linka-silna); border-bottom: 0; padding-top: 1.1rem; }
  .cenik-pozn strong { display: block; margin-bottom: .3rem; font: 400 1.9rem/1.1 var(--pismo-titulek); color: var(--text); }
}

/* Ochrana údajů: na širokém displeji nadpisy oddílů vlevo, text vpravo. */
@media (min-width: 64rem) {
  .dokument .plocha {
    max-width: calc(var(--sirka) + 2 * var(--okraj));
    display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, 46rem); column-gap: clamp(3rem, 6vw, 6rem);
  }
  .dokument .plocha > * { grid-column: 2; }
  .dokument .plocha > :is(.typ, h1, .podtitulek) { grid-column: 1 / -1; }
  .dokument .plocha > h2 { grid-column: 1; }
  .dokument h2 + p { margin-top: clamp(2.6rem, 5vw, 3.4rem); padding-top: 1.4rem; border-top: 1px solid var(--linka); }
}

/* ===================== DOTAŽENÍ (7. 10. 2026) =====================
   Z designérského posudku po redesignu. Všechno jen CSS; kde prohlížeč
   něco neumí, zůstane klidná podoba bez efektu. */

/* PŘECHODY MEZI STRÁNKAMI bez skriptu: titulka, kniha, ochrana údajů
   i 404 se prolnou místo bliknutí a znak v liště zůstane stát. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .znacka img { view-transition-name: znak; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}

/* RYTÁ LINKA pod kroky postupu: vlásek pod krokem se při čtení „vyryje"
   zleva doprava, měď přejde do linky. Bez časové osy je linka hned celá. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .krok { border-bottom-color: transparent; }
    .krok::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
      background: linear-gradient(90deg, var(--akcent), var(--linka) 45%);
      transform-origin: 0 50%;
      animation: ryti linear both; animation-timeline: view();
      animation-range: entry 30% cover 50%;
    }
  }
}
@keyframes ryti { from { scale: 0 1; } to { scale: 1 1; } }

/* MĚDĚNÝ OBTAH KARET pod myší: po hraně oběhne světlo. Platí pro všechny
   karty s odkazem stejně (žádný tarif se nezvýrazňuje). `@property` je
   nutná, aby šel úhel přechodu animovat; kde chybí, obtah se jen
   rozsvítí bez oběhu. */
@property --obeh { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.karta:has(.odkaz)::after {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
  padding: 1px; border-radius: inherit;
  background: conic-gradient(from var(--obeh),
    transparent 0 62%, color-mix(in srgb, var(--akcent) 85%, transparent) 82%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity .45s var(--dojezd), --obeh 1.4s var(--dojezd);
}
.karta:has(.odkaz):hover::after,
.karta:has(.odkaz:focus-visible)::after { opacity: 1; --obeh: 300deg; }

/* JMÉNA DESIGNŮ NA KOULI: pod myší se u vysunuté dlaždice objeví jméno
   (to, co dřív bylo jen v bublině `title`). Popisek má stejný tvar
   i stejnou proměnu jako obrázek, takže se vysune s ním.
   ⚠️ O 8 px BLÍŽ než obrázek, ne o 1 px: při 1 px ho Chromium u vysunuté
   dlaždice řadilo ZA obrázek (ověřeno snímkem), popisek byl neviditelný. */
@supports (animation-timeline: scroll()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc > a.dlazdice::after {
      content: attr(title) / ""; position: absolute; inset: 0; pointer-events: none;
      display: flex; align-items: flex-end; padding: .5rem .6rem;
      border-radius: 6px;
      background: linear-gradient(transparent 52%, rgb(12 10 9 / .88));
      color: #f3ede7; font: 500 .74rem/1.25 var(--pismo); letter-spacing: 0;
      backface-visibility: hidden;
      transform: rotateX(calc(var(--h, 0) * -1 * var(--lat)))
                 translate3d(0, var(--k, 0px), calc(var(--ven, 0px) + 8px))
                 rotateX(calc(var(--h, 0) * 4deg)) scale(var(--zvetseni, 1));
      opacity: 0;
      transition: transform .35s ease, opacity .35s ease;
    }
    .kulova:not(:has(.dlazdice:focus-visible)) .koule-toc > a.dlazdice:hover::after { opacity: 1; }
  }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :root {

    color-scheme: light;
    --pozadi: #fff; --pozadi-karta: #fff; --povrch-hrana: transparent;
    --text: #16110d; --text-tlumeny: #4a3f37;
    --linka: #c9bfb6; --linka-silna: #a89c92;
    --akcent: #8a3312; --jadro: #0a5060;
    --deska: none; --med-tahy: none;

    --sekce: 1.6rem;
  }
  .uvod h1, .kniha-uvod h1, .chyba h1 { font-size: 30pt; }
  .sekce-titulek, .kontakt h2 { font-size: 24pt; }
  .kontakt .plocha { padding-block: 1.5rem; }
  .plocha + .mrizka, .plocha + .ukazky { margin-top: 1rem; }
  .doveryhodnost strong { font-size: 16pt; }
  .tarif-cena strong { font-size: 20pt; }
  .tarif-cena .tarif-od { font-size: 12pt; }
  body { background: #fff; color: var(--text); font-size: 10.5pt; }
  h1, .sekce-titulek, .kontakt h2 {
    background: none !important;
    -webkit-text-fill-color: currentColor; color: var(--text);
  }
  header, .preskocit, .tlacitka, .tarif .tlacitko, .kontakt .tlacitko,
  .ukazatel, .liquid-ether, .remesla, .vyzva-pruh, footer::after,
  .uvod::before, .uvod .plocha::before, .znak-scena::after {
    display: none !important;
  }
  .uvod { min-height: 0 !important; padding-top: 0; }
  .karta, .kontakt .plocha { background: #fff !important; box-shadow: none !important; border: 1px solid var(--linka) !important; }
  .postup-hlava, .faq .sekce-titulek { position: static !important; }
  .znak-velky { filter: none; }
  .nahled { filter: none !important; }

  .karta, .krok, .ukazky img, .kontakt .plocha, .cenik-pozn, .kapitoly li,
  .sekce-titulek, .sekce-uvod, .otazka, .kontakt h2,
  .uvod .stav, .uvod h1, .uvod .podtitulek, .uvod .doveryhodnost, .znak-velky {
    opacity: 1 !important; translate: none !important; scale: none !important;
  }

  .otazka::details-content { block-size: auto !important; content-visibility: visible !important; overflow: visible !important; }
  .otazka summary::before, .otazka summary::after { display: none; }
  .otazka summary { break-after: avoid; }
  .otazka { display: block; }
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--pismo-stroj); font-size: .8em; word-break: break-all;
  }
  .odkaz::after { clip-path: none; background: none; width: auto; height: auto; }
  .odkaz { display: inline; }
  .karta, .krok, .otazka, .kapitoly li, .ukazky { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .kniha-obalka, .ukazky img { box-shadow: none !important; }
  .kniha-objekt, .ukazka { transform: none !important; rotate: none !important; translate: none !important; }
  .kniha-objekt::before, .chyba-rozeta { display: none !important; }
  .kniha-uvod { padding-top: 0; }

  body.stranka-chyba { display: block; min-height: 0; }
  /* Patička se na papíře netiskne: kontakt i údaje podnikatele jsou celé
     v panelu nad ní a odkazy na sekce na papíře nic neznamenají. Dokud se
     tiskla, vycházela (nebo aspoň řádek s rokem) sama na poslední straně —
     `break-before: avoid` Chromium mezi <main> a <footer> nedodrží. */
  body > footer { display: none !important; }
  /* Panel kontaktu se nedělí: jinak na poslední straně zbyl osamělý řádek
     s údaji podnikatele. */
  .kontakt .plocha { break-inside: avoid; }

  /* Pás projektů se na papíře složí do mřížky, jinak by se vytiskly dvě
     karty a zbytek by zůstal za okrajem. Koule se nedá otočit — tiskne
     se rovná mřížka dlaždic (výchozí podoba). */
  .pas {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    overflow: visible; padding: 1rem 1.5rem 0; margin: 0;
    animation: none !important; opacity: 1 !important; translate: none !important;
  }
  .pas .nahled { scale: none !important; translate: none !important; }
  /* Dlaždice designů by na papíře byly obrázky bez jmen i adres — tiskne
     se jen hlavička s odkazem na celou sbírku. */
  .galerie.kulova, .pohyb, .kontakt-rozeta { display: none !important; }
  .uvod .plocha::after { content: none !important; }
}

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { animation: none !important; transition: none !important; }

  @supports (animation-timeline: scroll()) {
    header .plocha::after {
      animation: nabidka-sipka linear both !important;
      animation-timeline: --nabidka !important;
    }
  }
  .karta:has(.odkaz):hover, .karta:has(.tlacitko):hover,
  .karta:has(.odkaz:focus-visible), .karta:has(.tlacitko:focus-visible),
  .tlacitko:hover { translate: none; }
  .karta:has(.odkaz):hover .nahled, .karta:focus-within .nahled { scale: none; }
  .odkaz:hover::after { translate: none; }
}

/* ===================== KOLO 19 (8. 10. 2026) =====================
   Telefon a tablet podle designérského posudku: dotykové cíle 44 px,
   kontakt bez osamělého „· Outlook", tarif na tabletu ve dvou sloupcích. */
@media (pointer: coarse) {
  .odkaz { min-height: 2.75rem; }
  /* Plocha pro prst větší než kresba: přepínač motivu a Zastavit pohyb
     zůstávají vzhledem stejné. */
  .tema label, .pohyb label { position: relative; }
  /* Nahoru víc, dolů jen kousek a do stran nic: pod lištou je pás navigace
     a oba labely stojí 1,6 px od sebe (tester, kolo 19). */
  .tema label::after { content: ""; position: absolute; inset: -12px 0 -3px; }
  .pohyb label::after { content: ""; position: absolute; inset: -8px 0; }
}
.kontakt .kontakt-alt { text-wrap: balance; }
.kontakt-sluzby { white-space: nowrap; }
.kontakt .kontakt-alt a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media screen and (min-width: 40rem) and (max-width: 51.99rem) {
  .cenik .tarif { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
  .cenik .tarif > * { grid-column: 1; }
  .cenik .tarif .seznam { grid-column: 2; grid-row: 1 / span 4; }
  .cenik .tarif .tlacitko { grid-column: 1 / -1; }
}

/* Postup a Ceník dědí motiv stránky: v tmavém režimu bez světlého archu. */
/* Konec titulky: užší štítek mezi širokými otázkami a širokým kontaktem,
   ať finále nečte „box, box" (designér, kolo 23). */
.specifikace .specifikace-stitek { max-width: 50rem; margin-inline: auto; }
/* 360 px: „Jeden pracovní den…" se lámalo na dva řádky (designér, kolo 25). */
@media (max-width: 23.4rem) { .uvod .doveryhodnost { font-size: .8rem; } }


/* Panely přebírají původní hnědý rytý štítek včetně jeho jemné textury. */
@media screen {
  :is(.karta, .kontakt .plocha, .kniha-pozn) {
    position: relative;
    isolation: isolate;
    border-color: var(--linka-silna);
    background: linear-gradient(180deg, var(--povrch-hrana), transparent 40%), color-mix(in srgb, var(--pozadi-karta) 45%, transparent);
  }
  :is(.karta, .kontakt .plocha, .kniha-pozn)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--med-tahy) 0 0 / 44rem 44rem;
    opacity: .16;
  }
}

/* Aurora — locally hosted shader, soft upper edge of the introduction. */
.aurora-top { position: absolute; inset: 0 0 auto; height: clamp(12rem, 32vw, 25rem); pointer-events: none; opacity: .62; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000e 20%, #000a 42%, #0005 62%, #0001 80%, transparent 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000e 20%, #000a 42%, #0005 62%, #0001 80%, transparent 92%, transparent 100%); mix-blend-mode: screen; }
.aurora-top canvas { display: block; width: 100%; height: 100%; }
:root:has(#tema-svetly:checked) .aurora-top { mix-blend-mode: multiply; opacity: .12; }
@media print { .aurora-top { display: none; } }


/* Aurora je vykreslená samostatnou lokální vrstvou nahoře stránky. */
.uvod::before { background: none; }

/* Reserve space for the shield beyond the plaque, including on phones. */
.znak-scena { margin-inline-end: calc(var(--plaketa) * .55); }
@media (max-width: 47.99rem) { .znak-scena { margin-block: calc(var(--plaketa) * .55); } }
@media (max-width: 47.99rem) {
  .uvod .stav { white-space: normal; line-height: 1.6; max-width: 100%; }
}
@media (max-width: 47.99rem) { .uvod .plocha { column-gap: clamp(1.3rem, 6vw, 2rem); } }

/* Ukázka řemesla: měděná sazba, ryté značky a odkrývání přes část okna.
   Entry u nízkého nadpisu trvá jen pár pixelů; cover dává efektu prostor. */
@keyframes vynoreni { from { opacity: 0; } to { opacity: 1; } }
@keyframes vynoreni-male { from { opacity: 0; } to { opacity: 1; } }
@keyframes odkryti-titulku {
  from { opacity: .08; clip-path: inset(-.2em 100% -.2em 0); }
  to { opacity: 1; clip-path: inset(-.2em -1em -.2em 0); }
}
@keyframes tisk-karty {
  from { opacity: .08; clip-path: inset(0 0 100% 0 round var(--radius)); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round var(--radius)); }
}
@keyframes expozice {
  from { clip-path: inset(12% 50% 12% 50%); filter: grayscale(1); scale: 1.08; }
  to { clip-path: inset(0); filter: grayscale(0); scale: 1; }
}
@keyframes medeny-prujezd {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@media screen {
  :is(#sluzby, #projekty, #postup, #cenik, #faq) { position: relative; }
  :is(#sluzby, #projekty, #postup, #cenik, #faq) > .plocha:first-child::before {
    display: block; margin-bottom: 1.3rem; color: var(--akcent);
    font: 500 .68rem var(--pismo-stroj); letter-spacing: .28em;
  }
  #sluzby > .plocha:first-child::before { content: "01 /" / ""; }
  #projekty > .plocha:first-child::before { content: "02 /" / ""; }
  #postup > .plocha:first-child::before { content: "03 /" / ""; }
  #cenik > .plocha:first-child::before { content: "04 /" / ""; }
  #faq > .plocha:first-child::before { content: "05 /" / ""; }
  /* Vlastní řádek značky v desktopové dvousloupcové hlavičce. */
  :is(#sluzby, #projekty, #cenik, #faq) > .plocha:first-child::before { grid-column: 1 / -1; }
  .sekce-titulek::after {
    content: ""; display: block; height: 2px; width: min(7rem, 30%);
    margin-top: .3em; transform-origin: left;
    background: linear-gradient(90deg, var(--akcent), transparent);
  }
  .mrizka > .karta { border-top-color: color-mix(in srgb, var(--akcent) 45%, var(--linka)); }
  .pripad .nahled-ram { overflow: hidden; }
  .tarif-cena strong {
    background: linear-gradient(100deg, var(--text) 25%, var(--akcent) 45%, var(--text) 65%);
    background-size: 250% 100%; background-position: 0 0;
    background-clip: text; -webkit-background-clip: text; color: transparent;
  }
}
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .sekce-titulek, .galerie-hlava h3 {
      animation: odkryti-titulku linear both; animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    .sekce-titulek::after {
      animation: ryti linear both; animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .sekce-uvod, .galerie-hlava p, .galerie-hlava > .odkaz,
    .specifikace-stitek, .otazka, .vyzva-pruh {
      animation: vynoreni-male linear both; animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    .mrizka > .karta, .krok {
      animation: tisk-karty linear both; animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
    .mrizka > .karta:nth-child(3n+2) { animation-range: entry 3% cover 36%; }
    .mrizka > .karta:nth-child(3n) { animation-range: entry 6% cover 40%; }
    .pripad .nahled {
      animation: expozice linear both; animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .tarif-cena strong {
      animation: medeny-prujezd linear both; animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    .krok::after { animation-range: entry 0% cover 40%; }
    .pas { animation-range: entry 0% cover 25%; }
    :is(.karta, .otazka, .pas, .vyzva-pruh, .specifikace-stitek):focus-within {
      opacity: 1 !important; clip-path: none !important;
    }
  }
}
/* Volba pohybu i preference systému okamžitě odkryjí celý obsah. */
:root:has(#pohyb:checked) main *,
:root:has(#pohyb:checked) main *::before,
:root:has(#pohyb:checked) main *::after { animation: none !important; }


/* Jediné skutečné logo i WebGL štít cestují z uvítání do své pozice.
   Po doběhnutí se vrací do běžného toku stránky, nejde o fixní kopii. */
.znak-scena { width: var(--plaketa); height: var(--plaketa); }
.znak-let { display: block; position: relative; z-index: 0; width: 100%; height: 100%; }
.znak-let .znak-velky { width: 100%; height: 100%; }
.znak-let .liquid-ether { width: 215%; }
.vitani { display: none; }
@keyframes vitani-opona {
  0%, 55% { opacity: 1; }
  92%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes vitani-napis {
  0%, 10% { opacity: 0; filter: blur(10px); }
  30%, 52% { opacity: 1; filter: blur(0); }
  72%, 100% { opacity: 0; filter: blur(5px); visibility: hidden; }
}
@keyframes vitani-stit { 0%, 8% { opacity: 0; } 18%, 100% { opacity: var(--stit-kryti, 1); } }
@media screen and (prefers-reduced-motion: no-preference) {
    .vitani-nacita .vitani, .vitani-bezi .vitani { display: block; pointer-events: none; }
    .vitani-pozadi {
      position: fixed; inset: 0; z-index: 1000;
      background: radial-gradient(ellipse at 50% 39%, color-mix(in srgb, var(--akcent) 10%, var(--pozadi)), var(--pozadi) 68%);
      animation: vitani-opona 2.833333s ease both paused;
    }
    .vitani-text {
      position: fixed; z-index: 1002; inset: 70svh 0 auto; margin: 0;
      width: auto; max-width: none; padding-inline: 0;
      text-align: center; color: var(--text); font: 400 clamp(2.4rem, 6vw, 4.8rem) var(--pismo-titulek);

    }
    .vitani-text .vitani-popisek { animation: vitani-napis 2.833333s ease both paused; display: block; margin-bottom: .9rem; color: var(--akcent); font: 500 .75rem var(--pismo-stroj); letter-spacing: .3em; text-transform: uppercase; }
    .znak-scena { anchor-name: --uvodni-logo; }
    .znak-let { transform-origin: center; }
    .znak-let.vitani-probiha { z-index: 1001; }
    .vitani-bezi .znak-let .liquid-ether { animation: vitani-stit 2.833333s ease both paused; }
    :root:has(:target) .vitani, :root:has(a:focus-visible) .vitani { display: none; }
    :root:has(:target) .znak-let, :root:has(:target) .znak-let .liquid-ether,
    :root:has(a:focus-visible) .znak-let, :root:has(a:focus-visible) .znak-let .liquid-ether { animation: none; }
    .vitani-bezi .vitani-pozadi, .vitani-bezi .vitani-popisek,
    .vitani-bezi .znak-let .liquid-ether { animation-play-state: running; }
}

/* Pastel: jednorázový náběh trvá sekundu i po zastavení scrollování. */
@media screen and (prefers-reduced-motion: no-preference) {
  .plynule-odhaleni .odhaleni {
    animation: none !important; opacity: 0; clip-path: none;
    transform: translateY(22px);
    transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
  }
  .plynule-odhaleni .galerie-hlava :is(h3, p, .odkaz),
  .plynule-odhaleni .pripad .nahled { animation: none !important; }
  .plynule-odhaleni .odhaleni.odhaleno,
  .plynule-odhaleni .odhaleni:focus-within { opacity: 1; transform: none; }
  .plynule-odhaleni .mrizka > .odhaleni:nth-child(3n+2) { transition-delay: .12s; }
  .plynule-odhaleni .mrizka > .odhaleni:nth-child(3n) { transition-delay: .24s; }
  /* Application windows lift into place; the screenshot stays whole throughout. */
  .plynule-odhaleni .pripad.odhaleni {
    opacity: 1; transform: none;
    transition: border-color .5s var(--dojezd), translate .6s var(--dojezd), box-shadow .6s var(--dojezd);
  }
  .plynule-odhaleni .pripad.odhaleni .nahled-ram {
    opacity: 0;
    transform: perspective(1100px) translateY(32px) rotateX(9deg) rotateY(-7deg) scale(.94);
    transform-origin: 50% 100%;
    transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .65s ease;
  }
  .plynule-odhaleni .pripad.odhaleni .nahled {
    clip-path: none; transform: scale(1.08);
    transition: transform 1.5s cubic-bezier(.16,1,.3,1), filter .6s ease, scale .9s var(--dojezd);
  }
  .plynule-odhaleni .pripad .nahled-ram::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / .16) 47%, rgb(255 255 255 / .04) 58%, transparent 75%);
    opacity: 0; transform: translateX(-110%);
  }
  .plynule-odhaleni .pripad.odhaleno .nahled-ram { opacity: 1; transform: none; }
  .plynule-odhaleni .pripad.odhaleno .nahled { transform: none; }
  .plynule-odhaleni .pripad.odhaleno .nahled-ram::after {
    animation: aplikace-odlesk 1.3s cubic-bezier(.2,.7,.2,1) .12s both;
  }
  .plynule-odhaleni .pripad.odhaleni .pripad-text > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity .65s ease, transform .8s cubic-bezier(.16,1,.3,1);
    transition-delay: .12s;
  }
  .plynule-odhaleni .pripad .pripad-text > :nth-child(2) { transition-delay: .20s; }
  .plynule-odhaleni .pripad .pripad-text > :nth-child(3) { transition-delay: .28s; }
  .plynule-odhaleni .pripad .pripad-text > :nth-child(4) { transition-delay: .36s; }
  .plynule-odhaleni .pripad .pripad-text > :nth-child(5) { transition-delay: .44s; }
  .plynule-odhaleni .pripad.odhaleno .pripad-text > * { opacity: 1; transform: none; }
  .plynule-odhaleni .pripad:focus-within :is(.nahled-ram, .nahled, .pripad-text > *) {
    opacity: 1; transform: none; transition: none;
  }
  .plynule-odhaleni .pripad:focus-within .nahled-ram::after { animation: none; }
}
@keyframes aplikace-odlesk {
  0% { opacity: 0; transform: translateX(-110%); }
  20% { opacity: 1; }
  75% { opacity: .7; }
  100% { opacity: 0; transform: translateX(110%); }
}
:root:has(#pohyb:checked) .odhaleni {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
:root:has(#pohyb:checked) .pripad :is(.nahled-ram, .nahled, .pripad-text > *) {
  opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
}
:root:has(#pohyb:checked) .pripad .nahled-ram::after { animation: none !important; }

.vitani-preskoceno .vitani { display: none; }
.vitani-preskoceno .znak-let .liquid-ether { animation: none; }

.vitani-nazev { opacity: 0; display: inline-block; white-space: nowrap; line-height: 1; }
.vitani-bezi:not(.vitani-hotovo):not(.vitani-preskoceno) .znacka > span { opacity: 0; }
.vitani-hotovo .vitani-text { display: none; }

.uvod h1.vitani-titulek { position: relative; z-index: 1001; animation: none; transform-origin: center; }

.vitani-bezi:not(.vitani-hotovo) .uvod { overflow: visible; }
.uvod h1.vitani-titulek { color: var(--text); -webkit-text-fill-color: currentColor; background: none; }

.uvod h1.vitani-pripraveno { animation: none; translate: none; color: var(--text); -webkit-text-fill-color: currentColor; background: none; }
.uvod-cast { display: inline-block; transform-origin: left top; }

/* Loading belongs to the curtain, never to the logo's flight timeline. */
.vitani-nacitani { display: none; }
@keyframes vitani-ceka { to { transform: rotate(360deg); } }
@media screen and (prefers-reduced-motion: no-preference) {
  .vitani-nacita .vitani-nacitani {
    display: grid; justify-items: center; gap: 1rem;
    position: fixed; inset: 44svh 0 auto; z-index: 1002;
    color: var(--akcent); font: 500 .75rem var(--pismo-stroj); letter-spacing: .12em;
  }
  .vitani-nacitani::before {
    content: ''; width: 1.75rem; height: 1.75rem;
    border: 2px solid color-mix(in srgb, var(--akcent) 20%, transparent);
    border-top-color: var(--akcent); border-radius: 50%;
    animation: vitani-ceka .9s linear infinite;
  }
  .vitani-nacita .vitani-text { visibility: hidden; }
}
.vitani-hotovo .vitani { display: none; }