@charset "UTF-8";

/* =========================================================================
   ŠABLONA A — „Salon"
   Vrstva vzhledu nad site.css (šablona B „Sluneční paluba"). Přepisuje jen to,
   co dělá web luxusní a korporátní: slonovinový papír, noční modř, kartáčovaná
   mosaz, patkové nadpisy, ostré rohy a vlasové linky místo stínů a pilulek.
   Barevné tokeny níž jsou výchozí – konkrétní doména je přebije inline blokem
   v layoutu, tahle vrstva proto funguje i bez vlastní palety webu.
   ========================================================================= */

:root {
  /* Papír */
  --ivory:      #F7F3EC;
  --ivory-2:    #F0EAE0;
  --ivory-3:    #E6DDCE;

  /* Noční kotviště */
  --navy:       #0A1A25;
  --navy-2:     #102A3B;
  --navy-3:     #1B4058;

  /* Mosaz */
  --brass:      #B08D48;
  --brass-lt:   #DCBB77;
  --brass-dk:   #8A6C31;
  --brass-soft: #F3EAD7;

  /* Inkoust */
  --ink:        #101E28;
  --ink-2:      #4A5B67;
  --ink-3:      #7C8B95;

  /* --- Sémantika site.css přemapovaná na salonní paletu -------------------
     Šablona B pracuje s vlastními jmény barev (řeka/slunce/korál/dřevo).
     Aby se ostatní pravidla v site.css přebarvila naráz, dáváme jim tady
     nové hodnoty místo toho, abychom přepisovali každý selektor zvlášť. */
  --bg:          var(--ivory);
  --text:        var(--ink);
  --muted:       var(--ink-2);
  --line:        color-mix(in srgb, var(--ink) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 27%, transparent);

  --paper:       #FFFFFF;
  --cream:       var(--ivory);
  --cream-2:     var(--ivory-2);
  --sand:        var(--ivory-3);

  /* „Řeka" šablony B se stává nočním kotvištěm – od nejsvětlejší po nejtmavší. */
  --river:       var(--navy-3);
  --river-deep:  var(--navy-2);
  --river-dark:  var(--navy);
  --river-soft:  var(--brass-soft);

  /* „Slunce" je mosaz. */
  --sun:         var(--brass-lt);
  --sun-deep:    var(--brass-dk);
  --sun-soft:    var(--brass-soft);

  /* Čtvrtá a pátá kategoriová barva – tlumená bronz/mahagon, ať se karty
     plaveb odliší i bez tyrkysu a korálu. */
  --coral:       #A9713C;
  --coral-ink:   #7C4F26;
  --coral-soft:  color-mix(in srgb, var(--coral) 16%, var(--ivory));
  --wood:        #6E4A2E;
  --wood-soft:   color-mix(in srgb, var(--wood) 18%, var(--ivory));

  --font-display: "Newsreader", "Georgia", "Times New Roman", serif;
  --font-body:    "Instrument Sans", "Segoe UI", -apple-system, sans-serif;

  /* Tvar – luxus je ostrý, ne oblý. --r-pill je v site.css použité i pro
     tlačítka, odznaky a horní menu; zploštěním na stejnou hodnotu jako --r-sm
     zmizí pilulky ve všech na první pohled bez zásahu do každého selektoru. */
  --r-sm:   2px;
  --r:      3px;
  --r-lg:   4px;
  --r-pill: 2px;

  /* Vlasové linky místo rozostřených stínů – box-shadow bez blur poloměru je
     jen ostrý obrys, ne stín. Karty a patičky menu tak dostanou rámeček
     přesně tam, kde site.css čeká "zvednutí" komponenty. */
  --shadow-sm: 0 0 0 1px var(--line);
  --shadow:    0 0 0 1px var(--line-strong);
  --shadow-lg: 0 0 0 1px var(--brass-soft), 0 0 0 2px var(--line-strong);

  --ring: 0 0 0 2px var(--ivory), 0 0 0 4px var(--brass);
}

/* --- Papír se zrnem -------------------------------------------------------
   Site.css nemá vlastní texturu podkladu; slonovina bez ní působí ploše.

   Zrno patří do pozadí dokumentu, ne na překryv přes celou stránku. Fixní
   vrstva nad obsahem totiž leží i na hlavní fotce a udělá z ní šedý flek –
   jako pozadí těla zůstane pod vším a vidět je jen tam, kde svítí papír. */
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

::selection { background: var(--brass-lt); color: var(--navy); }

a { color: var(--river-dark); }
a:hover { color: var(--brass-dk); }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.005em; }

/* --- Vlnové předěly ---------------------------------------------------- */

/* Vlnovka je veselý motiv šablony B – v Salonu je nepatřičná. Značka zůstává
   v markupu (šablona ji vypisuje vždy), jen ji schováváme. */
.wave,
.hero__wave,
.page-hero__wave { display: none; }

.wheel-divider svg { color: var(--brass); }
.wheel-mark { color: var(--brass-lt); }

/* --- Tlačítka ------------------------------------------------------------
   Site.css dává .btn pilulkový tvar a tvrdý spodní stín (box-shadow: 0 4px 0
   ...). Oboje je pro Salon nepřípustné – nahrazujeme mosazným přechodem,
   ostrými rohy (přes --r-pill výš) a vlasovým rámečkem. */
.btn {
  --btn-bg: linear-gradient(165deg, var(--brass-lt), var(--brass) 55%, var(--brass-dk));
  --btn-fg: var(--navy);
  border: 0;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass-dk) 70%, #000);
  transition: filter .2s, transform .2s, box-shadow .2s;
}
.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass-dk) 70%, #000), var(--shadow);
}
.btn:active { transform: translateY(0); filter: brightness(.96); }

.btn--river,
.btn--inquiry,
.btn--ink {
  --btn-bg: var(--navy);
  --btn-fg: var(--ivory);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 55%, transparent);
}
.btn--river:hover,
.btn--inquiry:hover,
.btn--ink:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 55%, transparent), var(--shadow);
}
/* Druhé tlačítko v mosazi vedle prvního splývá a hlavní akce ztrácí přednost.
   Sekundární je proto obtažené vlasovkou, nevyplněné. */
.btn--sun {
  --btn-bg: transparent;
  --btn-fg: var(--brass-lt);
  box-shadow: inset 0 0 0 1px var(--brass);
}
.btn--sun:hover {
  --btn-fg: var(--navy);
  filter: none;
  background: var(--brass-lt);
  box-shadow: inset 0 0 0 1px var(--brass-lt);
}
/* Na světlém podkladu potřebuje obtažené tlačítko tmavší popis. Patička je
   tmavá, tam by tmavá mosaz zmizela – ta si drží světlou variantu. */
.section:not(.section--river) .btn--sun { --btn-fg: var(--brass-dk); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover {
  --btn-fg: var(--navy);
  border-color: var(--brass);
  background: color-mix(in srgb, var(--brass) 8%, transparent);
  box-shadow: none;
}
.section--river .btn--ghost,
.form-side .btn--ghost,
.site-footer .btn--ghost {
  --btn-fg: #fff;
  border: 1px solid color-mix(in srgb, var(--brass-lt) 55%, transparent);
  background: transparent;
}
.section--river .btn--ghost:hover,
.form-side .btn--ghost:hover,
.site-footer .btn--ghost:hover {
  --btn-fg: var(--navy);
  border-color: var(--brass-lt);
  background: var(--brass-lt);
}

/* Tlačítko Salonu je mosazný přechod, ne jedna barva – color-mix z --btn-bg
   by neprošel a dech hlavní CTA by zmizel. Stín proto bere mosaz napřímo.
   Ostré rohy si ::after vezme přes border-radius: inherit samo. */
.btn--pulse { --pulse-ring: color-mix(in srgb, var(--brass) 55%, transparent); }

/* --- Hlavička a navigace ------------------------------------------------- */

.topbar { border-bottom: 1px solid color-mix(in srgb, var(--brass) 34%, transparent); }
.topbar a:hover { color: var(--brass-lt); }
.topbar .icon { color: var(--brass-lt); }

.site-header.is-stuck { box-shadow: 0 0 0 1px var(--line); }

.logo { gap: .8rem; }
.logo__wheel { color: var(--brass); }
.logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-indent: .16em;
}
.logo__tag {
  color: var(--brass-dk);
  font-weight: 400;
  letter-spacing: .2em;
}
.footer-brand .logo__tag { color: var(--brass-lt); }

/* Mosazná vlasovka místo pilulkového zvýraznění pod odkazem menu. */
@media (min-width: 1360px) {
  .nav__link {
    position: relative;
    border-radius: 0;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: .58rem; right: .58rem; bottom: .3rem;
    height: 1px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
  }
  .nav__link:hover,
  .nav__item:hover > .nav__link,
  .nav__item:focus-within > .nav__link {
    background: transparent;
    color: var(--brass-dk);
  }
  .nav__link:hover::after,
  .nav__item:hover > .nav__link::after,
  .nav__item:focus-within > .nav__link::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] {
    background: transparent;
    color: var(--brass-dk);
  }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }

  .nav__sub { border-top: 2px solid var(--brass); }
  .nav__sub a:hover { background: var(--brass-soft); color: var(--brass-dk); }
  .nav__sub a[aria-current="page"] { background: var(--brass-soft); color: var(--brass-dk); }
}

.burger { border-radius: var(--r-sm); }
.burger:hover { border-color: var(--brass); }

.mobile-nav__head { border-bottom: 1px solid color-mix(in srgb, var(--brass) 40%, transparent); }
.mobile-nav a:not(.btn):hover { color: var(--brass-dk); background: transparent; }
.mobile-nav a:not(.btn)[aria-current="page"] { background: transparent; color: var(--brass-dk); font-weight: 500; }
.mobile-nav__group > span { color: var(--brass-dk); }

/* --- Hero ------------------------------------------------------------- */

/* Site.css má scrim natvrdo v barvě „řeky" (rgba(3,48,58,…)) – salonní noční
   modř je tmavší, takže scrim přebarvujeme na tón --navy. */
/* Scrim má udržet bílý text čitelný, ne pohltit fotku. Drží se proto u textu
   vlevo a vpravo fotku pouští ven; dole jen tolik, aby držela spodní hrana. */
.hero::after {
  background:
    linear-gradient(96deg, rgba(10,26,37,.78) 0%, rgba(10,26,37,.5) 28%, rgba(10,26,37,.12) 50%, rgba(10,26,37,0) 64%),
    linear-gradient(180deg, rgba(10,26,37,.26) 0%, rgba(10,26,37,0) 24%, rgba(10,26,37,0) 66%, rgba(10,26,37,.36) 100%);
}
@media (max-width: 860px) {
  /* Na úzké obrazovce leží scrim přes celou fotku. Musí být tak slabý, aby
     byl vidět Hrad a mosty, a přitom udržel bílý nadpis čitelný. */
  .hero::after {
    background: linear-gradient(180deg, rgba(10,26,37,.46) 0%, rgba(10,26,37,.2) 42%, rgba(10,26,37,.66) 100%);
  }
  .page-hero::after {
    background: linear-gradient(180deg, rgba(10,26,37,.84), rgba(10,26,37,.7) 55%, rgba(10,26,37,.88));
  }
}
.page-hero::after {
  background:
    linear-gradient(100deg, rgba(10,26,37,.72) 0%, rgba(10,26,37,.38) 48%, rgba(10,26,37,.06) 78%),
    linear-gradient(180deg, rgba(10,26,37,.2) 0%, rgba(10,26,37,0) 45%, rgba(10,26,37,.46) 100%);
}
.page-hero--plain::after {
  background: linear-gradient(170deg, var(--navy-2), var(--navy) 78%);
}

.hero__eyebrow {
  border-radius: var(--r-sm);
  background: rgba(10, 26, 37, .38);
  border: 1px solid color-mix(in srgb, var(--brass-lt) 50%, transparent);
  backdrop-filter: blur(6px);
  color: var(--brass-lt);
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.hero__eyebrow svg { color: var(--brass-lt); }

.hero h1 {
  font-weight: 500;
  font-variation-settings: normal;
}
/* Zvýrazněná část nadpisu je kurzivní mosaz, ne podtržení žlutým pruhem. */
/* Nástřel zvýrazňuje slovo kurzívou v mosazi, ne podtrhem. Žlutý pruh ze
   Slunečné paluby by přes text ležel jako cedule a snížil čitelnost. */
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-lt);
  background: none;
}
.hero h1 em::after { content: none; }

.hero .wheel-mark,
.page-hero .wheel-mark { color: var(--brass-lt); }

/* --- Sekce a nadpisy ------------------------------------------------------ */

.section--sand { border-block: 1px solid var(--ivory-3); }

/* Tmavý předěl dostane mosaznou vlasovku nahoře a dole místo měkkého přechodu. */
.section--river {
  position: relative;
  border-block: 1px solid var(--navy);
}
.section--river::before,
.section--river::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 25%, var(--brass) 75%, transparent);
  opacity: .5;
}
.section--river::before { top: 0; }
.section--river::after  { bottom: 0; }

/* Decentní kapitálky s prostrkáním a vlasovou linkou pod textem – ne tučný
   popisek jako v šabloně B. */
.eyebrow {
  padding-bottom: .6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  font-weight: 400;
  letter-spacing: .24em;
  color: var(--brass-dk);
}
.eyebrow::before { display: none; }
.section-head--center .eyebrow { border-bottom: 0; }
.section-head--center .eyebrow::after {
  content: "";
  width: 34px;
  height: 1px;
  flex: none;
  background: var(--brass);
}
.section--river .eyebrow { color: var(--brass-lt); border-bottom-color: color-mix(in srgb, var(--brass-lt) 45%, transparent); }
.section--river .eyebrow::after { background: var(--brass-lt); }

/* --- Karty plaveb ---------------------------------------------------------- */

.cruise-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brass) 55%, transparent); }
.cruise-card__badge { background: var(--navy); color: var(--brass-lt); letter-spacing: .17em; }
.cruise-card__price {
  border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  background: color-mix(in srgb, var(--ivory) 93%, transparent);
  color: var(--navy);
}
.cruise-card__title a { color: var(--navy); }
.cruise-card:hover .cruise-card__title a { color: var(--brass-dk); }
.section--river .cruise-card__title a { color: var(--navy); }
.section--river .cruise-card:hover .cruise-card__title a { color: var(--brass-dk); }

/* --- Číselné pilíře, USP dlaždice ------------------------------------------ */

.trust { border-block: 1px solid color-mix(in srgb, var(--brass) 42%, transparent); }
.trust__item { border-left: 1px solid var(--line); }
.trust__item:first-child { border-left: 0; }
.trust__item:nth-child(2n) .trust__num,
.trust__item:nth-child(3n) .trust__num { color: var(--brass-dk); }
@media (max-width: 620px) {
  .trust__item:nth-child(odd) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.usp__item { border: 1px solid color-mix(in srgb, var(--brass) 28%, transparent); }
.usp__item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brass) 62%, transparent); }
.usp__icon,
.usp__item:nth-child(2n) .usp__icon,
.usp__item:nth-child(3n) .usp__icon {
  border: 1px solid var(--brass);
  background: transparent;
  color: var(--brass-dk);
}
.usp__item:hover .usp__icon { background: var(--brass-soft); }
.usp__item h3 { color: var(--navy); border-bottom: 1px solid color-mix(in srgb, var(--brass) 30%, transparent); padding-bottom: .7rem; }

.fact__icon,
.fact:nth-child(2n) .fact__icon,
.fact:nth-child(3n) .fact__icon,
.contact-item__icon,
.contact-item:nth-child(2n) .contact-item__icon,
.contact-item:nth-child(3n) .contact-item__icon {
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  background: transparent;
  color: var(--brass-dk);
}
.contact-item__value { color: var(--navy); }
.contact-item__value a { color: var(--navy); }
.contact-item__value a:hover { color: var(--brass-dk); }

.price-block__head { background: var(--navy); border-bottom: 1px solid var(--brass); }
.price-block__head h3 { color: var(--ivory); }
.price-table thead th { color: var(--brass-dk); border-bottom: 1px solid var(--brass); }
.price-table tbody tr.is-highlight { background: var(--brass-soft); }
.price-table td:first-child { color: var(--navy); }
.price-note,
.season-strip { border-left: 2px solid var(--brass); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.season-strip { border: 1px solid var(--brass); background: var(--brass-soft); color: var(--brass-dk); }

.callout,
.jumpnav { border-top: 2px solid var(--brass); }
.jumpnav__label,
.jumpnav__ico { color: var(--brass-dk); }
.jumpnav__ico { border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); }
.jumpnav__grid a:hover { border-color: var(--brass); }

.list-wheel li::before { background: var(--brass); }
.list-check li::before { border-color: var(--brass); }

.tag { border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); color: var(--brass-dk); }
.tag--sun { border-color: var(--brass); background: var(--brass-soft); }

/* --- Formuláře -------------------------------------------------------------- */

.form-card,
.contact-card,
.facts { border-top: 2px solid var(--brass); }

.field > label:not(.checkbox), .field > .field__label { color: var(--ink-2); }
.field__req { color: var(--brass-dk); }

.input, .select, .textarea { border-radius: var(--r-sm); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--brass); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }

.choice:hover .choice__box { border-color: var(--brass); transform: none; }
.choice input:checked + .choice__box {
  border-color: var(--brass);
  background: var(--brass-soft);
  box-shadow: inset 0 0 0 1px var(--brass);
}
.choice input:checked + .choice__box .choice__mark { border-color: var(--brass-dk); }
.choice__mark::after { background: var(--brass-dk); }

.checkbox input:checked { background: var(--brass); border-color: var(--brass-dk); }
.checkbox input::after { border-color: var(--navy); }

.form-alert--ok { background: var(--brass-soft); color: var(--brass-dk); border: 1px solid var(--brass); }

/* Černá deska vedle formuláře byla nejtěžší prvek na stránce a přetahovala
   pozornost z toho, co má člověk vyplnit. Salon ji řeší papírem s mosaznou
   linkou nahoře – lehčí, čitelnější a konzistentní s kartami vedle. */
.form-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  color: var(--ink);
}
.form-side h2,
.form-side h3 { color: var(--navy); }
.form-side p { color: var(--ink-2); }
.form-side a:not(.btn) { color: var(--navy-3); }
.form-side a:not(.btn):hover { color: var(--brass-dk); }

.section:not(.section--river) .form-side .btn--sun {
  --btn-bg: linear-gradient(165deg, var(--brass-lt), var(--brass) 55%, var(--brass-dk));
  --btn-fg: var(--navy);
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass-dk) 70%, #000);
}
.section:not(.section--river) .form-side .btn--sun:hover {
  --btn-fg: var(--navy);
  background: var(--btn-bg);
  filter: brightness(1.06);
}
.form-side .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  background: transparent;
  border: 1px solid var(--brass);
  box-shadow: none;
}
.form-side .btn--ghost:hover {
  --btn-fg: var(--navy);
  background: color-mix(in srgb, var(--brass) 12%, transparent);
  border-color: var(--brass-dk);
  filter: none;
  box-shadow: none;
}
.form-side .wheel-mark { color: var(--brass); opacity: .07; }

/* --- Patička ---------------------------------------------------------------- */

.site-footer {
  background: radial-gradient(120% 80% at 12% 0%, var(--navy-2), transparent 60%), var(--navy);
  border-top: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
}
.site-footer a:not(.btn):hover { color: var(--brass-lt); }
.site-footer h3 {
  color: var(--brass-lt);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .24em;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  padding-bottom: .7rem;
}
.footer-grid ul .icon { color: var(--brass); }

.footer-social {
  border: 1px solid rgba(220, 187, 119, .4);
  border-radius: var(--r-sm);
}
.site-footer a.footer-social:hover {
  background: var(--brass-lt);
  border-color: var(--brass-lt);
  color: var(--navy);
}

.mobile-bar { border-top: 1px solid color-mix(in srgb, var(--brass) 34%, transparent); }
.to-top { border-radius: 50%; }
.to-top:hover { border-color: var(--brass); background: var(--navy); color: var(--brass-lt); }

/* --- Tisk -------------------------------------------------------------------- */

@media print {
  body::before { display: none; }
}

/* --- Redukce pohybu ----------------------------------------------------------
   Site.css má vlastní pravidlo pro prefers-reduced-motion; přidáváme jen to,
   co je nové v téhle vrstvě (zrno papíru se nehýbe, není třeba nic vypínat –
   pravidlo je tu jako pojistka pro budoucí animace téhle vrstvy). */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transition: none; }
}

/* --- Typografie a vzduch -------------------------------------------------
   Luxus se na obrazovce nedělá ozdobami, ale prostorem a klidnou sazbou.
   Newsreader má osu opsz: velký nadpis dostane úzké tahy a sevřené prokládání,
   běžný text naopak plnější kresbu, aby se dal číst. */

:root { --section: clamp(4.5rem, 3rem + 7vw, 8rem); }

body {
  font-size: clamp(1.02rem, .99rem + .18vw, 1.1rem);
  line-height: 1.65;
  letter-spacing: .002em;
}

h1, h2, h3, .hero h1, .cruise-card__title, .page-hero h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.12;
}

.hero h1, .page-hero h1 {
  font-variation-settings: "opsz" 72;
  letter-spacing: -.012em;
}

/* Perex a úvodní odstavce nesou patkové písmo, drobná navigace grotesk. */
.hero__lead, .page-hero__lead, .section-head p, .cruise-card__text {
  font-family: var(--font-body);
  font-weight: 400;
}

.hero__lead, .page-hero__lead {
  font-size: clamp(1.08rem, 1.02rem + .3vw, 1.22rem);
  line-height: 1.6;
  max-width: 34rem;
}

/* Text v odstavcích potřebuje délku řádku, na které oko udrží rytmus. */
.section p, .prose p { max-width: 68ch; }
/* Odstavec, který jen drží tlačítko, se nesmí zúžit – text-align: center
   by ho pak centroval uvnitř úzkého bloku, ne přes celou sekci. */
.section p.text-center,
.prose p.text-center { max-width: none; }

/* Mosaz na bílé má slabý kontrast, drobný text proto jde do tmavší varianty. */
.cruise-card__meta, .trust__label, .facts__label, .muted, small {
  color: var(--ink-2);
}

/* Číslice v cenách a statistikách musí lícovat pod sebou. */
.trust__num, .cruise-card__price, .price-table td, .pricing td {
  font-variant-numeric: tabular-nums lining-nums;
}