@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_assets/fonts/poppins-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --logo: url("/_media/01a157c4-ae95-7e61-b717-93c0027dd1f3/b55790d8-9e8e-4b30-aa1b-471153eeec59/original.png");
  --logo-on-dark: url("/_media/01a157c4-ae95-7e61-b717-93c0027dd1f3/e1b552e9-09d0-4409-a4ae-e00b76d12417/original.png");
  --favicon: url("/_media/01a157c4-ae95-7e61-b717-93c0027dd1f3/c82ba602-42e5-4de6-9473-e4f389f73824/original.png");
  --color-primary: #0d2f2d;
  --color-accent: #b18e19;
  --color-tint: #f8f6ef;
  --font-heading: 'Poppins', 'Avenir Next', Avenir, Montserrat, sans-serif;
  --font-body: 'Poppins', 'Avenir Next', Avenir, Montserrat, sans-serif;
  --radius: 4px;
  --button-radius: 0;
  --button-style: filled;
  --button-text: light;
  --button-case: uppercase;
  --button-arrow: on;
  --header-direction: row;
  --header-style: overlay;
  --menu-button: icon;
  --quick-link-icons: hide;
  --login-style: button;
  --footer-style: brand;
  --hero-overlay: 0.65;
}

/* Classic template. Theme settings arrive as custom properties on :root (see settings.schema.json);
   the ones that switch styles (header, footer, buttons) are classes from `theme` in Liquid. */

:root {
  --color-ink: #1b231c;
  --color-ink-muted: #5a665b;
  --color-surface: #ffffff;
  --color-line: #e1e5dd;
  --color-on-primary: #ffffff;
  /* Text on the dark header and footer styles (the ink as their background) */
  --color-on-dark: #ffffff;
  --color-on-accent: #1b1606;
  /* Form control borders: the ink mixed into the surface, so they keep 3:1 contrast on any theme */
  --color-field-border: color-mix(in srgb, var(--color-ink) 62%, var(--color-surface));
  /* Status colours are template defaults that clubs do not set (each ink keeps AA contrast on its tint) */
  --color-danger: #b42318;
  --color-danger-ink: #8a1c13;
  --color-danger-tint: #fbe0de;
  --color-success-ink: #14532d;
  --color-success-tint: #dff3e4;
  --color-warning-ink: #6b4500;
  --color-warning-tint: #fdf0c8;
  --width: 72rem;
  --gutter: max(1rem, env(safe-area-inset-left, 0px));
}

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font: 1rem/1.6 var(--font-body);
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

a {
  color: var(--mo-brand);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--color-surface);
  padding: 0.5rem 1rem;
}

.muted {
  color: var(--color-ink-muted);
}

.tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--color-tint);
  font-size: 0.75rem;
  font-weight: 600;
}

.button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: var(--button-radius, var(--radius));
  border: 0;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.button--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Announcement banner */
.announcement {
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0.5rem var(--gutter);
  text-align: center;
  font-weight: 600;
}

.announcement a {
  color: inherit;
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  max-width: var(--width);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  flex-direction: var(--header-direction, row);
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.site-header__logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--mo-brand);
  text-decoration: none;
}

.site-nav__list,
.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.site-nav__item {
  position: relative;
}

.site-nav a {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}

.site-nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  padding: 0.5rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  z-index: 5;
}

.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub {
  display: block;
}

.site-nav__sub a {
  display: block;
  padding: 0.35rem 1rem;
  font-weight: 400;
}

.site-header__login {
  margin-left: auto;
  font-weight: 600;
}

.language-switcher {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.language-switcher a[aria-current='true'] {
  font-weight: 700;
  text-decoration: none;
}

/* Sections */
.page-title,
.section {
  max-width: var(--width);
  margin: 0 auto;
  padding: 2rem var(--gutter);
}

.section--tint {
  max-width: none;
  background: var(--color-tint);
}

.section--tint > * {
  max-width: calc(var(--width) - 2 * var(--gutter));
  margin-left: auto;
  margin-right: auto;
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.narrow {
  max-width: 44rem;
}

.rich-text > :first-child,
.rich-text > [data-rg-richtext] > :first-child {
  margin-top: 0;
}

/* Hero */
.hero {
  position: relative;
  display: grid;
  overflow: hidden;
}

.hero--full-bleed {
  min-height: 22rem;
  align-items: end;
  background: var(--mo-brand);
  color: var(--color-on-primary);
}

.hero--full-bleed .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--full-bleed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / calc(var(--hero-overlay, 0.65) * 0.08)),
    rgb(0 0 0 / var(--hero-overlay, 0.65))
  );
}

.hero--full-bleed .hero__content {
  position: relative;
  z-index: 1;
}

.hero--full-bleed .hero__heading {
  color: inherit;
}

.hero__content {
  max-width: var(--width);
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem var(--gutter);
}

.hero__heading {
  font-size: clamp(1.75rem, 5vw, 3rem);
  max-width: 20ch;
}

.hero__text {
  max-width: 55ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.hero--split {
  max-width: var(--width);
  margin: 0 auto;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}

.hero--split .hero__image {
  border-radius: var(--radius);
  order: 2;
  padding-right: var(--gutter);
}

/* Background video: over the image (its fallback), under the gradient and the content */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* iOS shows a play button over a video it won't autoplay (e.g. in Low Power Mode) */
.hero__video::-webkit-media-controls-start-playback-button {
  display: none;
}

.hero__video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.6);
  color: rgb(255 255 255);
  cursor: pointer;
}

.hero__video-toggle:hover {
  background: rgb(0 0 0 / 0.8);
}

.hero__video-toggle[hidden] {
  display: none;
}

.hero__video-toggle[data-state='playing'] .hero__video-icon--play,
.hero__video-toggle[data-state='paused'] .hero__video-icon--pause {
  display: none;
}

/* Room for the button, so it never covers the hero's buttons */
.hero--video .hero__content {
  padding-bottom: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero__video,
  .hero__video-toggle {
    display: none;
  }

  .hero--video .hero__content {
    padding-bottom: 2.5rem;
  }
}

/* Columns and cards */
.columns {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Columns with custom widths (areaWidths, in twelfths): stacked on small screens, then a 12-track grid */
.columns--custom {
  grid-template-columns: minmax(0, 1fr);
}

/* Narrow columns shrink their content instead of overflowing into the next column */
.columns--custom > .columns__area {
  min-width: 0;
  container-type: inline-size;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (min-width: 48rem) {
  .columns--custom.columns--2 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .columns--custom.columns--3,
  .columns--custom.columns--4 {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  .columns--custom.columns--2 .columns__area--w2 {
    grid-column: span 2;
  }

  .columns--custom.columns--2 .columns__area--w3 {
    grid-column: span 3;
  }

  .columns--custom.columns--2 .columns__area--w4 {
    grid-column: span 4;
  }

  .columns--custom.columns--2 .columns__area--w5 {
    grid-column: span 5;
  }

  .columns--custom.columns--2 .columns__area--w6 {
    grid-column: span 6;
  }

  .columns--custom.columns--2 .columns__area--w7 {
    grid-column: span 7;
  }

  .columns--custom.columns--2 .columns__area--w8 {
    grid-column: span 8;
  }

  .columns--custom.columns--2 .columns__area--w9 {
    grid-column: span 9;
  }

  .columns--custom.columns--2 .columns__area--w10 {
    grid-column: span 10;
  }
}

@media (min-width: 64rem) {
  .columns--custom.columns--3,
  .columns--custom.columns--4 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .columns--custom.columns--3 .columns__area--w2,
  .columns--custom.columns--4 .columns__area--w2 {
    grid-column: span 2;
  }

  .columns--custom.columns--3 .columns__area--w3,
  .columns--custom.columns--4 .columns__area--w3 {
    grid-column: span 3;
  }

  .columns--custom.columns--3 .columns__area--w4,
  .columns--custom.columns--4 .columns__area--w4 {
    grid-column: span 4;
  }

  .columns--custom.columns--3 .columns__area--w5,
  .columns--custom.columns--4 .columns__area--w5 {
    grid-column: span 5;
  }

  .columns--custom.columns--3 .columns__area--w6,
  .columns--custom.columns--4 .columns__area--w6 {
    grid-column: span 6;
  }

  .columns--custom.columns--3 .columns__area--w7,
  .columns--custom.columns--4 .columns__area--w7 {
    grid-column: span 7;
  }

  .columns--custom.columns--3 .columns__area--w8,
  .columns--custom.columns--4 .columns__area--w8 {
    grid-column: span 8;
  }

  .columns--custom.columns--3 .columns__area--w9,
  .columns--custom.columns--4 .columns__area--w9 {
    grid-column: span 9;
  }

  .columns--custom.columns--3 .columns__area--w10,
  .columns--custom.columns--4 .columns__area--w10 {
    grid-column: span 10;
  }
}

/* Layout blocks: their children's sections sit inside the layout's own spacing */
.columns__area > .section,
.group__area > .section {
  max-width: none;
  margin: 0;
  padding: 0;
}

.columns__area > * + *,
.group__area > * + * {
  margin-top: 1.5rem;
}

.columns__area > .section--tint,
.group__area > .section--tint {
  padding: 1.5rem;
  border-radius: var(--radius);
}

/* Group */
.group {
  padding: 2rem 0;
}

.group--spacing-large {
  padding: 4rem 0;
}

.group__area {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.group--light {
  background: var(--color-tint);
}

.group--dark {
  background: var(--mo-brand);
  color: var(--color-on-primary);
}

.group--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.group--dark :is(h1, h2, h3, h4, a:not(.button)),
.group--accent :is(h1, h2, h3, h4, a:not(.button)) {
  color: inherit;
}

.group--dark :is(.card, .post-card, .section--tint),
.group--accent :is(.card, .post-card, .section--tint) {
  color: var(--color-ink);
}

.card-grid,
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.card,
.post-card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

.card__image,
.post-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.card__body,
.post-card__body {
  padding: 1rem;
}

/* CTA */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.cta--dark {
  background: var(--mo-brand);
  color: var(--color-on-primary);
}

.cta__text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
}

/* Article */
.article {
  max-width: 48rem;
}

.article__image {
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

/* Footer */
.site-footer {
  margin-top: 3rem;
  background: var(--mo-brand);
  color: var(--color-on-primary);
}

.site-footer__inner {
  max-width: var(--width);
  margin: 0 auto;
  padding: 2rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__powered {
  opacity: 0.8;
  font-size: 0.875rem;
}

/* Booking (island on the booking flow page) */
.rg-booking {
  display: grid;
  gap: 1.25rem;
}

/* Course and day: a tinted toolbar whose controls share one height */
.rg-booking__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: end;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--color-tint);
}

.rg-booking__filters .rg-field {
  min-width: min(100%, 14rem);
}

/* ‹ date ›: one control */
.rg-booking__day {
  display: flex;
  align-items: stretch;
}

.rg-booking__day input {
  border-radius: 0 !important;
  text-align: center;
}

.rg-booking .rg-booking__day .button {
  min-width: 3rem;
  min-height: var(--control-height);
  padding: 0 0.75rem;
  border: 1px solid var(--color-field-border);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-ink);
  font-size: 1.25rem;
  line-height: 1;
}

.rg-booking .rg-booking__day .button:first-child {
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}

.rg-booking .rg-booking__day .button:last-child {
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.rg-booking .rg-booking__day .button:hover:not(:disabled) {
  background: var(--color-tint);
  box-shadow: none;
  color: var(--color-ink);
}

.rg-booking .rg-booking__day .button:disabled {
  color: var(--color-ink-muted);
  opacity: 0.5;
}

.rg-booking > p {
  margin: 0;
}

.rg-booking__date-label {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 700;
}

.rg-booking__date-label::first-letter {
  text-transform: uppercase;
}

/* No times for the day */
.rg-empty {
  margin: 0;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 1.5rem;
  border: 1px dashed var(--color-field-border);
  border-radius: var(--radius);
  text-align: center;
}

.rg-field {
  display: grid;
  gap: 0.35rem;
  font-weight: 600;
}

:root {
  --control-height: 3rem;
}

.rg-field input:not([type='checkbox'], [type='radio']),
.rg-field select,
.rg-field textarea,
.rg-form input:not([type='checkbox'], [type='radio']),
.rg-form textarea,
.rg-form select {
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 400;
}

.rg-field select,
.rg-form select {
  padding-right: 2.5rem;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position:
    right 1.15rem center,
    right 0.8rem center;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.rg-field input:not([type='checkbox'], [type='radio']):focus-visible,
.rg-field select:focus-visible,
.rg-field textarea:focus-visible,
.rg-form input:not([type='checkbox'], [type='radio']):focus-visible,
.rg-form textarea:focus-visible,
.rg-form select:focus-visible {
  border-color: var(--mo-brand);
}

.rg-field [aria-invalid='true'],
.rg-form [aria-invalid='true'] {
  border-color: var(--color-danger);
}

.rg-error {
  color: var(--color-danger);
  font-size: 0.875rem;
  font-weight: 400;
}

.rg-times {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}

.rg-time {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rg-time strong {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.rg-time span {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

/* Free or not, at a glance */
.rg-time span::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-field-border);
}

.rg-time[data-status='free'] span::before {
  background: var(--color-success-ink);
}

.rg-time[data-status='booked-by-me'] span::before {
  background: var(--mo-brand);
}

.rg-time:hover:not(:disabled) {
  border-color: var(--mo-brand);
  box-shadow: 0 0 0 1px var(--mo-brand);
}

.rg-time:disabled {
  cursor: default;
  background: var(--color-tint);
  opacity: 0.7;
}

.rg-booking__form {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.rg-booking__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.rg-booking__selected h2 {
  margin: 0;
  font-size: 1.35rem;
}

.rg-fieldset {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

.rg-fieldset legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

.rg-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.rg-check .muted {
  margin-left: auto;
}

.rg-guest {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
}

.rg-guest__head {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.rg-guest__head .rg-link {
  margin-left: auto;
}

.rg-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mo-brand);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.rg-booking__total {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-size: 1.15rem;
}

.rg-notice {
  margin: 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--color-accent);
  background: var(--color-tint);
}

.rg-booking .button {
  justify-self: start;
}

.rg-hold {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-tint);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.rg-payment-element {
  min-height: 12rem;
}

.rg-link:disabled {
  opacity: 0.6;
  cursor: default;
}

.rg-booking .button:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 40rem) {
  .hero--split {
    grid-template-columns: 1fr;
  }

  .hero--split .hero__image {
    order: 0;
    padding: 0 var(--gutter);
  }

  .language-switcher {
    margin-left: 0;
  }
}

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

/* === site foundations: navigation, sign-in, islands === */
.site-nav a[aria-current='page'] {
  color: var(--mo-brand);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* The menu is a popover on small screens (no JavaScript needed); elsewhere it's always shown */
.site-nav__toggle {
  display: none;
  margin-left: auto;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.site-nav[popover] {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: visible;
}

.site-nav[popover]:not(:popover-open) {
  display: block;
}

.rg-island--session {
  margin-left: auto;
}

.rg-session__login {
  font-weight: 600;
}

.rg-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.rg-session__name {
  font-weight: 600;
}

.rg-session__account {
  font-weight: 600;
}

.rg-session__logout {
  margin: 0;
}

@media (max-width: 48rem) {
  @supports selector(:popover-open) {
    .site-nav__toggle {
      display: inline-block;
    }

    .site-nav[popover]:not(:popover-open) {
      display: none;
    }

    .site-nav[popover]:popover-open {
      position: fixed;
      inset: 4.5rem 0 auto;
      max-height: calc(100vh - 4.5rem);
      padding: 1rem var(--gutter) 1.5rem;
      border-bottom: 1px solid var(--color-line);
      background: var(--color-surface);
      overflow: auto;
    }

    .site-nav[popover]:popover-open .site-nav__list {
      flex-direction: column;
      gap: 0.75rem;
    }

    .site-nav[popover]:popover-open .site-nav__sub {
      display: block;
      position: static;
      min-width: 0;
      padding: 0.25rem 0 0 1rem;
      border: 0;
    }

    .site-nav__toggle + .site-nav + .rg-island--session {
      margin-left: 0;
    }
  }
}

/* === account === */
.rg-account__nav,
.rg-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.rg-account__nav {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}
.rg-account__nav a {
  display: block;
  padding: 0.5rem;
}
.rg-account__nav [aria-current='page'] {
  font-weight: 700;
  text-underline-offset: 0.3em;
}
.rg-account__card {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1rem 0 2rem;
}
.rg-account__signin {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  max-width: 32rem;
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-tint);
}
.rg-account__signin :is(h2, p) {
  margin: 0;
}
.rg-account__totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1.5rem;
  max-width: 24rem;
  margin: 1rem 0 1rem auto;
  font-variant-numeric: tabular-nums;
}
.rg-account__totals > div {
  display: contents;
}
.rg-account__totals dd {
  margin: 0;
  text-align: right;
}
.rg-account__list {
  list-style: none;
  padding: 0;
}
.rg-account__form {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}
.rg-account table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.rg-account th,
.rg-account td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}
.rg-account small {
  display: block;
}
.rg-account dt {
  font-weight: 600;
}
.rg-account dd {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}
.rg-account__payment {
  margin-top: 1rem;
  max-width: 36rem;
}
.rg-account button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* === blocks: content and data blocks === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Image and text */
.image-text {
  display: grid;
  gap: 1.5rem 2.5rem;
  align-items: center;
}

.image-text:has(.image-text__media) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-text--image-right .image-text__media {
  order: 2;
}

.image-text__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  object-fit: cover;
}

.image-text__actions {
  margin: 1.25rem 0 0;
}

/* Gallery: thumbnails open a popover lightbox */
.gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery__grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery__figure,
.gallery__full {
  margin: 0;
}

.gallery__figure figcaption {
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.gallery__open:hover .gallery__thumb {
  opacity: 0.9;
}

.gallery__lightbox {
  width: min(92vw, 72rem);
  max-height: 92vh;
  padding: 3rem 1rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-surface);
  overflow: auto;
}

.gallery__lightbox::backdrop {
  background: rgb(0 0 0 / 0.8);
}

.gallery__full-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: calc(92vh - 7rem);
  width: auto;
  object-fit: contain;
}

.gallery__full figcaption {
  margin-top: 0.75rem;
  text-align: center;
}

.gallery__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Buttons */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.buttons--center {
  justify-content: center;
}

/* Accordion */
.accordion__items {
  border-top: 1px solid var(--color-line);
}

.accordion__item {
  border-bottom: 1px solid var(--color-line);
}

.accordion__question {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.accordion__question::-webkit-details-marker {
  display: none;
}

.accordion__question::after {
  content: '+';
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
}

.accordion__item[open] > .accordion__question::after {
  content: '−';
}

.accordion__answer {
  padding: 0 0 1rem;
}

/* Consent-gated embeds (YouTube, Vimeo, maps, Instagram and Facebook posts) */
.embed {
  margin-top: 0;
  margin-bottom: 0;
}

.embed-frame {
  position: relative;
  width: 100%;
  min-height: 14rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-tint);
}

.embed-frame .rg-consent-embed,
.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.rg-consent-embed__placeholder {
  display: grid;
  place-content: center;
  height: 100%;
  padding: 1rem;
  text-align: center;
  color: var(--color-ink);
}

.rg-consent-embed__placeholder p {
  margin: 0.25rem 0;
}

.rg-consent-embed__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1rem;
}

.embed__caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.embed__invalid {
  padding: 1rem;
  border: 1px dashed var(--color-line);
  color: var(--color-ink-muted);
}

/* Contact and map */
.contact__grid {
  display: grid;
  gap: 1.5rem 2.5rem;
}

.contact__grid--map {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.contact__details {
  margin: 0;
  display: grid;
  gap: 1rem;
  align-content: start;
}

.contact__details dt {
  font-weight: 700;
}

.contact__details dd {
  margin: 0;
}

.contact__details address {
  font-style: normal;
}

.contact__hours {
  white-space: pre-line;
}

.contact__map {
  min-height: 16rem;
}

/* Document list */
.documents__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.documents__link {
  font-weight: 600;
}

.documents__type {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

.documents__description {
  margin: 0.15rem 0 0;
  color: var(--color-ink-muted);
}

/* Spacer and divider */
.spacer {
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.spacer--small {
  height: 1.5rem;
}

.spacer--medium {
  height: 3rem;
}

.spacer--large {
  height: 6rem;
}

.spacer:has(.spacer__line) {
  display: flex;
  align-items: center;
}

.spacer__line {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

/* Facility status: the text says the status, the badge shape repeats it */
.facility-status__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.facility-status__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
}

.facility-status__name {
  font-weight: 700;
}

.facility-status__conditions {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.9rem;
}

.facility-status__conditions div {
  display: flex;
  gap: 0.3rem;
}

.facility-status__conditions dt {
  color: var(--color-ink-muted);
}

.facility-status__conditions dt::after {
  content: ':';
}

.facility-status__conditions dd {
  margin: 0;
  font-weight: 600;
}

.facility-status__note {
  flex-basis: 100%;
  color: var(--color-ink-muted);
  font-size: 0.9rem;
}

.facility-status__updated {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
}

.status-badge__icon::before {
  display: inline-block;
  width: 1em;
  text-align: center;
}

.status-badge--open {
  background: var(--color-success-tint);
  color: var(--color-success-ink);
}

.status-badge--open .status-badge__icon::before {
  content: '✓';
}

.status-badge--limited {
  background: var(--color-warning-tint);
  color: var(--color-warning-ink);
}

.status-badge--limited .status-badge__icon::before {
  content: '!';
}

.status-badge--closed {
  background: var(--color-danger-tint);
  color: var(--color-danger-ink);
}

.status-badge--closed .status-badge__icon::before {
  content: '✕';
}

/* Weather: current conditions, the next hours and a day row; icons are inline SVG in currentColor */
.weather__now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
}

.weather-icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
}

.weather-icon__cloud {
  fill: var(--color-surface);
}

.weather-icon__sun {
  color: var(--color-warning-ink);
}

.weather__now-icon .weather-icon {
  width: 4rem;
  height: 4rem;
}

.weather__temperature {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.weather__unit {
  font-size: 1.25rem;
  font-weight: 400;
}

.weather__summary {
  margin: 0;
  font-weight: 700;
}

.weather__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.25rem 0 0;
}

.weather__details div {
  display: flex;
  gap: 0.35rem;
}

.weather__details dt {
  color: var(--color-ink-muted);
}

.weather__details dd {
  margin: 0;
}

.weather__wind-arrow {
  display: inline-block;
  font-weight: 700;
}

.weather__hours,
.weather__days {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.weather__hours {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
}

.weather__days {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
}

.weather__hour,
.weather__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: center;
}

.weather__day-name {
  font-weight: 700;
  text-transform: capitalize;
}

.weather__day-details {
  font-size: 0.875rem;
}

.weather__credit {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

/* Horizontally scrolling table wrapper (a focusable, labelled region) shared by every table */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 1rem 0;
}

.course-table,
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.course-table caption {
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-align: left;
}

.course-table th,
.course-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-line);
  text-align: center;
  white-space: nowrap;
}

.course-table thead th {
  background: var(--color-tint);
}

.course-table--tees th[scope='row'],
.course-table--tees thead th:first-child {
  text-align: left;
}

.course-table__sum {
  font-weight: 700;
  background: var(--color-tint);
}

.course-table__unit {
  font-weight: 400;
}

.course-table abbr {
  text-decoration: none;
}

.price-list__group + .price-list__group {
  margin-top: 1.5rem;
}

.price-table th,
.price-table td {
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  text-align: left;
}

.price-table__name {
  font-weight: 600;
}

.price-table__note {
  display: block;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.price-table .price-table__price {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
}

.price-table .price-table__action {
  width: 1%;
  text-align: right;
}

.price-table__buy {
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
}

/* A price table in a narrow custom-width column: the name on its own line, price and buy button below */
@container (max-width: 22rem) {
  .columns--custom .price-table,
  .columns--custom .price-table tbody {
    display: block;
  }

  .columns--custom .price-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-line);
  }

  .columns--custom .price-table tbody th,
  .columns--custom .price-table tbody td {
    padding: 0;
    border-bottom: 0;
  }

  .columns--custom .price-table tbody .price-table__name {
    flex-basis: 100%;
  }

  .columns--custom .price-table tbody .price-table__action {
    width: auto;
  }
}

/* Free tee times */
.tee-times__courses {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.tee-times__day {
  margin-top: 0.75rem;
  font-size: 1rem;
}

.tee-times__day .muted {
  font-weight: 400;
}

.tee-times__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tee-times__time {
  display: grid;
  min-width: 6.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.tee-times__time span {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
}

a.tee-times__time:hover {
  border-color: var(--mo-brand);
}

@media (max-width: 48rem) {
  .image-text:has(.image-text__media),
  .contact__grid--map {
    grid-template-columns: 1fr;
  }

  .image-text--image-right .image-text__media {
    order: 0;
  }

  .gallery__grid,
  .gallery__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === shop === */
.shop__categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.shop__category + .shop__category {
  margin-top: 2.5rem;
}

.product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

.product-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.product-card__body {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
}

.product-card__body h3,
.product-card__body p {
  margin: 0;
}

.product-card__price {
  font-weight: 700;
}

.tag--alert {
  margin-left: 0;
  background: var(--color-danger-tint);
  color: var(--color-danger-ink);
}

/* "← Back to …": a pill above a page's title, light on the masthead */
.back-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.95rem 0.4rem 0.8rem;
  border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
  border-radius: 999px;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.back-link::before {
  content: '←' / '';
  transition: transform 0.15s;
}

.back-link:hover {
  border-color: currentcolor;
  background: color-mix(in srgb, currentcolor 10%, transparent);
}

.back-link:hover::before {
  transform: translateX(-0.2rem);
}

@media (prefers-reduced-motion: reduce) {
  .back-link,
  .back-link::before {
    transition: none;
  }
}

.page-title .back-link {
  color: var(--color-on-dark);
}

.page-title--product .page-title__meta {
  margin: 0.75rem 0 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.875rem;
}

/* Product page: the product on the left, the order card (buying and paying) on the right */
.product {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  align-items: start;
}

.product__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.product__body {
  display: grid;
  gap: 1rem;
  max-width: 44rem;
}

.product__body > * {
  margin: 0;
}

.product__price strong {
  font-size: 1.5rem;
}

.product__description {
  white-space: pre-line;
}

.product__terms {
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}

.product__terms summary {
  cursor: pointer;
  font-weight: 600;
}

.product__purchase {
  position: sticky;
  top: calc(var(--mo-bar) + 1rem);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 1.25rem 2.5rem -1.75rem rgb(0 0 0 / 0.35);
}

.product__purchase :is(.rg-shop__buy, .rg-shop__payment) {
  max-width: none;
}

.product__purchase .rg-shop .button {
  justify-self: stretch;
}

.product__purchase .rg-shop__payment h2,
.product__purchase .rg-shop__done h2 {
  font-size: 1.5rem;
}

@media (max-width: 56rem) {
  .product {
    grid-template-columns: minmax(0, 1fr);
  }

  .product__purchase {
    position: static;
  }
}

.rg-shop {
  display: grid;
  gap: 1rem;
}

.rg-shop__price {
  font-size: 1.25rem;
}

.rg-shop__buy,
.rg-shop__payment {
  display: grid;
  gap: 1rem;
  max-width: 28rem;
}

.rg-shop__buy p,
.rg-shop__payment h2,
.rg-shop__payment p,
.rg-shop__done h2,
.rg-shop__done p {
  margin: 0;
}

.rg-shop__total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-line);
}

.rg-shop__status {
  font-weight: 700;
}

.rg-shop .button,
.rg-shop .rg-link {
  justify-self: start;
}

.rg-shop .button:disabled {
  opacity: 0.6;
  cursor: default;
}

.rg-shop__done {
  display: grid;
  gap: 0.75rem;
}

.rg-shop__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rg-shop__actions .button[type='submit'] {
  flex: 1 1 12rem;
}

.rg-shop__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* === seo-settings: footer, branding, consent and quality fixes === */
.language-switcher a {
  display: inline-flex;
  min-width: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
}

.hero--split .hero__image,
.article__image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}
.rg-island--booking {
  min-height: 30rem;
  display: flow-root;
}
.site-header__logo img {
  display: block;
  width: 180px;
  height: 64px;
  max-width: 180px;
  max-height: 64px;
  object-fit: contain;
}
.site-footer a,
.site-footer button {
  color: inherit;
}
.site-footer address {
  font-style: normal;
}
.site-footer h2 {
  font-size: 1.15rem;
}
.site-footer__social,
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__social a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 32px;
}
.site-footer__links a,
.site-footer__links button {
  display: inline-block;
  padding: 0.15rem 0;
  min-height: 28px;
}
.rg-consent-settings {
  background: none;
  border: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.site-footer__powered {
  align-self: end;
}
.rg-consent-banner,
.rg-consent-dialog {
  color: var(--color-ink);
  background: var(--color-surface);
  border: 2px solid var(--mo-brand);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.2);
  max-height: 70vh;
  overflow: auto;
}
.rg-consent-banner[hidden] {
  display: none;
}
.rg-consent-banner {
  position: fixed;
  inset: auto 0 0;
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 20;
}
.rg-consent-banner h2,
.rg-consent-dialog h2 {
  font-size: 1.25rem;
}
.rg-consent-banner p {
  margin: 0.5rem 0 1rem;
}
.rg-consent-banner a,
.rg-consent-dialog a {
  color: var(--mo-brand);
}
.rg-consent-dialog {
  position: fixed;
  inset: 10vh 0 auto;
  z-index: 21;
  width: min(38rem, calc(100% - 2rem));
}
.rg-consent-dialog label {
  display: block;
  padding: 0.5rem 0;
}
.rg-consent-dialog input {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.rg-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.rg-consent-actions .button {
  min-height: 44px;
}

/* === competitions === */
.rg-competition-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
}
.rg-competition-strip a[aria-current] {
  font-weight: 700;
  text-decoration-thickness: 3px;
}
.rg-competition-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-block: 1.5rem;
}
.rg-competition-list {
  list-style: none;
  padding: 0;
}
.rg-competition-list > li {
  display: flex;
  gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-line);
}
.rg-competition-list h3,
.rg-competition-list p {
  margin: 0;
}
.rg-competition-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.rg-competition-table :is(th, td) {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}
.rg-competition-table caption {
  text-align: left;
  font-weight: 700;
  padding-block: 0.75rem;
}
.rg-competition-table thead {
  background: var(--color-tint);
}
.rg-competition-table ul {
  margin: 0;
  padding-left: 1rem;
}
.rg-competition-facts {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) 2fr;
  gap: 0.5rem 1rem;
}
.rg-competition-facts dt {
  font-weight: 700;
}
.rg-competition-facts dd {
  margin: 0;
}
.rg-competition-prose {
  white-space: pre-wrap;
}
.rg-competition-sponsor {
  max-width: 12rem;
  max-height: 6rem;
  object-fit: contain;
}
.rg-registration {
  max-width: 36rem;
  display: grid;
  gap: 1rem;
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.rg-registration .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === events and forms === */
.rg-events__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.rg-events__controls select,
.rg-events__type select {
  max-width: 100%;
  padding: 0.5rem;
  font: inherit;
}
/* Group filter: checkbox chips that work without JavaScript; the box shows the choice, not colour */
.rg-events__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.rg-events__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.rg-events__groups legend {
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 600;
}
.rg-events__type {
  display: grid;
  gap: 0.4rem;
}
.rg-events__type label {
  font-weight: 600;
}
.rg-events__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  cursor: pointer;
}
.chip:has(input:checked) {
  border-color: var(--mo-brand);
  background: var(--color-tint);
  font-weight: 600;
}
.chip input {
  margin: 0;
  accent-color: var(--mo-brand);
}
.tag--group {
  background: transparent;
  border: 1px solid var(--color-line);
}
.rg-events__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.rg-events__item {
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.rg-events__item p {
  margin: 0.5rem 0;
}
.rg-events__month {
  width: 100%;
  min-width: 42rem;
  table-layout: fixed;
  border-collapse: collapse;
}
.rg-events__month caption {
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.5rem 0;
}
.rg-events__month th,
.rg-events__month td {
  padding: 0.5rem;
  border: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.rg-events__month td {
  height: 7rem;
}
.rg-events__month ul {
  padding-left: 1rem;
  margin: 0.5rem 0;
}
.rg-events__month li + li {
  margin-top: 0.75rem;
}
.rg-events__outside {
  background: var(--color-tint);
}
.rg-events__month [aria-current='date'] {
  font-weight: 800;
  text-decoration: underline;
}
.rg-form {
  scroll-margin-top: 1rem;
}
.rg-form form {
  display: grid;
  gap: 1.25rem;
}
.rg-form__field {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.rg-form label,
.rg-form legend {
  font-weight: 600;
}
.rg-form textarea {
  resize: vertical;
}
.rg-form input[type='checkbox'],
.rg-form input[type='radio'] {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.rg-form__field p {
  margin: 0;
}
.rg-form__choice {
  display: block;
  padding: 0.25rem 0;
}
.rg-form__errors {
  border: 2px solid var(--color-danger);
  padding: 1rem;
  margin-bottom: 1rem;
}
.rg-form__errors a {
  color: var(--color-danger-ink);
}
.rg-form__success {
  padding: 1rem;
  border: 2px solid var(--mo-brand);
}
.rg-form .button {
  justify-self: start;
}

/* === menus: utility bar, quick links, footer columns === */
.utility-bar {
  background: var(--color-tint);
  border-bottom: 1px solid var(--color-line);
  font-size: 0.875rem;
}

.utility-bar__list {
  list-style: none;
  max-width: var(--width);
  margin: 0 auto;
  padding: 0.25rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 1.25rem;
}

.utility-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--color-ink);
}

.utility-bar a[aria-current='page'] {
  font-weight: 700;
}

.quick-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.quick-links__link {
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
}

.quick-links__link.button--ghost {
  color: var(--mo-brand);
}

.site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.site-footer__group h2 {
  margin-bottom: 0.25rem;
}

@media (max-width: 48rem) {
  .utility-bar__list {
    justify-content: flex-start;
  }

  .quick-links {
    order: 3;
    flex-basis: 100%;
  }
}

/* === price list from ReadyGolf === */
.price-list__vat {
  font-size: 0.875rem;
}

/* === hole guide === */
.hole-guide__index ol {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.hole-guide__index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
}

.hole-guide__holes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.25rem;
}

.hole-card {
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  scroll-margin-top: 1rem;
}

.hole-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0 0 0.75rem;
}

.hole-card__facts div {
  display: flex;
  gap: 0.35rem;
}

.hole-card__facts dt {
  color: var(--color-ink-muted);
}

.hole-card__facts dd {
  margin: 0;
  font-weight: 700;
}

.hole-card__image {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}

.hole-card__pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.75rem 0 0;
}

.hole-card__pager a[rel='next'] {
  margin-left: auto;
}

/* One hole at a time: the targeted hole, or the first one */
.hole-guide--single .hole-guide__holes {
  grid-template-columns: minmax(0, 48rem);
}

.hole-guide--single .hole-card {
  display: none;
}

.hole-guide--single .hole-card:first-child,
.hole-guide--single:has(.hole-card:target) .hole-card:target {
  display: block;
}

.hole-guide--single:has(.hole-card:target) .hole-card:first-child:not(:target) {
  display: none;
}

/* === logo wall === */
.logo-wall__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--logo-columns, 4), minmax(0, 1fr));
  gap: 1.5rem;
  align-items: center;
}

.logo-wall__grid--3 {
  --logo-columns: 3;
}

.logo-wall__grid--5 {
  --logo-columns: 5;
}

.logo-wall__grid--6 {
  --logo-columns: 6;
}

.logo-wall__item {
  display: flex;
  justify-content: center;
}

.logo-wall__link {
  display: inline-block;
  border-radius: var(--radius);
}

.logo-wall__image {
  display: block;
  max-height: 5rem;
  width: auto;
  object-fit: contain;
}

.logo-wall--grayscale .logo-wall__image {
  filter: grayscale(1);
  opacity: 0.8;
  transition:
    filter 0.2s,
    opacity 0.2s;
}

.logo-wall--grayscale .logo-wall__item:hover .logo-wall__image,
.logo-wall--grayscale .logo-wall__link:focus-visible .logo-wall__image {
  filter: none;
  opacity: 1;
}

@media (max-width: 40rem) {
  .logo-wall__grid {
    --logo-columns: 2;
  }
}

/* ==========================================================================
   Modern: a photo-led, booking-first layer on top of the Classic foundations above.
   A deep brand bar and bands, the accent colour only where something is clickable
   or current, big confident type, one raised booking panel under the home hero.

   Every colour is derived from the theme settings (--color-primary, --color-accent,
   --color-tint). The derived tokens keep WCAG 2.2 AA for any reasonable pair:
     --mo-brand       the primary colour, darkened when too light for white text on it
     --mo-accent-ink  the accent, darkened until it reads as text on white
     --mo-accent-lit  the accent, lightened until it reads as text on the brand colour
     --mo-on-accent   white or near-black, whichever suits the accent's lightness; the
                      Button text setting can pick one (theme-on-accent-light/dark)
   The lightness tokens use CSS relative colours; browsers without them fall back to
   the plain colours (fine for the usual deep primary and mid accent).
   ========================================================================== */

:root {
  --mo-brand-raw: var(--color-primary, #0f3b2e);
  --mo-accent: var(--color-accent, #37c28b);
  --mo-brand: var(--mo-brand-raw);
  --mo-accent-ink: color-mix(in srgb, var(--mo-accent) 55%, #000);
  --mo-accent-lit: color-mix(in srgb, var(--mo-accent) 55%, #fff);
  --mo-on-accent: #11181c;
  --mo-on-accent-dark: #11181c;
  --mo-deep: color-mix(in srgb, var(--mo-brand) 80%, #000);
  --mo-lift: color-mix(in srgb, var(--mo-brand) 94%, var(--mo-accent));
  /* The Dark header and footer style: a neutral charcoal, so it reads apart from the brand colour */
  --mo-night: #2b3035;
  --mo-tint: var(--color-tint, #f3f5f0);
  --mo-line: color-mix(in srgb, var(--mo-tint) 84%, #000);
  --mo-ink: color-mix(in srgb, var(--mo-brand) 16%, #0b0f12);
  --mo-muted: color-mix(in srgb, var(--mo-ink) 72%, #fff);
  --mo-link: var(--mo-accent-ink);
  --mo-accent-on-dark: var(--mo-accent-lit);
  --mo-on-dark-muted: color-mix(in srgb, #fff 84%, var(--mo-brand));
  --mo-r: calc(var(--radius, 8px) * 1.5);
  --mo-chip: var(--button-radius, 999px);
  --mo-edge: max(var(--gutter), calc((100% - var(--mo-width)) / 2));
  --mo-bar: 5rem;
  --mo-masthead: var(--mo-brand);
  --mo-width: 76rem;
  --focus: var(--mo-brand);

  --color-ink: var(--mo-ink);
  --color-ink-muted: var(--mo-muted);
  --color-line: var(--mo-line);
  --color-on-accent: var(--mo-on-accent);
  --color-on-dark: #fff;
  --color-field-border: color-mix(in srgb, var(--mo-ink) 60%, var(--color-surface));
  --width: calc(var(--mo-width) + 2 * var(--gutter));
  --gutter: max(1.25rem, env(safe-area-inset-left, 0px));
}

@supports (color: oklch(from red l c h)) {
  :root {
    --mo-brand: oklch(from var(--mo-brand-raw) min(l, 0.4) c h);
    --mo-accent-ink: oklch(from var(--mo-accent) min(l, 0.48) c h);
    --mo-accent-lit: oklch(from var(--mo-accent) max(l, 0.88) c h);
    --mo-on-accent: oklch(
      from var(--mo-accent) calc(0.2 + clamp(0, (0.565 - l) * 1000, 1) * 0.8) 0.02 h
    );
  }
}

/* Button text: the club's choice overrides the automatic one (white on a mid-tone accent is below
   WCAG AA, so automatic picks near-black there) */
.theme-on-accent-light {
  --mo-on-accent: var(--color-on-dark);
  --color-on-accent: var(--color-on-dark);
}

.theme-on-accent-dark {
  --mo-on-accent: var(--mo-on-accent-dark);
  --color-on-accent: var(--mo-on-accent-dark);
}

/* Dark surfaces flip the focus ring to the light accent; light ones use the brand colour */
.mo-header--brand,
.mo-header--dark,
.group--dark,
.hero,
.mo-footer--brand,
.mo-footer--dark,
.mo-dock,
.page-title,
.breadcrumbs--masthead {
  --focus: var(--mo-accent-lit);
}

.mo-menu {
  --focus: var(--mo-brand);
}

:root:has(.mo-header--dark) {
  --mo-masthead: var(--mo-night);
}

html {
  scroll-padding-top: calc(var(--mo-bar) + 1rem);
}

body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--mo-ink);
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--mo-brand);
}

h1 {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 3.875rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem);
  line-height: 1.1;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
}

a {
  color: var(--mo-link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

.group--dark :is(h1, h2, h3, h4),
.hero :is(h1, h2, h3, h4),
.page-title :is(h1, h2, h3, h4) {
  color: var(--color-on-dark);
}

.group--dark a:not(.button),
.group--dark .rich-text a {
  color: var(--mo-accent-on-dark);
}

.section {
  padding-block: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
}

main > .section:last-child {
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

main > .breadcrumbs + .section,
main > .hero + .section {
  padding-top: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}

.rich-text {
  max-width: 44rem;
}

.rich-text p,
.rich-text ul,
.rich-text ol {
  margin-block: 0 1em;
}

.rich-text :is(h2, h3, h4) {
  margin-top: 1.6em;
}

.rich-text :is(ul, ol) {
  padding-left: 1.25em;
}

.rich-text li + li {
  margin-top: 0.3em;
}

.rich-text li::marker {
  color: var(--mo-link);
}

.rich-text blockquote {
  margin: 1.5em 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--mo-accent);
}

.rich-text img {
  border-radius: var(--mo-r);
}

/* Buttons: shaped by the button-shape setting, accent fill with its own readable text colour,
   ghost outlines on dark. The outline style setting swaps the fill for a ring. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--button-radius, 999px);
  background: var(--mo-accent);
  color: var(--mo-on-accent);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}

.button:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mo-accent) 32%, transparent);
  text-decoration: none;
}

.button--ghost {
  background: transparent;
  color: var(--mo-brand);
  box-shadow: inset 0 0 0 2px currentColor;
}

.button--ghost:hover {
  background: var(--mo-brand);
  color: var(--color-on-dark);
  box-shadow: inset 0 0 0 2px var(--mo-brand);
}

:is(.group--dark, .hero, .mo-header--brand, .mo-header--dark, .mo-footer--brand, .mo-footer--dark)
  .button--ghost {
  color: var(--color-on-dark);
}

:is(.group--dark, .hero, .mo-header--brand, .mo-header--dark, .mo-footer--brand, .mo-footer--dark)
  .button--ghost:hover {
  background: var(--color-on-dark);
  color: var(--mo-brand);
  box-shadow: inset 0 0 0 2px var(--color-on-dark);
}

.theme-buttons-outline .button:not(.button--ghost) {
  background: transparent;
  color: var(--mo-brand);
  box-shadow: inset 0 0 0 2px currentColor;
}

.theme-buttons-outline
  :is(
    .group--dark,
    .hero,
    .cta--dark,
    .mo-header--brand,
    .mo-header--dark,
    .mo-footer--brand,
    .mo-footer--dark
  )
  .button:not(.button--ghost) {
  color: var(--color-on-dark);
}

.theme-buttons-outline :is(.group--accent, .cta--accent) .button:not(.button--ghost) {
  color: var(--mo-on-accent);
}

/* The split hero sits on the page background, not on a photo: undo the dark-surface colours above */
.hero--split {
  --focus: var(--mo-brand);
}

.hero--split :is(h1, h2, h3, h4) {
  color: var(--mo-brand);
}

.hero--split .button--ghost,
.theme-buttons-outline .hero--split .button:not(.button--ghost) {
  color: var(--mo-brand);
}

.hero--split .button--ghost:hover {
  background: var(--mo-brand);
  color: var(--color-on-dark);
  box-shadow: inset 0 0 0 2px var(--mo-brand);
}

.theme-buttons-outline .hero--split .button:not(.button--ghost):hover {
  color: var(--mo-on-accent);
}

.theme-buttons-outline .button:not(.button--ghost):hover {
  background: var(--mo-accent);
  color: var(--mo-on-accent);
  box-shadow: none;
}

.mo-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

/* --------------------------------------------------------------------------
   Header: a calm bar in the header style of the theme (brand, dark or light).
   Booking shortcuts live in it; the full menu opens as a light panel under the
   bar (a popover: no script, Escape closes it).
   -------------------------------------------------------------------------- */
.mo-header {
  --h-bg: var(--mo-brand);
  --h-fg: var(--color-on-dark);
  --h-logo: var(--color-on-dark);
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--h-bg);
  color: var(--h-fg);
}

.mo-header--dark {
  --h-bg: var(--mo-night);
}

.mo-header--light {
  --h-bg: var(--color-surface);
  --h-fg: var(--mo-ink);
  --h-logo: var(--mo-brand);
  box-shadow: 0 1px 0 var(--mo-line);
}

.mo-header__bar {
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
  min-height: var(--mo-bar);
  margin: 0 auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.mo-header__logo {
  display: flex;
  align-items: center;
  flex: none;
  color: var(--h-logo);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-decoration: none;
}

.mo-header__logo img {
  display: block;
  width: auto;
  height: 3.25rem;
}

.mo-actions {
  margin-left: auto;
}

.mo-actions__list {
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-actions__link {
  min-height: 2.5rem;
  padding: 0.4rem 1.15rem;
  white-space: nowrap;
}

.mo-header__end {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
}

.mo-header__end .rg-island--session {
  margin: 0;
}

.mo-header
  :is(.rg-session__login, .rg-session__account, .rg-session__name, .language-switcher a, .rg-link) {
  color: var(--h-fg);
  font-size: 0.9375rem;
  font-weight: 600;
}

.mo-header .rg-session__logout button {
  color: var(--h-fg);
}

.mo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.25rem 0.35rem 0.75rem;
  border: 0;
  background: none;
  color: var(--h-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.mo-toggle__icon {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: background-color 0.15s;
}

.mo-toggle__icon::before,
.mo-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s;
}

.mo-toggle__icon::before {
  top: -0.4rem;
}

.mo-toggle__icon::after {
  top: 0.4rem;
}

.mo-header:has(.mo-menu:popover-open) .mo-toggle__icon {
  background: transparent;
}

.mo-header:has(.mo-menu:popover-open) .mo-toggle__icon::before {
  transform: translateY(0.4rem) rotate(45deg);
}

.mo-header:has(.mo-menu:popover-open) .mo-toggle__icon::after {
  transform: translateY(-0.4rem) rotate(-45deg);
}

.mo-toggle:hover .mo-toggle__label {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Header layout setting "logo centred, menu below": the logo gets its own row on wide screens */
@media (min-width: 48rem) {
  :root:has(.mo-header--column) {
    --mo-bar: 8.25rem;
  }

  .mo-header--column .mo-header__bar {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.25rem;
    padding-block: 0.75rem;
  }

  .mo-header--column .mo-header__logo {
    flex-basis: 100%;
    justify-content: center;
  }

  .mo-header--column .mo-actions {
    margin-left: 0;
  }
}

/* Menu panel */
.mo-menu {
  position: fixed;
  inset: var(--mo-bar) 0 auto 0;
  width: auto;
  max-width: none;
  max-height: calc(100vh - var(--mo-bar));
  max-height: calc(100dvh - var(--mo-bar));
  margin: 0;
  padding: 2.25rem max(var(--gutter), calc((100vw - var(--mo-width)) / 2)) 2.75rem;
  border: 0;
  border-top: 4px solid var(--mo-accent);
  background: var(--color-surface);
  color: var(--mo-ink);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 2rem 3rem -1rem color-mix(in srgb, var(--mo-deep) 45%, transparent);
}

.mo-menu:not(:popover-open) {
  display: none;
}

.mo-menu::backdrop {
  background: color-mix(in srgb, var(--mo-deep) 55%, transparent);
  clip-path: inset(var(--mo-bar) 0 0 0);
}

@media (prefers-reduced-motion: no-preference) {
  .mo-menu:popover-open {
    animation: mo-panel 0.18s ease-out;
  }

  @keyframes mo-panel {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }
}

.mo-menu__list,
.mo-menu__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-menu__list {
  columns: 4 13rem;
  column-gap: 2.5rem;
}

.mo-menu__item {
  break-inside: avoid;
  margin-bottom: 1.75rem;
}

.mo-menu__top {
  display: block;
  padding: 0.25rem 0 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px solid var(--mo-line);
  color: var(--mo-brand);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.mo-menu__top:hover {
  border-bottom-color: var(--mo-accent);
}

.mo-menu__item:not(:has(.mo-menu__sub)) .mo-menu__top {
  margin-bottom: 0;
}

.mo-menu__sub a {
  display: block;
  padding: 0.3rem 0;
  color: var(--mo-ink);
  text-decoration: none;
}

.mo-menu__sub a:hover {
  color: var(--mo-link);
  text-decoration: underline;
}

.mo-menu a[aria-current] {
  color: var(--mo-link);
}

.mo-menu .mo-menu__top[aria-current] {
  border-bottom-color: var(--mo-accent);
}

.mo-menu a[aria-current='page'] {
  font-weight: 700;
}

/* Shortcut bar for phones (rendered last in the DOM, shown at the bottom) */
.mo-dock {
  display: none;
}

@media (max-width: 47.99rem) {
  :root {
    --mo-bar: 4.25rem;
  }

  body {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }

  .mo-header__bar {
    gap: 0.75rem;
  }

  /* The logo gives way to the language, session and menu controls: a text logo wraps, an image scales down */
  .mo-header__logo {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 1.125rem;
    overflow-wrap: anywhere;
  }

  .mo-header__logo img {
    max-width: 100%;
    height: auto;
    max-height: 2.5rem;
  }

  .mo-actions {
    display: none;
  }

  .mo-header__end {
    margin-left: auto;
    gap: 0.5rem;
  }
}

/* Small phones: the menu button keeps its icon and its label for screen readers only */
@media (max-width: 26rem) {
  .mo-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mo-toggle {
    padding-left: 0.25rem;
  }

  .mo-menu {
    padding-top: 1.5rem;
  }

  .mo-menu__list {
    columns: 2 9rem;
    column-gap: 1.5rem;
  }

  .mo-menu__item {
    margin-bottom: 1.25rem;
  }

  .mo-dock {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    background: var(--mo-deep);
    border-top: 1px solid rgb(255 255 255 / 0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mo-dock__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mo-dock__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 4.25rem;
    padding: 0.5rem 0.4rem;
    color: var(--color-on-dark);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
  }

  .mo-dock__link .mo-icon {
    width: 1.375rem;
    height: 1.375rem;
  }

  .mo-dock__link--primary {
    background: var(--mo-accent);
    color: var(--mo-on-accent);
  }

  .mo-dock li + li .mo-dock__link:not(.mo-dock__link--primary) {
    border-left: 1px solid rgb(255 255 255 / 0.18);
  }
}

/* --------------------------------------------------------------------------
   Masthead: pages without a hero get a brand-coloured title band that continues the header
   -------------------------------------------------------------------------- */
.breadcrumbs {
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1rem var(--gutter);
  font-size: 0.9375rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: '/';
  margin: 0 0.6rem;
  opacity: 0.55;
}

.breadcrumbs a {
  color: var(--mo-muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--mo-link);
  text-decoration: underline;
}

.breadcrumbs [aria-current='page'] {
  color: var(--mo-ink);
  font-weight: 600;
}

.breadcrumbs--masthead {
  max-width: none;
  padding: 0.5rem max(var(--gutter), calc((100% - var(--mo-width)) / 2)) 0;
  background: var(--mo-masthead);
  color: var(--color-on-dark);
}

.breadcrumbs--masthead a {
  color: var(--mo-accent-on-dark);
}

.breadcrumbs--masthead a:hover {
  color: var(--color-on-dark);
}

.breadcrumbs--masthead [aria-current='page'] {
  color: var(--color-on-dark);
}

.page-title {
  max-width: none;
  margin: 0;
  padding: 1rem max(var(--gutter), calc((100% - var(--mo-width)) / 2))
    clamp(2rem, 1rem + 3vw, 3.5rem);
  background: var(--mo-masthead);
  color: var(--color-on-dark);
  text-align: left;
}

.page-title h1 {
  margin: 0;
  max-width: 22ch;
}

.page-title__meta {
  margin: 0 0 0.75rem;
  color: var(--mo-accent-on-dark);
  font-weight: 600;
}

/* A masthead with no breadcrumb before it (home has none) still needs top air */
main > .page-title:first-child {
  padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.page-title:has(+ .hero) {
  display: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero--full-bleed {
  min-height: clamp(17rem, 40vw, 30rem);
  align-items: end;
  background: var(--mo-brand);
}

.hero--full-bleed::after {
  /* The hero overlay setting (--hero-overlay: 0.4 light, 0.65 standard, 0.85 strong) scales the brand-tinted fade */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mo-deep) calc(var(--hero-overlay, 0.65) * 15%), transparent) 0%,
    color-mix(in srgb, var(--mo-deep) calc(var(--hero-overlay, 0.65) * 38%), transparent) 40%,
    color-mix(
        in srgb,
        var(--mo-deep) calc(min(var(--hero-overlay, 0.65) * 1.35, 0.95) * 100%),
        transparent
      )
      100%
  );
}

.hero--full-bleed .hero__content {
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
  padding: 3rem var(--gutter) clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.hero--full-bleed .hero__heading {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.5rem, 1.2rem + 5vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--mo-night) 55%, transparent);
}

.hero__text:empty,
.hero__actions:empty {
  display: none;
}

.hero__text {
  margin: 1rem 0 0;
  font-size: 1.1875rem;
}

.hero--photo {
  display: block;
  height: clamp(24rem, 74vh, 46rem);
  background: var(--mo-deep);
}

.hero--photo .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--photo .hero__content {
  position: absolute;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Home: the booking panel rises over the photo (it is the next block in the DOM)
   -------------------------------------------------------------------------- */
.hero--photo + .section {
  position: relative;
  z-index: 2;
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
  margin-top: -5rem;
  padding-top: 0;
  padding-bottom: 0;
}

.hero--photo + .section > .columns {
  gap: 0;
  padding: 0.5rem 0;
  border-radius: var(--mo-r);
  background: var(--color-surface);
  box-shadow:
    0 1.75rem 3.5rem -1.25rem color-mix(in srgb, var(--mo-deep) 50%, transparent),
    0 0 0 1px color-mix(in srgb, var(--mo-deep) 6%, transparent);
}

.hero--photo + .section .columns__area {
  padding: 1.5rem 1.75rem;
}

.hero--photo + .section .columns__area + .columns__area {
  border-left: 1px solid var(--mo-line);
}

.hero--photo + .section .columns__area > .section {
  padding: 0;
}

.hero--photo + .section .rich-text h3 {
  margin: 0 0 0.6rem;
  font-size: 1.125rem;
}

.hero--photo + .section .rich-text p {
  margin: 0 0 0.35rem;
  font-size: 0.9688rem;
  line-height: 1.5;
}

.hero--photo + .section .rich-text p a {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: var(--button-radius, 999px);
  background: var(--mo-tint);
  box-shadow: inset 0 0 0 1px var(--mo-line);
  color: var(--mo-brand);
  font-weight: 700;
  text-decoration: none;
}

.hero--photo + .section .rich-text p a:hover {
  background: var(--mo-accent);
  box-shadow: none;
  color: var(--mo-on-accent);
}

@media (max-width: 62rem) {
  .hero--photo + .section > .columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Custom column widths span a 12-track grid; this two-track layout ignores them */
  .hero--photo + .section .columns__area {
    grid-column: auto;
  }

  .hero--photo + .section .columns__area + .columns__area {
    border-left: 0;
  }

  .hero--photo + .section .columns__area:nth-child(n + 3) {
    border-top: 1px solid var(--mo-line);
  }

  .hero--photo + .section .columns__area:nth-child(even) {
    border-left: 1px solid var(--mo-line);
  }
}

@media (max-width: 36rem) {
  .hero--photo {
    height: clamp(17rem, 52vh, 26rem);
  }

  .hero--photo + .section {
    margin-top: -2.5rem;
  }

  .hero--photo + .section > .columns {
    grid-template-columns: 1fr;
  }

  .hero--photo + .section .columns__area {
    padding: 1.25rem 1.25rem;
  }

  .hero--photo + .section .columns__area:nth-child(even) {
    border-left: 0;
  }

  .hero--photo + .section .columns__area + .columns__area {
    border-top: 1px solid var(--mo-line);
  }
}

/* --------------------------------------------------------------------------
   Groups, bands
   -------------------------------------------------------------------------- */
.group {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.group--spacing-large {
  padding-block: clamp(3.5rem, 2rem + 5vw, 7rem);
}

.group__area {
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
}

.group--light {
  background: var(--mo-tint);
}

.group--dark {
  background: var(--mo-brand);
}

.group--accent {
  background: var(--mo-accent);
  color: var(--mo-on-accent);
}

.group--accent :is(h1, h2, h3, h4, a:not(.button)) {
  color: var(--mo-on-accent);
}

/* A dark group that only holds buttons is a slim shortcut strip */
.group--dark:has(> .group__area > .buttons) {
  padding-block: 0.75rem;
  background: var(--mo-deep);
}

.group__area:has(> .buttons) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.5rem;
}

.group__area > .buttons {
  margin: 0;
  gap: 0.4rem 0.5rem;
}

.group__area > .buttons + .buttons {
  margin-top: 0;
}

.group--dark .buttons .button {
  min-height: 2.5rem;
  padding: 0.3rem 1.1rem;
  box-shadow: none;
  background: transparent;
  color: var(--color-on-dark);
}

.group--dark .buttons .button:hover {
  background: var(--color-surface);
  color: var(--mo-brand);
}

/* Image + text bands run edge to edge in a group: photo one half, words the other */
.group__area:has(> .image-text) {
  max-width: none;
  padding: 0;
}

.group:has(> .group__area > .image-text) {
  padding-block: 0;
}

.group__area > .image-text {
  gap: 0;
  align-items: stretch;
}

.group__area > .image-text:has(.image-text__media) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.group__area > .image-text .image-text__media {
  min-height: clamp(18rem, 36vw, 32rem);
  position: relative;
}

.group__area > .image-text .image-text__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.group__area > .image-text .image-text__content {
  align-self: center;
  padding-block: clamp(2rem, 1rem + 4vw, 5rem);
}

.group__area > .image-text--image-left .image-text__content {
  justify-self: stretch;
  padding-left: clamp(1.5rem, 4vw, 4rem);
  padding-right: max(var(--gutter), calc((100vw - var(--mo-width)) / 2));
}

.group__area > .image-text--image-right .image-text__content {
  justify-self: stretch;
  padding-right: clamp(1.5rem, 4vw, 4rem);
  padding-left: max(var(--gutter), calc((100vw - var(--mo-width)) / 2));
}

.group__area > .image-text .image-text__content h2 {
  margin-bottom: 0.6em;
}

.group__area > .image-text .image-text__content .rich-text {
  font-size: 1.125rem;
}

/* Neighbouring bands alternate a shade so the seam reads without a line */
.group--dark:has(> .group__area > .image-text--image-left) {
  background: var(--mo-lift);
}

.image-text__image {
  border-radius: var(--mo-r);
}

@media (max-width: 47.99rem) {
  .group__area > .image-text:has(.image-text__media) {
    grid-template-columns: 1fr;
  }

  .group__area > .image-text .image-text__media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .group__area > .image-text--image-right .image-text__media {
    order: 0;
  }

  .group__area > .image-text .image-text__content,
  .group__area > .image-text--image-left .image-text__content,
  .group__area > .image-text--image-right .image-text__content {
    justify-self: stretch;
    padding: 2rem var(--gutter) 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   News: the latest post leads, the rest read as a dated list
   -------------------------------------------------------------------------- */
.section--tint {
  background: var(--mo-tint);
  padding-inline: 0;
}

.section--tint > * {
  max-width: calc(var(--mo-width));
  padding-inline: var(--gutter);
  box-sizing: content-box;
}

/* After .post-list's own padding reset, so the list keeps the page gutter on phones */
.section--tint > .post-list {
  padding-inline: var(--gutter);
}

.section__head {
  align-items: end;
  margin-bottom: 1.75rem;
}

.section__head h2 {
  margin: 0;
}

.section__head a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.3rem 1.2rem;
  border-radius: var(--button-radius, 999px);
  box-shadow: inset 0 0 0 2px var(--mo-brand);
  color: var(--mo-brand);
  font-weight: 700;
  text-decoration: none;
}

.section__head a:hover {
  background: var(--mo-brand);
  color: var(--color-on-dark);
}

.post-list {
  display: block;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.post-card {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.post-card__body {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 1.1rem 0;
}

.post-card__body > time {
  grid-row: 1 / span 3;
  padding-top: 0.2rem;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.post-card__body > :not(time) {
  grid-column: 2;
}

.post-card + .post-card {
  border-top: 1px solid var(--mo-line);
}

.post-card h2,
.post-card h3 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.post-card h2 a,
.post-card h3 a {
  color: var(--mo-brand);
  text-decoration: none;
}

.post-card h2 a:hover,
.post-card h3 a:hover {
  color: var(--mo-link);
  text-decoration: underline;
}

.post-card p {
  margin: 0.35rem 0 0;
  max-width: 62ch;
  color: var(--mo-muted);
  font-size: 0.9688rem;
  line-height: 1.55;
}

.post-card .tag {
  margin: 0 0 0 0.5rem;
  background: var(--mo-tint);
}

.post-card__image {
  display: none;
}

/* Home news: first card is a brand-coloured feature tile beside the list */
.section--tint .post-list {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.section--tint .post-card:first-child {
  grid-row: 1 / span 20;
  align-self: stretch;
  border-radius: var(--mo-r);
  background: linear-gradient(155deg, var(--mo-lift), var(--mo-brand) 65%);
  color: var(--color-on-dark);
  /* A dark surface: the light focus ring, as on the other dark surfaces */
  --focus: var(--mo-accent-lit);
}

.section--tint .post-card:first-child .post-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 18rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.section--tint .post-card:first-child time {
  color: var(--mo-accent-on-dark);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.section--tint .post-card:first-child h3 {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.section--tint .post-card:first-child h3 a {
  color: var(--color-on-dark);
}

.section--tint .post-card:first-child h3 a:hover {
  color: var(--color-on-dark);
}

.section--tint .post-card:first-child p {
  margin-top: 0.9rem;
  color: var(--mo-on-dark-muted);
  font-size: 1.0625rem;
}

.section--tint .post-card:nth-child(2) {
  border-top: 0;
}

.section--tint .post-card:not(:first-child) .post-card__body {
  padding-block: 0.85rem;
}

.section--tint .post-card:not(:first-child) p {
  display: none;
}

@media (max-width: 52rem) {
  .section--tint .post-list {
    display: block;
  }

  .section--tint .post-card:first-child .post-card__body {
    min-height: 0;
  }

  .section--tint .post-card:first-child {
    margin-bottom: 0.75rem;
  }

  .post-card__body {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0 1rem;
  }
}

@media (max-width: 36rem) {
  .post-card__body {
    display: block;
  }

  .post-card__body > time {
    display: block;
    margin-bottom: 0.2rem;
  }

  .section--tint .post-card:first-child .post-card__body {
    display: block;
  }
}

/*
 * A news list in a narrow custom-width column takes the layouts the media queries above give it on
 * small screens (the columns are containers; the viewport may still be wide)
 */
@container (max-width: 30rem) {
  .columns--custom .section--tint .post-list {
    display: block;
  }

  .columns--custom .section--tint .post-card:first-child .post-card__body {
    min-height: 0;
  }

  .columns--custom .section--tint .post-card:first-child {
    margin-bottom: 0.75rem;
  }
}

@container (max-width: 20rem) {
  .columns--custom .post-card .post-card__body,
  .columns--custom .section--tint .post-card .post-card__body {
    display: block;
  }

  .columns--custom .post-card .post-card__body > time {
    display: block;
    margin-bottom: 0.2rem;
  }

  /* The tinted section's page gutters would leave almost no room inside a narrow column */
  .columns--custom .section--tint > *,
  .columns--custom .section--tint > .post-list {
    padding-inline: 0;
  }

  .columns--custom .section--tint .post-card:first-child .post-card__body {
    padding: 1rem;
  }

  .columns--custom .section__head {
    flex-wrap: wrap;
  }
}

/* News index and other plain post lists: a wide editorial list */
.section:not(.section--tint) > .post-list {
  max-width: 54rem;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Landing page cards: big tiles, whole tile is the link
   -------------------------------------------------------------------------- */
.card-grid {
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--mo-r);
  background: var(--mo-tint);
  box-shadow: inset 0 0 0 1px var(--mo-line);
  transition:
    background-color 0.15s,
    box-shadow 0.15s;
}

.card:hover,
.card:focus-within {
  background: var(--mo-brand);
  box-shadow: none;
}

.card__image {
  aspect-ratio: 3 / 2;
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 9.5rem;
  padding: 1.5rem 4rem 1.5rem 1.5rem;
}

.card h3 {
  margin: 0;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.card h3 a {
  color: var(--mo-brand);
  text-decoration: none;
}

.card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card:hover h3 a,
.card:focus-within h3 a {
  color: var(--color-on-dark);
}

.card h3 a:focus-visible {
  outline: 0;
}

.card:has(a:focus-visible) {
  outline: 3px solid var(--mo-brand);
  outline-offset: 3px;
}

.card p {
  margin: 0.4rem 0 0;
  color: var(--mo-muted);
}

.card p:empty {
  display: none;
}

.card:hover p,
.card:focus-within p {
  color: var(--mo-on-dark-muted);
}

/* Arrow drawn with borders, not text, so it is never read out */
.card::after {
  content: '';
  position: absolute;
  right: 1.5rem;
  bottom: 1.6rem;
  width: 0.7rem;
  height: 0.7rem;
  border-top: 3px solid var(--mo-link);
  border-right: 3px solid var(--mo-link);
  transform: rotate(45deg);
  transition:
    transform 0.15s,
    border-color 0.15s;
}

.card:hover::after,
.card:focus-within::after {
  border-color: var(--mo-accent-lit);
  transform: translateX(0.3rem) rotate(45deg);
}

.section > h2:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Data table: price lists and course tables you can actually read
   -------------------------------------------------------------------------- */
.data-table__scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--mo-line);
  border-radius: var(--mo-r);
  background:
    linear-gradient(to right, var(--color-surface) 30%, transparent) left / 2rem 100% no-repeat
      local,
    linear-gradient(to left, var(--color-surface) 30%, transparent) right / 2rem 100% no-repeat
      local,
    linear-gradient(
        to right,
        color-mix(in srgb, var(--mo-deep) 18%, transparent),
        color-mix(in srgb, var(--mo-deep) 0%, transparent)
      )
      left / 0.75rem 100% no-repeat scroll,
    linear-gradient(
        to left,
        color-mix(in srgb, var(--mo-deep) 18%, transparent),
        color-mix(in srgb, var(--mo-deep) 0%, transparent)
      )
      right / 0.75rem 100% no-repeat scroll,
    var(--color-surface);
}

.data-table__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.data-table__table caption:empty {
  display: none;
}

.data-table__table caption {
  padding: 1.1rem 1.25rem;
  background: var(--mo-tint);
  border-bottom: 1px solid var(--mo-line);
  color: var(--mo-brand);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-align: left;
}

.data-table__table :is(th, td) {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--mo-line);
  text-align: left;
  vertical-align: top;
}

.data-table__table thead th {
  position: sticky;
  top: 0;
  background: var(--mo-brand);
  color: var(--color-on-dark);
  font-weight: 700;
  white-space: nowrap;
}

.data-table__table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mo-tint) 55%, var(--color-surface));
}

.data-table__table tbody tr:hover {
  background: var(--mo-tint);
}

.data-table__table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

.data-table__table tbody th[scope='row'] {
  font-weight: 700;
  color: var(--mo-brand);
}

.data-table__table td:not(:first-child) {
  font-weight: 500;
}

.data-table__footnote {
  max-width: 54rem;
  margin-top: 0.85rem;
  color: var(--mo-muted);
  font-size: 0.9375rem;
}

.data-table__footnote p {
  margin: 0 0 0.35rem;
}

.data-table.section {
  padding-block: 1.25rem;
}

@media (max-width: 40rem) {
  .data-table__table :is(th, td) {
    padding: 0.65rem 0.85rem;
  }

  .data-table__table caption {
    padding: 0.9rem 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   Gallery (hole maps)
   -------------------------------------------------------------------------- */
.gallery__grid {
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.gallery__grid--2,
.gallery__grid--4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.gallery__figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--mo-r);
  background: var(--mo-tint);
  box-shadow: inset 0 0 0 1px var(--mo-line);
}

.gallery__thumb {
  border-radius: 0;
  aspect-ratio: 4 / 3;
}

.gallery__figure figcaption {
  margin: 0;
  padding: 0.75rem 1rem 0.9rem;
  color: var(--mo-brand);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.gallery__open:hover .gallery__thumb {
  opacity: 1;
  filter: brightness(1.06);
}

.gallery__lightbox {
  background: var(--mo-brand);
  border-radius: var(--mo-r);
}

.gallery__close {
  border-radius: var(--button-radius, 999px);
}

/* --------------------------------------------------------------------------
   Logo wall: sponsor logos of any colour sit on white tiles over a tint band,
   in equal size boxes
   -------------------------------------------------------------------------- */
.logo-wall.section {
  max-width: none;
  background: var(--mo-tint);
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-inline: max(var(--gutter), calc((100% - var(--mo-width)) / 2));
}

.logo-wall h2 {
  margin-bottom: 1.5rem;
}

.logo-wall__grid {
  gap: 0.75rem;
  align-items: stretch;
}

.logo-wall__item {
  align-items: center;
  height: 6.5rem;
  padding: 1rem 1.5rem;
  border-radius: var(--mo-r);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--mo-line);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.logo-wall__item:hover,
.logo-wall__item:focus-within {
  box-shadow: inset 0 0 0 2px var(--mo-accent-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .logo-wall__item:hover,
  .logo-wall__item:focus-within {
    transform: translateY(-2px);
  }
}

.logo-wall__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.logo-wall__image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 3.5rem;
  object-fit: contain;
}

.logo-wall--grayscale .logo-wall__image {
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.2s,
    opacity 0.2s;
}

.logo-wall--grayscale .logo-wall__item:hover .logo-wall__image,
.logo-wall--grayscale .logo-wall__link:focus-visible .logo-wall__image {
  filter: none;
  opacity: 1;
}

.logo-wall__item--empty {
  color: var(--mo-ink);
}

@media (max-width: 64rem) {
  .logo-wall__grid {
    --logo-columns: 3;
  }
}

@media (max-width: 40rem) {
  .logo-wall__grid {
    --logo-columns: 2;
  }

  .logo-wall__item {
    height: 5.5rem;
    padding: 0.85rem 1.1rem;
  }

  .logo-wall__image {
    max-height: 3rem;
  }
}

/* --------------------------------------------------------------------------
   Section navigation (siblings), article, forms, misc
   -------------------------------------------------------------------------- */
.section-nav {
  border-top: 1px solid var(--mo-line);
  background: var(--mo-tint);
}

.section-nav__inner {
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 2rem var(--gutter) 2.25rem;
}

.section-nav__title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.section-nav__title a {
  color: inherit;
}

.section-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 1.1rem;
  border-radius: var(--button-radius, 999px);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--mo-line);
  color: var(--mo-brand);
  font-weight: 600;
  text-decoration: none;
}

.section-nav__list a:hover {
  box-shadow: inset 0 0 0 2px var(--mo-brand);
}

.section-nav__list a[aria-current='page'] {
  background: var(--mo-brand);
  box-shadow: none;
  color: var(--color-on-dark);
}

.article {
  max-width: none;
  margin: 0;
  padding-inline: var(--mo-edge);
}

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

.article .rich-text {
  font-size: 1.125rem;
  line-height: 1.7;
}

.article__image {
  border-radius: var(--mo-r);
}

.article__back {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mo-line);
  font-weight: 700;
}

.rg-form {
  max-width: none;
  margin: 0;
  padding-inline: var(--mo-edge);
}

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

/* The masthead already says it; the form's own title stays for the outline only */
.page-title ~ .rg-form > h2:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rg-form form {
  max-width: 40rem;
}

.rg-form label,
.rg-form legend {
  font-weight: 700;
  color: var(--mo-brand);
}

.rg-form input:not([type='checkbox'], [type='radio']),
.rg-form textarea,
.rg-form select {
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border-width: 2px;
  border-radius: 0.5rem;
}

.rg-form input:not([type='checkbox'], [type='radio']):focus-visible,
.rg-form textarea:focus-visible,
.rg-form select:focus-visible {
  border-color: var(--mo-brand);
}

.rg-form button[type='submit'] {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1.6rem;
  border: 0;
  border-radius: var(--button-radius, 999px);
  background: var(--mo-brand);
  color: var(--color-on-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.rg-form button[type='submit']:hover {
  background: var(--mo-lift);
}

.embed-frame {
  border-radius: var(--mo-r);
  box-shadow: inset 0 0 0 1px var(--mo-line);
}

.accordion__question {
  color: var(--mo-brand);
}

/* --------------------------------------------------------------------------
   Footer: brand colour (default), dark or light, by the footer style setting
   -------------------------------------------------------------------------- */
.site-footer.mo-footer {
  --f-bg: var(--mo-deep);
  --f-fg: var(--mo-on-dark-muted);
  --f-strong: var(--color-on-dark);
  --f-line: rgb(255 255 255 / 0.16);
  --f-ring: rgb(255 255 255 / 0.4);
  margin-top: 0;
  background: var(--f-bg);
  color: var(--f-fg);
}

.site-footer.mo-footer--dark {
  --f-bg: var(--mo-night);
}

.site-footer.mo-footer--light {
  --f-bg: var(--mo-tint);
  --f-fg: var(--mo-ink);
  --f-strong: var(--mo-brand);
  --f-line: var(--mo-line);
  --f-ring: color-mix(in srgb, var(--mo-ink) 45%, transparent);
  border-top: 1px solid var(--mo-line);
}

.mo-footer a,
.mo-footer button {
  color: var(--f-strong);
}

.mo-footer--light a:not(.mo-footer__logo) {
  color: var(--mo-link);
}

.mo-footer--light .mo-footer__social a {
  color: var(--f-strong);
}

.mo-footer__inner {
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1.2fr) repeat(auto-fit, minmax(10rem, 1fr));
  gap: 2.5rem 3rem;
  align-items: start;
}

.mo-footer__logo {
  display: inline-block;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mo-footer__logo img {
  display: block;
  width: auto;
  height: 4.5rem;
}

.mo-footer__social {
  display: flex;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.mo-footer__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: min(var(--mo-chip), 50%);
  box-shadow: inset 0 0 0 1.5px var(--f-ring);
}

.mo-footer__social a:hover {
  background: var(--mo-accent);
  box-shadow: none;
  color: var(--mo-on-accent);
}

.mo-footer__name {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--f-strong);
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}

.mo-footer address {
  font-style: normal;
  line-height: 1.7;
}

.mo-footer__contact p {
  margin: 0.5rem 0 0;
}

.mo-footer h2 {
  margin: 0 0 0.6rem;
  color: var(--f-strong);
  font-size: 1.0625rem;
  letter-spacing: 0;
}

.mo-footer__hours p {
  margin: 0;
}

.mo-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mo-footer__links li + li {
  margin-top: 0.3rem;
}

.mo-footer__links a,
.mo-footer__links button {
  display: inline-block;
  min-height: 1.75rem;
  padding: 0.2rem 0;
}

.mo-footer .rg-consent-settings {
  color: inherit;
}

.mo-footer--light .rg-consent-settings {
  color: var(--mo-link);
}

.mo-footer__legal {
  max-width: calc(var(--mo-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 1.5rem;
  border-top: 1px solid var(--f-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  font-size: 0.9375rem;
}

.mo-footer__legal p {
  margin: 0;
}

.mo-footer__links--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.mo-footer__links--inline li + li {
  margin-top: 0;
}

.mo-footer .site-footer__powered {
  opacity: 1;
  font-size: inherit;
  align-self: auto;
}

@media (max-width: 47.99rem) {
  .mo-footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .mo-footer__logo img {
    height: 4rem;
  }
}

@media print {
  .mo-header,
  .mo-dock {
    display: none;
  }
}

/* Wide price tables scroll sideways on phones; the row label stays put */
.data-table__table--row-headers tbody th[scope='row'],
.data-table__table--row-headers thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--mo-line);
}

.data-table__table--row-headers tbody th[scope='row'] {
  background: var(--color-surface);
}

.data-table__table--row-headers tbody tr:nth-child(even) th[scope='row'] {
  background: color-mix(in srgb, var(--mo-tint) 55%, var(--color-surface));
}

.data-table__table--row-headers tbody tr:hover th[scope='row'] {
  background: var(--mo-tint);
}

.data-table__table--row-headers thead th:first-child {
  z-index: 2;
}

/* Slab and classic heading fonts are serifs: lighter and less tightly set than the sans default */
:is(.theme-heading-slab, .theme-heading-classic) :is(h1, h2, h3, h4) {
  font-weight: 700;
  letter-spacing: -0.01em;
}

:is(.theme-heading-slab, .theme-heading-classic) h1 {
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Opt-in features: settings and block styles a club turns on. Nothing below
   changes a site that keeps the defaults.
   ========================================================================== */

/* Cropped images keep the part the block's "Image crop" field picks */
.hero__image,
.image-text__image {
  object-position: var(--image-position, 50% 50%);
}

/* Poppins headings are set semibold: its bold reads heavy at display sizes */
.theme-heading-poppins :is(h1, h2, h3, h4) {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.theme-heading-poppins h1,
.theme-heading-poppins .hero__heading {
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Buttons and text links: uppercase lettering and an arrow (Button lettering,
   Arrow on buttons). Header shortcuts and table buy buttons stay arrowless.
   -------------------------------------------------------------------------- */
.theme-button-case-uppercase :is(.button, .text-link, .tile__more, .post-tile__more) {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
}

.theme-button-case-uppercase .button {
  min-height: 2.75rem;
  padding-inline: 1.5rem;
}

.theme-button-arrow-on
  .button:not(.mo-actions__link, .price-table__buy, .rg-booking__day > .button)::after {
  content: '→' / '';
  font-size: 1.1em;
  line-height: 1;
}

.text-link,
.tile__more,
.post-tile__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mo-link);
  font-weight: 700;
  text-decoration: none;
}

.text-link::after,
.tile__more::after,
.post-tile__more::after {
  content: '→' / '';
}

.text-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Header: transparent over a leading photo hero (Header style: overlay), a
   sign-in button, icon-only menu button
   -------------------------------------------------------------------------- */
.mo-header--overlay {
  --h-bg: transparent;
  position: relative;
  margin-bottom: calc(-1 * var(--mo-bar));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mo-deep) 55%, transparent),
    transparent
  );
}

/* Where the browser can tie it to scrolling, the bar stays on top and fills in once the hero scrolls away */
@supports (animation-timeline: scroll()) {
  .mo-header--overlay {
    position: sticky;
    animation: mo-header-fill linear both;
    animation-timeline: scroll(root);
    animation-range: 0 14rem;
  }

  @keyframes mo-header-fill {
    to {
      background-color: var(--mo-brand);
    }
  }
}

.mo-header--overlay ~ main > .hero:first-child .hero__content {
  padding-top: calc(var(--mo-bar) + clamp(2rem, 1rem + 4vw, 4rem));
}

.mo-header--login-button .rg-session__login {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 1.15rem;
  border-radius: var(--button-radius, 999px);
  box-shadow: inset 0 0 0 2px currentColor;
  text-decoration: none;
  white-space: nowrap;
}

.mo-header--login-button .rg-session__login:hover {
  background: var(--h-fg);
  color: var(--mo-brand);
}

.mo-header--light.mo-header--login-button .rg-session__login:hover {
  color: var(--color-surface);
}

.theme-button-case-uppercase .mo-header--login-button .rg-session__login {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem;
}

.mo-toggle--icon {
  padding: 0.5rem;
}

.mo-toggle--icon .mo-toggle__icon {
  width: 1.875rem;
}

/* --------------------------------------------------------------------------
   Centred hero: a tall photo, the message in the middle, fading into the brand
   colour at the bottom so a dark band below continues it without a seam
   -------------------------------------------------------------------------- */
.hero--centered {
  min-height: clamp(26rem, 74vh, 50rem);
  align-items: center;
  justify-items: center;
  background: var(--mo-brand);
  color: var(--color-on-dark);
  text-align: center;
}

.hero--centered .hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--centered::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--mo-deep) calc(var(--hero-overlay, 0.65) * 30%), transparent) 0%,
    color-mix(in srgb, var(--mo-deep) calc(var(--hero-overlay, 0.65) * 20%), transparent) 45%,
    color-mix(in srgb, var(--mo-brand) calc(var(--hero-overlay, 0.65) * 70%), transparent) 85%,
    var(--mo-brand) 100%
  );
}

.hero--centered .hero__content {
  position: relative;
  z-index: 1;
  max-width: calc(46rem + 2 * var(--gutter));
  padding: clamp(4rem, 2rem + 8vw, 8rem) var(--gutter);
}

.hero--centered .hero__heading {
  max-width: 16ch;
  margin: 0 auto;
  color: var(--color-on-dark);
  font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.5rem);
  line-height: 1.05;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--mo-night) 45%, transparent);
}

.hero--centered .hero__text {
  max-width: 38rem;
  margin: 1.25rem auto 0;
  font-size: 1.125rem;
}

.hero--centered .hero__actions {
  justify-content: center;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Columns with a background: a full-width band, the columns at page width
   -------------------------------------------------------------------------- */
.columns-section:is(.columns-section--light, .columns-section--dark, .columns-section--accent) {
  max-width: none;
  padding-inline: 0;
  padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.columns-section--spacing-large {
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}

.columns-section:is(.columns-section--light, .columns-section--dark, .columns-section--accent)
  > .columns {
  max-width: var(--mo-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: content-box;
}

/* A band's columns pair up on phones instead of stacking one by one (short lists, e.g. a status band) */
@media (max-width: 47.99rem) {
  .columns-section:is(.columns-section--light, .columns-section--dark, .columns-section--accent)
    > .columns:not(.columns--custom) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 1.5rem 1.25rem;
  }
}

.columns-section--light {
  background: var(--mo-tint);
}

.columns-section--dark {
  --focus: var(--mo-accent-lit);
  background: var(--mo-brand);
  color: var(--color-on-dark);
}

.columns-section--accent {
  background: var(--mo-accent);
  color: var(--mo-on-accent);
}

/* On the band itself, not inside the light surfaces (cards, tiles, …) a band can hold: those keep
   their own colours, hover states included */
.columns-section--dark
  :is(h2, h3, h4):not(
    :is(
        .card,
        .tile,
        .price-card:not(.price-card--featured),
        .post-tile,
        .section--tint,
        .facility-status__item,
        .hole-card,
        .gallery__figure,
        .rg-events__item
      )
      *
  ) {
  color: var(--color-on-dark);
}

.columns-section--dark
  a:not(.button):not(
    :is(
        .card,
        .tile,
        .price-card:not(.price-card--featured),
        .post-tile,
        .section--tint,
        .facility-status__item,
        .hole-card,
        .gallery__figure,
        .rg-events__item
      )
      *
  ) {
  color: var(--mo-accent-on-dark);
}

.columns-section--dark
  :is(
    .card,
    .tile,
    .price-card:not(.price-card--featured),
    .post-tile,
    .section--tint,
    .facility-status__item,
    .hole-card,
    .gallery__figure,
    .rg-events__item
  ) {
  --focus: var(--mo-brand);
  color: var(--mo-ink);
}

/* Muted text on the band itself; light surfaces keep their own muted colour */
.columns-section--dark
  .muted:not(
    :is(
        .card,
        .tile,
        .price-card:not(.price-card--featured),
        .post-tile,
        .section--tint,
        .facility-status__item,
        .hole-card,
        .gallery__figure,
        .rg-events__item
      )
      *
  ) {
  color: var(--mo-on-dark-muted);
}

/* News without its tinted background lies straight on the band: light text, faint dividers */
.columns-section--dark .news-feed:not(.section--tint) .post-card p {
  color: var(--mo-on-dark-muted);
}

.columns-section--dark .news-feed:not(.section--tint) .post-card + .post-card {
  border-top-color: color-mix(in srgb, var(--color-on-dark) 16%, transparent);
}

.columns-section:is(.columns-section--light, .columns-section--dark, .columns-section--accent)
  .columns__area
  > .section {
  padding: 0;
}

/* A dark band straight after the centred hero continues its colour */
.hero--centered + .columns-section--dark {
  padding-top: clamp(0.5rem, 1vw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--color-on-dark) 10%, transparent);
}

/* --------------------------------------------------------------------------
   Facility status, compact: label over value, no boxes (e.g. a status band)
   -------------------------------------------------------------------------- */
.facility-status--compact h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
}

.facility-list {
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

.facility-list__item dt {
  color: var(--mo-link);
  font-size: 0.875rem;
  font-weight: 600;
}

.facility-list__item dd {
  margin: 0.1rem 0 0;
  white-space: pre-line;
}

.facility-list__note {
  display: block;
  color: var(--mo-muted);
  font-size: 0.875rem;
}

.columns-section--dark .facility-list__item dt {
  color: var(--mo-accent-lit);
}

.columns-section--dark .facility-list__note {
  color: var(--mo-on-dark-muted);
}

.facility-status__note--status {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Weather, compact: one glance (label, place, icon, temperature, one line)
   -------------------------------------------------------------------------- */
.weather__location {
  margin: 0 0 0.5rem;
  color: var(--mo-muted);
  font-size: 0.875rem;
}

.weather--compact .weather__label {
  margin: 0 0 0.15rem;
  color: var(--mo-link);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
}

.weather__glance {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.weather__glance .weather__now-icon svg {
  width: 3.25rem;
  height: 3.25rem;
}

.weather--compact .weather__temperature {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
}

.weather--compact .weather__unit {
  font-size: 1em;
}

.weather__line {
  margin: 0.1rem 0 0;
  font-size: 0.875rem;
}

.weather--compact .weather__credit {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  opacity: 0.75;
}

.columns-section--dark .weather--compact .weather__label {
  color: var(--mo-accent-lit);
}

.columns-section--dark :is(.weather__location, .weather__line, .weather__credit) {
  color: var(--mo-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Card grid: centred heading, column count, link tiles and divided cards
   -------------------------------------------------------------------------- */
.card-grid-section--align-center > h2,
.card-grid-section--align-center > .card-grid-section__intro {
  margin-inline: auto;
  text-align: center;
}

.card-grid-section__intro {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.card-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

@media (min-width: 48rem) {
  .card-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .tile-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .tile-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Four tiles: two by two below wide screens, also on phones */
@media (max-width: 59.99rem) {
  .tile-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 29.99rem) {
  .tile {
    padding: 1.25rem 0.75rem 1.1rem;
  }

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

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.75rem 1.25rem 1.5rem;
  border-radius: var(--mo-r);
  background: var(--mo-tint);
  text-align: center;
  transition: box-shadow 0.15s;
}

.tile:hover,
.tile:focus-within {
  box-shadow: inset 0 0 0 2px var(--mo-accent);
}

.tile .card-icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.4rem;
  color: var(--mo-link);
}

.tile__title {
  margin: 0;
  font-size: 1.125rem;
}

.tile__link {
  color: inherit;
  text-decoration: none;
}

/* The whole tile is the link */
.tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tile__text {
  margin: 0;
  color: var(--mo-muted);
  font-size: 0.9375rem;
}

.tile__more {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .feature-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feature-row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .feature + .feature {
    border-left: 1px solid var(--mo-line);
  }
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem clamp(1rem, 2.5vw, 1.75rem) 1.5rem;
  text-align: center;
}

.feature__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

.feature .card-icon {
  width: 2rem;
  height: 2rem;
  color: var(--mo-link);
}

.feature__title {
  margin: 0;
  font-size: 1.25rem;
}

.feature__text {
  margin: 0;
  max-width: 24rem;
}

.feature__link {
  margin-top: auto;
  padding-top: 1rem;
}

@media (max-width: 47.99rem) {
  .feature + .feature {
    border-top: 1px solid var(--mo-line);
    padding-top: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Pricing cards: a featured card in the brand colour
   -------------------------------------------------------------------------- */
.pricing--align-center > .pricing__heading,
.pricing--align-center > .pricing__intro {
  margin-inline: auto;
  text-align: center;
}

.pricing__intro {
  max-width: 42rem;
  margin-bottom: 2.25rem;
}

.pricing__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each card spans six rows of the card grid (name, price, note, details, includes, button) and
   shares them with the cards beside it, so the same parts line up across cards of different
   lengths. A card without some part leaves its row empty. */
.price-card {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--mo-r);
  background: var(--mo-tint);
}

.price-card__name {
  grid-row: 1;
  margin: 0;
  color: var(--mo-brand);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-card__price {
  grid-row: 2;
  margin: 0.75rem 0 0;
  color: var(--mo-link);
  line-height: 1;
}

.price-card__prefix {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.price-card__amount {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.8rem + 2vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.price-card__note {
  grid-row: 3;
  margin: 1.5rem 0 0;
  font-style: italic;
  font-weight: 600;
}

.price-card__section {
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--mo-line);
  font-size: 0.9375rem;
}

.price-card__section--details {
  grid-row: 4;
}

.price-card__section--includes {
  grid-row: 5;
}

.price-card__note + .price-card__section {
  margin-top: 0.5rem;
  padding-top: 0;
  border-top: 0;
}

.price-card__section .rich-text {
  max-width: none;
}

.price-card__section .rich-text :is(p, ul, ol) {
  margin-block: 0 0.35em;
}

.price-card__section .rich-text :is(ul, ol) {
  padding-left: 1em;
}

.price-card__section .rich-text li + li {
  margin-top: 0.15em;
}

.price-card__subheading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.price-card__action {
  grid-row: 6;
  align-self: end;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mo-line);
  text-align: center;
}

/* The gap above the button goes on the content before it, so the button's auto margin still lines
   the buttons up at the bottom of cards of different lengths */
.price-card > :has(+ .price-card__action) {
  margin-bottom: 1.1rem;
}

/* A text link as tall as the featured card's button, so the lines above them line up too */
.price-card__action > .text-link {
  min-height: 2.75rem;
  align-items: center;
}

.price-card--featured {
  --focus: var(--mo-accent-lit);
  background: var(--mo-brand);
  color: var(--color-on-dark);
}

/* Outline buttons on the dark featured card: a light ring, as on other dark surfaces */
.theme-buttons-outline .price-card--featured .button:not(.button--ghost) {
  color: var(--color-on-dark);
}

.theme-buttons-outline .price-card--featured .button:not(.button--ghost):hover {
  background: var(--mo-accent);
  color: var(--mo-on-accent);
}

.price-card--featured :is(.price-card__name, .price-card__subheading) {
  color: var(--color-on-dark);
}

.price-card--featured .price-card__price {
  color: var(--mo-accent-lit);
}

.price-card--featured :is(.price-card__section, .price-card__action) {
  border-color: color-mix(in srgb, var(--color-on-dark) 16%, transparent);
}

.price-card--featured .rich-text li::marker {
  color: var(--mo-accent-lit);
}

/* --------------------------------------------------------------------------
   News as cards
   -------------------------------------------------------------------------- */
.post-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section--tint > .post-cards {
  padding-inline: var(--gutter);
}

@media (min-width: 60rem) {
  .post-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.post-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--mo-r);
  background: var(--color-surface);
  box-shadow: 0 1.25rem 2.5rem -1.5rem color-mix(in srgb, var(--mo-deep) 35%, transparent);
}

.post-tile__media {
  aspect-ratio: 16 / 10;
  background: var(--mo-brand);
}

.post-tile__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-tile__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1rem;
  color: var(--color-on-dark);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  text-align: center;
}

.post-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.5rem 1.5rem;
}

.post-tile__title {
  margin: 0;
  font-size: 1.25rem;
}

.post-tile__link {
  color: inherit;
  text-decoration: none;
}

/* The whole card is the link */
.post-tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.post-tile:hover .post-tile__title,
.post-tile:focus-within .post-tile__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post-tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0;
  color: var(--mo-link);
  font-size: 0.8125rem;
  font-weight: 600;
}

.post-tile__category {
  padding: 0.1rem 0.5rem;
  background: var(--mo-tint);
  color: var(--mo-ink);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-tile__more {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--mo-ink);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Section heads with a subtitle; a filled-button "all" link
   -------------------------------------------------------------------------- */
.section__subtitle {
  margin: 0.4rem 0 0;
  color: var(--mo-muted);
}

.section__head a.button {
  background: var(--mo-accent);
  color: var(--mo-on-accent);
  box-shadow: none;
}

.section__head a.button:hover {
  background: var(--mo-accent);
  color: var(--mo-on-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mo-accent) 32%, transparent);
}

/* --------------------------------------------------------------------------
   Events as a table
   -------------------------------------------------------------------------- */
.event-table__scroll {
  overflow-x: auto;
}

.event-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--mo-brand);
  font-size: 0.9375rem;
}

.event-table th,
.event-table td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--mo-line);
  text-align: left;
  vertical-align: top;
}

.event-table thead th {
  color: var(--mo-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.event-table__date {
  width: 30%;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.event-table__title {
  font-weight: 600;
}

.event-table__more {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.event-table__more a {
  color: var(--mo-ink);
  font-weight: 600;
}

@media (max-width: 39.99rem) {
  .event-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .event-table,
  .event-table tbody,
  .event-table tr {
    display: block;
  }

  .event-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 1rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--mo-line);
  }

  .event-table :is(th, td) {
    padding: 0;
    border: 0;
  }

  .event-table__date {
    width: auto;
    grid-column: 1;
    color: var(--mo-link);
    font-size: 0.8125rem;
  }

  .event-table__title {
    grid-column: 1;
  }

  .event-table__more {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   Even table columns (Same column widths): every group's table lines up
   -------------------------------------------------------------------------- */
.price-table--even,
.data-table__table--even {
  table-layout: fixed;
}

.price-table--even .price-table__price {
  width: 9rem;
}

.price-table--even .price-table__action {
  width: 8rem;
}

.price-table--even .price-table__name {
  overflow-wrap: anywhere;
}

.data-table__table--even :is(th, td) {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Carousel (gallery and hole guide): one scroll row, ~3 cards on wide screens.
   Swipe, scroll or use the keyboard; browsers with CSS carousels add buttons.
   -------------------------------------------------------------------------- */
.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 80%);
  grid-template-columns: none;
  gap: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: 0.75rem;
  scrollbar-color: var(--mo-line) transparent;
}

@media (min-width: 40rem) {
  .carousel {
    grid-auto-columns: calc((100% - 1.25rem) / 2);
  }
}

@media (min-width: 64rem) {
  .carousel {
    grid-auto-columns: calc((100% - 2.5rem) / 3);
  }
}

.carousel > li {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: no-preference) {
  .carousel {
    scroll-behavior: smooth;
  }
}

@supports selector(::scroll-button(*)) {
  .gallery--carousel,
  .hole-guide--carousel {
    position: relative;
  }

  .carousel {
    anchor-name: --carousel;
  }

  .carousel::scroll-button(*) {
    position: absolute;
    position-anchor: --carousel;
    top: anchor(center);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--mo-brand);
    color: var(--color-on-dark);
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.25rem -0.5rem color-mix(in srgb, var(--mo-deep) 60%, transparent);
  }

  .carousel::scroll-button(*):disabled {
    opacity: 0;
  }

  .carousel::scroll-button(left) {
    content: '←' / attr(data-label-previous);
    left: calc(anchor(left) + 0.5rem);
  }

  .carousel::scroll-button(right) {
    content: '→' / attr(data-label-next);
    right: calc(anchor(right) + 0.5rem);
  }
}

/* Whole images (Image fit: show the whole image), e.g. tall hole maps */
.gallery--fit-contain .gallery__thumb {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  background: var(--color-surface);
}

.gallery--carousel .gallery__grid {
  gap: 1.25rem;
}

.gallery--carousel .gallery__figure figcaption {
  font-size: 0.9375rem;
}

.hole-guide__holes.carousel {
  grid-template-columns: none;
}

.hole-guide--carousel .hole-card {
  padding: 0.75rem;
}

.hole-guide--carousel .hole-card__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.hole-card__image {
  height: auto;
  object-fit: contain;
}

/* @fork-layer: everything below is this fork's own; everything above is the base template's theme.css */

/* ==========================================================================
   Hill Side: the club's own design on top of Modern. Only what differs from
   Modern lives here; colours, fonts and button shape come from the theme
   settings (defaults in settings.schema.json).
   ========================================================================== */

/* Poppins sets wide: body copy one step smaller than Modern's */
body {
  font-size: 1rem;
  line-height: 1.7;
}

/* Large gold type uses the brand gold itself (large text needs 3:1, which it has) */
.price-card__price,
.pricing .price-card__amount {
  color: var(--mo-accent);
}

.price-card--featured .price-card__price {
  color: var(--mo-accent);
}

/* One green for every dark band (Modern shades alternating bands) */
.group--dark:has(> .group__area > .image-text--image-left) {
  background: var(--mo-brand);
}

/* Header: sign-in, then the booking shortcut, then the menu */
.hs-header__session {
  margin-left: auto;
}

.hs-header__session .rg-island--session {
  margin: 0;
}

.hs-header__session + .mo-actions {
  margin-left: 0;
}

.mo-header .hs-header__session :is(.rg-session__login, .rg-session__account, .rg-session__name) {
  color: var(--h-fg);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* The status band: gold labels on the green */
.columns-section--dark .facility-list__item dt,
.columns-section--dark .weather--compact .weather__label {
  color: var(--mo-accent);
}

/* Tiles: gold icon and link label */
.tile .card-icon,
.tile__more,
.feature__link,
.feature .card-icon {
  color: var(--mo-accent-ink);
}

/* News cards: gold date */
.post-tile__meta time {
  color: var(--mo-accent-ink);
}

/* Footer, brand style (the default): the brand green rather than Modern's deeper shade, gold
   name and links. The dark and light footer styles keep Modern's palettes. */
.site-footer.hs-footer.mo-footer--brand {
  --f-bg: var(--mo-brand);
}

.hs-footer.mo-footer--brand .mo-footer__name {
  color: var(--mo-accent);
}

.hs-footer .mo-footer__name {
  font-size: 1rem;
  letter-spacing: 0;
}

.hs-footer:is(.mo-footer--brand, .mo-footer--dark)
  :is(.mo-footer__links a, .mo-footer__links button, address a) {
  color: var(--mo-accent);
}

.hs-footer:is(.mo-footer--brand, .mo-footer--dark)
  :is(.mo-footer__links a, .mo-footer__links button):hover {
  color: var(--color-on-dark);
}

.hs-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3.5rem;
}

.hs-footer__inner > .mo-footer__brand {
  flex: 1 1 14rem;
}

.hs-footer__social {
  margin: 0 0 0 auto;
}

.hs-footer a {
  text-decoration: none;
}

.hs-footer a:hover {
  text-decoration: underline;
}

.hs-footer .mo-footer__group + .mo-footer__group {
  margin-top: 1.25rem;
}

.hs-footer__social a {
  width: 2.25rem;
  height: 2.25rem;
  box-shadow: none;
  color: var(--f-strong);
}

.hs-footer__social a:hover {
  background: transparent;
  color: var(--mo-accent);
}

.hs-footer .mo-footer__legal {
  font-size: 0.8125rem;
}

@media (max-width: 47.99rem) {
  .hs-footer__inner {
    flex-direction: column;
    gap: 1.75rem;
  }

  .hs-footer__inner > .mo-footer__brand {
    flex: none;
  }

  .hs-footer__social {
    margin: 0;
  }

  /* The status band: the weather first on phones */
  .columns-section--dark .columns__area:has(.weather) {
    order: -1;
  }
}

/* Phones: the sign-in button shrinks to fit beside the logo and the menu */
@media (max-width: 36rem) {
  .mo-header--login-button .hs-header__session .rg-session__login {
    min-height: 2.25rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
  }
}