/* ---------------------------------------------------------------------------
   .forejt — paleta
   Scéna je svítání nad horami, takže je tmavá záměrně a v obou režimech stejná;
   světlá varianta by z ní udělala něco jiného. Proto tu není @media
   prefers-color-scheme — barvy se vypisují napevno, ne že by se na to zapomnělo.
   Teplá žluta nese světlo (akcenty, grading fotky), bordó a tmavá hnědá nesou
   hmotu (podklad, ztmavení, stíny).
   --------------------------------------------------------------------------- */
:root {
  --bordo-deep: #2a0c17;
  --bordo:      #4d1a1f;
  --brown:      #8f3d1c;
  --amber:      #d4842c;
  --yellow:     #f6c766;
  --yellow-hot: #ffe08a;
  --cream:      #fdf6e8;
  --cream-dim:  rgba(253, 246, 232, 0.62);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bordo-deep);
  color: var(--cream);
  font: 400 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- grafický podklad ----------------------------------------------------- */

/* Fixed, ne absolute: na mobilu se při skrytí adresního řádku mění výška
   viewportu a podklad by sebou při scrollu cukal.
   Barevný přechod pod fotkou je pojistka — drží scénu, dokud se fotka nenačte,
   a když soubor chybí úplně, stránka pořád vypadá jako záměr. */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom,
      var(--bordo-deep) 0%,
      var(--bordo) 34%,
      var(--brown) 62%,
      var(--amber) 85%,
      var(--yellow) 100%);
}

.shot {
  width: 100%;
  height: 100%;
  display: block;
  /* Snímek je široký (2400×1340), stránka na výšku okna. Těžiště kompozice
     drží obzor s jezerem v záběru i na vysokých oknech. */
  object-fit: cover;
  object-position: 50% 46%;
  /* Zdrojová fotka je modrá (soumrak), paleta webu je teplá. sepia ji převede
     do teplého tónu, hue-rotate posune k bordó, saturate vrátí šťávu, kterou
     sepia ubere. Dělá se to tady, ne v souboru — originál zůstane nedotčený
     a odstín jde měnit bez grafického editoru. */
  filter: sepia(0.74) saturate(1.5) hue-rotate(-12deg) contrast(1.06) brightness(0.88);
}

/* Barevný grading: fotku dotáhne do palety stránky (bordó ve stínech, teplá
   žluť ve světlech), aniž by se sahalo na zdrojový soubor. Když se odstín
   nesedne, mění se tady, ne v grafickém editoru. */
.grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(42, 12, 23, 0.55) 0%,
      rgba(77, 26, 31, 0.28) 38%,
      rgba(143, 61, 28, 0.30) 70%,
      rgba(212, 132, 44, 0.34) 100%);
  mix-blend-mode: multiply;
}

/* Druhá vrstva gradingu: vrátí do světel teplou žluť, kterou multiply ubral. */
.grade::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 68% 62%,
      rgba(255, 224, 138, 0.30) 0%,
      rgba(246, 199, 102, 0.12) 42%,
      rgba(246, 199, 102, 0) 72%);
  mix-blend-mode: soft-light;
}

/* Ztmavení pro čitelnost textu: shora a zdola, střed zůstává otevřený,
   ať scéna nezmizí pod plochou barvou. */
.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(26, 8, 16, 0.62) 0%,
      rgba(26, 8, 16, 0.18) 22%,
      rgba(26, 8, 16, 0.10) 52%,
      rgba(20, 8, 8, 0.55) 84%,
      rgba(20, 8, 8, 0.78) 100%);
}

/* --- hlavička ------------------------------------------------------------- */

.hd, .hero, .ft {
  position: relative;
  z-index: 2;
}

.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.25rem, 5vw, 3.5rem);
}

.logo {
  color: var(--cream);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(26, 8, 16, 0.6);
}

.logo-dot {
  color: var(--yellow);
  /* Tečka nese celou značku — dostane víc váhy, než by měla ve větě. */
  font-size: 1.35em;
  line-height: 0;
  margin-right: 0.02em;
}

.logo:hover .logo-dot,
.logo:focus-visible .logo-dot { color: var(--yellow-hot); }

/* Nativní <select>: rozbalovací seznam si kreslí systém, takže je čitelný
   i s 31 položkami a funguje na dotyku bez řádku JS navíc. */
.lang {
  appearance: none;
  -webkit-appearance: none;
  max-width: 11.5rem;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  border: 1px solid rgba(246, 199, 102, 0.35);
  border-radius: 999px;
  background-color: rgba(26, 8, 16, 0.45);
  /* Šipka jako data URI, ať CSP nemusí povolovat žádný cizí zdroj. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f6c766' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.7rem;
  color: var(--cream);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.lang:hover { border-color: rgba(246, 199, 102, 0.7); }

/* Rozbalený seznam dědí barvy z OS, ne z .lang — bez tohohle je na některých
   systémech světlý text na světlém pozadí. */
.lang option { background: #2a1412; color: #fdf6e8; }

/* --- heslo ---------------------------------------------------------------- */

/* Heslo sedí v pásu ukotveném k hornímu okraji okna a dosedá na jeho spodní
   hranu (`justify-content: flex-end`). Kdyby viselo shora, každý jazyk by
   končil jinde — kratší výš, delší níž — a stránka by se v jednotlivých
   jazycích rozjížděla. Takhle končí všechny stejně.

   Spodek pásu je na 33 % výšky okna: horní třetina, ne střed. Pod ním zbývá
   místo na menší text, který sem teprve přijde.

   Zásah do hor se tu ZÁMĚRNĚ neřeší. Dřív se šířka bloku dopočítávala tak,
   aby text minul vrcholy vlevo; to omezení padlo — nadpis smí do hor sáhnout.
   Kdyby se to mělo vrátit, je potřeba počítat s tím, že hřeben není vodorovný:
   naměřeno po 5 % šířky snímku je nejvýš vlevo (pás 20–30 % šířky = 36 % výšky)
   a nejníž uprostřed (pás 35–65 % = 48 %). */
.hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 33vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 clamp(1.25rem, 6vw, 4rem);
  /* Pás překrývá hlavičku, ale nesmí jí brát kliknutí. */
  pointer-events: none;
}

.slogan {
  pointer-events: auto;
  /* Zlom řádku je natvrdo v překladech (`\n`), tady se jen vykresluje. Nadpis
     je tak ve všech jazycích přesně dvouřádkový a dělí se na místě, které
     dává v daném jazyce smysl — ne tam, kam zrovna dopadne okraj bloku. */
  white-space: pre-line;
  /* Šířka nesmí být limitem: kdyby se do ní nejdelší řádek nevešel, zalomil by
     se podruhé a byly by tři řádky. Rozhoduje velikost písma, ne tenhle údaj. */
  max-width: min(38ch, 100%);
  margin: 0 auto;
  color: var(--cream);
  /* Geometrický grotesk, futura-like. Century Gothic je na Windows, Futura na
     macOS; mimo obojí se spadne na system-ui. Kresba je výrazně širší než
     u Segoe UI — proto je písmo menší a blok širší než u předchozí varianty,
     jinak by heslo nevyšlo na dva řádky. */
  font-family: "Century Gothic", Futura, "Trebuchet MS", system-ui, -apple-system, sans-serif;
  /* Velikost je odvozená z nejdelšího řádku: finské „Koskaan ei ole liian
     myöhäistä" je 14,76× velikost písma. Aby zůstal na jednom řádku, musí
     platit font ≤ (šířka okna − odsazení) / 14,76. Křivka níž drží pod tímhle
     stropem od 320px výš s rezervou ~5 %. Zvětšení sem přidá třetí řádek. */
  font-size: clamp(1.1rem, 6.5vw - 0.2rem, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  /* Heslo leží v obloze, kde jsou i světelné uzly z fotky. Změřeno: průměrný
     kontrast pásu 7,1:1, ale nejjasnější pixel spadl na 2,96:1 — těsně pod
     hranici AA pro velký text. Stín to řeší lokálně, bez sáhnutí na paletu. */
  text-shadow: 0 2px 28px rgba(26, 8, 16, 0.85), 0 1px 4px rgba(26, 8, 16, 0.7);
  /* backwards, ne both: kdyby animace z jakéhokoli důvodu neproběhla, zůstane
     platná vlastní hodnota prvku (viditelný text). S both by heslo — jediný
     obsah stránky — zůstalo neviditelné. */
  animation: rise 1.1s cubic-bezier(0.22, 0.68, 0.36, 1) backwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- kontakt -------------------------------------------------------------- */

/* margin-top: auto, protože .hero je mimo tok (absolutní pás oblohy) a patičku
   by tedy nikdo dolů netlačil. Sem mezi .hd a .ft přijde text z psacího stroje. */
.ft {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3.5rem);
}

.contact {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(246, 199, 102, 0.55);
  border-radius: 999px;
  background: rgba(26, 8, 16, 0.4);
  color: var(--yellow);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.contact:hover {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #2a1412;
}

/* --- společné ------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--yellow-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 30rem) {
  .ft { justify-content: center; }
}

/* Okno užší, než je poměr stran fotky (1,791) — typicky telefon na výšku.
   Fotka se ořezává do stran a při výřezu na střed (50 %) zůstane v záběru jen
   masiv hor: jezero je v pravé části snímku. Změřeno — podíl vodní plochy
   ve sloupci roste od 60 % šířky a vrcholí v pásu 70–90 %.
   Posun na 82 % dostane do záběru jezero i hory nad ním. */
@media (max-aspect-ratio: 179/100) {
  .shot { object-position: 82% 46%; }
}

/* Nízké okno (telefon na šířku): horní třetina má jen ~120 px, takže heslo
   se zmenší a hlavička si přestane brát skoro padesát pixelů na odsazení. */
@media (max-height: 520px) {
  .slogan { font-size: clamp(1.05rem, 0.5rem + 1.5vw, 1.75rem); }
  .hd { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}