/*
 * Riviera: a summer morning on the coast. A sail-white page, a sand second ground and a deep sea colour; headings in a
 * fine display serif over small, widely spaced capitals; tall photographs with softly rounded corners; slim pill
 * buttons. Three marks of its own, used sparingly:
 *   the hem      three fine stripes, like a sailor's shirt, along the window's top edge and above every deep band;
 *   the horizon  the opening sets its words in an open sky and lays the photograph below them like the sea;
 *   the sun      a pale disc resting on that horizon, behind the words (also behind the split hero's picture, in the
 *                footer as the sun that has just set, and around the page-not-found number).
 *
 * This file is the frame (header, phone menu, footer, announcement, breadcrumbs, the page not found), the blocks the theme
 * draws itself (the openings, the split hero, the article body, the divider) and what the theme composes from the kit's
 * blocks (section 'Sections'). Everything inside a kit block that a token can say is in kit-theme.css.
 *
 * Colours come only from the palette's twelve tokens (palettes/*.css, or a website's own colours): --background,
 * --surface, --surface-alt, --primary, --primary-alt, --accent, --accent-ink, --on-accent, --on-primary,
 * --text-primary, --text-secondary, --border. A text colour is only ever set on a fill its colour contract keeps
 * readable (cms/cms/core/data/theme-colour-tokens.json): text-primary, text-secondary and accent-ink on background,
 * surface and surface-alt; on-primary on primary and primary-alt; on-accent on accent. theme-colour-pairs.test.mjs
 * reads every rule here that sets both a background and a colour and fails for any other pair: a website with its own
 * dark colours would get unreadable text. A dark palette is just other values for the same tokens: nothing here asks
 * whether the page is dark.
 *
 * Type comes from the layout: --font-heading, --font-body, --riviera-heading-weight and --riviera-body-strong (the
 * heaviest weights the font palette loads). Never write a font-weight number other than 400 here. html.riviera-italic
 * says the font palette loads the heading face's own italic: only then is anything set in italic.
 */

/* ------------------------------------------------------------------ Tokens */

/* :where(:root) has no weight: the layout's inline values, the palette and a website's own colours always win over these
   defaults, wherever this file is linked. A plain :root rule here would override them (Loom drew every website in its
   fallback colours that way until 4.x). */
:where(:root) {
  --riviera-width: 74rem;
  --riviera-gutter: clamp(1.25rem, 4.5vw, 3rem);
  --riviera-bar: 4.5rem;
  /* The hem: three stripes of 2 px with 3 px between them. */
  --riviera-hem: 0.9375rem;
  --riviera-radius: 1.25rem;
  --riviera-radius-large: 1.75rem;
  --riviera-button-radius: 999px;
  --riviera-heading-weight: 300;
  --riviera-body-strong: 600;
  --riviera-speed: 200ms;
  --riviera-line: var(--border, #d6dbdf);
  /* The sun: the sand of the second ground, warmed a little by the accent. */
  --riviera-sun: var(--surface-alt, #f2ece1);
  --riviera-stripes: repeating-linear-gradient(to bottom, var(--primary, #0f2c49) 0 2px, transparent 2px 5px);
  /* The panel behind a picture: finer stripes, like a deck chair's canvas. */
  --riviera-canvas: repeating-linear-gradient(to bottom, var(--primary, #0f2c49) 0 1px, transparent 1px 6px);
}

/* ------------------------------------------------------------------ Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--riviera-bar) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background, #fbfaf6);
  color: var(--text-primary, #10233a);
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent-ink, #185b8f);
  outline-offset: 3px;
}

.riviera-main {
  display: block;
  min-height: 40vh;
}

.riviera-skip-link {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1.2rem;
  border-radius: var(--riviera-button-radius);
  background: var(--primary, #0f2c49);
  color: var(--on-primary, #fbf8f1);
  font-weight: var(--riviera-body-strong);
  text-decoration: none;
}

.riviera-skip-link:focus {
  top: 1rem;
}

.riviera-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* ------------------------------------------------------------------ Buttons */

/* One shape for every button the theme draws itself: a slim pill with its label in small spaced capitals. kit-theme.css
   gives the kit's buttons the same pill, and the line of this theme in resilience.css (--chrome-button-radius) gives it
   to the cookie notice and the phone action bar: theme-chrome.test.mjs holds the three together. A label may take two
   lines; it never runs out of the button. */
.riviera-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.7rem 1.65rem;
  border: 1px solid transparent;
  border-radius: var(--riviera-button-radius);
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-weight: var(--riviera-body-strong);
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: break-word;
  transition: background-color var(--riviera-speed) ease, border-color var(--riviera-speed) ease, box-shadow var(--riviera-speed) ease;
}

/* The label is a span that may shrink: a flex item's text otherwise keeps its longest word's width and runs out of the
   button and off a phone's screen. "anywhere" breaks only a word wider than the whole button, as the kit's buttons do. */
.riviera-button > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.riviera-button--primary {
  background: var(--primary, #0f2c49);
  color: var(--on-primary, #fbf8f1);
}

.riviera-button--primary:hover {
  background: var(--primary-alt, #1a3d61);
}

.riviera-button--accent {
  background: var(--accent, #1d6aa6);
  color: var(--on-accent, #ffffff);
}

/* The hover is a ring in the words' colour, not a lighter fill: a lighter fill would bring the words' contrast under
   what the colour contract promises for this pair. */
.riviera-button--accent:hover {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-accent, #ffffff) 60%, transparent);
}

.riviera-button--secondary {
  border-color: color-mix(in srgb, var(--text-primary, #10233a) 45%, transparent);
  background: transparent;
  color: var(--text-primary, #10233a);
}

.riviera-button--secondary:hover {
  border-color: var(--text-primary, #10233a);
  background: color-mix(in srgb, var(--text-primary, #10233a) 6%, transparent);
}

.riviera-button--small {
  min-height: 2.5rem;
  padding: 0.45rem 1.15rem;
  font-size: 0.75rem;
}

.riviera-button--block {
  width: 100%;
}

/* ------------------------------------------------------------------ Announcement */

.riviera-announcement {
  background: var(--primary, #0f2c49);
  color: var(--on-primary, #fbf8f1);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.riviera-announcement[hidden] {
  display: none;
}

.riviera-announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  max-width: calc(var(--riviera-width) + 2 * var(--riviera-gutter));
  margin-inline: auto;
  padding: 0.5rem var(--riviera-gutter);
  text-align: center;
}

.riviera-announcement p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}

.riviera-announcement__icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.riviera-announcement a {
  font-weight: var(--riviera-body-strong);
  text-underline-offset: 0.25em;
}

.riviera-announcement .announcement-dismiss {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}

.riviera-announcement svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ------------------------------------------------------------------ Header */

/* A white bar that stays at the top, under a hem of three fine stripes in the deep sea colour. The bar sticks a hem's
   height above the window's edge, so once the page scrolls the stripes slide out of sight and only the bar stays. */
.riviera-header {
  position: sticky;
  top: calc(-1 * var(--riviera-hem));
  z-index: 50;
  border-bottom: 1px solid var(--riviera-line);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #10233a);
}

.riviera-header::before {
  content: "";
  display: block;
  height: var(--riviera-hem);
  background: var(--riviera-stripes);
}

.riviera-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  min-height: var(--riviera-bar);
  max-width: calc(var(--riviera-width) + 2 * var(--riviera-gutter));
  margin-inline: auto;
  padding: 0.55rem var(--riviera-gutter);
}

.riviera-header__brand {
  display: inline-flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* The centred kind: the name in the middle column, the actions in the right one, so a long name never runs under them. */
.riviera-header--centered .riviera-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  min-height: calc(var(--riviera-bar) + 0.75rem);
}

.riviera-header--centered .riviera-header__brand {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.riviera-header--centered .riviera-header__actions {
  grid-column: 3;
  justify-self: end;
}

/* The centred kind's menu: a row of its own under a fine line, centred. */
.riviera-header__rail {
  max-width: calc(var(--riviera-width) + 2 * var(--riviera-gutter));
  margin-inline: auto;
  padding: 0 var(--riviera-gutter);
}

.riviera-header__rail .riviera-nav {
  justify-content: center;
  padding-block: 0.35rem 0.5rem;
  border-top: 1px solid var(--riviera-line);
}

.riviera-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}

.riviera-header__phone {
  color: inherit;
  font-size: 0.875rem;
  font-weight: var(--riviera-body-strong);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.riviera-header__phone:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.riviera-header__slot {
  display: flex;
  align-items: center;
}

/* The website's name, in the heading face. Its line height and the small padding leave room for what letters carry
   above and below (the caron of Š, the tail of Ų, the descender of g): a tighter line in a box that clips cuts them
   (theme-clipped-marks.test.mjs, with "Šilėnų Žirgynas"). The shared rule (resilience.css) keeps a long name to two
   balanced lines and the shared script sets it smaller before a word would break; this rule only sets its look. */
.riviera-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.riviera-brand__name {
  min-width: 0;
  /* Wide enough for a name of eighty characters on two lines: a third line makes the bar taller than its controls
     (verify-theme-stress.mjs, header-rows). */
  max-width: min(33rem, 46vw);
  padding-block: 0.1em;
  font-family: var(--font-heading, serif);
  font-size: 1.4375rem;
  font-weight: var(--riviera-heading-weight);
  letter-spacing: 0;
  line-height: 1.25;
}

.riviera-header--centered .riviera-brand__name {
  max-width: min(38rem, 50vw);
  font-size: 1.6875rem;
}

/* On a wide screen the name is never clipped: a very long one takes a third line rather than losing its end. The
   shared two-line rule is a clamp, and a clamp needs a box that hides its overflow, which would cut the marks; so the
   name here is a plain block. */
.riviera-header .riviera-brand__name {
  display: block;
  overflow: visible;
}

/* On a phone the shared rule keeps the name to two lines (it wins there). The box clips a little past its edges, so a
   caron above the first line and a tail under the second stay whole, but not so far that the top of a third line
   shows under the second. */
@media (max-width: 39.99rem) {
  .riviera-header .riviera-brand__name {
    max-width: 100%;
    overflow: clip;
    overflow-clip-margin: 0.12em;
    font-size: 1.3125rem;
  }
}

.riviera-brand:has(.riviera-brand__logo, .brand-logo-original, .logo-mask) .riviera-brand__name {
  font-size: 1.1875rem;
}

.riviera-header .riviera-brand__logo,
.riviera-header .brand-logo-original {
  max-height: 2.75rem;
  width: auto;
}

.riviera-header .logo-mask {
  background-color: var(--text-primary, #10233a) !important;
}

/* ------------------------------------------------------------------ Topbar */

/* The slim line of header_topbar: the deep sea colour with the phone, the email and the social links. */
.riviera-topbar {
  background: var(--primary, #0f2c49);
  color: var(--on-primary, #fbf8f1);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

.riviera-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: calc(var(--riviera-width) + 2 * var(--riviera-gutter));
  min-height: 2.25rem;
  margin-inline: auto;
  padding: 0 var(--riviera-gutter);
}

.riviera-topbar__contact {
  display: flex;
  gap: 1.75rem;
  min-width: 0;
}

.riviera-topbar a {
  color: inherit;
  text-decoration: none;
}

.riviera-topbar a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.riviera-topbar__social,
.riviera-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.riviera-topbar__social svg,
.riviera-footer__social svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

@media (max-width: 63.99rem) {
  .riviera-topbar {
    display: none;
  }
}

/* ------------------------------------------------------------------ Navigation */

/* The menu in small spaced capitals; the page being read carries a short line of the accent under its name. */
.riviera-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.2rem;
  min-width: 0;
}

.riviera-header--simple .riviera-nav,
.riviera-header--topbar .riviera-nav {
  margin-left: auto;
}

.riviera-nav__item {
  position: relative;
}

.riviera-nav__item > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  color: inherit;
  font-size: 0.75rem;
  font-weight: var(--riviera-body-strong);
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
}

/* A label is allowed to wrap: resilience.js counts a wrapped label as a crowded menu and folds it into the menu button.
   Without scripts nothing folds, and a label kept on one line would run off the screen instead. */
.riviera-nav__item {
  min-width: 0;
}

.riviera-nav__item > a::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.3rem;
  left: 0.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity var(--riviera-speed) ease, transform var(--riviera-speed) ease;
}

.riviera-nav__item > a:hover::after,
.riviera-nav__item--parent:focus-within > a::after {
  opacity: 0.55;
  transform: none;
}

.riviera-nav__item.is-current > a::after {
  height: 2px;
  background: var(--accent-ink, #185b8f);
  opacity: 1;
  transform: none;
}

.riviera-nav__caret {
  width: 0.6rem;
  height: 0.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.riviera-nav__children {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--riviera-line);
  border-radius: var(--riviera-radius);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #10233a);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--text-primary, #10233a) 38%, transparent);
  visibility: hidden;
  opacity: 0;
}

.riviera-nav__item--parent:is(:hover, :focus-within) > .riviera-nav__children {
  visibility: visible;
  opacity: 1;
}

.riviera-nav__children a {
  padding: 0.55rem 0.85rem;
  border-radius: calc(var(--riviera-radius) - 0.5rem);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
}

.riviera-nav__children a:hover {
  background: var(--surface-alt, #f2ece1);
}

/* The menu button: two fine lines that turn into a cross. Hidden on a wide screen unless resilience.js folds the menu
   into it (theme-nav-compact on #site-header, whose shared rules show it). */
.riviera-menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  border: 1px solid var(--riviera-line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--riviera-speed) ease;
}

.riviera-menu-button:hover {
  border-color: currentColor;
}

.riviera-menu-button__lines {
  display: grid;
  gap: 0.3rem;
  width: 1.1rem;
}

.riviera-menu-button__lines i {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--riviera-speed) ease, opacity var(--riviera-speed) ease;
}

.riviera-menu-button__lines i:nth-child(2) {
  width: 70%;
  justify-self: end;
}

.riviera-menu-button[aria-expanded="true"] .riviera-menu-button__lines i:nth-child(1) {
  transform: translateY(0.4rem) rotate(45deg);
}

.riviera-menu-button[aria-expanded="true"] .riviera-menu-button__lines i:nth-child(2) {
  opacity: 0;
}

.riviera-menu-button[aria-expanded="true"] .riviera-menu-button__lines i:nth-child(3) {
  transform: translateY(-0.4rem) rotate(-45deg);
}

/* ------------------------------------------------------------------ Phone menu */

/* A panel under the bar with every page in the heading face, each on a fine line. It scrolls inside itself when the
   pages are many, so the last one is always reachable. */
.riviera-drawer {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  /* Under the whole header, wherever it stands on the screen (an announcement above it, a name on two lines): theme.js
     measures where the header ends (--riviera-head). With the bar's own height here, the foot of a long menu lay under
     the window's edge and its last link could not be reached (verify-theme-stress.mjs, menu-unreachable). */
  max-height: calc(100dvh - var(--riviera-head, var(--riviera-bar)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--riviera-line);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #10233a);
  box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--text-primary, #10233a) 45%, transparent);
}

.riviera-drawer[hidden] {
  display: none;
}

.riviera-drawer__inner {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.5rem var(--riviera-gutter) 1.75rem;
}

.riviera-drawer__slot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.riviera-drawer__item {
  border-bottom: 1px solid var(--riviera-line);
}

/* A page name in the heading face. data-fit-text (includes/chrome.php) lets the shared script set a long single word
   smaller instead of breaking it. */
.riviera-drawer__link {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--font-heading, serif);
  font-size: 1.5rem;
  font-weight: var(--riviera-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

.riviera-drawer__children {
  display: grid;
  gap: 0.15rem;
  padding: 0 0 0.9rem 0.85rem;
}

.riviera-drawer__children a {
  padding: 0.3rem 0;
  color: var(--text-secondary, #4a5a6b);
  text-decoration: none;
}

.riviera-drawer__footer {
  display: grid;
  gap: 0.65rem;
}

.riviera-drawer__contact {
  width: fit-content;
  color: var(--text-secondary, #4a5a6b);
  text-decoration: none;
}

/* Below the desktop width the menu, the phone, the button and the slot move into the phone menu. */
@media (max-width: 63.99rem) {
  .riviera-nav,
  .riviera-header__rail,
  .riviera-header__phone,
  .riviera-header__cta,
  .riviera-header__slot {
    display: none;
  }

  .riviera-menu-button {
    display: inline-flex;
  }

  .riviera-header--centered .riviera-header__inner {
    display: flex;
    min-height: var(--riviera-bar);
  }

  .riviera-header--centered .riviera-brand__name {
    font-size: 1.5rem;
  }
}

/* A phone menu left open while the window grows to a desktop is put away, unless the bar is folded. */
@media (min-width: 64rem) {
  #site-header:not(.theme-nav-compact) .riviera-drawer {
    display: none;
  }
}

@media (max-width: 79.99rem) {
  .riviera-header--simple .riviera-header__phone {
    display: none;
  }
}

/* ------------------------------------------------------------------ Breadcrumbs */

.riviera-breadcrumbs {
  max-width: calc(var(--riviera-width) + 2 * var(--riviera-gutter));
  margin-inline: auto;
  padding: 1.5rem var(--riviera-gutter) 0;
}

.riviera-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-secondary, #4a5a6b);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  list-style: none;
}

.riviera-breadcrumbs li + li::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 1px;
  margin-right: 0.6rem;
  background: currentColor;
  opacity: 0.55;
  vertical-align: 0.3em;
}

.riviera-breadcrumbs a {
  text-decoration: none;
}

.riviera-breadcrumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.riviera-breadcrumbs [aria-current="page"] {
  color: var(--text-primary, #10233a);
}

/* ------------------------------------------------------------------ The horizon (hero_fullwidth_image, hero_video) */

/* The words in an open sky, the photograph below them like the sea, as tall as what the words leave of the first
   screen, and the sun on its upper edge. The opening as a whole takes what is left of the first screen: the screen less
   where the opening starts on the page. --riviera-opening-top is that place; theme.js measures it (an announcement, the
   header, the breadcrumb above it), and the values here stand in until it has (cms/THEME_DEVELOPMENT.md, rule 19;
   opening-first-screen.test.mjs). The buttons are above the picture, so they are on the first screen in any case. */
.riviera-opening {
  --riviera-opening-top: calc(var(--riviera-hem) + var(--riviera-bar));
  /* An opening further down a page is most of a screen. */
  --riviera-opening-height: 84svh;
  --riviera-sun-size: min(40rem, 94vw);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(34rem, var(--riviera-opening-height));
  overflow: hidden;
  background: var(--background, #fbfaf6);
  color: var(--text-primary, #10233a);
}

.riviera-main > .riviera-opening:first-child,
.riviera-main > nav[aria-label]:first-child + .riviera-opening {
  --riviera-opening-height: calc(100svh - var(--riviera-opening-top));
}

.riviera-main > nav[aria-label]:first-child + .riviera-opening {
  --riviera-opening-top: calc(var(--riviera-hem) + var(--riviera-bar) + 3.2rem);
  /* The shared short top of a first section is not for a picture that fills the window. */
  padding-top: 0;
}

.riviera-opening__sky {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 7svh, 5.5rem) var(--riviera-gutter) clamp(2.25rem, 5.5svh, 4rem);
  text-align: center;
}

.riviera-opening__words {
  display: grid;
  justify-items: center;
  gap: 1.15rem;
  max-width: 54rem;
  margin-inline: auto;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it. */
.riviera-opening__title {
  max-width: 17ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.35rem, 1.3rem + 4.4vw, 5.1rem);
  font-weight: var(--riviera-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

/* The lead line, in the heading face; in its own italic where the font palette has one. */
.riviera-opening__lead {
  max-width: 38rem;
  margin: 0;
  color: var(--text-secondary, #4a5a6b);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-synthesis: none;
  font-weight: var(--riviera-heading-weight);
  line-height: 1.5;
  text-wrap: pretty;
}

html.riviera-italic .riviera-opening__lead {
  font-style: italic;
}

.riviera-opening__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 0.9rem;
  margin-top: 0.6rem;
}

/* The sea: the picture across the page, inset a little from the window's sides like a view through a wide window, its
   upper edge the horizon. */
.riviera-opening__sea {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: clamp(11rem, 30svh, 26rem);
  padding: 0 clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.5rem);
}

/* The horizon line runs on past the picture's sides to the window's edges. */
.riviera-opening__sea::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  border-top: 1px solid var(--riviera-line);
}

/* The sun: a pale disc whose middle is the horizon, so its upper half rises behind the words. */
.riviera-opening__sun {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: var(--riviera-sun-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--riviera-sun);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.riviera-opening__media {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  overflow: hidden;
  border-radius: var(--riviera-radius-large);
  background: var(--surface-alt, #f2ece1);
}

.riviera-opening__image,
.riviera-opening__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* No picture: the sun sets on the horizon line under the words, and the next section follows. */
.riviera-opening--bare {
  min-height: 0;
}

.riviera-opening--bare .riviera-opening__sky {
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(4rem, 11vw, 7.5rem);
}

.riviera-opening--bare .riviera-opening__sea {
  flex: none;
  min-height: 0;
  height: 1px;
  padding: 0;
}

.riviera-opening--bare .riviera-opening__sea::before {
  border-top-color: color-mix(in srgb, var(--text-primary, #10233a) 30%, transparent);
}

/* A picture with no words: only the picture, a little lower, with no sun to rise behind nothing. */
.riviera-opening.riviera-opening--wordless {
  --riviera-opening-height: 64svh;
}

.riviera-opening--wordless .riviera-opening__sun {
  display: none;
}

.riviera-opening--wordless .riviera-opening__sea {
  padding-top: clamp(0.75rem, 1.6vw, 1.5rem);
}

/* A phone: the picture reaches the window's sides, the sun is a little smaller. */
@media (max-width: 47.99rem) {
  .riviera-opening {
    --riviera-sun-size: min(30rem, 108vw);
  }

  .riviera-opening__sea {
    padding: 0;
  }

  .riviera-opening__media {
    border-radius: 0;
  }
}

/* ------------------------------------------------------------------ The split opening (hero_image_split) */

/* Words at the left, the picture tall at the right over a panel of fine stripes, with the pale sun behind its top. */
.riviera-hero {
  overflow: hidden;
  padding: clamp(2.75rem, 6vw, 5.5rem) var(--riviera-gutter) clamp(3.25rem, 7vw, 6.5rem);
}

.riviera-hero--words {
  position: relative;
  background: var(--surface-alt, #f2ece1);
  text-align: center;
}

.riviera-hero__inner {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  max-width: var(--riviera-width);
  margin-inline: auto;
}

@media (min-width: 56rem) {
  .riviera-hero:not(.riviera-hero--words) .riviera-hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

.riviera-hero__copy {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  min-width: 0;
}

.riviera-hero--words .riviera-hero__copy {
  justify-items: center;
  max-width: 46rem;
  margin-inline: auto;
}

/* The page's heading. It sits in main, so the shared script sets it smaller before a long word would break; the sizes
   here are chosen so that ordinary words fit at 320 px without it. */
.riviera-hero__title {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.25rem);
  font-weight: var(--riviera-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}

.riviera-hero__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--text-secondary, #4a5a6b);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem);
  font-synthesis: none;
  font-weight: var(--riviera-heading-weight);
  line-height: 1.5;
}

html.riviera-italic .riviera-hero__lead {
  font-style: italic;
}

.riviera-hero__points {
  display: grid;
  gap: 0.6rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.riviera-hero__points li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.riviera-hero__icon {
  margin-top: 0.25em;
  color: var(--accent-ink, #185b8f);
}

.riviera-hero__actions,
.riviera-hero__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.riviera-hero__actions {
  margin-top: 0.4rem;
}

.riviera-hero--words :is(.riviera-hero__actions, .riviera-hero__badges) {
  justify-content: center;
}

.riviera-hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #4a5a6b);
  font-size: 0.9375rem;
}

.riviera-stars {
  display: inline-flex;
  gap: 0.1rem;
}

.riviera-stars svg {
  width: 1rem;
  height: 1rem;
  fill: color-mix(in srgb, var(--text-primary, #10233a) 20%, transparent);
}

.riviera-stars svg.is-full {
  fill: var(--accent-ink, #185b8f);
}

.riviera-hero__trustpilot {
  color: var(--accent-ink, #185b8f);
  font-weight: var(--riviera-body-strong);
}

.riviera-hero__frame {
  position: relative;
  isolation: isolate;
  padding: 0 0 clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2rem);
}

.riviera-hero__sun {
  position: absolute;
  top: -14%;
  right: -16%;
  z-index: -2;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--riviera-sun);
}

.riviera-hero__stripes {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 72%;
  height: 58%;
  border-radius: var(--riviera-radius);
  background: var(--riviera-canvas);
  opacity: 0.75;
}

.riviera-hero__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 46rem;
  border-radius: var(--riviera-radius);
  background: var(--surface-alt, #f2ece1);
}

.riviera-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A phone: the picture a little less tall, so the words and the next section stay close. */
@media (max-width: 55.99rem) {
  .riviera-hero__media {
    aspect-ratio: 1 / 1;
  }
}

/* No picture: the words centred on the sand, with the sun on a horizon line below them. */
.riviera-hero--words::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(36rem, 96vw);
  aspect-ratio: 2 / 1;
  border-radius: 999px 999px 0 0;
  background: color-mix(in srgb, var(--surface, #ffffff) 55%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.riviera-hero--words .riviera-hero__inner {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ Sections */

/* The stock blocks, composed in the theme's look (includes/bind.php writes data-block). Only the blocks the theme
   knows, never a module's section (x_...), which keeps what its module asked for. */

/* A story or an introduction beside a picture: from a tablet up the picture stands tall, over a panel of fine stripes
   that shows at its lower corner. The picture keeps its own shape in a narrow column (a phone), where a tall crop
   would take the whole screen. */
@media (min-width: 48rem) {
  .riviera-main :is([data-block="text_with_image"], [data-block="about_section"]) .kit-split > .kit-picture {
    overflow: visible;
    align-self: center;
    margin: 0 0 clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem);
    background: none;
  }

  .riviera-main :is([data-block="text_with_image"], [data-block="about_section"]) .kit-split > .kit-picture img {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
    max-height: 46rem;
    height: auto;
    border-radius: var(--riviera-radius);
    object-fit: cover;
  }

  .riviera-main :is([data-block="text_with_image"], [data-block="about_section"]) .kit-split > .kit-picture::before {
    content: "";
    position: absolute;
    bottom: clamp(-1.75rem, -2vw, -1.25rem);
    left: clamp(-1.75rem, -2vw, -1.25rem);
    z-index: 0;
    width: 64%;
    height: 52%;
    border-radius: var(--riviera-radius);
    background: var(--riviera-canvas);
    opacity: 0.75;
  }

  /* On a coloured band the stripes take the band's own words' colour. */
  .riviera-main :is([data-block="text_with_image"], [data-block="about_section"]):is(.kit-section--inverse, .kit-section--accent, .kit-section--image) .kit-split > .kit-picture::before {
    background: repeating-linear-gradient(to bottom, var(--kit-section-fg, #ffffff) 0 1px, transparent 1px 6px);
    opacity: 0.45;
  }
}

/* The hem: a deep band (a call to action on the deep sea colour or on the accent) starts under three fine stripes of its
   own colour, as the header does. */
.riviera-main :is(.kit-section--inverse, .kit-section--accent) {
  margin-top: var(--riviera-hem);
}

.riviera-main :is(.kit-section--inverse, .kit-section--accent)::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--riviera-hem);
  background: repeating-linear-gradient(to top, transparent 0 3px, var(--kit-section-bg, #0f2c49) 3px 5px);
  pointer-events: none;
}

/* A deep band that ends the page would run into the footer, which is the same deep colour: the two would read as one
   block and the footer's hem would vanish into the band. A strip of the page's own colour parts them, so each keeps its
   hem. */
.riviera-main:has(> .kit-root:last-child > :is(.kit-section--inverse, .kit-section--accent):last-child) + .riviera-footer {
  margin-top: calc(var(--riviera-hem) + clamp(2rem, 4vw, 3rem));
}

/* ------------------------------------------------------------------ Article body */

.riviera-article {
  padding: clamp(2.75rem, 6vw, 5rem) var(--riviera-gutter);
}

.riviera-article__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.riviera-article__header {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
  text-align: center;
}

.riviera-article__byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  margin: 0;
  color: var(--accent-ink, #185b8f);
  font-size: 0.75rem;
  font-weight: var(--riviera-body-strong);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.riviera-article__header h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: var(--riviera-heading-weight);
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-wrap: balance;
}

.riviera-prose > :first-child {
  margin-top: 0;
}

.riviera-prose > :last-child {
  margin-bottom: 0;
}

.riviera-prose :where(p, ul, ol, figure, table, blockquote, pre) {
  margin: 0 0 1.3em;
}

.riviera-prose :where(h2, h3, h4) {
  margin: 1.9em 0 0.55em;
  font-family: var(--font-heading, serif);
  font-weight: var(--riviera-heading-weight);
  line-height: 1.2;
}

.riviera-prose h2 {
  font-size: 1.85rem;
}

.riviera-prose h3 {
  font-size: 1.45rem;
}

.riviera-prose h4 {
  font-size: 1.2rem;
}

.riviera-prose a {
  color: var(--accent-ink, #185b8f);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* A quotation in the heading face, between two fine lines; in its own italic where the font palette has one. */
.riviera-prose blockquote {
  margin-inline: 0;
  padding: 1.1rem 0;
  border-block: 1px solid var(--riviera-line);
  font-family: var(--font-heading, serif);
  font-size: 1.3rem;
  font-synthesis: none;
  font-weight: var(--riviera-heading-weight);
  line-height: 1.5;
  text-align: center;
}

html.riviera-italic .riviera-prose blockquote {
  font-style: italic;
}

.riviera-prose img {
  display: block;
  border-radius: var(--riviera-radius);
}

.riviera-prose figcaption {
  margin-top: 0.6rem;
  color: var(--text-secondary, #4a5a6b);
  font-size: 0.875rem;
  text-align: center;
}

.riviera-prose :where(th, td) {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--riviera-line);
  text-align: left;
}

/* A rule that sets figures to one width asks for lining figures again: font-variant-numeric replaces the inherited value. */
.riviera-prose table {
  font-variant-numeric: lining-nums tabular-nums;
}

.riviera-prose pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: var(--riviera-radius);
  background: var(--surface-alt, #f2ece1);
}

/* ------------------------------------------------------------------ Divider block */

.riviera-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: calc(var(--riviera-width) + 2 * var(--riviera-gutter));
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--riviera-gutter);
}

.riviera-divider__line {
  width: 100%;
  border-top: 1px solid var(--riviera-line);
}

.riviera-divider--dashed .riviera-divider__line {
  border-top-style: dashed;
}

.riviera-divider--dotted span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--riviera-line);
}

/* ------------------------------------------------------------------ Footer */

/* The deep sea colour with its own words, the quieter words a fifth of the way into it; the same pair in every palette
   and with a website's own colours. The footer starts under the hem, three fine stripes of its own colour, and a faint
   half sun sets under its top edge. */
.riviera-footer {
  --riviera-foot-ink: var(--on-primary, #fbf8f1);
  --riviera-foot-soft: color-mix(in srgb, var(--on-primary, #fbf8f1) 78%, var(--primary, #0f2c49));
  --riviera-foot-line: color-mix(in srgb, var(--on-primary, #fbf8f1) 20%, transparent);
  position: relative;
  isolation: isolate;
  margin-top: var(--riviera-hem);
  background: var(--primary, #0f2c49);
  color: var(--on-primary, #fbf8f1);
}

.riviera-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--riviera-hem);
  background: repeating-linear-gradient(to top, transparent 0 3px, var(--primary, #0f2c49) 3px 5px);
  pointer-events: none;
}

.riviera-footer__sun {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: min(44rem, 100%);
  aspect-ratio: 2 / 1;
  border-radius: 0 0 999px 999px;
  background: color-mix(in srgb, var(--on-primary, #fbf8f1) 5%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.riviera-footer__inner {
  position: relative;
  max-width: calc(var(--riviera-width) + 2 * var(--riviera-gutter));
  margin-inline: auto;
  padding: clamp(3.25rem, 6vw, 5rem) var(--riviera-gutter) 1.75rem;
}

.riviera-footer--minimal .riviera-footer__inner {
  padding-block: 1.75rem;
}

.riviera-footer--minimal .riviera-footer__sun {
  display: none;
}

.riviera-footer__brand {
  display: inline-flex;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.riviera-footer .riviera-brand__name {
  max-width: 100%;
  font-size: 1.85rem;
  line-height: 1.2;
}

.riviera-footer--minimal .riviera-brand__name {
  font-size: 1.35rem;
}

.riviera-footer .riviera-brand__logo,
.riviera-footer .brand-logo-original {
  max-height: 3.25rem;
  width: auto;
}

.riviera-footer .logo-mask {
  background-color: var(--riviera-foot-ink) !important;
}

/* footer_mega opens with an invitation, centred under the sun, and the header's button. */
.riviera-footer__closing {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
  padding-bottom: clamp(2.75rem, 5vw, 4rem);
  border-bottom: 1px solid var(--riviera-foot-line);
  text-align: center;
}

.riviera-footer__invite {
  max-width: 22ch;
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  font-weight: var(--riviera-heading-weight);
  letter-spacing: -0.012em;
  line-height: 1.12;
  text-wrap: balance;
}

/* Two to six columns, each at least a readable width; more rows where the screen is narrow. */
.riviera-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2.25rem 2.75rem;
}

.riviera-footer__about {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.9rem;
}

.riviera-footer__tagline,
.riviera-footer__contact p:not(.riviera-footer__title),
.riviera-footer__copyright {
  margin: 0;
  color: var(--riviera-foot-soft);
  font-size: 0.9375rem;
}

/* A column's title in small spaced capitals. */
.riviera-footer__title {
  margin: 0 0 0.85rem;
  color: var(--riviera-foot-ink);
  font-size: 0.75rem;
  font-weight: var(--riviera-body-strong);
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.riviera-footer__links,
.riviera-footer__contact {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.5rem;
  font-style: normal;
}

.riviera-footer__links a,
.riviera-footer__contact a,
.riviera-footer__legal a,
.riviera-footer__inline a {
  max-width: 100%;
  color: var(--riviera-foot-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color var(--riviera-speed) ease;
}

.riviera-footer__links a:hover,
.riviera-footer__contact a:hover,
.riviera-footer__legal a:hover,
.riviera-footer__inline a:hover {
  color: var(--riviera-foot-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.riviera-footer__social a {
  display: inline-grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--riviera-foot-line);
  border-radius: 50%;
  color: var(--riviera-foot-soft);
  transition: border-color var(--riviera-speed) ease, color var(--riviera-speed) ease;
}

.riviera-footer__social a:hover {
  border-color: currentColor;
  color: var(--riviera-foot-ink);
}

.riviera-footer__bottom,
.riviera-footer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.riviera-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--riviera-foot-line);
}

.riviera-footer__legal,
.riviera-footer__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.riviera-footer__legal a,
.riviera-footer__copyright {
  font-size: 0.875rem;
}

.riviera-footer--minimal .riviera-footer__legal {
  margin-top: 0.85rem;
}

/* The footer's button stands on the deep sea colour: the accent pill reads there in every palette. */
.riviera-footer .riviera-button--accent:focus-visible {
  outline-color: var(--riviera-foot-ink);
}

/* ------------------------------------------------------------------ Page not found */

.riviera-not-found {
  padding: clamp(3.5rem, 9vw, 7rem) var(--riviera-gutter);
  overflow: hidden;
  text-align: center;
}

.riviera-not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  max-width: 36rem;
  margin-inline: auto;
}

/* The number in the heading face, inside the sun, half set on a fine horizon. */
.riviera-not-found__number {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(15rem, 70vw);
  aspect-ratio: 2 / 1;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary, #10233a) 35%, transparent);
  color: var(--accent-ink, #185b8f);
  font-family: var(--font-heading, serif);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  font-weight: var(--riviera-heading-weight);
  line-height: 1.1;
}

.riviera-not-found__number::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px 999px 0 0;
  background: var(--riviera-sun);
}

.riviera-not-found__number span {
  position: relative;
  padding-top: 0.6em;
}

.riviera-not-found h1 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: var(--riviera-heading-weight);
  line-height: 1.12;
  text-wrap: balance;
}

.riviera-not-found p {
  margin: 0;
  color: var(--text-secondary, #4a5a6b);
}

.riviera-not-found__inner > .riviera-button {
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ Form thanks */

.riviera-form-success {
  display: grid;
  gap: 0.5rem;
  padding: 1.5rem 0;
}

.riviera-form-success h3 {
  margin: 0;
  font-family: var(--font-heading, serif);
  font-size: 1.7rem;
  font-weight: var(--riviera-heading-weight);
  line-height: 1.2;
}

.riviera-form-success p {
  margin: 0;
  color: var(--text-secondary, #4a5a6b);
}

/* ------------------------------------------------------------------ The phone action bar */

/* The shared bar (resilience.css) on the theme's surface, with its pill. */
body .theme-action-bar {
  border-top: 1px solid var(--riviera-line);
  background: var(--surface, #ffffff);
}

/* ------------------------------------------------------------------ Without scripts, and with less motion */

/* Without scripts the menu button does nothing, so it is hidden and the phone menu is a plain list under the bar on a
   phone: every page stays reachable (verify-theme-browser.mjs --chrome --no-js). */
@media (scripting: none) {
  .riviera-menu-button {
    display: none !important;
  }

  .riviera-drawer[hidden] {
    position: static;
    display: block;
    max-height: none;
    box-shadow: none;
  }
}

@media (scripting: none) and (min-width: 64rem) {
  .riviera-drawer[hidden] {
    display: none;
  }
}

/* Nothing in this theme moves for a visitor who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}