/* Čajovna Lístek (ukázka) – tenmoku miska shora a nálev, který určuje barvu celé stránky. Kaki pás pro program, seladon pro otevírací dobu, nepolévaná hlína patky na konci. Písma uložená u webu (Young Serif, Alegreya Sans – SIL OFL 1.1). */
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/young-serif-400.woff2) format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-400.woff2) format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/alegreya-sans-700.woff2) format('woff2')}
@font-face{font-family:'Alegreya Sans';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/alegreya-sans-400i.woff2) format('woff2')}
.vz-slama{--v:#ddc98a}
.vz-trava{--v:#b9b35e}
.vz-med{--v:#c08a35}
.vz-med2{--v:#9a4a1f}
.vz-rubin{--v:#a3182d}
.vz-kura{--v:#4e2412}
/* záložní písma zúžená/rozšířená na šířku skutečných, aby text při načtení písem neposkočil (CLS) */
@font-face{font-family:'Young Serif Fallback';src:local('Georgia'),local('Noto Serif');size-adjust:112.5%}
@font-face{font-family:'Alegreya Sans Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:84.4%}

:root{
  --glaze:#1c1410;--glaze-2:#271b14;--noc:#120b07;
  --kaki:#9a4625;--kaki-d:#7a3519;
  --celadon:#a9c4a8;--celadon-h:#c2d8c0;--celadon-d:#8fae8e;
  --shino:#f1e6d6;--clay:#cfae8c;--clay-line:rgba(207,174,140,.28);
  --foot:#c49f7b;
  --caj:#9a4a1f;--plocha:#9a4a1f;--ink:#fff6e8;--proti:#1c1410;
  --serif:'Young Serif','Young Serif Fallback',Georgia,serif;--sans:'Alegreya Sans','Alegreya Sans Fallback',system-ui,sans-serif;
  --gut:clamp(1.25rem,4.4vw,4rem);
  --fur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .42 0 0 0 0 .24 0 0 0 1.2 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--clay) var(--glaze)}
body{margin:0;overflow-x:clip;background:var(--glaze);color:var(--shino);font:400 1.125rem/1.5 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--plocha);color:var(--ink)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--clay-line);text-underline-offset:.2em}
[hidden]{display:none!important}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.04;text-wrap:balance}
p{margin:0}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--shino);color:var(--glaze);padding:.6rem 1rem}
.skip:focus{left:1rem}

.top{position:absolute;z-index:6;inset:0 0 auto;display:flex;align-items:center;gap:1rem;padding:.8rem var(--gut);color:var(--shino)}
.brand{display:flex;align-items:baseline;gap:.7rem;margin-right:auto;padding-block:.5rem;text-decoration:none}
.brand-name{font:400 1.55rem/1.05 var(--serif)}
.brand-sub{font-size:1.0625rem}
.call{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1.1rem;border:0;border-radius:999px;background:transparent;color:inherit;font:700 1.0625rem/1 var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--clay);transition:box-shadow .2s}
.call:hover{box-shadow:inset 0 0 0 1.5px var(--celadon)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.7rem 1.4rem;border:0;border-radius:999px;background:var(--celadon);color:var(--glaze);font:700 1.125rem/1.15 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .2s,box-shadow .2s,color .2s}
.btn:hover{background:var(--celadon-h)}
.btn-line{background:transparent;color:var(--shino);box-shadow:inset 0 0 0 1.5px var(--clay)}
.btn-line:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--celadon)}
.btn-tmave{background:var(--glaze);color:var(--shino)}
.btn-tmave:hover{background:#3a2a20}
.cta{display:flex;flex-wrap:wrap;gap:.6rem}
.as-link{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer}
.as-link:hover{text-decoration-thickness:2px}

/* úvod: fotka misky přes celou obrazovku */
.podium{position:relative;background:var(--plocha);color:var(--ink)}
.ho-obraz{position:relative;margin:0;height:100vh;height:100svh;min-height:36rem;overflow:hidden;background:#140c08}
.ho-obraz picture,.ho-obraz img{display:block;width:100%;height:100%}
.ho-obraz img{object-fit:cover}
.ho-obraz::after{content:"";position:absolute;inset:0;background:linear-gradient(rgb(18 11 7 / .72),rgb(18 11 7 / .08) 30%,rgb(18 11 7 / .04) 50%,rgb(18 11 7 / .86) 80%)}
.ho-text{position:absolute;inset:0 0 auto;z-index:4;height:100vh;height:100svh;min-height:36rem;display:flex;flex-direction:column;padding:4.7rem var(--gut) calc(1.2rem + env(safe-area-inset-bottom));color:var(--shino)}
.ho-text h1{font-size:clamp(2.9rem,12.8vw,4.6rem);letter-spacing:-.02em;line-height:1}
.status{margin:auto 0 .7rem;font:400 1.35rem/1.25 var(--serif)}
.lead{margin-top:.9rem;font-size:1.125rem;line-height:1.4}
.ho-text .btn{min-height:48px;padding:.6rem 1.05rem;font-size:1.0625rem}
.ho-tma,.zaliti,.proud,.bx-para,.v-toc,.v-cista,.dech{display:none}

/* miska shora: statická hotová kompozice (bez JS a při omezeném pohybu) */
.bx{position:relative;width:min(84vw,34rem);aspect-ratio:1;margin:clamp(2.4rem,7vw,4rem) auto 1.4rem}
.bx-stin{position:absolute;inset:-5%;border-radius:50%;background:radial-gradient(closest-side,rgb(10 5 2 / .5) 80%,rgb(10 5 2 / 0));transform:translate(1.5%,2.8%)}
.bx-miska{position:absolute;inset:0;width:100%;height:100%}
.bx-voda{position:absolute;inset:7%;border-radius:50%;overflow:hidden}
.bx-voda>span{position:absolute;inset:0;border-radius:50%}
.v-plna{background:var(--caj);background:radial-gradient(closest-side,color-mix(in oklab,var(--caj) 62%,#120601) 0,color-mix(in oklab,var(--caj) 82%,#120601) 52%,var(--caj) 84%,color-mix(in oklab,var(--caj) 78%,#ffc868) 98%)}
.v-kruhy{background:url(kruhy.webp) center/100% 100% no-repeat}
.v-lesk{box-shadow:inset 0 0 0 1px rgb(255 240 215 / .2),inset 0 0 1.6rem rgb(30 12 4 / .3)}
.v-lesk::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 288deg,rgb(255 250 240 / 0) 0,rgb(255 250 240 / .34) 4.5%,rgb(255 250 240 / 0) 11%,rgb(255 250 240 / 0) 47%,rgb(255 250 240 / .14) 52%,rgb(255 250 240 / 0) 58%);-webkit-mask:radial-gradient(closest-side,rgb(0 0 0 / 0) 88%,#000 91.5%,#000 93.5%,rgb(0 0 0 / 0) 97%);mask:radial-gradient(closest-side,rgb(0 0 0 / 0) 88%,#000 91.5%,#000 93.5%,rgb(0 0 0 / 0) 97%)}
.v-vlnka{box-shadow:inset 0 0 0 1.5px rgb(255 250 240 / .5);opacity:0}
.v-dopad{display:none}
.bx-listy{position:absolute;inset:0;overflow:hidden;border-radius:50%;pointer-events:none}
.bx-listy b{position:absolute;inset:0}
.listy-a{transform:scale(1.6) rotate(40deg)}
.listy-b{display:none}
.bx-listy i{position:absolute;width:7.4%;aspect-ratio:1;background:url(list-1.webp) center/contain no-repeat;opacity:.9}
.bx-listy i:nth-child(2n){background-image:url(list-2.webp)}
.bx-listy i:nth-child(3n){background-image:url(list-3.webp)}
.listy-a i:nth-child(1){left:54%;top:30%;transform:rotate(32deg)}
.listy-a i:nth-child(2){left:66%;top:50%;transform:rotate(140deg)}
.listy-a i:nth-child(3){left:47%;top:66%;transform:rotate(-104deg) scale(.86)}
.listy-a i:nth-child(4){left:26%;top:54%;transform:rotate(76deg)}
.listy-a i:nth-child(5){left:33%;top:31%;transform:rotate(-34deg) scale(.9)}
.listy-b i{width:5.6%}
.listy-b i:nth-child(1){left:43%;top:39%;transform:rotate(204deg)}
.listy-b i:nth-child(2){left:53%;top:43%;transform:rotate(-62deg)}
.listy-b i:nth-child(3){left:49%;top:54%;transform:rotate(18deg)}
.listy-b i:nth-child(4){left:39%;top:50%;transform:rotate(104deg)}
.kroky{list-style:none;margin:0;padding:0 var(--gut) clamp(2.6rem,7vw,4rem);display:grid;gap:1.2rem;justify-items:center;text-align:center}
.krok{font:400 clamp(1.9rem,4.4vw,3.2rem)/1.08 var(--serif)}
.stopky{display:block;font:400 clamp(4rem,9vw,7rem)/1 var(--serif);white-space:nowrap}
.stopky>span{display:inline-block;width:.62em;text-align:center}
.stopky>.s-dv{width:.32em}
.v-misce{display:grid;justify-items:center;gap:.1rem;padding:0 var(--gut) 3rem;text-align:center}
.bc-name{font:400 clamp(1.5rem,2.6vw,2.4rem)/1.08 var(--serif)}
.bc-meta{font-size:1.125rem}

/* čajový lístek: barva stránky je barva nálevu */
.menu{position:relative;z-index:2;padding:0 var(--gut) clamp(2.8rem,7vw,4.6rem);background:var(--plocha);color:var(--ink)}
.menu :focus-visible{outline-color:var(--ink)}
.pour{display:none}
.menu-head{padding-top:clamp(2.6rem,6vw,4.6rem)}
.menu-head h2{font-size:clamp(3rem,7.3vw,9rem);line-height:.98;letter-spacing:-.018em}
.menu-lead{margin-top:1rem;max-width:33rem;font-size:clamp(1.18rem,1.55vw,1.3125rem);line-height:1.42}
.vyber{display:grid;gap:.9rem;margin-top:clamp(1.8rem,3.4vw,2.8rem)}
.vzornik{display:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:.3rem}
.js .vzornik{display:grid}
.vzorek{display:grid;justify-items:center;align-content:start;gap:.5rem;min-height:48px;padding:.3rem 0;border:0;border-radius:1rem;background:none;color:inherit;font:inherit;cursor:pointer}
.v-kruh{width:min(100%,clamp(2.9rem,6vw,5.2rem));aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--v) 82%,#1a0902),var(--v) 74%,#24140c 76%,#3b2213 96%,#c6915f 98%);box-shadow:0 .4rem .9rem -.35rem rgb(0 0 0 / .6);transition:transform .2s}
.vzorek:hover .v-kruh{transform:scale(1.07)}
.vzorek[aria-pressed="true"] .v-kruh{outline:3px solid var(--ink);outline-offset:3px}
.v-nazev{font-size:1.0625rem;line-height:1.1;text-align:center}
.vzorek[aria-pressed="true"] .v-nazev{font-weight:700}
.vzorek:disabled{opacity:.32;cursor:not-allowed}
.vzorek:disabled .v-kruh{transform:none}
.night{margin:0}
.chip-night{display:none;align-items:center;gap:.6rem;min-height:46px;padding:.4rem 1.05rem .4rem .7rem;border:0;border-radius:999px;background:none;color:inherit;font:700 1.0625rem/1.1 var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--ink)}
.js .chip-night{display:inline-flex}
.chip-night::before{content:"";width:1.1rem;height:1.1rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip-night[aria-pressed="true"]{background:var(--ink);color:var(--plocha)}
.chip-night[aria-pressed="true"]::before{background:var(--plocha);box-shadow:none}
.odstin{margin-top:clamp(2rem,4vw,3rem)}
.odstin h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .9rem;font-size:clamp(2.6rem,5.8vw,5.4rem);line-height:1}
.o-pocet{font:400 1.25rem/1 var(--sans)}
.o-lead{margin-top:.5rem;max-width:32rem;font-size:1.1875rem;line-height:1.4}
.teas{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.15rem}
.tea{display:grid;grid-template-columns:1fr auto;gap:.15rem 1.2rem;width:calc(100% + 2rem);margin-inline:-1rem;padding:.8rem 1rem .9rem;border:0;border-radius:1.1rem;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s}
.tea:hover{background:rgb(0 0 0 / .08);background:color-mix(in oklab,var(--plocha) 88%,var(--proti))}
.tea[aria-pressed="true"]{background:rgb(0 0 0 / .16);background:color-mix(in oklab,var(--plocha) 72%,var(--proti))}
.t-name{display:flex;align-items:baseline;gap:.6rem;font:400 clamp(1.55rem,2.5vw,2.2rem)/1.1 var(--serif)}
.drop{flex:none;width:.62em;height:.62em;border-radius:50%;background:var(--c,#9a4a1f);box-shadow:0 0 0 2px var(--ink);transition:transform .2s;transform:translateY(-.04em)}
.tea:hover .drop{transform:translateY(-.04em) scale(1.25)}
.t-price{align-self:baseline;font:400 clamp(1.3rem,2vw,1.7rem)/1.1 var(--serif);white-space:nowrap;font-variant-numeric:lining-nums}
.t-desc{grid-column:1/-1;font-size:1.125rem;line-height:1.4}
.t-meta{grid-column:1/-1;font-size:1.0625rem;line-height:1.35;font-weight:700}
.menu-note{margin-top:1rem;max-width:30rem;color:var(--clay);font-size:1.125rem;line-height:1.4}

/* vedle čaje */
.vedle{display:grid;gap:clamp(1.8rem,4vw,3rem);padding:clamp(3.2rem,8vw,6.4rem) var(--gut);background:var(--fur),var(--glaze)}
.vedle h2{font-size:clamp(2.8rem,7.3vw,7rem);line-height:.98;letter-spacing:-.015em}
.vedle-sloupce{display:grid;gap:2.2rem}
.vedle h3{margin-bottom:.5rem;font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--clay)}
.vedle ul{list-style:none;margin:0;padding:0}
.vedle li{display:grid;grid-template-columns:1fr auto;gap:0 1rem;padding:.6rem 0}
.o-name{font:400 clamp(1.3rem,1.9vw,1.6rem)/1.15 var(--serif)}
.o-price{align-self:baseline;font:400 clamp(1.3rem,1.9vw,1.6rem)/1.15 var(--serif);white-space:nowrap}
.o-desc{grid-column:1/-1;margin-top:.15rem;color:var(--clay);font-size:1.125rem;line-height:1.4}
.o-desc i{font-style:normal;white-space:nowrap}

/* program na kaki glazuře */
.program{position:relative;padding:clamp(3.2rem,8vw,6rem) var(--gut) clamp(2.6rem,6vw,4.6rem);background:var(--fur),var(--plocha);color:var(--ink)}
.program :focus-visible{outline-color:var(--ink)}
.program::before{content:"";--kapky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V14c18 0 22-9 34-9s12 13 26 13 14-10 30-10 18 15 36 15 10-12 26-12 20 9 34 9 16-14 32-14 14 11 30 11 12-8 26-8 22 12 40 12 14-9 28-9 18 6 30 6 10-5 28-5v19z'/%3E%3C/svg%3E");position:absolute;left:0;right:0;top:-22px;height:24px;background:var(--plocha);-webkit-mask:var(--kapky) center bottom/100% 100% no-repeat;mask:var(--kapky) center bottom/100% 100% no-repeat}
.program-hlava{display:grid;gap:1.6rem}
.program h2{font-size:clamp(2.9rem,7.8vw,7.4rem);line-height:.98;letter-spacing:-.015em}
.photo{margin:0;border-radius:50%;overflow:hidden;aspect-ratio:1;background:var(--glaze-2)}
.photo img{width:100%;height:100%;object-fit:cover}
.program-photo{position:relative;z-index:1;width:min(62vw,16rem);justify-self:end;box-shadow:0 0 0 .5rem color-mix(in oklab,var(--plocha) 72%,var(--proti))}
.events{list-style:none;margin:clamp(1.4rem,3vw,2.4rem) calc(-1 * var(--gut)) 0;padding:0}
.events li{display:grid;gap:.15rem;padding:1.1rem var(--gut) 1.2rem}
.events li.next{background:var(--kaki-d);background:color-mix(in oklab,var(--plocha) 72%,var(--proti))}
.events time{font:400 1.25rem/1 var(--sans)}
.events time b{font:400 clamp(2.5rem,5.4vw,4.8rem)/1 var(--serif);margin-right:.1em}
.ev-name{font:400 clamp(1.9rem,4.2vw,3.7rem)/1.06 var(--serif)}
.ev-what{font-size:1.25rem;line-height:1.35}
.ev-when{justify-self:start;margin-top:.45rem;padding:.2rem .75rem;border-radius:999px;background:var(--ink);color:var(--plocha);font-size:1.0625rem;font-weight:700}
.program-note{margin-top:1.6rem;max-width:40rem}

/* zůstaňte: velká věta a misky místo fotek v rámečku */
.books{position:relative;overflow:hidden;display:grid;gap:2.2rem;padding:clamp(3.4rem,8vw,6.6rem) var(--gut);background:var(--fur),var(--glaze-2)}
.books h2{font-size:clamp(2.9rem,7.4vw,7rem);line-height:.98;letter-spacing:-.015em}
.books-text>p{margin-top:1.1rem;max-width:34rem;font-size:clamp(1.18rem,1.55vw,1.3125rem);line-height:1.42}
.perks{list-style:none;margin:clamp(1.8rem,4vw,3rem) 0 0;padding:0;font:400 clamp(1.5rem,2.7vw,2.4rem)/1.2 var(--serif);color:var(--clay)}
.perks li{display:inline}
.perks b{font-weight:400;color:var(--shino)}
.books-fotky{position:relative;height:calc(84vw + 1rem)}
.books-photo{position:absolute;right:calc(-1 * var(--gut) - 6vw);top:0;width:80vw}
.bowls-photo{position:absolute;left:0;bottom:0;width:38vw;box-shadow:0 0 0 .45rem var(--glaze-2)}

/* kde a kdy na seladonu */
.where{padding:clamp(3.2rem,8vw,6.2rem) var(--gut);background:var(--celadon);color:var(--glaze)}
.where :focus-visible{outline-color:var(--glaze)}
.kde-hlava{display:grid;gap:.5rem}
.where h2{font-size:clamp(2.9rem,7.4vw,7rem);line-height:.98;letter-spacing:-.015em}
.kde-stav{font:400 clamp(1.5rem,3.2vw,2.8rem)/1.12 var(--serif)}
.hours{width:100%;margin-top:clamp(1.6rem,3.6vw,2.8rem);border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hours th,.hours td{padding:.62rem .9rem;text-align:left;font-weight:400;font-size:1.1875rem}
.hours td{text-align:right}
.hours tr.today{background:var(--plocha);color:var(--ink)}
.hours tr.today th{font-weight:700}
.hours-note{margin-top:.9rem;font-size:1.0625rem}
.kde-spod{display:grid;gap:1.4rem;margin-top:clamp(2rem,4vw,3.2rem)}
.big-addr{font:400 clamp(1.6rem,2.8vw,2.4rem)/1.12 var(--serif)}
.contacts{margin:0;display:grid;gap:.8rem}
.contacts dt{font-size:1.0625rem}
.contacts dd{margin:0;font-size:1.3rem;font-weight:700;overflow-wrap:anywhere}
.contacts .as-link,.konec-tel .as-link,.links .as-link,.foot-back,.program-note .as-link{display:inline-block;padding-block:.6rem}

/* konec: miska se otočí a zbude nepolévaná patka */
.konec{position:relative;overflow:hidden;padding:clamp(7.5rem,15vw,13rem) var(--gut) clamp(2.2rem,5vw,3.8rem);background:var(--fur),var(--glaze);color:var(--glaze);text-align:center}
.konec :focus-visible{outline-color:var(--glaze)}
.patka{position:absolute;left:50%;top:clamp(2rem,5vw,4.4rem);width:max(190vw,62rem);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,var(--foot) 97%,#b48a64),var(--fur);box-shadow:inset 0 0 0 clamp(.9rem,2.4vw,2.2rem) #b48a64,inset 0 0 0 calc(clamp(.9rem,2.4vw,2.2rem) + 3px) rgb(60 34 18 / .3)}
.konec-in{position:relative;display:grid;justify-items:center;gap:1.2rem}
.znak{width:clamp(3.4rem,6vw,5rem);height:auto;fill:none;stroke:#7a5634;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.konec h2{font-size:clamp(3rem,9vw,8.8rem);line-height:.98;letter-spacing:-.02em;max-width:12em}
.konec-veta{font-size:clamp(1.25rem,2vw,1.625rem);line-height:1.3;max-width:34rem}
.konec-tel{font-size:1.25rem;font-weight:700}
.fake{display:block;font-size:1.0625rem;font-weight:400}

.foot{display:grid;gap:.1rem;padding:1.6rem var(--gut) calc(2.4rem + env(safe-area-inset-bottom));background:var(--foot);color:var(--glaze);font-size:1.0625rem;text-align:center}
.foot :focus-visible{outline-color:var(--glaze)}
.foot a{text-decoration-color:currentColor}
.links .as-link,.foot-back{font-weight:700}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1.2fr;gap:.55rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(28,20,16,.96);box-shadow:0 -1px 0 var(--clay-line);transform:translateY(110%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sticky.on{transform:none}
.sticky .btn{min-height:50px}

.pop{max-width:min(26rem,calc(100vw - 2rem));padding:1.6rem;border:1px solid var(--clay-line);border-radius:10px;background:var(--glaze-2);color:var(--shino);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pop::backdrop{background:rgba(18,10,6,.65)}
.pop h2{font-size:clamp(1.7rem,6.4vw,2.1rem);margin-bottom:.7rem}
.pop p{margin:0 0 1.1rem}
.pop .btn{width:100%}

/* přelití: nový nálev se rozlije po stránce z misky */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}
::view-transition{pointer-events:none}

@keyframes ho-zoom{from{transform:scale(1.04)}}
@keyframes toc{to{transform:rotate(360deg)}}
@keyframes dopad{from{transform:scale(.8);opacity:.5}to{transform:scale(1.25);opacity:1}}
@keyframes tece{from{transform:translate3d(0,-50%,0)}to{transform:none}}
@keyframes vlnka{from{transform:scale(.05);opacity:.7}to{transform:scale(1);opacity:0}}
@keyframes para{0%{transform:translate3d(0,14%,0) scale(.78);opacity:0}24%{opacity:var(--a)}68%{opacity:calc(var(--a) * .62)}100%{transform:translate3d(var(--x),-46%,0) scale(1.4);opacity:0}}

@media (prefers-reduced-motion:no-preference){.ho-obraz img{animation:ho-zoom 1.2s cubic-bezier(.22,.61,.36,1)}}
@media (min-width:900px){
  .sticky{display:none}
  .ho-text{align-items:center;text-align:center;padding-top:clamp(4.2rem,9.5svh,6.4rem);padding-bottom:clamp(1.6rem,5svh,3rem)}
  .ho-text h1{font-size:clamp(3.4rem,7.1vw,10rem);line-height:1;white-space:nowrap}
  .status{margin:1rem 0 1.1rem;font-size:1.5rem}
  .ho-text .btn{min-height:52px;padding:.7rem 1.4rem;font-size:1.125rem}
  .lead{align-self:flex-start;margin-top:auto;max-width:25rem;text-align:left;font-size:1.1875rem}
  .kroky{grid-template-columns:repeat(3,1fr);text-align:left;justify-items:start}
  .teas{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem}
  .tea{width:calc(100% + 2rem)}
  .vedle{grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);align-items:start;column-gap:clamp(2rem,4vw,4rem)}
  .vedle h2{font-size:clamp(2.8rem,5vw,5.4rem)}
  .vedle-sloupce{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.6rem,3.2vw,3.2rem);padding-top:.6rem}
  .program-hlava{grid-template-columns:minmax(0,1fr) 22rem;align-items:center;column-gap:3rem}
  .program-photo{width:22rem;margin-top:clamp(-9rem,-9vw,-5rem)}
  .events li{grid-template-columns:clamp(12rem,17vw,16rem) minmax(0,1fr) minmax(0,21rem);align-items:baseline;column-gap:clamp(1.2rem,2.4vw,2.4rem);padding-block:.9rem 1rem}
  .ev-when{grid-column:3;margin-top:.1rem}
  .books{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);align-items:center;column-gap:clamp(2rem,4vw,4rem)}
  .books-fotky{height:clamp(30rem,44vw,44rem)}
  .books-photo{right:calc(-1 * var(--gut) - 7vw);top:50%;width:clamp(28rem,42vw,44rem);transform:translateY(-50%)}
  .bowls-photo{left:-3vw;bottom:0;width:clamp(11rem,17vw,18rem)}
  .kde-hlava{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(2rem,5vw,5rem)}
  .kde-stav{text-align:right}
  .hours,.hours caption{display:block}
  .hours caption{height:1px}
  .hours tbody{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(.4rem,1vw,.9rem)}
  .hours tr{display:grid;place-content:center;justify-items:center;aspect-ratio:1;border-radius:50%;background:var(--celadon-d);text-align:center}
  .hours tr.closed{background:none;box-shadow:inset 0 0 0 2px var(--celadon-d)}
  .hours th,.hours td{padding:0;text-align:center;font-size:clamp(1.0625rem,1.45vw,1.3rem);line-height:1.2}
  .hours th{font-family:var(--serif)}
  .kde-spod{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:clamp(2rem,4vw,4rem)}
  .contacts{grid-auto-flow:column;column-gap:clamp(1.6rem,3vw,3rem)}
  .foot{grid-template-columns:auto auto 1fr auto;align-items:baseline;column-gap:2rem;text-align:left}
}

/* scéna: pódium stojí, scroll vede příběh; bez JS a při omezeném pohybu platí hotová kompozice nahoře */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .svet{position:relative}
  .podium{position:sticky;top:0;z-index:1;height:100svh;overflow:hidden;background:var(--noc);color:var(--shino)}
  .dech{display:block;height:370svh}
  .ho-obraz{position:absolute;inset:0;min-height:0;height:100%;will-change:transform}
  .ho-text{height:100%;min-height:0;will-change:transform,opacity}
  .ho-tma{display:block;position:absolute;inset:0;z-index:1;background:var(--noc);opacity:0;visibility:hidden}
  .zaliti{display:block;position:absolute;z-index:1;left:0;top:0;width:max(118vmin,96vw,74svh);aspect-ratio:1;border-radius:50%;background:var(--plocha);visibility:hidden;will-change:transform}
  .bx{position:absolute;z-index:2;left:0;top:0;margin:0;width:max(118vmin,96vw,74svh);opacity:0;transform-origin:50% 50%;will-change:transform,opacity}
  .bx-voda{will-change:transform,opacity}
  .v-cista{display:block;background:radial-gradient(closest-side,rgb(255 236 210 / 0) 60%,rgb(255 236 210 / .05) 92%,rgb(255 236 210 / .1))}
  .v-toc{display:block;animation:toc 170s linear infinite}
  .v-mrak{position:absolute;left:50%;top:50%;width:min(44rem,120vmin);height:min(44rem,120vmin);margin:calc(min(44rem,120vmin) / -2);background:color-mix(in oklab,var(--caj) 84%,#ffd59a);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;opacity:0;will-change:transform,opacity}
  .m1{--m:url(mrak-1.webp)}
  .m2{--m:url(mrak-2.webp)}
  .m3{--m:url(mrak-3.webp)}
  .bx .v-plna,.bx .v-kruhy{opacity:0}
  .tece .v-dopad{display:block;inset:47.5%;background:radial-gradient(closest-side,rgb(255 250 240 / .7),rgb(255 250 240 / 0));animation:dopad .7s ease-in-out infinite alternate}
  .tece .v-vlnka{animation:vlnka 2.6s cubic-bezier(.2,.55,.3,1) infinite}
  .tece .v-vlnka:nth-of-type(7){animation-delay:.87s}
  .tece .v-vlnka:nth-of-type(8){animation-delay:1.73s}
  .bx-listy{overflow:visible;border-radius:0;opacity:0;animation:toc 240s linear infinite}
  .bx-listy b{will-change:transform,opacity}
  .listy-b{display:block}
  .bx-para{display:block;position:absolute;inset:0;pointer-events:none;opacity:0}
  .bx-para i{position:absolute;left:var(--l);top:var(--y);width:var(--w,30%);aspect-ratio:9/19;background:url(para-1.webp) center/100% 100% no-repeat;opacity:0;animation:para var(--t) linear var(--z) infinite;will-change:transform,opacity}
  .bx-para i:nth-child(2n){background-image:url(para-2.webp)}
  .bx-para i:nth-child(1){--l:6%;--y:30%;--x:-5%;--a:.3;--t:13s;--z:-1s}
  .bx-para i:nth-child(2){--l:22%;--y:12%;--x:8%;--a:.2;--t:16s;--z:-6s;--w:26%}
  .bx-para i:nth-child(3){--l:40%;--y:24%;--x:-6%;--a:.14;--t:12s;--z:-3s;--w:34%}
  .bx-para i:nth-child(4){--l:58%;--y:8%;--x:9%;--a:.2;--t:15s;--z:-9s;--w:26%}
  .bx-para i:nth-child(5){--l:68%;--y:30%;--x:-4%;--a:.3;--t:14s;--z:-5s}
  .bx-para i:nth-child(6){--l:32%;--y:44%;--x:6%;--a:.11;--t:18s;--z:-12s;--w:36%}
  .podium:not(.bezi) *{animation-play-state:paused}
  .proud{display:block;position:absolute;z-index:3;left:0;top:0;width:36px;overflow:hidden;transform-origin:50% 0;opacity:0;visibility:hidden;pointer-events:none;clip-path:polygon(0 0,100% 0,72% 100%,28% 100%);will-change:transform}
  .proud i{display:block;width:100%;height:200%;background:url(proud.webp) 50% 0/100% 50% repeat-y;animation:tece 1.3s linear infinite}
  .kroky{position:absolute;inset:0;z-index:4;display:block;margin:0;padding:0;pointer-events:none}
  .krok{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(1.6rem + env(safe-area-inset-bottom));max-width:12.5em;font-size:min(clamp(2.1rem,8.8vw,5rem),10.5svh);text-align:left;opacity:0;visibility:hidden;will-change:opacity}
  .krok-2::before{content:"";position:absolute;z-index:-1;inset:-34% -16%;background:radial-gradient(closest-side,rgb(18 11 7 / .62) 40%,rgb(18 11 7 / 0))}
  .krok-3{top:42%;bottom:auto;max-width:none;color:var(--ink);text-align:center;transform:translateY(-50%)}
  .stopky{font-size:min(clamp(4.2rem,17vw,10rem),20svh);margin-bottom:.06em}
  .v-misce{display:none}
  .menu{border-radius:1.6rem 1.6rem 0 0}
  .pour{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:4.4rem minmax(0,1fr) auto;align-items:center;gap:.8rem;margin-inline:calc(-1 * var(--gut));padding:.55rem var(--gut);border-radius:1.6rem 1.6rem 0 0;background:var(--plocha);box-shadow:0 .7rem 1rem -.8rem rgb(0 0 0 / .45)}
  .pour .bowl{position:relative;aspect-ratio:1;border-radius:50%;background:url(miska-velka.webp) center/100% 100% no-repeat}
  .pour .bx-voda{inset:9%}
  .pour-text{display:grid;line-height:1.2}
  .pour-text .bc-name{font-size:1.3rem}
  .pour-text .bc-meta{font-size:1.0625rem}
  .infusions{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
  .infusions li{width:.75rem;height:.75rem;border-radius:50%;background:var(--ink)}
}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled) and (min-width:900px){
  .krok{bottom:clamp(2rem,9svh,5.4rem);font-size:clamp(2.4rem,4.2vw,4.4rem)}
  .krok-3{top:50%;bottom:auto;left:50%;right:auto;width:min(84vw,62rem);font-size:clamp(3rem,6.2vw,8.6rem);line-height:1;transform:translate(-50%,-50%)}
  .stopky{font-size:clamp(5rem,9.4vw,13rem)}
  .v-misce{display:grid;position:absolute;z-index:3;left:80%;top:50%;width:min(29vw,24rem);padding:0;color:var(--ink);transform:translate(-50%,-50%);opacity:0;visibility:hidden}
  .v-misce .bc-name{font-size:clamp(2rem,3.6vw,3.4rem)}
  .v-misce .bc-meta{font-size:1.25rem;font-weight:700}
  .menu{width:calc(49% + var(--gut));padding-right:0;background:none;border-radius:0}
  .pour{display:none}
  .teas{grid-template-columns:minmax(0,1fr)}
}
@media (max-height:540px) and (max-width:899px){
  .lead{display:none}
}
/* FORMA-POLISH (generuje vizitka/tools/ukazky-polish.py) */
:where(input,textarea){caret-color:#a9c4a8}
:where(a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible){outline:3px solid #a9c4a8;outline-offset:3px}
:where(a){text-underline-offset:.2em}
:where(table,dd,time,data,[class*=cen],[class*=price],[class*=hod],[class*=hours],[class*=doba],[class*=kc]){font-variant-numeric:tabular-nums}
/* /FORMA-POLISH */