/* Terrace Belle: a 1930s Great Ocean Road travel poster, brought up to date.
   Tokens and the shape rule follow the sealed design (specs/terracebelle-site-v3/design.md, "Visual system").
   Shape rule, written down: 3px corners on photographs and the print, 8px on buttons, inputs and panels,
   6px on tourist-sign chips; the sun is the only circle. */

@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-var.e4b53413.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-text-var.af376540.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-text-italic.123e7044.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Text token pairs (all AA): ink/bark 14.2, ink/paper 15.4, gum/bark 5.4, gum/paper 5.8, ocean/bark 10.4,
     ocean on sand 6.0, white/ocean 12.0, sand/ocean 6.0, white/brown 10.0, ink on sand 8.1. */
  --ocean: #0D3B4F;
  --ink: #142320;
  --bark: #EEF0EA;
  --paper: #F8F9F5;
  --gum: #4A6858;
  --sand: #DDB06A;
  --brown: #5A3B2A;
  --white: #FFFFFF;
  --line: #D4DBD1;

  --font-display: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;

  --radius-photo: 3px;
  --radius-ui: 8px;
  --radius-chip: 6px;

  --content: 72rem;
  --gutter: 20px;
  --section-space: clamp(4rem, 8vw, 8rem);
  --measure: 38rem;
  --focus: var(--ocean);
}

/* ------------------------------------------------------------------ base */

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

[hidden] {
  display: none !important;
}

html {
  background: var(--bark);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

body {
  margin: 0;
  background: var(--ocean);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
}

main,
.site-header {
  background: var(--bark);
}

main:focus {
  outline: none;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

picture {
  display: block;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  color: var(--ocean);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
}

h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.2rem);
}

/* Section headings carry a short sand rule: the one accent of the visual system. */
.section h2:not(.panel__title)::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 0.55em;
  border-radius: 2px;
  background: var(--sand);
}

h3 {
  font-size: 1.3rem;
  line-height: 1.2;
}

p {
  max-width: var(--measure);
  margin: 0 0 1em;
}

a {
  color: var(--ocean);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

strong {
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-ui);
  background: var(--ocean);
  color: var(--white);
  font: 600 1rem/1 var(--font-display);
  text-decoration: none;
  --focus: var(--sand);
}

.skip-link:focus {
  top: 12px;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ layout */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--content));
  margin-inline: auto;
}

/* Photography gets a wider measure than text. */
.wrap--wide {
  width: min(100% - 2 * var(--gutter), 80rem);
}

.section {
  padding-block: var(--section-space);
  background: var(--bark);
}

.section--paper {
  background: var(--paper);
}

/* Alternating bark and paper sections meet at a hairline in --line, so the change of surface reads clearly. */
main > section + section:not(.band-ocean) {
  border-top: 1px solid var(--line);
}

main > .band-ocean + section {
  border-top: 0;
}

.band-ocean {
  background: var(--ocean);
  color: var(--white);
  --focus: var(--sand);
}

.band-ocean h2,
.band-ocean h3 {
  color: var(--white);
}

.band-ocean a {
  color: var(--white);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--gum);
  font: 500 0.82rem/1.3 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--sand);
}

.lede {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  max-width: none;
  margin: 24px 0 0;
}

.panel {
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius-ui);
  background: var(--paper);
  color: var(--ink);
  --focus: var(--ocean);
}

.section--paper .panel {
  background: var(--bark);
}

.panel__title {
  margin-bottom: 18px;
  font-size: 1.35rem;
}

/* ------------------------------------------------------------------ buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--radius-ui);
  font: 600 1rem/1.1 var(--font-display);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: var(--sand);
  color: var(--ocean);
}

.btn--primary:hover {
  border-color: var(--ocean);
}

.btn--secondary {
  border-color: var(--ocean);
  background: transparent;
  color: var(--ocean);
}

.btn--secondary:hover {
  background: var(--ocean);
  color: var(--white);
}

.btn--light {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
}

.btn--light:hover {
  background: var(--white);
  color: var(--ocean);
}

.btn--small {
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.95rem;
}

.btn--block {
  width: 100%;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ocean);
  font: 500 1rem/1.3 var(--font-display);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--gum);
}

/* ------------------------------------------------------------------ header */

/* Header: one row from 768px; below 768px it wraps (see the phone rules after .header-cta). */
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 24px;
  padding-block: 10px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ocean);
  font: 500 1rem/1 var(--font-display);
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  margin: 0 -10px 0 0;
  padding: 0;
  list-style: none;
}

.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--ink);
  font: 500 0.95rem/1.2 var(--font-display);
  text-decoration: none;
}

.site-nav a:not(.btn):hover {
  color: var(--ocean);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-nav a[aria-current="page"]:not(.btn) {
  color: var(--ocean);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-nav__cta {
  margin-left: 8px;
}

.header-cta {
  display: none;
}

/* Below 768px the wordmark and the Check dates button share the first row (inside the first 64px); the text
   links wrap underneath onto as many short lines as needed. No hamburger, no scroll row, no script. */
@media (max-width: 767.98px) {
  .site-header__bar {
    gap: 2px 10px;
    padding-block: 8px 10px;
  }

  .header-cta {
    display: inline-flex;
  }

  .site-nav {
    flex: 1 0 100%;
  }

  .site-nav ul {
    margin: 0 0 0 -10px;
  }

  .site-nav__cta {
    display: none;
  }
}

/* The narrowest phones: a slightly tighter wordmark and button keep both on the first row. */
@media (max-width: 359.98px) {
  .wordmark {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
  }

  .header-cta {
    padding: 0 12px;
  }
}

/* ------------------------------------------------------------------ hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(48px, 7vw, 88px);
  background: var(--bark);
}

.hero__media {
  order: -1;
  padding: 4px var(--gutter) 0;
}

.hero__picture {
  overflow: hidden;
  border-radius: var(--radius-photo);
}

.hero__picture img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 35% 50%;
}

.hero__text {
  padding: 28px var(--gutter) 0;
}

.hero h1 {
  max-width: 13ch;
  margin-bottom: 16px;
}

.hero .lede {
  margin-bottom: 26px;
}

figure.hero__media {
  margin: 0;
}

.hero__caption {
  margin-top: 10px;
  color: var(--gum);
  font-size: 0.95rem;
  font-style: italic;
}

/* Below 900px the hero is photo first, then the text and the booking form on bark. From 900px: a split, text and
   form in five columns, the photo in seven at its native 4:3, never wider than 880px. */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: max(var(--gutter), calc((100% - var(--content)) / 2)) minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    padding-top: clamp(24px, 3vw, 48px);
  }

  .hero__text {
    grid-row: 1;
    grid-column: 2;
    padding: 8px clamp(24px, 3.4vw, 56px) 0 0;
  }

  .hero__media {
    position: sticky;
    top: 24px;
    grid-row: 1;
    grid-column: 3;
    order: 0;
    padding: 0 var(--gutter) 0 0;
  }

  .hero__picture {
    max-width: 880px;
  }
}

/* ------------------------------------------------------------------ Home cover: the photograph and the drive */

/* Home's header is transparent over the cover photograph. Its own backdrop, a dark gradient that runs past its bottom
   edge, keeps every link at AA contrast over the brightest sky in the photograph or the drawing. */
.site-header--over {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 30;
  background: transparent;
  --focus: var(--paper);
}

.site-header--over::before {
  content: "";
  position: absolute;
  inset: 0 0 -64px;
  z-index: -1;
  background: linear-gradient(180deg, rgb(7 24 31 / 0.74) 0%, rgb(7 24 31 / 0.65) calc(100% - 64px), rgb(7 24 31 / 0) 100%);
  pointer-events: none;
}

.site-header--over .wordmark,
.site-header--over .site-nav a:not(.btn) {
  color: var(--paper);
}

.site-header--over .site-nav a:not(.btn):hover,
.site-header--over .site-nav a[aria-current="page"]:not(.btn) {
  color: var(--white);
}

/* The cover is one column at every width. Below 768px, and up to 1023px: the photograph fills at least 72% of the
   viewport height with the header over its top and the headline over its foot, and the booking bar sits directly
   below it. From 1024px the photograph fills the whole first screen and the booking bar floats inside its foot. */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(max(76vh, 28rem), auto) auto;
  grid-template-rows: minmax(max(76svh, 28rem), auto) auto;
  background: var(--bark);
}

.cover__media {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  background: #2F4A3B;
}

.cover__picture,
.cover__drive {
  position: absolute;
  inset: 0;
}

/* The photograph and the drawing crop the same way (centred cover and xMidYMid slice), so the last frame of the
   drive lies exactly on the photograph. */
.cover__picture img,
.cover__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cover__picture img {
  object-fit: cover;
  object-position: 50% 50%;
}

.cover__text {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: end;
  padding: 176px var(--gutter) 96px;
  color: var(--paper);
  --focus: var(--paper);
}

/* The local scrim: dark behind the text block only, fading out above it and towards the right. */
.cover__text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgb(7 24 31 / 0.78) 0, rgb(7 24 31 / 0.62) calc(100% - 150px), rgb(7 24 31 / 0) 100%);
  pointer-events: none;
}

.cover__text > * {
  max-width: 40rem;
}

.cover__eyebrow {
  color: var(--paper);
}

.cover h1 {
  max-width: 16ch;
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(2.3rem, 1.2rem + 4.4vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.cover__lede {
  max-width: 34rem;
  margin: 0;
  color: var(--paper);
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.45;
}

.cover__replay {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 var(--gutter) 26px;
  padding: 0 16px 0 13px;
  border: 1.5px solid rgb(248 249 245 / 0.72);
  border-radius: var(--radius-ui);
  background: rgb(7 24 31 / 0.74);
  color: var(--paper);
  font: 500 0.95rem/1 var(--font-display);
  letter-spacing: 0.01em;
  cursor: pointer;
  --focus: var(--paper);
}

.cover__replay:hover {
  border-color: var(--paper);
  background: rgb(7 24 31 / 0.9);
}

.cover__replay-icon {
  flex: none;
}

.cover__book {
  position: relative;
  z-index: 1;
  grid-area: 2 / 1;
  padding: 18px var(--gutter) clamp(36px, 7vw, 64px);
}

@media (min-width: 1024px) {
  .cover {
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: max(100vh, 40rem);
    min-height: max(100svh, 40rem);
    --cover-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  }

  .cover__media {
    grid-area: 1 / 1 / 3 / 2;
  }

  .cover__text {
    justify-self: start;
    width: min(100%, 70rem);
    padding: 120px 72px 34px var(--cover-inset);
  }

  .cover__text::before {
    background: linear-gradient(90deg, rgb(7 24 31 / 0.68) 0%, rgb(7 24 31 / 0.58) 70%, rgb(7 24 31 / 0) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px);
    mask-image: linear-gradient(180deg, transparent 0, #000 110px);
  }

  .cover__replay {
    justify-self: end;
    margin: 0 var(--cover-inset) 34px;
  }

  .cover__book {
    padding: 0 var(--cover-inset) clamp(28px, 4.4vh, 48px);
    filter: drop-shadow(0 18px 34px rgb(7 24 31 / 0.34));
  }

  /* The bar and the walk-and-driveway line read as one card: the line is its footer. */
  :is(.cover__book, .closing__form) .panel--bar {
    padding: 20px 22px 16px;
    border-radius: var(--radius-ui) var(--radius-ui) 0 0;
    box-shadow: none;
  }

  :is(.cover__book, .closing__form) .walk-note {
    max-width: none;
    margin: 0;
    padding: 12px 22px 14px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius-ui) var(--radius-ui);
    background: var(--paper);
    font-size: 0.92rem;
  }
}

/* ------------------------------------------------------------------ booking form and fields */

/* Booking cards sit slightly raised: a soft shadow only (no glass, no blur filters). */
.panel--form {
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(13, 59, 79, 0.08), 0 14px 30px -18px rgba(13, 59, 79, 0.4);
}

.section--paper .panel--form {
  background: var(--bark);
}

.booking__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

/* Below 768px the four booking fields stay two by two (arrival and departure, adults and children); under 360px
   they stack in one column. */
@media (max-width: 359.98px) {
  .booking__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  min-width: 0;
}

.field label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font: 500 0.92rem/1.3 var(--font-display);
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--gum);
  border-radius: var(--radius-ui);
  background: var(--white);
  color: var(--ink);
  font: 400 1rem/1.3 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.field textarea {
  min-height: 10rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  resize: vertical;
}

.field input,
.field select {
  accent-color: var(--ocean);
  color-scheme: light;
  cursor: pointer;
}

.field input::-webkit-calendar-picker-indicator {
  opacity: 0.75;
  cursor: pointer;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 1px;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--brown);
  border-width: 2px;
}

.beds-note {
  margin: 16px 0;
  color: var(--gum);
  font-size: 0.98rem;
  line-height: 1.5;
}

.beds-note strong {
  color: var(--ink);
}

.beds-note--plain {
  margin: 0;
  color: var(--ink);
}

.beds-note--panel {
  padding: 16px 18px;
  border-radius: var(--radius-ui);
  background: var(--bark);
  color: var(--ink);
}

/* The booking bar (Home): below 768px, and up to 1023px, the same two-by-two fields as every booking form; from
   1024px the four fields and Check dates share one row, with the bed list and the booking note side by side under it. */
.booking--bar .field label {
  color: var(--gum);
  font: 600 0.74rem/1.3 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.booking--bar .field input,
.booking--bar .field select {
  min-height: 52px;
  border-color: #B9C4BC;
  font-size: 1.02rem;
}

.booking--bar .field input:hover,
.booking--bar .field select:hover {
  border-color: var(--gum);
}

.booking--bar .btn {
  min-height: 52px;
}

@media (min-width: 1024px) {
  .booking--bar {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(11.5rem, auto);
    grid-template-areas:
      "fields fields submit"
      "error error error"
      "beds note note";
    column-gap: 20px;
    align-items: end;
  }

  .booking--bar .booking__fields {
    grid-area: fields;
    grid-template-columns: 1.25fr 1.25fr 1fr 1fr;
    gap: 12px;
  }

  .booking--bar .btn {
    grid-area: submit;
    padding-inline: 28px;
    font-size: 1.05rem;
  }

  .booking--bar .form-error {
    grid-area: error;
    margin: 14px 0 0;
  }

  .booking--bar .beds-note,
  .booking--bar .booking-note {
    margin: 14px 0 0;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .booking--bar .beds-note {
    grid-area: beds;
  }

  .booking--bar .booking-note {
    grid-area: note;
  }
}

.form-error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--brown);
  border-radius: var(--radius-ui);
  background: var(--white);
  color: var(--ink);
  font: 500 0.98rem/1.4 var(--font-display);
}

/* The spam-check line on the enquiry form: a quieter companion to the send outcome above it. */
.form-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--gum);
  border-radius: var(--radius-ui);
  background: var(--white);
  color: var(--ink);
  font: 500 0.98rem/1.4 var(--font-display);
}

.booking-note {
  margin: 14px 0 0;
  color: var(--gum);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* A quiet callout: hairline border on a paper ground, icon in gum, plain text (not a warning). */
.walk-note {
  display: grid;
  max-width: none;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: var(--paper);
  color: var(--gum);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ lists */

.notes,
.facts-list,
.room-lines {
  display: grid;
  gap: 14px;
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
}

.notes li,
.facts-list li,
.room-lines li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  max-width: var(--measure);
}

.notes .icon,
.facts-list .icon,
.room-lines .icon {
  margin-top: 2px;
}

.terms,
.features,
.plain-list,
.checklist {
  display: grid;
  gap: 8px;
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
}

.terms li,
.features li,
.plain-list li,
.checklist li {
  position: relative;
  max-width: var(--measure);
  padding-left: 22px;
}

.terms li::before,
.features li::before,
.plain-list li::before,
.checklist li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--gum);
}

.terms li::before {
  background: var(--sand);
}

/* Suite features are short: two columns at every width, so below 768px too. */
.features {
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 8px 32px;
}

.terms--compact {
  gap: 4px;
  margin: 0;
}

/* ------------------------------------------------------------------ intro */

.intro__inner > * {
  max-width: 46rem;
}

/* Below 768px, and up to 1023px, the intro heading sits above its text; from 1024px beside it. */
@media (min-width: 1024px) {
  .intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px 64px;
    align-items: start;
  }

  .intro__body {
    padding-top: 6px;
  }
}

.intro__lead {
  max-width: 34ch;
  color: var(--ocean);
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.05rem);
  line-height: 1.38;
}

/* ------------------------------------------------------------------ "Lorne, right now" */

.today__head {
  max-width: 44rem;
  margin-bottom: clamp(24px, 4vw, 44px);
}

.today__lede {
  margin: 0;
  color: var(--white);
  font-size: 1.1rem;
}

.today__grid {
  display: grid;
  gap: 28px;
}

/* Below 768px the print, its legend and the readouts stack in one column. From 1024px: the print in eight columns,
   the readouts beside it in four. */
@media (min-width: 1024px) {
  .today__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .today__print {
    grid-column: 1 / span 8;
  }

  .today__readouts {
    grid-column: 9 / span 4;
    padding-top: 8px;
    padding-left: 12px;
  }
}

.print {
  margin: 0;
  padding: clamp(10px, 1.8vw, 22px) clamp(10px, 1.8vw, 22px) clamp(14px, 2vw, 22px);
  border-radius: var(--radius-photo);
  background: var(--paper);
  color: var(--ink);
}

.print__image {
  overflow: hidden;
  border-radius: var(--radius-photo);
  line-height: 0;
}

.scene {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 560;
}

/* Below 768px the print is cropped to 8:5 around the bay, the road and the house (preserveAspectRatio slice), which
   gives it more height, and the in-print markers are enlarged so their numerals stay at least 12px at 320px. */
@media (max-width: 767.98px) {
  .scene {
    aspect-ratio: 8 / 5;
  }

  .scene .marker-mark {
    transform: scale(1.45);
    transform-box: fill-box;
    transform-origin: center;
  }
}

.print__caption {
  margin-top: 14px;
}

.legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font: 500 1em/1.35 var(--font-display);
}

/* Below 768px the legend runs in two columns; from 768px its four entries sit in one row. */
@media (min-width: 768px) {
  .legend {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    gap: 8px 22px;
  }
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend__n {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-photo);
  background: var(--ocean);
  color: var(--white);
  font: 600 1.05rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.print__note {
  max-width: none;
  margin: 10px 0 0;
  color: var(--gum);
  font-size: 0.92rem;
  font-style: italic;
}

.readouts {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 10.5rem;
  font-family: var(--font-display);
}

.readout {
  margin: 0;
}

.readout--forecast {
  color: var(--white);
  font: 500 1.4rem/1.3 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.readout--forecast strong {
  color: var(--sand);
  font-weight: 600;
}

.readout--sun {
  color: var(--sand);
  font: 500 1.05rem/1.4 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.readout--updated {
  color: var(--white);
  font: 400 0.95rem/1.5 var(--font-body);
}

.readout--none {
  color: var(--white);
  font: 500 1.15rem/1.4 var(--font-display);
}

.readouts--compact {
  min-height: 11rem;
}

.readouts--compact .readout--forecast {
  color: var(--ocean);
  font-size: 1.15rem;
}

.readouts--compact .readout--forecast strong {
  color: var(--ocean);
}

.readouts--compact .readout--sun {
  color: var(--gum);
}

.readouts--compact .readout--updated,
.readouts--compact .readout--none {
  color: var(--ink);
}

/* Print-only colours. Day is the default, set as presentation attributes in scene.mjs. No text sits on the sky. */
.scene .text,
.scene text {
  font-family: var(--font-display);
}

.scene .stars,
.scene .moon,
.scene .wx {
  display: none;
}

.scene[data-weather="partly"] :is(.wx-cloud-a, .wx-cloud-b),
.scene[data-weather="cloudy"] :is(.wx-cloud-a, .wx-cloud-b, .wx-cloud-c),
.scene[data-weather="rain"] :is(.wx-cloud-a, .wx-cloud-b, .wx-cloud-c, .wx-rain),
.scene[data-weather="showers"] :is(.wx-cloud-a, .wx-cloud-b, .wx-rain),
.scene[data-weather="thunder"] :is(.wx-cloud-a, .wx-cloud-b, .wx-cloud-c, .wx-rain, .wx-bolt),
.scene[data-weather="fog"] .wx-fog {
  display: inline;
}

.scene[data-weather="cloudy"] .cloud {
  fill: #E3E9E5;
}

.scene:is([data-weather="rain"], [data-weather="showers"], [data-weather="thunder"]) .cloud {
  fill: #AEBBBE;
}

.scene .roof-b { fill: #2F5E70; }
.scene .roof-c { fill: #8A5A3A; }

.scene[data-sky="dawn"] .sky-a { stop-color: #7E9DB2; }
.scene[data-sky="dawn"] .sky-b { stop-color: #D8B7A2; }
.scene[data-sky="dawn"] .sky-c { stop-color: #F2D7A4; }
.scene[data-sky="dawn"] .sun circle { fill: #EFA25C; }
.scene[data-sky="dawn"] .sea-far { fill: #B3A799; }
.scene[data-sky="dawn"] .sea-mid { fill: #557E8C; }
.scene[data-sky="dawn"] .sea { fill: #34667A; }
.scene[data-sky="dawn"] .waves { fill: #B9C7BF; }
.scene[data-sky="dawn"] .land-far { fill: #8EA492; }
.scene[data-sky="dawn"] .land-far-facet { fill: #A5B39C; }
.scene[data-sky="dawn"] .land-far-cliff { fill: #72907C; }

.scene[data-sky="dusk"] .sky-a { stop-color: #33506B; }
.scene[data-sky="dusk"] .sky-b { stop-color: #B47A6E; }
.scene[data-sky="dusk"] .sky-c { stop-color: #E7A86C; }
.scene[data-sky="dusk"] .sun circle { fill: #F0A15A; }
.scene[data-sky="dusk"] .sea-far { fill: #8D7C7A; }
.scene[data-sky="dusk"] .sea-mid { fill: #3B6172; }
.scene[data-sky="dusk"] .sea { fill: #244D60; }
.scene[data-sky="dusk"] .waves { fill: #7F9DA6; }
.scene[data-sky="dusk"] .land-far-left { fill: #7A8D80; }
.scene[data-sky="dusk"] .land-far { fill: #61786A; }
.scene[data-sky="dusk"] .land-far-facet { fill: #708675; }
.scene[data-sky="dusk"] .land-far-cliff { fill: #536A5C; }
.scene[data-sky="dusk"] .land-near { fill: #3E5A4B; }
.scene[data-sky="dusk"] .land-near-lit { fill: #4C6A57; }
.scene[data-sky="dusk"] .land-near-shade { fill: #34503F; }
.scene[data-sky="dusk"] :is(.trunk, .trunk-mid) { fill: #D6CBB8; }
.scene[data-sky="dusk"] .sand { fill: #D8BE97; }
.scene[data-sky="dusk"] .surf { fill: #E0D2C8; }
.scene[data-sky="dusk"] .town-ground { fill: #8FA587; }
.scene[data-sky="dusk"] .town-ground-near { fill: #7E9577; }
.scene[data-sky="dusk"] .wall { fill: #E8E0D2; }

/* Overcast days: a greyer sky behind the clouds. */
.scene[data-sky="day"]:is([data-weather="cloudy"], [data-weather="rain"], [data-weather="showers"], [data-weather="thunder"], [data-weather="fog"]) .sky-a { stop-color: #9DB2B9; }
.scene[data-sky="day"]:is([data-weather="cloudy"], [data-weather="rain"], [data-weather="showers"], [data-weather="thunder"], [data-weather="fog"]) .sky-b { stop-color: #C4D2D1; }
.scene[data-sky="day"]:is([data-weather="cloudy"], [data-weather="rain"], [data-weather="showers"], [data-weather="thunder"], [data-weather="fog"]) .sky-c { stop-color: #E2E8E3; }

.scene[data-sky="night"] .sky-a { stop-color: #06161F; }
.scene[data-sky="night"] .sky-b { stop-color: #0C2A3A; }
.scene[data-sky="night"] .sky-c { stop-color: #18414F; }
.scene[data-sky="night"] .sun { display: none; }
.scene[data-sky="night"] :is(.stars, .moon) { display: inline; }
.scene[data-sky="night"] .sea-far { fill: #1C4455; }
.scene[data-sky="night"] .sea-mid { fill: #133748; }
.scene[data-sky="night"] .sea { fill: #0D2E3D; }
.scene[data-sky="night"] .waves { fill: #3D6676; }
.scene[data-sky="night"] .surf { fill: #5D7F89; }
.scene[data-sky="night"] .land-far-left { fill: #24423A; }
.scene[data-sky="night"] .land-far { fill: #1D3A33; }
.scene[data-sky="night"] .land-far-facet { fill: #244339; }
.scene[data-sky="night"] .land-far-cliff { fill: #17312A; }
.scene[data-sky="night"] .land-near { fill: #183127; }
.scene[data-sky="night"] .land-near-lit { fill: #1F3A2F; }
.scene[data-sky="night"] .land-near-shade { fill: #142A21; }
.scene[data-sky="night"] .sand { fill: #59605A; }
.scene[data-sky="night"] .town-ground { fill: #2B4239; }
.scene[data-sky="night"] .town-ground-near { fill: #253A31; }
.scene[data-sky="night"] .wall { fill: #6E756F; }
.scene[data-sky="night"] .roof { fill: #2B2522; }
.scene[data-sky="night"] .road { fill: #8E7B55; }
.scene[data-sky="night"] .house-wall { fill: #4A3424; }
.scene[data-sky="night"] .house-deck { fill: #2E2018; }
.scene[data-sky="night"] .house-roof { fill: #1A1512; }
.scene[data-sky="night"] :is(.trunk, .trunk-mid) { fill: #8A948F; }
.scene[data-sky="night"] .trunk-shade { fill: #6D7772; }
.scene[data-sky="night"] .bark { fill: #7E837C; }
.scene[data-sky="night"] .leaves { fill: #172D24; }
.scene[data-sky="night"] .leaves-mid { fill: #13261E; }
.scene[data-sky="night"] .leaves-front { fill: #0E2019; }
.scene[data-sky="night"] .ground-near { fill: #0F231B; }
.scene[data-sky="night"] .cloud { fill: #2D4856; }

.scene:is([data-sky="dusk"], [data-sky="night"]) :is(.house-window, .window) {
  fill: #F2CF77;
}

.scene[data-draw="ready"] .road-reveal {
  stroke-dashoffset: 1;
}

.scene[data-draw="go"] .road-reveal {
  stroke-dashoffset: 0;
}

/* ------------------------------------------------------------------ rooms */

.rooms__summary {
  display: grid;
  gap: 10px 32px;
  margin: 8px 0 32px;
}

/* Below 768px the guest count sits above the bed list; from 768px they share one row. */
@media (min-width: 768px) {
  .rooms__summary {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
}

.rooms__count {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ocean);
  font: 600 clamp(1.45rem, 1.2rem + 1vw, 1.9rem)/1.1 var(--font-display);
  letter-spacing: -0.015em;
}

.rooms__count .icon {
  width: 30px;
  height: 30px;
  color: var(--ocean);
}

.rooms__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Below 768px the four room cards sit two by two; from 768px they are two large cards per row. */
@media (min-width: 768px) {
  .rooms__list {
    gap: 44px 28px;
  }
}

.room__picture img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

.room__name {
  margin: 16px 0 6px;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
}

.room__beds {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font: 500 1rem/1.3 var(--font-display);
}

.room__notes {
  margin: 8px 0 0;
  padding: 0;
  color: var(--gum);
  font-size: 0.95rem;
  line-height: 1.45;
  list-style: none;
}

.rooms__baths {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.rooms__baths li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 26rem;
}

/* ------------------------------------------------------------------ gallery and lightbox */

.gallery,
.house-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

/* The Home gallery is an editorial mosaic. Below 768px: two photos per row, the lead and the last photo full width.
   From 1024px: twelve columns of the wide wrap: the lead over eight columns and two rows beside two stacked photos,
   then three across, then two wide. */
.gallery--home .gallery__item--lead,
.gallery--home .gallery__item:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .gallery--home {
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
  }

  .gallery__item {
    grid-column: span 4;
  }

  .gallery--home .gallery__item--lead {
    grid-column: span 8;
    grid-row: span 2;
  }

  .gallery--home .gallery__item--wide,
  .gallery--home .gallery__item:last-child {
    grid-column: span 6;
  }

  .gallery--home .gallery__item--lead :is(.photo-link, picture, img) {
    height: 100%;
  }

  .gallery--home .gallery__item--lead img {
    aspect-ratio: auto;
  }

  .gallery--home .gallery__item--wide img {
    aspect-ratio: 3 / 2;
  }
}

.gallery-section h2 {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.gallery-section .photo-link {
  background: #123F52;
}

.house-photos {
  margin: 0;
}

/* House photo groups: below 768px two thumbnails per row, a lead photo full width. Same from 1024px, inside eight
   columns of the wide wrap beside the text. */
.house-photos__item--large {
  grid-column: 1 / -1;
}

@media (min-width: 1024px) {
  .house-photos {
    gap: 16px;
  }
}

.photo-link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--line);
}

.photo-link img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ocean);
  color: var(--white);
  --focus: var(--sand);
}

.lightbox::backdrop {
  background: var(--ocean);
}

.lightbox__inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.lightbox__count {
  font: 500 0.95rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.lightbox__nav {
  display: flex;
  gap: 8px;
}

.lightbox__figure {
  display: grid;
  place-items: center;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
}

.lightbox__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 150px);
  border-radius: var(--radius-photo);
}

.lightbox__caption {
  max-width: 46rem;
  margin: 0 auto;
  padding: 12px 18px 20px;
  font-size: 1.05rem;
  font-style: italic;
  text-align: center;
}

/* ------------------------------------------------------------------ good to know, teaser, closing */

.know__grid {
  display: grid;
  align-items: start;
  gap: 14px;
  margin-top: 8px;
}

.know__grid .notes {
  margin: 0;
}

/* Below 768px the notes run in one column; from 768px in two. */
@media (min-width: 768px) {
  .know__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
  }
}

.teaser__grid,
.split__grid,
.know-book__grid {
  display: grid;
  gap: 32px;
}

/* The closing booking form is a centred finale: heading, times, then the form, in one column at every width. */
.closing__grid {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.closing__form {
  width: min(100%, 40rem);
  text-align: left;
}

.closing .closing__text p {
  color: var(--paper);
  font-size: 1.1rem;
}

.closing h2::before {
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .closing__form {
    width: min(100%, 68rem);
  }
}

.closing__text p {
  margin-inline: auto;
}

/* Below 768px each of these blocks is one column: text first, then the panel. From 1024px the text takes six or
   seven columns and the panel sits beside it. */
@media (min-width: 1024px) {
  .teaser__grid,
  .split__grid,
  .know-book__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .teaser__text,
  .split__text,
  .know-book__text {
    grid-column: 1 / span 6;
  }

  .teaser__terms,
  .split__aside {
    grid-column: 8 / span 5;
  }

  .know-book__grid .panel--form {
    grid-column: 7 / span 6;
  }
}

.teaser__terms h3,
.split__aside h3 {
  font-size: 1.2rem;
}

/* ------------------------------------------------------------------ page heads */

.page-head {
  padding: clamp(40px, 6vw, 96px) 0 clamp(36px, 5vw, 72px);
  background: var(--bark);
}

.page-head--tight {
  padding-bottom: clamp(28px, 4vw, 48px);
}

.page-head h1 {
  max-width: 20ch;
}

.page-head .lede {
  margin-bottom: 0;
}

.page-head--message {
  min-height: 52vh;
}

.message .lede {
  margin-bottom: 14px;
}

.message .actions {
  margin-bottom: 20px;
}

.link-list {
  display: grid;
  gap: 4px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 1.1rem/1.2 var(--font-display);
}

.noscript-note,
.draft-note {
  max-width: 44rem;
  margin: 22px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-ui);
  background: var(--sand);
  color: var(--ocean);
  font: 500 1rem/1.45 var(--font-display);
}

/* ------------------------------------------------------------------ the house */

.house-part__grid {
  display: grid;
  gap: 28px;
}

/* Below 768px: one column, the text and then its photos. From 1024px: text in four columns, photos in eight (the
   wide wrap); alternate sections swap sides. */
@media (min-width: 1024px) {
  .house-part__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .house-part__text {
    position: sticky;
    top: 32px;
    grid-column: 1 / span 4;
  }

  .house-part__photos {
    grid-column: 5 / span 8;
  }

  .house-part--flip .house-part__text {
    grid-row: 1;
    grid-column: 9 / span 4;
  }

  .house-part--flip .house-part__photos {
    grid-row: 1;
    grid-column: 1 / span 8;
  }
}

/* ------------------------------------------------------------------ Lorne */

.guides {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

/* Below 768px the guide entries run in one column; from 768px in two. */
@media (min-width: 768px) {
  .guides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

.guide {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--radius-ui);
  background: var(--bark);
}

.guide h3 {
  margin-bottom: 10px;
}

.guide .source {
  margin: 0;
  color: var(--gum);
  font-size: 0.92rem;
}

.status {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 10px;
  border-radius: var(--radius-ui);
  background: var(--sand);
  color: var(--ocean);
  font: 600 0.85rem/1.3 var(--font-display);
  letter-spacing: 0.02em;
}

.signs__intro {
  color: var(--gum);
  font-size: 0.98rem;
}

.signs-group__title {
  margin: 30px 0 0;
  font-size: 1.25rem;
}

.signs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* Below 768px the signs run in two columns from 360px (one column under 360px); from 768px they fill as many
   17rem columns as fit. */
@media (min-width: 360px) {
  .signs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .signs {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 14px;
  }
}


.sign {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 20px 18px;
  border-radius: var(--radius-chip);
  background: var(--brown);
  color: var(--white);
  font-family: var(--font-display);
}

.sign::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid var(--white);
  border-radius: 3px;
  pointer-events: none;
}

.sign__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
}

.sign__name {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.2;
}

.sign__km,
.sign__time {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.sign__km {
  white-space: nowrap;
}

.sign__time {
  font-size: 0.98rem;
}

.sign__note {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Phone overrides for the signs, placed after the base rules so they win the cascade. */
@media (max-width: 767.98px) {
  .sign {
    padding: 14px 14px 16px;
  }

  .sign__name {
    font-size: 1rem;
  }
}

.framed img {
  display: block;
  width: 100%;
  border-radius: var(--radius-photo);
}

/* ------------------------------------------------------------------ FAQ */

.faq-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.faq-index a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--gum);
  border-radius: var(--radius-ui);
  color: var(--ocean);
  font: 500 0.95rem/1 var(--font-display);
  text-decoration: none;
}

.faq-group__grid {
  max-width: 46rem;
}

.qa + .qa {
  margin-top: 30px;
}

.qa h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.qa p:last-child,
.qa ul:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ book, enquire, privacy */

.book__grid {
  display: grid;
  gap: 36px;
}

/* Below 768px: the booking form, then the house rules. From 1024px: the form in seven columns, the rules in five. */
@media (min-width: 1024px) {
  .book__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .book__form {
    grid-column: 1 / span 7;
  }

  .book__aside {
    grid-column: 9 / span 4;
  }
}

.book__aside h2 {
  font-size: 1.5rem;
}

.enquiry__grid {
  display: grid;
  gap: 18px;
}

/* Below 768px the enquiry fields run in one column. From 768px: two columns, wide fields across both. */
@media (min-width: 768px) {
  .enquiry__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
    max-width: 50rem;
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

.enquiry__grid .beds-note {
  margin: -6px 0 0;
}

.field__note {
  margin-top: 10px;
  color: var(--gum);
  font-size: 0.95rem;
  line-height: 1.45;
}

.field__note p {
  margin: 0 0 4px;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Below 768px, as at every width, the send area is one column: the spam check, any message, the draft line, the
   short notice, the link that opens the full notice, then the send button. */
.send-row {
  max-width: 40rem;
  margin-top: 36px;
}

.send-row__action .draft-note {
  margin: 0 0 14px;
}

.send-summary {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
}

.app5 {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The summary reads as a plain text link under the short notice, not as a panel. */
.app5__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ocean);
  font: 500 1rem/1.3 var(--font-display);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  list-style: none;
  cursor: pointer;
}

/* The summary is a flex row, which drops the native marker, so a CSS chevron shows that it opens. */
.app5__summary::-webkit-details-marker {
  display: none;
}

.app5__summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.app5[open] .app5__summary::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.app5__body {
  margin-top: 8px;
  padding: 18px 20px;
  border-radius: var(--radius-ui);
  background: var(--bark);
}

.app5__list {
  display: grid;
  margin: 0 0 16px;
}

.app5__list dt {
  margin-top: 12px;
  color: var(--ocean);
  font: 600 0.88rem/1.3 var(--font-display);
}

.app5__list dd {
  margin: 2px 0 0;
}

.app5__list .plain-list {
  margin: 0;
}

/* Below 768px the notice entries stack (label, then text) on phones; from 640px label and text sit side by side. */
@media (min-width: 640px) {
  .app5__list {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    gap: 10px 18px;
  }

  .app5__list dt {
    margin-top: 0;
  }

  .app5__list dd {
    margin: 0;
  }
}

.turnstile {
  min-height: 65px;
  margin-bottom: 16px;
}

.prose {
  max-width: 44rem;
}

.privacy-part + .privacy-part {
  margin-top: 40px;
}

.privacy-part h2 {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
}

.aside-note {
  padding: 14px 18px;
  border-radius: var(--radius-ui);
  background: var(--bark);
  color: var(--gum);
  font-size: 0.95rem;
}

.aside-note p {
  margin: 0 0 6px;
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  padding: clamp(48px, 7vw, 88px) 0 calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(255 255 255 / 0.12);
  background: var(--ocean);
  color: var(--white);
  --focus: var(--sand);
}

.site-footer a {
  color: var(--white);
}

.site-footer__grid {
  display: grid;
  gap: 28px;
}

/* Below 768px the footer stacks: brand, links (two columns), credit, copyright. From 1024px: brand in four
   columns, links in eight. */
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 24px;
  }

  .site-footer__brand {
    grid-column: 1 / span 4;
  }

  .site-footer__nav {
    grid-column: 5 / span 8;
  }

  .site-footer__credit,
  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

.wordmark--light {
  color: var(--sand);
}

.site-footer__brand p {
  margin: 8px 0 0;
}

.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .site-footer__nav ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site-footer__nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font: 500 1rem/1.2 var(--font-display);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.site-footer__nav a:hover {
  text-decoration-thickness: 2px;
}

.site-footer__credit,
.site-footer__legal {
  max-width: 46rem;
  margin: 0;
  font-size: 0.95rem;
}

/* ------------------------------------------------------------------ sticky bar (below 768px) */

.stickybar {
  display: none;
}

/* Below 768px: a fixed bar with Check dates and Enquire side by side, shown once the hero leaves the viewport.
   The scroll padding on html and the matching body padding keep focused elements clear of it. */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }

  .stickybar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 8px 16px env(safe-area-inset-bottom, 0px);
    background: var(--ocean);
    --focus: var(--sand);
  }

  .stickybar .btn {
    min-height: 46px;
    padding: 0 12px;
  }
}

/* ------------------------------------------------------------------ motion */

/* While the drive plays the headline waits; it fades in at the hand-over (transitions below, motion allowed only). */
.cover[data-drive="playing"] .cover__text {
  opacity: 0;
}

.cover[data-drive="handover"] .cover__drive {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cover[data-drive="handover"] .cover__drive {
    transition: opacity 500ms ease-in-out;
  }

  .cover[data-drive="handover"] .cover__text {
    transition: opacity 450ms ease-out 50ms;
  }

  .hero__picture img {
    animation: tb-settle 900ms cubic-bezier(0.2, 0.65, 0.25, 1) both;
  }

  .photo-link {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  .photo-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -14px rgba(13, 59, 79, 0.55);
  }

  .scene[data-draw="go"] .road-reveal {
    transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0.05, 0.25, 1);
  }
}

@keyframes tb-settle {
  from {
    transform: scale(1.03);
  }

  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .scene .road-reveal {
    stroke-dashoffset: 0 !important;
  }

  .cover__drive,
  .cover__replay {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ desktop body size */

@media (min-width: 1024px) {
  body {
    font-size: 1.1875rem;
  }
}