/* Islas Moriones Beach Resort: Version 5, "Warm Island Elegance"
   Reference: Amanpulo's film-first, photography-led layout, adapted for one resort.
   Sand surfaces, charcoal ink, the official #009891 teal kept for the logo and small accents,
   deep teal for buttons. Newsreader (display) + Manrope (text). */

:root {
  --sand: #F1E9DC;
  --linen: #F7F2E9;
  --dune: #E4D7C5;
  --ink: #292D29;
  --ink-2: #3A3F3A;
  --muted: #5E5A53;
  --brand-teal: #009891;
  --deep-teal: #135B56;
  --deep-teal-2: #0E4743;
  --line: #CFC4B4;
  --line-dark: rgba(241, 233, 220, .22);
  --white: #FFFFFF;

  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --max: 1320px;
  --prose: 640px;
  --gutter: clamp(20px, 4.4vw, 60px);
  --section: clamp(48px, 7vw, 88px);
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--sand); color: var(--ink);
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
figure { margin: 0; }
dialog { padding: 0; border: 0; }

:focus-visible { outline: 2px solid var(--deep-teal); outline-offset: 3px; }
.section--ink :focus-visible, .site-footer :focus-visible, .lightbox :focus-visible, .film :focus-visible { outline-color: var(--sand); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; background: var(--ink); color: var(--sand); font-weight: 600; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.prose { width: 100%; max-width: calc(var(--prose) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .75); }
.section--dune { background: var(--dune); }
.section--linen { background: var(--linen); }
.section--ink { background: var(--ink); color: var(--sand); }
.section-head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); }
.section-head.center { text-align: center; }
.section-head p:not(.eyebrow) { color: var(--muted); }
.section--ink .section-head p:not(.eyebrow) { color: rgba(241,233,220,.78); }
.section-head--split { max-width: none; display: grid; gap: 16px 48px; align-items: end; }
@media (min-width: 900px) { .section-head--split { grid-template-columns: 1fr 1fr; } }

/* ---------- Type ---------- */
.eyebrow { margin: 0 0 14px; font-family: var(--font-text); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--deep-teal); }
.eyebrow--sm { font-size: .68rem; margin-bottom: 6px; }
.section--ink .eyebrow { color: #7FD2CD; }
.h-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.15rem, 1.3rem + 3.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.015em; font-variation-settings: "opsz" 72; text-wrap: balance; margin-bottom: .3em; }
.h-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.3; color: var(--deep-teal); margin-bottom: 1em; }
.h-section { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.85rem); line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "opsz" 60; text-wrap: balance; margin-bottom: .45em; }
.h-section--sm { font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem); }
.h-card { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1.12rem + .45vw, 1.5rem); line-height: 1.2; margin-bottom: 6px; color: var(--ink); }
.section--ink .h-card { color: var(--sand); }
.lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); color: var(--muted); }
.note { font-size: .92rem; color: var(--muted); margin-top: 24px; }
.note a { color: var(--deep-teal); font-weight: 600; }
.label-line { font-size: .92rem; font-weight: 500; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- Buttons & links ---------- */
.btn {
  --bg: transparent; --fg: var(--ink); --bd: var(--ink); --bg-h: var(--ink); --fg-h: var(--sand);
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75em 1.6em;
  border: 1px solid var(--bd); border-radius: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-text); font-size: .9rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--bg-h); color: var(--fg-h); border-color: var(--bg-h); }
.btn--teal { --bg: var(--deep-teal); --fg: #fff; --bd: var(--deep-teal); --bg-h: var(--deep-teal-2); --fg-h: #fff; }
.btn--line { --fg: var(--ink); --bd: var(--ink); }
.btn--sand { --bg: var(--sand); --fg: var(--ink); --bd: var(--sand); --bg-h: #fff; --fg-h: var(--ink); }
.btn--sm { min-height: 42px; padding: .55em 1.15em; font-size: .84rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.actions--center { justify-content: center; }
.text-link { display: inline-flex; align-items: center; gap: .45em; margin-top: 8px; padding: 4px 0; border: 0; background: none; color: var(--deep-teal); font-weight: 600; font-size: .95rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover span { transform: translateX(4px); }
.section--ink .text-link { color: #7FD2CD; }
.icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(241,233,220,.5); border-radius: 50%; background: rgba(41,45,41,.55); color: var(--sand); transition: background-color .3s; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgba(41,45,41,.85); }

/* ---------- Header: masthead (menu · logo · availability) + property navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--sand); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(41,45,41,.35); }
.masthead { position: relative; max-width: 1440px; margin: 0 auto; height: var(--header-h); padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.menu-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 0; border: 0; background: none; color: var(--ink); font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.menu-toggle__bars { position: relative; width: 22px; height: 12px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: 5px; transform: rotate(-45deg); }
.brand { display: block; }
.brand img { width: 108px; }
.header-cta { justify-self: end; display: none; }
.subnav { display: block; border-top: 1px solid var(--line); }
.subnav ul { display: flex; justify-content: safe center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; gap: clamp(20px, 3vw, 44px); max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.subnav a { display: inline-block; padding: 12px 0 11px; border-bottom: 1px solid transparent; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); transition: color .25s, border-color .25s; }
.subnav a:hover { color: var(--deep-teal); }
.subnav ul::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
  .subnav a { padding: 10px 0 9px; font-size: .74rem; letter-spacing: .1em; }
  html { scroll-padding-top: calc(var(--header-h) + 52px); }
}
.subnav a[aria-current="page"] { color: var(--deep-teal); border-bottom-color: var(--deep-teal); }
@media (min-width: 1024px) {
  :root { --header-h: 80px; }
  .header-cta { display: inline-flex; }
  .brand img { width: 136px; }
  html { scroll-padding-top: 140px; }
}

.mobile-menu { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; gap: 28px; padding: calc(var(--header-h) + 28px) var(--gutter) 40px; overflow-y: auto; background: var(--sand); clip-path: inset(0 0 100% 0); transition: clip-path .5s var(--ease); }
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu ol { max-width: 720px; width: 100%; margin: 0 auto; border-top: 1px solid var(--line); }
.mobile-menu ol a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.2; text-decoration: none; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease), color .2s; }
.mobile-menu ol a:hover, .mobile-menu ol a[aria-current="page"] { color: var(--deep-teal); }
.mobile-menu.is-open ol a { opacity: 1; transform: none; transition-delay: calc(.08s + var(--i, 0) * .035s); }
.mobile-menu > .btn, .mobile-menu__contact { max-width: 720px; width: 100%; margin-inline: auto; }
.mobile-menu__contact { color: var(--muted); line-height: 2; }
.mobile-menu__contact a { text-decoration: none; }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { z-index: 200; }

/* ---------- Opening film ---------- */
.film { padding: 0 clamp(0px, 1.6vw, 24px); background: var(--sand); }
.film__frame { position: relative; overflow: hidden; height: clamp(300px, 52svh, 520px); background: #B9C9C1 url("../video/islas-moriones-hero-poster.jpg") center / cover no-repeat; }
.film__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.film__caption { position: absolute; left: 20px; bottom: 16px; margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.film__toggle { position: absolute; right: 14px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(20,24,22,.35); color: #fff; transition: background-color .3s; }
.film__toggle:hover { background: rgba(20,24,22,.65); }
.film__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.film__toggle .i-play { display: none; }
.film__toggle[aria-pressed="true"] .i-play { display: block; }
.film__toggle[aria-pressed="true"] .i-pause { display: none; }
@media (min-width: 900px) { .film__frame { height: clamp(460px, 66svh, 760px); } .film__caption { left: 28px; bottom: 24px; } .film__toggle { right: 24px; bottom: 20px; } }

/* Introductions */
.resort-intro { padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 64px); }
.resort-intro p:not(.eyebrow):not(.h-sub) { color: var(--muted); }
.page-intro { padding: clamp(40px, 6vw, 76px) 0 clamp(32px, 5vw, 56px); }
.page-intro .h-display { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 4rem); }

/* ---------- Photographs: shared cropping ---------- */
.m4 img, .feature__media img, .pair__item img, .tile__media img, .card__media img, .events img, .suite img, .mini-row img, .venue img, .inset img, .g img, .strip__track img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.2s var(--ease);
}

/* Home: four-photo preview */
.mosaic4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m4 { position: relative; overflow: hidden; background: var(--dune); }
.m4 figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: var(--sand); font-size: .78rem; font-weight: 500; }
.m4--a { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.m4--b, .m4--c { aspect-ratio: 4 / 5; }
.m4--d { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .mosaic4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(520px, 50vw, 680px); }
  .m4 { aspect-ratio: auto !important; }
  .m4--a { grid-column: 1; grid-row: 1 / 3; }
  .m4--b { grid-column: 2; grid-row: 1 / 3; }
  .m4--c { grid-column: 3; grid-row: 1; }
  .m4--d { grid-column: 3; grid-row: 2; }
}

/* Feature: large photo + editorial text */
.feature { display: grid; gap: 28px; align-items: center; }
.feature + .feature, .feature + .pair, .feature + .boats, .boats + .cards, .feature + .cards { margin-top: clamp(40px, 6vw, 72px); }
.feature__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.feature__media--wide { aspect-ratio: 3 / 2; }
.feature__media--tall { aspect-ratio: 4 / 5; }
.feature__text p:not(.eyebrow):not(.label-line) { color: var(--muted); }
.section--ink .feature__text p:not(.eyebrow) { color: rgba(241,233,220,.8); }
.feature__text .btn { margin-top: 10px; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); }
  .feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .feature--flip .feature__media { order: 2; }
}

/* Pair of linked photographs with labels */
.pair { display: grid; gap: 14px; }
.pair__item { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; color: #fff; text-decoration: none; background: var(--line); }
.pair__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,24,22,.62), rgba(20,24,22,0) 50%); }
.pair__item:hover img { transform: scale(1.03); }
.pair__label { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; display: grid; gap: 2px; font-family: var(--font-display); font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.15; }
.pair__label small { font-family: var(--font-text); font-size: .88rem; opacity: .92; }
@media (min-width: 700px) { .pair { grid-template-columns: 1fr 1fr; } }

/* Tiles: included amenities, consistent 4:3 */
.tiles { display: grid; gap: 28px 20px; grid-template-columns: 1fr; }
.tile__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); margin-bottom: 12px; }
.tile figcaption { color: var(--muted); font-size: .95rem; }
.tile:hover img { transform: scale(1.03); }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; } }

/* Cards: same ratio, aligned titles, equal gaps */
.cards { display: grid; gap: 32px 22px; grid-template-columns: 1fr; }
.cards--spaced { margin-top: clamp(40px, 6vw, 64px); }
.card { display: flex; flex-direction: column; }
.card__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); margin-bottom: 14px; }
.card p { color: var(--muted); font-size: .97rem; }
.section--ink .card p { color: rgba(241,233,220,.78); }
.card .text-link { margin-top: auto; padding-top: 8px; align-self: flex-start; }
.card:hover img, .stop:hover img { transform: scale(1.03); }
@media (min-width: 600px) { .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, 1fr); gap: 40px 26px; } .cards--4 { grid-template-columns: repeat(4, 1fr); gap: 32px 22px; } }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.facts li { padding: 3px 10px; border: 1px solid var(--line); background: var(--sand); font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.section--linen .facts li { background: var(--linen); }
.inline-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.inline-list li { padding: 5px 12px; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.inline-list--wide { margin: 0; }

/* Events (home) */
.events { display: grid; gap: 14px; }
.events__main { overflow: hidden; aspect-ratio: 4 / 3; }
.events__text { padding: 18px 0; }
.events__text p:not(.eyebrow) { color: rgba(241,233,220,.82); }
.events__side { overflow: hidden; aspect-ratio: 4 / 5; }
@media (max-width: 899.98px) { .events { grid-template-columns: 1fr 1fr; } .events__main, .events__text { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .events { grid-template-columns: 1.15fr .55fr .55fr; grid-template-rows: auto auto; gap: 18px 22px; align-items: start; }
  .events__main { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
  .events__text { grid-column: 2 / 4; grid-row: 1; padding: 8px 0 20px; }
  .events__side { grid-row: 2; }
}

/* Photo strip */
.strip__frame { position: relative; max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.strip__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.strip__track::-webkit-scrollbar { display: none; }
.strip__track li { flex: 0 0 clamp(170px, 44vw, 260px); scroll-snap-align: start; }
.strip__track button { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; overflow: hidden; background: var(--line); }
.strip__track button:hover img { transform: scale(1.04); }
.strip__track button:focus-visible { outline: 3px solid var(--deep-teal); outline-offset: -3px; }
.strip__arrow { position: absolute; top: 50%; transform: translateY(-50%); display: none; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--sand); color: var(--ink); }
.strip__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.strip__arrow[disabled] { opacity: 0; pointer-events: none; }
.strip__arrow--prev { left: calc(var(--gutter) - 23px); }
.strip__arrow--next { right: calc(var(--gutter) - 23px); }
@media (min-width: 900px) { .strip__track li { flex-basis: calc((100% - 60px) / 6); } .strip__arrow { display: grid; } }

/* Stay: Pool Suite composition */
.suite { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.suite__main { grid-column: 1 / -1; overflow: hidden; aspect-ratio: 4 / 3; }
.suite__a, .suite__b { overflow: hidden; aspect-ratio: 1; }
.suite__text { grid-column: 1 / -1; padding-top: 18px; }
.suite__text > p:not(.eyebrow) { color: var(--muted); }
@media (min-width: 900px) {
  .suite { grid-template-columns: 1fr 1fr 1.2fr; grid-template-rows: auto auto; gap: 14px; }
  .suite__main { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 11; }
  .suite__a { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; }
  .suite__b { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; }
  .suite__text { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: 0 0 0 clamp(16px, 2.5vw, 36px); }
}
.spec { margin: 20px 0 6px; border-top: 1px solid var(--line); }
.spec > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.spec dt { font-weight: 600; }
.spec dd { margin: 0; color: var(--muted); }
.mini-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.mini-row figure { overflow: hidden; aspect-ratio: 1; background: var(--line); }
.rates-note { margin-top: clamp(36px, 5vw, 56px); padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.rates-note p { margin: 0; color: var(--muted); max-width: 40em; }
.rates-note a:not(.btn) { color: var(--deep-teal); font-weight: 600; }

/* Experiences */
.inset { margin-top: 20px; max-width: 280px; overflow: hidden; aspect-ratio: 4 / 3; }
.boats { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.stop p:not(.eyebrow) { color: var(--muted); font-size: .95rem; }
.extras-band { display: grid; gap: 16px 40px; align-items: center; padding: clamp(24px, 4vw, 40px); background: var(--linen); border: 1px solid var(--line); }
.extras-band .note { margin: 0; }
@media (min-width: 900px) { .extras-band { grid-template-columns: 1fr 1.4fr; } .extras-band > .note, .extras-band > .btn, .extras-band > p:not(.eyebrow) { grid-column: 2; } .extras-band > .btn { justify-self: start; } }

/* Dining: menu card and tabs */
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 0; }
.hours > div { padding: 10px 14px; background: var(--linen); border-left: 2px solid var(--deep-teal); }
.hours dt { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--deep-teal); }
.hours dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.2rem; }
.menu-card { padding: clamp(22px, 4vw, 44px); background: var(--linen); border: 1px solid var(--line); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tabs [role="tab"] { position: relative; min-height: 46px; padding: 10px 14px; border: 0; background: none; color: var(--muted); font-size: .9rem; font-weight: 600; }
.tabs [role="tab"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--deep-teal); transform: scaleX(0); transition: transform .35s var(--ease); }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.tab-panel[hidden] { display: none; }
.menu-card__note { margin-bottom: 20px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.menu-cols { display: grid; gap: 28px 44px; }
@media (min-width: 640px) { .menu-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .menu-cols--3 { grid-template-columns: repeat(3, 1fr); } }
.menu-group { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.dish-list { display: grid; gap: 5px; }
.dish-list li { color: var(--muted); font-size: .95rem; }
.dish h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 4px; }
.dish p { color: var(--muted); font-size: .95rem; }

/* Gatherings: venue */
.venue { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.venue figure { position: relative; overflow: hidden; min-width: 0; }
.venue > * { min-width: 0; }
.venue figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 11px; background: var(--sand); font-size: .76rem; font-weight: 500; }
.venue__a { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.venue__b, .venue__c { aspect-ratio: 4 / 5; }
.venue__text { grid-column: 1 / -1; padding-top: 18px; }
.venue__text > p:not(.eyebrow) { color: var(--muted); }
@media (min-width: 900px) {
  .venue { grid-template-columns: 1.3fr .65fr 1fr; grid-template-rows: auto auto; gap: 14px; }
  .venue__a { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
  .venue__b { grid-column: 2; grid-row: 1; }
  .venue__c { grid-column: 2; grid-row: 2; }
  .venue__text { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: 0 0 0 clamp(14px, 2.4vw, 32px); }
}

/* Gallery */
.gallery-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.chip { min-height: 44px; padding: .5em 1.1em; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink-2); font-size: .84rem; font-weight: 600; letter-spacing: .04em; transition: background-color .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--sand); border-color: var(--ink); }
/* Justified rows: every photo keeps its own shape, so nothing is cropped */
.gallery-grid { --row: 170px; display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-grid::after { content: ""; flex: 999 1 0; }
.gallery-grid.is-justified::after { display: none; }
.gallery-grid.is-justified .g { flex: none; aspect-ratio: auto; }
.g { position: relative; flex: var(--ar) 1 calc(var(--ar) * var(--row)); aspect-ratio: var(--ar); overflow: hidden; background: var(--line); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.g.is-hiding { opacity: 0; transform: scale(.97); }
.g[hidden] { display: none; }
.g button { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; }
.g button:hover img, .g button:focus-visible img { transform: scale(1.04); }
.g button:focus-visible { outline: 3px solid var(--deep-teal); outline-offset: -3px; }
@media (min-width: 600px) { .gallery-grid { --row: 240px; gap: 10px; } }
@media (min-width: 900px) { .gallery-grid { --row: 300px; gap: 12px; } }
@media (min-width: 1300px) { .gallery-grid { --row: 350px; } }

/* Getting here */
.routes { display: grid; gap: 36px; margin-bottom: 24px; }
@media (min-width: 900px) { .routes { grid-template-columns: 1fr 1fr; gap: 48px; } }
.steps { counter-reset: s; border-top: 1px solid var(--line); margin-top: 10px; }
.steps li { counter-increment: s; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--line); color: var(--muted); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 13px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--deep-teal); color: #fff; font-size: .82rem; font-weight: 600; }

/* Contact */
.contact-grid { display: grid; gap: 20px; }
.contact-card { padding: clamp(24px, 4vw, 40px); background: var(--sand); border: 1px solid var(--line); }
.contact-card > p:not(.eyebrow):not(.note) { color: var(--muted); }
.contact-card .btn { margin-top: 6px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
.contact-rows { border-top: 1px solid var(--line); margin-top: 10px; }
.contact-row { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none; overflow-wrap: anywhere; transition: background-color .25s; }
.contact-row:hover { background: var(--linen); }
.contact-row__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--deep-teal); color: #fff; }
.contact-row__icon svg { width: 22px; height: 22px; }
.contact-row > span:not(.visually-hidden):not(.contact-row__icon) { display: grid; font-size: 1.02rem; font-weight: 500; min-width: 0; }
.contact-row small { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* FAQ, pets */
.faq-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; } }
.accordion { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 12px 0; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--deep-teal); }
.qa summary i { position: relative; flex: none; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; transition: transform .4s var(--ease), background-color .3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.qa[open] summary i { transform: rotate(180deg); background: var(--deep-teal); color: #fff; border-color: var(--deep-teal); }
.qa[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa__body { overflow: hidden; }
.qa__body p { padding-bottom: 18px; color: var(--muted); }
.qa__body a { color: var(--deep-teal); font-weight: 600; }
.pets { padding: clamp(22px, 4vw, 36px); background: var(--linen); border: 1px solid var(--line); }
.pets h2 { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; margin-bottom: 16px; }
.pets .eyebrow { margin-bottom: 8px; }
.tick-list { display: grid; gap: 8px; }
.tick-list li { position: relative; padding-left: 20px; color: var(--muted); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-teal); }

/* Closing */
.closing { padding: clamp(56px, 8vw, 96px) 0; background: var(--dune); }
.closing p { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep-teal-2); color: rgba(241,233,220,.86); }
.footer__top { max-width: var(--max); margin: 0 auto; padding: clamp(44px, 6vw, 68px) var(--gutter) 36px; display: grid; gap: 32px; }
.footer__logo img { width: 180px; }
.footer__cols { display: grid; gap: 28px; }
.footer__label { margin-bottom: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #9FDDD8; }
.footer__cols ul { display: grid; gap: 2px; }
.footer__cols a { display: inline-flex; min-height: 34px; align-items: center; text-decoration: none; color: var(--sand); overflow-wrap: anywhere; }
.footer__cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 700px) { .footer__cols { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 240px 1fr; } }
.footer__base { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) calc(22px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; border-top: 1px solid var(--line-dark); font-size: .84rem; }
.footer__base p { margin: 0; }
.credit a { color: var(--sand); text-underline-offset: 3px; }
@media (max-width: 639.98px) { .footer__base { justify-content: center; text-align: center; padding-bottom: calc(86px + env(safe-area-inset-bottom)); } }

.mobile-cta { position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; box-shadow: 0 10px 28px -12px rgba(0,0,0,.5); transform: translateY(calc(100% + 24px)); transition: transform .45s var(--ease), background-color .3s; }
.mobile-cta.is-visible { transform: none; }
@media (min-width: 1024px) { .mobile-cta { display: none; } }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--sand); }
.lightbox::backdrop { background: rgba(20,24,22,0); transition: background-color .35s; }
.lightbox.is-open::backdrop { background: rgba(20,24,22,.95); }
.lightbox__stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 56px 8px 76px; touch-action: pan-y; }
.lightbox__figure { display: grid; justify-items: center; gap: 10px; max-width: 100%; opacity: 0; transform: scale(.98); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.lightbox.is-open .lightbox__figure { opacity: 1; transform: none; }
.lightbox__figure img { max-width: 100%; max-height: calc(100svh - 160px); width: auto; height: auto; object-fit: contain; transition: opacity .25s, transform .35s var(--ease); }
.lightbox__figure.is-swapping img { opacity: 0; transform: translateX(var(--swap-dir, 12px)); }
.lightbox figcaption { text-align: center; font-size: .9rem; padding-inline: 56px; }
.lightbox__count { margin-left: 8px; color: #9FDDD8; }
.lightbox__close { position: absolute; top: 12px; right: 12px; }
.lightbox__prev, .lightbox__next { position: absolute; bottom: 16px; }
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next, .lightbox.is-single .lightbox__count { display: none; }
@media (min-width: 640px) { .lightbox__stage { padding: 52px 72px 16px; } .lightbox__figure img { max-height: calc(100svh - 104px); } .lightbox__prev, .lightbox__next { top: 50%; bottom: auto; transform: translateY(-50%); } }

/* ---------- Quiet reveals (content stays visible without JS) ---------- */
.js-anim [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .65s var(--ease); }
.js-anim [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
}
@media print { .site-header, .mobile-cta, .film, .lightbox { display: none !important; } .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* Events (home): main photo fills both rows so its bottom lines up with the two side photos */
@media (min-width: 900px) {
  .events { align-items: stretch; }
  .events__main { aspect-ratio: auto; min-height: 100%; }
  .events__side { align-self: end; }
}

/* Square feature photo (kayak), pair of small inset photos */
.feature__media--square { aspect-ratio: 1; }
.inset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; max-width: 560px; }
.inset-row .inset { margin: 0; max-width: none; }
/* Included amenities: seven tiles, last row centred */
@media (min-width: 900px) {
  .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 24px; }
  .tiles > .tile { flex: 0 0 calc((100% - 72px) / 4); }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 20px; }
  .tiles > .tile { flex: 0 0 calc((100% - 20px) / 2); }
}

/* Brochure facility list */
.glance { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.glance li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .97rem; }
.glance strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; margin-right: 4px; }
@media (min-width: 600px) { .glance { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* Menu overlay: calmer type size, and it covers the page navigation row */
.mobile-menu ol a { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); padding: 10px 0; }
body.menu-open .subnav { visibility: hidden; }

/* Film controls: play/pause, sound, volume; fade out 5 s after the last interaction */
.film__controls { position: absolute; right: 14px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(20,24,22,.45); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.film__controls.is-visible, .film__controls:has(:focus-visible) { opacity: 1; pointer-events: auto; }
.film__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: transparent; color: #fff; }
.film__btn:hover { background: rgba(255,255,255,.15); }
.film__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.film__btn .i-play, .film__btn .i-sound { display: none; }
.film__btn[data-film-toggle][aria-pressed="true"] .i-play { display: block; }
.film__btn[data-film-toggle][aria-pressed="true"] .i-pause { display: none; }
.film__btn[data-film-mute][aria-pressed="false"] .i-sound { display: block; }
.film__btn[data-film-mute][aria-pressed="false"] .i-muted { display: none; }
.film__vol { display: flex; align-items: center; padding: 0 8px 0 2px; }
.film__vol input { width: 90px; accent-color: #fff; cursor: pointer; }
@media (min-width: 900px) { .film__controls { right: 24px; bottom: 20px; } .film__vol input { width: 110px; } }
@media (max-width: 479.98px) { .film__vol { display: none; } }
@media (hover: none) { .film__vol { display: none; } }

/* Kubo and tent photos are near-square: show them whole */
.pair__item { aspect-ratio: 936 / 870; }

/* Kubo / tent pair: caption below the photo instead of over it */
.pair__item { aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; background: none; color: var(--ink); }
.pair__item::after { display: none; }
.pair__item picture, .pair__item > img { display: block; }
.pair__item img { aspect-ratio: 936 / 870; height: auto; }
.pair__item:hover img { transform: none; opacity: .92; }
.pair__label { position: static; padding-top: 14px; color: var(--ink); }
.pair__label small { color: var(--muted); opacity: 1; }
.pair__item:hover .pair__label { color: var(--deep-teal); }

/* Slideshow: included amenities */
.slider { position: relative; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; column-gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline-offset: 6px; }
.slide-item { scroll-snap-align: start; }
@media (min-width: 600px) { .slider__track { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (min-width: 900px) { .slider__track { grid-auto-columns: calc((100% - 48px) / 3); column-gap: 24px; } }
.slider__controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.slider__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.slider__btn:hover { border-color: var(--ink); }
.slider__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.slider__btn .i-play { display: none; }
.slider__btn[aria-pressed="true"] .i-play { display: block; }
.slider__btn[aria-pressed="true"] .i-pause { display: none; }
.slider__dots { display: flex; }
.slider__dot { position: relative; width: 22px; height: 44px; padding: 0; border: 0; background: none; }
.slider__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 4px; background: var(--line); transform: translate(-50%, -50%); transition: background-color .25s, width .25s; }
.slider__dot[aria-current="true"]::before { width: 18px; background: var(--deep-teal); }

/* Showcase slideshow (Amanpulo-style): full-bleed row of mixed-shape photos, the current one centred,
   neighbours fading towards the edges */
.slider { margin-inline: calc(50% - 50vw); }
.slider__track {
  grid-auto-columns: clamp(220px, 21vw, 300px); column-gap: clamp(28px, 5vw, 72px); align-items: center;
  padding-inline: calc(50vw - clamp(220px, 21vw, 300px) / 2); scroll-padding-inline: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
@media (min-width: 600px) { .slider__track { grid-auto-columns: clamp(220px, 21vw, 300px); } }
@media (min-width: 900px) { .slider__track { grid-auto-columns: clamp(220px, 21vw, 300px); column-gap: clamp(28px, 5vw, 72px); } }
.slide-item { scroll-snap-align: center; opacity: .55; transition: opacity .5s var(--ease); }
.slide-item.is-current { opacity: 1; }
.slide-item:nth-child(3n+1) .tile__media { aspect-ratio: 4 / 3; }
.slide-item:nth-child(3n+2) .tile__media { aspect-ratio: 3 / 4; }
.slide-item:nth-child(3n) .tile__media { aspect-ratio: 1; }
.slide-item:nth-child(3n+1) { align-self: start; padding-top: 60px; }
.slide-item:nth-child(3n) { align-self: end; padding-bottom: 20px; }
.slide-item .tile figcaption { font-size: .9rem; }
.slide-item .h-card { font-size: 1.2rem; }
@media (max-width: 599.98px) {
  .slider__track { grid-auto-columns: 68vw; column-gap: 20px; padding-inline: 16vw;
    -webkit-mask-image: none; mask-image: none; }
  .slide-item:nth-child(n) { align-self: center; padding: 0; }
}
/* Photo-only showcase: slightly larger frames, no captions */
.slider--plain .slider__track { grid-auto-columns: clamp(240px, 24vw, 340px); padding-inline: calc(50vw - clamp(240px, 24vw, 340px) / 2); }
.slider--plain .tile__media { margin-bottom: 0; }
@media (max-width: 599.98px) { .slider--plain .slider__track { grid-auto-columns: 68vw; padding-inline: 16vw; } }

/* Showcase slider, matched to the reference: equal widths, alternating landscape / portrait / square,
   every photo centred on the same horizontal line; captions hang below without shifting the photos */
.slider__track { align-items: center; padding-bottom: 96px; }
.slider--plain .slider__track { padding-bottom: 8px; }
.slide-item:nth-child(n) { align-self: center; padding: 0; }
.slide-item .tile { position: relative; }
.slide-item .tile__media { margin: 0; }
.slide-item:nth-child(3n+1) .tile__media { aspect-ratio: 1.63; }
.slide-item:nth-child(3n+2) .tile__media { aspect-ratio: .76; }
.slide-item:nth-child(3n) .tile__media { aspect-ratio: 1; }
.slide-item figcaption { position: absolute; left: 0; right: 0; top: 100%; padding-top: 12px; }
.slider .tile__media img { object-position: var(--pos, 50% 50%); }

/* Edge arrows: on the left and right of the photo row, fading out 3 s after the last interaction */
.slider__arrow { position: absolute; z-index: 2; top: calc(50% - 48px - 34px); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(41,45,41,.25); border-radius: 50%; background: rgba(247,242,233,.92); color: var(--ink); box-shadow: 0 6px 20px -10px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.slider--plain .slider__arrow { top: calc(50% - 24px - 34px); }
.slider__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.slider__arrow--prev { left: max(12px, calc(var(--gutter) - 8px)); }
.slider__arrow--next { right: max(12px, calc(var(--gutter) - 8px)); }
.slider.arrows-on .slider__arrow, .slider__arrow:focus-visible { opacity: 1; pointer-events: auto; }
.slider__arrow:hover { background: #fff; }
@media (max-width: 599.98px) { .slider__track { padding-bottom: 104px; } }

/* Photo strip: same steady rhythm as the slideshows (landscape / portrait / square, equal widths,
   centred on one line) on every screen size */
.strip__track { align-items: center; }
.strip__track li { flex: 0 0 clamp(200px, 58vw, 260px); }
.strip__track button { aspect-ratio: auto; }
.strip__track li:nth-child(3n+1) button { aspect-ratio: 1.63; }
.strip__track li:nth-child(3n+2) button { aspect-ratio: .76; }
.strip__track li:nth-child(3n) button { aspect-ratio: 1; }
@media (min-width: 900px) { .strip__track { gap: 28px; } .strip__track li { flex-basis: calc((100% - 5 * 28px) / 5.2); } }
/* Strip arrows fade like the slideshow arrows */
.strip__arrow { opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
.strip__frame.arrows-on .strip__arrow:not([disabled]), .strip__arrow:focus-visible { opacity: 1; pointer-events: auto; }
@media (max-width: 899.98px) { .strip__arrow { display: grid; } }
/* Slideshows on phones keep the same alternating shapes and one centre line */
@media (max-width: 599.98px) { .slider__track { grid-auto-columns: 64vw; padding-inline: 18vw; } }

/* Steady two-shape rhythm everywhere: landscape, portrait, landscape, portrait... same width, one centre line */
.slide-item:nth-child(odd) .tile__media, .strip__track li:nth-child(odd) button { aspect-ratio: 4 / 3; }
.slide-item:nth-child(even) .tile__media, .strip__track li:nth-child(even) button { aspect-ratio: 3 / 4; }
.slider__controls { display: none; }
.slider__track { padding-bottom: 96px; }
.slider--plain .slider__track { padding-bottom: 24px; }

.strip__arrow--prev { left: max(8px, calc(var(--gutter) - 23px)); }
.strip__arrow--next { right: max(8px, calc(var(--gutter) - 23px)); }

/* Bigger slideshow photos */
.slider__track { grid-auto-columns: clamp(260px, 27vw, 400px); padding-inline: calc(50vw - clamp(260px, 27vw, 400px) / 2); column-gap: clamp(28px, 4vw, 60px); }
.slider--plain .slider__track { grid-auto-columns: clamp(270px, 29vw, 420px); padding-inline: calc(50vw - clamp(270px, 29vw, 420px) / 2); }
@media (max-width: 599.98px) { .slider__track, .slider--plain .slider__track { grid-auto-columns: 76vw; padding-inline: 12vw; column-gap: 16px; } }

/* Footer: current page highlighted */
.footer__cols a[aria-current="page"] { color: #9FDDD8; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
/* Coming soon note */
.soon { margin-top: 14px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .95rem; color: var(--ink-2); }
.soon span { padding: 4px 12px; background: var(--deep-teal); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* Captions on one line: every slide sits in a portrait-height box, photo centred inside it,
   caption placed just below the box */
.slider:not(.slider--plain) .slide-item .tile { aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: center; position: relative; }
.slider:not(.slider--plain) .slide-item .tile__media { flex: none; width: 100%; }
.slider:not(.slider--plain) .slide-item figcaption { position: absolute; left: 0; right: 0; top: 100%; }
/* loop clones keep the shapes: alternate by position counted within each copy */

/* Opening film: edge to edge, no side gaps */
.film { padding: 0; }
/* Gallery-preview slideshow: whole photo is a button that opens the viewer */
.slide-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.slide-open:focus-visible { outline: 3px solid var(--deep-teal); outline-offset: -3px; }

/* Two equal tent photos stacked */
.feature__stack { display: grid; gap: 14px; }
.feature__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Amenities slideshow: photos only, no captions */
.slider .slide-item figcaption { display: none; }
.slider__track { padding-bottom: 24px; }

/* Gatherings venue: main photo fills both rows so all photos end on the same line */
@media (min-width: 900px) {
  .venue { align-items: stretch; }
  .venue__a { aspect-ratio: auto; min-height: 100%; }
  /* side photos fill their column and share the height of the text, never wider than the column */
  .venue { grid-template-rows: 1fr 1fr; }
  .venue__b, .venue__c { aspect-ratio: auto; width: 100%; min-height: clamp(190px, 19vw, 300px); }
}

/* Gallery filters stay visible while scrolling, just below the header */
.gallery-filter { position: sticky; top: var(--hdr, var(--header-h)); z-index: 50; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter); background: var(--sand); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.gallery-filter::-webkit-scrollbar { display: none; }
.gallery-filter .chip { flex: none; }
.gallery-filter.is-stuck { box-shadow: 0 8px 18px -14px rgba(41,45,41,.45); }
@media (min-width: 900px) { .gallery-filter { justify-content: center; } }

/* Gatherings band (home): sand-texture photo with a light wash so dark text reads clearly */
.section--sandbg { position: relative; isolation: isolate; color: var(--ink);
  background: linear-gradient(rgba(241,233,220,.78), rgba(241,233,220,.82)), url("../img/v5/sand-bg-900.jpg") center / cover no-repeat; }
@media (min-width: 900px) { .section--sandbg { background-image: linear-gradient(rgba(241,233,220,.78), rgba(241,233,220,.82)), image-set(url("../img/v5/sand-bg-1800.webp") type("image/webp"), url("../img/v5/sand-bg-1800.jpg") type("image/jpeg")); } }
.section--sandbg .events__text p:not(.eyebrow) { color: var(--ink-2); }
.section--sandbg .eyebrow { color: var(--deep-teal); }
.section--sandbg .h-section { color: var(--ink); }

/* Skylight Dining band: fine-sand photo with a light wash */
.section--sandbg2 { color: var(--ink);
  background: linear-gradient(rgba(241,233,220,.62), rgba(241,233,220,.7)), url("../img/v5/sand-bg2-900.jpg") center / cover no-repeat; }
@media (min-width: 900px) { .section--sandbg2 { background-image: linear-gradient(rgba(241,233,220,.62), rgba(241,233,220,.7)), image-set(url("../img/v5/sand-bg2-1800.webp") type("image/webp"), url("../img/v5/sand-bg2-1800.jpg") type("image/jpeg")); } }
.section--sandbg2 .feature__text p:not(.eyebrow) { color: var(--ink-2); }

/* Experiences "Included with your stay" band: sand photo with a stronger wash behind the heading */
.section--sandbg3 { color: var(--ink);
  background: linear-gradient(rgba(241,233,220,.86), rgba(241,233,220,.6) 34%, rgba(241,233,220,.6)), url("../img/v5/sand-bg4-900.jpg") center / cover no-repeat; }
@media (min-width: 900px) { .section--sandbg3 { background-image: linear-gradient(rgba(241,233,220,.86), rgba(241,233,220,.6) 34%, rgba(241,233,220,.6)), image-set(url("../img/v5/sand-bg4-1800.webp") type("image/webp"), url("../img/v5/sand-bg4-1800.jpg") type("image/jpeg")); } }
.section--sandbg3 .section-head p:not(.eyebrow), .section--sandbg3 .soon { color: var(--ink); font-weight: 500; }
.section--sandbg3 .h-section { color: var(--ink); }

.section--sandbg2 .suite__text > p:not(.eyebrow), .section--sandbg2 .spec dd { color: var(--ink-2); }

/* Gatherings venue: wet-sand photo, darker tone, so a stronger cream wash keeps the text readable */
.section--sandbg5 { color: var(--ink);
  background: linear-gradient(rgba(241,233,220,.8), rgba(241,233,220,.84)), url("../img/v5/sand-bg5-900.jpg") center / cover no-repeat; }
@media (min-width: 900px) { .section--sandbg5 { background-image: linear-gradient(rgba(241,233,220,.8), rgba(241,233,220,.84)), image-set(url("../img/v5/sand-bg5-1800.webp") type("image/webp"), url("../img/v5/sand-bg5-1800.jpg") type("image/jpeg")); } }
.section--sandbg5 .venue__text > p:not(.eyebrow), .section--sandbg5 .spec dd { color: var(--ink-2); }

/* Getting Here "Where to find us": rippled-sand photo, strong cream wash for dark text */
.section--sandbg6 { color: var(--ink);
  background: linear-gradient(rgba(241,233,220,.8), rgba(241,233,220,.84)), url("../img/v5/sand-bg6-900.jpg") center 70% / cover no-repeat; }
@media (min-width: 900px) { .section--sandbg6 { background-image: linear-gradient(rgba(241,233,220,.8), rgba(241,233,220,.84)), image-set(url("../img/v5/sand-bg6-1800.webp") type("image/webp"), url("../img/v5/sand-bg6-1800.jpg") type("image/jpeg")); } }
.section--sandbg6 .feature__text p:not(.eyebrow) { color: var(--ink-2); }

/* Stronger, even wash on all sand-photo sections so text stays crisp */
.section--sandbg, .section--sandbg2, .section--sandbg3, .section--sandbg5, .section--sandbg6 { position: relative; isolation: isolate; }
.section--sandbg::before, .section--sandbg2::before, .section--sandbg3::before, .section--sandbg5::before, .section--sandbg6::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(244,238,228,.55); pointer-events: none; }
.section--sandbg p, .section--sandbg2 p, .section--sandbg3 p, .section--sandbg5 p, .section--sandbg6 p,
.section--sandbg dd, .section--sandbg2 dd, .section--sandbg3 dd, .section--sandbg5 dd, .section--sandbg6 dd { color: var(--ink) !important; }
.section--sandbg .eyebrow, .section--sandbg2 .eyebrow, .section--sandbg3 .eyebrow, .section--sandbg5 .eyebrow, .section--sandbg6 .eyebrow { color: var(--deep-teal-2) !important; font-weight: 700; }
.section--sandbg .spec > div, .section--sandbg2 .spec > div, .section--sandbg5 .spec > div, .section--sandbg2 .spec, .section--sandbg5 .spec { border-color: rgba(41,45,41,.22); }

/* Card with two photos side by side (Mountain bikes) */
.card__media:has(> picture + picture) { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: none; }
.card__media:has(> picture + picture) > picture { display: block; height: 100%; overflow: hidden; min-width: 0; }

/* Easter Sunday Café logo beside the menu heading */
.cafe-head { display: flex; align-items: center; gap: 20px; }
.cafe-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (max-width: 600px) { .cafe-logo { width: 72px; height: 72px; } }

/* Slides with a tall alternative: the frame's shape picks the photo */
.tile__media.has-alt, figure.has-alt { container-type: size; }
.has-alt .v-land, .has-alt .v-port { display: block; width: 100%; height: 100%; }
.has-alt .v-land picture, .has-alt .v-port picture { height: 100%; }
.has-alt .v-port { display: none; }
@container (orientation: portrait) {
  .has-alt .v-land { display: none; }
  .has-alt .v-port { display: block; }
}

/* Wedding photos: use the full text-column width */
.inset-row--wide { max-width: none; gap: 12px; }
.inset-row--wide .inset { aspect-ratio: 4 / 3.4; }

/* Pet policy photo */
.pets__photo { margin: 0 0 20px; overflow: hidden; }
.pets__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 65%; }

/* Resort at a glance: the activities line spans both columns */
.glance .glance__wide { grid-column: 1 / -1; line-height: 1.6; }
.glance__label { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--deep-teal); margin-bottom: 4px; }

/* Dive centre band under the marine life cards */
.dive-band { margin-top: clamp(28px, 4vw, 44px); }

/* Resort at a glance: one photo at its natural shape, centred beside the list */
.glance-photos { display: grid; }
.glance-photos .feature__media { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .feature:has(> .glance-photos) { align-items: center; }
}

.shells, .jetskis { margin-top: clamp(36px, 5vw, 64px); }

/* Dive centre photos above the diving band */
.dive-photos { display: grid; gap: 12px; margin-top: clamp(36px, 5vw, 64px); }
.dive-photos .feature__media { aspect-ratio: 4 / 3; }
.dive-photos + .dive-band { margin-top: 12px; }
@media (min-width: 640px) { .dive-photos { grid-template-columns: 1fr 1fr; } }

/* Back link at the top of inner pages */
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: clamp(8px, 2vw, 20px); color: var(--ink-2); font-size: .86rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.back-link span { transition: transform .25s var(--ease); }
.back-link:hover { color: var(--deep-teal); }
.back-link:hover span { transform: translateX(-3px); }

/* Topic enquiry pages: details beside a short form */
.ask { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
.ask__info .feature__media { aspect-ratio: 4 / 3; margin-bottom: 26px; }
.ask-form { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 22px; }
.ask-field { display: grid; gap: 6px; }
.ask-field label { font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
.ask-field input, .ask-field select, .ask-field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
.ask-field textarea { resize: vertical; min-height: 110px; }
.ask-field input:focus-visible, .ask-field select:focus-visible, .ask-field textarea:focus-visible { outline: 2px solid var(--deep-teal); outline-offset: 1px; border-color: var(--deep-teal); }
.ask-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ask-actions .btn { margin-top: 0; }
@media (min-width: 600px) {
  .ask-form { grid-template-columns: 1fr 1fr; }
  .ask-field--full, .ask-actions { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .ask { grid-template-columns: 1fr 1.05fr; } }

/* Slideshows: one constant 3:2 frame for every photo. Neighbours sit small and faded;
   the photo in the centre grows to full size, so the highlighted photo is always the same size */
.slider .slider__track { --sw: clamp(300px, 36vw, 540px); grid-auto-columns: var(--sw); padding-inline: calc(50vw - var(--sw) / 2); column-gap: clamp(6px, 1vw, 14px); }
.slider .slide-item .tile, .slider:not(.slider--plain) .slide-item .tile { aspect-ratio: auto; display: block; }
.slider .slide-item:nth-child(n) .tile__media { aspect-ratio: 3 / 2; width: 100%; margin: 0; }
.slider .slide-item { margin-inline: calc(var(--sw) * -.07); transform: scale(.72); opacity: .5; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.slider .slide-item.is-current { transform: none; opacity: 1; }
.slider .slider__arrow, .slider--plain .slider__arrow { top: calc(50% - 24px); }
@media (max-width: 599.98px) {
  .slider .slider__track { --sw: 76vw; column-gap: 0; }
  .slider .slide-item { margin-inline: calc(var(--sw) * -.04); transform: scale(.84); }
}
@media (prefers-reduced-motion: reduce) { .slider .slide-item { transition: none; } }

/* Birds: the two photos stay side by side at every width */
.bird-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vw, 14px); }

/* Friends on the sand: one soft panel, heading centred above three matching portraits */
.friends { margin-top: clamp(36px, 5vw, 64px); padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 56px); background: var(--linen); border: 1px solid var(--line); }
.friends__head { max-width: 40em; margin: 0 auto clamp(24px, 4vw, 44px); text-align: center; }
.friends__head p:not(.eyebrow) { margin-bottom: 0; color: var(--muted); font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.7; }
.friends__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(10px, 2vw, 24px); }
.friends__item { margin: 0; }
.friends__item .feature__media { aspect-ratio: 4 / 5; }
.friends__item figcaption { padding-top: 10px; font-family: var(--font-display); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); text-align: center; }
.friends__item:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
.friends__item:nth-child(2) .feature__media { aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
  .friends__row { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .friends__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .friends__item:nth-child(n) .feature__media { aspect-ratio: 4 / 5; }
  .friends__item:not(:nth-child(2)) { margin-top: clamp(20px, 3vw, 40px); }
}

/* Banana boat: wider view showing the flags and the palm */
.banana-frame { aspect-ratio: 1090 / 929; }