.hero {
  display: grid;
  width: calc(100% - var(--gutter) * 2);
  max-width: 83rem;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 4.4vw, 5rem);
  margin: clamp(2rem, 4vw, 4.5rem) auto 2.75rem;
}

.hero-copy { min-width: 0; padding-bottom: 2rem; }
.hero .eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
.hero .eyebrow::before { content: ""; width: 2rem; height: 1px; flex: none; background: var(--accent); }
.hero h1 { font-size: clamp(3.5rem, 5.25vw, 5.8rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: initial; }
.hero h1 em { color: var(--ink); }
.hero-lead { max-width: 22rem; margin-block: 1.5rem 2rem; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.hero-booking-note { margin-top: .7rem; color: var(--muted); font-size: .75rem; }
.hero-explore { margin-top: 2rem; font-size: .8rem; font-weight: 400; }

.hero-visual { position: relative; min-width: 0; height: clamp(32rem, 46vw, 42rem); }
.hero-media { position: absolute; top: 0; right: 0; left: 1.8rem; height: 82%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 40%; }
.hero-detail { position: absolute; left: -2rem; bottom: 0; width: 47%; padding: .7rem .7rem 0; background: var(--paper); }
.hero-detail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-detail figcaption { padding-block: .65rem .3rem; color: var(--muted); font-size: .7rem; line-height: 1.4; }
.hero-caption { position: absolute; right: 0; bottom: 2.2rem; color: var(--muted); font-family: var(--display); font-size: 1.1rem; font-style: italic; line-height: 1.5; }

.stay-strip {
  display: grid;
  width: calc(100% - var(--gutter) * 2);
  max-width: 83rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-inline: auto;
  padding: 1.2rem 0;
  border-block: 1px solid var(--line);
  background: transparent;
}

.stay-fact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  padding: .7rem clamp(.75rem, 2vw, 1.5rem);
  border-right: 0;
}

.stay-fact:first-child { padding-left: 0; }
.stay-fact:last-child { padding-right: 0; border: 0; }
.stay-fact strong { font: 400 clamp(1.05rem, 1.7vw, 1.4rem)/1.25 var(--display); letter-spacing: -.02em; }
.stay-fact > span, .stay-rating a > span { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.stay-rating a { display: grid; gap: .25rem; text-decoration: none; }
.stay-rating a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; }
.rating-star { color: var(--accent); font: 1rem var(--body); }

.chalet-section, .spa-inner, .location-inner, .romance, .booking-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.chalet-section { padding-block: var(--section); }
.chalet-image img, .location-image img { aspect-ratio: 6 / 5; object-fit: cover; }
.chalet-image img { object-position: 51% 54%; }

.chalet-image figcaption, .spa-image figcaption, .location-image figcaption {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .85rem;
}

.chalet-copy > p:not(.eyebrow), .location-copy > p:not(.eyebrow), .romance-copy > p:not(.eyebrow) {
  max-width: 39rem;
  margin-top: 1.3rem;
  color: var(--muted);
}

.chalet-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem 1.25rem;
  margin: 1.5rem 0 .8rem;
}

.chalet-details > div { padding-top: .65rem; border-top: 1px solid var(--line); }
.chalet-details dt { font-weight: 500; }
.chalet-details dd { margin: .18rem 0 0; color: var(--muted); font-size: .925rem; line-height: 1.5; }

.spa-section { background: var(--deep); color: var(--white); }
.spa-inner { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); padding-block: clamp(3rem, 6vw, 6rem); }
.spa-section .eyebrow, .booking .eyebrow { color: var(--gold); }
.spa-section h2 em, .booking h2 em { color: var(--gold); }
.spa-section .text-link, .booking .text-link { color: var(--white); }
.spa-section :focus-visible, .booking :focus-visible { outline-color: var(--gold); }
.spa-copy > p:not(.eyebrow), .booking p:not(.eyebrow) { max-width: 32rem; margin-block: 1.25rem .85rem; color: #e2ded5; }
.spa-image img { aspect-ratio: 4 / 3; object-fit: cover; }
.spa-image figcaption { color: #c6c0b3; }

.gallery { padding-block: var(--section); }
.gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.gallery-heading > p { max-width: 20rem; font-size: .925rem; color: var(--muted); }
.gallery-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.photo-link { position: relative; display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.photo-link:focus-visible { outline-offset: -5px; }
.gallery-more .photo-link { height: auto; aspect-ratio: 4 / 3; }
.photo-link img { width: 100%; height: 100%; object-fit: cover; }

.enlarge {
  position: absolute;
  top: .8rem;
  right: .8rem;
  padding: .28rem .55rem;
  border: 1px solid #fff5;
  background: #27251fe8;
  color: var(--white);
  font-size: .79rem;
  font-weight: 500;
}

.photo-link:hover .enlarge { background: var(--white); color: var(--deep); }
.gallery figcaption { padding: .65rem 0; color: var(--muted); font-size: .9rem; }

.slideshow-stage {
  min-width: 0;
  height: clamp(22rem, 46vw, 34rem);
  overflow: hidden;
  background: var(--sand);
  touch-action: pan-y pinch-zoom;
}

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

.slideshow-stage .photo-link img { object-fit: contain; }
.slideshow-stage figcaption { padding: .9rem 0; font-family: var(--display); font-size: 1.1rem; font-style: italic; border-bottom: 1px solid var(--line); background: var(--paper); }

.slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: .6rem;
  padding-block: .65rem;
}

.slideshow-controls button, .gallery-thumbs button, .photo-viewer button { cursor: pointer; }
.slideshow-controls button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .35rem .65rem;
  border: 1px solid #acb0a0;
  background: transparent;
  font-size: .875rem;
  font-weight: 500;
}

.slideshow-controls button:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.slideshow-controls [data-position] { min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }
.slideshow-controls [data-play] { min-width: 5.5rem; }

.gallery-thumbs {
  display: flex;
  min-width: 0;
  gap: .45rem;
  overflow-x: auto;
  padding: .3rem .2rem .65rem;
  scrollbar-color: #898e7c var(--sand);
}

.gallery-thumbs button {
  flex: 0 0 4.5rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: .18rem;
  border: 2px solid transparent;
  background: transparent;
}

.gallery-thumbs button:hover { border-color: #9a9c89; }
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--accent); }
.gallery-thumbs button:focus-visible { outline-offset: -2px; }
.gallery-thumbs img { aspect-ratio: 4 / 3; object-fit: cover; }

.viewer-open { overflow: hidden; }

.photo-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(.85rem, 3vw, 2rem);
  border: 0;
  background: var(--deep);
  color: var(--white);
}

.photo-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .85rem; }
.photo-viewer::backdrop { background: var(--deep); }
.viewer-toolbar, .viewer-bottom { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.viewer-toolbar h2 { font-size: clamp(1.1rem, 3vw, 1.55rem); }
.viewer-toolbar button span { margin-left: .35rem; }
.viewer-stage { min-width: 0; min-height: 0; touch-action: pan-y pinch-zoom; }
.viewer-stage img { width: 100%; height: 100%; object-fit: contain; }
.viewer-controls { display: flex; flex: none; align-items: center; gap: .65rem; }
.viewer-controls span { min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }
.photo-viewer button { min-width: 2.75rem; min-height: 2.75rem; padding: .4rem .7rem; border: 1px solid #ffffff70; background: transparent; }
.photo-viewer button:hover { background: #ffffff1f; }
.photo-viewer :focus-visible { outline-color: var(--gold); }

.location-section { background: var(--sand); }
.location-inner { padding-block: clamp(3rem, 6vw, 6.25rem); }
.location-image img { aspect-ratio: 5 / 4; object-position: 55% 48%; }
.location-links { display: grid; gap: .12rem; margin-top: .8rem; }

.romance { align-items: start; padding-block: var(--section); }
.romance-copy .text-link { margin-top: 1rem; }

.offer {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-top: 2px solid #b8a17a;
  background: var(--white);
}

.offer h3 { margin-bottom: .65rem; }
.offer-items { margin: 0 0 .65rem; }
.offer-items > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .12rem .6rem;
  padding: .65rem 0;
  border-top: 1px solid var(--line);
}

.offer-items dt { font-weight: 500; }
.offer-items dd { margin: 0; }
.offer-price { font: 400 1.25rem/1.3 var(--display); white-space: nowrap; }
.offer-detail { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }
.offer-combined { color: var(--forest); }
.offer .small { color: var(--muted); }

.booking { background: #2d2d28; color: var(--white); }
.booking-inner { padding-block: clamp(3.25rem, 6vw, 6rem); }
.booking .button { margin-top: .55rem; }
.booking-details dl { margin: 0; }
.booking-details dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid #f1e7d14f; }
.booking-details dd { margin: 0; font-weight: 500; }
.booking-details .text-link { margin-top: .4rem; }

@media (max-width: 760px) {
  .stay-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: .65rem; }
  .stay-fact { padding-block: .75rem; }
  .stay-fact:nth-child(even) { border-right: 0; }
  .stay-fact:nth-child(3) { padding-left: 0; }
  .stay-fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .chalet-section, .spa-inner, .location-inner, .romance, .booking-inner { grid-template-columns: 1fr; }
  .chalet-copy { grid-row: 1; }
  .chalet-image img, .location-image img { aspect-ratio: 4 / 3; }

  .gallery-heading { display: block; }
  .gallery-heading > p { max-width: 32rem; margin-top: .65rem; }
  .gallery-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slideshow-stage { height: clamp(19rem, 77vw, 29rem); }
  .viewer-bottom { flex-direction: column; text-align: center; }
  .viewer-bottom p { font-size: .9rem; }
}

@media (max-width: 420px) {
  .gallery-more { grid-template-columns: 1fr; }
  .gallery-thumbs button { flex-basis: 3.9rem; }
}

@media print {
  .hero { min-height: auto; background: white; color: black; }
  .hero-media, .hero::after, .slideshow-controls, .gallery-thumbs { display: none; }
}


@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; margin-top: 1.75rem; margin-bottom: 2.5rem; }
  .hero-visual { grid-row: 1; height: clamp(20rem, 72vw, 32rem); }
  .hero-media { left: 0; height: 83%; }
  .hero-media img { object-position: 54% 43%; }
  .hero-detail { left: .7rem; width: 46%; padding: .5rem .5rem 0; }
  .hero-detail figcaption { font-size: .65rem; }
  .hero-caption { display: none; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(3.15rem, 10.3vw, 4.5rem); }
  .hero .eyebrow { margin-bottom: 1.1rem; }
  .hero-lead { margin-block: 1.25rem 1.6rem; max-width: 31rem; }
  .hero-explore { margin-top: 1.2rem; }
  .stay-strip { padding-inline: 0; }
}

@media print {
  .hero { display: block; }
  .hero-visual { display: none; }
  .slideshow-controls, .gallery-thumbs { display: none; }
}