/* =====================================================
   VARIANTA E — ZLATÁ HODINKA
   Světlý podklad v barvě šampaňské smetany, teplý inkoust,
   zlatý akcent. Hodina před západem slunce — slavnostní,
   hřejivá, jasně odlišná od chladné denní varianty.
   ===================================================== */

:root{
  --papir:        #F7F0E3;   /* podklad — sytější krémová */
  --plocha:       #EFE5D4;   /* vyvýšené plochy — o stupeň hlubší krém */
  --inkoust:      #403A33;   /* hlavní text — teplá skoro-černá */
  --tlum:         #6E665B;   /* vedlejší text */
  --zlata:        #A8863F;   /* akcent pro text a obrysy — hluboká zlatá, čitelná na smetanové */
  --zlata-svetla: #C2A361;   /* akcent pro plochy a tlačítka */
  --linka:        rgba(64,58,51,.18);

  /* Rozplynutí okrajů fotoploch — bez něj na sebe fotky navazují ostrou
     hranou. Podle toho, co za hranou leží, se rozplývá do krému
     (světlá sekce) nebo do tmy (další fotka). Krémový pruh mezi dvěma
     tmavými fotkami vypadá jako šev, proto ta dvojí sada. */
  --krem-nahore: linear-gradient(to bottom,
    #F7F0E3 0%, rgba(247,240,227,.94) 4%, rgba(247,240,227,.72) 9%,
    rgba(247,240,227,.42) 14%, rgba(247,240,227,.16) 19%, rgba(247,240,227,0) 24%);
  --krem-dole: linear-gradient(to top,
    #F7F0E3 0%, rgba(247,240,227,.94) 4%, rgba(247,240,227,.72) 9%,
    rgba(247,240,227,.42) 14%, rgba(247,240,227,.16) 19%, rgba(247,240,227,0) 24%);

  /* Mezi dvěma fotkami se „stmívá do černé" jako střih ve filmu:
     úplně u hrany je plná tma, takže obě fotky splynou v jednom
     temném bodě a švu není vidět. Odtud se rozjasňuje po měkké
     křivce (víc zastávek = žádné pruhování). */
  --tma-nahore: linear-gradient(to bottom,
    #241C14 0%, rgba(36,28,20,.97) 3%, rgba(36,28,20,.86) 7%,
    rgba(36,28,20,.66) 12%, rgba(36,28,20,.42) 17%,
    rgba(36,28,20,.2) 22%, rgba(36,28,20,0) 28%);
  --tma-dole: linear-gradient(to top,
    #241C14 0%, rgba(36,28,20,.97) 3%, rgba(36,28,20,.86) 7%,
    rgba(36,28,20,.66) 12%, rgba(36,28,20,.42) 17%,
    rgba(36,28,20,.2) 22%, rgba(36,28,20,0) 28%);

  /* pro plochy, které mají obě hrany proti světlé sekci */
  --kraj: var(--krem-nahore), var(--krem-dole);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
}

body{
  background: var(--papir);
  color: var(--inkoust);
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.16rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* fotky dostávají jemný teplý nádech, aby seděly do zlaté hodinky —
   sotva znatelný, žádný instagramový filtr */
.uvod__media img,
.scena__foto img,
.snimek img,
.ubytovani__media img,
.rsvp__media img{
  filter: saturate(1.04) sepia(.06);
}

/* ---------- opakující se prvky ---------- */
.stitek{
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--zlata);
  text-indent: .38em;
}
.stitek--stred{ text-align:center; }

.nadpis{
  font-weight: 300;
  font-size: clamp(2.1rem, 5.5vw, 3.7rem);
  line-height: 1.12;
  letter-spacing: .01em;
  margin-top: .7rem;
  text-wrap: balance;
}
.podnadpis{
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--inkoust);
}
.perex{
  color: var(--tlum);
  max-width: 54ch;
  margin-top: 1rem;
}
.uvodni-blok{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4.5rem, 11vh, 8rem) 7vw clamp(2rem, 5vh, 3.5rem);
}

.tlacitko{
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 1.15em 2.8em;
  background: var(--zlata-svetla);
  /* tmavý text — bílá na světlém zlatě měla jen ~2,4:1 kontrastu */
  color: #2F2A22;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.tlacitko:hover{ background: var(--inkoust); color: var(--papir); }
.tlacitko--obrys{
  background: none;
  color: var(--inkoust);
  border: 1px solid var(--zlata-svetla);
}
.tlacitko--obrys:hover{ border-color: var(--inkoust); color: var(--papir); background: var(--inkoust); }
.tlacitko--velke{ font-size: .82rem; padding: 1.4em 3.6em; }
:focus-visible{ outline: 2px solid var(--zlata); outline-offset: 3px; }

/* ---------- úvodní opona ---------- */
.opona{
  position: fixed; inset: 0; z-index: 200;
  background: var(--papir);
  display: flex; align-items: center; justify-content: center;
}
/* Pojistka: kdyby se skript.js vůbec nenačetl (špatná cesta, CSP,
   spadlé připojení), opona by jinak navždy zakryla celý web. Skript
   si hned po spuštění nasadí .js-ok a tím tuhle záchranu vypne. */
html:not(.js-ok) .opona{
  animation: oponaPojistka .6s linear 3.5s forwards;
}
@keyframes oponaPojistka{
  to{ opacity: 0; visibility: hidden; pointer-events: none; }
}
/* podpis varianty: jména na oponě kurzívou, malými písmeny,
   pod nimi tenká zlatá linka */
.opona__text{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem);
  letter-spacing: .12em;
  text-indent: .12em;
  text-transform: lowercase;
  color: var(--inkoust);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--zlata);
}

/* ---------- hlavička ---------- */
.hlava{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 7vw;
  transition: background .4s ease, padding .4s ease, backdrop-filter .4s ease;
}
/* po odjetí z úvodu: teplé mléčné sklo */
.hlava.je-tmava{
  background: rgba(247,240,227,.9);
  backdrop-filter: blur(10px);
  padding-top: .7rem; padding-bottom: .7rem;
}
/* Písmo v hlavičce roste s šířkou okna — na velkém monitoru bylo
   pevných .7rem sotva čitelných, na půlce obrazovky sedělo. */
.hlava__znak{
  font-size: clamp(1.05rem, .82rem + .38vw, 1.45rem);
  letter-spacing: .26em;
  text-indent: .26em;
}
.hlava__menu{ display: flex; align-items: center; gap: clamp(1.4rem, 1vw + .9rem, 2.4rem); }
.hlava__menu a{
  font-family: var(--sans);
  font-size: clamp(.72rem, .5rem + .38vw, .95rem);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--inkoust);
  opacity: .88;
  transition: opacity .25s ease, color .25s ease;
}
.hlava__menu a:hover{ opacity: 1; color: var(--zlata); }
.hlava__cta{
  border: 1px solid var(--zlata-svetla);
  padding: .7em 1.5em;
  opacity: 1 !important;
}
.hlava__cta:hover{ border-color: var(--zlata); }
.hlava__hamburger{ display: none; flex-direction: column; gap: 6px; padding: 10px; }
.hlava__hamburger span{
  display: block; width: 24px; height: 1px;
  background: var(--inkoust);
  transition: transform .3s ease, opacity .3s ease;
}
.hlava.menu-otevrene .hlava__hamburger span:first-child{ transform: translateY(3.5px) rotate(45deg); }
.hlava.menu-otevrene .hlava__hamburger span:last-child{ transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- úvod ---------- */
.uvod{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.uvod__media{ position: absolute; inset: 0; }
.uvod__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
/* smetanový přechod, aby text nad fotkou držel kontrast */
.uvod::after{
  content: '';
  position: absolute; inset: 0;
  background:
    /* závoj musí držet >= .9 až po horní okraj jmen (sahají do ~2/3
       výšky okna) — fotka naplno prosvítá jen v horní čtvrtině */
    /* Fotka se ztmavuje, ne zesvětluje — pod krémovým závojem nebylo
       skoro nic vidět. Text na ní je proto krémový (viz „text nad
       fotkami" níže). Spodní okraj zůstává krémový, aby úvod plynule
       přešel do stránky. */
    linear-gradient(to top, #F7F0E3 0%, rgba(247,240,227,.62) 5%, rgba(36,28,20,.62) 13%, rgba(36,28,20,.78) 30%, rgba(36,28,20,.7) 62%, rgba(36,28,20,.44) 86%, rgba(36,28,20,.56) 100%);
}
.uvod__obsah{
  position: relative; z-index: 1;
  width: 100%;
  padding: 0 7vw clamp(5rem, 14vh, 9rem);
}
.uvod__jmena{
  font-weight: 300;
  font-size: clamp(2.9rem, 11vw, 8.5rem);
  line-height: .98;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 1.1rem 0 1.6rem;
}
.uvod__jmena .radek{ display: block; }
.uvod__amp{
  display: block;
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  font-size: .34em;
  letter-spacing: 0;
  color: var(--zlata);
  margin: .1em 0 .06em .06em;
}
/* datum kurzívou — typografický podpis zlaté hodinky */
.uvod__datum{
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  letter-spacing: .06em;
}
.uvod__misto{
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tlum);
  margin-top: .7rem;
}
.uvod__sipka{
  position: absolute; z-index: 1;
  bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: 24px; height: 40px;
  border: 1px solid rgba(64,58,51,.35);
  border-radius: 12px;
}
.uvod__sipka span{
  position: absolute; top: 7px; left: 50%;
  width: 3px; height: 7px;
  background: var(--zlata);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: tecka 1.7s infinite;
}
@keyframes tecka{
  0%{ opacity:0; transform: translate(-50%,0); }
  40%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%,15px); }
}

/* ---------- velká věta ---------- */
.veta{
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4rem, 11vh, 7rem) 7vw;
}
.veta__text{
  font-style: italic;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  line-height: 1.38;
  font-weight: 300;
  text-wrap: balance;
}
.anim .slovo{ opacity: .17; display: inline-block; }

/* ---------- příběh jako jedna scéna ----------
   Fotky nejsou v jednotlivých kapitolách, ale tvoří jednu plochu,
   která drží na obrazovce. Při čtení se mezi sebou prolínají a texty
   přes ně scrollují. Fotky se tak nikde nepotkají hranou — proto
   mezi nimi nemůže vzniknout žádný šev ani pruh. */
.scena{ position: relative; }
.scena__pozadi{
  /* bez JavaScriptu drží fotka celou scénu jako obyčejné pozadí */
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.anim .scena__pozadi{
  position: sticky; top: 0;
  height: 100svh;
}
.scena__foto{ position: absolute; inset: 0; }
.scena__foto img{
  width: 100%; height: 100%;
  object-fit: cover;
}
/* bez animací by se překrývaly — vidět má být jen ta první */
.scena__foto:not([data-prvni]){ opacity: 0; }
.anim .scena__foto{ will-change: opacity; }

/* Jediné ztmavení přes celou scénu. Tmavší u obou bočních okrajů,
   protože text se střídá vlevo a vpravo; střed nechává fotku dýchat.
   Horní a dolní hrana jen tence ztmavne — krémové rozplynutí tu dřív
   vybělovalo fotku a ukusovalo text kapitoly. */
.scena__pozadi::after{
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(28,21,15,.92) 0%, rgba(28,21,15,.5) 3%, rgba(28,21,15,0) 7%),
    linear-gradient(to top,    rgba(28,21,15,.92) 0%, rgba(28,21,15,.5) 3%, rgba(28,21,15,0) 7%),
    linear-gradient(90deg,
      rgba(36,28,20,.88) 0%, rgba(36,28,20,.62) 26%,
      rgba(36,28,20,.46) 50%,
      rgba(36,28,20,.62) 74%, rgba(36,28,20,.88) 100%);
}

.scena__kapitoly{ position: relative; z-index: 1; }
/* texty se posunou přes fotku, která nad nimi „drží" */
.anim .scena__kapitoly{ margin-top: -100svh; }

.kapitola{
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 6rem 7vw;
}
.kapitola__text{
  position: relative; z-index: 1;
  max-width: 34rem;
}
.kapitola--vpravo .kapitola__text{ margin-left: auto; }
.kapitola__rok{
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--zlata-svetla);
  margin-bottom: .6rem;
}
.kapitola__text h3{
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.15;
  margin-bottom: .8rem;
}
.kapitola__text p{ color: rgba(64,58,51,.88); }

/* ---------- pás fotek ---------- */
.pas{ padding: clamp(4rem, 10vh, 7rem) 0; }
.pas__vnitrek{ display: flex; flex-direction: column; gap: 2rem; }
.pas__okno{
  overflow-x: auto;           /* bez JS se pás posouvá prstem */
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.pas__drat{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  width: max-content;
  padding: 0 7vw;
}
.snimek{ flex: 0 0 auto; width: min(62vw, 300px); }
.snimek--siroky{ width: min(82vw, 430px); }
.snimek img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  box-shadow: 0 18px 50px rgba(64,58,51,.12);   /* teplý stín — na světlém podkladu fotky lehce plavou */
}
.snimek--siroky img{ aspect-ratio: 4 / 3; }
.snimek figcaption{
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tlum);
  margin-top: .9rem;
}
/* s animacemi pás posouvá scroll, vlastní posuvník by se pral */
.anim .pas{ overflow: hidden; padding: 0; }
.anim .pas__okno{ overflow: visible; }
.anim .pas__vnitrek{
  min-height: 100svh;
  justify-content: center;
  padding-top: 3.5rem;
}
.anim .pas__drat{ will-change: transform; }

/* ---------- důležité informace ---------- */
.info{ padding-bottom: clamp(4rem, 10vh, 7rem); }
.misto{
  text-align: center;
  padding: 0 7vw clamp(3rem, 7vh, 5rem);
}
.misto__nazev{
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.15;
}
/* datum kurzívou — stejný podpis jako v úvodu */
.misto__datum{
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--inkoust);
  margin-top: .2rem;
}
.misto__adresa{
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--tlum);
  margin: .8rem 0 1.8rem;
}
.harmonogram{
  list-style: none;
  /* stejná šířka jako nadpis sekce — jinak seznam vypadá zbytečně úzký
     a odsazený od zbytku stránky */
  max-width: 1180px;
  margin: 2.2rem auto 0;
  padding: 0 7vw;
}
.cas{
  display: flex;
  align-items: baseline;
  gap: clamp(1.2rem, 4vw, 3rem);
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--linka);
}
.cas__hodina{
  flex: 0 0 auto;
  min-width: 4.6rem;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  color: var(--zlata);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cas__popis{ font-size: 1.1rem; }

/* ---------- ubytování ---------- */
.ubytovani{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 78svh;
}
.ubytovani__media{ position: relative; overflow: hidden; }
/* i tady se okraje rozplynou, ať fotka nekončí ostrou hranou */
.ubytovani__media::after{
  content: '';
  position: absolute; inset: 0;
  background: var(--kraj);
  pointer-events: none;
}
.ubytovani__media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ubytovani__text{
  background: var(--plocha);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(2rem, 6vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.ubytovani__text p{ color: rgba(64,58,51,.85); }
.ubytovani__zvyraz{
  color: var(--zlata) !important;
  font-size: 1.25rem;
  font-style: italic;
  margin: 1.1rem 0 .9rem;
}
.odrazky{ list-style: none; margin-top: 1.4rem; }
.odrazky li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55rem;
  color: rgba(64,58,51,.85);
  font-size: 1.04rem;
}
.odrazky li::before{
  content: '';
  position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px;
  border: 1px solid var(--zlata);
  transform: rotate(45deg);
}

/* ---------- otázky ---------- */
.faq__seznam{
  /* zarovnané na stejnou šířku jako nadpis sekce */
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 7vw clamp(4rem, 10vh, 7rem);
}
.faq__seznam details{ border-bottom: 1px solid var(--linka); }
.faq__seznam summary{
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.4rem;
  padding: 1.35rem 0;
  font-size: 1.25rem;
  transition: color .25s ease;
}
.faq__seznam summary::-webkit-details-marker{ display: none; }
.faq__seznam summary:hover{ color: var(--zlata); }
.faq__seznam summary::after{
  content: '+';
  color: var(--zlata);
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  transition: rotate .3s ease;
}
.faq__seznam details[open] summary::after{ rotate: 45deg; }
.faq__seznam details p{
  color: var(--tlum);
  padding-bottom: 1.4rem;
  max-width: 58ch;
}

/* ---------- potvrzení účasti ---------- */
.rsvp{
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 6rem 7vw;
}
.rsvp__media{ position: absolute; inset: 0; }
.rsvp__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
/* smetanový závoj — text uprostřed potřebuje skoro plné krytí */
.rsvp::after{
  content: '';
  position: absolute; inset: 0;
  background:
    var(--kraj),
    linear-gradient(rgba(36,28,20,.78), rgba(36,28,20,.78));
}
.rsvp__obsah{ position: relative; z-index: 1; }
.rsvp__lead{ color: var(--tlum); margin: .9rem 0 2rem; }
.rsvp__pozn{
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--tlum);
  margin-top: 1.6rem;
}

/* ---------- pata ---------- */
/* pata je jediná tmavá plocha varianty — teplý inkoust se smetanovým textem */
.pata{
  text-align: center;
  padding: clamp(3.5rem, 9vh, 6rem) 7vw;
  background: var(--inkoust);
  color: var(--papir);
}
.pata__jmena{
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
}
.pata__datum{
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,240,227,.62);
  margin-top: 1rem;
}
.pata__pozn{ color: var(--zlata-svetla); margin-top: .8rem; font-style: italic; }

/* ---------- responzivita ---------- */
@media (max-width: 900px){
  /* Mléčné sklo tady musí pryč: backdrop-filter dělá z hlavičky
     „vztažný rám" pro position:fixed potomky, takže vysunuté menu
     by se smrsklo do proužku vysokého jako hlavička a nešlo by použít.
     Na telefonu je krémová při 90 % stejně skoro neprůhledná. */
  .hlava.je-tmava{ backdrop-filter: none; background: rgba(247,240,227,.97); }

  /* tlačítko musí ležet NAD vysunutým panelem — jinak by ho fixed
     panel překryl a menu by nešlo zavřít křížkem */
  .hlava__hamburger{
    display: flex;
    position: relative; z-index: 2;
    /* pohodlný dotykový cíl — dva tenké proužky samy o sobě nestačí */
    min-height: 44px;
    align-items: center; justify-content: center;
  }
  /* bez JavaScriptu je hamburger mrtvý — schovat, ať nemate */
  html:not(.js-ok) .hlava__hamburger{ display: none; }
  .hlava__menu{
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    background: var(--plocha);
    flex-direction: column;
    justify-content: center;
    gap: 2.2rem;
    z-index: 1;
    transform: translateX(100%);
    /* zavřené menu musí zmizet i z tab-orderu — visibility se schová
       až po dojetí animace, při otevření se ukáže hned */
    visibility: hidden;
    transition: transform .4s ease, visibility 0s .4s;
  }
  .hlava__menu.je-otevrene{
    transform: none;
    visibility: visible;
    transition: transform .4s ease, visibility 0s;
  }
  /* odkazy v panelu jako pohodlné dotykové cíle */
  .hlava__menu a{
    font-size: .82rem;
    min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }

  .ubytovani{ grid-template-columns: 1fr; }
  .ubytovani__media{ height: 52svh; }

  .kapitola{ align-items: flex-end; padding-bottom: 4.5rem; }
  .kapitola--vpravo .kapitola__text{ margin-left: 0; }
}

/* ---------- vypnutý pohyb ---------- */
@media (prefers-reduced-motion: reduce){
  .opona{ display: none; }
  .uvod__sipka span{ animation: none; }
}

/* =====================================================
   DOPLNĚNO PRO OSTRÝ WEB
   Nad původní vzhled jen přibyl přepínač jazyka a okno
   s formulářem. Používají stejné proměnné i typografii
   jako zbytek zlaté hodinky — žádné nové barvy.
   ===================================================== */

/* ---------- přepínač jazyka ---------- */
/* Menu se drží vpravo i teď, když za ním stojí přepínač. */
.hlava__menu{ margin-left: auto; }

.jazyk{
  display: flex;
  align-items: center;
  gap: .15rem;
  font-family: var(--sans);
}
.jazyk__tlacitko{
  /* opticky drobné jako zbytek menu, ale terč pro prst má 44 px */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(.72rem, .5rem + .38vw, .95rem);
  letter-spacing: .17em;
  text-indent: .17em;
  text-transform: uppercase;
  color: var(--inkoust);
  opacity: .62;
  transition: opacity .25s ease, color .25s ease;
}
.jazyk__tlacitko:hover{ opacity: 1; color: var(--zlata); }
.jazyk__tlacitko.je-aktivni{ opacity: 1; color: var(--zlata); }
.jazyk__oddel{
  font-size: .7rem;
  color: var(--tlum);
  opacity: .45;
}

/* ---------- okno s formulářem ---------- */
.okno{
  width: min(92vw, 660px);
  max-height: 88svh;
  margin: auto;                 /* na střed obrazovky */
  padding: 0;
  border: 1px solid var(--zlata-svetla);
  background: var(--papir);
  color: var(--inkoust);
  box-shadow: 0 30px 90px rgba(64,58,51,.3);
}
.okno::backdrop{
  background: rgba(64,58,51,.55);
  backdrop-filter: blur(3px);
}
/* Prohlížeč, který <dialog> neumí, by formulář ukázal natrvalo. */
.okno:not([open]){ display: none; }
.okno__vnitrek{
  /* schválně bez position:relative — křížek se pak ukotví k oknu
     a ne k rolovanému obsahu, takže při posunu dolů neodjede pryč */
  overflow-y: auto;
  max-height: 88svh;
  padding: clamp(2.4rem, 6vw, 3.2rem) clamp(1.4rem, 5vw, 3rem) clamp(2rem, 5vw, 2.6rem);
}
.okno__nadpis{
  font-weight: 300;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  margin: .6rem 0 1.8rem;
}
.okno__zavrit{
  position: absolute;
  top: .5rem; right: .5rem;
  width: 44px; height: 44px;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tlum);
  transition: color .25s ease;
}
.okno__zavrit:hover{ color: var(--inkoust); }
/* pod otevřeným oknem se stránka nesmí hýbat */
html.okno-otevreno, html.okno-otevreno body{ overflow: hidden; }

/* ---------- formulář ---------- */
.formular > * + *{ margin-top: 1.15rem; }
.formular label{ display: block; }
/* Autorské `display:block` výše přebíjí prohlížečové [hidden]{display:none},
   takže bez tohohle by se ukázala všechna políčka na jména hostů naráz.
   formular.js schovává řádky přes vlastnost hidden — musí platit. */
.formular label[hidden],
.hoste [data-guest][hidden]{ display: none; }
/* popisky polí — stejný drobný verzálkový hlas jako .stitek */
.formular label > span,
.formular legend,
.hoste__nadpis{
  display: block;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: var(--tlum);
  margin-bottom: .55rem;
}
.formular input,
.formular select,
.formular textarea{
  width: 100%;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--inkoust);
  background: var(--plocha);
  border: 1px solid var(--linka);
  border-radius: 0;
  padding: .7em .85em;
  transition: border-color .25s ease;
}
.formular textarea{ resize: vertical; }
.formular input:hover,
.formular select:hover,
.formular textarea:hover{ border-color: var(--zlata-svetla); }
.formular input:focus,
.formular select:focus,
.formular textarea:focus{
  border-color: var(--zlata);
}
/* Zlatý rámeček sám o sobě je na kraji viditelnosti — při ovládání
   klávesnicí musí zůstat plnohodnotný obrys, jinak není poznat,
   ve kterém políčku uživatel právě je. */
.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible{
  outline: 2px solid var(--zlata);
  outline-offset: 2px;
}
.formular input::placeholder,
.formular textarea::placeholder{ color: var(--tlum); opacity: .7; }

.formular__radek{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}
.formular__radek > label{ margin-top: 0; }

/* jména hostů */
.hoste{ border-top: 1px solid var(--linka); padding-top: 1.15rem; }
.hoste label + label{ margin-top: .8rem; }

/* přepínače ano / ne */
.formular__volba{ border: none; }
.volba{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-right: 1.6rem;
  cursor: pointer;
}
.volba input{
  width: auto;
  min-width: 18px;
  padding: 0;
  accent-color: var(--zlata);
}
/* text u přepínače je normální věta, ne verzálkový popisek */
.formular .volba > span{
  display: inline;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  color: var(--inkoust);
  margin: 0;
}

.formular__pozn{
  font-size: 1rem;
  color: var(--tlum);
  border-left: 1px solid var(--zlata-svetla);
  padding-left: 1.1rem;
}
.formular__pozn strong{ font-weight: 500; color: var(--inkoust); }

.formular button[type="submit"]{ width: 100%; }

.formular__stav{
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .04em;
  line-height: 1.6;
  text-align: center;
  color: var(--tlum);
}
.formular__stav:empty{ display: none; }
.formular__stav.je-chyba{ color: #9B3B2F; }

/* Poděkování po odeslání — jediná věc, kterou má host v tu chvíli číst,
   takže dostane vlastní rámeček a velikost. Drobný řádek se v dlouhém
   formuláři ztrácel a na kratší obrazovce se ani celý nevešel. */
.formular__stav.je-ok{
  display: block;
  margin-top: 1.6rem;
  padding: clamp(1.4rem, 4vw, 2rem) clamp(1.2rem, 4vw, 2rem);
  border: 1px solid var(--zlata-svetla);
  background: rgba(194,163,97,.09);
}
.formular__stav-veta{
  display: block;
  /* serifové písmo jako nadpisy — poděkování patří ke stránce,
     ne k drobným popiskám formuláře */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--inkoust);
}
.formular__stav-pod{
  display: block;
  margin-top: .8rem;
  font-size: .8rem;
  line-height: 1.65;
  letter-spacing: .04em;
  color: var(--tlum);
  /* aby se dlouhá věta lámala po slovech a ne uprostřed */
  text-wrap: pretty;
}

/* ---------- responzivita doplňků ---------- */
@media (max-width: 900px){
  /* Přepínač zůstává v hlavičce vidět i bez otevření menu —
     proto musí ležet NAD vysunutým panelem, stejně jako hamburger. */
  .jazyk{
    margin-left: auto;
    position: relative;
    z-index: 2;
  }
  .formular__radek{ grid-template-columns: 1fr; }
}

/* =====================================================
   TEXT NAD FOTKAMI
   Fotoplochy (úvod, kapitoly příběhu, potvrzení účasti) se ztmavují,
   aby na nich bylo pořádně vidět, co je focené — krémový závoj je
   předtím skoro smazal. Text na nich proto musí být krémový;
   inkoustový by na tmavé fotce zanikl. Zbytek stránky zůstává světlý.

   Blok je záměrně až na konci: přepisuje barvy nastavené výš
   u jednotlivých prvků a musí vyhrát.
   ===================================================== */
.uvod__jmena,
.uvod__datum,
.kapitola__text h3,
.rsvp__obsah .nadpis{
  color: var(--papir);
}
.uvod__misto,
.kapitola__text p,
.rsvp__lead,
.rsvp__pozn{
  color: rgba(247,240,227,.84);
}
/* zlaté drobnosti musí být na tmavé fotce o stupeň světlejší */
.uvod .stitek,
.rsvp .stitek,
.uvod__amp{ color: var(--zlata-svetla); }
.kapitola__rok{ -webkit-text-stroke-color: var(--zlata-svetla); }
/* ukazatel rolování a jeho rámeček leží taky na fotce */
.uvod__sipka{ border-color: rgba(247,240,227,.45); }
.uvod__sipka span{ background: var(--zlata-svetla); }

/* ---------- hlavička nad tmavou fotkou ----------
   Úvod je teď ztmavená fotka, takže inkoustové menu na ní zaniklo.
   Dokud hlavička nemá krémové sklo (tj. jsme nahoře nad fotkou),
   musí být celá světlá; jakmile sklo dostane, text zase ztmavne. */
html.anim .hlava:not(.je-tmava) .hlava__znak,
html.anim .hlava:not(.je-tmava) .hlava__menu a,
html.anim .hlava:not(.je-tmava) .jazyk__tlacitko{
  color: var(--papir);
}
html.anim .hlava:not(.je-tmava) .hlava__menu a{ opacity: .92; }
/* Zlatá se na fotce ztrácí, proto se zvolený jazyk pozná krémovou
   v plné sytosti a linkou pod sebou, ne barvou. */
html.anim .hlava:not(.je-tmava) .jazyk__tlacitko.je-aktivni{
  color: var(--papir);
  opacity: 1;
  box-shadow: inset 0 -1px 0 var(--zlata-svetla);
}
html.anim .hlava:not(.je-tmava) .jazyk__tlacitko:hover,
html.anim .hlava:not(.je-tmava) .hlava__menu a:hover{ color: var(--zlata-svetla); opacity: 1; }
html.anim .hlava:not(.je-tmava) .jazyk__oddel{ color: var(--papir); }
html.anim .hlava:not(.je-tmava) .hlava__cta{ border-color: rgba(247,240,227,.55); }
html.anim .hlava:not(.je-tmava) .hlava__cta:hover{ border-color: var(--zlata-svetla); }
html.anim .hlava:not(.je-tmava) .hlava__hamburger span{ background: var(--papir); }
/* aby drobné písmo na fotce nezanikalo, dostane jemný stín */
html.anim .hlava:not(.je-tmava) .hlava__znak,
html.anim .hlava:not(.je-tmava) .hlava__menu a,
html.anim .hlava:not(.je-tmava) .jazyk__tlacitko{
  text-shadow: 0 1px 10px rgba(20,15,10,.55);
}

/* ---------- výjimka: vysunuté menu na telefonu ----------
   Pravidla výš dělají text v hlavičce krémový, dokud jsme nahoře
   nad tmavou fotkou. Jenže na telefonu se odkazy přestěhují do
   panelu, který má vlastní světlé pozadí — krémová na krémové je
   neviditelná. Odkazy v otevřeném panelu proto zůstávají inkoustové
   bez ohledu na to, kde na stránce jsme.

   Znak, přepínač jazyka ani hamburger sem nepatří: ty zůstávají
   v liště nad fotkou, a tam je krémová správně. */
@media (max-width: 900px){
  /* !important schválně: tohle je poslední slovo o čitelnosti menu
     a nesmí ho přebít nic z pravidel „nad fotkou" výš. Kdyby prohrálo,
     zůstane krémový text na krémovém panelu a menu je neviditelné —
     přesně to se stalo na telefonu 8. 8. 2026. */
  .hlava__menu.je-otevrene a{
    color: var(--inkoust) !important;
    opacity: .88 !important;
    text-shadow: none !important;
  }
  .hlava__menu.je-otevrene a:hover{
    color: var(--zlata) !important;
    opacity: 1 !important;
  }
  .hlava__menu.je-otevrene .hlava__cta{
    border-color: var(--zlata-svetla) !important;
    opacity: 1 !important;
  }

  /* Přepínač jazyka a hamburger zůstávají v liště, ale vysunutý panel
     jim podjede pod nohy — leží na něm, ne nad fotkou. Krémová, která
     je správně na fotce, je na krémovém panelu neviditelná, takže
     s otevřeným menu musí zčernat taky. Znak „Z & L" ne: ten je vlevo
     a panel pod něj nesahá. */
  .hlava.menu-otevrene .jazyk__tlacitko,
  .hlava.menu-otevrene .jazyk__oddel{
    color: var(--inkoust) !important;
    text-shadow: none !important;
  }
  .hlava.menu-otevrene .jazyk__tlacitko.je-aktivni{
    box-shadow: inset 0 -1px 0 var(--zlata) !important;
  }
  .hlava.menu-otevrene .hlava__hamburger span{
    background: var(--inkoust) !important;
  }
}

/* ---------- vystředěné „Důležité informace" ----------
   Obsah téhle sekce (místo konání, datum, adresa, tlačítko do map
   i podnadpis Harmonogram) je celý na střed, takže nadpis zarovnaný
   doleva z toho vyčníval. */
#info .uvodni-blok{ text-align: center; }
#info .uvodni-blok .perex{ margin-left: auto; margin-right: auto; }

/* ---------- hlavička nad fotkou: o stupeň výraznější ---------- */
html.anim .hlava:not(.je-tmava) .hlava__menu a{ opacity: 1; }
html.anim .hlava:not(.je-tmava) .jazyk__tlacitko{ opacity: .8; }

/* ---------- výběr pokoje v přihlášce ----------
   Blok se ukáže, jen když host zvolí, že chce přespat.
   Odsazený proužek ho vizuálně sváže s otázkou nad ním. */
.pokoje{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--zlata-svetla);
}
.pokoje[hidden]{ display: none; }
/* Stejný hlas jako .formular__napoveda — poznámka, ne druhý řádek obsahu. */
.pokoje__pozn{
  font-size: .85rem;
  line-height: 1.65;
  color: var(--tlum);
  font-style: italic;
}

/* ---------- pás fotek: hloubka ----------
   Rám se chová jako okno — fotka uvnitř se posouvá opačným směrem
   než pás. Rám tedy musí přebytek fotky oříznout. */
.snimek{ overflow: hidden; }
/* Skript píše měřítko, náklon a průhlednost napevno — plynulost
   obstará tenhle přechod, takže se hodnoty pěkně dotahují. */
.snimek--zivy{
  will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.22,.7,.3,1), opacity .55s ease-out;
}
.snimek--zivy img{
  will-change: transform;
  transition: transform .65s cubic-bezier(.22,.7,.3,1);
  /* základní reset dává obrázkům max-width:100 %, což by fotku
     nepustilo přes okraj rámu a uhýbání by nebylo vidět */
  max-width: none;
}
@media (prefers-reduced-motion: reduce){
  .snimek--zivy, .snimek--zivy img{ transition: none; }
}
/* Na dotykovém zařízení přechod naopak vadí. Plynulé rolování (Lenis)
   se prstu schválně nechytá, takže hodnoty tam nepřicházejí po snímcích,
   ale v nepravidelných dávkách — každá dávka rozjede nové dotahování,
   předchozí se přeruší v půlce a snímky se viditelně třepou.
   Bez přechodu se hodnoty píšou rovnou; o plynulost se stará to,
   že se počítají z reálné polohy každý snímek (viz skript.js). */
@media (hover: none) and (pointer: coarse){
  .snimek--zivy, .snimek--zivy img{ transition: none; }
}
/* popiska se zvedne, když je snímek uprostřed */
.snimek figcaption{ transition: color .4s ease; }

/* ---------- drobná nápověda pod dvojicí polí ---------- */
/* Poznámka pod políčkem. Dřív měla .95rem a zápornou mezeru nahoře,
   takže se lepila na rámeček a velikostí skoro doháněla text v poli —
   četla se jako další řádek obsahu, ne jako vysvětlivka. */
.formular__napoveda{
  /* POZOR: tohle přebíjí `.formular > * + *`, ne že by se k němu
     přičítalo — původní -.4rem proto znamenalo, že se text lepil
     rovnou na rámeček. Chceme míň než mezi poli (1.15rem), ale
     zřetelnou mezeru. */
  margin-top: .5rem;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--tlum);
  font-style: italic;
}

/* =====================================================
   OPRAVY PO DIAGNOSTICE
   ===================================================== */

/* 1) Hlavička bez animační vrstvy (vypnutý pohyb / bez JS).
   Světlé menu výš platí jen pod html.anim, kde se .je-tmava
   přepíná. Ve statické verzi by menu zůstalo krémové na krémové
   — proto tu hlavička dostane mléčné sklo natrvalo. */
html:not(.anim) .hlava{
  background: rgba(247,240,227,.97);
  padding-top: .7rem; padding-bottom: .7rem;
}

/* 2) Statická verze příběhu: bez připnuté scény by se jedna fotka
   roztáhla přes čtyři obrazovky. Kapitoly proto nemusí být přes
   celou výšku — scéna se zkrátí a fotka zůstane v rozumném výřezu. */
html:not(.anim) .kapitola{
  min-height: 0;
  padding: clamp(3rem, 8vh, 5rem) 7vw;
}

/* 3) Hlášky formuláře musí zůstat ve stromu pro čtečky obrazovky.
   display:none je z něj vyřadí a oznámení se nikdy nepřečte. */
.formular__stav:empty{ display: block; margin: 0; min-height: 0; }

/* 4) Zavírací křížek patří k oknu, ne k rolovanému obsahu —
   jinak při odrolování dolů odjede z dosahu. */
.okno{ position: relative; }
.okno__zavrit{ position: absolute; z-index: 2; }

/* 5) Zlatá pro drobný text. #A8863F má na krémové jen 3,0:1,
   což je pod hranicí čitelnosti. Tenhle odstín má 5,3:1;
   původní zůstává pro linky, ikony a velké číslice časů. */
:root{ --zlata-text: #7A5F22; }
.stitek,
.formular__stav.je-ok,
.uvod__datum,
.misto__datum{ color: var(--zlata-text); }
html.anim .hlava:not(.je-tmava) .stitek{ color: var(--zlata-svetla); }
.uvod .stitek,
.rsvp .stitek{ color: var(--zlata-svetla); }

/* 6) Náznak v polích formuláře byl na 2,7:1 — sotva čitelný. */
.formular input::placeholder,
.formular textarea::placeholder{ color: #5F5850; opacity: 1; }

/* 7) Nezvolený jazyk měl 3,5:1. Volba se pozná barvou, ne průhledností. */
.jazyk__tlacitko{ color: var(--tlum); opacity: 1; }
.jazyk__tlacitko:hover,
.jazyk__tlacitko.je-aktivni{ color: var(--zlata-text); opacity: 1; }

/* 8) Obrys při ovládání klávesnicí musí být vidět i na fotce:
   světlé jádro pro tmavé plochy, tmavá svatozář pro světlé. */
:focus-visible{
  outline: 2px solid var(--papir);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(36,28,20,.85);
}

/* 9) Rozostření skla za pevnou hlavičkou se překreslovalo při každém
   posunu. Krémová na 97 % vypadá stejně a nic nestojí. */
.hlava.je-tmava{ backdrop-filter: none; background: rgba(247,240,227,.97); }

/* 10) Trvalé will-change na čtyřech fotkách přes celou obrazovku
   drží desítky MB textur po celou návštěvu. Skript si ho zapne
   jen na dobu prolnutí. */
.anim .scena__foto{ will-change: auto; }

/* 11) Fotka ubytování bez efektů — teplý filtr a rozplývající se
   okraje vedle textu tvořily ostrý šev. Prostě fotka. */
.ubytovani__media img{ filter: none; }
.ubytovani__media::after{ content: none; }

/* 12) Potvrzení účasti navazuje na tmavou patku, ne na krémovou stránku.
   Dolní hrana se proto stmívá do barvy patky — dřív tam mezi fotkou
   a patkou svítil krémový pruh jako šev. */
.rsvp::after{
  background:
    var(--krem-nahore),
    linear-gradient(to top, var(--inkoust) 0%, rgba(64,58,51,.82) 4%, rgba(64,58,51,0) 12%),
    linear-gradient(rgba(36,28,20,.78), rgba(36,28,20,.78));
}

/* 13) Patka je jen podpis, ne další sekce — nižší a sevřenější. */
.pata{ padding: clamp(2rem, 4.5vh, 2.8rem) 7vw clamp(1.8rem, 4vh, 2.4rem); }
.pata__jmena{ font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.pata__datum{ margin-top: .55rem; }
.pata__pozn{ margin-top: .45rem; }

/* 14) „Přijedete?" — fotka bez rozplývání na okrajích.
   Zůstává jen rovnoměrné ztmavení kvůli čitelnosti textu; nahoře
   i dole má fotka čistou hranu, takže se nerozmazává do přechodu. */
.rsvp::after{
  background: linear-gradient(rgba(36,28,20,.72), rgba(36,28,20,.72));
}

/* 15) Patka ještě sevřenější — je to podpis, ne sekce. */
.pata{ padding: clamp(1.3rem, 3vh, 1.8rem) 7vw clamp(1.2rem, 2.6vh, 1.6rem); }
.pata__jmena{ font-size: clamp(1.02rem, 2.2vw, 1.28rem); letter-spacing: .2em; text-indent: .2em; }
.pata__datum{ margin-top: .35rem; }
.pata__pozn{ margin-top: .3rem; }

/* 16) Patka na minimum — jen tolik místa, kolik zabere text. */
.pata{ padding: clamp(.9rem, 2vh, 1.2rem) 7vw clamp(.85rem, 1.8vh, 1.1rem); }
.pata__jmena{ font-size: clamp(.95rem, 1.9vw, 1.12rem); line-height: 1.3; }
.pata__datum{ margin-top: .25rem; }
.pata__pozn{ margin-top: .2rem; line-height: 1.4; }

/* =====================================================
   ÚPRAVY PO PŘIPOMÍNKÁCH
   ===================================================== */

/* 17) Podpis leží na fotce místo samostatného tmavého pruhu —
   nepřerušuje stránku, ale zůstává. */
.rsvp{ padding-bottom: clamp(5.5rem, 13vh, 8rem); }
.pata{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  background: none;
  color: var(--papir);
  padding: 0 7vw clamp(1.1rem, 2.6vh, 1.6rem);
  text-shadow: 0 1px 12px rgba(20,15,10,.5);
}
.pata__datum{ color: rgba(247,240,227,.8); }
.pata__pozn{ color: var(--zlata-svetla); }

/* 18) Odpověď v otázkách má využít celou šířku řádku — dřív se lámala
   v úzkém sloupci, zatímco linka pod ní šla přes celou stránku. */
.faq__seznam details p{ max-width: none; }

/* 19) Přepínače: popisek patří VEDLE kolečka, ne pod něj.
   Dědil pravidlo pro popisky polí, které je dělá blokové. */
.volba > span{
  display: inline;
  font-family: var(--serif);
  font-size: 1.06rem;
  letter-spacing: normal;
  text-indent: 0;
  text-transform: none;
  color: var(--inkoust);
  margin-bottom: 0;
}
/* a všechny volby jedné otázky vedle sebe */
.formular__volba{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem 1.5rem;
}
.formular__volba legend{ flex: 1 0 100%; margin-bottom: .25rem; }
.volba{ margin-right: 0; }

/* 20) Odkaz na fotky pokojů — host si je může projít a podle toho vybrat */
.ubytovani__odkaz{ margin-top: 1.2rem; }
.ubytovani__odkaz a,
.pokoje__odkaz a{
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--zlata-text);
  border-bottom: 1px solid var(--zlata-svetla);
  padding-bottom: .2em;
  transition: color .25s ease, border-color .25s ease;
}
.ubytovani__odkaz a:hover,
.pokoje__odkaz a:hover{ color: var(--inkoust); border-color: var(--inkoust); }
.pokoje__odkaz{ margin-top: -.3rem; }

/* Oba odkazy stojí samy v odstavci, takže se na ně na telefonu míří
   prstem jako na tlačítko — ale vysoké byly jen 18 px. Doplněk k výšce
   jde nahoru, aby podtržení zůstalo těsně pod textem. */
@media (hover: none) and (pointer: coarse){
  .ubytovani__odkaz a,
  .pokoje__odkaz a{
    display: inline-block;
    padding-top: 1.1rem;
  }
}

/* 21) Tučné zvýraznění musí být znát i v tenkém řezu písma —
   výchozí bold se v light textu skoro ztrácel. */
strong{
  font-weight: 600;
  color: var(--inkoust);
}
.odrazky strong,
.ubytovani__text strong{ color: var(--inkoust); }

/* 22) Výběr počtu osob a čísla stolu jsou krátké hodnoty — nepotřebují
   půl řádku. Uvolněné místo dostane e-mail a jména, kde se to hodí. */
.formular__radek--uzky{ grid-template-columns: minmax(6.5rem, .32fr) 1fr; }
@media (max-width: 620px){
  .formular__radek--uzky{ grid-template-columns: 1fr; }
}

/* 23) Popisky polí mají různou délku, takže se dvojice v řádku
   rozjížděly. Pole se proto srovnávají na spodní hranu a úzký
   sloupec je dost široký, aby se popisek nezalomil. */
.formular__radek{ align-items: end; }
.formular__radek--uzky{ grid-template-columns: minmax(8.5rem, .34fr) 1fr; }

/* 24) Ukazatel odrolování — tenká linka u spodní hrany, která se plní,
   jak čteš. Záměrně nenápadná: 2 px, zlatá na sotva znatelné stopě.
   Bez JavaScriptu se neplní, proto se vůbec neukazuje. */
.postup{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(64,58,51,.1);
  z-index: 90;
  pointer-events: none;
}
.postup i{
  display: block;
  height: 100%;
  background: var(--zlata-svetla);
  transform: scaleX(0);
  transform-origin: left center;
}
html:not(.js-ok) .postup{ display: none; }