/*
 * Baltia typography system
 * Display: Playfair Display. Text and UI: Montserrat.
 * The 11 / 18 / 29 / 47 / 76 / 123 scale follows a 1.618 ratio.
 */
:root {
  --font-display: "Playfair Display", serif;
  --font-ui: "Montserrat", sans-serif;
  --type-caption: 11px;
  --type-ui: 13px;
  --type-small: 15px;
  --type-body: 18px;
  --type-card: 29px;
  --type-section: 47px;
  --type-page: 76px;
  --type-display: 123px;
  --leading-tight: 1.05;
  --leading-title: 1.14;
  --leading-body: 1.618;
}

html,
body {
  font-family: var(--font-ui);
}

body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

button,
input,
select,
textarea,
label,
nav,
small {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
  font-family: var(--font-display);
  font-style: normal;
}

h1 {
  font-size: var(--type-page) !important;
  font-weight: 500;
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--type-section) !important;
  font-weight: 500;
  line-height: var(--leading-title);
}

h3 {
  font-size: var(--type-card) !important;
  font-weight: 500;
  line-height: var(--leading-title);
}

p,
li,
dd,
address {
  font-size: var(--type-body) !important;
  font-weight: 400 !important;
  line-height: var(--leading-body);
}

.site-footer--main :is(p, li),
.food-footer :is(p, li) {
  font-size: var(--type-ui) !important;
  line-height: 1.6;
}

.site-footer--main small,
.food-footer small,
.site-footer--main .site-footer__legal,
.food-footer .food-footer__legal {
  font-size: var(--type-caption) !important;
  line-height: 1.6;
}

.food-footer a {
  font-size: var(--type-ui) !important;
  line-height: 1.5;
}

/* Reusable editorial roles. */
.section-title,
.room-landing__section-title,
.room-faces-section__title,
.rooms-practical__title,
.rooms-promo__title {
  font-family: var(--font-display);
  font-size: var(--type-section);
  font-weight: 500;
  line-height: var(--leading-title);
}

.eyebrow,
.section-kicker,
.food-kicker,
.cinema-slide__eyebrow,
.room-faces-kicker,
.room-faces-title > p,
.room-faces-title li,
.faq-hero__eyebrow,
.booking-hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.4;
}

.btn,
.food-button,
.food-order,
.cinema-slide__actions a,
.room-card__actions a,
.room-faces-actions a {
  font-family: var(--font-ui);
  font-size: var(--type-ui) !important;
  font-weight: 600;
  line-height: 1.4;
}

/* Keep microcopy on the first scale step; nothing readable is set below 11px. */
.hero__metro,
.cinema-slide__explore,
.cinema-slide__explore span,
.cinema-reel__hint,
.cinema-reel__hint span,
.page-restaurant .food-brand strong,
.page-restaurant .food-footer__legal,
.page-restaurant .food-footer__legal small {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 500;
  line-height: 1.4;
}

/* Service wordmarks use brand colour, while their text stays in the site typeface. */
.hero-rating__logo b,
.hero-rating__brand b,
.hero-rating__service b {
  font-family: var(--font-ui);
  font-size: var(--type-body);
}

.dish-card__body > span,
.brand-signature span,
.excursions__map-label,
.excursions__tip strong,
.hero-rating__score small,
.hero-rating__reviews span,
.room-faces-booking__form label > span {
  font-size: var(--type-caption) !important;
}

.rooms-showcase__card-caption > small {
  font-size: var(--type-caption) !important;
  line-height: 1.4;
}

.offer-card__period,
.offer-card__terms,
.rooms-promo__note {
  font-size: var(--type-small) !important;
  line-height: 1.55 !important;
}

.room-faces-comfort__list p {
  line-height: var(--leading-body) !important;
}

.room-faces-comfort__list p > span {
  font-size: var(--type-ui) !important;
  line-height: 1.4;
}

.excursions__helper strong {
  font-size: var(--type-caption) !important;
}

/* Catalogue and room details use card-scale titles instead of page-scale h2. */
.room-card__title,
.room-card__title a,
.room-faces-acc__title,
.faq-list__question,
.faq-question {
  font-size: var(--type-card);
  line-height: var(--leading-title);
}

.rooms-page-title,
.faq-hero__title,
.booking-hero h1,
.booking-hero__title,
.room-faces-title h1 {
  font-size: var(--type-page);
  line-height: var(--leading-tight);
}

/* Room cinema: keep editorial hierarchy readable over photography. */
.cinema-slide__title {
  font-family: var(--font-display);
  font-size: var(--type-page);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.cinema-slide__description,
.room-faces-lead,
.room-faces-copy,
.faq-hero__lead,
.booking-hero__lead {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

/* Restaurant keeps its independent character but follows the same scale. */
.page-restaurant .food-hero > h1 {
  font-size: var(--type-display) !important;
  line-height: 0.95;
}

body.page-restaurant {
  overflow-x: clip;
}

.page-restaurant .food-section-head h2,
.page-restaurant .food-about h2,
.page-restaurant .food-events h2,
.page-restaurant .food-contacts h2 {
  font-size: var(--type-page) !important;
  line-height: var(--leading-tight);
}

.page-restaurant .food-promo-slide h2,
.page-restaurant .food-hero__caption h2 {
  font-size: var(--type-section) !important;
  line-height: var(--leading-title);
}

.page-restaurant .food-card__body h3,
.page-restaurant .food-format h3,
.page-restaurant .food-quicklinks strong {
  font-size: var(--type-card) !important;
  line-height: var(--leading-title);
}

.page-restaurant :is(
  .food-promo-slide p,
  .food-hero__caption p,
  .food-card__body p,
  .food-format p,
  .food-about__copy p,
  .food-events__content > p,
  .food-footer__column p
) {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-body);
}

.page-restaurant :is(
  .food-nav a,
  .food-hotel-link,
  .food-promo-slide__index,
  .food-promo-slide__link,
  .food-promo-slider__dots span,
  .food-text-link,
  .food-facts dt,
  .food-quicklinks span,
  .food-categories a,
  .food-card__media span,
  .food-format span,
  .food-format a,
  .food-events li,
  .food-map > a,
  .food-footer__column h2,
  .food-footer__legal
) {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 760px) {
  :root {
    --type-caption: 11px;
    --type-ui: 13px;
    --type-small: 15px;
    --type-body: 17px;
    --type-card: 27px;
    --type-section: 29px;
    --type-page: 44px;
    --type-display: 71px;
  }

  h1,
  .rooms-page-title,
  .faq-hero__title,
  .booking-hero h1,
  .booking-hero__title,
  .room-faces-title h1,
  .cinema-slide__title {
    font-size: var(--type-page) !important;
  }

  h2,
  .section-title,
  .room-landing__section-title,
  .room-faces-section__title,
  .rooms-practical__title,
  .rooms-promo__title {
    font-size: var(--type-section) !important;
  }

  h3,
  .room-card__title,
  .room-card__title a,
  .room-faces-acc__title,
  .faq-list__question,
  .faq-question {
    font-size: var(--type-card) !important;
  }

  .page-restaurant .food-hero > h1 {
    font-size: var(--type-display) !important;
  }

  .page-restaurant .food-section-head h2,
  .page-restaurant .food-about h2,
  .page-restaurant .food-events h2,
  .page-restaurant .food-contacts h2 {
    font-size: var(--type-page) !important;
  }

  .page-restaurant .food-promo-slide h2,
  .page-restaurant .food-hero__caption h2 {
    font-size: var(--type-section) !important;
  }

  .page-restaurant .food-promo-slide.is-active .food-promo-slide__media img {
    transform: none;
  }

  .page-restaurant .food-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding-right: 0;
    overflow: visible;
    contain: layout paint;
  }

  .page-restaurant .food-categories a {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding-inline: 10px;
    text-align: center;
    white-space: normal;
  }

  .page-restaurant .food-promo-slider__viewport {
    contain: paint;
  }

  .page-restaurant .food-promo-slider {
    width: 100vw !important;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    overflow: hidden;
  }
}

/* Mobile readability pass 2026-08-11. */
@media (max-width: 430px) {
  h1,
  .rooms-page-title,
  .faq-hero__title,
  .booking-hero h1,
  .booking-hero__title,
  .room-faces-title h1,
  .cinema-slide__title {
    text-wrap: balance;
  }

  .page-legal .section-title,
  .offer-detail__copy h2 {
    font-size: clamp(24px, 7.8vw, 29px) !important;
    line-height: 1.08 !important;
    text-wrap: balance;
  }

  .page-booking .booking-intro__title {
    max-width: 100%;
    font-size: clamp(34px, 10.8vw, 40px) !important;
    line-height: 1.04 !important;
    text-wrap: balance;
  }

  .room-faces-title h1 {
    max-width: 100%;
    font-size: clamp(1.8125rem, 7.8vw, 2rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: normal;
  }

  .page-rooms .cinema-slide__title {
    max-width: 100%;
    font-size: clamp(1.6rem, 7.5vw, 2.05rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em;
    overflow-wrap: normal;
  }

  .faq-page .faq-hero__title {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(31px, 9.5vw, 38px) !important;
    line-height: 1.04;
  }

  .page-restaurant .food-section-head h2,
  .page-restaurant .food-about h2,
  .page-restaurant .food-events h2,
  .page-restaurant .food-contacts h2 {
    max-width: 100%;
    font-size: clamp(34px, 10.5vw, 44px) !important;
    line-height: 1.02;
    letter-spacing: -0.035em;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .room-faces-lead,
  .room-faces-copy,
  .faq-hero__lead,
  .booking-hero__lead,
  .legal-page__content p,
  .legal-page__content li {
    text-wrap: pretty;
  }

  .legal-page__content p,
  .legal-page__content li,
  .legal-page__content a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .page-legal .legal-page__content h2,
  .page-legal .legal-page__content h3 {
    font-size: clamp(23px, 7.5vw, 28px) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }
}

@media (max-width: 350px) {
  .room-faces-title h1 {
    font-size: 1.8125rem !important;
  }

  .page-rooms .cinema-slide__title {
    font-size: clamp(1.48rem, 7.3vw, 1.75rem) !important;
  }

  .faq-page .faq-hero__title,
  .page-restaurant .food-section-head h2,
  .page-restaurant .food-about h2,
  .page-restaurant .food-events h2,
  .page-restaurant .food-contacts h2 {
    font-size: 31px !important;
  }
}