/* ==========================================================================
   Le Sasha — redesign
   Design system + page styles. Loaded after styles.css, so it overrides
   the older rules while the remaining templates are ported.
   ========================================================================== */

:root {
  /* Colour */
  --ink: #121311;
  --ink-soft: #1E201C;
  --snow: #F5F2EC;
  --linen: #EDE8DF;
  --stone: #E3DED4;
  --hairline: #D8D2C6;
  --hairline-warm: #CFC7B8;
  --bronze: #9A7B4F;
  --bronze-deep: #7A5F39;
  --pale-gold: #F2E2B0;
  --sand: #E6D4A2;
  --body-text: #4A4A45;
  --muted: #6C6C66;

  /* Type */
  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Measure and rhythm */
  --shell: 1296px;
  --gutter: clamp(24px, 4.5vw, 72px);
  --section-y: clamp(60px, 6.6vw, 104px);
}

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

body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body a { color: var(--bronze-deep); }
body a:hover { color: var(--ink); }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  width: 100%;
}

/* The social rail is fixed to the right edge and floats over the page. Between
   992px, where the rail appears, and roughly 1500px, the gutter is narrower
   than the rail, so the measure has to pull in to clear it. Above that the
   shell is already narrower than the space available and nothing changes.
   46px is the rail and 28px the breathing room; the margin is generous because
   100vw counts the scrollbar, which the content area does not have. */
@media (min-width: 992px) {
  .shell {
    max-width: min(var(--shell), calc(100vw - 2 * (clamp(16px, 2vw, 30px) + 46px + 28px)));
  }
}

.section { padding: var(--section-y) var(--gutter); }
.section--linen { background: var(--linen); }
.section--ink { background: var(--ink); color: var(--snow); }
.section--flush-top { padding-top: 0; }

/* Twelve-column grid, used by every section that needs one */
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px;
}
/* Bootstrap, loaded from a CDN before this sheet, declares `.col-6 { flex: 0 0
   auto; width: 50% }` and so on. Inside a grid the span already decides the
   width, and that 50% halved every column to the middle of its own track.
   Column widths here are the grid's business alone. */
.grid12 > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: initial;
  padding-left: 0;
  padding-right: 0;
}

.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }

/* ---------------------------------------------------------- Typography --- */

.display-xl,
.display-l,
.display-m {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
}
.display-xl { font-size: clamp(48px, 6.2vw, 94px); line-height: 1.04; }
.display-l  { font-size: clamp(42px, 5vw, 76px);   line-height: 1.02; }
.display-m  { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; }

.lede {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.36;
  letter-spacing: -0.01em;
  margin: 0;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin: 0;
}
.eyebrow--light { color: var(--pale-gold); }
.eyebrow--sand { color: var(--sand); }

.rule { width: 48px; height: 1px; background: var(--bronze); border: 0; margin: 0; }

.prose { margin: 0; font-size: 16px; line-height: 1.85; color: var(--body-text); }

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

.btn-solid,
.btn-outline,
.btn-quiet {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.btn-solid {
  background: var(--ink);
  color: var(--snow);
  border: 1px solid var(--ink);
  padding: 20px 42px;
}
.btn-solid:hover { background: var(--ink-soft); color: var(--snow); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 19px 42px;
}
.btn-outline:hover { background: var(--ink); color: var(--snow); }

.btn-quiet {
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--bronze);
  background: none;
  padding: 10px 0;
}
.btn-quiet:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* On dark grounds the solid button inverts */
.on-ink .btn-solid { background: var(--snow); color: var(--ink); border-color: var(--snow); }
.on-ink .btn-solid:hover { background: var(--pale-gold); color: var(--ink); border-color: var(--pale-gold); }
.on-ink .btn-outline { color: var(--snow); border-color: rgba(245, 242, 236, .45); }
.on-ink .btn-outline:hover { background: var(--snow); color: var(--ink); }

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

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  padding: 26px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  transition: background-color .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}

/* Over the hero on the home page */
.site-header--over { background: transparent; }
/* Everywhere else, and once the home page scrolls */
.site-header--solid {
  background: var(--snow);
  border-bottom-color: var(--hairline);
  padding-top: 18px;
  padding-bottom: 18px;
}

.wordmark { display: flex; align-items: center; text-decoration: none; }
/* 56px is what the old two-line wordmark measured, and the header's height is
   the 92px that styles.css reserves for it at the top of every inner page —
   so the logo keeps that height rather than setting a new one. */
.wordmark__logo { display: block; height: 56px; width: auto; }

/* The artwork is black. Over the home hero the header is transparent and the
   banner behind it is dark, so there the logo is turned white instead. */
.site-header--solid .wordmark__logo { filter: brightness(0); }
.site-header--over .wordmark__logo { filter: brightness(0) invert(1); }

.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 0;
}
.site-header--over .site-nav a { color: var(--snow); }
.site-header--solid .site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--bronze); }

.site-nav a.is-current { border-bottom: 1px solid var(--bronze); }

.season-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--sand);
  padding: 3px 7px;
}

.nav-cta { padding: 15px 26px !important; }
.site-header--over .nav-cta { background: var(--snow); color: var(--ink) !important; }
.site-header--solid .nav-cta { background: var(--ink); color: var(--snow) !important; }
.nav-cta:hover { background: var(--bronze) !important; color: var(--snow) !important; }

/* Burger, mobile only */
.nav-burger {
  display: none;
  width: 46px; height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-burger span { display: block; width: 22px; height: 1px; background: var(--ink); }
.site-header--over .nav-burger span { background: var(--snow); }

/* -------------------------------------------------------- Social rail --- */

.social-rail {
  position: fixed;
  right: clamp(16px, 2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1020;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-rail a {
  width: 46px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 242, 236, .94);
  border: 1px solid rgba(18, 19, 17, .14);
  transition: background-color .25s ease;
}
.social-rail a:hover { background: var(--pale-gold); }
.social-rail svg { display: block; }

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

.site-footer {
  background: var(--ink);
  color: var(--snow);
  padding: 54px var(--gutter);
}
.site-footer .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.site-footer__name {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.1em;
}
.site-footer p { margin: 0; font-size: 13px; color: #C9C3B7; }
.site-footer nav { display: flex; align-items: center; gap: 22px; }
.site-footer nav a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C9C3B7;
  text-decoration: none;
}
.site-footer nav a:hover { color: var(--pale-gold); }

/* --------------------------------------------------------- Responsive --- */

@media (max-width: 991px) {
  .grid12 { gap: 28px; }
  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .site-nav { display: none; }
  .nav-burger { display: flex; }
  .social-rail { display: none; }
}

/* ===================================================================== Home
   ===================================================================== */

/* ---------------------------------------------------------------- Hero --- */

.hero-redesign {
  position: relative;
  width: 100%;
  height: 820px;
  background: var(--ink);
  overflow: hidden;
}
.hero-redesign__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-redesign__scrim-v {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,11,10,.46) 0%, rgba(10,11,10,.04) 38%, rgba(10,11,10,.52) 100%);
}
.hero-redesign__scrim-h {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,11,10,.80) 0%, rgba(10,11,10,.58) 34%, rgba(10,11,10,.12) 62%, rgba(10,11,10,0) 78%);
}

.hero-redesign__copy {
  position: absolute;
  left: 0; right: 0;
  bottom: 206px;
  padding: 0 var(--gutter);
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.hero-redesign__title { color: var(--pale-gold); }
.hero-redesign__lead {
  margin: 0;
  max-width: 620px;
  font-size: 19px;
  line-height: 1.7;
  color: #E6DFD2;
}
.hero-redesign__actions { display: flex; align-items: center; gap: 18px; padding-top: 6px; flex-wrap: wrap; }

.hero-redesign__facts { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter); }
.property-figures {
  border-top: 1px solid rgba(245,242,236,.22);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.property-figures > div { padding: 34px 0 40px; }
.property-figures__number {
  display: block;
  font-family: var(--display);
  font-size: 46px;
  line-height: 1;
  color: var(--snow);
}
.property-figures__label {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
}

/* About and the photo grid are defined further down, under
   "About and Gallery, as drawn". */

/* ---------------------------------------------------------- Highlights --- */

.highlights__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.highlight {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  border-top: 1px solid var(--hairline-warm);
  padding-top: 28px;
}
.highlight__icon {
  flex-shrink: 0;
  background: var(--ink);
  border-radius: 50%;
  padding: 12px;
  box-sizing: content-box;
}
.highlight__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
}

/* ------------------------------------------------------------ CTA band --- */

.cta-band { position: relative; width: 100%; height: 620px; overflow: hidden; }
.cta-band__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band__scrim { position: absolute; inset: 0; background: rgba(10,11,10,.52); }
.cta-band__copy {
  position: absolute;
  inset: 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}
.cta-band__title { color: var(--snow); max-width: 860px; }
.cta-band__subtitle {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--pale-gold);
}
.cta-band__lead { margin: 8px 0 0; font-size: 17px; line-height: 1.75; color: #E6DFD2; }
.cta-band .btn-solid { margin-top: 18px; }

/* ------------------------------------------------- Location and contact --- */

/* Both columns run to the same height, so the section closes on one line
   instead of the text stopping halfway up the map. The height is set once
   here; the map and the photograph divide it between them. */
.contact-block {
  --loc-h: clamp(380px, 31vw, 460px);
  align-items: stretch;
}
.contact-block .col-6 {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: var(--loc-h);
}
/* The text is shorter than the map and photograph together, so the slack is
   shared between its four parts rather than left in one gap above the button.
   The button still lands level with the foot of the photograph. */
.contact-block__text { justify-content: space-between; }

.detail-list { margin: 0; display: flex; flex-direction: column; }
.detail-list > div {
  display: flex;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline-warm);
}
.detail-list > div:last-child { border-bottom: 1px solid var(--hairline-warm); }
.detail-list dt {
  flex-shrink: 0;
  width: 110px;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  padding-top: 3px;
  font-weight: 400;
}
.detail-list dd { margin: 0; font-size: 16px; line-height: 1.6; }
.detail-list dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid #C3BCAE; }

.contact-block__cta { align-self: flex-start; }

.map-frame {
  position: relative;
  width: 100%;
  height: 440px;
  border: 1px solid #C3BCAE;
  background: #E7E1D6;
  overflow: hidden;
}
/* In the home section the map is the whole column, so it takes its height. */
.contact-block__media .map-frame { height: auto; flex: 1 1 0; min-height: 0; }
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Tuned to the site palette: desaturated, then warmed toward the linen ground */
  filter: grayscale(1) sepia(.62) hue-rotate(-12deg) saturate(1.15) brightness(1.06) contrast(.92);
}

/* --------------------------------------------------- Home, small screens --- */

@media (max-width: 991px) {
  .hero-redesign { height: 640px; }
  .hero-redesign__copy { bottom: 170px; gap: 18px; }
  .hero-redesign__scrim-h {
    background: linear-gradient(90deg, rgba(10,11,10,.72) 0%, rgba(10,11,10,.5) 60%, rgba(10,11,10,.3) 100%);
  }
  .property-figures__number { font-size: 30px; }
  .property-figures__label { font-size: 9px; letter-spacing: 0.26em; }
  .about-body__columns { grid-template-columns: 1fr; gap: 24px; }
  .highlights { grid-template-columns: 1fr; gap: 40px; }
  .highlights__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .cta-band { height: 520px; }
  /* Stacked, so there is no second column left to match. */
  .contact-block .col-6 { min-height: 0; }
  .contact-block__text { justify-content: flex-start; }
  .contact-block__media .map-frame { height: 380px; flex: 0 0 auto; }
}

@media (max-width: 575px) {
  .photo-grid img { height: 200px; }
  .hero-redesign__actions .btn-solid,
  .hero-redesign__actions .btn-outline { padding-left: 26px; padding-right: 26px; }
}

/* ------------------------------------------- Overrides for the old sheet ---
   styles.css sets a few blanket rules (uppercase h2, bold blue links, 18px
   paragraphs, 80px h1). They fight the new type scale, so the redesign's
   own elements opt out of them here. Once every template is ported, those
   rules — and styles.css with them — can go.
   -------------------------------------------------------------------------- */

.site-header h1, .site-header h2, .site-header h3,
.section h1, .section h2, .section h3,
.hero-redesign h1, .hero-redesign h2, .hero-redesign h3,
.cta-band h1, .cta-band h2, .cta-band h3 {
  text-transform: none;
  margin: 0;
}

.section p, .hero-redesign p, .cta-band p, .site-footer p { font-size: inherit; }

.section a, .hero-redesign a, .cta-band a, .site-header a, .site-footer a, .social-rail a {
  font-weight: 300;
  font-size: inherit;
}

.highlight__title, .display-m, .display-l, .display-xl { text-transform: none; }

/* ============================================================= Availability
   ============================================================= */

/* A page without a hero starts under the fixed header, so its first section
   needs extra clearance. Only the first: applying it to every .section added
   40px to every seam on the page, which is where the oversized gaps between
   sections came from. */
/* No clearance rule for the first section: styles.css already gives <main> a
   92px top padding on every page but the home one, which is exactly the height
   of the fixed header. Adding more here only padded it twice. */

/* A page that opens with a full-bleed banner wants none of that padding — the
   banner runs under the fixed header, as the home hero does, and its own top
   padding keeps the title clear. Without this the fixed 92px leaves a strip of
   background above the banner wherever the header is shorter, as on a phone.
   Browsers without :has() simply keep the padding. */
main:has(> .page-hero:first-child) { padding-top: 0; }

.rates { gap: 72px; align-items: start; }
.rates__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.rates__season {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  line-height: 1.8;
}
.rates__note {
  margin: 14px 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
}
.rates__cta { margin-top: 8px; }

.rate-table { width: 100%; border-collapse: collapse; }
.rate-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 16px;
}
.rate-table th:last-child { text-align: right; }
.rate-table td {
  padding: 17px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
}
.rate-table tr:last-child td { border-bottom: 1px solid var(--hairline); }
.rate-table td:last-child { text-align: right; }
.rate-table .rate { font-family: var(--display); font-size: 23px; }
.rate-table .is-booked td { color: #807A6E; }

.booked-chip {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #5E584C;
  background: #E0DACE;
  padding: 7px 14px;
}

@media (max-width: 991px) {
  .rates { gap: 40px; }
  .rate-table .rate { font-size: 20px; }
}

/* styles.css frames every table and centres its cells; the rate table opts out */
.rate-table { border: 0; }
.rate-table th,
.rate-table td {
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  font-weight: 400;
  text-align: left;
  padding: 17px 0;
}
.rate-table thead th { border-top: 0; padding: 0 0 16px; }
.rate-table th:last-child,
.rate-table td:last-child { text-align: right; }

/* ================================================================== Contact
   ================================================================== */

.contact-page { align-items: start; }
.contact-page__form,
.contact-page__aside { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.contact-page__aside { gap: 28px; }
.contact-page__form > .rule { margin: 4px 0 2px; }
.contact-page__aside .map-frame { height: 520px; }

.form { display: flex; flex-direction: column; gap: 22px; width: 100%; margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #C3BCAE;
  border-radius: 0;
  padding: 13px 0;
  width: 100%;
  resize: vertical;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--bronze);
}
.field__error { font-size: 13px; color: #8A3A2E; }

.form__submit { align-self: flex-start; border: 0; }

.form-note {
  width: 100%;
  padding: 16px 20px;
  font-size: 15px;
  border-left: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.form-note--ok { background: var(--linen); color: var(--ink); }
.form-note--bad { background: #F3E7E3; color: #7A2E22; border-color: #E0C6BE; }

/* ============================================================== Facilities
   ============================================================== */

/* The page head is a label, a title and a rule, not a section of its own: it
   carries one line of text, so it keeps its own modest height. */
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.page-head .rule { margin-top: 10px; }
/* The band that carries the page title. The 92px under the fixed header is
   already air above it, so it needs far less of its own than a content
   section; the rule beneath the title closes it off, not whitespace. */
.section--head {
  padding-top: clamp(28px, 3.4vw, 52px);
  padding-bottom: clamp(30px, 3.4vw, 52px);
}
/* For a block whose own heading follows close behind it. Declared after
   .section--head so a section carrying both keeps the smaller bottom. */
.section--tight-bottom { padding-bottom: clamp(32px, 3.8vw, 58px); }
/* .section--flush-top is declared early, so restate it here: a section that
   carries both classes must still start flush. */
.section--flush-top { padding-top: 0; }

/* Four categories across the full measure, two by two, each photograph above
   its own list. The earlier 7/5 split squeezed these into a narrow column
   with 220px thumbnails while the lists on the right ran cramped. */
.categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 56px;
}

.category { display: flex; flex-direction: column; gap: 22px; }

.category__media { margin: 0; }
.category__media img { display: block; width: 100%; height: 300px; object-fit: cover; }

.category__body { display: flex; flex-direction: column; gap: 18px; }
.category__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  text-transform: none;
}

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ticks li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.7;
  color: var(--body-text);
}
.ticks li:last-child { border-bottom: 1px solid var(--hairline); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 22px;
  width: 11px;
  height: 6px;
  border-left: 1px solid var(--bronze);
  border-bottom: 1px solid var(--bronze);
  transform: rotate(-45deg);
}

/* The three lists sit side by side on their own band rather than stacked in a
   side column, which is what made them run long and narrow. */
.schedules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}
.schedule { display: flex; flex-direction: column; gap: 14px; }
.schedule__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  text-transform: none;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bronze);
}
.schedule__level {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  font-weight: 400;
}
.schedule__list { list-style: none; margin: 0; padding: 0; }
.schedule__list li {
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.7;
  color: var(--body-text);
}
.schedule__list li:first-child { border-top: 0; }

@media (max-width: 991px) {
  .categories { grid-template-columns: 1fr; gap: 44px; }
  .category { gap: 18px; }
  .category__media img { height: 220px; }
  .schedules { grid-template-columns: 1fr; gap: 44px; }
  .contact-page__aside .map-frame { height: 360px; }
}

/* ================================================================= Gallery
   ================================================================= */

.section-head { display: flex; align-items: center; gap: 28px; }
.section-head__line { flex-grow: 1; height: 1px; background: var(--hairline); }

/* Flush with the left edge of the measure, under its own heading. */
.floorplan-row { display: flex; justify-content: flex-start; }
/* Small enough that the Gallery heading below it stays on the first screen —
   the plan is a pointer to the lightbox, where it opens at full size. Below
   420px of viewport the cell is narrower than this anyway, so the cap only
   bites on desktop. */
.floorplan-cell { position: relative; width: 100%; max-width: 420px; cursor: pointer; }
.floorplan-cell .floorplan-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  background: var(--linen);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gallery-cell { position: relative; overflow: hidden; cursor: pointer; }
.gallery-cell img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform .6s ease;
}
.gallery-cell:hover img { transform: scale(1.04); }

/* The caption inside the lightbox carousel. Bootstrap pins .carousel-caption
   to left:15%/right:15% and centres it, so it floated as a short bar in the
   middle of the frame. It belongs to the whole image, like .image-title on the
   grid below, and carries the same eyebrow lettering. */
.carousel-caption {
  right: 0;
  left: 0;
  bottom: 0;
  padding: 44px 22px 16px;
  text-align: left;
  background: linear-gradient(180deg, rgba(10,11,10,0) 0%, rgba(10,11,10,.76) 100%);
}
.carousel-caption h5 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.5;
  color: var(--snow);
}

/* The caption sits on the image, revealed on hover */
.gallery-cell .image-title,
.floorplan-cell .floorplan-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--snow);
  background: linear-gradient(180deg, rgba(10,11,10,0) 0%, rgba(10,11,10,.72) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.gallery-cell:hover .image-title,
.floorplan-cell:hover .floorplan-overlay { opacity: 1; }

.floorplan-cell .floorplan-overlay {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,11,10,.35);
  font-size: 22px;
}

@media (max-width: 991px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-cell img { height: 220px; }
  .section-head { gap: 18px; }
}
@media (max-width: 575px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-cell img { height: 260px; }
}

/* =============================================================== Courchevel
   Also the shared "page hero" and card row used by the inner pages.
   =============================================================== */

.page-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 160px var(--gutter) 80px;
  background-size: cover;
  background-position: center;
}
/* Two scrims, as on the home hero: one from the left to carry the text, one
   from the foot so a bright sky or snowfield cannot swallow the lead line. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,11,10,.82) 0%, rgba(10,11,10,.56) 40%, rgba(10,11,10,.14) 78%),
    linear-gradient(0deg, rgba(10,11,10,.55) 0%, rgba(10,11,10,.12) 45%, rgba(10,11,10,0) 70%);
}
.page-hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; }
.page-hero__title { color: var(--pale-gold); max-width: 900px; }
.page-hero__lead { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.7; color: var(--snow); }

.section--center { text-align: center; }
.section-title { margin: 0 0 48px; }
.section-intro { max-width: 820px; margin: 0 0 48px; }

.card-row { display: grid; gap: 40px; }
.card-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Four landmarks: a row of three left one stranded on a line of its own. */
.card-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-row--4 .card-cell img { height: 240px; }
/* A second row below another card row needs the space between them. */
.card-row--stacked { margin-top: 56px; }
/* Entries divided by a rule rather than boxed, so the rows need more air
   between them than the columns do. */
.card-row--list { row-gap: 54px; }
.card-cell { display: flex; flex-direction: column; gap: 14px; }
.card-cell img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin-bottom: 6px;
}
.card-cell h3, .card-cell h4, .card-cell h5 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  text-transform: none;
}
.card-cell p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--body-text); }
/* The icon is a flex child here, so it must not stretch across the cell. */
.card-cell__icon { align-self: flex-start; margin-bottom: 4px; }

.tripadvisor-logo { width: 22px; height: auto; margin: 0 8px 0 0; display: inline-block; }

@media (max-width: 991px) {
  .page-hero { min-height: 420px; padding-top: 120px; }
  .card-row--2,
  .card-row--3 { grid-template-columns: 1fr; gap: 32px; }
  .card-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .card-row--stacked { margin-top: 36px; }
  .section-title { margin-bottom: 32px; }
}

/* The TripAdvisor mark is an inline logo, not a card photograph */
.card-cell img.tripadvisor-logo {
  width: 86px;
  height: auto;
  margin: 0 8px 0 0;
  display: inline-block;
  vertical-align: middle;
}

/* ==================================================================== Snow
   Three tiled layers drifting down, no JavaScript and no per-flake DOM.
   Each layer repeats every 300px and is translated exactly one tile, so
   the loop is seamless; transform keeps it on the compositor.
   ==================================================================== */

.snow {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  overflow: hidden;
}

.snow__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -300px;
  height: calc(100% + 300px);
  background-repeat: repeat;
  background-size: 300px 300px;
  will-change: transform;
  animation-name: snow-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes snow-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 300px, 0); }
}

/* Far: small, faint, slow */
.snow__layer--far {
  animation-duration: 26s;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 170px 20px, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 110px 190px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 250px 130px, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 210px 260px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 20px 230px, rgba(255,255,255,.45), transparent);
}

/* Middle */
.snow__layer--mid {
  animation-duration: 17s;
  background-image:
    radial-gradient(2.5px 2.5px at 90px 30px, rgba(255,255,255,.7), transparent),
    radial-gradient(2.5px 2.5px at 230px 90px, rgba(255,255,255,.6), transparent),
    radial-gradient(2.5px 2.5px at 150px 150px, rgba(255,255,255,.65), transparent),
    radial-gradient(2.5px 2.5px at 60px 240px, rgba(255,255,255,.6), transparent),
    radial-gradient(2.5px 2.5px at 280px 210px, rgba(255,255,255,.55), transparent);
}

/* Near: larger, brighter, quicker */
.snow__layer--near {
  animation-duration: 11s;
  background-image:
    radial-gradient(3.5px 3.5px at 130px 70px, rgba(255,255,255,.85), transparent),
    radial-gradient(3.5px 3.5px at 20px 160px, rgba(255,255,255,.75), transparent),
    radial-gradient(3.5px 3.5px at 260px 250px, rgba(255,255,255,.8), transparent);
}

/* On the light sections the flakes would be invisible, so the whole layer
   is dimmed there rather than painting grey snow on snow. */
.snow { opacity: .9; }

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

@media (max-width: 575px) {
  /* One layer is plenty on a phone */
  .snow__layer--mid,
  .snow__layer--far { display: none; }
}

/* ======================================================== Hover: the gold
   Pale gold carries the hover state. On ink it is the text colour; on snow
   and linen it becomes the fill behind ink text, because pale gold type on
   a light ground is unreadable. Gold deep is the same hue taken down far
   enough to read as text and as a hairline on light grounds.
   ======================================================================== */

:root { --gold-deep: #8A6E2F; }

/* Text links */
body a:hover { color: var(--gold-deep); }
.on-ink a:hover,
.site-header--over a:hover,
.site-footer a:hover { color: var(--pale-gold); }

/* Navigation */
.site-header--over .site-nav a:hover { color: var(--pale-gold); }
.site-header--solid .site-nav a:hover { color: var(--gold-deep); }
.site-nav a.is-current { border-bottom-color: var(--gold-deep); }

.nav-cta:hover,
.site-header--over .nav-cta:hover,
.site-header--solid .nav-cta:hover {
  background: var(--pale-gold) !important;
  color: var(--ink) !important;
}

/* Buttons */
.btn-solid:hover,
.on-ink .btn-solid:hover {
  background: var(--pale-gold);
  color: var(--ink);
  border-color: var(--pale-gold);
}
.btn-outline:hover,
.on-ink .btn-outline:hover {
  background: var(--pale-gold);
  color: var(--ink);
  border-color: var(--pale-gold);
}
.btn-quiet:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* Small print links */
.detail-list dd a:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* Photography: a gold veil rather than a colour change */
.photo-grid img,
.about-strip img,
.gallery-grid img { transition: opacity .3s ease; }
.photo-grid img:hover,
.about-strip img:hover,
.gallery-grid img:hover { opacity: .88; }

/* ============================================ About and Gallery, as drawn
   The section label sits on its own row; the content runs the full measure
   beneath it. Replaces the earlier 4/8 split.
   ======================================================================== */

.section-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 56px;
}

.about-body { display: flex; flex-direction: column; gap: 34px; width: 100%; }

/* The opening paragraph introduces the text, so it sits a step above the body
   rather than a step below the heading. The old .lede ran to 36px, which read
   as a second title and left the 16px paragraphs under it looking like fine
   print. */
/* Two classes, because `.section p` in the legacy-override block below is more
   specific than a single class and would otherwise reset this to 16px. */
.about-body .about-lede {
  font-family: var(--display);
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0;
}
.about-body__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 72px;
}
.about-body .prose { font-size: 17px; line-height: 1.85; }

/* Three photographs edge to edge, no gaps: the section's own side padding is
   cancelled so the strip reaches both edges of the viewport. */
.about-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(56px, 6vw, 92px) calc(-1 * var(--gutter)) 0;
}
.about-strip img {
  display: block;
  width: 100%;
  height: clamp(260px, 30vw, 480px);
  object-fit: cover;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.photo-grid img { display: block; width: 100%; height: 320px; object-fit: cover; }

@media (max-width: 991px) {
  .section-label { margin-bottom: 32px; }
  .about-body__columns { grid-template-columns: 1fr; gap: 24px; }
  .about-strip img { height: clamp(180px, 26vw, 260px); }
  .photo-grid img { height: 220px; }
  .photo-grid { gap: 12px; }
}

/* ------------------------------------------------- Contact, supplementary ---
   The form's own rules live above. These add the gold hover and focus states
   and give the message box a sensible minimum.
   -------------------------------------------------------------------------- */

.field input:hover,
.field textarea:hover { border-bottom-color: var(--gold-deep); }

.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

.field textarea { resize: vertical; min-height: 120px; }

.cf-turnstile { margin-top: 4px; }

/* ================================================= Reveal on scroll ======
   Each section's content lifts a little as it comes into view. The movement
   is kept modest — 24px and a fade — so it reads as the page settling
   rather than as an effect.

   The selectors are scoped to .has-reveal, which the inline script in the head
   sets before first paint. Nothing is hidden unless the script that reveals it
   is running, so a failed or blocked script leaves the page fully readable.

   The two banners are left out on purpose: they are the first thing on screen
   and should be there instantly.
   ========================================================================= */

.has-reveal main .section > .shell,
.has-reveal main .section > .about-strip,
.has-reveal main .cta-band__copy {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.has-reveal main .section > .shell.is-visible,
.has-reveal main .section > .about-strip.is-visible,
.has-reveal main .cta-band__copy.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Someone who asks for less motion gets the content, not the movement. */
@media (prefers-reduced-motion: reduce) {
  .has-reveal main .section > .shell,
  .has-reveal main .section > .about-strip,
  .has-reveal main .cta-band__copy {
    opacity: 1;
    transform: none;
    transition: none;
  }
}