:root{
  --zelen:#2C3E2D;   --zelen-rgb:44,62,45;
  --vina:#6B2437;    --vina-rgb:107,36,55;
  --rezna:#F1EBDD;   --rezna-rgb:241,235,221;
  --sepie:#2A2218;
  --mosaz:#A98B4B; --mosaz-svetla:#C8B98A; --mosaz-tmava:#7A6130;
  --ser:"Fraunces",Georgia,"Times New Roman",serif;
  --gro:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --okraj:clamp(20px,5vw,80px);
  /* výřez masky je 40 % její šířky: do 42 % musí být čistě průhledná,
     od 58 % čistě krycí — jinak je hned na začátku vidět kus fotky */
  --preliv:linear-gradient(102deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.28) 47%,
    rgba(0,0,0,.72) 53%, #000 58%, #000 100%);
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--zelen); color:var(--rezna);
  font-family:var(--ser); font-optical-sizing:auto;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }   /* height:auto — jinak si obrázek nechá výšku z atributu a natáhne se */
svg{ display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--mosaz-svetla); outline-offset:3px; }
.jen-cteckam{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ================= OPONA: papír se roztrhne, díry jsou průhledné od první chvíle ================= */
#opona{ position:fixed; inset:0; z-index:300; pointer-events:none;
  --rez:url(img/rez-drapy.svg); --rez-vel:auto 132%; --rez-pos:center; }
#opona.pryc{ display:none; }

/* dvě vrstvy TÉHOŽ papíru včetně nápisu: celá a roztržená.
   Mezi nimi projede hrana trhliny — nikdy nic tmavého, rovnou díry. */
#opona .plachta{ position:absolute; inset:0; background:var(--rezna); color:var(--sepie); }
#opona .plachta.cela{ clip-path:inset(0 0 0 0); }
#opona .plachta.rez{
  clip-path:inset(0 0 100% 0);
  -webkit-mask-image:var(--rez), linear-gradient(#000,#000);
          mask-image:var(--rez), linear-gradient(#000,#000);
  -webkit-mask-size:var(--rez-vel), 100% 100%;  mask-size:var(--rez-vel), 100% 100%;
  -webkit-mask-position:var(--rez-pos), 0 0;    mask-position:var(--rez-pos), 0 0;
  -webkit-mask-repeat:no-repeat, no-repeat;     mask-repeat:no-repeat, no-repeat;
  mask-composite:exclude;
}
#opona.trha .plachta.rez { animation:rezDolu  .45s cubic-bezier(.22,.85,.28,1) forwards; }
#opona.trha .plachta.cela{ animation:celaPryc .45s cubic-bezier(.22,.85,.28,1) forwards; }
@keyframes rezDolu { from{ clip-path:inset(0 0 100% 0) } to{ clip-path:inset(0 0 0 0) } }
@keyframes celaPryc{ from{ clip-path:inset(0 0 0 0) }   to{ clip-path:inset(100% 0 0 0) } }

/* roztržený papír spadne dolů i s dírami */
#opona.pada{ animation:spadnout .5s cubic-bezier(.45,.03,.72,.5) forwards; }
@keyframes spadnout{
  0%  { transform:translate3d(0,0,0) rotate(0deg); }
  100%{ transform:translate3d(-2%,112%,0) rotate(2.5deg); }
}
#opona.trha{ animation:otres .34s ease both; }
@keyframes otres{
  0%,100%{ transform:translate(0,0) }
  18%{ transform:translate(-7px,3px) } 44%{ transform:translate(5px,-4px) } 72%{ transform:translate(-2px,1px) }
}

#opona .jmeno{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center;
  padding:0 24px;
}
#opona .jmeno b{
  font-family:var(--ser); font-weight:900; font-variation-settings:"opsz" 144,"WONK" 1;
  text-transform:uppercase; letter-spacing:.05em; font-size:clamp(30px,7.4vw,78px); line-height:1;
  opacity:0; animation:najed .65s ease .15s forwards;
}
#opona .del{
  display:block; width:0; height:2px; background:var(--sepie); margin:clamp(16px,2.4vw,28px) 0;
  animation:carka .5s cubic-bezier(.3,.7,.3,1) .5s forwards;
}
@keyframes carka{ to{ width:clamp(64px,9vw,130px) } }
#opona .sc{ width:clamp(132px,20vw,290px); height:auto; color:var(--sepie);
  opacity:0; animation:najed .65s ease .78s forwards; }
@keyframes najed{ to{ opacity:1 } }

/* ================= HLAVIČKA ================= */
header{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px var(--okraj);
  opacity:0; transform:translateY(-12px); pointer-events:none;
  transition:opacity .7s ease, transform .7s ease, color .5s ease, background-color .4s ease;
}
header.vidno{ opacity:1; transform:none; pointer-events:auto; }
header::after{ content:""; position:absolute; left:var(--okraj); right:var(--okraj); bottom:0;
  border-top:1px solid currentColor; opacity:.2; }
.znacka{ display:flex; align-items:center; gap:clamp(9.4px,1.07vw,11.4px); text-decoration:none; }
.znacka b{ font-family:var(--ser); font-weight:900; font-variation-settings:"opsz" 96,"WONK" 1;
  text-transform:uppercase; letter-spacing:.1em; font-size:clamp(14px,1.6vw,17px); line-height:1; }
.znacka i{ width:1px; height:clamp(15.9px,1.81vw,19.3px); background:currentColor; opacity:.45; }
.znacka .sc-mala{ height:clamp(10.8px,1.24vw,13.1px); width:auto; color:currentColor; opacity:.92; }
nav.velke{ display:flex; gap:clamp(14px,2vw,32px); }
nav.velke a{ font-family:var(--gro); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; opacity:.62; padding:5px 0; border-bottom:1px solid transparent; transition:opacity .3s; }
nav.velke a:hover, nav.velke a.tady{ opacity:1; border-bottom-color:currentColor; }

.hamburger{ display:none; background:none; border:0; padding:8px; cursor:pointer; color:inherit; }
.hamburger span{ display:block; width:26px; height:2px; background:currentColor; margin:5px 0; transition:transform .3s ease, opacity .2s ease; }
body.menu-otevreno .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-otevreno .hamburger span:nth-child(2){ opacity:0; }
body.menu-otevreno .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:900px){
  nav.velke{ display:none; }
  .hamburger{ display:block; }
}
#menu{
  position:fixed; inset:0; z-index:140; background:var(--zelen); color:var(--rezna);
  display:grid; align-content:center; gap:6px; padding:0 var(--okraj);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
body.menu-otevreno #menu{ opacity:1; visibility:visible; }
#menu a{
  font-family:var(--ser); font-weight:800; font-variation-settings:"opsz" 96,"WONK" 1;
  font-size:clamp(28px,7.5vw,44px); line-height:1.18; text-decoration:none;
  padding:8px 0; border-bottom:1px solid rgba(241,235,221,.16);
}
#menu .spodek{ margin-top:26px; font-family:var(--gro); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mosaz-svetla); }

/* ================= CEDULE ================= */
#cedule{
  position:fixed; right:var(--okraj); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:150;
  background:var(--zelen); color:var(--rezna); border-radius:6px; padding:10px 16px;
  box-shadow:inset 0 0 0 1.5px rgba(241,235,221,.85), inset 0 0 0 4px var(--zelen), 0 3px 0 rgba(0,0,0,.32);
  font-family:var(--gro); text-align:center; overflow:hidden;
  opacity:0; transform:translateY(12px); transition:opacity .7s ease .35s, transform .7s ease .35s;
}
#cedule.vidno{ opacity:1; transform:none; }
#cedule::after{ content:""; position:absolute; left:0; right:0; top:0; height:46%;
  background:linear-gradient(rgba(255,255,255,.14),transparent); pointer-events:none; }
#cedule.zavreno{ background:var(--vina);
  box-shadow:inset 0 0 0 1.5px rgba(241,235,221,.85), inset 0 0 0 4px var(--vina), 0 3px 0 rgba(0,0,0,.32); }
#cedule b{ display:block; font-weight:800; text-transform:uppercase; letter-spacing:.2em; font-size:13px; }
#cedule span{ display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; margin-top:3px; opacity:.85; }
body.menu-otevreno #cedule{ opacity:0; pointer-events:none; }
@media (max-width:700px){
  #cedule{ right:auto; left:50%; transform:translateX(-50%) translateY(12px);
    bottom:calc(16px + env(safe-area-inset-bottom)); }
  #cedule.vidno{ transform:translateX(-50%); }
}

/* ================= SEKCE ================= */
.panel{
  position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden;
  padding:clamp(104px,14vh,150px) var(--okraj) clamp(96px,13vh,140px);
}
.panel.zelena{ --pod:var(--zelen); --pod-rgb:var(--zelen-rgb); --txt:var(--rezna);
  --tlum:#A5B4A1; --kov:var(--mosaz); --oko:var(--mosaz-svetla); --inkoust:var(--rezna); }
.panel.rezna{ --pod:var(--rezna); --pod-rgb:var(--rezna-rgb); --txt:var(--sepie);
  --tlum:#6A5B47; --kov:var(--mosaz-tmava); --oko:var(--vina); --inkoust:var(--sepie); }
.panel.vinova{ --pod:var(--vina); --pod-rgb:var(--vina-rgb); --txt:var(--rezna);
  --tlum:#CBA9B1; --kov:var(--mosaz); --oko:var(--mosaz-svetla); --inkoust:var(--rezna); }
.panel{ background:var(--pod); color:var(--txt); }

/* --- obraz přes celou plochu --- */
.obraz{ position:absolute; inset:0; overflow:hidden; }
.obraz .foto, .obraz .kresba{ position:absolute; inset:0; transition:opacity 1.05s cubic-bezier(.4,0,.25,1); }
/* fotka je vždycky na místě; odkrývá ji pomalu putující maska, ne skok v krytí */
.obraz .foto{
  background-image:var(--foto); background-size:cover; background-repeat:no-repeat;
  background-position:var(--pozice,50% 50%);
  opacity:1; filter:saturate(.94) contrast(1.02);
  -webkit-mask-image:var(--preliv); mask-image:var(--preliv);
  -webkit-mask-size:250% 250%;      mask-size:250% 250%;
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  -webkit-mask-position:0% 50%;     mask-position:0% 50%;
}
.panel.leje .obraz .foto{ animation:prelivani var(--doba,21s) cubic-bezier(.22,.08,.3,1) infinite; }
@keyframes prelivani{
  /* přelití začíná hned, výdrž je až na fotce, pak zase zpátky na kresbu */
  0%      { -webkit-mask-position:0% 50%;   mask-position:0% 50%; }
  42%, 62%{ -webkit-mask-position:100% 50%; mask-position:100% 50%; }
  100%    { -webkit-mask-position:0% 50%;   mask-position:0% 50%; }
}
.obraz .kresba{
  background-color:var(--inkoust); opacity:1;
  -webkit-mask-image:var(--maska);          mask-image:var(--maska);
  -webkit-mask-size:cover;                  mask-size:cover;
  -webkit-mask-repeat:no-repeat;            mask-repeat:no-repeat;
  -webkit-mask-position:var(--pozice,50% 50%); mask-position:var(--pozice,50% 50%);
}

.obraz .zavoj{ position:absolute; inset:0; background:rgb(var(--pod-rgb)); opacity:.2; }
/* perokresba sálu je hustě šrafovaná, jako maska by se převrátila do negativu,
   proto leží v panelu jako obrázek a fotka se přes ni přelévá */
#sal .obraz .kresba{ background-color:transparent;
  background-image:url(img/sal-kresba.jpg); background-size:cover;
  background-position:var(--pozice,50% 50%); opacity:.62;
  -webkit-mask-image:none; mask-image:none; }
.obraz video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* --- clona: sytá barva na straně textu, k obrazu se rozplyne --- */
.clona{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgb(var(--pod-rgb)) 0%, rgb(var(--pod-rgb)) 24%,
      rgba(var(--pod-rgb),.94) 38%, rgba(var(--pod-rgb),.62) 54%,
      rgba(var(--pod-rgb),.20) 74%, rgba(var(--pod-rgb),0) 96%),
    linear-gradient(0deg,
      rgb(var(--pod-rgb)) 0%, rgba(var(--pod-rgb),.55) 15%, rgba(var(--pod-rgb),0) 44%),
    linear-gradient(180deg,
      rgb(var(--pod-rgb)) 0%, rgba(var(--pod-rgb),.5) 12%, rgba(var(--pod-rgb),0) 34%),
    linear-gradient(270deg,
      rgba(var(--pod-rgb),.62) 0%, rgba(var(--pod-rgb),.22) 9%, rgba(var(--pod-rgb),0) 22%);
}
.panel[data-obraz="vlevo"] .clona{ transform:scaleX(-1); }

.uvnitr{ position:relative; z-index:5; width:100%; max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr); }
@media (min-width:901px){
  .uvnitr{ grid-template-columns:minmax(0,.52fr) minmax(0,.48fr); }
  .panel[data-obraz="vlevo"] .uvnitr > .text{ grid-column:2; }
}
.text{ max-width:56ch; }

/* --- typografie sekce --- */
.oko{ font-family:var(--gro); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  display:flex; align-items:center; gap:12px; color:var(--oko); margin-bottom:20px; }
.oko::before{ content:""; width:30px; height:1px; background:currentColor; }
h1,h2{ font-family:var(--ser); font-weight:800; font-variation-settings:"opsz" 144,"SOFT" 10,"WONK" 1;
  font-size:clamp(34px,5.4vw,66px); line-height:1.03; letter-spacing:-.02em; text-wrap:balance; margin-bottom:22px; }
.lead{ font-size:clamp(16px,1.35vw,19.5px); line-height:1.6; max-width:46ch; }
.lead + .lead{ margin-top:13px; }
.tlum{ color:var(--tlum); }
.linka-kov{ border:0; border-top:3px solid var(--kov); border-bottom:1px solid var(--kov);
  height:4px; margin:28px 0 22px; max-width:300px; }
.udaje{ display:grid; gap:8px; max-width:430px; }
.udaje div{ display:flex; align-items:baseline; gap:10px; font-family:var(--gro); font-size:12.5px; letter-spacing:.04em; }
.udaje .tl{ flex:1; border-bottom:1px dotted currentColor; opacity:.4; transform:translateY(-4px); }
.udaje b{ font-weight:700; }
.tlacitko{ display:inline-flex; align-items:center; gap:12px; margin-top:32px;
  font-family:var(--gro); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; padding:14px 24px; border:1.5px solid currentColor;
  transition:background-color .3s ease, color .3s ease; }
.tlacitko:hover{ background:var(--txt); color:var(--pod); }
.tlacitko svg{ height:12px; width:24px; fill:currentColor; }

/* --- popiska u obrazu --- */
.popiska{ position:absolute; z-index:6; bottom:calc(26px + env(safe-area-inset-bottom)); right:var(--okraj);
  display:flex; align-items:center; gap:14px; font-family:var(--gro); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tlum); }
.panel[data-obraz="vlevo"] .popiska{ right:auto; left:var(--okraj); }
.popiska button{ background:none; border:0; padding:0; color:inherit; font:inherit;
  letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid currentColor; cursor:pointer; }
@media (max-width:900px){ .popiska{ display:none; } }

/* ================= JÍDELNÍ LÍSTEK ================= */

.listek{ background:var(--zelen); color:var(--rezna); padding:clamp(24px,3.4vw,42px);
  box-shadow:0 0 0 1px var(--mosaz), 0 0 0 6px var(--zelen), 0 0 0 7px rgba(169,139,75,.5),
             0 30px 70px -24px rgba(20,18,15,.5);
  max-width:520px; }
.listek .cela{ text-align:center; }
.listek .cela b{ font-family:var(--ser); font-weight:900; font-variation-settings:"opsz" 144,"WONK" 1;
  text-transform:uppercase; font-size:clamp(20px,2.8vw,29px); letter-spacing:.06em; line-height:1; display:block; }
.listek .cela span{ display:block; font-family:var(--gro); font-size:9.5px; letter-spacing:.3em;
  text-transform:uppercase; margin-top:9px; color:var(--mosaz-svetla); }
.listek hr.kov2{ border:0; border-top:3px solid var(--mosaz); border-bottom:1px solid var(--mosaz); height:4px; margin:17px 0; }
.listek hr.kov1{ border:0; border-top:1px solid var(--mosaz); opacity:.5; margin:0 0 5px; }
.skup{ margin-top:18px; }
.skup > b{ display:block; font-family:var(--gro); font-weight:700; text-transform:uppercase;
  letter-spacing:.26em; font-size:10px; text-align:center; margin-bottom:7px; color:var(--mosaz-svetla); }
.pol{ display:flex; align-items:baseline; gap:6px; padding:5px 0; font-size:15px; }
.pol .tl{ flex:1; border-bottom:1.5px dotted var(--mosaz-svetla); opacity:.55; transform:translateY(-4px); min-width:18px; }
.pol .c{ font-variant-numeric:tabular-nums; font-weight:700; }
.tlapka{ display:inline-block; height:.68em; width:auto; fill:var(--mosaz-svetla); vertical-align:-.01em; margin-right:.4em; }
.listek .krava{ width:clamp(120px,15vw,148px); margin:4px auto 14px; }
.listek .napoje{ font-family:var(--gro); font-size:12.5px; line-height:1.7; text-align:center;
  color:var(--rezna); opacity:.9; padding:4px 0; }
.listek .pata{ font-family:var(--gro); font-size:10px; line-height:1.7; text-align:center;
  color:var(--mosaz-svetla); letter-spacing:.03em; }

@media (min-width:1100px){
  #vycep .uvnitr{ grid-template-columns:minmax(0,.40fr) minmax(0,.60fr); }
  #vycep .listek{ max-width:680px; }
  #vycep .jidla{ column-count:2; column-gap:34px; }
  #vycep .skup{ break-inside:avoid; margin-top:0; margin-bottom:20px; }
}

/* ---- jaká je to kuchyně ---- */
.kuchyne{ display:grid; gap:1px; background:rgba(42,34,24,.14);
  grid-template-columns:minmax(0,1fr); box-shadow:0 0 0 1px rgba(42,34,24,.14); }
@media (min-width:620px){ .kuchyne{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.kuchyne .medved-nad{ grid-column:1/-1; background:var(--pod); display:flex; justify-content:center;
  padding:6px 0 14px; }
.kuchyne .medved-nad svg{ height:42px; width:auto; fill:var(--vina); opacity:.55; }
.kk{ background:var(--pod); padding:20px 22px 22px; display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:4px 13px; align-content:start; }
.kk .zn{ grid-row:1/3; height:34px; width:auto; fill:var(--vina); opacity:.85; margin-top:2px; }
.kk b{ font-family:var(--gro); font-weight:800; text-transform:uppercase; letter-spacing:.16em;
  font-size:11px; align-self:center; }
.kk b i{ font-style:normal; font-weight:600; letter-spacing:.14em; font-size:9px;
  color:var(--vina); border:1px solid var(--vina); padding:1px 5px; margin-left:7px;
  white-space:nowrap; vertical-align:1px; }
.kk span{ font-size:15px; line-height:1.45; color:var(--tlum); }
.kuchyne .tlacitko{ grid-column:1/-1; background:var(--pod); margin:0; justify-content:center;
  border:0; border-top:1px solid rgba(42,34,24,.14); padding:18px; }
.kuchyne .tlacitko:hover{ background:var(--vina); color:var(--rezna); }

/* ================= MEDVĚD ================= */
#medved .uvnitr{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
#medved .hlava{ width:clamp(150px,22vw,260px); fill:var(--sepie); opacity:.9; margin-bottom:26px; }
#medved .text{ max-width:60ch; }
#medved h2{ text-align:center; }
#medved .lead{ max-width:none; }
.drapy-cara{ display:flex; justify-content:center; margin-top:30px; }
.drapy-cara svg{ height:38px; width:auto; fill:currentColor; opacity:.35; }

/* ================= PEČEŤ ================= */
#pecet .uvnitr{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; }
.znak-starcow{ width:clamp(210px,28vw,400px); height:auto; color:var(--mosaz-svetla); margin-bottom:34px; }
.ruceni{ display:grid; gap:2px; width:100%; max-width:660px; margin-top:32px; text-align:left; }
.ruceni div{ display:flex; align-items:flex-start; gap:15px; background:rgba(241,235,221,.07); padding:15px 18px; }
.ruceni svg{ height:19px; width:auto; fill:var(--mosaz-svetla); flex:none; margin-top:3px; }
.ruceni p{ font-size:15.5px; line-height:1.45; }
.ruceni small{ display:block; font-family:var(--gro); font-size:12px; color:var(--tlum); margin-top:3px; }

/* ================= PATIČKA ================= */
footer{ background:var(--zelen); color:var(--rezna); border-top:3px solid var(--mosaz); padding:clamp(60px,8vw,100px) var(--okraj) calc(40px + env(safe-area-inset-bottom)); }
.pata-mriz{ max-width:1320px; margin:0 auto; display:grid; gap:38px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.pata-mriz h3{ font-family:var(--gro); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mosaz-svetla); margin-bottom:14px; font-weight:700; }
.pata-mriz p, .pata-mriz li{ font-size:15.5px; line-height:1.55; }
.pata-mriz ul{ list-style:none; display:grid; gap:5px; }
/* Čas stojí hned za dnem, ne u pravého okraje sloupce. Přes celou šířku
   odjel od textu pod sebou, který se zalomí dřív, a vypadal jako vypadlý
   z rámečku. Den má pevnou šířku, ať se víc řádků srovná pod sebe. */
.hod{ display:flex; justify-content:flex-start; align-items:baseline; gap:14px;
  font-family:var(--gro); font-size:13px; font-variant-numeric:tabular-nums; padding:3px 0; }
.hod b{ font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.14em;
  min-width:6.4em; }
.pata-spod{ max-width:1320px; margin:clamp(44px,6vw,70px) auto 0; }
.pata-spod hr{ border:0; border-top:3px solid var(--mosaz); border-bottom:1px solid var(--mosaz); height:4px; }
.pata-radek{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:20px; }
.pata-radek span{ font-family:var(--gro); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#A5B4A1; }
.pata-radek img{ width:clamp(110px,13vw,140px); }

/* ================= MOBIL ================= */
@media (max-width:900px){
  .panel{ align-items:flex-end; padding-top:clamp(120px,20vh,190px); padding-bottom:clamp(84px,12vh,120px); }
  .panel[data-obraz] .clona{
    transform:none;
    background:
      linear-gradient(0deg,
        rgb(var(--pod-rgb)) 0%, rgb(var(--pod-rgb)) 34%,
        rgba(var(--pod-rgb),.88) 50%, rgba(var(--pod-rgb),.42) 68%, rgba(var(--pod-rgb),0) 94%),
      linear-gradient(180deg, rgb(var(--pod-rgb)) 0%, rgba(var(--pod-rgb),.35) 14%, rgba(var(--pod-rgb),0) 32%);
  }
  .obraz .foto, .obraz .kresba{ bottom:34%; }
  .obraz video{ bottom:34%; height:66%; }
  #vycep .obraz .foto, #vycep .obraz .kresba{ bottom:0; }
  .listek{ max-width:none; }
  .text{ max-width:none; }
  .lead{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  #opona{ display:none !important; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-delay:0s !important; }
  .obraz .foto{ -webkit-mask-image:none; mask-image:none; }
}

/* ---------- otevírací víkend ---------- */
.vikend{ background:var(--vina); color:var(--rezna); padding:clamp(38px,5vw,64px) var(--okraj); }
.vikend-in{ width:100%; max-width:1320px; margin:0 auto; display:grid;
  gap:clamp(24px,3vw,52px); grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  align-items:start; }
.vikend h2{ font-family:var(--ser); font-weight:900; font-variation-settings:"opsz" 96,"WONK" 1;
  line-height:1.04; font-size:clamp(27px,3vw,42px); margin:8px 0 0; letter-spacing:-.015em; }
.vikend .oko{ color:var(--mosaz-svetla); }
.vikend-lead{ font-family:var(--gro); font-size:clamp(14.5px,1.2vw,16.5px);
  line-height:1.6; margin-top:14px; max-width:40ch; color:rgba(var(--rezna-rgb),.86); }
.vikend-dny{ display:grid; gap:clamp(18px,2.4vw,34px);
  grid-template-columns:repeat(3,minmax(0,1fr)); }
.vikend-dny > div{ border-top:1px solid rgba(var(--rezna-rgb),.32); padding-top:15px; }
.vikend-dny b{ display:block; font-family:var(--gro); font-size:11.5px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--mosaz-svetla); margin-bottom:9px; }
.vikend-dny span{ display:block; font-family:var(--gro);
  font-size:clamp(14px,1.15vw,16px); line-height:1.55; }
@media (max-width:900px){ .vikend-in{ grid-template-columns:1fr; } }
@media (max-width:640px){ .vikend-dny{ grid-template-columns:1fr; gap:16px; } }

/* ---------- rezervace v hlavičce ---------- */
.hd-tel{ font-family:var(--gro); font-weight:700; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap; text-decoration:none; color:inherit;
  padding:9px 15px; border:1px solid currentColor; border-radius:2px;
  opacity:.78; transition:opacity .3s, background-color .3s; }
.hd-tel:hover{ opacity:1; background:rgba(var(--rezna-rgb),.1); }
.hd-tel .tel-p{ opacity:.62; margin-right:7px; }
@media (max-width:900px){ .hd-tel{ margin-left:auto; } }
@media (max-width:820px){ .hd-tel .tel-p{ display:none; } .hd-tel{ padding:7px 11px; font-size:11px; } }
/* Hlavička po sjetí z úvodu dostane podklad v barvě sekce pod sebou — dřív
   byla průhledná a logo i Rezervace ležely přímo na textu. V úvodu zůstává
   průhledná, jak byla. */
header.podklad{ -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
/* Rezervace na telefonu dost vysoká na prst. */
@media (max-width:820px){ .hd-tel{ min-height:44px; display:inline-flex; align-items:center; } }
/* Cedule je odkaz na otevření; při rolování dolů se uklidí, ať nezakrývá text. */
a#cedule{ text-decoration:none; }
#cedule.vidno.schovana{ opacity:0; transform:translateY(14px); pointer-events:none; }
#menu .spodek .tel{ white-space:nowrap; }
.tel-odkaz{ color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; }

@media (max-width:430px){ .hd-tel .tel-c{ display:none; } .hd-tel .tel-p{ display:inline; opacity:1; margin-right:0; } }
/* na úzkém displeji nesmí tlačítko zalomit název podniku */
.znacka b{ white-space:nowrap; }
@media (max-width:430px){ header{ gap:10px; padding-left:16px; padding-right:16px; }
  .znacka{ gap:7px; } .znacka .sc-mala{ height:9px; } .znacka i{ height:13px; }
  .hd-tel{ padding:6px 9px; font-size:10px; letter-spacing:.1em; } }

.odkaz-mapa{ font-family:var(--gro); font-size:13.5px; color:var(--mosaz-svetla);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.odkaz-mapa:hover{ color:var(--rezna); }

/* Sociální sítě v patičce. Značka nikde jinde cizí ikony nepoužívá — stálo by
   to vedle medvěda a tlapy jako cedule z jiného obchodu. Odkazy proto vypadají
   jako „Zobrazit na mapě“ o sloupec vedle: jméno sítě a linka pod ním. */
.pata-site{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; }
.pata-site a{ font-family:var(--gro); font-size:13.5px; color:var(--mosaz-svetla);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.pata-site a:hover{ color:var(--rezna); }