/* Keep the practical chapter on the site's cream, and make editorial labels legible. */
.practical { background: var(--bg-primary); }
.introduction .opening-about,
.inside-eyebrow,
.design-eyebrow,
.energy-comfort-eyebrow,
.place-eyebrow { color: #1b211d; }

/* Floating controls inherit the same living cream glass as the header. */
body > button.message-sally,
.back-to-top {
  background: rgba(240, 235, 222, var(--header-opacity, 1));
  color: #1b211d;
  border-color: rgba(27, 33, 29, .65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-text-fill-color: #1b211d;
  font-weight: 600;
}

/* Give Book Direct a solid green surface and cream lettering at every size. */
.site-topbar button[data-booking] {
  background: #1b211d;
  color: #f0ebde;
  border-color: #1b211d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  -webkit-text-fill-color: #f0ebde;
  font-weight: 600;
}

/* Barley visual test: carry the section-strip colour through the primary
   guest actions while retaining their established sizes and proportions. */
.site-topbar button[data-booking],
.interior-video-trigger .video-play-control,
.stay-panel .stay-check,
body > button.message-sally,
.back-to-top {
  background: #A58A59;
  color: #181818;
  border-color: rgba(24, 24, 24, .65);
  -webkit-text-fill-color: #181818;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.interior-video-trigger .video-play-control {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-topbar button[data-booking] svg,
.interior-video-trigger .video-play-control svg,
.stay-panel .stay-check span,
body > button.message-sally svg,
.back-to-top svg { color: currentColor; }

@media (hover: hover) {
  .site-topbar button[data-booking]:hover,
  .interior-video-trigger:hover .video-play-control,
  .stay-panel .stay-check:hover,
  body > button.message-sally:hover,
  .back-to-top:hover { background: #B89C68; opacity: 1; }
}
.site-topbar button[data-booking]:active,
.interior-video-trigger:active .video-play-control,
.stay-panel .stay-check:active,
body > button.message-sally:active,
.back-to-top:active { background: #8E764B; }
.site-topbar button[data-booking]:focus-visible,
.interior-video-trigger:focus-visible .video-play-control,
.stay-panel .stay-check:focus-visible,
body > button.message-sally:focus-visible,
.back-to-top:focus-visible { outline: 2px solid #181818; outline-offset: 3px; }

/* Keep the two persistent floating controls in their original cream finish. */
body > button.message-sally,
.back-to-top {
  background: rgba(240, 235, 222, var(--header-opacity, 1));
  color: #1b211d;
  border-color: rgba(27, 33, 29, .65);
  -webkit-text-fill-color: #1b211d;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (hover: hover) {
  body > button.message-sally:hover,
  .back-to-top:hover { background: rgba(240, 235, 222, 1); }
}
body > button.message-sally:active,
.back-to-top:active { background: rgba(224, 217, 201, 1); }

@media (orientation: landscape) {
  .carousel-primary .carousel-card,
  .carousel-primary .carousel-card img { opacity: 1; }
}

/* Practical details have two clear levels: concise stay facts and quieter
   explanatory notes. */
.practical .practical-explainer,
.energy-comfort-copy > .practical-explainer {
  max-width: 36ch;
  font: 400 clamp(13px, 1vw, 15px)/1.55 var(--font-mono);
  letter-spacing: 0;
  color: rgba(27, 33, 29, .84);
}
.practical-access .practical-explainer > span { display: block; }
.practical-access .practical-explainer > span + span { margin-top: 14px; }
.energy-comfort { padding-top: 28px; }

/* V5 guest actions: keep phone sizes; use the existing Plex Mono semibold. */
.interior-video-trigger .video-play-control { font-weight: 600; }
@media (min-width: 600px) and (max-width: 1399px) {
  .site-topbar button[data-booking] { --booking-scale: 1.1; }
  .interior-video-trigger .video-play-control { --film-scale: 1.18; }
}
@media (min-width: 1400px) {
  .site-topbar button[data-booking] { --booking-scale: 1.2; }
  .interior-video-trigger .video-play-control { --film-scale: 1.225; }
}
@media (min-width: 600px) {
  .site-topbar button[data-booking] {
    font-size: calc(10px * var(--booking-scale));
    padding: calc(6px * var(--booking-scale)) calc(9px * var(--booking-scale));
    min-height: calc(32px * var(--booking-scale));
  }
  .interior-video-trigger .video-play-control {
    font-size: calc(11px * var(--film-scale));
    height: auto;
    min-height: calc(48px * var(--film-scale));
    /* Preserve the 19px play icon while scaling the space around it. */
    padding: calc((48px * var(--film-scale) - 19px - 2px) / 2) calc(12px * var(--film-scale));
  }
}